@itwin/itwinui-css 0.50.0 → 0.52.0

package/css/wizard.css

@@ -6,58 +6,65 @@
   margin:0;
   padding:0;
   border:none;
-  vertical-align:baseline; }
-  .iui-wizard > ol{
-    margin:0;
-    padding:0;
-    border:none;
-    vertical-align:baseline;
-    display:flex;
-    justify-content:space-around;
-    align-items:flex-start;
-    width:100%;
-    margin-bottom:5.5px; }
-  .iui-wizard.iui-long .iui-wizard-steps-label{
-    display:block;
-    font-size:18px;
-    text-align:center; }
-  .iui-wizard.iui-long .iui-steps-count{
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    margin-right:8px;
-    color:rgba(0, 0, 0, 0.4);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard.iui-workflow > ol{
-    align-items:center; }
-  .iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
-    padding-left:16px;
-    padding-right:16px;
-    height:100%;
-    width:auto;
-    border-radius:0;
-    font-weight:400;
-    text-align:center;
-    background-color:#53A21A;
-    border-color:#53A21A;
-    color:#FFF;
-    background-color:var(--iui-color-background-positive);
-    border-color:var(--iui-color-background-positive);
-    color:var(--iui-color-foreground-accessory); }
-  .iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle,
-  .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
-    border-radius:12px;
-    background-color:#FFF;
-    border-color:#53A21A;
-    color:#53A21A;
-    background-color:var(--iui-color-background-1);
-    border-color:var(--iui-color-foreground-positive);
-    color:var(--iui-color-foreground-positive); }
-  .iui-wizard.iui-workflow .iui-wizard-track-content::before,
-  .iui-wizard.iui-workflow .iui-wizard-track-content::after{
-    background-color:#53A21A;
-    background-color:var(--iui-color-foreground-positive); }
+  vertical-align:baseline;
+}
+.iui-wizard > ol{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  justify-content:space-around;
+  align-items:flex-start;
+  width:100%;
+  margin-bottom:5.5px;
+}
+.iui-wizard.iui-long .iui-wizard-steps-label{
+  display:block;
+  font-size:18px;
+  text-align:center;
+}
+.iui-wizard.iui-long .iui-steps-count{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  margin-right:8px;
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard.iui-workflow > ol{
+  align-items:center;
+}
+.iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
+  padding-left:16px;
+  padding-right:16px;
+  height:100%;
+  width:auto;
+  border-radius:0;
+  font-weight:400;
+  text-align:center;
+  background-color:#53A21A;
+  border-color:#53A21A;
+  color:#FFF;
+  background-color:var(--iui-color-background-positive);
+  border-color:var(--iui-color-background-positive);
+  color:var(--iui-color-foreground-accessory);
+}
+.iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
+  border-radius:12px;
+  background-color:#FFF;
+  border-color:#53A21A;
+  color:#53A21A;
+  background-color:var(--iui-color-background-1);
+  border-color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard.iui-workflow .iui-wizard-track-content::before,
+.iui-wizard.iui-workflow .iui-wizard-track-content::after{
+  background-color:#53A21A;
+  background-color:var(--iui-color-foreground-positive);
+}
 
 .iui-wizard-step{
   flex:1;
@@ -72,89 +79,106 @@
   font-weight:400;
   line-height:22px;
   color:#53A21A;
-  color:var(--iui-color-background-positive); }
-  .iui-wizard-step .iui-wizard-circle{
-    align-items:center;
-    border-radius:50%;
-    display:flex;
-    width:24px;
-    height:24px;
-    justify-content:center;
-    overflow-wrap:break-word;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-    border:1px solid #53A21A;
-    background-color:#FFF;
-    color:#53A21A;
-    border:1px solid var(--iui-color-foreground-positive);
-    background-color:var(--iui-color-background-1);
-    color:var(--iui-color-foreground-positive); }
-  .iui-wizard-step.iui-current{
-    font-weight:600; }
-    .iui-wizard-step.iui-current .iui-wizard-step-name{
-      color:#53A21A;
-      color:var(--iui-color-foreground-positive); }
-    .iui-wizard-step.iui-current .iui-wizard-circle{
-      color:#FFF;
-      border-color:#53A21A;
-      background-color:#53A21A;
-      color:var(--iui-color-foreground-accessory);
-      border-color:var(--iui-color-background-positive);
-      background-color:var(--iui-color-background-positive); }
-    .iui-wizard-step.iui-current .iui-wizard-track-content::after{
-      background-color:#C7CCD1;
-      background-color:var(--iui-color-background-5); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
-    border:1px solid #C7CCD1;
-    background-color:#FFF;
-    color:rgba(0, 0, 0, 0.4);
-    border:1px solid var(--iui-color-background-5);
-    background-color:var(--iui-color-background-1);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
-    color:rgba(0, 0, 0, 0.4);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before,
-  .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
-    background-color:#C7CCD1;
-    background-color:var(--iui-color-background-5); }
+  color:var(--iui-color-background-positive);
+}
+.iui-wizard-step .iui-wizard-circle{
+  align-items:center;
+  border-radius:50%;
+  display:flex;
+  width:24px;
+  height:24px;
+  justify-content:center;
+  overflow-wrap:break-word;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
+  border:1px solid #53A21A;
+  background-color:#FFF;
+  color:#53A21A;
+  border:1px solid var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard-step.iui-current{
+  font-weight:600;
+}
+.iui-wizard-step.iui-current .iui-wizard-step-name{
+  color:#53A21A;
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard-step.iui-current .iui-wizard-circle{
+  color:#FFF;
+  border-color:#53A21A;
+  background-color:#53A21A;
+  color:var(--iui-color-foreground-accessory);
+  border-color:var(--iui-color-background-positive);
+  background-color:var(--iui-color-background-positive);
+}
+.iui-wizard-step.iui-current .iui-wizard-track-content::after{
+  background-color:#C7CCD1;
+  background-color:var(--iui-color-background-5);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
+  border:1px solid #C7CCD1;
+  background-color:#FFF;
+  color:rgba(0, 0, 0, 0.4);
+  border:1px solid var(--iui-color-background-5);
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
+  background-color:#C7CCD1;
+  background-color:var(--iui-color-background-5);
+}
+.iui-wizard-step.iui-clickable .iui-wizard-circle{
+  cursor:pointer;
+}
+@media (prefers-reduced-motion: no-preference){
   .iui-wizard-step.iui-clickable .iui-wizard-circle{
-    cursor:pointer; }
-    @media (prefers-reduced-motion: no-preference){
-      .iui-wizard-step.iui-clickable .iui-wizard-circle{
-        transition:background-color 0.2s ease-out; } }
-    .iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
-      color:#FFF;
-      border:1px solid #53A21A;
-      background-color:#53A21A;
-      color:var(--iui-color-foreground-accessory);
-      border:1px solid var(--iui-color-background-positive);
-      background-color:var(--iui-color-background-positive); }
-  .iui-wizard-step.iui-clickable:focus{
-    outline:0; }
-    .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-      outline:2px solid #53A21A;
-      outline:2px solid var(--iui-color-foreground-positive);
-      outline-offset:-1px; }
-  .iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
-    outline:none; }
-  .iui-wizard-step:first-of-type .iui-wizard-track-content::before,
-  .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
-    background-color:transparent; }
+    transition:background-color 0.2s ease-out;
+  }
+}
+.iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
+  color:#FFF;
+  border:1px solid #53A21A;
+  background-color:#53A21A;
+  color:var(--iui-color-foreground-accessory);
+  border:1px solid var(--iui-color-background-positive);
+  background-color:var(--iui-color-background-positive);
+}
+.iui-wizard-step.iui-clickable:focus{
+  outline:0;
+}
+.iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
+  outline:2px solid #53A21A;
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-1px;
+}
+.iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
+  outline:none;
+}
+.iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
+  background-color:transparent;
+}
 
 .iui-wizard-track-content{
   display:flex;
   align-items:center;
-  width:100%; }
-  .iui-wizard-track-content::before, .iui-wizard-track-content::after{
-    content:'';
-    height:2px;
-    flex:1 2 auto;
-    background-color:#53A21A;
-    background-color:var(--iui-color-foreground-positive); }
+  width:100%;
+}
+.iui-wizard-track-content::before, .iui-wizard-track-content::after{
+  content:"";
+  height:2px;
+  flex:1 2 auto;
+  background-color:#53A21A;
+  background-color:var(--iui-color-foreground-positive);
+}
 
 .iui-wizard-step-name{
   text-align:center;
@@ -162,4 +186,5 @@
      -moz-user-select:all;
           user-select:all;
   color:#53A21A;
-  color:var(--iui-color-foreground-positive); }
+  color:var(--iui-color-foreground-positive);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -38,16 +38,15 @@
     ]
   },
   "scripts": {
-    "build": "yarn clean && yarn build:scss && yarn build:css && yarn build:html && yarn copy-files",
+    "build": "yarn clean && yarn build:scss && yarn build:css && yarn lint:copyright --fix lib/css/* && yarn build:html && yarn copy-files",
     "build:scss": "cpx \"./src/**/*.scss\" ./lib/scss",
-    "build:css": "node ./scripts/generateCss.js src lib/css && yarn postcss-processing && yarn lint:copyright --fix lib/css/*",
+    "build:css": "node ./scripts/generateCss.js src lib/css",
     "build:html": "node ./scripts/generateHtml.js backstop/tests backstop/minified",
     "build:watch": "yarn build && concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn build:watch:html\"",
     "build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
     "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 -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
     "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
     "lint": "stylelint \"src/**/*.scss\"",
     "lint:copyright": "node scripts/copyrightLinter.js",
@@ -68,12 +67,12 @@
     "html-minifier": "^4.0.0",
     "husky": "=4",
     "lint-staged": "^11.2.6",
-    "node-sass": "^7.0.0",
     "postcss": "^8.4.5",
-    "postcss-cli": "^8.3.1",
     "postcss-discard-comments": "^5.0.1",
+    "postcss-scss": "^4.0.3",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
+    "sass-embedded": "^1.49.9",
     "stylelint": "^14.2.0",
     "stylelint-config-sass-guidelines": "^9.0.1"
   },

package/scss/alert/alert.scss

@@ -79,11 +79,7 @@
   }
 
   #{$rootSelector}-message {
-    &::selection {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-4));
-      }
-    }
+    @include iui-text-selection($statusColor);
   }
 
   #{$rootSelector}-link {

package/scss/button/button-group.scss

@@ -10,8 +10,11 @@
   align-items: center;
   isolation: isolate;
 
-  @if $orientation != 'horizontal' {
+  @if $orientation == 'horizontal' {
+    max-width: 100%;
+  } @else {
     flex-direction: column;
+    max-height: 100%;
   }
 
   $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';

package/scss/carousel/carousel.scss

@@ -46,7 +46,6 @@
     border-top: $iui-xxs solid t(iui-color-background-4);
   }
 
-  &-dots,
   &-left,
   &-right {
     display: flex;
@@ -64,6 +63,10 @@
   &-dots {
     @include iui-reset;
     @include iui-focus;
+    display: flex;
+    align-items: center;
+    flex: 2;
+    max-width: $iui-xxl * 4;
     border-radius: $iui-border-radius;
     white-space: nowrap;
     overflow: hidden;

package/scss/code/codeblock.scss

@@ -5,7 +5,7 @@
 
 @mixin iui-codeblock {
   @include iui-reset;
-  margin: round($iui-baseline/2) 0;
+  margin: round($iui-baseline * 0.5) 0;
 
   > .iui-title-bar {
     display: flex;

package/scss/inputs/checkbox.scss

@@ -24,6 +24,7 @@
   position: relative;
   border-radius: $iui-border-radius;
   background-color: var(--_iui-checkbox-background-color);
+  flex-shrink: 0;
   cursor: pointer;
 
   &::before {

package/scss/inputs/labeled-inputs.scss

@@ -55,6 +55,10 @@
     // stylelint-enable
   }
 
+  .iui-input-group .iui-toggle-switch-wrapper {
+    padding: round($iui-baseline * 0.5) 0;
+  }
+
   // #region Cursors
   @include iui-input-label-cursor;
 
@@ -124,9 +128,9 @@
       display: flex;
       gap: $iui-m;
 
-      > .iui-checkbox,
-      > .iui-radio,
-      > .iui-toggle-switch {
+      > .iui-checkbox-wrapper,
+      > .iui-radio-wrapper,
+      > .iui-toggle-switch-wrapper {
         margin-right: $iui-m;
 
         @supports (gap: $iui-m) {
@@ -300,11 +304,7 @@
 /// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon
 /// @arg textSelector - selector to apply text color on. Defaults to .iui-message
 @mixin iui-input-status($status, $iconSelector: '.iui-input-icon', $textSelector: '.iui-message') {
-  *::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
-    }
-  }
+  @include iui-text-selection($status);
 
   #{$iconSelector} {
     @include themed {

package/scss/inputs/radio.scss

@@ -3,10 +3,6 @@
 @import '../style/index';
 
 @mixin iui-radio {
-  &-wrapper {
-    @include iui-inputs-checkbox-radio;
-  }
-
   @include iui-checkbox;
 
   border-radius: 50%;

package/scss/location-marker/data-rich.scss

@@ -12,7 +12,7 @@
     border-radius: $iui-border-radius;
     text-align: center;
     font-size: $iui-font-size-leading;
-    padding: round($iui-baseline/4) $iui-s;
+    padding: round($iui-baseline * 0.25) $iui-s;
     filter: drop-shadow($iui-elevation-2);
     box-sizing: border-box;
     position: relative;

package/scss/location-marker/me.scss

@@ -20,11 +20,11 @@
   }
 
   > .iui-location-marker-me-dot {
-    width: $iui-icons-large/2;
-    height: $iui-icons-large/2;
+    width: $iui-icons-large * 0.5;
+    height: $iui-icons-large * 0.5;
     position: absolute;
-    top: $iui-icons-large/4;
-    left: $iui-icons-large/4;
+    top: $iui-icons-large * 0.25;
+    left: $iui-icons-large * 0.25;
     border-radius: 50%;
     box-sizing: border-box;
 

package/scss/modal/classes.scss

@@ -4,4 +4,8 @@
 
 .iui-modal {
   @include iui-modal;
+
+  &-full-page {
+    @include iui-modal-full-page;
+  }
 }

package/scss/modal/modal.scss

@@ -11,15 +11,37 @@
   left: 0;
   width: 100%;
   height: 100%;
+  @include themed {
+    background-color: rgba(0, 0, 0, t(iui-opacity-4));
+  }
+
+  // #region Small Modal Animations for CSS
   visibility: hidden;
   opacity: 0;
   @media (prefers-reduced-motion: no-preference) {
-    transition: visibility 0s linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
+    transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
   }
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-4));
+
+  &.iui-modal-visible {
+    visibility: visible;
+    opacity: 1;
+    // remove delay for entry animation so it's instantly visible
+    transition-delay: $iui-speed-instant;
+  }
+  // #endregion Small Modal Animations for CSS
+
+  // #region Small Modal Animations for React
+  &.iui-modal-animation-enter {
+    visibility: hidden;
+    opacity: 0;
   }
 
+  &.iui-modal-animation-enter-active {
+    visibility: visible;
+    opacity: 1;
+  }
+  // #endregion Full Page Modal Animations for React
+
   > .iui-modal-dialog {
     position: absolute;
     left: 50%;
@@ -27,10 +49,12 @@
     transform: translate(-50%, -33%);
     z-index: 1000;
     max-width: 50%;
-    min-width: 400px;
+    min-width: 380px;
+    max-height: 100vh;
     border-radius: $iui-border-radius;
     box-shadow: $iui-elevation-24;
     padding: $iui-baseline $iui-m;
+    box-sizing: border-box;
 
     @include themed {
       background-color: t(iui-color-background-1);
@@ -67,11 +91,61 @@
         margin-right: $iui-s;
       }
     }
+
+    .iui-modal-content {
+      flex-grow: 2;
+      margin: 0 -#{$iui-m};
+      padding: 0 $iui-m;
+      overflow-y: auto;
+      overflow-y: overlay;
+    }
   }
+}
 
-  &.iui-modal-visible {
-    visibility: visible;
+@mixin iui-modal-full-page {
+  > .iui-modal-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+    left: 0;
+    top: 0;
+    transform: none;
+    max-width: initial;
+    min-width: initial;
+    border-radius: 0;
+    will-change: transform;
+  }
+
+  // #region Full Page Modal Animations for CSS
+  @media (prefers-reduced-motion: no-preference) {
+    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed ease-out $iui-speed-fast;
+  }
+
+  > .iui-modal-dialog {
+    transform: translateY(100%);
+    @media (prefers-reduced-motion: no-preference) {
+      transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed, transform $iui-speed ease-in;
+    }
+  }
+
+  &.iui-modal-visible > .iui-modal-dialog {
+    transform: translateY(0);
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform $iui-speed ease-out;
+    }
+  }
+  // #endregion Full Page Modal Animations for CSS
+
+  // #region Full Page Modal Animations for React
+  &.iui-modal-animation-enter > .iui-modal-dialog {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  &.iui-modal-animation-enter-active > .iui-modal-dialog {
+    transform: translateY(0);
     opacity: 1;
-    transition-delay: 0s;
   }
+  // #endregion Full Page Modal Animations for React
 }

package/scss/popover/popover.scss

@@ -1,10 +1,10 @@
+/* stylelint-disable selector-class-pattern */
 // 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 {
-  /* stylelint-disable-next-line selector-class-pattern */
   &.tippy-box {
     &[data-reference-hidden] {
       visibility: visible;
@@ -16,7 +16,6 @@
   }
 
   // Resets tippy.js default stylings that interfere with our own
-  /* stylelint-disable-next-line selector-class-pattern */
   .tippy-content {
     all: revert;
   }