@itwin/itwinui-css 0.63.0 → 1.0.0-dev.1

package/css/notification-marker.css

@@ -1,293 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.iui-notification-primary{
-  position:relative;
-}
-.iui-notification-primary::before{
-  content:"";
-  position:absolute;
-  width:8px;
-  height:8px;
-  top:-6px;
-  right:-6px;
-  border-radius:100%;
-  background-color:#008ae0;
-  border:2px solid white;
-  background-color:var(--iui-color-foreground-primary);
-  border:2px solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary::before{
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary.iui-urgent::before{
-    -webkit-animation:pulse-primary 2s infinite;
-            animation:pulse-primary 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 #008ae0;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
-    }
-  }
-  @keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 #008ae0;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
-    }
-  }
-}
-
-.iui-notification-positive{
-  position:relative;
-}
-.iui-notification-positive::before{
-  content:"";
-  position:absolute;
-  width:8px;
-  height:8px;
-  top:-6px;
-  right:-6px;
-  border-radius:100%;
-  background-color:#53a21a;
-  border:2px solid white;
-  background-color:var(--iui-color-foreground-positive);
-  border:2px solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive::before{
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive.iui-urgent::before{
-    -webkit-animation:pulse-positive 2s infinite;
-            animation:pulse-positive 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 #53a21a;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
-    }
-  }
-  @keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 #53a21a;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
-    }
-  }
-}
-
-.iui-notification-warning{
-  position:relative;
-}
-.iui-notification-warning::before{
-  content:"";
-  position:absolute;
-  width:8px;
-  height:8px;
-  top:-6px;
-  right:-6px;
-  border-radius:100%;
-  background-color:#f18d13;
-  border:2px solid white;
-  background-color:var(--iui-color-foreground-warning);
-  border:2px solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning::before{
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning.iui-urgent::before{
-    -webkit-animation:pulse-warning 2s infinite;
-            animation:pulse-warning 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 #f18d13;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
-    }
-  }
-  @keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 #f18d13;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
-    }
-  }
-}
-
-.iui-notification-negative{
-  position:relative;
-}
-.iui-notification-negative::before{
-  content:"";
-  position:absolute;
-  width:8px;
-  height:8px;
-  top:-6px;
-  right:-6px;
-  border-radius:100%;
-  background-color:#d10a0a;
-  border:2px solid white;
-  background-color:var(--iui-color-foreground-negative);
-  border:2px solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative::before{
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative.iui-urgent::before{
-    -webkit-animation:pulse-negative 2s infinite;
-            animation:pulse-negative 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 #d10a0a;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
-    }
-  }
-  @keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 #d10a0a;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
-    }
-  }
-}
-
-.iui-notification-accessory{
-  position:relative;
-}
-.iui-notification-accessory::before{
-  content:"";
-  position:absolute;
-  width:8px;
-  height:8px;
-  top:-6px;
-  right:-6px;
-  border-radius:100%;
-  background-color:white;
-  border:2px solid white;
-  background-color:var(--iui-color-foreground-accessory);
-  border:2px solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory::before{
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory.iui-urgent::before{
-    -webkit-animation:pulse-accessory 2s infinite;
-            animation:pulse-accessory 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 white;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
-    }
-  }
-  @keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 white;
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
-      box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
-      box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
-    }
-  }
-}

package/css/popover.css

@@ -1,14 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.iui-popover.tippy-box{
-  all:revert;
-}
-.iui-popover.tippy-box[data-reference-hidden]{
-  visibility:hidden;
-  pointer-events:none;
-}
-.iui-popover .tippy-content{
-  all:revert;
-}

package/css/reset-global-styles.css

@@ -1,50 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-html,
-body{
-  font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
-}
-
-b,
-strong{
-  font-weight:700;
-}
-
-caption,
-small{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:12px;
-  font-weight:400;
-  line-height:22px;
-}
-
-p{
-  margin-bottom:22px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:14px;
-  font-weight:400;
-  line-height:22px;
-}

package/css/wizard.css

@@ -1,190 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-.iui-wizard{
-  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:white;
-  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:white;
-  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;
-  align-items:center;
-  display:flex;
-  flex-direction:column;
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  font-size:12px;
-  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:white;
-  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:white;
-  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:white;
-  color:rgba(0, 0, 0, 0.4);
-  border:1px solid var(--iui-color-background-border);
-  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{
-    transition:background-color 0.2s ease-out;
-  }
-}
-.iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
-  color:white;
-  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);
-}
-
-.iui-wizard-step-name{
-  text-align:center;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  color:#53a21a;
-  color:var(--iui-color-foreground-positive);
-}

package/scss/alert/alert.scss

@@ -1,83 +0,0 @@
-// 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 '../anchor/index';
-@import '../icon/index';
-@import '../text/index';
-
-@mixin iui-alert {
-  @include iui-reset;
-  border-radius: $iui-border-radius;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  @include themed {
-    border: 1px solid t(iui-color-background-5);
-    color: t(iui-text-color);
-    background-color: t(iui-color-background-1);
-  }
-
-  &-icon {
-    @include iui-icons-default;
-    flex-shrink: 0;
-    margin-left: $iui-m;
-  }
-
-  &-message {
-    margin: $iui-baseline $iui-m;
-  }
-
-  &-link {
-    @include iui-anchor-underline('on-initial');
-    border-radius: $iui-border-radius;
-    cursor: pointer;
-    margin-left: $iui-s;
-    user-select: none;
-    white-space: nowrap;
-  }
-
-  > .iui-button {
-    margin-left: auto;
-    margin-right: $iui-s;
-  }
-
-  &.iui-sticky {
-    border-radius: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-  }
-}
-
-/// Modifier mixin to categorize the alert
-/// @arg $statusColor Can be one of: positive, negative, warning, primary
-/// @arg $rootSelector Selector of the root alert element. Defaults to .iui-alert
-@mixin iui-alert-category($statusColor, $rootSelector: '.iui-alert') {
-  @include themed {
-    background: linear-gradient(
-      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6)),
-      rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-6))
-    ),
-      linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
-    border-color: t(iui-color-foreground-#{$statusColor});
-  }
-
-  #{$rootSelector}-icon {
-    @include themed {
-      fill: t(iui-icons-color-#{$statusColor});
-    }
-  }
-
-  #{$rootSelector}-message {
-    @include iui-text-selection($statusColor);
-  }
-
-  #{$rootSelector}-link {
-    @include iui-anchor-status($statusColor);
-  }
-
-  > .iui-button {
-    outline-color: var(--iui-color-foreground-#{$statusColor});
-  }
-}

package/scss/alert/classes.scss

@@ -1,13 +0,0 @@
-// 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-alert {
-  @include iui-alert;
-
-  @each $status in positive, negative, warning, informational {
-    &.iui-#{$status} {
-      @include iui-alert-category($statusColor: if($status == informational, 'primary', $status));
-    }
-  }
-}

package/scss/alert/index.scss

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

package/scss/anchor/anchor.scss

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

package/scss/anchor/classes.scss

@@ -1,11 +0,0 @@
-// 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-anchor {
-  @include iui-anchor;
-
-  &-external {
-    @include iui-anchor-external;
-  }
-}

package/scss/anchor/index.scss

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

package/scss/backdrop/backdrop.scss

@@ -1,27 +0,0 @@
-// 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';
-
-@mixin iui-backdrop {
-  z-index: 998;
-  isolation: isolate;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4); // IE fallback
-  background-color: rgba(0, 0, 0, var(--iui-opacity-4));
-
-  &:not(.iui-backdrop-visible) {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
-  transition-delay: $iui-speed-fast, $iui-speed-instant;
-
-  &.iui-backdrop-visible {
-    transition-delay: $iui-speed-instant; // remove delay for entry animation
-  }
-}