@itwin/itwinui-css 0.41.1 → 0.44.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 (60) hide show
  1. package/css/alert.css +46 -61
  2. package/css/all.css +755 -715
  3. package/css/breadcrumbs.css +7 -20
  4. package/css/button.css +172 -194
  5. package/css/code.css +6 -9
  6. package/css/color-picker.css +14 -14
  7. package/css/date-picker.css +91 -85
  8. package/css/expandable-block.css +13 -9
  9. package/css/file-upload.css +4 -3
  10. package/css/footer.css +7 -20
  11. package/css/global.css +7 -9
  12. package/css/header.css +20 -38
  13. package/css/inputs.css +111 -80
  14. package/css/side-navigation.css +1 -16
  15. package/css/slider.css +7 -10
  16. package/css/table.css +173 -34
  17. package/css/tabs.css +8 -3
  18. package/css/tag.css +17 -18
  19. package/css/tile.css +0 -14
  20. package/css/time-picker.css +26 -18
  21. package/css/toast-notification.css +12 -49
  22. package/css/toggle-switch.css +7 -4
  23. package/css/tree.css +2 -3
  24. package/css/wizard.css +4 -4
  25. package/package.json +3 -3
  26. package/scss/alert/alert.scss +4 -2
  27. package/scss/button/borderless.scss +10 -26
  28. package/scss/button/button-group.scss +68 -46
  29. package/scss/button/cta.scss +10 -25
  30. package/scss/button/default.scss +11 -26
  31. package/scss/button/high-visibility.scss +10 -25
  32. package/scss/button/split-menu.scss +34 -20
  33. package/scss/color-picker/color-picker.scss +2 -25
  34. package/scss/date-picker/classes.scss +20 -0
  35. package/scss/date-picker/date-picker.scss +88 -100
  36. package/scss/expandable-block/block.scss +1 -0
  37. package/scss/file-upload/file-upload.scss +2 -2
  38. package/scss/footer/footer.scss +0 -2
  39. package/scss/header/header.scss +17 -23
  40. package/scss/inputs/checkbox-radio.scss +28 -18
  41. package/scss/inputs/checkbox.scss +9 -8
  42. package/scss/inputs/input.scss +1 -14
  43. package/scss/inputs/labeled-inputs.scss +2 -1
  44. package/scss/inputs/radio-tile.scss +9 -4
  45. package/scss/inputs/select.scss +1 -1
  46. package/scss/side-navigation/side-navigation.scss +1 -33
  47. package/scss/slider/slider.scss +1 -2
  48. package/scss/style/mixins.scss +15 -17
  49. package/scss/table/classes.scss +12 -0
  50. package/scss/table/paginator.scss +39 -32
  51. package/scss/table/table.scss +17 -8
  52. package/scss/tabs/default.scss +5 -0
  53. package/scss/tabs/tabs.scss +1 -8
  54. package/scss/tag/tag.scss +9 -1
  55. package/scss/time-picker/time-picker.scss +1 -0
  56. package/scss/toast-notification/categories.scss +5 -2
  57. package/scss/toast-notification/toast.scss +0 -1
  58. package/scss/toggle-switch/toggle-switch.scss +7 -3
  59. package/scss/tree/tree.scss +2 -2
  60. package/scss/wizard/wizard.scss +3 -3
package/css/alert.css CHANGED
@@ -50,16 +50,13 @@
50
50
  white-space:nowrap;
51
51
  color:#008BE1;
52
52
  color:var(--iui-color-foreground-primary); }
53
- .iui-alert-link:focus{
54
- outline:0;
55
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
56
- box-shadow:var(--iui-focus-box-shadow); }
57
- .iui-alert-link:focus:not(:focus-visible){
58
- box-shadow:none; }
59
53
  .iui-alert-link:focus-visible{
60
- outline:0;
61
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
62
- box-shadow:var(--iui-focus-box-shadow); }
54
+ outline:1px solid var(--iui-color-foreground-primary);
55
+ outline-offset:-1px; }
56
+ @supports not selector(*:focus-visible){
57
+ .iui-alert-link:focus{
58
+ outline:1px solid var(--iui-color-foreground-primary);
59
+ outline-offset:-1px; } }
63
60
  .iui-alert-link:hover{
64
61
  text-decoration:none;
65
62
  color:#006bae;
@@ -88,24 +85,21 @@
88
85
  background-color:rgba(83, 162, 26, 0.4);
89
86
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
90
87
  .iui-alert.iui-positive .iui-alert-link{
88
+ border-radius:3px;
91
89
  color:#53A21A;
92
90
  color:var(--iui-color-foreground-positive); }
93
91
  .iui-alert.iui-positive .iui-alert-link:hover{
94
92
  color:#3c7613;
95
93
  color:var(--iui-color-foreground-positive-overlay); }
96
- .iui-alert.iui-positive .iui-alert-link:focus,
97
- .iui-alert.iui-positive > .iui-button:focus{
98
- outline:0;
99
- box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
100
- box-shadow:var(--iui-focus-positive-box-shadow); }
101
- .iui-alert.iui-positive .iui-alert-link:focus:not(:focus-visible),
102
- .iui-alert.iui-positive > .iui-button:focus:not(:focus-visible){
103
- box-shadow:none; }
104
- .iui-alert.iui-positive .iui-alert-link:focus-visible,
105
- .iui-alert.iui-positive > .iui-button:focus-visible{
106
- outline:0;
107
- box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
108
- box-shadow:var(--iui-focus-positive-box-shadow); }
94
+ .iui-alert.iui-positive .iui-alert-link:focus-visible{
95
+ outline:1px solid var(--iui-color-foreground-positive);
96
+ outline-offset:2px; }
97
+ @supports not selector(*:focus-visible){
98
+ .iui-alert.iui-positive .iui-alert-link:focus{
99
+ outline:1px solid var(--iui-color-foreground-positive);
100
+ outline-offset:2px; } }
101
+ .iui-alert.iui-positive > .iui-button{
102
+ outline-color:var(--iui-color-foreground-positive); }
109
103
  .iui-alert.iui-negative{
110
104
  background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
111
105
  border-color:#D30A0A;
@@ -121,24 +115,21 @@
121
115
  background-color:rgba(211, 10, 10, 0.4);
122
116
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
123
117
  .iui-alert.iui-negative .iui-alert-link{
118
+ border-radius:3px;
124
119
  color:#D30A0A;
125
120
  color:var(--iui-color-foreground-negative); }
126
121
  .iui-alert.iui-negative .iui-alert-link:hover{
127
122
  color:#a20808;
128
123
  color:var(--iui-color-foreground-negative-overlay); }
129
- .iui-alert.iui-negative .iui-alert-link:focus,
130
- .iui-alert.iui-negative > .iui-button:focus{
131
- outline:0;
132
- box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
133
- box-shadow:var(--iui-focus-negative-box-shadow); }
134
- .iui-alert.iui-negative .iui-alert-link:focus:not(:focus-visible),
135
- .iui-alert.iui-negative > .iui-button:focus:not(:focus-visible){
136
- box-shadow:none; }
137
- .iui-alert.iui-negative .iui-alert-link:focus-visible,
138
- .iui-alert.iui-negative > .iui-button:focus-visible{
139
- outline:0;
140
- box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
141
- box-shadow:var(--iui-focus-negative-box-shadow); }
124
+ .iui-alert.iui-negative .iui-alert-link:focus-visible{
125
+ outline:1px solid var(--iui-color-foreground-negative);
126
+ outline-offset:2px; }
127
+ @supports not selector(*:focus-visible){
128
+ .iui-alert.iui-negative .iui-alert-link:focus{
129
+ outline:1px solid var(--iui-color-foreground-negative);
130
+ outline-offset:2px; } }
131
+ .iui-alert.iui-negative > .iui-button{
132
+ outline-color:var(--iui-color-foreground-negative); }
142
133
  .iui-alert.iui-warning{
143
134
  background:linear-gradient(rgba(241, 139, 18, 0.1), rgba(241, 139, 18, 0.1)), linear-gradient(#FFF, #FFF);
144
135
  border-color:#F18B12;
@@ -154,24 +145,21 @@
154
145
  background-color:rgba(241, 139, 18, 0.4);
155
146
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
156
147
  .iui-alert.iui-warning .iui-alert-link{
148
+ border-radius:3px;
157
149
  color:#F18B12;
158
150
  color:var(--iui-color-foreground-warning); }
159
151
  .iui-alert.iui-warning .iui-alert-link:hover{
160
152
  color:#c4700c;
161
153
  color:var(--iui-color-foreground-warning-overlay); }
162
- .iui-alert.iui-warning .iui-alert-link:focus,
163
- .iui-alert.iui-warning > .iui-button:focus{
164
- outline:0;
165
- box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
166
- box-shadow:var(--iui-focus-warning-box-shadow); }
167
- .iui-alert.iui-warning .iui-alert-link:focus:not(:focus-visible),
168
- .iui-alert.iui-warning > .iui-button:focus:not(:focus-visible){
169
- box-shadow:none; }
170
- .iui-alert.iui-warning .iui-alert-link:focus-visible,
171
- .iui-alert.iui-warning > .iui-button:focus-visible{
172
- outline:0;
173
- box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
174
- box-shadow:var(--iui-focus-warning-box-shadow); }
154
+ .iui-alert.iui-warning .iui-alert-link:focus-visible{
155
+ outline:1px solid var(--iui-color-foreground-warning);
156
+ outline-offset:2px; }
157
+ @supports not selector(*:focus-visible){
158
+ .iui-alert.iui-warning .iui-alert-link:focus{
159
+ outline:1px solid var(--iui-color-foreground-warning);
160
+ outline-offset:2px; } }
161
+ .iui-alert.iui-warning > .iui-button{
162
+ outline-color:var(--iui-color-foreground-warning); }
175
163
  .iui-alert.iui-informational{
176
164
  background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
177
165
  border-color:#008BE1;
@@ -187,21 +175,18 @@
187
175
  background-color:rgba(0, 139, 225, 0.4);
188
176
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
189
177
  .iui-alert.iui-informational .iui-alert-link{
178
+ border-radius:3px;
190
179
  color:#008BE1;
191
180
  color:var(--iui-color-foreground-primary); }
192
181
  .iui-alert.iui-informational .iui-alert-link:hover{
193
182
  color:#006bae;
194
183
  color:var(--iui-color-foreground-primary-overlay); }
195
- .iui-alert.iui-informational .iui-alert-link:focus,
196
- .iui-alert.iui-informational > .iui-button:focus{
197
- outline:0;
198
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
199
- box-shadow:var(--iui-focus-box-shadow); }
200
- .iui-alert.iui-informational .iui-alert-link:focus:not(:focus-visible),
201
- .iui-alert.iui-informational > .iui-button:focus:not(:focus-visible){
202
- box-shadow:none; }
203
- .iui-alert.iui-informational .iui-alert-link:focus-visible,
204
- .iui-alert.iui-informational > .iui-button:focus-visible{
205
- outline:0;
206
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
207
- box-shadow:var(--iui-focus-box-shadow); }
184
+ .iui-alert.iui-informational .iui-alert-link:focus-visible{
185
+ outline:1px solid var(--iui-color-foreground-primary);
186
+ outline-offset:2px; }
187
+ @supports not selector(*:focus-visible){
188
+ .iui-alert.iui-informational .iui-alert-link:focus{
189
+ outline:1px solid var(--iui-color-foreground-primary);
190
+ outline-offset:2px; } }
191
+ .iui-alert.iui-informational > .iui-button{
192
+ outline-color:var(--iui-color-foreground-primary); }