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

package/css/tabs.css

@@ -19,9 +19,6 @@
 .iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
   height:2px;
 }
-.iui-tabs-wrapper.iui-vertical .iui-tabs{
-  flex-direction:column;
-}
 .iui-tabs-wrapper.iui-vertical .iui-tabs li,
 .iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
   width:100%;
@@ -44,7 +41,6 @@
   border:none;
   vertical-align:baseline;
   position:relative;
-  align-items:center;
   list-style:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -61,34 +57,26 @@
   display:flex;
   align-items:center;
   font-size:14px;
+  min-height:38px;
+  height:100%;
   cursor:pointer;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs .iui-tab{
-    transition:background-color 0.2s ease-out;
-  }
+  transition:background-color 0.2s ease-out;
 }
 .iui-tabs .iui-tab.iui-active{
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-icon{
-  fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
 .iui-tabs .iui-tab.iui-active .iui-tab-description{
-  opacity:1;
   opacity:var(--iui-opacity-1);
 }
 .iui-tabs .iui-tab[disabled]{
   cursor:not-allowed;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-tabs .iui-tab[disabled] .iui-tab-icon{
-  fill:rgba(0, 0, 0, 0.2);
   fill:var(--iui-icons-color-actionable-disabled);
 }
 .iui-tabs .iui-tab:focus-visible{
@@ -104,46 +92,34 @@
 .iui-tabs .iui-tab-icon{
   width:16px;
   height:16px;
-  fill:rgba(0, 0, 0, 0.8);
+  flex-shrink:0;
   fill:var(--iui-icons-color-actionable);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs .iui-tab-icon{
-    transition:fill 0.2s ease-out;
-  }
+  transition:fill 0.2s ease-out;
 }
 .iui-tabs .iui-tab-icon + .iui-tab-label{
   margin-left:8px;
 }
-.iui-tabs .iui-tab-label{
-  text-align:left;
-}
 .iui-tabs .iui-tab-description{
   display:none;
   font-size:12px;
-  opacity:0.6;
   opacity:var(--iui-opacity-3);
 }
 .iui-tabs.iui-green .iui-tab:focus{
   outline-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active{
-  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-green .iui-tab.iui-active .iui-tab-icon{
-  fill:#53a21a;
   fill:var(--iui-icons-color-positive);
 }
 .iui-tabs ~ .iui-tabs-content{
   padding-top:11px;
   padding-bottom:11px;
-  box-sizing:border-box;
 }
 .iui-tabs.iui-default .iui-tab::after{
   content:"";
   position:absolute;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -152,15 +128,10 @@
   }
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-default .iui-tab{
-  height:38px;
-  padding:0 16px;
-  box-sizing:border-box;
-  background-color:#f9f9fb;
-  border:1px solid #c7ccd1;
+  padding:4px 16px;
   background-color:var(--iui-color-background-2);
   border:1px solid var(--iui-color-background-5);
 }
@@ -169,15 +140,12 @@
   left:0;
 }
 .iui-tabs.iui-default .iui-tab:hover{
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-tabs.iui-default .iui-tab.iui-active{
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-tabs.iui-default .iui-tab[disabled]{
-  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
 .iui-tabs.iui-default .iui-tab:focus{
@@ -205,26 +173,22 @@
 }
 
 .iui-tabs.iui-default.iui-large .iui-tab{
-  height:49px;
+  min-height:49px;
 }
 .iui-tabs.iui-default.iui-large .iui-tab-description{
-  display:block;
+  display:-webkit-box;
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-default ~ .iui-tabs-content{
   padding-left:16px;
   padding-right:16px;
-  background-color:white;
-  border:1px solid #c7ccd1;
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
 }
 .iui-tabs.iui-borderless .iui-tab{
-  height:38px;
-  padding:0 24px;
+  padding:4px 24px;
   background-color:transparent;
 }
 .iui-tabs.iui-borderless .iui-tab::after{
@@ -232,16 +196,13 @@
   right:0;
 }
 .iui-tabs.iui-borderless .iui-tab:hover{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless .iui-tab.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-horizontal .iui-tabs.iui-borderless ~ .iui-tabs-content{
   margin-top:-2px;
-  border-top:2px solid #dde1e4;
   border-top:2px solid var(--iui-color-background-4);
 }
 
@@ -249,64 +210,54 @@
   margin-left:-2px;
   padding-left:12px;
   padding-right:12px;
-  border-left:2px solid #dde1e4;
   border-left:2px solid var(--iui-color-background-4);
 }
 
 .iui-tabs.iui-borderless.iui-green .iui-active, .iui-tabs.iui-borderless.iui-green .iui-tab:hover{
-  background-color:rgba(83, 162, 26, 0.1);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
-  height:49px;
+  min-height:49px;
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab-description{
-  display:block;
+  display:-webkit-box;
 }
 .iui-tabs.iui-borderless .iui-tab[disabled]:hover{
   background-color:transparent;
-  background-color:transparent;
 }
 .iui-tabs.iui-pill{
   justify-content:space-evenly;
+  gap:2px;
 }
 .iui-tabs.iui-pill > li{
   flex:1 1 0;
 }
-.iui-tabs.iui-pill > li:not(:last-child){
-  margin-right:2px;
-}
 .iui-tabs.iui-pill.iui-green .iui-tab:hover{
-  background-color:rgba(83, 162, 26, 0.1);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-pill .iui-tab{
-  height:38px;
+  padding:4px;
   background-color:transparent;
   width:100%;
   justify-content:center;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-tabs.iui-pill .iui-tab::after{
   bottom:0;
   left:0;
 }
 .iui-tabs.iui-pill .iui-tab:hover{
-  background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-pill .iui-tab[disabled]:hover{
   background-color:transparent;
-  background-color:transparent;
 }
 .iui-tabs.iui-animated::after{
   position:absolute;
   content:" ";
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-tabs.iui-animated.iui-green::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-horizontal .iui-tabs.iui-animated::after{
@@ -336,7 +287,6 @@
 .iui-tabs.iui-not-animated .iui-tab::after{
   content:"";
   position:absolute;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -345,6 +295,17 @@
   }
 }
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
+}
+
+.iui-tab-label{
+  text-align:left;
+  max-width:60ch;
+}
+.iui-tab-label > *{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
 }

package/css/tag.css

@@ -3,19 +3,15 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-tag{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
   height:33px;
-  margin:3px 0;
+  margin-top:3px;
+  margin-bottom:3px;
   border-radius:9999px;
-  box-sizing:border-box;
   padding:0 2px;
   align-items:center;
   transition:border-color 0.2s ease-out;
@@ -23,23 +19,15 @@
   text-transform:none;
   cursor:default;
   -webkit-tap-highlight-color:transparent;
-  border:1px solid rgba(0, 0, 0, 0.4);
-  background-color:white;
-  color:rgba(0, 0, 0, 0.8);
   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);
 }
 .iui-tag:hover{
-  border-color:black;
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
 }
 
 .iui-tag-basic{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
@@ -47,7 +35,6 @@
   display:inline-flex;
 }
 .iui-tag-basic:not(a){
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
@@ -73,12 +60,9 @@
 }
 
 a.iui-tag-basic{
-  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:3px;
-  box-sizing:border-box;
+  border-radius:4px;
   cursor:pointer;
   text-decoration:none;
 }
@@ -93,7 +77,6 @@ a.iui-tag-basic:focus-visible{
   }
 }
 a.iui-tag-basic:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 a.iui-tag-basic:hover{
@@ -133,7 +116,6 @@ a.iui-tag-basic:focus-visible{
 }
 
 .iui-tag-container{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-tag-container > a.iui-tag-basic{
@@ -147,24 +129,17 @@ a.iui-tag-basic:focus-visible{
 }
 .iui-tag-container.iui-truncate{
   overflow:hidden;
-  white-space:nowrap;
   text-overflow:ellipsis;
-}
-@supports (-webkit-line-clamp: 1){
-  .iui-tag-container.iui-truncate{
-    white-space:unset;
-    display:-webkit-box;
-    -webkit-line-clamp:1;
-    -webkit-box-orient:vertical;
-  }
+  display:-webkit-box;
+  -webkit-line-clamp:1;
+  -webkit-box-orient:vertical;
 }
 .iui-tag-container.iui-scroll{
   white-space:nowrap;
   overflow-x:scroll;
 }
 .iui-tag-container.iui-visible{
-  border-radius:3px;
+  border-radius:4px;
   padding:3px 12px;
-  background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }

package/css/text.css

@@ -63,7 +63,6 @@
 }
 
 .iui-text-muted{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
@@ -74,9 +73,8 @@
       -ms-user-select:none;
           user-select:none;
   color:transparent;
-  border-radius:3px;
+  border-radius:4px;
   cursor:progress;
-  background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
   background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));
   background-size:200% 100%;
 }

package/css/textarea.css

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-textarea{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  width:100%;
+  font-family:inherit;
+  font-size:14px;
+  font-weight:400;
+  line-height:22px;
+  border-radius:4px;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  padding:7px 12px;
+  min-height:38px;
+  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));
+  resize:vertical;
+  min-height:38px;
+}
+.iui-textarea:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-2px;
+}
+@supports not selector(*:focus-visible){
+  .iui-textarea:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px;
+  }
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-textarea{
+    transition:border-color 0.2s ease-out;
+  }
+}
+.iui-textarea.iui-small{
+  padding-top:1.5px;
+  padding-bottom:1.5px;
+  min-height:27px;
+}
+.iui-textarea.iui-large{
+  padding-top:12.5px;
+  padding-bottom:12.5px;
+  min-height:49px;
+  font-size:16px;
+}
+.iui-textarea::-moz-placeholder{
+  -moz-user-select:none;
+       user-select:none;
+  color:var(--iui-text-color-placeholder);
+}
+.iui-textarea:-ms-input-placeholder{
+  -ms-user-select:none;
+      user-select:none;
+  color:var(--iui-text-color-placeholder);
+}
+.iui-textarea::placeholder{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  color:var(--iui-text-color-placeholder);
+}
+.iui-textarea:-webkit-autofill{
+  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+}
+.iui-textarea:autofill{
+  border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
+  background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
+}
+.iui-textarea:hover{
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-textarea:hover{
+    transition:border-color 0.2s ease-out;
+  }
+}
+.iui-textarea[disabled]{
+  background-color:var(--iui-color-background-disabled);
+  border-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+  --_hover-color:var(--iui-color-background-disabled);
+}
+.iui-textarea[disabled], .iui-textarea[readonly]{
+  resize:none;
+}