@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
42 lines (34 loc) • 1.73 kB
CSS
.spectrum-ColorLoupe {
--spectrum-colorloupe-width-adjusted: calc(var(--spectrum-colorloupe-width, var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
--spectrum-colorloupe-height-adjusted: calc(var(--spectrum-colorloupe-height, var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size, var(--spectrum-global-dimension-static-size-25)) * 2);
--spectrum-colorloupe-offset: var(--spectrum-global-dimension-static-size-200, 16px);
--spectrum-colorloupe-animation-distance: var(--spectrum-global-dimension-static-size-100, 8px);
}
.spectrum-ColorLoupe {
width: var(--spectrum-colorloupe-width-adjusted);
height: var(--spectrum-colorloupe-height-adjusted);
position: absolute;
transform: translate(0, var(--spectrum-colorloupe-animation-distance));
opacity: 0;
transform-origin: bottom center;
bottom: calc(50% + var(--spectrum-colorloupe-offset));
left: calc(50% - var(--spectrum-colorloupe-width-adjusted) / 2);
transition: transform 100ms ease-in-out, opacity 125ms ease-in-out;
pointer-events: none;
}
.spectrum-ColorLoupe.is-open {
transform: translate(0, 0);
opacity: 1;
}
.spectrum-ColorLoupe-outer {
stroke-width: var(--spectrum-colorloupe-outer-border-size, var(--spectrum-global-dimension-static-size-10));
}
.spectrum-ColorLoupe-outer {
fill: var(--spectrum-colorloupe-inner-border-color, var(--spectrum-global-color-static-white));
stroke: var(--spectrum-colorloupe-outer-border-color, rgba(50,50,50,0.1));
}
@media (forced-colors: active) {
.spectrum-ColorLoupe {
--spectrum-colorloupe-outer-border-color: CanvasText;
}
}