@itwin/itwinui-css 0.29.1 → 0.33.0

package/css/side-navigation.css

@@ -117,3 +117,56 @@
         @media (prefers-reduced-motion: no-preference){
           .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
             transition:transform 0.4s ease-out; } }
+
+.iui-side-navigation-submenu{
+  min-width:192px;
+  width:384px;
+  max-width:50vw;
+  height:100%;
+  box-sizing:border-box;
+  padding:0 12px 11px;
+  overflow-x:hidden;
+  overflow-y:auto;
+  overflow-y:overlay;
+  resize:horizontal;
+  background-color:#FFF;
+  border-right:1px solid #C7CCD1;
+  background-color:var(--iui-color-background-1);
+  border-right:1px solid var(--iui-color-background-5); }
+  .iui-side-navigation-submenu.iui-enter, .iui-side-navigation-submenu.iui-exit-active{
+    opacity:0; }
+  .iui-side-navigation-submenu.iui-exit, .iui-side-navigation-submenu.iui-enter-active{
+    opacity:1; }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
+      transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
+  .iui-side-navigation-submenu-header{
+    height:55px;
+    display:flex;
+    align-items:center;
+    justify-content:space-between; }
+    .iui-side-navigation-submenu-header-label{
+      margin:0;
+      padding:0;
+      border:none;
+      vertical-align:baseline;
+      font-size:24px;
+      font-weight:300;
+      line-height:33px;
+      display:flex;
+      align-items:center;
+      overflow:hidden; }
+      .iui-side-navigation-submenu-header-label .iui-button{
+        flex-shrink:0; }
+      .iui-side-navigation-submenu-header-label > *{
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis; }
+      .iui-side-navigation-submenu-header-label-actions{
+        flex-shrink:0;
+        margin-left:8px; }
+
+.iui-side-navigation-wrapper{
+  display:flex;
+  position:relative;
+  height:100%; }

package/css/table.css

@@ -165,7 +165,7 @@
         opacity:1; }
       @media (prefers-reduced-motion: no-preference){
         .iui-table-body .iui-row.iui-expanded-content.iui-enter-active, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
-          transition:opacity 0.2s ease-out, height 0.2s ease-out; } }
+          transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
     .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
       border-bottom-color:transparent; }
     .iui-table-body .iui-row.iui-selected{
@@ -381,7 +381,7 @@
   display:inline-flex;
   flex-direction:column;
   align-items:flex-end; }
-  .iui-column-filter > .iui-input-container:not(.iui-inline){
+  .iui-column-filter > .iui-input-container:not(.iui-inline-label){
     width:100%; }
   .iui-column-filter > .iui-input-container,
   .iui-column-filter > .iui-input{

package/css/time-picker.css

@@ -21,53 +21,87 @@
     border-left:1px solid var(--iui-color-background-4); }
   .iui-time-picker:first-child{
     box-shadow:0 1px 5px rgba(0, 0, 0, 0.25); }
-  .iui-time-picker > .iui-time,
-  .iui-time-picker > .iui-period{
-    padding:11px 8px;
-    overflow-y:auto; }
-    .iui-time-picker > .iui-time:not(:first-child),
-    .iui-time-picker > .iui-period:not(:first-child){
-      border-left:1px solid #DCE0E3;
-      border-left:1px solid var(--iui-color-background-4); }
-    .iui-time-picker > .iui-time > ol,
-    .iui-time-picker > .iui-period > ol{
-      margin:0;
-      padding:0;
-      border:none;
-      vertical-align:baseline;
-      list-style:none; }
-      .iui-time-picker > .iui-time > ol > li,
-      .iui-time-picker > .iui-period > ol > li{
-        padding:11px 16px;
-        border-radius:3px; }
-        .iui-time-picker > .iui-time > ol > li:focus,
-        .iui-time-picker > .iui-period > ol > li:focus{
-          outline:0;
-          box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-          box-shadow:var(--iui-focus-box-shadow); }
-        .iui-time-picker > .iui-time > ol > li:focus:not(:focus-visible),
-        .iui-time-picker > .iui-period > ol > li:focus:not(:focus-visible){
-          box-shadow:none; }
-        .iui-time-picker > .iui-time > ol > li:focus-visible,
-        .iui-time-picker > .iui-period > ol > li:focus-visible{
-          outline:0;
-          box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-          box-shadow:var(--iui-focus-box-shadow); }
-        .iui-time-picker > .iui-time > ol > li:hover,
-        .iui-time-picker > .iui-period > ol > li:hover{
-          cursor:pointer;
-          color:#008BE1;
-          background-color:rgba(0, 139, 225, 0.1);
-          color:var(--iui-color-foreground-primary);
-          background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-        .iui-time-picker > .iui-time > ol > li.iui-selected,
-        .iui-time-picker > .iui-period > ol > li.iui-selected{
-          font-weight:600;
-          cursor:default;
-          background-color:#008BE1;
-          color:#FFF;
-          background-color:var(--iui-color-background-primary);
-          color:var(--iui-color-foreground-accessory); }
-  .iui-time-picker > .iui-period{
-    display:flex;
-    align-items:center; }
+
+.iui-time{
+  padding:11px 8px;
+  overflow-y:auto;
+  overflow-y:overlay;
+  scrollbar-width:none; }
+  .iui-time:not(:first-child){
+    border-left:1px solid #DCE0E3;
+    border-left:1px solid var(--iui-color-background-4); }
+  .iui-time > ol{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    list-style:none; }
+    .iui-time > ol > li{
+      padding:6px 16px;
+      border-radius:3px; }
+      .iui-time > ol > li:focus{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-time > ol > li:focus:not(:focus-visible){
+        box-shadow:none; }
+      .iui-time > ol > li:focus-visible{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-time > ol > li:hover{
+        cursor:pointer;
+        color:#008BE1;
+        background-color:rgba(0, 139, 225, 0.1);
+        color:var(--iui-color-foreground-primary);
+        background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+      .iui-time > ol > li.iui-selected{
+        font-weight:600;
+        cursor:default;
+        background-color:#008BE1;
+        color:#FFF;
+        background-color:var(--iui-color-background-primary);
+        color:var(--iui-color-foreground-accessory); }
+
+.iui-period{
+  padding:11px 8px;
+  overflow-y:auto;
+  overflow-y:overlay;
+  scrollbar-width:none;
+  display:flex;
+  align-items:center; }
+  .iui-period:not(:first-child){
+    border-left:1px solid #DCE0E3;
+    border-left:1px solid var(--iui-color-background-4); }
+  .iui-period > ol{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    list-style:none; }
+    .iui-period > ol > li{
+      padding:6px 16px;
+      border-radius:3px; }
+      .iui-period > ol > li:focus{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-period > ol > li:focus:not(:focus-visible){
+        box-shadow:none; }
+      .iui-period > ol > li:focus-visible{
+        outline:0;
+        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
+        box-shadow:var(--iui-focus-box-shadow); }
+      .iui-period > ol > li:hover{
+        cursor:pointer;
+        color:#008BE1;
+        background-color:rgba(0, 139, 225, 0.1);
+        color:var(--iui-color-foreground-primary);
+        background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+      .iui-period > ol > li.iui-selected{
+        font-weight:600;
+        cursor:default;
+        background-color:#008BE1;
+        color:#FFF;
+        background-color:var(--iui-color-background-primary);
+        color:var(--iui-color-foreground-accessory); }

package/css/toast-notification.css

@@ -20,43 +20,8 @@
       max-width:640px;
       margin:22px 0; } }
   @media (prefers-reduced-motion: no-preference){
-    @-webkit-keyframes openAnimation{
-      from{
-        opacity:0;
-        transform:translateY(-120%); }
-      to{
-        transform:translateY(0); } }
-    @keyframes openAnimation{
-      from{
-        opacity:0;
-        transform:translateY(-120%); }
-      to{
-        transform:translateY(0); } }
-    @-webkit-keyframes closeAnimation{
-      from{
-        transform:scale(1);
-        opacity:1;
-        opacity:var(--iui-opacity-1); }
-      to{
-        transform:scale(0.9);
-        opacity:0; } }
-    @keyframes closeAnimation{
-      from{
-        transform:scale(1);
-        opacity:1;
-        opacity:var(--iui-opacity-1); }
-      to{
-        transform:scale(0.9);
-        opacity:0; } }
     .iui-toast-wrapper .iui-toast-all{
-      transition:all 240ms cubic-bezier(0, 0, 0.2, 1); }
-    .iui-toast-wrapper .iui-toast-entering,
-    .iui-toast-wrapper .iui-toast-entered{
-      -webkit-animation:openAnimation 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) both;
-              animation:openAnimation 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) both; }
-    .iui-toast-wrapper .iui-toast-exiting{
-      -webkit-animation:closeAnimation 120ms cubic-bezier(0.4, 0, 1, 1) both;
-              animation:closeAnimation 120ms cubic-bezier(0.4, 0, 1, 1) both; } }
+      transition:all 240ms cubic-bezier(0, 0, 0.2, 1); } }
   .iui-toast-wrapper.iui-placement-top{
     margin-left:auto;
     margin-right:auto;
@@ -112,7 +77,8 @@
   box-shadow:0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4)), 0 9px 46px rgba(0, 0, 0, 0.25); }
   .iui-toast > .iui-status-area{
     display:flex;
-    align-self:stretch;
+    -ms-grid-row-align:stretch;
+        align-self:stretch;
     justify-content:center;
     align-items:center;
     width:48px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.29.1",
+  "version": "0.33.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -44,7 +44,7 @@
     "build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
     "copy-files": "cpx package.json lib && cpx README.md lib",
     "createComponent": "node ./scripts/createComponent.js",
-    "postcss-processing": "postcss lib/css --use autoprefixer --use postcss-discard-comments -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
+    "postcss-processing": "postcss lib/css -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
     "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
     "lint": "stylelint \"src/**/*.scss\" \"backstop/tests/*.html\"",
     "lint:copyright": "node scripts/copyrightLinter.js",
@@ -79,6 +79,7 @@
     "jimp": ">=0.16.1",
     "trim-newlines": "^3.0.1",
     "glob-parent": "^5.1.2",
-    "jpeg-js": "^0.4.3"
+    "jpeg-js": "^0.4.3",
+    "set-value": "^4.1.0"
   }
 }

package/scss/button/default.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
+@import '../notification-marker/index';
 
 @mixin iui-button-default {
   @include themed {
@@ -24,6 +25,7 @@
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
       color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
+    @include iui-notification-marker-hover;
 
     > .iui-icon {
       @include themed {

package/scss/classes.scss

@@ -8,19 +8,22 @@
 @import './breadcrumbs/classes';
 @import './button/classes';
 @import './code/classes';
+@import './color-picker/classes';
 @import './date-picker/classes';
 @import './expandable-block/classes';
-@import './file-upload/classes';
 @import './fieldset/classes';
+@import './file-upload/classes';
 @import './footer/classes';
 @import './header/classes';
 @import './icon/classes';
+@import './information-panel/classes';
 @import './inputs/classes';
 @import './keyboard/classes';
 @import './location-marker/classes';
 @import './menu/classes';
 @import './modal/classes';
 @import './non-ideal-state/classes';
+@import './notification-marker/classes';
 @import './progress-indicator/classes';
 @import './side-navigation/classes';
 @import './slider/classes';

package/scss/color-picker/classes.scss

@@ -0,0 +1,35 @@
+// 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-color-picker {
+  @include iui-color-picker;
+}
+
+.iui-color-palette {
+  @include iui-color-palette;
+}
+
+.iui-color-swatch {
+  @include iui-color-swatch;
+}
+
+.iui-saved-colors {
+  @include iui-saved-colors;
+}
+
+.iui-color-selection-wrapper {
+  @include iui-color-selection-wrapper;
+}
+
+.iui-color-field {
+  @include iui-color-field;
+}
+
+.iui-color-slider {
+  @include iui-color-slider;
+}
+
+.iui-color-dot {
+  @include iui-color-dot;
+}

package/scss/color-picker/color-picker.scss

@@ -0,0 +1,191 @@
+// 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 '../menu/index';
+@import '../button/borderless';
+
+$iui-color-field-size: $iui-baseline * 19;
+$iui-color-swatch-border-radius: 5px;
+$iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
+$iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
+$iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
+$iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+
+@mixin iui-color-picker {
+  @include iui-dropdown;
+  max-width: ($iui-l * 10) + ($iui-s * 9) + ($iui-sm * 2);
+  // max-width: (10 swatches per row) + (gaps) + (container padding)
+  max-height: ($iui-l * 10) + ($iui-s * 9) + ($iui-baseline * 2);
+  // max-height: (10 rows) + (gaps) + (container padding)
+  box-sizing: border-box;
+  border-radius: $iui-border-radius;
+  display: inline-flex;
+  padding: $iui-baseline $iui-sm;
+  user-select: none;
+  overflow-y: auto;
+  @supports (overflow-y: overlay) {
+    overflow-y: overlay;
+  }
+
+  &.iui-advanced {
+    max-width: ($iui-color-field-size) + ($iui-sm) + ($iui-s) + ($iui-s) + ($iui-sm * 2);
+    // max-width: (color field width) + (color slider margins) + (color slider width) + (container padding);
+    flex-direction: column;
+  }
+}
+
+@mixin iui-color-swatch {
+  height: $iui-l;
+  width: $iui-l;
+  cursor: pointer;
+  border-radius: $iui-color-swatch-border-radius;
+  background-color: var(--swatch-color);
+  margin-bottom: $iui-xs;
+  margin-right: $iui-xs;
+
+  @supports (gap: $iui-s) {
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+
+  @include themed {
+    box-shadow: $iui-inset-box-shadow;
+  }
+
+  &:hover {
+    @include themed {
+      box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    @include themed {
+      box-shadow: $iui-focus-box-shadow, $iui-inset-box-shadow;
+    }
+  }
+
+  &.iui-active {
+    @include themed {
+      box-shadow: $iui-active-box-shadow, $iui-inset-box-shadow;
+    }
+
+    &:hover {
+      @include themed {
+        box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
+      }
+    }
+
+    &:focus {
+      @include themed {
+        box-shadow: $iui-focus-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
+      }
+    }
+
+    &:focus:not(:focus-visible) {
+      @include themed {
+        box-shadow: $iui-inset-box-shadow, $iui-active-box-shadow;
+      }
+    }
+  }
+}
+
+@mixin iui-color-palette {
+  //Contains the color swatches
+  display: flex;
+  flex-wrap: wrap;
+  @supports (gap: $iui-s) {
+    gap: $iui-s;
+  }
+
+  button.iui-button.iui-borderless {
+    height: $iui-l;
+    width: $iui-l;
+    padding: 0;
+  }
+}
+
+@mixin iui-saved-colors {
+  margin-top: $iui-baseline;
+  margin-bottom: $iui-baseline * 0.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+@mixin iui-color-selection-wrapper {
+  display: flex;
+}
+
+@mixin iui-color-field {
+  position: relative;
+  cursor: crosshair;
+  width: $iui-color-field-size;
+  height: $iui-color-field-size;
+
+  @include themed {
+    background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
+      linear-gradient(90deg, rgb(255, 255, 255), var(--color));
+  }
+}
+
+@mixin iui-color-slider {
+  margin-left: $iui-sm;
+  margin-right: $iui-s;
+  position: relative;
+  width: $iui-s;
+  border-radius: $iui-border-radius;
+
+  @include themed {
+    background: linear-gradient(
+      $iui-color-system-red 0%,
+      $iui-color-system-yellow 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      $iui-color-system-blue 67%,
+      $iui-color-system-magenta 83%,
+      $iui-color-system-red 100%
+    );
+  }
+}
+
+@mixin iui-color-dot {
+  position: absolute;
+  top: var(--top, 0%);
+  left: var(--left, 0%);
+  width: $iui-m;
+  height: $iui-m;
+  border-radius: 50%;
+  transform: translate(-$iui-s, -$iui-s);
+  cursor: grab;
+  @include themed {
+    box-shadow: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-1)) 0 0 0 $iui-xxs - 1,
+      inset 0 0 0 $iui-xxs - 1 rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-6));
+    background-color: var(--selected-color);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &.iui-white {
+    transform: translate(-4px, -9px);
+    @include themed {
+      box-shadow: $iui-elevation-2;
+      background-color: #FFF;
+    }
+  }
+
+  &:hover {
+    @include themed {
+      box-shadow: $iui-hover-box-shadow;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    @include themed {
+      box-shadow: $iui-focus-box-shadow;
+    }
+  }
+}

package/scss/color-picker/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 './color-picker';

package/scss/date-picker/date-picker.scss

@@ -89,9 +89,8 @@
           @include iui-focus;
           cursor: pointer;
           display: inline-block;
-          width: $iui-l;
-          line-height: $iui-l;
-          margin: 0 $iui-xs;
+          width: $iui-baseline * 3;
+          line-height: $iui-baseline * 3;
 
           &:hover:not(.iui-selected) {
             border-radius: $iui-border-radius;

package/scss/index.scss

@@ -7,18 +7,21 @@
 @import './breadcrumbs/index';
 @import './button/index';
 @import './code/index';
+@import './color-picker/index';
 @import './date-picker/index';
 @import './expandable-block/index';
 @import './file-upload/index';
 @import './footer/index';
 @import './header/index';
 @import './icon/index';
+@import './information-panel/index';
 @import './inputs/index';
 @import './keyboard/index';
 @import './location-marker/index';
 @import './menu/index';
 @import './modal/index';
 @import './non-ideal-state/index';
+@import './notification-marker/index';
 @import './progress-indicator/index';
 @import './side-navigation/index';
 @import './slider/index';
@@ -27,9 +30,9 @@
 @import './tag/index';
 @import './text/index';
 @import './tile/index';
+@import './time-picker/index';
 @import './toast-notification/index';
 @import './toggle-switch/index';
 @import './tooltip/index';
 @import './user-icon/index';
 @import './wizard/index';
-@import './time-picker/index';

package/scss/information-panel/classes.scss

@@ -0,0 +1,19 @@
+// 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-information-panel-wrapper {
+  @include iui-information-panel-wrapper;
+}
+
+.iui-information-panel {
+  @include iui-information-panel;
+
+  &.iui-right {
+    @include iui-information-panel-right;
+  }
+
+  &.iui-bottom {
+    @include iui-information-panel-bottom;
+  }
+}

package/scss/information-panel/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 './information-panel';