@itwin/itwinui-css 0.59.2 → 0.62.0

package/scss/tabs/borderless.scss

@@ -5,8 +5,7 @@
 
 @mixin iui-tabs-borderless {
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 ($iui-component-padding-horizontal * 2);
+    padding: $iui-xs ($iui-component-padding-horizontal * 2);
     background-color: transparent;
 
     &::after {
@@ -56,11 +55,11 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 

package/scss/tabs/classes.scss

@@ -38,3 +38,7 @@
     @include iui-tab-not-animated;
   }
 }
+
+.iui-tab-label {
+  @include iui-tab-label;
+}

package/scss/tabs/default.scss

@@ -7,8 +7,7 @@
   @include iui-tab-not-animated;
 
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 $iui-m;
+    padding: $iui-xs $iui-m;
     box-sizing: border-box;
     @include themed {
       background-color: t(iui-color-background-2);
@@ -78,11 +77,11 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 

package/scss/tabs/pill.scss

@@ -22,7 +22,7 @@
   }
 
   .iui-tab {
-    height: $iui-component-height;
+    padding: $iui-xs;
     background-color: transparent;
     width: 100%;
     justify-content: center;

package/scss/tabs/tabs.scss

@@ -5,7 +5,6 @@
 @mixin iui-tabs {
   @include iui-reset;
   position: relative;
-  align-items: center;
   list-style: none;
   user-select: none;
 
@@ -16,10 +15,10 @@
     display: flex;
     align-items: center;
     font-size: $iui-font-size;
+    min-height: $iui-component-height;
+    height: 100%;
     cursor: pointer;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out;
-    }
+    transition: background-color $iui-speed-fast ease-out;
     @include themed {
       color: t(iui-text-color);
     }
@@ -61,9 +60,8 @@
   .iui-tab-icon {
     width: $iui-icons-default;
     height: $iui-icons-default;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease-out;
-    }
+    flex-shrink: 0;
+    transition: fill $iui-speed-fast ease-out;
     @include themed {
       fill: t(iui-icons-color-actionable);
     }
@@ -73,10 +71,6 @@
     }
   }
 
-  .iui-tab-label {
-    text-align: left;
-  }
-
   .iui-tab-description {
     display: none;
     font-size: $iui-font-size-small;
@@ -110,6 +104,15 @@
   }
 }
 
+@mixin iui-tab-label {
+  text-align: left;
+  max-width: 60ch;
+
+  > * {
+    @include iui-line-clamp(3);
+  }
+}
+
 @mixin iui-tabs-horizontal {
   flex-direction: column;
 
@@ -131,8 +134,6 @@
 
 @mixin iui-tabs-vertical {
   .iui-tabs {
-    flex-direction: column;
-
     li,
     .iui-tab {
       width: 100%;

package/scss/tag/tag.scss

@@ -5,7 +5,6 @@
 @import '../button/index';
 
 @mixin iui-tag-base {
-  @include iui-reset;
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -24,7 +23,8 @@
 @mixin iui-tag {
   @include iui-tag-base;
   height: $iui-baseline * 3;
-  margin: $iui-component-offset 0;
+  margin-top: $iui-component-offset;
+  margin-bottom: $iui-component-offset;
   border-radius: $iui-border-radius-round;
   box-sizing: border-box;
   padding: 0 $iui-xxs;

package/scss/tile/classes.scss

@@ -4,6 +4,18 @@
 
 .iui-tile {
   @include iui-tile;
+
+  &.iui-positive {
+    @include iui-tile-status(positive);
+  }
+
+  &.iui-warning {
+    @include iui-tile-status(warning);
+  }
+
+  &.iui-negative {
+    @include iui-tile-status(negative);
+  }
 }
 
 .iui-tile-thumbnail-type-indicator {

package/scss/tile/tile.scss

@@ -87,6 +87,35 @@
       -webkit-line-clamp: 2;
     }
   }
+
+  //#region Statuses
+  &.iui-progress {
+    cursor: progress;
+    font-style: italic;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    .iui-tile-name-label {
+      color: var(--iui-text-color-muted);
+    }
+
+    .iui-thumbnail-icon,
+    .iui-tile-thumbnail-picture {
+      filter: grayscale(100%);
+    }
+
+    &:hover .iui-tile-thumbnail-picture,
+    &:focus-within .iui-tile-thumbnail-picture {
+      transform: none;
+    }
+
+    .iui-tile-more-options {
+      display: none;
+    }
+  }
+  //#endregion Statuses
 }
 
 @mixin iui-tile-content {
@@ -319,3 +348,23 @@
     @include visually-hidden;
   }
 }
+
+@mixin iui-tile-status($status) {
+  @include iui-text-selection($status);
+
+  .iui-tile-thumbnail {
+    box-shadow: 0 $iui-xs 0 var(--iui-color-foreground-#{$status});
+  }
+
+  @at-root &.iui-folder .iui-tile-thumbnail {
+    box-shadow: $iui-xs 0 0 var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-tile-name-label {
+    color: var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-tile-status-icon {
+    fill: var(--iui-color-foreground-#{$status});
+  }
+}

package/src/index.scss

@@ -4,6 +4,7 @@
 @import './alert/index';
 @import './anchor/index';
 @import './badge/index';
+@import './backdrop/index';
 @import './blockquote/index';
 @import './breadcrumbs/index';
 @import './button/index';