@itwin/itwinui-css 0.43.0 → 0.45.0

package/scss/popover/popover.scss

@@ -0,0 +1,22 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+
+// tippy.js helper class to hide Popover when it is scrolled out of view
+@mixin iui-popover {
+  &[data-reference-hidden] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  // Resets tippy.js default stylings that interfere with our own
+  /* stylelint-disable-next-line selector-class-pattern */
+  &.tippy-box {
+    all: revert;
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .tippy-content {
+    all: revert;
+  }
+}

package/scss/side-navigation/side-navigation.scss

@@ -100,15 +100,7 @@
 
     &,
     &:hover,
-    &[disabled],
-    &:focus {
-      @include themed {
-        border-color: t(iui-color-background-5);
-      }
-    }
-
-    // Overriding border from default button
-    &:focus:not(:focus-visible) {
+    &[disabled] {
       @include themed {
         border-color: t(iui-color-background-5);
       }
@@ -130,19 +122,6 @@
       @include themed {
         box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
       }
-
-      &:focus {
-        @include themed {
-          box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3)),
-            inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-        }
-      }
-
-      &:focus:not(:focus-visible) {
-        @include themed {
-          box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-        }
-      }
     }
 
     &[disabled],
@@ -152,17 +131,6 @@
       }
     }
 
-    &:focus {
-      outline: 0;
-      @include themed {
-        box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      box-shadow: none;
-    }
-
     &.iui-expand {
       height: $iui-line-height;
       justify-content: center;

package/scss/slider/slider.scss

@@ -68,6 +68,7 @@ $tick-height: $iui-baseline; // 11px
   ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
   z-index: 1;
   cursor: grab;
+  @include iui-focus($thickness: 2px);
   @include themed {
     background: t(iui-color-background-1);
     border: 1px solid t(iui-color-background-5);
@@ -76,8 +77,6 @@ $tick-height: $iui-baseline; // 11px
   &:active {
     cursor: grabbing;
   }
-
-  @include iui-focus();
 }
 
 @mixin iui-slider-track {

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 {

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,37 +34,6 @@
     @include themed {
       color: t(iui-text-color);
     }
-
-    .iui-button-group {
-      margin: 0 $iui-s;
-
-      > * {
-        margin-right: 0; // unset negative margin from button-group
-
-        > .iui-button,
-        > .iui-ellipsis {
-          width: $iui-component-height;
-
-          &.iui-small {
-            width: $iui-component-height-small;
-          }
-        }
-
-        > .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 {
@@ -78,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

@@ -135,7 +135,7 @@
     background-color: t(iui-color-background-1);
   }
 
-  &.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected) {
+  &.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) {
     @include themed {
       background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
     }

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/tile/classes.scss

@@ -5,3 +5,31 @@
 .iui-tile {
   @include iui-tile;
 }
+
+.iui-tile-thumbnail-type-indicator {
+  @include iui-tile-thumbnail-type-indicator;
+}
+
+.iui-tile-thumbnail-quick-action {
+  @include iui-tile-thumbnail-quick-action;
+}
+
+.iui-tile-thumbnail-badge-container {
+  @include iui-tile-thumbnail-badge;
+}
+
+.iui-tile-buttons {
+  @include iui-tile-buttons;
+}
+
+.iui-tile-thumbnail {
+  @include iui-tile-thumbnail;
+}
+
+.iui-tile-thumbnail-picture {
+  @include iui-tile-thumbnail-picture;
+}
+
+.iui-tile-content {
+  @include iui-tile-content;
+}