@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

package/css/select.css

@@ -0,0 +1,230 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-select-button{
+  width:100%;
+  margin:0;
+  border-radius:4px;
+  padding:7px 12px;
+  min-height:38px;
+  transition:border-color 0.2s ease-out;
+  display:flex;
+  align-items:center;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  position:relative;
+  overflow:hidden;
+  color:var(--iui-text-color);
+  background-color:var(--iui-color-background-1);
+  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+}
+.iui-select-button:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-2px;
+}
+@supports not selector(*:focus-visible){
+  .iui-select-button:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px;
+  }
+}
+.iui-select-button.iui-small{
+  padding-top:1.5px;
+  padding-bottom:1.5px;
+  min-height:27px;
+}
+.iui-select-button.iui-large{
+  padding-top:12.5px;
+  padding-bottom:12.5px;
+  min-height:49px;
+  font-size:16px;
+}
+.iui-select-button.iui-disabled{
+  background-color:var(--iui-color-background-disabled);
+  border-color:var(--iui-color-background-disabled);
+  --_hover-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+}
+.iui-select-button .iui-icon{
+  width:16px;
+  height:16px;
+  flex:0 0 auto;
+  fill:var(--iui-icons-color-actionable);
+  fill:currentColor;
+}
+.iui-select-button .iui-icon + .iui-content{
+  margin-left:8px;
+}
+.iui-select-button .iui-content{
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+}
+.iui-select-button.iui-placeholder{
+  color:var(--iui-text-color-placeholder);
+}
+
+.iui-select-tag-container{
+  position:absolute;
+  inset:0 40px 0 12px;
+  height:100%;
+  display:flex;
+  align-items:center;
+  gap:4px;
+  overflow:hidden;
+}
+.iui-select-tag-container > * + *{
+  margin-left:4px;
+}
+@supports (gap: 4px){
+  .iui-select-tag-container > * + *{
+    margin-left:0;
+  }
+}
+
+.iui-select-tag{
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  text-transform:lowercase;
+  display:inline-flex;
+  height:33px;
+  margin-top:3px;
+  margin-bottom:3px;
+  border-radius:9999px;
+  padding:0 2px;
+  align-items:center;
+  transition:border-color 0.2s ease-out;
+  font-size:14px;
+  text-transform:none;
+  cursor:default;
+  -webkit-tap-highlight-color:transparent;
+  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-text-color);
+  margin-top:0;
+  margin-bottom:0;
+  display:inline-flex;
+  align-items:center;
+  height:80%;
+  max-height:33px;
+}
+.iui-select-tag:hover{
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+}
+
+.iui-select-tag-label{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-size:14px;
+  font-weight:400;
+  line-height:22px;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  overflow:hidden;
+  margin:0 4px 0 8px;
+  display:inline-flex;
+  align-items:center;
+}
+.iui-select-tag-label:only-child{
+  margin:0 8px;
+}
+.iui-select-button.iui-small .iui-select-tag-label{
+  font-size:12px;
+  line-height:16px;
+}
+
+.iui-select-tag-button{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-family:inherit;
+  display:inline-flex;
+  align-items:center;
+  vertical-align:middle;
+  justify-content:center;
+  position:relative;
+  border-radius:4px;
+  line-height:22px;
+  font-size:14px;
+  font-weight:400;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  cursor:pointer;
+  white-space:nowrap;
+  border:1px solid var(--_iui-button-border-color);
+  background:var(--_iui-button-background-color);
+  color:var(--_iui-button-text-color);
+  gap:var(--_iui-button-gap);
+  height:var(--_iui-button-height);
+  padding-inline:var(--_iui-button-padding-inline);
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  -webkit-tap-highlight-color:transparent;
+  text-decoration:none;
+  --_iui-button-gap:8px;
+  --_iui-button-height:38px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-icon-margin-x:3px;
+  --_iui-button-gap:8px;
+  --_iui-button-height:38px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-padding-inline:8px;
+  border-radius:50%;
+  padding:0 4px;
+  height:100%;
+  aspect-ratio:1/1;
+}
+.iui-select-tag-button:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-select-tag-button:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+  }
+}
+.iui-select-tag-button:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-body);
+  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+}
+.iui-select-tag-button:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-select-tag-button:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+}
+.iui-select-button.iui-small .iui-select-tag-button{
+  font-size:12px;
+  line-height:16px;
+}
+
+.iui-select-tag-button-icon{
+  width:16px;
+  height:16px;
+  transition:fill 0.2s ease-out;
+  fill:currentColor;
+  flex-shrink:0;
+}
+.iui-select-tag-button-icon:only-child{
+  margin-left:var(--_iui-button-icon-margin-x);
+  margin-right:var(--_iui-button-icon-margin-x);
+}
+.iui-select-button.iui-small .iui-select-tag-button-icon{
+  width:12px;
+  height:12px;
+}

package/css/side-navigation.css

@@ -7,8 +7,6 @@
   flex:0 0 auto;
   flex-direction:column;
   height:100%;
-  background-color:#edeff2;
-  border-right:1px solid #c7ccd1;
   background-color:var(--iui-color-background-3);
   border-right:1px solid var(--iui-color-background-border);
 }
@@ -43,17 +41,17 @@
 }
 .iui-side-navigation > .iui-sidenav-content + .iui-sidenav-button.iui-expand{
   border:none;
-  border-top:1px solid #c7ccd1;
   border-top:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation.iui-collapsed{
+  box-sizing:content-box;
   min-width:72px;
   max-width:72px;
 }
 @supports (min-width: max(0px)){
   .iui-side-navigation.iui-collapsed{
-    min-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
-    max-width:max(24px * 3, 24px * 3 + env(safe-area-inset-left));
+    min-width:max(24px + 24px * 2, 24px + 24px * 2 + env(safe-area-inset-left));
+    max-width:max(24px + 24px * 2, 24px + 24px * 2 + env(safe-area-inset-left));
   }
 }
 .iui-side-navigation.iui-expanded,
@@ -81,56 +79,47 @@
     padding-left:max(24px, 24px + env(safe-area-inset-left));
   }
 }
-.iui-side-navigation .iui-sidenav-button > .iui-button-label{
+.iui-side-navigation .iui-sidenav-button > span{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }
 .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
-  border-color:#c7ccd1;
   border-color:var(--iui-color-background-border);
 }
-.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
+.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
   width:24px;
   height:24px;
   flex-shrink:0;
 }
 .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
-  fill:#008ae0;
   fill:var(--iui-color-foreground-primary);
 }
 .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
-  background-color:#f9f9fb;
   background-color:var(--iui-color-background-2);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand{
   height:22px;
   justify-content:center;
   border:none;
-  border-bottom:1px solid #c7ccd1;
   border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:12px;
   height:12px;
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -143,13 +132,10 @@
   min-width:192px;
   max-width:50vw;
   height:100%;
-  box-sizing:border-box;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
   resize:horizontal;
-  background-color:white;
-  border-right:1px solid #c7ccd1;
   background-color:var(--iui-color-background-1);
   border-right:1px solid var(--iui-color-background-border);
 }
@@ -181,7 +167,6 @@
 .iui-side-navigation-submenu-content{
   padding:0 12px 11px;
   flex-shrink:0;
-  box-sizing:border-box;
 }
 .iui-side-navigation-submenu-header{
   height:55px;

package/css/skip-to-content.css

@@ -3,9 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-skip-to-content-link{
-  background-color:rgba(0, 0, 0, 0.8);
   background-color:rgba(0, 0, 0, var(--iui-opacity-2));
-  color:white;
   color:var(--iui-color-foreground-accessory);
   border-radius:9999px;
   text-decoration:none;
@@ -46,7 +44,6 @@
   }
 }
 .iui-skip-to-content-link:hover{
-  background-color:black;
   background-color:rgba(0, 0, 0, var(--iui-opacity-1));
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){

package/css/slider.css

@@ -15,7 +15,6 @@
 }
 .iui-slider-component-container .iui-slider-min svg,
 .iui-slider-component-container .iui-slider-max svg{
-  fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
   display:inline-flex;
   width:16px;
@@ -24,22 +23,18 @@
 }
 .iui-slider-component-container .iui-slider-min svg.iui-informational,
 .iui-slider-component-container .iui-slider-max svg.iui-informational{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-slider-component-container .iui-slider-min svg.iui-positive,
 .iui-slider-component-container .iui-slider-max svg.iui-positive{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-slider-component-container .iui-slider-min svg.iui-warning,
 .iui-slider-component-container .iui-slider-max svg.iui-warning{
-  fill:#f18d13;
   fill:var(--iui-icons-color-warning);
 }
 .iui-slider-component-container .iui-slider-min svg.iui-negative,
 .iui-slider-component-container .iui-slider-max svg.iui-negative{
-  fill:#d10a0a;
   fill:var(--iui-icons-color-negative);
 }
 .iui-slider-component-container .iui-slider-min{
@@ -58,13 +53,10 @@
 }
 .iui-slider-component-container.iui-disabled .iui-slider-thumb{
   cursor:not-allowed;
-  background-color:#dde1e4;
-  border-color:#dde1e4;
   background-color:var(--iui-color-background-4);
   border-color:var(--iui-color-background-4);
 }
 .iui-slider-component-container.iui-disabled .iui-slider-track{
-  background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 }
 .iui-slider-component-container.iui-disabled .iui-slider-min,
@@ -74,7 +66,6 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
@@ -83,6 +74,7 @@
   flex-grow:1;
   cursor:pointer;
   touch-action:pan-y;
+  isolation:isolate;
 }
 .iui-slider-container.iui-grabbing{
   cursor:-webkit-grabbing;
@@ -109,7 +101,6 @@
   height:11px;
   line-height:44px;
   margin-bottom:22px;
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 
@@ -118,11 +109,11 @@
   width:100%;
   height:4px;
   top:12px;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }
 
 .iui-slider-thumb{
+  box-sizing:content-box;
   position:absolute;
   height:16px;
   width:16px;
@@ -132,8 +123,6 @@
   z-index:1;
   cursor:-webkit-grab;
   cursor:grab;
-  background:white;
-  border:1px solid #c7ccd1;
   background:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-border);
 }
@@ -158,6 +147,5 @@
   height:4px;
   left:0;
   top:12px;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }

package/css/stepper.css

@@ -0,0 +1,141 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-stepper{
+  display:flex;
+  flex-direction:column;
+  row-gap:5.5px;
+}
+.iui-stepper > ol{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  justify-content:space-around;
+  align-items:flex-start;
+  width:100%;
+}
+
+.iui-stepper-step{
+  --_iui-stepper-step-background-color:var(--iui-color-background-1);
+  --_iui-stepper-step-border-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-text-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-track-before-color:var(--iui-color-foreground-positive);
+  --_iui-stepper-step-track-after-color:var(--iui-color-foreground-positive);
+  flex:1;
+  align-items:center;
+  display:flex;
+  flex-direction:column;
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-size:12px;
+  font-weight:400;
+  line-height:22px;
+  color:var(--_iui-stepper-step-text-color);
+}
+.iui-stepper-step:first-of-type{
+  --_iui-stepper-step-track-before-color:transparent;
+}
+.iui-stepper-step:last-of-type{
+  --_iui-stepper-step-track-after-color:transparent;
+}
+.iui-stepper-step.iui-current{
+  --_iui-stepper-step-background-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-border-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
+  --_iui-stepper-step-track-after-color:var(--iui-color-background-border);
+  font-weight:600;
+}
+.iui-stepper-step.iui-current ~ .iui-stepper-step{
+  --_iui-stepper-step-background-color:var(--iui-color-background-1);
+  --_iui-stepper-step-border-color:var(--iui-color-background-border);
+  --_iui-stepper-step-number-color:var(--iui-text-color-muted);
+  --_iui-stepper-step-text-color:var(--iui-text-color-muted);
+  --_iui-stepper-step-track-before-color:var(--iui-color-background-5);
+}
+.iui-stepper-step.iui-current ~ .iui-stepper-step:not(:last-of-type){
+  --_iui-stepper-step-track-after-color:var(--iui-color-background-5);
+}
+.iui-stepper-step.iui-clickable:focus{
+  outline:0;
+}
+
+.iui-stepper-circle{
+  align-items:center;
+  border-radius:9999px;
+  display:flex;
+  width:24px;
+  height:24px;
+  justify-content:center;
+  overflow-wrap:break-word;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  border:1px solid var(--_iui-stepper-step-border-color);
+  background-color:var(--_iui-stepper-step-background-color);
+  color:var(--_iui-stepper-step-number-color);
+}
+.iui-clickable .iui-stepper-circle{
+  cursor:pointer;
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
+}
+.iui-clickable .iui-stepper-circle:hover{
+  --_iui-stepper-step-background-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-border-color:var(--iui-color-background-positive);
+  --_iui-stepper-step-number-color:var(--iui-color-foreground-accessory);
+}
+
+.iui-clickable:focus .iui-stepper-circle{
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-1px;
+}
+
+.iui-clickable:focus:not(:focus-visible) .iui-stepper-circle{
+  outline:none;
+}
+
+.iui-stepper-track-content{
+  display:flex;
+  align-items:center;
+  width:100%;
+}
+.iui-stepper-track-content::before, .iui-stepper-track-content::after{
+  content:"";
+  height:2px;
+  flex:1 2 auto;
+}
+.iui-stepper-track-content::before{
+  background-color:var(--_iui-stepper-step-track-before-color);
+}
+.iui-stepper-track-content::after{
+  background-color:var(--_iui-stepper-step-track-after-color);
+}
+
+.iui-stepper-step-name{
+  text-align:center;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  color:var(--_iui-stepper-step-text-color);
+}
+
+.iui-stepper-steps-label{
+  display:block;
+  font-size:18px;
+  text-align:center;
+}
+
+.iui-stepper-steps-label-count{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  margin-right:8px;
+  color:var(--iui-text-color-muted);
+}

package/css/surface.css

@@ -9,7 +9,6 @@
   background-color:var(--iui-surface-background-color);
   border-radius:var(--iui-surface-border-radius);
   box-shadow:var(--iui-surface-elevation);
-  box-sizing:border-box;
   color:var(--iui-text-color);
 }
 @media (forced-colors: active){