@itwin/itwinui-css 1.6.0 → 1.7.0
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 +27 -0
- package/css/all.css +1 -1
- package/css/checkbox.css +1 -1
- package/css/file-upload.css +1 -1
- package/css/radio.css +1 -1
- package/css/toggle-switch.css +1 -1
- package/package.json +1 -1
package/css/checkbox.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-checkbox{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;width:var(--iui-size-m);height:var(--iui-size-m);-webkit-appearance:none;appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;flex-shrink:0;margin:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper>.iui-checkbox-label svg,:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper>.iui-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-disabled svg{fill:var(--iui-color-icon-disabled)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-positive{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-warning{color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-negative{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-checkbox:
|
|
5
|
+
:where(.iui-root, [data-iui-theme]) .iui-checkbox{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;width:var(--iui-size-m);height:var(--iui-size-m);-webkit-appearance:none;appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;flex-shrink:0;margin:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper>.iui-checkbox-label svg,:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper>.iui-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-disabled svg{fill:var(--iui-color-icon-disabled)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-positive{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-warning{color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .iui-checkbox-wrapper.iui-negative{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-checkbox:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;top:0;bottom:0;left:0;right:0}:where(.iui-root, [data-iui-theme]) .iui-checkbox:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}:where(.iui-root, [data-iui-theme]) .iui-checkbox:checked{--_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg)}:where(.iui-root, [data-iui-theme]) .iui-checkbox:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}:where(.iui-root, [data-iui-theme]) .iui-checkbox:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}:where(.iui-root, [data-iui-theme]) .iui-checkbox:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-checkbox:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}:where(.iui-root, [data-iui-theme]) .iui-checkbox:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}:where(.iui-root, [data-iui-theme]) .iui-checkbox.iui-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}:where(.iui-root, [data-iui-theme]) .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}:where(.iui-root, [data-iui-theme]) .iui-checkbox.iui-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}:where(.iui-root, [data-iui-theme]) .iui-checkbox.iui-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}:where(.iui-root, [data-iui-theme]) .iui-checkbox.iui-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}
|
package/css/file-upload.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-file-upload{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);border:none;margin:0;padding:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content{visibility:hidden;width:100%;height:100
|
|
5
|
+
:where(.iui-root, [data-iui-theme]) .iui-file-upload{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);border:none;margin:0;padding:0;line-height:1;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content{visibility:hidden;width:100%;height:100%;align-content:center;place-items:center;gap:var(--iui-size-xs);background-color:var(--iui-color-background-backdrop);border:1px solid var(--iui-color-background-backdrop);border-radius:var(--iui-border-radius-1);display:grid;position:absolute;top:0;left:0}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content .iui-browse-input{clip-path:inset(50%);white-space:nowrap;height:1px;width:1px;border-width:0;margin:-1px;padding:0;position:absolute;overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content>svg,:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content .iui-template-icon{width:var(--iui-size-xl);height:var(--iui-size-xl);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content>svg,:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content .iui-template-icon{fill:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content:only-child{visibility:visible;position:relative}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content:only-child:focus-within{outline:2px solid var(--iui-color-text-accent);outline-offset:-2px}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content .iui-template-text{margin-left:var(--iui-size-l);gap:var(--iui-size-2xs);display:grid}:where(.iui-root, [data-iui-theme]) .iui-file-upload>.iui-content .iui-template-text>label{font-weight:var(--iui-font-weight-bold)}:where(.iui-root, [data-iui-theme]) .iui-file-upload.iui-drag>.iui-content{visibility:visible;background-color:var(--iui-color-background-accent-muted);border-color:var(--iui-color-border-accent);color:var(--iui-color-text-accent)}:where(.iui-root, [data-iui-theme]) .iui-file-upload.iui-drag>.iui-content svg,:where(.iui-root, [data-iui-theme]) .iui-file-upload.iui-drag>.iui-content .iui-template-icon{fill:var(--iui-color-icon-accent)}:where(.iui-root, [data-iui-theme]) .iui-file-upload-template{padding:var(--iui-size-m);justify-content:center;align-items:center;display:flex}:where(.iui-root, [data-iui-theme]) .iui-file-card{vertical-align:baseline;align-items:center;gap:var(--iui-size-s);padding:0;padding:var(--iui-size-m);border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border-subtle);color:var(--iui-color-text);width:100%;margin:0;line-height:1;display:flex}:where(.iui-root, [data-iui-theme]) .iui-file-card:focus-within{outline:2px solid var(--iui-color-text-accent);outline-offset:-2px}:where(.iui-root, [data-iui-theme]) .iui-file-card-icon,:where(.iui-root, [data-iui-theme]) .iui-file-card-icon svg{width:var(--iui-size-xl);height:var(--iui-size-xl);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-file-card-icon,:where(.iui-root, [data-iui-theme]) .iui-file-card-icon svg{fill:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-file-card-text{gap:var(--iui-size-2xs);display:grid}:where(.iui-root, [data-iui-theme]) .iui-file-card-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-file-card-description{white-space:nowrap;text-overflow:ellipsis;font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted);overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-file-card-action{font-weight:var(--iui-font-weight-bold);margin-left:auto}:where(.iui-root, [data-iui-theme]) .iui-file-card-empty{vertical-align:baseline;justify-content:center;align-items:center;gap:var(--iui-size-l);padding:0;padding:var(--iui-size-m);border-radius:var(--iui-border-radius-1);border:none;border:1px solid var(--iui-color-border);width:100%;margin:0;line-height:1;display:flex}:where(.iui-root, [data-iui-theme]) .iui-file-card-empty:focus-within{outline:2px solid var(--iui-color-text-accent);outline-offset:-2px}:where(.iui-root, [data-iui-theme]) .iui-file-card-empty-icon,:where(.iui-root, [data-iui-theme]) .iui-file-card-empty-icon svg{fill:var(--iui-color-icon-muted);width:var(--iui-size-xl);height:var(--iui-size-xl);flex-shrink:0;display:flex}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-file-card-empty-icon,:where(.iui-root, [data-iui-theme]) .iui-file-card-empty-icon svg{fill:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-file-card-empty-action{gap:var(--iui-size-2xs);display:grid}:where(.iui-root, [data-iui-theme]) .iui-file-card-empty-action label{font-weight:var(--iui-font-weight-bold)}
|
package/css/radio.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-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;width:var(--iui-size-m);height:var(--iui-size-m);-webkit-appearance:none;appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper>.iui-checkbox-label svg,:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper>.iui-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-disabled svg{fill:var(--iui-color-icon-disabled)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-positive{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-warning{color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-negative{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-radio:
|
|
5
|
+
:where(.iui-root, [data-iui-theme]) .iui-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;width:var(--iui-size-m);height:var(--iui-size-m);-webkit-appearance:none;appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;transition:outline-color var(--iui-duration-1)ease-out;outline:solid 1px var(--_iui-checkbox-border-color);outline-offset:-1px;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper>.iui-checkbox-label svg,:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper>.iui-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-disabled svg{fill:var(--iui-color-icon-disabled)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-positive{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-warning{color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .iui-radio-wrapper.iui-negative{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;top:0;bottom:0;left:0;right:0}:where(.iui-root, [data-iui-theme]) .iui-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}:where(.iui-root, [data-iui-theme]) .iui-radio:checked{--_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg)}:where(.iui-root, [data-iui-theme]) .iui-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}:where(.iui-root, [data-iui-theme]) .iui-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}:where(.iui-root, [data-iui-theme]) .iui-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}:where(.iui-root, [data-iui-theme]) .iui-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}:where(.iui-root, [data-iui-theme]) .iui-radio.iui-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}:where(.iui-root, [data-iui-theme]) .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}:where(.iui-root, [data-iui-theme]) .iui-radio.iui-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}:where(.iui-root, [data-iui-theme]) .iui-radio.iui-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}:where(.iui-root, [data-iui-theme]) .iui-radio.iui-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}:where(.iui-root, [data-iui-theme]) .iui-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}:where(.iui-root, [data-iui-theme]) .iui-radio:not(:checked),:where(.iui-root, [data-iui-theme]) .iui-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}
|
package/css/toggle-switch.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-toggle-switch-wrapper{vertical-align:baseline;align-items:center;gap:var(--iui-size-xs);font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;isolation:isolate;color:var(--iui-color-text);border:none;grid-template-areas:"toggle";margin:0;padding:0;display:grid}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-disabled{color:GrayText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-label-on-left{grid-template-areas:"label toggle"}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-label-on-right{grid-template-areas:"toggle label"}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch{vertical-align:baseline;cursor:pointer;-webkit-appearance:none;appearance:none;width:calc((var(--
|
|
5
|
+
:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper{--_iui-toggle-switch-handle-size:var(--iui-size-m);--_iui-toggle-switch-handle-offset:var(--iui-size-2xs);vertical-align:baseline;align-items:center;gap:var(--iui-size-xs);font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;isolation:isolate;color:var(--iui-color-text);border:none;grid-template-areas:"toggle";margin:0;padding:0;display:grid}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-disabled{color:GrayText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-label-on-left{grid-template-areas:"label toggle"}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper.iui-label-on-right{grid-template-areas:"toggle label"}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper:where([data-iui-size=small]){--_iui-toggle-switch-handle-size:var(--iui-size-s);--_iui-toggle-switch-handle-offset:var(--iui-size-3xs)}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-wrapper:where([data-iui-size=small]) .iui-toggle-switch-icon{display:none}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch{vertical-align:baseline;cursor:pointer;-webkit-appearance:none;appearance:none;width:calc((var(--_iui-toggle-switch-handle-size) + var(--_iui-toggle-switch-handle-offset)*2)*2);height:calc(var(--_iui-toggle-switch-handle-size) + var(--_iui-toggle-switch-handle-offset)*2 + 2px);border-radius:var(--iui-border-radius-round);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border-foreground);background-color:var(--iui-color-background);border-color:var(--iui-color-border-foreground);grid-area:toggle;margin:0;padding:0;display:flex;position:relative}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-label{grid-area:label}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:after{content:"";height:var(--_iui-toggle-switch-handle-size);width:var(--_iui-toggle-switch-handle-size);margin:var(--_iui-toggle-switch-handle-offset);aspect-ratio:1/1;border-radius:var(--iui-border-radius-round);transition:background-color var(--iui-duration-1)ease-out;z-index:2}@media (prefers-reduced-motion:no-preference){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:after{transition:transform var(--iui-duration-1)ease-out,background-color var(--iui-duration-1)ease-out}}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch{border-color:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:after{background-color:var(--iui-color-icon)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:after{background-color:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:hover{border-color:var(--iui-color-border-foreground-hover)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:hover{border-color:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:hover:after,:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:hover:focus-visible:after{background-color:var(--iui-color-icon-hover)}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:hover:focus:after{background-color:var(--iui-color-icon-hover)}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:focus-visible{border-color:var(--iui-color-border-foreground-hover)}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:focus{border-color:var(--iui-color-border-foreground-hover)}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:checked{background-color:var(--iui-color-background-accent);border-color:var(--iui-color-background-accent)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:checked{background-color:Highlight;border-color:Highlight}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:checked:after{transform:translateX(calc(var(--_iui-toggle-switch-handle-size) + var(--_iui-toggle-switch-handle-offset)));background-color:var(--iui-color-white)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:checked:after{background-color:HighlightText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:checked~.iui-toggle-switch-icon{opacity:var(--iui-opacity-1)}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled{cursor:not-allowed;background-color:var(--iui-color-background-disabled);border-color:var(--iui-color-border-disabled)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled{border-color:GrayText}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled:after{background-color:var(--iui-color-icon-disabled)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled:after{background-color:GrayText;opacity:.75}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled~.iui-toggle-switch-icon{opacity:0;fill:var(--iui-color-icon)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled:checked{background-color:GrayText}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled:checked:after{background-color:Canvas}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled:checked~.iui-toggle-switch-icon{opacity:var(--iui-opacity-5)}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch:disabled:checked~.iui-toggle-switch-icon{fill:Canvas;opacity:.75}}:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-icon{opacity:0;width:var(--_iui-toggle-switch-handle-size);height:var(--_iui-toggle-switch-handle-size);padding:calc(var(--_iui-toggle-switch-handle-size)*.125);margin:calc(var(--_iui-toggle-switch-handle-offset) + 1px);z-index:1;transition:opacity var(--iui-duration-1)ease-out;pointer-events:none;fill:var(--iui-color-white);grid-area:toggle;display:flex}@media (forced-colors:active){:where(.iui-root, [data-iui-theme]) .iui-toggle-switch-icon{fill:HighlightText}}
|