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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/css/all.css +13 -42
  2. package/css/dialog.css +0 -1
  3. package/css/expandable-block.css +3 -16
  4. package/css/keyboard.css +1 -5
  5. package/css/radio-tile.css +2 -10
  6. package/css/slider.css +5 -0
  7. package/css/tile.css +1 -5
  8. package/css/tooltip.css +1 -5
  9. package/package.json +1 -1
package/css/all.css CHANGED
@@ -2631,7 +2631,6 @@ a.iui-breadcrumbs-text:focus{
2631
2631
  display:flex;
2632
2632
  align-items:center;
2633
2633
  margin-bottom:var(--iui-size-s);
2634
- box-sizing:border-box;
2635
2634
  font-size:var(--iui-font-size-3);
2636
2635
  }
2637
2636
 
@@ -2693,6 +2692,7 @@ a.iui-breadcrumbs-text:focus{
2693
2692
  -moz-user-select:none;
2694
2693
  -ms-user-select:none;
2695
2694
  user-select:none;
2695
+ transition:background-color var(--iui-duration-1) ease-out;
2696
2696
  border-radius:inherit;
2697
2697
  border:1px solid var(--iui-color-background-3);
2698
2698
  background-color:var(--iui-color-background-3);
@@ -2707,11 +2707,6 @@ a.iui-breadcrumbs-text:focus{
2707
2707
  outline-offset:-1px;
2708
2708
  }
2709
2709
  }
2710
- @media (prefers-reduced-motion: no-preference){
2711
- .iui-expandable-block > .iui-header{
2712
- transition:background-color var(--iui-duration-1) ease-out;
2713
- }
2714
- }
2715
2710
  .iui-expandable-block > .iui-header > .iui-icon,
2716
2711
  .iui-expandable-block > .iui-header > .iui-status-icon{
2717
2712
  display:flex;
@@ -2736,13 +2731,9 @@ a.iui-breadcrumbs-text:focus{
2736
2731
  flex:auto;
2737
2732
  min-width:0;
2738
2733
  margin-left:var(--iui-size-s);
2734
+ transition:color var(--iui-duration-1) ease;
2739
2735
  color:var(--iui-color-foreground-2);
2740
2736
  }
2741
- @media (prefers-reduced-motion: no-preference){
2742
- .iui-expandable-block > .iui-header .iui-expandable-block-label{
2743
- transition:color var(--iui-duration-1) ease;
2744
- }
2745
- }
2746
2737
  .iui-expandable-block > .iui-header .iui-title,
2747
2738
  .iui-expandable-block > .iui-header .iui-caption{
2748
2739
  white-space:nowrap;
@@ -2808,12 +2799,7 @@ a.iui-breadcrumbs-text:focus{
2808
2799
  .iui-expandable-block:hover > .iui-header .iui-caption,
2809
2800
  .iui-expandable-block:hover > .iui-header .iui-title{
2810
2801
  color:var(--iui-color-foreground-1);
2811
- }
2812
- @media (prefers-reduced-motion: no-preference){
2813
- .iui-expandable-block:hover > .iui-header .iui-caption,
2814
- .iui-expandable-block:hover > .iui-header .iui-title{
2815
- transition:color var(--iui-duration-1) ease;
2816
- }
2802
+ transition:color var(--iui-duration-1) ease;
2817
2803
  }
2818
2804
  .iui-expandable-block.iui-expanded > .iui-header{
2819
2805
  background-color:var(--iui-color-background-3);
@@ -3862,11 +3848,7 @@ div.iui-header-breadcrumb-button-icon{
3862
3848
  background-color:var(--iui-color-background-1);
3863
3849
  border:1px solid var(--iui-color-background-5);
3864
3850
  box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
3865
- }
3866
- @media (prefers-reduced-motion: no-preference){
3867
- .iui-keyboard{
3868
- transition:box-shadow var(--iui-duration-1) ease-out;
3869
- }
3851
+ transition:box-shadow var(--iui-duration-1) ease-out;
3870
3852
  }
3871
3853
  .iui-keyboard:hover{
3872
3854
  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{
4684
4666
  z-index:1;
4685
4667
  outline:1px solid var(--iui-color-foreground-4);
4686
4668
  background-color:var(--iui-color-background-1);
4687
- }
4688
- @media (prefers-reduced-motion: no-preference){
4689
- .iui-radio-tile-content{
4690
- transition:outline-color var(--iui-duration-1) ease-out;
4691
- }
4669
+ transition:outline-color var(--iui-duration-1) ease-out;
4692
4670
  }
4693
4671
  .iui-radio-tile-content:hover{
4694
4672
  z-index:2;
@@ -4833,17 +4811,13 @@ div.iui-header-breadcrumb-button-icon{
4833
4811
  fill:var(--iui-color-foreground-4);
4834
4812
  margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
4835
4813
  fill:var(--iui-color-foreground-4);
4814
+ transition:fill var(--iui-duration-1) ease-out;
4836
4815
  }
4837
4816
  @media (forced-colors: active){
4838
4817
  .iui-radio-tile-icon{
4839
4818
  fill:CanvasText;
4840
4819
  }
4841
4820
  }
4842
- @media (prefers-reduced-motion: no-preference){
4843
- .iui-radio-tile-icon{
4844
- transition:fill var(--iui-duration-1) ease-out;
4845
- }
4846
- }
4847
4821
  @media (forced-colors: active){
4848
4822
  .iui-radio-tile-icon{
4849
4823
  fill:CanvasText;
@@ -5471,6 +5445,11 @@ div.iui-header-breadcrumb-button-icon{
5471
5445
  .iui-slider-component-container.iui-disabled .iui-slider-track{
5472
5446
  background-color:var(--iui-color-foreground-4);
5473
5447
  }
5448
+ @media (forced-colors: active){
5449
+ .iui-slider-component-container.iui-disabled .iui-slider-track{
5450
+ background-color:GrayText;
5451
+ }
5452
+ }
5474
5453
  .iui-slider-component-container.iui-disabled .iui-slider-min,
5475
5454
  .iui-slider-component-container.iui-disabled .iui-slider-max,
5476
5455
  .iui-slider-component-container.iui-disabled .iui-slider-tick{
@@ -7421,14 +7400,10 @@ div.iui-tile-thumbnail-picture{
7421
7400
 
7422
7401
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
7423
7402
  cursor:pointer;
7403
+ transition:fill var(--iui-duration-1) ease;
7424
7404
  fill:rgba(255, 255, 255, var(--iui-opacity-3));
7425
7405
  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
7426
7406
  }
7427
- @media (prefers-reduced-motion: no-preference){
7428
- .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
7429
- transition:fill var(--iui-duration-1) ease;
7430
- }
7431
- }
7432
7407
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
7433
7408
  fill:rgba(255, 255, 255, var(--iui-opacity-2));
7434
7409
  }
@@ -8168,11 +8143,7 @@ div.iui-tile-thumbnail-picture{
8168
8143
  -ms-user-select:none;
8169
8144
  user-select:none;
8170
8145
  opacity:0;
8171
- }
8172
- @media (prefers-reduced-motion: no-preference){
8173
- .iui-tooltip-container > .iui-tooltip{
8174
- transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
8175
- }
8146
+ transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
8176
8147
  }
8177
8148
  .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
8178
8149
  visibility:visible;
package/css/dialog.css CHANGED
@@ -122,7 +122,6 @@
122
122
  display:flex;
123
123
  align-items:center;
124
124
  margin-bottom:var(--iui-size-s);
125
- box-sizing:border-box;
126
125
  font-size:var(--iui-font-size-3);
127
126
  }
128
127
 
package/css/expandable-block.css CHANGED
@@ -22,6 +22,7 @@
22
22
  -moz-user-select:none;
23
23
  -ms-user-select:none;
24
24
  user-select:none;
25
+ transition:background-color var(--iui-duration-1) ease-out;
25
26
  border-radius:inherit;
26
27
  border:1px solid var(--iui-color-background-3);
27
28
  background-color:var(--iui-color-background-3);
@@ -36,11 +37,6 @@
36
37
  outline-offset:-1px;
37
38
  }
38
39
  }
39
- @media (prefers-reduced-motion: no-preference){
40
- .iui-expandable-block > .iui-header{
41
- transition:background-color var(--iui-duration-1) ease-out;
42
- }
43
- }
44
40
  .iui-expandable-block > .iui-header > .iui-icon,
45
41
  .iui-expandable-block > .iui-header > .iui-status-icon{
46
42
  display:flex;
@@ -65,13 +61,9 @@
65
61
  flex:auto;
66
62
  min-width:0;
67
63
  margin-left:var(--iui-size-s);
64
+ transition:color var(--iui-duration-1) ease;
68
65
  color:var(--iui-color-foreground-2);
69
66
  }
70
- @media (prefers-reduced-motion: no-preference){
71
- .iui-expandable-block > .iui-header .iui-expandable-block-label{
72
- transition:color var(--iui-duration-1) ease;
73
- }
74
- }
75
67
  .iui-expandable-block > .iui-header .iui-title,
76
68
  .iui-expandable-block > .iui-header .iui-caption{
77
69
  white-space:nowrap;
@@ -137,12 +129,7 @@
137
129
  .iui-expandable-block:hover > .iui-header .iui-caption,
138
130
  .iui-expandable-block:hover > .iui-header .iui-title{
139
131
  color:var(--iui-color-foreground-1);
140
- }
141
- @media (prefers-reduced-motion: no-preference){
142
- .iui-expandable-block:hover > .iui-header .iui-caption,
143
- .iui-expandable-block:hover > .iui-header .iui-title{
144
- transition:color var(--iui-duration-1) ease;
145
- }
132
+ transition:color var(--iui-duration-1) ease;
146
133
  }
147
134
  .iui-expandable-block.iui-expanded > .iui-header{
148
135
  background-color:var(--iui-color-background-3);
package/css/keyboard.css CHANGED
@@ -24,11 +24,7 @@
24
24
  background-color:var(--iui-color-background-1);
25
25
  border:1px solid var(--iui-color-background-5);
26
26
  box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
27
- }
28
- @media (prefers-reduced-motion: no-preference){
29
- .iui-keyboard{
30
- transition:box-shadow var(--iui-duration-1) ease-out;
31
- }
27
+ transition:box-shadow var(--iui-duration-1) ease-out;
32
28
  }
33
29
  .iui-keyboard:hover{
34
30
  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 CHANGED
@@ -15,11 +15,7 @@
15
15
  z-index:1;
16
16
  outline:1px solid var(--iui-color-foreground-4);
17
17
  background-color:var(--iui-color-background-1);
18
- }
19
- @media (prefers-reduced-motion: no-preference){
20
- .iui-radio-tile-content{
21
- transition:outline-color var(--iui-duration-1) ease-out;
22
- }
18
+ transition:outline-color var(--iui-duration-1) ease-out;
23
19
  }
24
20
  .iui-radio-tile-content:hover{
25
21
  z-index:2;
@@ -164,17 +160,13 @@
164
160
  fill:var(--iui-color-foreground-4);
165
161
  margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
166
162
  fill:var(--iui-color-foreground-4);
163
+ transition:fill var(--iui-duration-1) ease-out;
167
164
  }
168
165
  @media (forced-colors: active){
169
166
  .iui-radio-tile-icon{
170
167
  fill:CanvasText;
171
168
  }
172
169
  }
173
- @media (prefers-reduced-motion: no-preference){
174
- .iui-radio-tile-icon{
175
- transition:fill var(--iui-duration-1) ease-out;
176
- }
177
- }
178
170
  @media (forced-colors: active){
179
171
  .iui-radio-tile-icon{
180
172
  fill:CanvasText;
package/css/slider.css CHANGED
@@ -113,6 +113,11 @@
113
113
  .iui-slider-component-container.iui-disabled .iui-slider-track{
114
114
  background-color:var(--iui-color-foreground-4);
115
115
  }
116
+ @media (forced-colors: active){
117
+ .iui-slider-component-container.iui-disabled .iui-slider-track{
118
+ background-color:GrayText;
119
+ }
120
+ }
116
121
  .iui-slider-component-container.iui-disabled .iui-slider-min,
117
122
  .iui-slider-component-container.iui-disabled .iui-slider-max,
118
123
  .iui-slider-component-container.iui-disabled .iui-slider-tick{
package/css/tile.css CHANGED
@@ -395,14 +395,10 @@ div.iui-tile-thumbnail-picture{
395
395
 
396
396
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
397
397
  cursor:pointer;
398
+ transition:fill var(--iui-duration-1) ease;
398
399
  fill:rgba(255, 255, 255, var(--iui-opacity-3));
399
400
  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
400
401
  }
401
- @media (prefers-reduced-motion: no-preference){
402
- .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
403
- transition:fill var(--iui-duration-1) ease;
404
- }
405
- }
406
402
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
407
403
  fill:rgba(255, 255, 255, var(--iui-opacity-2));
408
404
  }
package/css/tooltip.css CHANGED
@@ -19,11 +19,7 @@
19
19
  -ms-user-select:none;
20
20
  user-select:none;
21
21
  opacity:0;
22
- }
23
- @media (prefers-reduced-motion: no-preference){
24
- .iui-tooltip-container > .iui-tooltip{
25
- transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
26
- }
22
+ transition:visibility var(--iui-duration-0) linear var(--iui-duration-1), opacity var(--iui-duration-1) ease-out;
27
23
  }
28
24
  .iui-tooltip-container > .iui-tooltip.iui-tooltip-visible, .iui-tooltip-container:hover > .iui-tooltip{
29
25
  visibility:visible;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "1.0.0-dev.2",
3
+ "version": "1.0.0-dev.3",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",