@itwin/itwinui-css 1.11.5 → 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 +14 -2
- package/css/all.css +1 -1
- package/css/color-picker.css +1 -1
- package/css/global.css +1 -1
- package/css/revert-v1.css +5 -0
- package/css/searchbox.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)}
|
package/css/global.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-
|
|
5
|
+
:where(.iui-root){color:var(--iui-color-text);font-size:var(--iui-font-size-1);line-height:var(--iui-size-l);font-family:var(--iui-font-sans)}:where(.iui-root) :where([class*=iui-]):where(:not(.iui-root)),:where(.iui-root) :where([class*=iui-]):where(:not(.iui-root)):before,:where(.iui-root) :where([class*=iui-]):where(:not(.iui-root)):after,:where(.iui-root) :where([class*=iui-]) *,:where(.iui-root) :where([class*=iui-]) :before,:where(.iui-root) :where([class*=iui-]) :after{box-sizing:border-box}:where(body.iui-root){margin:0}:where(body.iui-root,.iui-root.iui-root-background){background-color:var(--iui-color-background-backdrop)}:where([data-iui-theme]),:where(.iui-root),:where(.iui-root *){scrollbar-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-4))transparent;scrollbar-width:thin}:where([data-iui-theme])::selection,:where([data-iui-theme]) ::selection,:where(.iui-root)::selection,:where(.iui-root) ::selection,:where(.iui-root *)::selection,:where(.iui-root *) ::selection{background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-5))}:where([data-iui-theme])::-webkit-scrollbar,:where(.iui-root)::-webkit-scrollbar,:where(.iui-root *)::-webkit-scrollbar{width:var(--iui-size-xs);height:var(--iui-size-xs)}:where([data-iui-theme])::-webkit-scrollbar-thumb,:where(.iui-root)::-webkit-scrollbar-thumb,:where(.iui-root *)::-webkit-scrollbar-thumb{background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-4));border-radius:var(--iui-border-radius-round)}:where([data-iui-theme])::-webkit-scrollbar-thumb:hover,:where(.iui-root)::-webkit-scrollbar-thumb:hover,:where(.iui-root *)::-webkit-scrollbar-thumb:hover{background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-3))}:where([data-iui-theme])::-webkit-scrollbar-track,:where([data-iui-theme])::-webkit-scrollbar-corner,:where(.iui-root)::-webkit-scrollbar-track,:where(.iui-root)::-webkit-scrollbar-corner,:where(.iui-root *)::-webkit-scrollbar-track,:where(.iui-root *)::-webkit-scrollbar-corner{background-color:#0000}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
@layer itwinui-v1{:where(.iui-body,[class*=iui-theme-]) :where(.iui-root) :not(#\#),:where(.iui-body,[class*=iui-theme-]) :where(.iui-root) :not(#\#):before,:where(.iui-body,[class*=iui-theme-]) :where(.iui-root) :not(#\#):after{all:revert-layer}}@layer itwinui.v1{:where(.iui-body,[class*=iui-theme-]) :where(.iui-root) :not(#\#),:where(.iui-body,[class*=iui-theme-]) :where(.iui-root) :not(#\#):before,:where(.iui-body,[class*=iui-theme-]) :where(.iui-root) :not(#\#):after{all:revert-layer}}
|
package/css/searchbox.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-searchbox{--_iui-flex-input-icon-margin:10px}:where(.iui-root, [data-iui-theme]) .iui-searchbox[data-iui-size=small]{--_iui-flex-input-icon-margin:5px}:where(.iui-root, [data-iui-theme]) .iui-searchbox[data-iui-size=large]{--_iui-flex-input-icon-margin:16px}:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox{width:var(--_iui-input-min-height);transition:width var(--iui-duration-1)ease-in-out}:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox:has(.iui-searchbox-open-button:focus-visible){outline:2px solid var(--_iui-input-accent-border-color);outline-offset:-2px}@supports not selector(:has(+ *)){:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox:where(.iui-searchbox-open-button:focus-visible){outline:2px solid var(--_iui-input-accent-border-color);outline-offset:-2px}}:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox:where([data-iui-expanded=true]){width:100%;border-color:var(--_iui-input-border-color)}:where(.iui-root, [data-iui-theme]) .iui-search-icon{margin:0 var(--iui-size-s)}:where(.iui-root, [data-iui-theme]) .iui-search-icon:is(:first-child){margin:0 var(--_iui-flex-input-icon-margin,10px)}
|
|
5
|
+
:where(.iui-root, [data-iui-theme]) .iui-searchbox{--_iui-flex-input-icon-margin:10px}:where(.iui-root, [data-iui-theme]) .iui-searchbox[data-iui-size=small]{--_iui-flex-input-icon-margin:5px}:where(.iui-root, [data-iui-theme]) .iui-searchbox[data-iui-size=large]{--_iui-flex-input-icon-margin:16px}:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox.iui-expandable-searchbox{width:var(--_iui-input-min-height);transition:width var(--iui-duration-1)ease-in-out}:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox.iui-expandable-searchbox:has(.iui-searchbox-open-button:focus-visible){outline:2px solid var(--_iui-input-accent-border-color);outline-offset:-2px}@supports not selector(:has(+ *)){:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox.iui-expandable-searchbox:where(.iui-searchbox-open-button:focus-visible){outline:2px solid var(--_iui-input-accent-border-color);outline-offset:-2px}}:where(.iui-root, [data-iui-theme]) .iui-expandable-searchbox.iui-expandable-searchbox:where([data-iui-expanded=true]){width:100%;border-color:var(--_iui-input-border-color)}:where(.iui-root, [data-iui-theme]) .iui-search-icon{margin:0 var(--iui-size-s)}:where(.iui-root, [data-iui-theme]) .iui-search-icon:is(:first-child){margin:0 var(--_iui-flex-input-icon-margin,10px)}
|