@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/icon.css CHANGED
@@ -2,176 +2,178 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-icons-default{
6
- fill:rgba(0, 0, 0, 0.4);
7
- fill:var(--iui-icons-color);
8
- display:inline-flex;
9
- width:16px;
10
- height:16px;
11
- }
12
- @media (forced-colors: active){
5
+ @layer itwinui-v1{
13
6
  .iui-icons-default{
14
- fill:CanvasText;
15
- }
16
- }
17
- .iui-icons-default.iui-informational{
18
- fill:#008ae0;
19
- fill:var(--iui-icons-color-primary);
20
- }
21
- .iui-icons-default.iui-positive{
22
- fill:#53a21a;
23
- fill:var(--iui-icons-color-positive);
24
- }
25
- .iui-icons-default.iui-warning{
26
- fill:#f18d13;
27
- fill:var(--iui-icons-color-warning);
28
- }
29
- .iui-icons-default.iui-negative{
30
- fill:#d10a0a;
31
- fill:var(--iui-icons-color-negative);
32
- }
7
+ fill:rgba(0, 0, 0, 0.4);
8
+ fill:var(--iui-icons-color);
9
+ display:inline-flex;
10
+ width:16px;
11
+ height:16px;
12
+ }
13
+ @media (forced-colors: active){
14
+ .iui-icons-default{
15
+ fill:CanvasText;
16
+ }
17
+ }
18
+ .iui-icons-default.iui-informational{
19
+ fill:#008ae0;
20
+ fill:var(--iui-icons-color-primary);
21
+ }
22
+ .iui-icons-default.iui-positive{
23
+ fill:#53a21a;
24
+ fill:var(--iui-icons-color-positive);
25
+ }
26
+ .iui-icons-default.iui-warning{
27
+ fill:#f18d13;
28
+ fill:var(--iui-icons-color-warning);
29
+ }
30
+ .iui-icons-default.iui-negative{
31
+ fill:#d10a0a;
32
+ fill:var(--iui-icons-color-negative);
33
+ }
33
34
 
34
- .iui-icons-small{
35
- fill:rgba(0, 0, 0, 0.4);
36
- fill:var(--iui-icons-color);
37
- display:inline-flex;
38
- width:12px;
39
- height:12px;
40
- }
41
- @media (forced-colors: active){
42
35
  .iui-icons-small{
43
- fill:CanvasText;
44
- }
45
- }
46
- .iui-icons-small.iui-informational{
47
- fill:#008ae0;
48
- fill:var(--iui-icons-color-primary);
49
- }
50
- .iui-icons-small.iui-positive{
51
- fill:#53a21a;
52
- fill:var(--iui-icons-color-positive);
53
- }
54
- .iui-icons-small.iui-warning{
55
- fill:#f18d13;
56
- fill:var(--iui-icons-color-warning);
57
- }
58
- .iui-icons-small.iui-negative{
59
- fill:#d10a0a;
60
- fill:var(--iui-icons-color-negative);
61
- }
36
+ fill:rgba(0, 0, 0, 0.4);
37
+ fill:var(--iui-icons-color);
38
+ display:inline-flex;
39
+ width:12px;
40
+ height:12px;
41
+ }
42
+ @media (forced-colors: active){
43
+ .iui-icons-small{
44
+ fill:CanvasText;
45
+ }
46
+ }
47
+ .iui-icons-small.iui-informational{
48
+ fill:#008ae0;
49
+ fill:var(--iui-icons-color-primary);
50
+ }
51
+ .iui-icons-small.iui-positive{
52
+ fill:#53a21a;
53
+ fill:var(--iui-icons-color-positive);
54
+ }
55
+ .iui-icons-small.iui-warning{
56
+ fill:#f18d13;
57
+ fill:var(--iui-icons-color-warning);
58
+ }
59
+ .iui-icons-small.iui-negative{
60
+ fill:#d10a0a;
61
+ fill:var(--iui-icons-color-negative);
62
+ }
62
63
 
63
- .iui-icons-large{
64
- fill:rgba(0, 0, 0, 0.4);
65
- fill:var(--iui-icons-color);
66
- display:inline-flex;
67
- width:24px;
68
- height:24px;
69
- }
70
- @media (forced-colors: active){
71
64
  .iui-icons-large{
72
- fill:CanvasText;
73
- }
74
- }
75
- .iui-icons-large.iui-informational{
76
- fill:#008ae0;
77
- fill:var(--iui-icons-color-primary);
78
- }
79
- .iui-icons-large.iui-positive{
80
- fill:#53a21a;
81
- fill:var(--iui-icons-color-positive);
82
- }
83
- .iui-icons-large.iui-warning{
84
- fill:#f18d13;
85
- fill:var(--iui-icons-color-warning);
86
- }
87
- .iui-icons-large.iui-negative{
88
- fill:#d10a0a;
89
- fill:var(--iui-icons-color-negative);
90
- }
65
+ fill:rgba(0, 0, 0, 0.4);
66
+ fill:var(--iui-icons-color);
67
+ display:inline-flex;
68
+ width:24px;
69
+ height:24px;
70
+ }
71
+ @media (forced-colors: active){
72
+ .iui-icons-large{
73
+ fill:CanvasText;
74
+ }
75
+ }
76
+ .iui-icons-large.iui-informational{
77
+ fill:#008ae0;
78
+ fill:var(--iui-icons-color-primary);
79
+ }
80
+ .iui-icons-large.iui-positive{
81
+ fill:#53a21a;
82
+ fill:var(--iui-icons-color-positive);
83
+ }
84
+ .iui-icons-large.iui-warning{
85
+ fill:#f18d13;
86
+ fill:var(--iui-icons-color-warning);
87
+ }
88
+ .iui-icons-large.iui-negative{
89
+ fill:#d10a0a;
90
+ fill:var(--iui-icons-color-negative);
91
+ }
91
92
 
92
- .iui-icons-xl{
93
- fill:rgba(0, 0, 0, 0.4);
94
- fill:var(--iui-icons-color);
95
- display:inline-flex;
96
- width:32px;
97
- height:32px;
98
- }
99
- @media (forced-colors: active){
100
93
  .iui-icons-xl{
101
- fill:CanvasText;
102
- }
103
- }
104
- .iui-icons-xl.iui-informational{
105
- fill:#008ae0;
106
- fill:var(--iui-icons-color-primary);
107
- }
108
- .iui-icons-xl.iui-positive{
109
- fill:#53a21a;
110
- fill:var(--iui-icons-color-positive);
111
- }
112
- .iui-icons-xl.iui-warning{
113
- fill:#f18d13;
114
- fill:var(--iui-icons-color-warning);
115
- }
116
- .iui-icons-xl.iui-negative{
117
- fill:#d10a0a;
118
- fill:var(--iui-icons-color-negative);
119
- }
94
+ fill:rgba(0, 0, 0, 0.4);
95
+ fill:var(--iui-icons-color);
96
+ display:inline-flex;
97
+ width:32px;
98
+ height:32px;
99
+ }
100
+ @media (forced-colors: active){
101
+ .iui-icons-xl{
102
+ fill:CanvasText;
103
+ }
104
+ }
105
+ .iui-icons-xl.iui-informational{
106
+ fill:#008ae0;
107
+ fill:var(--iui-icons-color-primary);
108
+ }
109
+ .iui-icons-xl.iui-positive{
110
+ fill:#53a21a;
111
+ fill:var(--iui-icons-color-positive);
112
+ }
113
+ .iui-icons-xl.iui-warning{
114
+ fill:#f18d13;
115
+ fill:var(--iui-icons-color-warning);
116
+ }
117
+ .iui-icons-xl.iui-negative{
118
+ fill:#d10a0a;
119
+ fill:var(--iui-icons-color-negative);
120
+ }
120
121
 
121
- .iui-icons-xxl{
122
- fill:rgba(0, 0, 0, 0.4);
123
- fill:var(--iui-icons-color);
124
- display:inline-flex;
125
- width:48px;
126
- height:48px;
127
- }
128
- @media (forced-colors: active){
129
122
  .iui-icons-xxl{
130
- fill:CanvasText;
131
- }
132
- }
133
- .iui-icons-xxl.iui-informational{
134
- fill:#008ae0;
135
- fill:var(--iui-icons-color-primary);
136
- }
137
- .iui-icons-xxl.iui-positive{
138
- fill:#53a21a;
139
- fill:var(--iui-icons-color-positive);
140
- }
141
- .iui-icons-xxl.iui-warning{
142
- fill:#f18d13;
143
- fill:var(--iui-icons-color-warning);
144
- }
145
- .iui-icons-xxl.iui-negative{
146
- fill:#d10a0a;
147
- fill:var(--iui-icons-color-negative);
148
- }
123
+ fill:rgba(0, 0, 0, 0.4);
124
+ fill:var(--iui-icons-color);
125
+ display:inline-flex;
126
+ width:48px;
127
+ height:48px;
128
+ }
129
+ @media (forced-colors: active){
130
+ .iui-icons-xxl{
131
+ fill:CanvasText;
132
+ }
133
+ }
134
+ .iui-icons-xxl.iui-informational{
135
+ fill:#008ae0;
136
+ fill:var(--iui-icons-color-primary);
137
+ }
138
+ .iui-icons-xxl.iui-positive{
139
+ fill:#53a21a;
140
+ fill:var(--iui-icons-color-positive);
141
+ }
142
+ .iui-icons-xxl.iui-warning{
143
+ fill:#f18d13;
144
+ fill:var(--iui-icons-color-warning);
145
+ }
146
+ .iui-icons-xxl.iui-negative{
147
+ fill:#d10a0a;
148
+ fill:var(--iui-icons-color-negative);
149
+ }
149
150
 
150
- .iui-icons-3xl{
151
- fill:rgba(0, 0, 0, 0.4);
152
- fill:var(--iui-icons-color);
153
- display:inline-flex;
154
- width:64px;
155
- height:64px;
156
- }
157
- @media (forced-colors: active){
158
151
  .iui-icons-3xl{
159
- fill:CanvasText;
160
- }
161
- }
162
- .iui-icons-3xl.iui-informational{
163
- fill:#008ae0;
164
- fill:var(--iui-icons-color-primary);
165
- }
166
- .iui-icons-3xl.iui-positive{
167
- fill:#53a21a;
168
- fill:var(--iui-icons-color-positive);
169
- }
170
- .iui-icons-3xl.iui-warning{
171
- fill:#f18d13;
172
- fill:var(--iui-icons-color-warning);
173
- }
174
- .iui-icons-3xl.iui-negative{
175
- fill:#d10a0a;
176
- fill:var(--iui-icons-color-negative);
152
+ fill:rgba(0, 0, 0, 0.4);
153
+ fill:var(--iui-icons-color);
154
+ display:inline-flex;
155
+ width:64px;
156
+ height:64px;
157
+ }
158
+ @media (forced-colors: active){
159
+ .iui-icons-3xl{
160
+ fill:CanvasText;
161
+ }
162
+ }
163
+ .iui-icons-3xl.iui-informational{
164
+ fill:#008ae0;
165
+ fill:var(--iui-icons-color-primary);
166
+ }
167
+ .iui-icons-3xl.iui-positive{
168
+ fill:#53a21a;
169
+ fill:var(--iui-icons-color-positive);
170
+ }
171
+ .iui-icons-3xl.iui-warning{
172
+ fill:#f18d13;
173
+ fill:var(--iui-icons-color-warning);
174
+ }
175
+ .iui-icons-3xl.iui-negative{
176
+ fill:#d10a0a;
177
+ fill:var(--iui-icons-color-negative);
178
+ }
177
179
  }