@itwin/itwinui-css 1.12.0 → 1.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -1
- package/css/all.css +1 -1
- package/css/color-picker.css +1 -1
- package/package.json +1 -1
package/css/color-picker.css
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
:where(.iui-root, [data-iui-theme]) .iui-color-picker{--iui-color-picker-selected-color:initial;--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text);border-radius:var(--iui-border-radius-1);padding:var(--iui-size-s)var(--iui-size-s);-webkit-user-select:none;user-select:none;max-height:calc(var(--iui-size-s)*42);row-gap:var(--iui-size-s);flex-direction:column;display:inline-flex;overflow-y:auto}:where(.iui-root, [data-iui-theme]) .iui-color-picker:where(:has(.iui-surface-body),:has(.iui-surface-header),[data-iui-layout=true]){flex-direction:column;display:flex}@supports (overflow-y: overlay){:where(.iui-root, [data-iui-theme]) .iui-color-picker{overflow-y:overlay}}:where(.iui-root, [data-iui-theme]) .iui-color-swatch{--iui-color-swatch-background:initial;height:var(--iui-size-l);width:var(--iui-size-l);cursor:pointer;background-color:var(--iui-color-swatch-background);forced-color-adjust:none;background-position:0 0,calc(var(--iui-size-m)*.5)calc(var(--iui-size-m)*.5);background-size:var(--iui-size-m)var(--iui-size-m);background-image:repeating-linear-gradient(45deg,#c7ccd1 25%,#0000 25% 75%,#c7ccd1 75%,#c7ccd1),repeating-linear-gradient(45deg,#c7ccd1 25%,#edeff2 25% 75%,#c7ccd1 75%,#c7ccd1);border-radius:5px;position:relative}:where(.iui-root, [data-iui-theme]) .iui-color-swatch:after{content:"";width:inherit;height:inherit;border-radius:inherit;background-color:inherit;box-shadow:inset 0 0 0 1px var(--iui-color-border-foreground);position:absolute;top:0;left:0}:where(.iui-root, [data-iui-theme]) .iui-color-swatch:hover{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-border),inset 0 0 0 1px var(--iui-color-border-foreground)}:where(.iui-root, [data-iui-theme]) .iui-color-swatch:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-color-swatch:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}}:where(.iui-root, [data-iui-theme]) .iui-color-swatch.iui-active{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-border-accent),inset 0 0 0 1px var(--iui-color-border-foreground)}:where(.iui-root, [data-iui-theme]) .iui-color-swatch.iui-active:hover{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-border),inset 0 0 0 1px var(--iui-color-border-foreground),0 0 0 var(--iui-size-3xs)var(--iui-color-border-accent)}:where(.iui-root, [data-iui-theme]) .iui-color-palette{min-height:var(--iui-size-l);min-width:var(--iui-size-l);align-content:flex-start;align-items:center;gap:var(--iui-size-xs);flex-wrap:wrap;display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-palette-wrapper{max-width:calc(var(--iui-size-l)*9 + var(--iui-size-xs)*8)}:where(.iui-root, [data-iui-theme]) .iui-color-palette-wrapper:only-child{max-width:calc(var(--iui-size-l)*10 + var(--iui-size-xs)*9)}:where(.iui-root, [data-iui-theme]) .iui-color-input{align-items:center;display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-input-wrapper{max-width:calc(var(--iui-size-l)*9 + var(--iui-size-xs)*8)}:where(.iui-root, [data-iui-theme]) .iui-color-input .iui-button{margin-right:var(--iui-size-2xs)}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields{width:100%;gap:var(--iui-size-3xs);display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields>*{flex-grow:1}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields input{text-transform:uppercase}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields input[type=number]{-webkit-appearance:textfield;appearance:textfield;text-align:right}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none}:where(.iui-root, [data-iui-theme]) .iui-color-picker-section-label{margin-bottom:calc(var(--iui-size-s)*.5);text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-color-selection-wrapper{min-width:calc(var(--iui-size-l)*9 + var(--iui-size-xs)*8);flex-direction:column;display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-field{--iui-color-field-hue:initial;cursor:crosshair;width:100%;height:calc(var(--iui-size-s)*17);forced-color-adjust:none;background-image:linear-gradient(0deg,black,transparent),linear-gradient(90deg,white,var(--iui-color-field-hue));position:relative}:where(.iui-root, [data-iui-theme]) .iui-color-field:not(:last-child){margin-bottom:calc(var(--iui-size-s)*.5)}:where(.iui-root, [data-iui-theme]) .iui-hue-slider .iui-slider-container .iui-slider-rail{height:var(--iui-size-xs);forced-color-adjust:none;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#03f 67%,#c3f 83%,red 100%)}:where(.iui-root, [data-iui-theme]) .iui-hue-slider .iui-slider-container .iui-slider-thumb{top:7px}:where(.iui-root, [data-iui-theme]) .iui-opacity-slider .iui-slider-container .iui-slider-rail{height:var(--iui-size-xs);forced-color-adjust:none;background-position:0 0,calc(var(--iui-size-xs)*.5)calc(var(--iui-size-xs)*.5);background-size:var(--iui-size-xs)var(--iui-size-xs);background-image:repeating-linear-gradient(45deg,#c7ccd1 25%,#0000 25% 75%,#c7ccd1 75%,#c7ccd1),repeating-linear-gradient(45deg,#c7ccd1 25%,#edeff2 25% 75%,#c7ccd1 75%,#c7ccd1)}:where(.iui-root, [data-iui-theme]) .iui-opacity-slider .iui-slider-container .iui-slider-rail:before{content:"";width:100%;height:100%;background-image:linear-gradient(to right,transparent 0%,var(--iui-color-picker-selected-color)100%);display:block}:where(.iui-root, [data-iui-theme]) .iui-opacity-slider .iui-slider-container .iui-slider-thumb{top:7px}:where(.iui-root, [data-iui-theme]) .iui-color-dot{--iui-color-dot-inset:initial;inset:var(--iui-color-dot-inset);width:var(--iui-size-m);height:var(--iui-size-m);transform:translate(calc(0px - var(--iui-size-xs)),calc(0px - var(--iui-size-xs)));cursor:crosshair;
|
|
5
|
+
:where(.iui-root, [data-iui-theme]) .iui-color-picker{--iui-color-picker-selected-color:initial;--iui-surface-background-color:var(--iui-color-background);--iui-surface-border-color:var(--iui-color-border-subtle);--iui-surface-border-radius:var(--iui-border-radius-1);--iui-surface-elevation:var(--iui-shadow-1);background-color:var(--iui-surface-background-color);border:1px solid var(--iui-surface-border-color);border-radius:var(--iui-surface-border-radius);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text);border-radius:var(--iui-border-radius-1);padding:var(--iui-size-s)var(--iui-size-s);-webkit-user-select:none;user-select:none;max-height:calc(var(--iui-size-s)*42);row-gap:var(--iui-size-s);flex-direction:column;display:inline-flex;overflow-y:auto}:where(.iui-root, [data-iui-theme]) .iui-color-picker:where(:has(.iui-surface-body),:has(.iui-surface-header),[data-iui-layout=true]){flex-direction:column;display:flex}@supports (overflow-y: overlay){:where(.iui-root, [data-iui-theme]) .iui-color-picker{overflow-y:overlay}}:where(.iui-root, [data-iui-theme]) .iui-color-swatch{--iui-color-swatch-background:initial;height:var(--iui-size-l);width:var(--iui-size-l);cursor:pointer;background-color:var(--iui-color-swatch-background);forced-color-adjust:none;background-position:0 0,calc(var(--iui-size-m)*.5)calc(var(--iui-size-m)*.5);background-size:var(--iui-size-m)var(--iui-size-m);background-image:repeating-linear-gradient(45deg,#c7ccd1 25%,#0000 25% 75%,#c7ccd1 75%,#c7ccd1),repeating-linear-gradient(45deg,#c7ccd1 25%,#edeff2 25% 75%,#c7ccd1 75%,#c7ccd1);border-radius:5px;position:relative}:where(.iui-root, [data-iui-theme]) .iui-color-swatch:after{content:"";width:inherit;height:inherit;border-radius:inherit;background-color:inherit;box-shadow:inset 0 0 0 1px var(--iui-color-border-foreground);position:absolute;top:0;left:0}:where(.iui-root, [data-iui-theme]) .iui-color-swatch:hover{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-border),inset 0 0 0 1px var(--iui-color-border-foreground)}:where(.iui-root, [data-iui-theme]) .iui-color-swatch:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-color-swatch:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}}:where(.iui-root, [data-iui-theme]) .iui-color-swatch.iui-active{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-border-accent),inset 0 0 0 1px var(--iui-color-border-foreground)}:where(.iui-root, [data-iui-theme]) .iui-color-swatch.iui-active:hover{box-shadow:0 0 0 var(--iui-size-3xs)var(--iui-color-border),inset 0 0 0 1px var(--iui-color-border-foreground),0 0 0 var(--iui-size-3xs)var(--iui-color-border-accent)}:where(.iui-root, [data-iui-theme]) .iui-color-palette{min-height:var(--iui-size-l);min-width:var(--iui-size-l);align-content:flex-start;align-items:center;gap:var(--iui-size-xs);flex-wrap:wrap;display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-palette-wrapper{max-width:calc(var(--iui-size-l)*9 + var(--iui-size-xs)*8)}:where(.iui-root, [data-iui-theme]) .iui-color-palette-wrapper:only-child{max-width:calc(var(--iui-size-l)*10 + var(--iui-size-xs)*9)}:where(.iui-root, [data-iui-theme]) .iui-color-input{align-items:center;display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-input-wrapper{max-width:calc(var(--iui-size-l)*9 + var(--iui-size-xs)*8)}:where(.iui-root, [data-iui-theme]) .iui-color-input .iui-button{margin-right:var(--iui-size-2xs)}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields{width:100%;gap:var(--iui-size-3xs);display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields>*{flex-grow:1}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields input{text-transform:uppercase}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields input[type=number]{-webkit-appearance:textfield;appearance:textfield;text-align:right}:where(.iui-root, [data-iui-theme]) .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none}:where(.iui-root, [data-iui-theme]) .iui-color-picker-section-label{margin-bottom:calc(var(--iui-size-s)*.5);text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-color-selection-wrapper{min-width:calc(var(--iui-size-l)*9 + var(--iui-size-xs)*8);flex-direction:column;display:flex}:where(.iui-root, [data-iui-theme]) .iui-color-field{--iui-color-field-hue:initial;cursor:crosshair;width:100%;height:calc(var(--iui-size-s)*17);forced-color-adjust:none;background-image:linear-gradient(0deg,black,transparent),linear-gradient(90deg,white,var(--iui-color-field-hue));position:relative}:where(.iui-root, [data-iui-theme]) .iui-color-field:not(:last-child){margin-bottom:calc(var(--iui-size-s)*.5)}:where(.iui-root, [data-iui-theme]) .iui-hue-slider .iui-slider-container .iui-slider-rail{height:var(--iui-size-xs);forced-color-adjust:none;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#03f 67%,#c3f 83%,red 100%)}:where(.iui-root, [data-iui-theme]) .iui-hue-slider .iui-slider-container .iui-slider-thumb{top:7px}:where(.iui-root, [data-iui-theme]) .iui-opacity-slider .iui-slider-container .iui-slider-rail{height:var(--iui-size-xs);forced-color-adjust:none;background-position:0 0,calc(var(--iui-size-xs)*.5)calc(var(--iui-size-xs)*.5);background-size:var(--iui-size-xs)var(--iui-size-xs);background-image:repeating-linear-gradient(45deg,#c7ccd1 25%,#0000 25% 75%,#c7ccd1 75%,#c7ccd1),repeating-linear-gradient(45deg,#c7ccd1 25%,#edeff2 25% 75%,#c7ccd1 75%,#c7ccd1)}:where(.iui-root, [data-iui-theme]) .iui-opacity-slider .iui-slider-container .iui-slider-rail:before{content:"";width:100%;height:100%;background-image:linear-gradient(to right,transparent 0%,var(--iui-color-picker-selected-color)100%);display:block}:where(.iui-root, [data-iui-theme]) .iui-opacity-slider .iui-slider-container .iui-slider-thumb{top:7px}:where(.iui-root, [data-iui-theme]) .iui-color-dot{--iui-color-dot-inset:initial;inset:var(--iui-color-dot-inset);width:var(--iui-size-m);height:var(--iui-size-m);transform:translate(calc(0px - var(--iui-size-xs)),calc(0px - var(--iui-size-xs)));cursor:crosshair;background-color:var(--iui-color-picker-selected-color);border-radius:50%;position:absolute}:where(.iui-root, [data-iui-theme]) .iui-color-dot:before{content:"";border-radius:inherit;outline:var(--iui-size-3xs)solid var(--iui-color-picker-selected-color);filter:invert()grayscale()contrast(999);position:absolute;top:0;bottom:0;left:0;right:0}:where(.iui-root, [data-iui-theme]) .iui-color-dot:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:3px;box-shadow:0 0 0 3px var(--iui-color-border)}
|