@itwin/itwinui-css 0.44.2 → 0.45.0

package/scss/carousel/carousel.scss

@@ -0,0 +1,119 @@
+// 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';
+@import '../text/index';
+@import '../button/button';
+
+@mixin iui-carousel {
+  overflow: hidden;
+  @include iui-focus($offset: 4px);
+  border-radius: $iui-border-radius;
+}
+
+@mixin iui-carousel-slider {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-slow ease-in-out;
+  }
+
+  &-item {
+    width: 100%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+}
+
+@mixin iui-carousel-navigation {
+  display: flex;
+  align-items: center;
+  height: $iui-baseline * 3;
+  box-sizing: border-box;
+  @include themed {
+    border-top: $iui-xxs solid t(iui-color-background-4);
+  }
+
+  &-dots,
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    button[data-pressed='true'] {
+      outline-offset: -1px;
+      @include themed {
+        outline: 1px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-dots {
+    @include iui-reset;
+    @include iui-focus;
+    border-radius: $iui-border-radius;
+    white-space: nowrap;
+    overflow: hidden;
+    justify-content: center;
+    list-style: none;
+  }
+
+  &-dot {
+    @include iui-button-size($size: small);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:hover::after {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
+      }
+    }
+
+    &.iui-invisible {
+      display: none;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: $iui-icons-small;
+      height: $iui-icons-small;
+      border-radius: 50%;
+      transition: background-color $iui-speed-fast ease;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color $iui-speed-fast $iui-speed-fast ease, transform $iui-speed ease;
+      }
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      }
+    }
+
+    &.iui-first::after {
+      transform: scale(0.5);
+    }
+
+    &.iui-second::after {
+      transform: scale(0.75);
+    }
+
+    &.iui-invisible::after {
+      transform: scale(0);
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), 0);
+      }
+    }
+
+    &.iui-active::after {
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-right {
+    justify-content: flex-end;
+  }
+}

package/scss/carousel/classes.scss

@@ -0,0 +1,15 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-carousel {
+  @include iui-carousel;
+}
+
+.iui-carousel-slider {
+  @include iui-carousel-slider;
+}
+
+.iui-carousel-navigation {
+  @include iui-carousel-navigation;
+}

package/scss/carousel/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './carousel';

package/scss/classes.scss

@@ -7,6 +7,7 @@
 @import './blockquote/classes';
 @import './breadcrumbs/classes';
 @import './button/classes';
+@import './carousel/classes';
 @import './code/classes';
 @import './color-picker/classes';
 @import './date-picker/classes';
@@ -24,6 +25,7 @@
 @import './modal/classes';
 @import './non-ideal-state/classes';
 @import './notification-marker/classes';
+@import './popover/classes';
 @import './progress-indicator/classes';
 @import './side-navigation/classes';
 @import './slider/classes';

package/scss/index.scss

@@ -6,6 +6,7 @@
 @import './blockquote/index';
 @import './breadcrumbs/index';
 @import './button/index';
+@import './carousel/index';
 @import './code/index';
 @import './color-picker/index';
 @import './date-picker/index';
@@ -22,6 +23,7 @@
 @import './modal/index';
 @import './non-ideal-state/index';
 @import './notification-marker/index';
+@import './popover/index';
 @import './progress-indicator/index';
 @import './side-navigation/index';
 @import './slider/index';

package/scss/popover/classes.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-popover {
+  @include iui-popover;
+}

package/scss/popover/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './popover';

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/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/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;
+}