@itwin/itwinui-css 1.12.4 → 1.12.6
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 +12 -0
- package/css/all.css +1 -1
- package/css/progress-indicator.css +1 -1
- package/css/toggle-switch.css +1 -1
- package/package.json +1 -1
|
@@ -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
|
-
@keyframes closeAnimation{0%{opacity:var(--iui-opacity-1)}to{opacity:0}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear{vertical-align:baseline;text-align:left;border:none;margin:0;padding:0;display:block}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-track{width:100%;height:var(--iui-size-2xs);background-color:var(--iui-color-border);overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-track>.iui-fill{height:100%;vertical-align:top;background-color:var(--iui-color-border-accent);display:inline-block}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label{width:100%;margin-top:var(--iui-size-2xs);font-size:var(--iui-font-size-0);justify-content:space-between;align-items:center;display:flex;overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label>:only-child{margin:0 auto}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label>:last-child:not(:first-child){-webkit-user-select:none;user-select:none}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-track,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-track>*{background-color:var(--iui-color-border-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label svg{fill:var(--iui-color-icon-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label>span::selection,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label>span ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-track>*{width:100%;background-color:var(--iui-color-border-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label svg{fill:var(--iui-color-icon-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label>span::selection,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label>span ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-track>.iui-determinate{transition:width 2s ease-in-out}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear:not(.iui-negative):not(.iui-positive)>.iui-track>.iui-indeterminate{width:100%;animation:1.5s linear infinite iui-progress-indicator-linear-animate-indeterminate}@keyframes iui-progress-indicator-linear-animate-indeterminate{0%{transform:translate(-60%)scaleX(0)}40%{transform:translate(-40%)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);width:var(--_iui-progress-indicator-radial-size);height:var(--_iui-progress-indicator-radial-size);display:inline-block;position:relative}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial>.iui-radial{height:100%;width:100%;position:absolute}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial>.iui-radial>circle.iui-fill{stroke:var(--iui-color-border-accent);fill:none;stroke-width:var(--iui-size-2xs)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial>.iui-radial>circle.iui-track{stroke:var(--iui-color-border);fill:none;stroke-width:var(--iui-size-2xs)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content{width:calc(100% - var(--iui-size-xs));height:calc(100% - var(--iui-size-xs));font-size:var(--iui-font-size-0);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content svg,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content img{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content svg:hover,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content img:hover{fill:var(--iui-color-icon-hover)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{stroke:var(--iui-color-border-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{fill:var(--iui-color-icon-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-negative{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{stroke:var(--iui-color-border-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{fill:var(--iui-color-icon-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-x-small{--_iui-progress-indicator-radial-size:var(--iui-size-m)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-x-small .iui-inner-content{display:none}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-small{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large .iui-inner-content{font-size:var(--iui-font-size-2)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large .iui-inner-content svg,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large .iui-inner-content img{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{transform:rotate(-90deg)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial circle.iui-fill{stroke-dasharray:88;transition:stroke-dashoffset .5s ease-in-out}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial{animation:2s linear infinite rotate-indeterminate}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial circle.iui-fill{animation:1.5s ease-in-out infinite dash-indeterminate}@keyframes rotate-indeterminate{to{transform:rotate(360deg)}}@keyframes dash-indeterminate{0%{stroke-dasharray:1 88}50%{stroke-dasharray:88 88;stroke-dashoffset:-22px}to{stroke-dasharray:88 88;stroke-dashoffset:-88px}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay{width:100%;height:100%;z-index:10000;background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-2));justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}@supports (backdrop-filter: blur(5px)){:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay{background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay .iui-progress-indicator-linear{width:50%;max-width:33vw}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay .iui-overlay-exiting{animation:closeAnimation var(--iui-duration-1)linear}
|
|
5
|
+
@keyframes closeAnimation{0%{opacity:var(--iui-opacity-1)}to{opacity:0}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear{vertical-align:baseline;text-align:left;border:none;margin:0;padding:0;display:block}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-track{width:100%;height:var(--iui-size-2xs);background-color:var(--iui-color-border);overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-track>.iui-fill{height:100%;vertical-align:top;background-color:var(--iui-color-border-accent);display:inline-block}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label{width:100%;margin-top:var(--iui-size-2xs);font-size:var(--iui-font-size-0);justify-content:space-between;align-items:center;display:flex;overflow:hidden}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label>:only-child{margin:0 auto}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label>:last-child:not(:first-child){-webkit-user-select:none;user-select:none}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-label svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-track,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-track>*{background-color:var(--iui-color-border-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label svg{fill:var(--iui-color-icon-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label>span::selection,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-positive>.iui-label>span ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-track>*{width:100%;background-color:var(--iui-color-border-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label svg{fill:var(--iui-color-icon-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label>span::selection,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear.iui-negative>.iui-label>span ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear>.iui-track>.iui-determinate{transition:width 2s ease-in-out}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-linear:not(.iui-negative):not(.iui-positive)>.iui-track>.iui-indeterminate{width:100%;animation:1.5s linear infinite iui-progress-indicator-linear-animate-indeterminate}@keyframes iui-progress-indicator-linear-animate-indeterminate{0%{transform:translate(-60%)scaleX(0)}40%{transform:translate(-40%)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);width:var(--_iui-progress-indicator-radial-size);height:var(--_iui-progress-indicator-radial-size);display:inline-block;position:relative}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial>.iui-radial{height:100%;width:100%;display:block;position:absolute}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial>.iui-radial>circle.iui-fill{stroke:var(--iui-color-border-accent);fill:none;stroke-width:var(--iui-size-2xs)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial>.iui-radial>circle.iui-track{stroke:var(--iui-color-border);fill:none;stroke-width:var(--iui-size-2xs)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content{width:calc(100% - var(--iui-size-xs));height:calc(100% - var(--iui-size-xs));font-size:var(--iui-font-size-0);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content svg,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content img{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content svg:hover,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial .iui-inner-content img:hover{fill:var(--iui-color-icon-hover)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive{color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{stroke:var(--iui-color-border-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{fill:var(--iui-color-icon-positive)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-negative{color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{stroke:var(--iui-color-border-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{fill:var(--iui-color-icon-negative)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-x-small{--_iui-progress-indicator-radial-size:var(--iui-size-m)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-x-small .iui-inner-content{display:none}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-small{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m))}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large .iui-inner-content{font-size:var(--iui-font-size-2)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large .iui-inner-content svg,:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-large .iui-inner-content img{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{transform:rotate(-90deg)}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial circle.iui-fill{stroke-dasharray:88;transition:stroke-dashoffset .5s ease-in-out}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial{animation:2s linear infinite rotate-indeterminate}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial circle.iui-fill{animation:1.5s ease-in-out infinite dash-indeterminate}@keyframes rotate-indeterminate{to{transform:rotate(360deg)}}@keyframes dash-indeterminate{0%{stroke-dasharray:1 88}50%{stroke-dasharray:88 88;stroke-dashoffset:-22px}to{stroke-dasharray:88 88;stroke-dashoffset:-88px}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay{width:100%;height:100%;z-index:10000;background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-2));justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}@supports (backdrop-filter: blur(5px)){:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay{background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay .iui-progress-indicator-linear{width:50%;max-width:33vw}:where(.iui-root, [data-iui-theme]) .iui-progress-indicator-overlay .iui-overlay-exiting{animation:closeAnimation var(--iui-duration-1)linear}
|
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{--_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);
|
|
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);background-color:var(--iui-color-background);border:1px solid;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}}
|