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

package/css/all.css

@@ -1927,7 +1927,7 @@ a.iui-breadcrumbs-text:focus{
           user-select:none;
   overflow-y:auto;
   flex-direction:column;
-  max-height:calc(var(--iui-size-s) * 45);
+  max-height:calc(var(--iui-size-s) * 42);
   row-gap:var(--iui-size-s);
 }
 @media (forced-colors: active){
@@ -2052,7 +2052,7 @@ a.iui-breadcrumbs-text:focus{
   position:relative;
   cursor:crosshair;
   width:100%;
-  height:calc(var(--iui-size-s) * 18);
+  height:calc(var(--iui-size-s) * 17);
   forced-color-adjust:none;
   background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
 }
@@ -2631,7 +2631,6 @@ a.iui-breadcrumbs-text:focus{
   display:flex;
   align-items:center;
   margin-bottom:var(--iui-size-s);
-  box-sizing:border-box;
   font-size:var(--iui-font-size-3);
 }
 
@@ -2693,6 +2692,7 @@ a.iui-breadcrumbs-text:focus{
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
+  transition:background-color var(--iui-duration-1) ease-out;
   border-radius:inherit;
   border:1px solid var(--iui-color-background-3);
   background-color:var(--iui-color-background-3);
@@ -2707,11 +2707,6 @@ a.iui-breadcrumbs-text:focus{
     outline-offset:-1px;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block > .iui-header{
-    transition:background-color var(--iui-duration-1) ease-out;
-  }
-}
 .iui-expandable-block > .iui-header > .iui-icon,
 .iui-expandable-block > .iui-header > .iui-status-icon{
   display:flex;
@@ -2736,13 +2731,9 @@ a.iui-breadcrumbs-text:focus{
   flex:auto;
   min-width:0;
   margin-left:var(--iui-size-s);
+  transition:color var(--iui-duration-1) ease;
   color:var(--iui-color-foreground-2);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block > .iui-header .iui-expandable-block-label{
-    transition:color var(--iui-duration-1) ease;
-  }
-}
 .iui-expandable-block > .iui-header .iui-title,
 .iui-expandable-block > .iui-header .iui-caption{
   white-space:nowrap;
@@ -2808,12 +2799,7 @@ a.iui-breadcrumbs-text:focus{
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
   color:var(--iui-color-foreground-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block:hover > .iui-header .iui-caption,
-.iui-expandable-block:hover > .iui-header .iui-title{
-    transition:color var(--iui-duration-1) ease;
-  }
+  transition:color var(--iui-duration-1) ease;
 }
 .iui-expandable-block.iui-expanded > .iui-header{
   background-color:var(--iui-color-background-3);
@@ -3862,11 +3848,7 @@ div.iui-header-breadcrumb-button-icon{
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
   box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-keyboard{
-    transition:box-shadow var(--iui-duration-1) ease-out;
-  }
+  transition:box-shadow var(--iui-duration-1) ease-out;
 }
 .iui-keyboard:hover{
   box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
@@ -4684,11 +4666,7 @@ div.iui-header-breadcrumb-button-icon{
   z-index:1;
   outline:1px solid var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-content{
-    transition:outline-color var(--iui-duration-1) ease-out;
-  }
+  transition:outline-color var(--iui-duration-1) ease-out;
 }
 .iui-radio-tile-content:hover{
   z-index:2;
@@ -4833,17 +4811,13 @@ div.iui-header-breadcrumb-button-icon{
   fill:var(--iui-color-foreground-4);
   margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
   fill:var(--iui-color-foreground-4);
+  transition:fill var(--iui-duration-1) ease-out;
 }
 @media (forced-colors: active){
   .iui-radio-tile-icon{
     fill:CanvasText;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-icon{
-    transition:fill var(--iui-duration-1) ease-out;
-  }
-}
 @media (forced-colors: active){
   .iui-radio-tile-icon{
     fill:CanvasText;
@@ -4861,7 +4835,7 @@ div.iui-header-breadcrumb-button-icon{
 
 .iui-radio-tile-sublabel{
   font-size:var(--iui-font-size-0);
-  line-height:calc(var(--iui-size-s) * 1.375);
+  line-height:calc(var(--iui-size-s) * 1.25);
   text-align:center;
   word-break:break-word;
   color:var(--iui-color-foreground-4);
@@ -5391,6 +5365,12 @@ div.iui-header-breadcrumb-button-icon{
 .iui-slider-horizontal .iui-slider-min,
 .iui-slider-horizontal .iui-slider-max{
   margin-top:var(--iui-size-3xs);
+  min-width:var(--iui-size-l);
+  flex-direction:row;
+}
+.iui-slider-horizontal .iui-slider-min svg,
+.iui-slider-horizontal .iui-slider-max svg{
+  margin-top:var(--iui-size-2xs);
 }
 .iui-slider-horizontal .iui-slider-min{
   margin-right:var(--iui-size-s);
@@ -5437,8 +5417,11 @@ div.iui-header-breadcrumb-button-icon{
 }
 .iui-slider-vertical .iui-slider-min,
 .iui-slider-vertical .iui-slider-max{
-  margin-left:var(--iui-size-3xs);
+  margin-left:calc(var(--iui-size-3xs) + var(--iui-size-s));
   text-align:center;
+  transform:translate(-50%, 0);
+  min-height:var(--iui-size-l);
+  flex-direction:column;
 }
 .iui-slider-vertical .iui-slider-min{
   margin-top:var(--iui-size-s);
@@ -5449,6 +5432,7 @@ div.iui-header-breadcrumb-button-icon{
 
 .iui-slider-component-container{
   display:flex;
+  align-items:start;
 }
 .iui-slider-component-container.iui-disabled{
   cursor:not-allowed;
@@ -5471,6 +5455,11 @@ div.iui-header-breadcrumb-button-icon{
 .iui-slider-component-container.iui-disabled .iui-slider-track{
   background-color:var(--iui-color-foreground-4);
 }
+@media (forced-colors: active){
+  .iui-slider-component-container.iui-disabled .iui-slider-track{
+    background-color:GrayText;
+  }
+}
 .iui-slider-component-container.iui-disabled .iui-slider-min,
 .iui-slider-component-container.iui-disabled .iui-slider-max,
 .iui-slider-component-container.iui-disabled .iui-slider-tick{
@@ -5586,6 +5575,8 @@ div.iui-header-breadcrumb-button-icon{
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
+  display:flex;
+  justify-content:center;
 }
 .iui-slider-min svg,
 .iui-slider-max svg{
@@ -5594,7 +5585,6 @@ div.iui-header-breadcrumb-button-icon{
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   fill:var(--iui-color-foreground-4);
-  margin-top:var(--iui-size-2xs);
 }
 @media (forced-colors: active){
   .iui-slider-min svg,
@@ -7379,7 +7369,7 @@ a.iui-tag-basic:focus-visible{
 .iui-tile-thumbnail{
   box-sizing:content-box;
   width:100%;
-  height:calc(var(--iui-size-s) * 14);
+  height:calc(var(--iui-size-s) * 13);
   flex-shrink:0;
   overflow:hidden;
   position:relative;
@@ -7421,14 +7411,10 @@ div.iui-tile-thumbnail-picture{
 
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
   cursor:pointer;
+  transition:fill var(--iui-duration-1) ease;
   fill:rgba(255, 255, 255, var(--iui-opacity-3));
   filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-    transition:fill var(--iui-duration-1) ease;
-  }
-}
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
   fill:rgba(255, 255, 255, var(--iui-opacity-2));
 }
@@ -8168,11 +8154,7 @@ div.iui-tile-thumbnail-picture{
       -ms-user-select:none;
           user-select:none;
   opacity:0;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tooltip-container > .iui-tooltip{
-    transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
-  }
+  transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
 }
 .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
   visibility:visible;

package/css/color-picker.css

@@ -20,7 +20,7 @@
           user-select:none;
   overflow-y:auto;
   flex-direction:column;
-  max-height:calc(var(--iui-size-s) * 45);
+  max-height:calc(var(--iui-size-s) * 42);
   row-gap:var(--iui-size-s);
 }
 @media (forced-colors: active){
@@ -145,7 +145,7 @@
   position:relative;
   cursor:crosshair;
   width:100%;
-  height:calc(var(--iui-size-s) * 18);
+  height:calc(var(--iui-size-s) * 17);
   forced-color-adjust:none;
   background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
 }

package/css/dialog.css

@@ -122,7 +122,6 @@
   display:flex;
   align-items:center;
   margin-bottom:var(--iui-size-s);
-  box-sizing:border-box;
   font-size:var(--iui-font-size-3);
 }
 

package/css/expandable-block.css

@@ -22,6 +22,7 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
+  transition:background-color var(--iui-duration-1) ease-out;
   border-radius:inherit;
   border:1px solid var(--iui-color-background-3);
   background-color:var(--iui-color-background-3);
@@ -36,11 +37,6 @@
     outline-offset:-1px;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block > .iui-header{
-    transition:background-color var(--iui-duration-1) ease-out;
-  }
-}
 .iui-expandable-block > .iui-header > .iui-icon,
 .iui-expandable-block > .iui-header > .iui-status-icon{
   display:flex;
@@ -65,13 +61,9 @@
   flex:auto;
   min-width:0;
   margin-left:var(--iui-size-s);
+  transition:color var(--iui-duration-1) ease;
   color:var(--iui-color-foreground-2);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block > .iui-header .iui-expandable-block-label{
-    transition:color var(--iui-duration-1) ease;
-  }
-}
 .iui-expandable-block > .iui-header .iui-title,
 .iui-expandable-block > .iui-header .iui-caption{
   white-space:nowrap;
@@ -137,12 +129,7 @@
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
   color:var(--iui-color-foreground-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-expandable-block:hover > .iui-header .iui-caption,
-.iui-expandable-block:hover > .iui-header .iui-title{
-    transition:color var(--iui-duration-1) ease;
-  }
+  transition:color var(--iui-duration-1) ease;
 }
 .iui-expandable-block.iui-expanded > .iui-header{
   background-color:var(--iui-color-background-3);

package/css/keyboard.css

@@ -24,11 +24,7 @@
   background-color:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5);
   box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-keyboard{
-    transition:box-shadow var(--iui-duration-1) ease-out;
-  }
+  transition:box-shadow var(--iui-duration-1) ease-out;
 }
 .iui-keyboard:hover{
   box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;

package/css/radio-tile.css

@@ -15,11 +15,7 @@
   z-index:1;
   outline:1px solid var(--iui-color-foreground-4);
   background-color:var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-content{
-    transition:outline-color var(--iui-duration-1) ease-out;
-  }
+  transition:outline-color var(--iui-duration-1) ease-out;
 }
 .iui-radio-tile-content:hover{
   z-index:2;
@@ -164,17 +160,13 @@
   fill:var(--iui-color-foreground-4);
   margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
   fill:var(--iui-color-foreground-4);
+  transition:fill var(--iui-duration-1) ease-out;
 }
 @media (forced-colors: active){
   .iui-radio-tile-icon{
     fill:CanvasText;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-icon{
-    transition:fill var(--iui-duration-1) ease-out;
-  }
-}
 @media (forced-colors: active){
   .iui-radio-tile-icon{
     fill:CanvasText;
@@ -192,7 +184,7 @@
 
 .iui-radio-tile-sublabel{
   font-size:var(--iui-font-size-0);
-  line-height:calc(var(--iui-size-s) * 1.375);
+  line-height:calc(var(--iui-size-s) * 1.25);
   text-align:center;
   word-break:break-word;
   color:var(--iui-color-foreground-4);

package/css/slider.css

@@ -33,6 +33,12 @@
 .iui-slider-horizontal .iui-slider-min,
 .iui-slider-horizontal .iui-slider-max{
   margin-top:var(--iui-size-3xs);
+  min-width:var(--iui-size-l);
+  flex-direction:row;
+}
+.iui-slider-horizontal .iui-slider-min svg,
+.iui-slider-horizontal .iui-slider-max svg{
+  margin-top:var(--iui-size-2xs);
 }
 .iui-slider-horizontal .iui-slider-min{
   margin-right:var(--iui-size-s);
@@ -79,8 +85,11 @@
 }
 .iui-slider-vertical .iui-slider-min,
 .iui-slider-vertical .iui-slider-max{
-  margin-left:var(--iui-size-3xs);
+  margin-left:calc(var(--iui-size-3xs) + var(--iui-size-s));
   text-align:center;
+  transform:translate(-50%, 0);
+  min-height:var(--iui-size-l);
+  flex-direction:column;
 }
 .iui-slider-vertical .iui-slider-min{
   margin-top:var(--iui-size-s);
@@ -91,6 +100,7 @@
 
 .iui-slider-component-container{
   display:flex;
+  align-items:start;
 }
 .iui-slider-component-container.iui-disabled{
   cursor:not-allowed;
@@ -113,6 +123,11 @@
 .iui-slider-component-container.iui-disabled .iui-slider-track{
   background-color:var(--iui-color-foreground-4);
 }
+@media (forced-colors: active){
+  .iui-slider-component-container.iui-disabled .iui-slider-track{
+    background-color:GrayText;
+  }
+}
 .iui-slider-component-container.iui-disabled .iui-slider-min,
 .iui-slider-component-container.iui-disabled .iui-slider-max,
 .iui-slider-component-container.iui-disabled .iui-slider-tick{
@@ -228,6 +243,8 @@
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
+  display:flex;
+  justify-content:center;
 }
 .iui-slider-min svg,
 .iui-slider-max svg{
@@ -236,7 +253,6 @@
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   fill:var(--iui-color-foreground-4);
-  margin-top:var(--iui-size-2xs);
 }
 @media (forced-colors: active){
   .iui-slider-min svg,

package/css/tile.css

@@ -353,7 +353,7 @@
 .iui-tile-thumbnail{
   box-sizing:content-box;
   width:100%;
-  height:calc(var(--iui-size-s) * 14);
+  height:calc(var(--iui-size-s) * 13);
   flex-shrink:0;
   overflow:hidden;
   position:relative;
@@ -395,14 +395,10 @@ div.iui-tile-thumbnail-picture{
 
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
   cursor:pointer;
+  transition:fill var(--iui-duration-1) ease;
   fill:rgba(255, 255, 255, var(--iui-opacity-3));
   filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
-    transition:fill var(--iui-duration-1) ease;
-  }
-}
 .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
   fill:rgba(255, 255, 255, var(--iui-opacity-2));
 }

package/css/tooltip.css

@@ -19,11 +19,7 @@
       -ms-user-select:none;
           user-select:none;
   opacity:0;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-tooltip-container > .iui-tooltip{
-    transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
-  }
+  transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
 }
 .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
   visibility:visible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "1.0.0-dev.2",
+  "version": "1.0.0-dev.4",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "css/all.css",