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

package/css/tabs.css

@@ -60,29 +60,23 @@
   min-height:38px;
   height:100%;
   cursor:pointer;
-  transition:background-color 0.2s ease-out;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
+  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{
@@ -99,9 +93,8 @@
   width:16px;
   height:16px;
   flex-shrink:0;
-  transition:fill 0.2s ease-out;
-  fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
+  transition:fill 0.2s ease-out;
 }
 .iui-tabs .iui-tab-icon + .iui-tab-label{
   margin-left:8px;
@@ -109,29 +102,24 @@
 .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){
@@ -140,14 +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{
   padding:4px 16px;
-  box-sizing:border-box;
-  background-color:#f9f9fb;
-  border:1px solid #c7ccd1;
   background-color:var(--iui-color-background-2);
   border:1px solid var(--iui-color-background-5);
 }
@@ -156,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{
@@ -198,14 +179,11 @@
   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);
 }
@@ -218,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);
 }
 
@@ -235,12 +210,10 @@
   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{
@@ -251,19 +224,15 @@
 }
 .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{
@@ -278,21 +247,17 @@
   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{
@@ -322,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){
@@ -331,7 +295,6 @@
   }
 }
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 
@@ -341,14 +304,8 @@
 }
 .iui-tab-label > *{
   overflow:hidden;
-  white-space:nowrap;
   text-overflow:ellipsis;
-}
-@supports (-webkit-line-clamp: 1){
-  .iui-tab-label > *{
-    white-space:unset;
-    display:-webkit-box;
-    -webkit-line-clamp:3;
-    -webkit-box-orient:vertical;
-  }
+  display:-webkit-box;
+  -webkit-line-clamp:3;
+  -webkit-box-orient:vertical;
 }

package/css/tag.css

@@ -12,7 +12,6 @@
   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;
@@ -20,15 +19,11 @@
   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));
 }
 
@@ -40,7 +35,6 @@
   display:inline-flex;
 }
 .iui-tag-basic:not(a){
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
@@ -66,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:4px;
-  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -86,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{
@@ -126,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{
@@ -140,16 +129,10 @@ 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;
@@ -158,6 +141,5 @@ a.iui-tag-basic:focus-visible{
 .iui-tag-container.iui-visible{
   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);
 }
 
@@ -76,7 +75,6 @@
   color:transparent;
   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;
+}