@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

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/user-icon.css

@@ -1,246 +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-user-icon{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  position:relative;
-  margin:0;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-}
-.iui-user-icon > .iui-stroke{
-  display:block;
-  position:absolute;
-  left:0;
-  top:0;
-  width:100%;
-  height:100%;
-  margin:0;
-  border-radius:50%;
-  box-sizing:border-box;
-  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
-  box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-}
-.iui-user-icon > .iui-initials{
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  position:absolute;
-  left:0;
-  top:0;
-  width:100%;
-  height:100%;
-  margin:0;
-  border-radius:50%;
-  font-style:normal;
-  font-weight:600;
-  text-align:center;
-  text-decoration:none;
-  text-transform:uppercase;
-  background-color:#b1c856;
-  overflow:hidden;
-  color:white;
-  color:var(--iui-color-foreground-accessory);
-}
-.iui-user-icon > .iui-icon{
-  display:inline-flex;
-  width:50%;
-  height:50%;
-  position:absolute;
-  fill:white;
-  fill:var(--iui-color-foreground-accessory);
-}
-.iui-user-icon > img{
-  display:block;
-  position:absolute;
-  -o-object-fit:cover;
-     object-fit:cover;
-  left:0;
-  top:0;
-  width:100%;
-  height:100%;
-  border-width:0;
-  border-radius:50%;
-  background-color:white;
-  background-color:var(--iui-color-background-1);
-}
-.iui-user-icon > .iui-status{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  position:absolute;
-  right:-2px;
-  bottom:-2px;
-  width:25%;
-  height:25%;
-  border-radius:50%;
-  border:2px solid white;
-  background-color:#c7ccd1;
-  border:2px solid var(--iui-color-background-1);
-  background-color:var(--iui-color-background-5);
-}
-.iui-user-icon > .iui-status::after{
-  content:"";
-  width:var(--_iui-user-icon-status-size, 8px);
-  height:var(--_iui-user-icon-status-size, 8px);
-}
-.iui-user-icon > .iui-status.iui-online{
-  background-color:#53a21a;
-  background-color:var(--iui-color-background-positive);
-}
-.iui-user-icon > .iui-status.iui-online::after{
-  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
-          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
-  background-color:white;
-  background-color:var(--iui-color-foreground-accessory);
-}
-.iui-user-icon > .iui-status.iui-away{
-  background-color:#f18d13;
-  background-color:var(--iui-color-background-warning);
-}
-.iui-user-icon > .iui-status.iui-away::after{
-  -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
-          mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
-  background-color:white;
-  background-color:var(--iui-color-foreground-accessory);
-}
-.iui-user-icon > .iui-status.iui-busy{
-  background-color:#d10a0a;
-  background-color:var(--iui-color-background-negative);
-}
-.iui-user-icon > .iui-status.iui-busy::after{
-  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
-          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
-  background-color:white;
-  background-color:var(--iui-color-foreground-accessory);
-}
-.iui-user-icon > .iui-status.iui-offline{
-  background-color:white;
-  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
-  background-color:var(--iui-color-background-1);
-  box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
-}
-.iui-user-icon > .iui-status.iui-offline::after{
-  -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
-          mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-icons-color);
-}
-.iui-user-icon.iui-user-icon-count > .iui-initials{
-  background-color:#edeff2;
-  color:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-color-background-3);
-  color:var(--iui-text-color-muted);
-}
-.iui-user-icon.iui-user-icon-count:focus{
-  outline:none;
-}
-.iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
-  box-shadow:var(--iui-focus-box-shadow);
-}
-.iui-user-icon.iui-user-icon-count:focus-visible{
-  outline:none;
-}
-.iui-user-icon.iui-user-icon-count:focus:not(:focus-visible) > .iui-stroke{
-  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
-  box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-}
-.iui-user-icon.iui-user-icon{
-  width:32px;
-  height:32px;
-  --_iui-user-icon-status-size:6px;
-}
-.iui-user-icon.iui-user-icon > .iui-initials{
-  line-height:32px;
-  font-size:16px;
-}
-.iui-user-icon.iui-small{
-  width:24px;
-  height:24px;
-  --_iui-user-icon-status-size:12px;
-}
-.iui-user-icon.iui-small > .iui-initials{
-  line-height:24px;
-  font-size:12px;
-}
-.iui-user-icon.iui-large{
-  width:48px;
-  height:48px;
-  --_iui-user-icon-status-size:8px;
-}
-.iui-user-icon.iui-large > .iui-initials{
-  line-height:48px;
-  font-size:18px;
-}
-.iui-user-icon.iui-x-large{
-  width:64px;
-  height:64px;
-  --_iui-user-icon-status-size:12px;
-}
-.iui-user-icon.iui-x-large > .iui-initials{
-  line-height:64px;
-  font-size:24px;
-}
-
-.iui-user-icon-list{
-  display:inline-flex;
-  flex-wrap:wrap;
-}
-.iui-user-icon-list .iui-user-icon:not(:first-child){
-  margin-left:4px;
-}
-.iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
-  margin-left:2px;
-}
-.iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
-  margin-left:8px;
-}
-.iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
-  margin-left:12px;
-}
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
-  margin-left:-4px;
-}
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
-  box-shadow:0 0 0 4px white;
-  box-shadow:0 0 0 4px var(--iui-color-background-1);
-}
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
-  margin-left:-2px;
-}
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
-  box-shadow:0 0 0 2px white;
-  box-shadow:0 0 0 2px var(--iui-color-background-1);
-}
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
-  margin-left:-8px;
-}
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
-  margin-left:-12px;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
-    transition:margin-left 0.4s ease-out;
-  }
-}
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
-  margin-left:4px;
-}
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
-  margin-left:2px;
-}
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
-  margin-left:8px;
-}
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
-  margin-left:12px;
-}