@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

package/css/anchor.css

@@ -2,71 +2,73 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-anchor{
-  color:#008ae0;
-  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
-  color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
-  box-sizing:border-box;
-  cursor:pointer;
-  text-decoration:none;
-}
-.iui-anchor:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-anchor:focus{
+@layer itwinui-v1{
+  .iui-anchor{
+    color:#008ae0;
+    -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
+    color:var(--iui-color-foreground-primary);
+    -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+    border-radius:4px;
+    box-sizing:border-box;
+    cursor:pointer;
+    text-decoration:none;
+  }
+  .iui-anchor:focus-visible{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
-}
-.iui-anchor:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
-}
-.iui-anchor:hover{
-  text-decoration:underline;
-}
-@media (prefers-contrast: more){
-  .iui-anchor{
-    text-decoration:underline;
+  @supports not selector(*:focus-visible){
+    .iui-anchor:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:1px;
+    }
   }
   .iui-anchor:hover{
+    color:#006bad;
+    color:var(--iui-color-foreground-primary-overlay);
+  }
+  .iui-anchor:hover{
+    text-decoration:underline;
+  }
+  @media (prefers-contrast: more){
+    .iui-anchor{
+      text-decoration:underline;
+    }
+    .iui-anchor:hover{
+      text-decoration:none;
+    }
+  }
+  .iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
     text-decoration:none;
   }
-}
-.iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
-  text-decoration:none;
-}
-.iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
-  text-decoration:underline;
-}
+  .iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
+    text-decoration:underline;
+  }
 
-.iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
-  text-decoration:underline;
-}
-.iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
-  text-decoration:none;
-}
+  .iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
+    text-decoration:underline;
+  }
+  .iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
+    text-decoration:none;
+  }
 
-.iui-anchor-external{
-  --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
-}
-.iui-anchor-external::after{
-  content:"";
-  display:inline-block;
-  width:1.5ch;
-  height:1.5ch;
-  margin-left:0.5ch;
-  vertical-align:-0.1ch;
-  background-color:currentColor;
-  -webkit-mask:var(--_iui-anchor-external-svg);
-          mask:var(--_iui-anchor-external-svg);
-}
-@media (forced-colors: active){
+  .iui-anchor-external{
+    --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
+  }
   .iui-anchor-external::after{
-    background-color:LinkText;
+    content:"";
+    display:inline-block;
+    width:1.5ch;
+    height:1.5ch;
+    margin-left:0.5ch;
+    vertical-align:-0.1ch;
+    background-color:currentColor;
+    -webkit-mask:var(--_iui-anchor-external-svg);
+            mask:var(--_iui-anchor-external-svg);
+  }
+  @media (forced-colors: active){
+    .iui-anchor-external::after{
+      background-color:LinkText;
+    }
   }
 }

package/css/backdrop.css

@@ -2,23 +2,25 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-backdrop{
-  z-index:998;
-  isolation:isolate;
-  position:absolute;
-  top:0;
-  left:0;
-  width:100%;
-  height:100%;
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-  transition:visibility 0s linear, opacity 0.2s ease-out;
-  transition-delay:0.2s, 0s;
-}
-.iui-backdrop:not(.iui-backdrop-visible){
-  visibility:hidden;
-  opacity:0;
-}
-.iui-backdrop.iui-backdrop-visible{
-  transition-delay:0s;
+@layer itwinui-v1{
+  .iui-backdrop{
+    z-index:998;
+    isolation:isolate;
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background-color:rgba(0, 0, 0, 0.4);
+    background-color:rgba(0, 0, 0, var(--iui-opacity-4));
+    transition:visibility 0s linear, opacity 0.2s ease-out;
+    transition-delay:0.2s, 0s;
+  }
+  .iui-backdrop:not(.iui-backdrop-visible){
+    visibility:hidden;
+    opacity:0;
+  }
+  .iui-backdrop.iui-backdrop-visible{
+    transition-delay:0s;
+  }
 }

package/css/badge.css

@@ -2,28 +2,30 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-badge{
-  --iui-badge-background-color:#c7ccd1;
-  --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  font-size:12px;
-  padding:0 6px;
-  margin:6px 0;
-  border-radius:4px;
-  background-color:var(--iui-badge-background-color);
-  color:var(--_iui-badge-text-color);
-  text-transform:uppercase;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  max-width:20ch;
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  font-weight:600;
+@layer itwinui-v1{
+  .iui-badge{
+    --iui-badge-background-color:#c7ccd1;
+    --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    display:inline-block;
+    font-size:12px;
+    padding:0 6px;
+    margin:6px 0;
+    border-radius:4px;
+    background-color:var(--iui-badge-background-color);
+    color:var(--_iui-badge-text-color);
+    text-transform:uppercase;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+        -ms-user-select:none;
+            user-select:none;
+    max-width:20ch;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    font-weight:600;
+  }
 }

package/css/blockquote.css

@@ -2,28 +2,30 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-blockquote{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:block;
-  position:relative;
-  padding:11px 16px;
-  margin:11px 0;
-  text-align:justify;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-  border-radius:4px;
-  background-color:white;
-  border-left:8px solid #008ae0;
-  background-color:var(--iui-color-background-1);
-  border-left:8px solid var(--iui-color-foreground-primary);
-}
-.iui-blockquote > footer{
-  text-align:right;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-blockquote > footer > cite{
-  font-style:normal;
+@layer itwinui-v1{
+  .iui-blockquote{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    display:block;
+    position:relative;
+    padding:11px 16px;
+    margin:11px 0;
+    text-align:justify;
+    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
+    border-radius:4px;
+    background-color:white;
+    border-left:8px solid #008ae0;
+    background-color:var(--iui-color-background-1);
+    border-left:8px solid var(--iui-color-foreground-primary);
+  }
+  .iui-blockquote > footer{
+    text-align:right;
+    color:rgba(0, 0, 0, 0.4);
+    color:var(--iui-text-color-muted);
+  }
+  .iui-blockquote > footer > cite{
+    font-style:normal;
+  }
 }