@itwin/itwinui-css 0.50.0 → 0.52.0

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 (67) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7324 -5608
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +443 -344
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +223 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/button/button-group.scss +4 -1
  47. package/scss/carousel/carousel.scss +4 -1
  48. package/scss/code/codeblock.scss +1 -1
  49. package/scss/inputs/checkbox.scss +1 -0
  50. package/scss/inputs/labeled-inputs.scss +8 -8
  51. package/scss/inputs/radio.scss +0 -4
  52. package/scss/location-marker/data-rich.scss +1 -1
  53. package/scss/location-marker/me.scss +4 -4
  54. package/scss/modal/classes.scss +4 -0
  55. package/scss/modal/modal.scss +81 -7
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/style/ripple.scss +1 -1
  61. package/scss/style/speed.scss +1 -0
  62. package/scss/table/table.scss +23 -14
  63. package/scss/toast-notification/categories.scss +1 -5
  64. package/scss/toggle-switch/classes.scss +4 -0
  65. package/scss/toggle-switch/toggle-switch.scss +141 -162
  66. package/scss/tooltip/tooltip.scss +1 -1
  67. package/scss/user-icon/user-icon.scss +38 -19
package/css/color-picker.css CHANGED
@@ -23,65 +23,90 @@
23
23
  user-select:none;
24
24
  overflow-y:auto;
25
25
  flex-direction:column;
26
- max-height:495px; }
27
- @supports (overflow-y: overlay){
28
- .iui-color-picker{
29
- overflow-y:overlay; } }
30
- @supports (row-gap: 11px){
31
- .iui-color-picker{
32
- row-gap:11px; } }
26
+ max-height:495px;
27
+ }
28
+ @supports (overflow-y: overlay){
29
+ .iui-color-picker{
30
+ overflow-y:overlay;
31
+ }
32
+ }
33
+ @supports (row-gap: 11px){
34
+ .iui-color-picker{
35
+ row-gap:11px;
36
+ }
37
+ }
38
+ .iui-color-picker > div:not(:last-child){
39
+ margin-bottom:11px;
40
+ }
41
+ @supports (row-gap: 11px){
33
42
  .iui-color-picker > div:not(:last-child){
34
- margin-bottom:11px; }
35
- @supports (row-gap: 11px){
36
- .iui-color-picker > div:not(:last-child){
37
- margin-bottom:0; } }
43
+ margin-bottom:0;
44
+ }
45
+ }
38
46
 
39
47
  .iui-color-palette{
40
48
  display:flex;
41
49
  flex-wrap:wrap;
42
50
  align-content:flex-start;
43
51
  min-height:24px;
44
- min-width:24px; }
45
- @supports (gap: 8px){
46
- .iui-color-palette{
47
- gap:8px; } }
48
- .iui-color-palette button.iui-button.iui-borderless{
49
- height:24px;
50
- width:24px;
51
- padding:0; }
52
- .iui-color-palette-wrapper{
53
- max-width:280px; }
54
- .iui-color-palette-wrapper:only-child{
55
- max-width:312px; }
52
+ min-width:24px;
53
+ }
54
+ @supports (gap: 8px){
55
+ .iui-color-palette{
56
+ gap:8px;
57
+ }
58
+ }
59
+ .iui-color-palette button.iui-button.iui-borderless{
60
+ height:24px;
61
+ width:24px;
62
+ padding:0;
63
+ }
64
+ .iui-color-palette-wrapper{
65
+ max-width:280px;
66
+ }
67
+ .iui-color-palette-wrapper:only-child{
68
+ max-width:312px;
69
+ }
56
70
 
57
71
  .iui-color-input{
58
72
  display:flex;
59
- align-items:center; }
60
- .iui-color-input-wrapper{
61
- max-width:280px; }
62
- .iui-color-input .iui-button{
63
- margin-right:4px; }
64
- .iui-color-input-fields{
65
- display:flex;
66
- width:100%;
67
- gap:2px; }
68
- .iui-color-input-fields > *{
69
- flex-grow:1; }
70
- .iui-color-input-fields > *:not(:last-child){
71
- margin-right:2px; }
72
- @supports (gap: 2px){
73
- .iui-color-input-fields > *:not(:last-child){
74
- margin-right:0; } }
75
- .iui-color-input-fields input{
76
- text-transform:uppercase; }
77
- .iui-color-input-fields input[type='number']{
78
- -webkit-appearance:textfield;
79
- -moz-appearance:textfield;
80
- appearance:textfield;
81
- text-align:right; }
82
- .iui-color-input-fields input[type='number']::-webkit-inner-spin-button{
83
- -webkit-appearance:none;
84
- appearance:none; }
73
+ align-items:center;
74
+ }
75
+ .iui-color-input-wrapper{
76
+ max-width:280px;
77
+ }
78
+ .iui-color-input .iui-button{
79
+ margin-right:4px;
80
+ }
81
+ .iui-color-input-fields{
82
+ display:flex;
83
+ width:100%;
84
+ gap:2px;
85
+ }
86
+ .iui-color-input-fields > *{
87
+ flex-grow:1;
88
+ }
89
+ .iui-color-input-fields > *:not(:last-child){
90
+ margin-right:2px;
91
+ }
92
+ @supports (gap: 2px){
93
+ .iui-color-input-fields > *:not(:last-child){
94
+ margin-right:0;
95
+ }
96
+ }
97
+ .iui-color-input-fields input{
98
+ text-transform:uppercase;
99
+ }
100
+ .iui-color-input-fields input[type=number]{
101
+ -webkit-appearance:textfield;
102
+ -moz-appearance:textfield;
103
+ appearance:textfield;
104
+ text-align:right;
105
+ }
106
+ .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
107
+ -webkit-appearance:none;
108
+ appearance:none;
109
+ }
85
110
 
86
111
  .iui-color-swatch{
87
112
  --iui-color-swatch-background:initial;
@@ -96,46 +121,58 @@
96
121
  background-position:0 0, 8px 8px;
97
122
  background-size:16px 16px;
98
123
  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
99
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
100
- @supports (gap: 8px){
101
- .iui-color-swatch{
102
- margin-bottom:0;
103
- margin-right:0; } }
104
- .iui-color-swatch::after{
105
- content:'';
106
- position:absolute;
107
- left:0;
108
- top:0;
109
- width:inherit;
110
- height:inherit;
111
- border-radius:inherit;
112
- background-color:inherit;
113
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
114
- .iui-color-swatch:hover{
115
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
116
- .iui-color-swatch:focus-visible{
124
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
125
+ }
126
+ @supports (gap: 8px){
127
+ .iui-color-swatch{
128
+ margin-bottom:0;
129
+ margin-right:0;
130
+ }
131
+ }
132
+ .iui-color-swatch::after{
133
+ content:"";
134
+ position:absolute;
135
+ left:0;
136
+ top:0;
137
+ width:inherit;
138
+ height:inherit;
139
+ border-radius:inherit;
140
+ background-color:inherit;
141
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
142
+ }
143
+ .iui-color-swatch:hover{
144
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
145
+ }
146
+ .iui-color-swatch:focus-visible{
147
+ outline:2px solid var(--iui-color-foreground-primary);
148
+ outline-offset:1px;
149
+ }
150
+ @supports not selector(*:focus-visible){
151
+ .iui-color-swatch:focus{
117
152
  outline:2px solid var(--iui-color-foreground-primary);
118
- outline-offset:1px; }
119
- @supports not selector(*:focus-visible){
120
- .iui-color-swatch:focus{
121
- outline:2px solid var(--iui-color-foreground-primary);
122
- outline-offset:1px; } }
123
- .iui-color-swatch.iui-active{
124
- box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
125
- .iui-color-swatch.iui-active:hover{
126
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
153
+ outline-offset:1px;
154
+ }
155
+ }
156
+ .iui-color-swatch.iui-active{
157
+ box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
158
+ }
159
+ .iui-color-swatch.iui-active:hover{
160
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
161
+ }
127
162
 
128
163
  .iui-color-picker-section-label{
129
164
  margin-bottom:5.5px;
130
165
  overflow:hidden;
131
166
  text-overflow:ellipsis;
132
167
  white-space:nowrap;
133
- flex-shrink:0; }
168
+ flex-shrink:0;
169
+ }
134
170
 
135
171
  .iui-color-selection-wrapper{
136
172
  display:flex;
137
173
  flex-direction:column;
138
- min-width:280px; }
174
+ min-width:280px;
175
+ }
139
176
 
140
177
  .iui-color-field{
141
178
  --iui-color-field-hue:initial;
@@ -143,33 +180,38 @@
143
180
  cursor:crosshair;
144
181
  width:100%;
145
182
  height:209px;
146
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
147
- .iui-color-field:not(:last-child){
148
- margin-bottom:6px; }
183
+ background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
184
+ }
185
+ .iui-color-field:not(:last-child){
186
+ margin-bottom:6px;
187
+ }
149
188
 
150
189
  .iui-hue-slider .iui-slider-rail{
151
190
  height:8px;
152
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
153
- background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
154
-
191
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
192
+ background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
193
+ }
155
194
  .iui-hue-slider .iui-slider-thumb{
156
- top:7px; }
195
+ top:7px;
196
+ }
157
197
 
158
198
  .iui-opacity-slider .iui-slider-rail{
159
199
  height:8px;
160
200
  background-position:0 0, 4px 4px;
161
201
  background-size:8px 8px;
162
202
  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
163
- background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
164
- .iui-opacity-slider .iui-slider-rail::before{
165
- display:block;
166
- content:'';
167
- width:100%;
168
- height:100%;
169
- background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
170
-
203
+ background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
204
+ }
205
+ .iui-opacity-slider .iui-slider-rail::before{
206
+ display:block;
207
+ content:"";
208
+ width:100%;
209
+ height:100%;
210
+ background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
211
+ }
171
212
  .iui-opacity-slider .iui-slider-thumb{
172
- top:7px; }
213
+ top:7px;
214
+ }
173
215
 
174
216
  .iui-color-dot{
175
217
  --iui-color-dot-inset:initial;
@@ -181,13 +223,18 @@
181
223
  transform:translate(-8px, -8px);
182
224
  cursor:crosshair;
183
225
  box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
184
- background-color:var(--iui-color-picker-selected-color); }
185
- .iui-color-dot:hover{
186
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
187
- .iui-color-dot:focus-visible{
226
+ background-color:var(--iui-color-picker-selected-color);
227
+ }
228
+ .iui-color-dot:hover{
229
+ box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
230
+ }
231
+ .iui-color-dot:focus-visible{
232
+ outline:2px solid var(--iui-color-foreground-primary);
233
+ outline-offset:0;
234
+ }
235
+ @supports not selector(*:focus-visible){
236
+ .iui-color-dot:focus{
188
237
  outline:2px solid var(--iui-color-foreground-primary);
189
- outline-offset:0; }
190
- @supports not selector(*:focus-visible){
191
- .iui-color-dot:focus{
192
- outline:2px solid var(--iui-color-foreground-primary);
193
- outline-offset:0; } }
238
+ outline-offset:0;
239
+ }
240
+ }
package/css/date-picker.css CHANGED
@@ -21,7 +21,8 @@
21
21
  height:286px;
22
22
  display:inline-flex;
23
23
  background-color:#FFF;
24
- background-color:var(--iui-color-background-1); }
24
+ background-color:var(--iui-color-background-1);
25
+ }
25
26
 
26
27
  .iui-calendar-month-year{
27
28
  display:inline-flex;
@@ -32,23 +33,26 @@
32
33
  box-sizing:border-box;
33
34
  font-weight:700;
34
35
  background-color:#FFF;
35
- background-color:var(--iui-color-background-1); }
36
- .iui-calendar-month-year > span{
37
- margin:0 4px;
38
- width:156px;
39
- white-space:nowrap;
40
- display:inline-flex;
41
- flex-shrink:0;
42
- align-items:center;
43
- justify-content:center;
44
- line-height:44px; }
36
+ background-color:var(--iui-color-background-1);
37
+ }
38
+ .iui-calendar-month-year > span{
39
+ margin:0 4px;
40
+ width:156px;
41
+ white-space:nowrap;
42
+ display:inline-flex;
43
+ flex-shrink:0;
44
+ align-items:center;
45
+ justify-content:center;
46
+ line-height:44px;
47
+ }
45
48
 
46
49
  .iui-calendar-month{
47
50
  overflow:hidden;
48
51
  max-width:15ch;
49
52
  text-overflow:ellipsis;
50
53
  white-space:nowrap;
51
- flex-shrink:0; }
54
+ flex-shrink:0;
55
+ }
52
56
 
53
57
  .iui-calendar-weekdays{
54
58
  line-height:33px;
@@ -58,12 +62,14 @@
58
62
  padding:0 8px;
59
63
  font-weight:700;
60
64
  background-color:#F8F9FB;
61
- background-color:var(--iui-color-background-2); }
62
- .iui-calendar-weekdays > div{
63
- white-space:nowrap;
64
- overflow:hidden;
65
- width:32px;
66
- text-align:center; }
65
+ background-color:var(--iui-color-background-2);
66
+ }
67
+ .iui-calendar-weekdays > div{
68
+ white-space:nowrap;
69
+ overflow:hidden;
70
+ width:32px;
71
+ text-align:center;
72
+ }
67
73
 
68
74
  .iui-calendar-week{
69
75
  white-space:nowrap;
@@ -71,47 +77,59 @@
71
77
  display:flex;
72
78
  align-items:center;
73
79
  justify-content:space-evenly;
74
- padding:0 8px; }
80
+ padding:0 8px;
81
+ }
75
82
 
76
83
  .iui-calendar-day{
77
84
  cursor:pointer;
78
85
  display:inline-block;
79
86
  width:33px;
80
87
  line-height:33px;
81
- border-radius:3px; }
82
- .iui-calendar-day:focus-visible{
88
+ border-radius:3px;
89
+ }
90
+ .iui-calendar-day:focus-visible{
91
+ outline:1px solid var(--iui-color-foreground-primary);
92
+ outline-offset:-1px;
93
+ }
94
+ @supports not selector(*:focus-visible){
95
+ .iui-calendar-day:focus{
83
96
  outline:1px solid var(--iui-color-foreground-primary);
84
- outline-offset:-1px; }
85
- @supports not selector(*:focus-visible){
86
- .iui-calendar-day:focus{
87
- outline:1px solid var(--iui-color-foreground-primary);
88
- outline-offset:-1px; } }
89
- .iui-calendar-day.iui-today{
90
- font-weight:600;
91
- border-radius:50%;
92
- background-color:rgba(0, 0, 0, 0.1);
93
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
94
- .iui-calendar-day:hover{
95
- font-weight:600;
96
- color:#008BE1;
97
- background-color:rgba(0, 139, 225, 0.1);
98
- color:var(--iui-color-foreground-primary);
99
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
100
- .iui-calendar-day.iui-selected{
101
- font-weight:600;
102
- border-radius:3px;
103
- cursor:default;
104
- background-color:#008BE1;
105
- color:#FFF;
106
- background-color:var(--iui-color-background-primary);
107
- color:var(--iui-color-foreground-accessory); }
108
- .iui-calendar-day.iui-selected:focus-visible{
109
- outline:1px solid var(--iui-color-foreground-accessory);
110
- outline-offset:-3px; }
111
- @supports not selector(*:focus-visible){
112
- .iui-calendar-day.iui-selected:focus{
113
- outline:1px solid var(--iui-color-foreground-accessory);
114
- outline-offset:-3px; } }
115
- .iui-calendar-day.iui-outside-month{
116
- color:rgba(0, 0, 0, 0.4);
117
- color:var(--iui-text-color-muted); }
97
+ outline-offset:-1px;
98
+ }
99
+ }
100
+ .iui-calendar-day.iui-today{
101
+ font-weight:600;
102
+ border-radius:50%;
103
+ background-color:rgba(0, 0, 0, 0.1);
104
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
105
+ }
106
+ .iui-calendar-day:hover{
107
+ font-weight:600;
108
+ color:#008BE1;
109
+ background-color:rgba(0, 139, 225, 0.1);
110
+ color:var(--iui-color-foreground-primary);
111
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
112
+ }
113
+ .iui-calendar-day.iui-selected{
114
+ font-weight:600;
115
+ border-radius:3px;
116
+ cursor:default;
117
+ background-color:#008BE1;
118
+ color:#FFF;
119
+ background-color:var(--iui-color-background-primary);
120
+ color:var(--iui-color-foreground-accessory);
121
+ }
122
+ .iui-calendar-day.iui-selected:focus-visible{
123
+ outline:1px solid var(--iui-color-foreground-accessory);
124
+ outline-offset:-3px;
125
+ }
126
+ @supports not selector(*:focus-visible){
127
+ .iui-calendar-day.iui-selected:focus{
128
+ outline:1px solid var(--iui-color-foreground-accessory);
129
+ outline-offset:-3px;
130
+ }
131
+ }
132
+ .iui-calendar-day.iui-outside-month{
133
+ color:rgba(0, 0, 0, 0.4);
134
+ color:var(--iui-text-color-muted);
135
+ }