UNPKG

@spectrum-web-components/color-loupe

Version:

An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

5 lines (4 loc) 2.17 kB
"use strict";import{css as o}from"@spectrum-web-components/base";const r=o` :host{inline-size:var(--spectrum-color-loupe-width);block-size:var(--spectrum-color-loupe-height);transform:translateY(8px);transform:translateY(var(--mod-colorloupe-animation-distance,8px));opacity:0;transform-origin:bottom;pointer-events:none;filter:drop-shadow(var(--mod-colorloupe-drop-shadow-x,var(--spectrum-drop-shadow-x))var(--mod-colorloupe-drop-shadow-y,var(--spectrum-color-loupe-drop-shadow-y))var(--mod-colorloupe-drop-shadow-blur,var(--spectrum-color-loupe-drop-shadow-blur))var(--mod-colorloupe-drop-shadow-color,var(--spectrum-color-loupe-drop-shadow-color)));transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute;inset-block-end:calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset,var(--spectrum-color-loupe-bottom-to-color-handle)));inset-inline-end:calc(50% - var(--spectrum-color-loupe-width)/2)}:host:dir(rtl),:host([dir=rtl]){inset-inline-end:calc(50% - var(--spectrum-color-loupe-width)/2 - 1px)}:host([open]){opacity:1;transform:translate(0)}:host .is-disabled{opacity:0}.spectrum-ColorLoupe-inner-border{fill:var(--spectrum-picked-color);stroke:var(--mod-colorloupe-inner-border-color,var(--spectrum-color-loupe-inner-border));stroke-width:var(--mod-colorloupe-inner-border-width,var(--spectrum-color-loupe-inner-border-width))}.spectrum-ColorLoupe-outer-border{fill:none;stroke:var(--highcontrast-colorloupe-outer-border-color,var(--mod-colorloupe-outer-border-color,var(--spectrum-color-loupe-outer-border)));stroke-width:calc(var(--mod-colorloupe-outer-border-width,var(--spectrum-color-loupe-outer-border-width)) + 2px)}.spectrum-ColorLoupe-checkerboard-pattern{fill:var(--spectrum-opacity-checkerboard-square-dark)}.spectrum-ColorLoupe-checkerboard-background{fill:var(--spectrum-opacity-checkerboard-square-light)}.spectrum-ColorLoupe-checkerboard-fill{fill:var(--spectrum-colorloupe-checkerboard-fill)}@media (forced-colors:active){:host{--highcontrast-colorloupe-outer-border-color:CanvasText}} `;export default r; //# sourceMappingURL=spectrum-color-loupe.css.js.map