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

package/css/dialog.css

@@ -18,14 +18,10 @@
   isolation:isolate;
   border-radius:4px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-  box-sizing:border-box;
   position:fixed;
-  padding:11px 16px;
-  box-sizing:border-box;
-  padding:11px 16px;
+  padding:12px 16px;
   overflow:hidden;
   pointer-events:auto;
-  background-color:#FFF;
   background-color:var(--iui-color-background-1);
   transition:visibility 0s linear, opacity 0.2s ease-out;
   transition-delay:0.2s, 0s;
@@ -56,25 +52,25 @@
 .iui-dialog-default[data-iui-placement=top-left]{
   top:0;
   left:0;
-  margin-left:11px;
+  margin-left:12px;
   margin-top:16px;
 }
 .iui-dialog-default[data-iui-placement=top-right]{
   top:0;
   right:0;
-  margin-right:11px;
+  margin-right:12px;
   margin-top:16px;
 }
 .iui-dialog-default[data-iui-placement=bottom-left]{
   bottom:0;
   left:0;
-  margin-left:11px;
+  margin-left:12px;
   margin-bottom:16px;
 }
 .iui-dialog-default[data-iui-placement=bottom-right]{
   bottom:0;
   right:0;
-  margin-right:11px;
+  margin-right:12px;
   margin-bottom:16px;
 }
 
@@ -112,18 +108,20 @@
 }
 
 .iui-dialog-title{
+  display:flex;
+  align-items:center;
   font-size:inherit;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
   line-height:1.5;
+  margin-right:auto;
 }
 
 .iui-dialog-title-bar{
   display:flex;
   align-items:center;
-  margin-bottom:11px;
-  justify-content:space-between;
+  margin-bottom:12px;
   box-sizing:border-box;
   font-size:18px;
 }
@@ -131,7 +129,7 @@
 .iui-dialog-title-bar-filled{
   font-size:16px;
   padding:6px 16px;
-  margin:-11px -16px 11px -16px;
+  margin:-12px -16px 12px -16px;
   cursor:-webkit-grab;
   cursor:grab;
   background-color:var(--iui-color-background-3);
@@ -151,7 +149,7 @@
 }
 
 .iui-dialog-button-bar{
-  margin-top:11px;
+  margin-top:12px;
   display:flex;
   align-items:center;
   justify-content:flex-end;

package/css/expandable-block.css

@@ -9,24 +9,18 @@
   vertical-align:baseline;
   display:flex;
   flex-direction:column;
-  box-sizing:border-box;
   width:100%;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
 .iui-expandable-block > .iui-header{
   display:flex;
   align-items:center;
-  padding:11px 12px;
+  padding:12px 12px;
   cursor:pointer;
-  box-sizing:border-box;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  border:1px solid #edeff2;
-  border-bottom-color:#dde1e4;
-  background-color:#edeff2;
   border:1px solid var(--iui-color-background-3);
   border-bottom-color:var(--iui-color-background-4);
   background-color:var(--iui-color-background-3);
@@ -48,14 +42,13 @@
 }
 .iui-expandable-block > .iui-header > .iui-icon,
 .iui-expandable-block > .iui-header > .iui-status-icon{
-  display:inline-flex;
+  display:flex;
   flex-shrink:0;
   width:16px;
   height:16px;
 }
 .iui-expandable-block > .iui-header > .iui-icon{
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block > .iui-header > .iui-icon{
@@ -64,29 +57,6 @@
 }
 .iui-expandable-block > .iui-header > .iui-status-icon{
   margin-left:12px;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-}
-@media (forced-colors: active){
-  .iui-expandable-block > .iui-header > .iui-status-icon{
-    fill:CanvasText;
-  }
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
 }
 .iui-expandable-block > .iui-header .iui-expandable-block-label{
   display:flex;
@@ -94,7 +64,6 @@
   flex:auto;
   min-width:0;
   margin-left:12px;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -113,7 +82,6 @@
 }
 .iui-expandable-block > .iui-header .iui-caption{
   font-size:12px;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-expandable-block > .iui-header:focus-visible{
@@ -128,10 +96,6 @@
 }
 .iui-expandable-block .iui-expandable-content{
   overflow:hidden;
-  box-sizing:border-box;
-  border-bottom:1px solid #dde1e4;
-  border-right:1px solid #dde1e4;
-  border-left:1px solid #dde1e4;
   border-bottom:1px solid var(--iui-color-background-4);
   border-right:1px solid var(--iui-color-background-4);
   border-left:1px solid var(--iui-color-background-4);
@@ -159,19 +123,16 @@
   }
 }
 .iui-expandable-block .iui-expandable-content > div{
-  padding:11px 12px;
+  padding:12px 12px;
 }
 .iui-expandable-block:hover > .iui-header{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block:hover > .iui-header > .iui-icon{
-  fill:black;
-  fill:var(--iui-icons-color-actionable-hover);
+  fill:var(--iui-icon-color-actionable-hover);
 }
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
-  color:black;
   color:var(--iui-color-foreground-body);
 }
 @media (prefers-reduced-motion: no-preference){
@@ -181,30 +142,23 @@
   }
 }
 .iui-expandable-block.iui-expanded > .iui-header{
-  background-color:#edeff2;
-  border-left:1px solid #dde1e4;
-  border-top:1px solid #dde1e4;
-  border-right:1px solid #dde1e4;
   background-color:var(--iui-color-background-3);
   border-left:1px solid var(--iui-color-background-4);
   border-top:1px solid var(--iui-color-background-4);
   border-right:1px solid var(--iui-color-background-4);
 }
 .iui-expandable-block.iui-expanded > .iui-header:hover{
-  background-color:#dde1e4;
-  background-color:var(--iui-color-background-4);
-}
-.iui-expandable-block.iui-expanded > .iui-header:hover{
-  background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
   transform:rotate(90deg);
 }
 .iui-expandable-block.iui-small .iui-header{
-  padding:5.5px 8px;
+  padding:6px 8px;
 }
 .iui-expandable-block.iui-small .iui-header > .iui-icon{
+  display:flex;
+  flex-shrink:0;
   width:12px;
   height:12px;
 }
@@ -224,7 +178,6 @@
   border-radius:4px;
 }
 .iui-expandable-block.iui-borderless .iui-header:hover{
-  background-color:rgba(0, 0, 0, 0.1);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
 .iui-expandable-block.iui-borderless .iui-expandable-content > div{

package/css/fieldset.css

@@ -7,23 +7,19 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  padding:11px 12px;
+  padding:12px 12px;
   border-radius:4px;
-  border:1px solid #c7ccd1;
-  background-color:white;
   border:1px solid var(--iui-color-background-border);
   background-color:var(--iui-color-background-1);
 }
 .iui-fieldset legend{
   font-size:16px;
-  padding:1.5px 8px;
+  padding:1px 8px;
   border-radius:4px;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  background-color:#dde1e4;
-  color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-4);
   color:var(--iui-text-color);
 }
@@ -31,6 +27,5 @@
   cursor:not-allowed;
 }
 .iui-fieldset[disabled] legend{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }

package/css/file-upload.css

@@ -23,14 +23,11 @@
   flex-direction:column;
   justify-content:center;
   align-items:center;
-  box-sizing:border-box;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   padding:6px 12px;
-  background-color:#f9f9fb;
-  border:1px solid #f9f9fb;
   background-color:var(--iui-color-background-2);
   border:1px solid var(--iui-color-background-2);
 }
@@ -40,17 +37,16 @@
   opacity:0;
   overflow:hidden;
   position:absolute;
-  z-index:-1;
 }
 .iui-file-upload > .iui-content > svg,
 .iui-file-upload > .iui-content .iui-template-icon{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:64px;
   height:64px;
-  margin-top:11px;
-  margin-bottom:11px;
+  fill:var(--iui-icon-color);
+  margin-top:12px;
+  margin-bottom:12px;
 }
 @media (forced-colors: active){
   .iui-file-upload > .iui-content > svg,
@@ -58,34 +54,12 @@
     fill:CanvasText;
   }
 }
-.iui-file-upload > .iui-content > svg.iui-informational,
-.iui-file-upload > .iui-content .iui-template-icon.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-file-upload > .iui-content > svg.iui-positive,
-.iui-file-upload > .iui-content .iui-template-icon.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-file-upload > .iui-content > svg.iui-warning,
-.iui-file-upload > .iui-content .iui-template-icon.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
-}
-.iui-file-upload > .iui-content > svg.iui-negative,
-.iui-file-upload > .iui-content .iui-template-icon.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
 .iui-file-upload > .iui-content:only-child{
   visibility:visible;
   position:relative;
   flex-direction:row;
 }
 .iui-file-upload > .iui-content:only-child:focus-within{
-  outline:2px solid #008ae0;
-  outline-offset:-2px;
   outline:2px solid var(--iui-color-foreground-primary);
   outline-offset:-2px;
 }
@@ -96,9 +70,6 @@
   font-weight:700;
 }
 .iui-file-upload.iui-drag > .iui-content{
-  background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
-  border-color:#008ae0;
-  color:#008ae0;
   background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
   border-color:var(--iui-color-foreground-primary);
   color:var(--iui-color-foreground-primary);
@@ -106,6 +77,5 @@
 }
 .iui-file-upload.iui-drag > .iui-content > svg,
 .iui-file-upload.iui-drag > .iui-content .iui-template-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color-primary);
 }

package/css/footer.css

@@ -9,7 +9,7 @@
   vertical-align:baseline;
   text-align:center;
   width:100%;
-  padding:11px 0;
+  padding:12px 0;
   font-size:12px;
 }
 
@@ -32,16 +32,12 @@
           user-select:none;
   white-space:nowrap;
   word-break:keep-all;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-legal-footer-item > a{
-  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;
   cursor:pointer;
   text-decoration:none;
 }
@@ -56,7 +52,6 @@
   }
 }
 .iui-legal-footer-item > a:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-legal-footer-item > a:hover{
@@ -85,19 +80,16 @@
 }
 
 .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 
 .iui-legal-footer-separator{
   margin:0 8px;
   width:1px;
-  height:11px;
-  background-color:rgba(0, 0, 0, 0.4);
+  height:12px;
   background-color:var(--iui-text-color-muted);
 }
 
 .iui-legal-footer-developer{
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }