@itwin/itwinui-css 0.33.1 → 0.35.2

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 (28) hide show
  1. package/css/alert.css +121 -99
  2. package/css/all.css +178 -126
  3. package/css/button.css +1 -0
  4. package/css/expandable-block.css +10 -1
  5. package/css/information-panel.css +20 -15
  6. package/css/side-navigation.css +9 -5
  7. package/css/slider.css +2 -1
  8. package/css/table.css +15 -5
  9. package/package.json +3 -2
  10. package/scss/alert/alert.scss +63 -9
  11. package/scss/alert/classes.scss +4 -14
  12. package/scss/alert/index.scss +0 -4
  13. package/scss/button/button.scss +1 -0
  14. package/scss/expandable-block/block.scss +18 -1
  15. package/scss/information-panel/classes.scss +4 -0
  16. package/scss/information-panel/information-panel.scss +24 -24
  17. package/scss/notification-marker/classes.scss +1 -1
  18. package/scss/side-navigation/side-navigation.scss +15 -6
  19. package/scss/slider/slider.scss +1 -0
  20. package/scss/style/mixins.scss +1 -1
  21. package/scss/table/condensed.scss +1 -1
  22. package/scss/table/extra-condensed.scss +1 -1
  23. package/scss/table/paginator.scss +7 -1
  24. package/scss/table/table.scss +8 -1
  25. package/scss/alert/informational.scss +0 -35
  26. package/scss/alert/negative.scss +0 -50
  27. package/scss/alert/positive.scss +0 -50
  28. package/scss/alert/warning.scss +0 -50
package/css/alert.css CHANGED
@@ -13,9 +13,11 @@
13
13
  align-items:center;
14
14
  border:1px solid #C7CCD1;
15
15
  color:rgba(0, 0, 0, 0.8);
16
+ background-color:#FFF;
16
17
  border:1px solid var(--iui-color-background-5);
17
- color:var(--iui-text-color); }
18
- .iui-alert > .iui-icon{
18
+ color:var(--iui-text-color);
19
+ background-color:var(--iui-color-background-1); }
20
+ .iui-alert-icon{
19
21
  fill:rgba(0, 0, 0, 0.4);
20
22
  fill:var(--iui-icons-color);
21
23
  display:inline-flex;
@@ -23,30 +25,45 @@
23
25
  height:16px;
24
26
  flex-shrink:0;
25
27
  margin-left:16px; }
26
- .iui-alert > .iui-icon.iui-informational{
28
+ .iui-alert-icon.iui-informational{
27
29
  fill:#008BE1;
28
30
  fill:var(--iui-icons-color-primary); }
29
- .iui-alert > .iui-icon.iui-positive{
31
+ .iui-alert-icon.iui-positive{
30
32
  fill:#53A21A;
31
33
  fill:var(--iui-icons-color-positive); }
32
- .iui-alert > .iui-icon.iui-warning{
34
+ .iui-alert-icon.iui-warning{
33
35
  fill:#F18B12;
34
36
  fill:var(--iui-icons-color-warning); }
35
- .iui-alert > .iui-icon.iui-negative{
37
+ .iui-alert-icon.iui-negative{
36
38
  fill:#D30A0A;
37
39
  fill:var(--iui-icons-color-negative); }
38
- .iui-alert > .iui-message{
40
+ .iui-alert-message{
39
41
  margin:11px 16px; }
40
- .iui-alert > .iui-message > a{
41
- margin-left:8px;
42
- text-decoration:underline;
43
- -webkit-user-select:none;
44
- -moz-user-select:none;
45
- -ms-user-select:none;
46
- user-select:none;
47
- white-space:nowrap; }
48
- .iui-alert > .iui-message > a:hover{
49
- text-decoration:none; }
42
+ .iui-alert-link{
43
+ cursor:pointer;
44
+ margin-left:8px;
45
+ text-decoration:underline;
46
+ -webkit-user-select:none;
47
+ -moz-user-select:none;
48
+ -ms-user-select:none;
49
+ user-select:none;
50
+ white-space:nowrap;
51
+ color:#008BE1;
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
+ .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); }
63
+ .iui-alert-link:hover{
64
+ text-decoration:none;
65
+ color:#006bae;
66
+ color:var(--iui-color-foreground-primary-overlay); }
50
67
  .iui-alert > .iui-button{
51
68
  margin-left:auto;
52
69
  margin-right:8px; }
@@ -56,130 +73,135 @@
56
73
  top:0;
57
74
  left:0;
58
75
  width:100vw; }
59
- .iui-alert.iui-informational{
60
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
61
- border-color:#008BE1;
62
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
63
- border-color:var(--iui-color-foreground-primary); }
64
- .iui-alert.iui-informational > .iui-icon,
65
- .iui-alert.iui-informational > .iui-icon > *{
66
- fill:#008BE1;
67
- fill:var(--iui-icons-color-primary); }
68
- .iui-alert.iui-informational > .iui-message > a{
69
- color:#008BE1;
70
- color:var(--iui-color-foreground-primary); }
71
- .iui-alert.iui-informational > .iui-message > a:focus{
72
- outline:0;
73
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
74
- box-shadow:var(--iui-focus-box-shadow); }
75
- .iui-alert.iui-informational > .iui-message > a:focus:not(:focus-visible){
76
- box-shadow:none; }
77
- .iui-alert.iui-informational > .iui-message > a:focus-visible{
78
- outline:0;
79
- box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
80
- box-shadow:var(--iui-focus-box-shadow); }
81
- .iui-alert.iui-informational > .iui-message > a:hover{
82
- color:#006bae;
83
- color:var(--iui-color-foreground-primary-overlay); }
84
76
  .iui-alert.iui-positive{
85
77
  background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(#FFF, #FFF);
86
78
  border-color:#53A21A;
87
79
  background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
88
80
  border-color:var(--iui-color-foreground-positive); }
89
- .iui-alert.iui-positive > .iui-icon,
90
- .iui-alert.iui-positive > .iui-icon > *{
81
+ .iui-alert.iui-positive .iui-alert-icon{
91
82
  fill:#53A21A;
92
83
  fill:var(--iui-icons-color-positive); }
93
- .iui-alert.iui-positive > .iui-message > a{
94
- color:#53A21A;
95
- color:var(--iui-color-foreground-positive); }
96
- .iui-alert.iui-positive > .iui-message > a:hover{
97
- color:#3c7613;
98
- color:var(--iui-color-foreground-positive-overlay); }
99
- .iui-alert.iui-positive > .iui-message::-moz-selection{
84
+ .iui-alert.iui-positive .iui-alert-message::-moz-selection{
100
85
  background-color:rgba(83, 162, 26, 0.4);
101
86
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
102
- .iui-alert.iui-positive > .iui-message::selection{
87
+ .iui-alert.iui-positive .iui-alert-message::selection{
103
88
  background-color:rgba(83, 162, 26, 0.4);
104
89
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
105
- .iui-alert.iui-positive > .iui-message > a:focus,
90
+ .iui-alert.iui-positive .iui-alert-link{
91
+ color:#53A21A;
92
+ color:var(--iui-color-foreground-positive); }
93
+ .iui-alert.iui-positive .iui-alert-link:hover{
94
+ color:#3c7613;
95
+ color:var(--iui-color-foreground-positive-overlay); }
96
+ .iui-alert.iui-positive .iui-alert-link:focus,
106
97
  .iui-alert.iui-positive > .iui-button:focus{
107
98
  outline:0;
108
99
  box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
109
100
  box-shadow:var(--iui-focus-positive-box-shadow); }
110
- .iui-alert.iui-positive > .iui-message > a:focus:not(:focus-visible),
101
+ .iui-alert.iui-positive .iui-alert-link:focus:not(:focus-visible),
111
102
  .iui-alert.iui-positive > .iui-button:focus:not(:focus-visible){
112
103
  box-shadow:none; }
113
- .iui-alert.iui-positive > .iui-message > a:focus-visible,
104
+ .iui-alert.iui-positive .iui-alert-link:focus-visible,
114
105
  .iui-alert.iui-positive > .iui-button:focus-visible{
115
106
  outline:0;
116
107
  box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
117
108
  box-shadow:var(--iui-focus-positive-box-shadow); }
109
+ .iui-alert.iui-negative{
110
+ background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
111
+ border-color:#D30A0A;
112
+ background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
113
+ border-color:var(--iui-color-foreground-negative); }
114
+ .iui-alert.iui-negative .iui-alert-icon{
115
+ fill:#D30A0A;
116
+ fill:var(--iui-icons-color-negative); }
117
+ .iui-alert.iui-negative .iui-alert-message::-moz-selection{
118
+ background-color:rgba(211, 10, 10, 0.4);
119
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
120
+ .iui-alert.iui-negative .iui-alert-message::selection{
121
+ background-color:rgba(211, 10, 10, 0.4);
122
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
123
+ .iui-alert.iui-negative .iui-alert-link{
124
+ color:#D30A0A;
125
+ color:var(--iui-color-foreground-negative); }
126
+ .iui-alert.iui-negative .iui-alert-link:hover{
127
+ color:#a20808;
128
+ 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); }
118
142
  .iui-alert.iui-warning{
119
143
  background:linear-gradient(rgba(241, 139, 18, 0.1), rgba(241, 139, 18, 0.1)), linear-gradient(#FFF, #FFF);
120
144
  border-color:#F18B12;
121
145
  background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
122
146
  border-color:var(--iui-color-foreground-warning); }
123
- .iui-alert.iui-warning > .iui-icon,
124
- .iui-alert.iui-warning > .iui-icon > *{
147
+ .iui-alert.iui-warning .iui-alert-icon{
125
148
  fill:#F18B12;
126
149
  fill:var(--iui-icons-color-warning); }
127
- .iui-alert.iui-warning > .iui-message > a{
128
- color:#F18B12;
129
- color:var(--iui-color-foreground-warning); }
130
- .iui-alert.iui-warning > .iui-message > a:hover{
131
- color:#c4700c;
132
- color:var(--iui-color-foreground-warning-overlay); }
133
- .iui-alert.iui-warning > .iui-message::-moz-selection{
150
+ .iui-alert.iui-warning .iui-alert-message::-moz-selection{
134
151
  background-color:rgba(241, 139, 18, 0.4);
135
152
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
136
- .iui-alert.iui-warning > .iui-message::selection{
153
+ .iui-alert.iui-warning .iui-alert-message::selection{
137
154
  background-color:rgba(241, 139, 18, 0.4);
138
155
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
139
- .iui-alert.iui-warning > .iui-message > a:focus,
156
+ .iui-alert.iui-warning .iui-alert-link{
157
+ color:#F18B12;
158
+ color:var(--iui-color-foreground-warning); }
159
+ .iui-alert.iui-warning .iui-alert-link:hover{
160
+ color:#c4700c;
161
+ color:var(--iui-color-foreground-warning-overlay); }
162
+ .iui-alert.iui-warning .iui-alert-link:focus,
140
163
  .iui-alert.iui-warning > .iui-button:focus{
141
164
  outline:0;
142
165
  box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
143
166
  box-shadow:var(--iui-focus-warning-box-shadow); }
144
- .iui-alert.iui-warning > .iui-message > a:focus:not(:focus-visible),
167
+ .iui-alert.iui-warning .iui-alert-link:focus:not(:focus-visible),
145
168
  .iui-alert.iui-warning > .iui-button:focus:not(:focus-visible){
146
169
  box-shadow:none; }
147
- .iui-alert.iui-warning > .iui-message > a:focus-visible,
170
+ .iui-alert.iui-warning .iui-alert-link:focus-visible,
148
171
  .iui-alert.iui-warning > .iui-button:focus-visible{
149
172
  outline:0;
150
173
  box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
151
174
  box-shadow:var(--iui-focus-warning-box-shadow); }
152
- .iui-alert.iui-negative{
153
- background:linear-gradient(rgba(211, 10, 10, 0.1), rgba(211, 10, 10, 0.1)), linear-gradient(#FFF, #FFF);
154
- border-color:#D30A0A;
155
- background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
156
- border-color:var(--iui-color-foreground-negative); }
157
- .iui-alert.iui-negative > .iui-icon,
158
- .iui-alert.iui-negative > .iui-icon > *{
159
- fill:#D30A0A;
160
- fill:var(--iui-icons-color-negative); }
161
- .iui-alert.iui-negative > .iui-message > a{
162
- color:#D30A0A;
163
- color:var(--iui-color-foreground-negative); }
164
- .iui-alert.iui-negative > .iui-message > a:hover{
165
- color:#a20808;
166
- color:var(--iui-color-foreground-negative-overlay); }
167
- .iui-alert.iui-negative > .iui-message::-moz-selection{
168
- background-color:rgba(211, 10, 10, 0.4);
169
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
170
- .iui-alert.iui-negative > .iui-message::selection{
171
- background-color:rgba(211, 10, 10, 0.4);
172
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
173
- .iui-alert.iui-negative > .iui-message > a:focus,
174
- .iui-alert.iui-negative > .iui-button:focus{
175
+ .iui-alert.iui-informational{
176
+ background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
177
+ border-color:#008BE1;
178
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
179
+ border-color:var(--iui-color-foreground-primary); }
180
+ .iui-alert.iui-informational .iui-alert-icon{
181
+ fill:#008BE1;
182
+ fill:var(--iui-icons-color-primary); }
183
+ .iui-alert.iui-informational .iui-alert-message::-moz-selection{
184
+ background-color:rgba(0, 139, 225, 0.4);
185
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
186
+ .iui-alert.iui-informational .iui-alert-message::selection{
187
+ background-color:rgba(0, 139, 225, 0.4);
188
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4)); }
189
+ .iui-alert.iui-informational .iui-alert-link{
190
+ color:#008BE1;
191
+ color:var(--iui-color-foreground-primary); }
192
+ .iui-alert.iui-informational .iui-alert-link:hover{
193
+ color:#006bae;
194
+ color:var(--iui-color-foreground-primary-overlay); }
195
+ .iui-alert.iui-informational .iui-alert-link:focus,
196
+ .iui-alert.iui-informational > .iui-button:focus{
175
197
  outline:0;
176
- box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
177
- box-shadow:var(--iui-focus-negative-box-shadow); }
178
- .iui-alert.iui-negative > .iui-message > a:focus:not(:focus-visible),
179
- .iui-alert.iui-negative > .iui-button:focus:not(:focus-visible){
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){
180
202
  box-shadow:none; }
181
- .iui-alert.iui-negative > .iui-message > a:focus-visible,
182
- .iui-alert.iui-negative > .iui-button:focus-visible{
203
+ .iui-alert.iui-informational .iui-alert-link:focus-visible,
204
+ .iui-alert.iui-informational > .iui-button:focus-visible{
183
205
  outline:0;
184
- box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
185
- box-shadow:var(--iui-focus-negative-box-shadow); }
206
+ box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
207
+ box-shadow:var(--iui-focus-box-shadow); }