@itwin/itwinui-css 0.41.1 → 0.44.0

package/scss/style/mixins.scss

@@ -20,25 +20,22 @@
   }
 }
 
-@mixin iui-focus($box-shadow-value: iui-focus-box-shadow) {
-  &:focus {
-    outline: 0;
-
-    @include themed {
-      box-shadow: t($box-shadow-value);
-    }
+@mixin focus-visible {
+  &:focus-visible {
+    @content;
   }
 
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
+  @supports #{'not selector(*:focus-visible)'} {
+    &:focus {
+      @content;
+    }
   }
+}
 
-  &:focus-visible {
-    outline: 0;
-
-    @include themed {
-      box-shadow: t($box-shadow-value);
-    }
+@mixin iui-focus($color: var(--iui-color-foreground-primary), $offset: -1px, $thickness: 1px) {
+  @include focus-visible {
+    outline: $thickness solid $color;
+    outline-offset: $offset;
   }
 }
 
@@ -50,7 +47,8 @@
 }
 
 @mixin iui-anchor {
-  @include iui-focus;
+  @include iui-focus($offset: 2px);
+  border-radius: $iui-border-radius;
   text-decoration: none;
   cursor: pointer;
   @include themed {
@@ -167,7 +165,7 @@
     scroll-snap-type: y mandatory;
 
     #{$selector} {
-      scroll-snap-align: start;
+      scroll-snap-align: start none;
     }
   }
 }

package/scss/table/classes.scss

@@ -30,6 +30,18 @@
   @include iui-paginator;
 }
 
+.iui-paginator-ellipsis {
+  @include iui-paginator-ellipsis;
+}
+
+.iui-paginator-pages-group {
+  @include iui-paginator-pages-group;
+}
+
+.iui-paginator-page-button {
+  @include iui-paginator-page-button;
+}
+
 .iui-column-filter {
   @include iui-column-filter;
 }

package/scss/table/paginator.scss

@@ -34,38 +34,6 @@
     @include themed {
       color: t(iui-text-color);
     }
-
-    .iui-button-group {
-      margin: 0 $iui-s;
-
-      > .iui-button,
-      > .iui-ellipsis {
-        width: $iui-component-height;
-
-        &.iui-small {
-          width: $iui-component-height-small;
-        }
-      }
-
-      > .iui-button {
-        // Animation looks odd when switching pages
-        transition: none;
-      }
-
-      > .iui-ellipsis {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        @include themed {
-          color: t(iui-text-color-muted);
-        }
-      }
-
-      > .iui-active::after {
-        top: auto;
-        bottom: $iui-xxs;
-      }
-    }
   }
 
   > .iui-right {
@@ -79,3 +47,42 @@
     text-overflow: ellipsis;
   }
 }
+
+@mixin iui-paginator-ellipsis {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $iui-component-height;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
+
+  &-small {
+    width: $iui-component-height-small;
+  }
+}
+
+@mixin iui-paginator-pages-group {
+  @include iui-button-group;
+  margin: 0 $iui-s;
+
+  > * + * {
+    margin-left: 0; // unset negative margin from button-group
+  }
+
+  button.iui-active::after {
+    top: auto;
+    bottom: $iui-xxs;
+  }
+}
+
+@mixin iui-paginator-page-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  width: $iui-component-height;
+
+  &-small {
+    @include iui-button-size(small);
+    width: $iui-component-height-small;
+  }
+}

package/scss/table/table.scss

@@ -13,17 +13,17 @@
     box-sizing: border-box;
   }
 
-  &.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected) {
-    @include themed {
-      background: rgba(t(iui-color-foreground-body-rgb), 0.02);
-    }
-  }
-
   @include iui-table-cell-icon;
 }
 
 @mixin iui-table-header {
   user-select: none;
+  overflow: hidden;
+  // Fix for Firefox columns misalignment
+  @supports not (overflow: overlay) {
+    overflow-y: scroll;
+  }
+  flex-shrink: 0;
   @include themed {
     background-color: t(iui-color-background-3);
   }
@@ -123,18 +123,26 @@
 }
 
 @mixin iui-table-body {
-  overflow-x: hidden;
   overflow-y: scroll;
-  overflow-y: overlay;
+  overflow: overlay;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  // Allows columns with static width to take more space than the table width
+  align-items: flex-start;
   @include iui-scroll-snapping('.iui-row');
   @include themed {
     background-color: t(iui-color-background-1);
   }
 
+  &.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected) {
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
+    }
+  }
+
   .iui-row {
+    min-width: 100%;
     display: flex;
     border: solid 1px transparent;
     @media (prefers-reduced-motion: no-preference) {
@@ -296,6 +304,7 @@
     justify-content: center;
     align-items: center;
     flex-grow: 1;
+    align-self: center;
     @include themed {
       color: t(iui-text-color-muted);
       background-color: t(iui-color-background-1);

package/scss/tabs/default.scss

@@ -37,6 +37,11 @@
         background-color: t(iui-color-background-3);
       }
     }
+
+    &:focus {
+      outline-width: 2px;
+      outline-offset: -2px;
+    }
   }
 
   @at-root {

package/scss/tabs/tabs.scss

@@ -49,14 +49,7 @@
       }
     }
 
-    &:focus {
-      outline: 1px solid t(iui-color-foreground-primary);
-      outline-offset: -1px;
-    }
-
-    &:focus:not(:focus-visible) {
-      outline: none;
-    }
+    @include iui-focus;
   }
 
   .iui-tab-icon {

package/scss/tag/tag.scss

@@ -6,7 +6,7 @@
 
 @mixin iui-tag {
   @include iui-reset;
-  @include iui-focus;
+  @include iui-focus($offset: -2px, $thickness: 2px);
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -58,6 +58,10 @@
       }
     }
   }
+
+  &.iui-basic {
+    outline-offset: 1px;
+  }
 }
 
 @mixin iui-tag-container {
@@ -65,6 +69,10 @@
     color: t(iui-text-color-muted);
   }
 
+  > a.iui-basic {
+    margin: $iui-xxs;
+  }
+
   > .iui-tag:not(:last-child) {
     margin-right: $iui-xs;
   }

package/scss/time-picker/time-picker.scss

@@ -56,6 +56,7 @@
       &.iui-selected {
         font-weight: $iui-font-weight-semibold;
         cursor: default;
+        @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
         @include themed {
           background-color: t(iui-color-background-primary);
           color: t(iui-color-foreground-accessory);

package/scss/toast-notification/categories.scss

@@ -36,9 +36,12 @@
       }
     }
 
-    > .iui-anchor,
+    > .iui-anchor {
+      outline-color: var(--iui-color-foreground-#{$category});
+    }
+
     > .iui-button {
-      @include iui-focus(iui-focus-#{$category}-box-shadow);
+      outline-color: var(--iui-color-foreground-#{$category});
     }
   }
 }

package/scss/toast-notification/toast.scss

@@ -59,7 +59,6 @@
     user-select: none;
     text-decoration: underline;
     white-space: nowrap;
-    @include iui-focus;
 
     &:hover {
       text-decoration: none;

package/scss/toggle-switch/toggle-switch.scss

@@ -109,8 +109,7 @@
         }
       }
 
-      &:hover:not(:disabled),
-      &:focus {
+      &:hover:not(:disabled) {
         ~ .iui-toggle {
           @include themed {
             border-color: t(iui-color-background-primary);
@@ -168,8 +167,13 @@
     // Focus on non-disabled toggle switch
     &:enabled:focus ~ .iui-toggle {
       @include themed {
-        box-shadow: t(iui-focus-box-shadow);
+        outline: 1px solid t(iui-color-foreground-primary);
       }
+      outline-offset: 1px;
+    }
+
+    &:enabled:focus:not(:focus-visible) ~ .iui-toggle {
+      outline: none;
     }
   }
 

package/scss/tree/tree.scss

@@ -85,9 +85,9 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
 
   &:focus {
     @include themed {
-      outline: thin solid rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      outline-offset: -1px;
+      outline: 1px solid t(iui-color-foreground-primary);
     }
+    outline-offset: -1px;
   }
 
   &:focus:not(:focus-visible) {

package/scss/wizard/wizard.scss

@@ -115,16 +115,16 @@
       outline: 0;
 
       .iui-wizard-circle {
-        outline: 0;
         @include themed {
-          box-shadow: t(iui-focus-positive-box-shadow);
+          outline: 2px solid t(iui-color-foreground-positive);
         }
+        outline-offset: -1px;
       }
     }
 
     &:focus:not(:focus-visible) {
       .iui-wizard-circle {
-        box-shadow: none;
+        outline: none;
       }
     }
   }