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

package/css/carousel.css

@@ -2,131 +2,133 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-carousel{
-  overflow:hidden;
-  border-radius:4px;
-}
-.iui-carousel:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:4px;
-}
-@supports not selector(*:focus-visible){
-  .iui-carousel:focus{
+@layer itwinui-v1{
+  .iui-carousel{
+    overflow:hidden;
+    border-radius:4px;
+  }
+  .iui-carousel:focus-visible{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:4px;
   }
-}
+  @supports not selector(*:focus-visible){
+    .iui-carousel:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:4px;
+    }
+  }
 
-.iui-carousel-slider{
-  display:flex;
-  gap:8px;
-  list-style:none;
-  margin:0;
-  padding:0;
-  -ms-scroll-snap-type:x mandatory;
-      scroll-snap-type:x mandatory;
-  overflow-x:auto;
-  overflow-x:overlay;
-  scrollbar-width:none;
-}
-.iui-carousel-slider::-webkit-scrollbar{
-  display:none;
-}
-.iui-carousel-slider-item{
-  width:100%;
-  flex-shrink:0;
-  box-sizing:border-box;
-  scroll-snap-align:center;
-}
+  .iui-carousel-slider{
+    display:flex;
+    gap:8px;
+    list-style:none;
+    margin:0;
+    padding:0;
+    -ms-scroll-snap-type:x mandatory;
+        scroll-snap-type:x mandatory;
+    overflow-x:auto;
+    overflow-x:overlay;
+    scrollbar-width:none;
+  }
+  .iui-carousel-slider::-webkit-scrollbar{
+    display:none;
+  }
+  .iui-carousel-slider-item{
+    width:100%;
+    flex-shrink:0;
+    box-sizing:border-box;
+    scroll-snap-align:center;
+  }
 
-.iui-carousel-navigation{
-  display:flex;
-  align-items:center;
-  height:33px;
-  box-sizing:border-box;
-  border-top:2px solid #dde1e4;
-  border-top:2px solid var(--iui-color-background-4);
-}
-.iui-carousel-navigation-left, .iui-carousel-navigation-right{
-  display:flex;
-  align-items:center;
-  flex:1;
-}
-.iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
-  outline-offset:-1px;
-  outline:1px solid #008ae0;
-  outline:1px solid var(--iui-color-foreground-primary);
-}
-.iui-carousel-navigation-dots{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  flex:2;
-  max-width:256px;
-  border-radius:4px;
-  white-space:nowrap;
-  overflow-x:auto;
-  overflow-x:overlay;
-  scrollbar-width:none;
-}
-.iui-carousel-navigation-dots:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-carousel-navigation-dots:focus{
+  .iui-carousel-navigation{
+    display:flex;
+    align-items:center;
+    height:33px;
+    box-sizing:border-box;
+    border-top:2px solid #dde1e4;
+    border-top:2px solid var(--iui-color-background-4);
+  }
+  .iui-carousel-navigation-left, .iui-carousel-navigation-right{
+    display:flex;
+    align-items:center;
+    flex:1;
+  }
+  .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
+    outline-offset:-1px;
+    outline:1px solid #008ae0;
+    outline:1px solid var(--iui-color-foreground-primary);
+  }
+  .iui-carousel-navigation-dots{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    flex:2;
+    max-width:256px;
+    border-radius:4px;
+    white-space:nowrap;
+    overflow-x:auto;
+    overflow-x:overlay;
+    scrollbar-width:none;
+  }
+  .iui-carousel-navigation-dots:focus-visible{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
   }
-}
-.iui-carousel-navigation-dots::-webkit-scrollbar{
-  display:none;
-}
-.iui-carousel-navigation-dot{
-  padding:0 8px;
-  height:27px;
-  gap:4px;
-  background-color:transparent;
-  border:none;
-  cursor:pointer;
-}
-.iui-carousel-navigation-dot:hover::after{
-  background-color:rgba(0, 0, 0, 0.6);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-}
-.iui-carousel-navigation-dot::after{
-  content:"";
-  display:block;
-  width:12px;
-  height:12px;
-  border-radius:50%;
-  box-sizing:border-box;
-  border:1px solid transparent;
-  background-color:rgba(0, 0, 0, 0.4);
-  box-shadow:inset 0 0 0 0 white;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
-}
-.iui-carousel-navigation-dot.iui-first::after{
-  transform:scale(0.5);
-}
-.iui-carousel-navigation-dot.iui-second::after{
-  transform:scale(0.75);
-}
-.iui-carousel-navigation-dot.iui-active::after{
-  background-color:#008ae0;
-  border-color:#008ae0;
-  box-shadow:inset 0 0 0 1px white;
-  background-color:var(--iui-color-foreground-primary);
-  border-color:var(--iui-color-foreground-primary);
-  box-shadow:inset 0 0 0 1px var(--iui-color-background-1);
-}
-@media (forced-colors: active){
+  @supports not selector(*:focus-visible){
+    .iui-carousel-navigation-dots:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px;
+    }
+  }
+  .iui-carousel-navigation-dots::-webkit-scrollbar{
+    display:none;
+  }
+  .iui-carousel-navigation-dot{
+    padding:0 8px;
+    height:27px;
+    gap:4px;
+    background-color:transparent;
+    border:none;
+    cursor:pointer;
+  }
+  .iui-carousel-navigation-dot:hover::after{
+    background-color:rgba(0, 0, 0, 0.6);
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  }
+  .iui-carousel-navigation-dot::after{
+    content:"";
+    display:block;
+    width:12px;
+    height:12px;
+    border-radius:50%;
+    box-sizing:border-box;
+    border:1px solid transparent;
+    background-color:rgba(0, 0, 0, 0.4);
+    box-shadow:inset 0 0 0 0 white;
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+    box-shadow:inset 0 0 0 0 var(--iui-color-background-1);
+  }
+  .iui-carousel-navigation-dot.iui-first::after{
+    transform:scale(0.5);
+  }
+  .iui-carousel-navigation-dot.iui-second::after{
+    transform:scale(0.75);
+  }
   .iui-carousel-navigation-dot.iui-active::after{
-    border-width:6px;
+    background-color:#008ae0;
+    border-color:#008ae0;
+    box-shadow:inset 0 0 0 1px white;
+    background-color:var(--iui-color-foreground-primary);
+    border-color:var(--iui-color-foreground-primary);
+    box-shadow:inset 0 0 0 1px var(--iui-color-background-1);
+  }
+  @media (forced-colors: active){
+    .iui-carousel-navigation-dot.iui-active::after{
+      border-width:6px;
+    }
+  }
+  .iui-carousel-navigation-right{
+    justify-content:flex-end;
   }
-}
-.iui-carousel-navigation-right{
-  justify-content:flex-end;
 }

package/css/code.css

@@ -2,93 +2,95 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-code{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
-  font-size:12px;
-  padding:0 4px;
-  border-radius:4px;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  background-color:#edeff2;
-  color:rgba(0, 0, 0, 0.8);
-  background-color:var(--iui-color-background-3);
-  color:var(--iui-text-color);
-}
+@layer itwinui-v1{
+  .iui-code{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    display:inline-block;
+    font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
+    font-size:12px;
+    padding:0 4px;
+    border-radius:4px;
+    -webkit-user-select:all;
+       -moz-user-select:all;
+            user-select:all;
+    background-color:#edeff2;
+    color:rgba(0, 0, 0, 0.8);
+    background-color:var(--iui-color-background-3);
+    color:var(--iui-text-color);
+  }
 
-.iui-codeblock{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  margin:6px 0;
-}
-.iui-codeblock > .iui-title-bar{
-  display:flex;
-  align-items:center;
-  border-radius:4px 4px 0 0;
-  background-color:#edeff2;
-  background-color:var(--iui-color-background-3);
-}
-.iui-codeblock > .iui-title-bar > .iui-title{
-  margin-left:12px;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-}
-.iui-codeblock > .iui-title-bar > .iui-button{
-  margin-left:auto;
-}
-.iui-codeblock > .iui-codeblock-content{
-  margin:0;
-  display:-ms-grid;
-  display:grid;
-  overflow-x:auto;
-  overflow-y:auto;
-  border-radius:0 0 4px 4px;
-  white-space:normal;
-  border:1px solid #edeff2;
-  border:1px solid var(--iui-color-background-3);
-}
-.iui-codeblock > .iui-codeblock-content:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:-1px;
-}
-@supports not selector(*:focus-visible){
-  .iui-codeblock > .iui-codeblock-content:focus{
+  .iui-codeblock{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    margin:6px 0;
+  }
+  .iui-codeblock > .iui-title-bar{
+    display:flex;
+    align-items:center;
+    border-radius:4px 4px 0 0;
+    background-color:#edeff2;
+    background-color:var(--iui-color-background-3);
+  }
+  .iui-codeblock > .iui-title-bar > .iui-title{
+    margin-left:12px;
+    -webkit-user-select:all;
+       -moz-user-select:all;
+            user-select:all;
+  }
+  .iui-codeblock > .iui-title-bar > .iui-button{
+    margin-left:auto;
+  }
+  .iui-codeblock > .iui-codeblock-content{
+    margin:0;
+    display:-ms-grid;
+    display:grid;
+    overflow-x:auto;
+    overflow-y:auto;
+    border-radius:0 0 4px 4px;
+    white-space:normal;
+    border:1px solid #edeff2;
+    border:1px solid var(--iui-color-background-3);
+  }
+  .iui-codeblock > .iui-codeblock-content:focus-visible{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
   }
-}
-.iui-codeblock > .iui-codeblock-content > code{
-  display:block;
-  width:100%;
-  white-space:nowrap;
-  -webkit-hyphens:auto;
-      -ms-hyphens:auto;
-          hyphens:auto;
-  counter-increment:section;
-  font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
-  background-color:white;
-  background-color:var(--iui-color-background-1);
-}
-.iui-codeblock > .iui-codeblock-content > code:nth-child(even){
-  background:rgba(0, 0, 0, 0.02);
-  background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
-}
-.iui-codeblock > .iui-codeblock-content > code::before{
-  content:counter(section);
-  text-align:right;
-  display:inline-block;
-  padding:0 8px;
-  width:24px;
-  background-color:#f9f9fb;
-  color:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-color-background-2);
-  color:var(--iui-text-color-muted);
+  @supports not selector(*:focus-visible){
+    .iui-codeblock > .iui-codeblock-content:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px;
+    }
+  }
+  .iui-codeblock > .iui-codeblock-content > code{
+    display:block;
+    width:100%;
+    white-space:nowrap;
+    -webkit-hyphens:auto;
+        -ms-hyphens:auto;
+            hyphens:auto;
+    counter-increment:section;
+    font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
+    background-color:white;
+    background-color:var(--iui-color-background-1);
+  }
+  .iui-codeblock > .iui-codeblock-content > code:nth-child(even){
+    background:rgba(0, 0, 0, 0.02);
+    background:rgba(var(--iui-color-foreground-body-rgb), 0.02);
+  }
+  .iui-codeblock > .iui-codeblock-content > code::before{
+    content:counter(section);
+    text-align:right;
+    display:inline-block;
+    padding:0 8px;
+    width:24px;
+    background-color:#f9f9fb;
+    color:rgba(0, 0, 0, 0.4);
+    background-color:var(--iui-color-background-2);
+    color:var(--iui-text-color-muted);
+  }
 }