@itwin/itwinui-css 1.12.4 → 1.12.5
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 +6 -0
- package/css/all.css +1 -1
- package/css/toggle-switch.css +1 -1
- package/package.json +1 -1
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}}
|