spectrum-css
spectrum-css copied to clipboard
adobe
Color Handle delivery sensitive to CSS inclusion order.
The mark up for a Color Handle is as follows:
<div class="spectrum-ColorHandle spectrum-OpacityCheckerboard" is-disabled" style="--spectrum-picked-color: rgba(255, 0, 0, 0.5); position: absolute; inset-block: 50%; inset-inline: 50%">
<div class="spectrum-ColorHandle-inner"></div>
</div>
With both the spectrum-ColorHandle and the spectrum-OpacityCheckerboard classes applied to the host element the rules within those selectors will race depending on how CSS is deployed in a consuming application. Specifically, the size rules for .spectrum-OpacityCheckerboard:
.spectrum-OpacityCheckerboard {
inline-size: 100%;
block-size: 100%;
}
Can overwright those of .spectrum-ColorHandle:
.spectrum-ColorHandle {
inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
}
