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

package/css/anchor.css

@@ -3,12 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-anchor{
-  color:#008ae0;
-  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
-  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:4px;
-  box-sizing:border-box;
+  -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
+  border-radius:var(--iui-border-radius-1);
   cursor:pointer;
   text-decoration:none;
 }
@@ -23,8 +20,7 @@
   }
 }
 .iui-anchor:hover{
-  color:#006bad;
-  color:var(--iui-color-foreground-primary-overlay);
+  color:var(--iui-color-foreground-primary-hover);
 }
 .iui-anchor:hover{
   text-decoration:underline;

package/css/avatar.css

@@ -0,0 +1,226 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-avatar{
+  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-avatar > .iui-stroke{
+  display:block;
+  position:absolute;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  border-radius:50%;
+  box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
+}
+.iui-avatar > .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:var(--iui-font-weight-semibold);
+  text-align:center;
+  text-decoration:none;
+  text-transform:uppercase;
+  background-color:#b1c856;
+  overflow:hidden;
+  color:var(--iui-color-foreground-accessory);
+}
+.iui-avatar > .iui-icon{
+  display:inline-flex;
+  width:50%;
+  height:50%;
+  position:absolute;
+  fill:var(--iui-color-foreground-accessory);
+}
+.iui-avatar > 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:var(--iui-color-background-1);
+}
+.iui-avatar > .iui-status{
+  box-sizing:content-box;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  position:absolute;
+  right:calc(0px - var(--iui-size-3xs));
+  bottom:calc(0px - var(--iui-size-3xs));
+  width:25%;
+  height:25%;
+  border-radius:50%;
+  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+  background-color:var(--iui-color-background-5);
+}
+.iui-avatar > .iui-status::after{
+  content:"";
+  width:var(--_iui-avatar-status-size, var(--iui-size-xs));
+  height:var(--_iui-avatar-status-size, var(--iui-size-xs));
+}
+.iui-avatar > .iui-status.iui-online{
+  background-color:var(--iui-color-background-positive);
+}
+.iui-avatar > .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:var(--iui-color-foreground-accessory);
+}
+.iui-avatar > .iui-status.iui-away{
+  background-color:var(--iui-color-background-warning);
+}
+.iui-avatar > .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:var(--iui-color-foreground-accessory);
+}
+.iui-avatar > .iui-status.iui-busy{
+  background-color:var(--iui-color-background-negative);
+}
+.iui-avatar > .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:var(--iui-color-foreground-accessory);
+}
+.iui-avatar > .iui-status.iui-offline{
+  background-color:var(--iui-color-background-1);
+  box-shadow:inset 0 0 0 1px var(--iui-color-foreground-3);
+}
+.iui-avatar > .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:var(--iui-color-foreground-4);
+}
+.iui-avatar.iui-avatar-count > .iui-initials{
+  background-color:var(--iui-color-background-3);
+  color:var(--iui-color-foreground-4);
+}
+.iui-avatar.iui-avatar-count:focus{
+  outline:none;
+}
+.iui-avatar.iui-avatar-count:focus > .iui-stroke{
+  box-shadow:var(--iui-focus-box-shadow);
+}
+.iui-avatar.iui-avatar-count:focus-visible{
+  outline:none;
+}
+.iui-avatar.iui-avatar-count:focus:not(:focus-visible) > .iui-stroke{
+  box-shadow:inset 0 0 0 var(--iui-size-3xs) var(--iui-color-background-transparent-hover);
+}
+.iui-avatar.iui-avatar{
+  width:var(--iui-size-xl);
+  height:var(--iui-size-xl);
+  --_iui-avatar-status-size:calc(var(--iui-size-2xs) * 1.5);
+}
+.iui-avatar.iui-avatar > .iui-initials{
+  line-height:var(--iui-size-xl);
+  font-size:var(--iui-font-size-2);
+}
+.iui-avatar.iui-small{
+  width:calc(1.5 * var(--iui-size-m));
+  height:calc(1.5 * var(--iui-size-m));
+  --_iui-avatar-status-size:var(--iui-size-2xs);
+}
+.iui-avatar.iui-small > .iui-initials{
+  line-height:calc(1.5 * var(--iui-size-m));
+  font-size:var(--iui-font-size-0);
+}
+.iui-avatar.iui-large{
+  width:calc(3 * var(--iui-size-m));
+  height:calc(3 * var(--iui-size-m));
+  --_iui-avatar-status-size:var(--iui-size-xs);
+}
+.iui-avatar.iui-large > .iui-initials{
+  line-height:calc(3 * var(--iui-size-m));
+  font-size:var(--iui-font-size-3);
+}
+.iui-avatar.iui-x-large{
+  width:var(--iui-size-2xl);
+  height:var(--iui-size-2xl);
+  --_iui-avatar-status-size:var(--iui-size-s);
+}
+.iui-avatar.iui-x-large > .iui-initials{
+  line-height:var(--iui-size-2xl);
+  font-size:var(--iui-font-size-4);
+}
+
+.iui-avatar-list{
+  display:inline-flex;
+  flex-wrap:wrap;
+}
+.iui-avatar-list .iui-avatar:not(:first-child){
+  margin-left:var(--iui-size-2xs);
+}
+.iui-avatar-list .iui-avatar:not(:first-child).iui-small{
+  margin-left:var(--iui-size-3xs);
+}
+.iui-avatar-list .iui-avatar:not(:first-child).iui-large{
+  margin-left:var(--iui-size-xs);
+}
+.iui-avatar-list .iui-avatar:not(:first-child).iui-x-large{
+  margin-left:var(--iui-size-s);
+}
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child){
+  margin-left:calc(0px - var(--iui-size-2xs));
+}
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{
+  box-shadow:0 0 0 var(--iui-size-2xs) var(--iui-color-background-1);
+}
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{
+  margin-left:calc(0px - var(--iui-size-3xs));
+}
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{
+  box-shadow:0 0 0 var(--iui-size-3xs) var(--iui-color-background-1);
+}
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{
+  margin-left:calc(0px - var(--iui-size-xs));
+}
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-x-large{
+  margin-left:calc(0px - var(--iui-size-s));
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-avatar-list.iui-stacked.iui-animated .iui-avatar{
+    transition:margin-left var(--iui-duration-2) ease-out;
+  }
+}
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child){
+  margin-left:var(--iui-size-2xs);
+}
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-small{
+  margin-left:var(--iui-size-3xs);
+}
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-large{
+  margin-left:var(--iui-size-xs);
+}
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-x-large{
+  margin-left:var(--iui-size-s);
+}

package/css/backdrop.css

@@ -10,15 +10,17 @@
   left:0;
   width:100%;
   height:100%;
-  background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(0, 0, 0, var(--iui-opacity-4));
-  transition:visibility 0s linear, opacity 0.2s ease-out;
-  transition-delay:0.2s, 0s;
+  transition:visibility var(--iui-duration-0) linear, opacity var(--iui-duration-1) ease-out;
+  transition-delay:var(--iui-duration-1), var(--iui-duration-0);
 }
 .iui-backdrop:not(.iui-backdrop-visible){
   visibility:hidden;
   opacity:0;
 }
 .iui-backdrop.iui-backdrop-visible{
-  transition-delay:0s;
+  transition-delay:var(--iui-duration-0);
+}
+.iui-backdrop.iui-backdrop-fixed{
+  position:fixed;
 }

package/css/badge.css

@@ -3,17 +3,17 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-badge{
-  --iui-badge-background-color:#c7ccd1;
-  --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
+  --iui-badge-background-color:hsl(210, 10%, 80%);
+  --_iui-badge-text-color:hsl(0 0% 0% / 0.6);
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   display:inline-block;
-  font-size:12px;
-  padding:0 6px;
-  margin:6px 0;
-  border-radius:4px;
+  font-size:var(--iui-font-size-0);
+  padding:0 calc(var(--iui-size-2xs) * 1.5);
+  margin:calc(var(--iui-size-s) * 0.5) 0;
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--iui-badge-background-color);
   color:var(--_iui-badge-text-color);
   text-transform:uppercase;
@@ -21,9 +21,9 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  max-width:20ch;
+  max-width:calc(20ch + var(--iui-size-2xs) * 1.5 * 2);
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
-  font-weight:600;
+  font-weight:var(--iui-font-weight-semibold);
 }

package/css/blockquote.css

@@ -9,20 +9,17 @@
   vertical-align:baseline;
   display:block;
   position:relative;
-  padding:11px 16px;
-  margin:11px 0;
+  padding:var(--iui-size-s) var(--iui-size-m);
+  margin:var(--iui-size-s) 0;
   text-align:justify;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-  border-radius:4px;
-  background-color:white;
-  border-left:8px solid #008ae0;
+  box-shadow:var(--iui-shadow-1);
+  border-radius:var(--iui-border-radius-1);
   background-color:var(--iui-color-background-1);
-  border-left:8px solid var(--iui-color-foreground-primary);
+  border-left:var(--iui-size-xs) solid var(--iui-color-foreground-primary);
 }
 .iui-blockquote > footer{
   text-align:right;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
+  color:var(--iui-color-foreground-4);
 }
 .iui-blockquote > footer > cite{
   font-style:normal;