70 lines
2.3 KiB
CSS
70 lines
2.3 KiB
CSS
/* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
|
|
.swatch-input__input + .swatch-input__label {
|
|
--swatch-input--size: 4.4rem;
|
|
--swatch-input--border-radius: 50%;
|
|
|
|
display: inline-block;
|
|
border-radius: var(--swatch-input--border-radius);
|
|
cursor: pointer;
|
|
outline-offset: 0.2rem;
|
|
forced-color-adjust: none;
|
|
}
|
|
|
|
.swatch-input__input + .swatch-input__label.swatch-input__label--square {
|
|
--swatch-input--border-radius: 0.2rem;
|
|
}
|
|
|
|
.swatch-input__input + .swatch-input__label:hover {
|
|
outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
|
|
}
|
|
|
|
.swatch-input__input:active + .swatch-input__label,
|
|
.swatch-input__input:checked + .swatch-input__label {
|
|
outline: 0.1rem solid rgb(var(--color-foreground));
|
|
}
|
|
|
|
/* Visually disabled */
|
|
.swatch-input__input.disabled:not(:active):not(:checked) + .swatch-input__label:hover {
|
|
outline: none;
|
|
}
|
|
|
|
/* Focus visible */
|
|
.swatch-input__input:focus-visible + .swatch-input__label {
|
|
box-shadow: 0 0 0 0.5rem rgb(var(--color-background)), 0 0 0 0.7rem rgba(var(--color-foreground), 0.55);
|
|
}
|
|
|
|
/* Overrides for swatch snippet when used inside disabled swatch-input */
|
|
.swatch-input__input:disabled + .swatch-input__label > .swatch,
|
|
.swatch-input__input.disabled + .swatch-input__label > .swatch {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Display white semi-transparent overlay over swatch when input is disabled */
|
|
.swatch-input__input:disabled + .swatch-input__label > .swatch::before,
|
|
.swatch-input__input.disabled + .swatch-input__label > .swatch::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(250, 250, 250, 0.5);
|
|
}
|
|
|
|
/* Display crossed out line over swatch when input is disabled */
|
|
.swatch-input__input:disabled + .swatch-input__label > .swatch::after,
|
|
.swatch-input__input.disabled + .swatch-input__label > .swatch::after {
|
|
/* Diagonal of a square = length of the side * sqrt(2) */
|
|
--diagonal--size: calc(var(--swatch-input--size) * 1.414);
|
|
--crossed-line--size: 0.1rem;
|
|
--crossed-line--color: rgb(0, 0, 0);
|
|
|
|
content: '';
|
|
position: absolute;
|
|
bottom: calc(var(--crossed-line--size) * -0.5);
|
|
left: 0;
|
|
width: var(--diagonal--size);
|
|
height: var(--crossed-line--size);
|
|
background-color: var(--crossed-line--color);
|
|
transform: rotate(-45deg);
|
|
transform-origin: left;
|
|
}
|