@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

package/css/toggle-switch.css

@@ -2,262 +2,264 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-toggle-switch-wrapper{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:-ms-grid;
-  display:grid;
-      grid-template-areas:"toggle";
-  align-items:center;
-  gap:8px;
-  font-size:14px;
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  cursor:pointer;
-  isolation:isolate;
-  color:rgba(0, 0, 0, 0.8);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-.iui-toggle-switch-wrapper > * + *{
-  margin-left:8px;
-}
-@supports (gap: 8px){
+@layer itwinui-v1{
+  .iui-toggle-switch-wrapper{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    display:-ms-grid;
+    display:grid;
+        grid-template-areas:"toggle";
+    align-items:center;
+    gap:8px;
+    font-size:14px;
+    width:-webkit-fit-content;
+    width:-moz-fit-content;
+    width:fit-content;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+        -ms-user-select:none;
+            user-select:none;
+    cursor:pointer;
+    isolation:isolate;
+    color:rgba(0, 0, 0, 0.8);
+    color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  }
   .iui-toggle-switch-wrapper > * + *{
-    margin-left:0;
-  }
-}
-.iui-toggle-switch-wrapper.iui-disabled{
-  cursor:not-allowed;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-@media (forced-colors: active){
+    margin-left:8px;
+  }
+  @supports (gap: 8px){
+    .iui-toggle-switch-wrapper > * + *{
+      margin-left:0;
+    }
+  }
   .iui-toggle-switch-wrapper.iui-disabled{
-    color:GrayText;
-  }
-}
-.iui-toggle-switch-wrapper.iui-label-on-left{
-      grid-template-areas:"label toggle";
-}
-.iui-toggle-switch-wrapper.iui-label-on-right{
-      grid-template-areas:"toggle label";
-}
+    cursor:not-allowed;
+    color:rgba(0, 0, 0, 0.4);
+    color:var(--iui-text-color-muted);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch-wrapper.iui-disabled{
+      color:GrayText;
+    }
+  }
+  .iui-toggle-switch-wrapper.iui-label-on-left{
+        grid-template-areas:"label toggle";
+  }
+  .iui-toggle-switch-wrapper.iui-label-on-right{
+        grid-template-areas:"toggle label";
+  }
 
-.iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  grid-area:toggle;
-  display:flex;
-  position:relative;
-  cursor:pointer;
-  width:16px;
-  height:16px;
-  background-color:var(--iui-color-background-1);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-}
+  .iui-toggle-switch{
+    -ms-grid-row:1;
+    -ms-grid-column:1;
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    grid-area:toggle;
+    display:flex;
+    position:relative;
+    cursor:pointer;
+    width:16px;
+    height:16px;
+    background-color:var(--iui-color-background-1);
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  }
 
-.iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
+  .iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch{
+    -ms-grid-row:1;
+    -ms-grid-column:2;
+  }
 
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-}
-.iui-toggle-switch:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-toggle-switch:focus{
+  .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch{
+    -ms-grid-row:1;
+    -ms-grid-column:1;
+  }
+  .iui-toggle-switch:focus-visible{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
-}
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)){
-  .iui-toggle-switch{
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-    width:44px;
-    height:auto;
-    border-radius:9999px;
-    box-sizing:border-box;
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-    background-color:var(--iui-color-background-1);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  }
-}
-.iui-toggle-switch-label{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-  grid-area:label;
-}
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-label{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
-.iui-toggle-switch::after{
-  content:"";
-  height:16px;
-  width:16px;
-  margin:3px;
-  aspect-ratio:1/1;
-  border-radius:50%;
-  transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
-  z-index:2;
-}
-@media (prefers-reduced-motion: no-preference){
+  @supports not selector(*:focus-visible){
+    .iui-toggle-switch:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:1px;
+    }
+  }
+  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)){
+    .iui-toggle-switch{
+      -webkit-appearance:none;
+         -moz-appearance:none;
+              appearance:none;
+      width:44px;
+      height:auto;
+      border-radius:9999px;
+      box-sizing:border-box;
+      transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+      background-color:var(--iui-color-background-1);
+      border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+    }
+  }
+  .iui-toggle-switch-label{
+    -ms-grid-row:1;
+    -ms-grid-column:1;
+    grid-area:label;
+  }
+  .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-label{
+    -ms-grid-row:1;
+    -ms-grid-column:2;
+  }
   .iui-toggle-switch::after{
-    transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
+    content:"";
+    height:16px;
+    width:16px;
+    margin:3px;
+    aspect-ratio:1/1;
+    border-radius:50%;
+    transition:background-color 0.2s ease-out, opacity 0.2s ease-out;
+    z-index:2;
+  }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-toggle-switch::after{
+      transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
+    }
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch{
+      border-color:CanvasText;
+    }
   }
-}
-@media (forced-colors: active){
-  .iui-toggle-switch{
-    border-color:CanvasText;
-  }
-}
-.iui-toggle-switch::after{
-  background-color:var(--iui-color-foreground-body);
-  opacity:var(--iui-opacity-2);
-}
-@media (forced-colors: active){
   .iui-toggle-switch::after{
-    background-color:CanvasText;
-    opacity:1;
-  }
-}
-.iui-toggle-switch:hover{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-@media (forced-colors: active){
+    background-color:var(--iui-color-foreground-body);
+    opacity:var(--iui-opacity-2);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch::after{
+      background-color:CanvasText;
+      opacity:1;
+    }
+  }
   .iui-toggle-switch:hover{
-    border-color:CanvasText;
-  }
-}
-.iui-toggle-switch:focus-visible{
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-@supports not selector(*:focus-visible){
-  .iui-toggle-switch:focus{
     border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
   }
-}
-.iui-toggle-switch:checked{
-  background-color:var(--iui-color-background-primary);
-  border-color:var(--iui-color-background-primary);
-}
-@media (forced-colors: active){
+  @media (forced-colors: active){
+    .iui-toggle-switch:hover{
+      border-color:CanvasText;
+    }
+  }
+  .iui-toggle-switch:focus-visible{
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  }
+  @supports not selector(*:focus-visible){
+    .iui-toggle-switch:focus{
+      border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+    }
+  }
   .iui-toggle-switch:checked{
-    background-color:Highlight;
-    border-color:Highlight;
-  }
-}
-.iui-toggle-switch:checked::after{
-  transform:translateX(19px);
-  background-color:var(--iui-color-foreground-accessory);
-  opacity:var(--iui-opacity-2);
-}
-@media (forced-colors: active){
+    background-color:var(--iui-color-background-primary);
+    border-color:var(--iui-color-background-primary);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:checked{
+      background-color:Highlight;
+      border-color:Highlight;
+    }
+  }
   .iui-toggle-switch:checked::after{
-    background-color:HighlightText;
-    opacity:1;
-  }
-}
-.iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
-  opacity:var(--iui-opacity-1);
-}
-.iui-toggle-switch:hover::after{
-  opacity:var(--iui-opacity-1);
-}
-.iui-toggle-switch:focus-visible::after{
-  opacity:var(--iui-opacity-1);
-}
-@supports not selector(*:focus-visible){
-  .iui-toggle-switch:focus::after{
+    transform:translateX(19px);
+    background-color:var(--iui-color-foreground-accessory);
+    opacity:var(--iui-opacity-2);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:checked::after{
+      background-color:HighlightText;
+      opacity:1;
+    }
+  }
+  .iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
+    opacity:var(--iui-opacity-1);
+  }
+  .iui-toggle-switch:hover::after{
     opacity:var(--iui-opacity-1);
   }
-}
-.iui-toggle-switch:disabled{
-  cursor:not-allowed;
-  background-color:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-}
-@media (forced-colors: active){
+  .iui-toggle-switch:focus-visible::after{
+    opacity:var(--iui-opacity-1);
+  }
+  @supports not selector(*:focus-visible){
+    .iui-toggle-switch:focus::after{
+      opacity:var(--iui-opacity-1);
+    }
+  }
   .iui-toggle-switch:disabled{
-    border-color:GrayText;
-  }
-}
-.iui-toggle-switch:disabled::after{
-  background-color:var(--iui-color-foreground-body);
-  opacity:var(--iui-opacity-5);
-}
-@media (forced-colors: active){
+    cursor:not-allowed;
+    background-color:var(--iui-color-background-disabled);
+    border-color:var(--iui-color-background-disabled);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:disabled{
+      border-color:GrayText;
+    }
+  }
   .iui-toggle-switch:disabled::after{
-    background-color:GrayText;
-    opacity:0.75;
-  }
-}
-.iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
-  opacity:0;
-  fill:var(--iui-icons-color-actionable);
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled:checked{
-    background-color:GrayText;
-  }
-}
-@media (forced-colors: active){
-  .iui-toggle-switch:disabled:checked::after{
-    background-color:Canvas;
-  }
-}
-.iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
-  opacity:var(--iui-opacity-5);
-}
-@media (forced-colors: active){
+    background-color:var(--iui-color-foreground-body);
+    opacity:var(--iui-opacity-5);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:disabled::after{
+      background-color:GrayText;
+      opacity:0.75;
+    }
+  }
+  .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
+    opacity:0;
+    fill:var(--iui-icons-color-actionable);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:disabled:checked{
+      background-color:GrayText;
+    }
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:disabled:checked::after{
+      background-color:Canvas;
+    }
+  }
   .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
-    fill:Canvas;
-    opacity:0.75;
-  }
-}
-.iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-  opacity:0;
-  grid-area:toggle;
-  width:12px;
-  height:12px;
-  padding:2px;
-  margin:4px;
-  display:flex;
-  z-index:1;
-  transition:opacity 0.2s ease-out;
-  pointer-events:none;
-  fill:var(--iui-color-foreground-accessory);
-}
-.iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:2;
-}
-.iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
-  -ms-grid-row:1;
-  -ms-grid-column:1;
-}
-@media (forced-colors: active){
+    opacity:var(--iui-opacity-5);
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
+      fill:Canvas;
+      opacity:0.75;
+    }
+  }
   .iui-toggle-switch-icon{
-    fill:HighlightText;
+    -ms-grid-row:1;
+    -ms-grid-column:1;
+    opacity:0;
+    grid-area:toggle;
+    width:12px;
+    height:12px;
+    padding:2px;
+    margin:4px;
+    display:flex;
+    z-index:1;
+    transition:opacity 0.2s ease-out;
+    pointer-events:none;
+    fill:var(--iui-color-foreground-accessory);
+  }
+  .iui-toggle-switch-wrapper.iui-label-on-left > .iui-toggle-switch-icon{
+    -ms-grid-row:1;
+    -ms-grid-column:2;
+  }
+  .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
+    -ms-grid-row:1;
+    -ms-grid-column:1;
+  }
+  @media (forced-colors: active){
+    .iui-toggle-switch-icon{
+      fill:HighlightText;
+    }
   }
 }

package/css/tooltip.css

@@ -2,58 +2,60 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-tooltip-container{
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  height:-webkit-fit-content;
-  height:-moz-fit-content;
-  height:fit-content;
-  position:relative;
-}
-.iui-tooltip-container > .iui-tooltip{
-  position:absolute;
-  visibility:hidden;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  opacity:0;
-}
-@media (prefers-reduced-motion: no-preference){
+@layer itwinui-v1{
+  .iui-tooltip-container{
+    width:-webkit-fit-content;
+    width:-moz-fit-content;
+    width:fit-content;
+    height:-webkit-fit-content;
+    height:-moz-fit-content;
+    height:fit-content;
+    position:relative;
+  }
   .iui-tooltip-container > .iui-tooltip{
-    transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
+    position:absolute;
+    visibility:hidden;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+        -ms-user-select:none;
+            user-select:none;
+    opacity:0;
+  }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-tooltip-container > .iui-tooltip{
+      transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
+    }
+  }
+  .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
+    visibility:visible;
+    opacity:1;
   }
-}
-.iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
-  visibility:visible;
-  opacity:1;
-}
 
-.iui-tooltip{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:block;
-  text-align:center;
-  border-radius:4px;
-  font-size:12px;
-  overflow:hidden;
-  max-width:400px;
-  width:-webkit-max-content;
-  width:-moz-max-content;
-  width:max-content;
-  overflow-wrap:break-word;
-  box-sizing:content-box;
-  padding:4px 8px;
-  z-index:999;
-  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
-  pointer-events:none;
-  background-color:rgba(0, 0, 0, 0.6);
-  color:white;
-  border:1px solid rgba(255, 255, 255, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-3));
-  color:var(--iui-color-foreground-accessory);
-  border:1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
+  .iui-tooltip{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    display:block;
+    text-align:center;
+    border-radius:4px;
+    font-size:12px;
+    overflow:hidden;
+    max-width:400px;
+    width:-webkit-max-content;
+    width:-moz-max-content;
+    width:max-content;
+    overflow-wrap:break-word;
+    box-sizing:content-box;
+    padding:4px 8px;
+    z-index:999;
+    box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+    pointer-events:none;
+    background-color:rgba(0, 0, 0, 0.6);
+    color:white;
+    border:1px solid rgba(255, 255, 255, 0.4);
+    background-color:rgba(0, 0, 0, var(--iui-opacity-3));
+    color:var(--iui-color-foreground-accessory);
+    border:1px solid rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
+  }
 }