@itwin/itwinui-css 0.59.2 → 1.0.0-dev.0

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/button/button-icon.scss

@@ -1,12 +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 '../icon/index';
-
-/// Mixin for button icons
-@mixin iui-button-icon {
-  width: $iui-icons-default;
-  height: $iui-icons-default;
-  transition: fill $iui-speed-fast ease-out;
-  fill: currentColor;
-}

package/scss/button/cta.scss

@@ -1,31 +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 './button';
-@import './button-icon';
-@import './disabled';
-
-@mixin iui-button-cta {
-  --_iui-button-text-color: var(--iui-color-foreground-accessory);
-
-  @include themed {
-    background-color: t(iui-color-background-positive);
-    border-color: t(iui-color-background-positive);
-    color: t(iui-color-foreground-accessory);
-  }
-  color: var(--_iui-button-text-color);
-  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
-
-  &:hover,
-  &:active {
-    @include themed {
-      background-color: t(iui-color-background-positive-overlay);
-      border-color: t(iui-color-background-positive-overlay);
-    }
-  }
-
-  &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
-  }
-}

package/scss/button/disabled.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 '../style/index';
-@import './button-icon';
-
-@mixin iui-button-disabled {
-  cursor: not-allowed;
-  @include themed {
-    background: t(iui-color-background-disabled);
-    border-color: t(iui-color-background-disabled);
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-  }
-}

package/scss/button/high-visibility.scss

@@ -1,31 +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 './button';
-@import './disabled';
-@import './button-icon';
-
-@mixin iui-button-high-visibility {
-  --_iui-button-text-color: var(--iui-color-foreground-accessory);
-
-  @include themed {
-    background-color: t(iui-color-background-primary);
-    border-color: t(iui-color-background-primary);
-    color: t(iui-color-foreground-accessory);
-  }
-  color: var(--_iui-button-text-color);
-  @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
-
-  &:hover,
-  &:active {
-    @include themed {
-      background-color: t(iui-color-background-primary-overlay);
-      border-color: t(iui-color-background-primary-overlay);
-    }
-  }
-
-  &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
-  }
-}

package/scss/button/split-menu.scss

@@ -1,66 +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-button-split-menu {
-  @include iui-button-group;
-
-  &:hover {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-    }
-  }
-
-  > * {
-    &:first-child {
-      > .iui-borderless:hover {
-        background-color: transparent;
-      }
-    }
-
-    // Sizes
-    &:last-child {
-      > .iui-button {
-        padding: $iui-xs;
-      }
-
-      > .iui-small {
-        padding: $iui-xxs;
-      }
-
-      > .iui-large {
-        padding: $iui-s;
-      }
-    }
-
-    // Border between buttons for high-visibility and cta
-    &:first-child {
-      > .iui-high-visibility,
-      > .iui-cta {
-        @include themed {
-          border-right-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
-        }
-      }
-    }
-
-    &:last-child {
-      > .iui-high-visibility,
-      > .iui-cta {
-        @include themed {
-          border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
-        }
-      }
-    }
-  }
-
-  &.iui-disabled {
-    @include themed {
-      background-color: transparent;
-    }
-  }
-
-  &[disabled],
-  &:disabled {
-    @include iui-button-disabled;
-  }
-}