@itwin/itwinui-css 0.55.0 → 0.58.0

package/css/dialog.css

@@ -0,0 +1,201 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-dialog-backdrop{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  z-index:999;
+  isolation:isolate;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:rgba(0, 0, 0, 0.4);
+  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
+  visibility:hidden;
+  opacity:0;
+  transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
+}
+.iui-dialog-backdrop.iui-dialog-visible{
+  visibility:visible;
+  opacity:1;
+  transition-delay:0s;
+}
+.iui-dialog-backdrop.iui-dialog-backdrop-relative{
+  position:relative;
+  overflow:hidden;
+}
+
+.iui-dialog{
+  border-radius:3px;
+  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
+  box-sizing:border-box;
+  position:absolute;
+  padding:11px 16px;
+  box-sizing:border-box;
+  padding:11px 16px;
+  overflow:hidden;
+  background-color:white;
+  background-color:var(--iui-color-background-1);
+}
+@media (forced-colors: active){
+  .iui-dialog{
+    border:1px solid;
+  }
+}
+
+.iui-dialog-default .iui-dialog{
+  left:50%;
+  top:33%;
+  transform:translate(-50%, -33%);
+  max-width:50%;
+  min-width:380px;
+  max-height:100vh;
+}
+@media screen and (max-width: 400px){
+  .iui-dialog-default .iui-dialog{
+    max-width:95%;
+    width:95%;
+    min-width:95%;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference){
+  .iui-dialog-full-page{
+    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
+  }
+}
+.iui-dialog-full-page .iui-dialog{
+  border-radius:0;
+  height:100vh;
+  width:100vw;
+  top:0;
+  left:0;
+  max-width:initial;
+  min-width:initial;
+  display:flex;
+  flex-direction:column;
+  will-change:transform;
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-dialog-full-page .iui-dialog{
+    transform:translateY(100%);
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
+  }
+}
+.iui-dialog-full-page.iui-dialog-visible .iui-dialog{
+  transform:translateY(0);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-dialog-full-page.iui-dialog-visible .iui-dialog{
+    transition:transform 0.4s ease-out;
+  }
+}
+
+.iui-dialog-draggable{
+  background-color:transparent;
+  pointer-events:none;
+  z-index:998;
+}
+.iui-dialog-draggable .iui-dialog{
+  pointer-events:initial;
+  max-width:100vw;
+  max-height:100vh;
+  min-width:380px;
+  min-height:144px;
+  display:flex;
+  flex-direction:column;
+  padding:0;
+  border:1px solid #c7ccd1;
+  border:1px solid var(--iui-color-background-border);
+}
+
+.iui-dialog-title{
+  font-size:inherit;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  line-height:1.5;
+}
+
+.iui-dialog-title-bar{
+  display:flex;
+  align-items:center;
+  margin-bottom:11px;
+  justify-content:space-between;
+  box-sizing:border-box;
+  font-size:18px;
+}
+.iui-dialog-draggable .iui-dialog-title-bar{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  font-size:16px;
+  padding:6px 16px;
+  cursor:-webkit-grab;
+  cursor:grab;
+  background-color:#edeff2;
+  border-bottom:1px solid #c7ccd1;
+  background-color:var(--iui-color-background-3);
+  border-bottom:1px solid var(--iui-color-background-border);
+}
+.iui-dialog-draggable .iui-dialog-title-bar:active{
+  cursor:-webkit-grabbing;
+  cursor:grabbing;
+}
+
+.iui-dialog-content{
+  flex-grow:2;
+  margin:0 -16px;
+  padding:0 16px;
+  overflow-y:auto;
+  overflow-y:overlay;
+}
+.iui-dialog-draggable .iui-dialog-content{
+  margin:0;
+}
+
+.iui-dialog-button-bar{
+  margin-top:11px;
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+}
+.iui-dialog-draggable .iui-dialog-button-bar{
+  padding:0 16px 11px 16px;
+}
+
+.iui-dialog-button-bar > .iui-button:not(:last-child){
+  margin-right:8px;
+}
+@supports ((-moz-column-gap: 8px) or (column-gap: 8px)){
+  .iui-dialog-button-bar{
+    -moz-column-gap:8px;
+         column-gap:8px;
+  }
+  .iui-dialog-button-bar > .iui-button:not(:last-child){
+    margin-right:0;
+  }
+}
+
+.iui-dialog-animation-enter .iui-dialog-full-page .iui-dialog{
+  transform:translateY(100%);
+  opacity:0;
+}
+.iui-dialog-animation-enter-active .iui-dialog-full-page .iui-dialog{
+  transform:translateY(0);
+  opacity:1;
+}
+.iui-dialog-animation-enter .iui-dialog-backdrop{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-dialog-animation-enter-active .iui-dialog-backdrop{
+  visibility:visible;
+  opacity:1;
+}

package/css/footer.css

@@ -41,12 +41,12 @@
   background-color:var(--iui-text-color-muted);
 }
 .iui-legal-footer > ul > li > a{
-  --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
   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:3px;
+  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -64,22 +64,6 @@
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-.iui-legal-footer > ul > li > a-external::after{
-  content:"";
-  display:inline-block;
-  width:1.5ch;
-  height:1.5ch;
-  margin-left:0.5ch;
-  vertical-align:-0.1ch;
-  background-color:currentColor;
-  -webkit-mask:var(--_iui-anchor-external-svg);
-          mask:var(--_iui-anchor-external-svg);
-}
-@media (forced-colors: active){
-  .iui-legal-footer > ul > li > a-external::after{
-    background-color:LinkText;
-  }
-}
 .iui-legal-footer > ul > li > a:hover{
   text-decoration:underline;
 }

package/css/global.css

@@ -583,12 +583,12 @@ html.iui-theme-dark-hc{
 }
 
 .iui-anchor{
-  --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
   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:3px;
+  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -606,22 +606,6 @@ html.iui-theme-dark-hc{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-.iui-anchor-external::after{
-  content:"";
-  display:inline-block;
-  width:1.5ch;
-  height:1.5ch;
-  margin-left:0.5ch;
-  vertical-align:-0.1ch;
-  background-color:currentColor;
-  -webkit-mask:var(--_iui-anchor-external-svg);
-          mask:var(--_iui-anchor-external-svg);
-}
-@media (forced-colors: active){
-  .iui-anchor-external::after{
-    background-color:LinkText;
-  }
-}
 .iui-anchor:hover{
   text-decoration:underline;
 }

package/css/inputs.css

@@ -203,8 +203,8 @@ div.iui-input-container.iui-inline-label{
   transition:background 0s;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  fill:rgba(0, 0, 0, 0.8);
+  fill:var(--iui-icons-color-actionable);
   transition:transform 0.2s ease-out;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
@@ -804,8 +804,8 @@ label.iui-input-label.iui-disabled{
   transition:background 0s;
 }
 .iui-end-icon.iui-actionable svg{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  fill:rgba(0, 0, 0, 0.8);
+  fill:var(--iui-icons-color-actionable);
   transition:transform 0.2s ease-out;
 }
 .iui-end-icon.iui-actionable.iui-open svg{
@@ -945,6 +945,12 @@ label.iui-input-label.iui-disabled{
     outline-offset:-1px;
   }
 }
+.iui-checkbox:disabled{
+  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-border-color:var(--iui-color-background-border);
+  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+}
 .iui-checkbox.iui-checkbox-visibility{
   --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
   --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
@@ -959,11 +965,9 @@ label.iui-input-label.iui-disabled{
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-checkbox:disabled{
+.iui-checkbox.iui-checkbox-visibility:where(:disabled){
   --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
-  --_iui-checkbox-border-color:var(--iui-color-background-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
 }
 .iui-checkbox.iui-loading{
   --_iui-checkbox-border-color:transparent;
@@ -1100,6 +1104,12 @@ label.iui-input-label.iui-disabled{
     outline-offset:-1px;
   }
 }
+.iui-radio:disabled{
+  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-border-color:var(--iui-color-background-border);
+  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
+  cursor:not-allowed;
+}
 .iui-radio.iui-checkbox-visibility{
   --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
   --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
@@ -1114,11 +1124,9 @@ label.iui-input-label.iui-disabled{
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-radio:disabled{
+.iui-radio.iui-checkbox-visibility:where(:disabled){
   --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
-  --_iui-checkbox-border-color:var(--iui-color-background-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
 }
 .iui-radio.iui-loading{
   --_iui-checkbox-border-color:transparent;
@@ -1132,162 +1140,4 @@ label.iui-input-label.iui-disabled{
 }
 .iui-radio:not(:checked), .iui-radio:indeterminate{
   --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
-}
-
-.iui-radio-tile-container{
-  display:inline-flex;
-  flex-wrap:wrap;
-  width:-webkit-fit-content;
-  width:-moz-fit-content;
-  width:fit-content;
-  -webkit-user-select:none;
-     -moz-user-select:none;
-      -ms-user-select:none;
-          user-select:none;
-  position:relative;
-  z-index:0;
-}
-.iui-radio-tile-container > label{
-  cursor:pointer;
-}
-.iui-radio-tile-container > label > input{
-  width:0;
-  height:0;
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  opacity:0;
-  position:absolute;
-}
-.iui-radio-tile-container > label > .iui-radio-tile{
-  width:160px;
-  height:100%;
-  box-sizing:border-box;
-  padding:8px;
-  position:relative;
-  z-index:1;
-  border:1px solid rgba(0, 0, 0, 0.4);
-  background-color:white;
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-  background-color:var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label > .iui-radio-tile{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-icon{
-  width:32px;
-  height:32px;
-  display:block;
-  margin:0 auto;
-  margin-top:6px;
-  margin-bottom:11px;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label > .iui-radio-tile > .iui-icon{
-    transition:fill 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-checkmark{
-  display:none;
-  width:16px;
-  height:16px;
-  position:absolute;
-  right:8px;
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-label{
-  font-size:14px;
-  font-weight:600;
-  line-height:22px;
-  text-align:center;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-description{
-  font-size:12px;
-  line-height:15px;
-  text-align:center;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-radio-tile-container > label:first-child > .iui-radio-tile{
-  border-radius:3px 0 0 3px;
-}
-.iui-radio-tile-container > label:last-child > .iui-radio-tile{
-  border-radius:0 3px 3px 0;
-}
-.iui-radio-tile-container > label:not(:first-child) > .iui-radio-tile{
-  margin-left:-1px;
-}
-.iui-radio-tile-container > label input:enabled:focus ~ .iui-radio-tile{
-  outline:2px solid #008ae0;
-  outline-offset:-4px;
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-4px;
-}
-.iui-radio-tile-container > label input:enabled:focus:not(:focus-visible) ~ .iui-radio-tile{
-  outline:none;
-}
-.iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile{
-  z-index:2;
-  border-color:rgba(0, 0, 0, 0.8);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile > .iui-icon{
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile > .iui-icon{
-    transition:fill 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label input:checked ~ .iui-radio-tile{
-  padding:7px;
-  z-index:3;
-  border:2px solid #008ae0;
-  border:2px solid var(--iui-color-foreground-primary);
-}
-.iui-radio-tile-container > label input:checked ~ .iui-radio-tile > .iui-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-radio-tile-container > label input:checked ~ .iui-radio-tile > .iui-checkmark{
-  display:inline-block;
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile{
-  cursor:not-allowed;
-  z-index:0;
-  border-color:#edeff2;
-  background-color:#edeff2;
-  border-color:var(--iui-color-background-disabled);
-  background-color:var(--iui-color-background-disabled);
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile > .iui-checkmark{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile > .iui-icon{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
-  filter:grayscale(100%);
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile > .iui-label{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-radio-tile-container > label input:disabled:checked ~ .iui-radio-tile{
-  z-index:3;
-  border:2px solid rgba(0, 0, 0, 0.4);
-  border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 }