@itwin/itwinui-css 0.61.0 → 1.0.0-dev.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 (194) hide show
  1. package/README.md +1 -4
  2. package/css/alert.css +272 -138
  3. package/css/all.css +4070 -5172
  4. package/css/anchor.css +0 -4
  5. package/css/{user-icon.css → avatar.css} +51 -71
  6. package/css/badge.css +1 -1
  7. package/css/blockquote.css +0 -3
  8. package/css/breadcrumbs.css +59 -132
  9. package/css/button.css +255 -340
  10. package/css/carousel.css +6 -14
  11. package/css/checkbox.css +149 -0
  12. package/css/code.css +2 -10
  13. package/css/color-picker.css +5 -43
  14. package/css/date-picker.css +0 -59
  15. package/css/dialog.css +0 -5
  16. package/css/expandable-block.css +0 -31
  17. package/css/fieldset.css +0 -5
  18. package/css/file-upload.css +0 -15
  19. package/css/footer.css +0 -8
  20. package/css/global.css +8 -63
  21. package/css/header.css +312 -398
  22. package/css/icon.css +0 -30
  23. package/css/information-panel.css +1 -15
  24. package/css/input.css +162 -0
  25. package/css/keyboard.css +1 -5
  26. package/css/location-marker.css +0 -11
  27. package/css/menu.css +0 -16
  28. package/css/progress-indicator.css +1 -93
  29. package/css/radio-tile.css +38 -65
  30. package/css/radio.css +156 -0
  31. package/css/select.css +230 -0
  32. package/css/side-navigation.css +5 -20
  33. package/css/skip-to-content.css +0 -3
  34. package/css/slider.css +2 -14
  35. package/css/stepper.css +141 -0
  36. package/css/surface.css +0 -1
  37. package/css/table.css +251 -338
  38. package/css/tabs.css +6 -49
  39. package/css/tag.css +3 -21
  40. package/css/text.css +0 -2
  41. package/css/textarea.css +96 -0
  42. package/css/tile.css +169 -155
  43. package/css/time-picker.css +0 -12
  44. package/css/{toast-notification.css → toast.css} +1 -43
  45. package/css/toggle-switch.css +13 -60
  46. package/css/tooltip.css +0 -3
  47. package/css/tree.css +0 -14
  48. package/css/utils.css +609 -0
  49. package/css/workflow-diagram.css +67 -0
  50. package/package.json +11 -7
  51. package/scss/alert/alert.scss +50 -44
  52. package/scss/alert/classes.scss +24 -4
  53. package/scss/anchor/anchor.scss +76 -1
  54. package/scss/{user-icon/sizes.scss → avatar/avatar-sizes.scss} +6 -5
  55. package/scss/{user-icon/user-icon.scss → avatar/avatar.scss} +35 -70
  56. package/scss/avatar/classes.scss +27 -0
  57. package/scss/{user-icon → avatar}/index.scss +1 -2
  58. package/scss/badge/badge.scss +4 -2
  59. package/scss/blockquote/blockquote.scss +4 -9
  60. package/scss/breadcrumbs/breadcrumbs.scss +13 -18
  61. package/scss/button/borderless.scss +20 -32
  62. package/scss/button/button-group.scss +15 -7
  63. package/scss/button/button.scss +64 -42
  64. package/scss/button/classes.scss +47 -37
  65. package/scss/button/default.scss +33 -41
  66. package/scss/button/idea.scss +4 -2
  67. package/scss/button/index.scss +3 -6
  68. package/scss/button/split-button.scss +45 -0
  69. package/scss/button/variant.scss +44 -0
  70. package/scss/carousel/carousel.scss +12 -23
  71. package/scss/{inputs → checkbox}/checkbox.scss +50 -2
  72. package/scss/checkbox/classes.scss +7 -0
  73. package/scss/checkbox/index.scss +3 -0
  74. package/scss/classes.scss +10 -6
  75. package/scss/code/code.scss +3 -5
  76. package/scss/code/codeblock.scss +7 -21
  77. package/scss/color-picker/color-picker.scss +32 -61
  78. package/scss/date-picker/date-picker.scss +21 -55
  79. package/scss/dialog/dialog.scss +1 -6
  80. package/scss/expandable-block/block.scss +22 -50
  81. package/scss/fieldset/fieldset.scss +6 -12
  82. package/scss/file-upload/file-upload.scss +13 -23
  83. package/scss/footer/footer.scss +5 -15
  84. package/scss/header/classes.scss +70 -2
  85. package/scss/header/header-buttons.scss +316 -0
  86. package/scss/header/header.scss +40 -408
  87. package/scss/header/index.scss +1 -0
  88. package/scss/icon/{mixins.scss → icon.scss} +5 -15
  89. package/scss/icon/index.scss +1 -2
  90. package/scss/index.scss +10 -6
  91. package/scss/information-panel/information-panel.scss +8 -26
  92. package/scss/input/classes.scss +15 -0
  93. package/scss/input/index.scss +4 -0
  94. package/scss/{inputs → input}/input-with-icon.scss +1 -0
  95. package/scss/{inputs → input}/input.scss +15 -25
  96. package/scss/keyboard/keyboard.scss +5 -9
  97. package/scss/location-marker/data-rich.scss +5 -14
  98. package/scss/location-marker/default.scss +1 -3
  99. package/scss/location-marker/location-marker.scss +1 -3
  100. package/scss/location-marker/me.scss +7 -14
  101. package/scss/menu/menu.scss +16 -36
  102. package/scss/non-ideal-state/non-ideal-state.scss +2 -1
  103. package/scss/progress-indicator/classes.scss +0 -4
  104. package/scss/progress-indicator/linear.scss +9 -27
  105. package/scss/progress-indicator/overlay.scss +4 -10
  106. package/scss/progress-indicator/radial.scss +10 -98
  107. package/scss/radio/classes.scss +7 -0
  108. package/scss/radio/index.scss +3 -0
  109. package/scss/{inputs → radio}/radio.scss +1 -1
  110. package/scss/radio-tile/radio-tile.scss +41 -83
  111. package/scss/select/classes.scss +27 -0
  112. package/scss/select/index.scss +3 -0
  113. package/scss/{inputs → select}/select.scss +7 -15
  114. package/scss/side-navigation/side-navigation.scss +26 -34
  115. package/scss/skip-to-content/skip-to-content.scss +2 -3
  116. package/scss/slider/slider.scss +12 -23
  117. package/scss/stepper/classes.scss +32 -0
  118. package/scss/stepper/index.scss +3 -0
  119. package/scss/stepper/stepper.scss +151 -0
  120. package/scss/style/{variables.scss → global-variables.scss} +3 -1
  121. package/scss/style/global.scss +9 -10
  122. package/scss/{icon/variables.scss → style/icon-sizes.scss} +1 -1
  123. package/scss/style/index.scss +6 -6
  124. package/scss/style/theme.scss +0 -39
  125. package/scss/style/typography.scss +5 -4
  126. package/scss/surface/surface.scss +0 -1
  127. package/scss/table/classes.scss +24 -23
  128. package/scss/table/column-filter.scss +2 -5
  129. package/scss/table/index.scss +1 -2
  130. package/scss/table/paginator.scss +22 -30
  131. package/scss/table/sizes.scss +31 -0
  132. package/scss/table/{variables.scss → table-densities.scss} +2 -1
  133. package/scss/table/table.scss +156 -228
  134. package/scss/tabs/borderless.scss +6 -18
  135. package/scss/tabs/default.scss +8 -21
  136. package/scss/tabs/pill.scss +4 -14
  137. package/scss/tabs/tabs.scss +16 -44
  138. package/scss/tag/classes.scss +1 -0
  139. package/scss/tag/tag.scss +9 -19
  140. package/scss/text/mixins.scss +1 -0
  141. package/scss/text/muted.scss +2 -4
  142. package/scss/text/skeleton.scss +8 -11
  143. package/scss/textarea/classes.scss +7 -0
  144. package/scss/textarea/index.scss +3 -0
  145. package/scss/{inputs → textarea}/textarea.scss +2 -1
  146. package/scss/tile/classes.scss +14 -2
  147. package/scss/tile/tile.scss +99 -80
  148. package/scss/time-picker/time-picker.scss +8 -17
  149. package/scss/{toast-notification → toast}/categories.scss +3 -7
  150. package/scss/{toast-notification → toast}/classes.scss +0 -0
  151. package/scss/{toast-notification → toast}/index.scss +0 -0
  152. package/scss/{toast-notification → toast}/toast.scss +7 -16
  153. package/scss/toggle-switch/toggle-switch.scss +11 -30
  154. package/scss/tooltip/tooltip.scss +4 -5
  155. package/scss/tree/tree.scss +10 -22
  156. package/scss/utils/classes.scss +6 -0
  157. package/scss/utils/index.scss +6 -0
  158. package/scss/{inputs → utils/input-container}/classes.scss +0 -48
  159. package/scss/utils/input-container/index.scss +3 -0
  160. package/scss/{inputs/labeled-inputs.scss → utils/input-container/input-container.scss} +16 -113
  161. package/scss/{style → utils}/mixins.scss +26 -43
  162. package/scss/{notification-marker → utils/notification-marker}/classes.scss +0 -0
  163. package/scss/{notification-marker → utils/notification-marker}/index.scss +0 -0
  164. package/scss/{notification-marker → utils/notification-marker}/notification-marker.scss +11 -19
  165. package/scss/{popover → utils/popover}/classes.scss +0 -0
  166. package/scss/{popover → utils/popover}/index.scss +0 -0
  167. package/scss/{popover → utils/popover}/popover.scss +0 -1
  168. package/scss/workflow-diagram/classes.scss +15 -0
  169. package/scss/workflow-diagram/index.scss +3 -0
  170. package/scss/workflow-diagram/workflow-diagram.scss +64 -0
  171. package/src/index.scss +10 -6
  172. package/css/inputs.css +0 -1339
  173. package/css/notification-marker.css +0 -293
  174. package/css/popover.css +0 -14
  175. package/css/reset-global-styles.css +0 -50
  176. package/css/wizard.css +0 -190
  177. package/scss/button/button-icon.scss +0 -12
  178. package/scss/button/cta.scss +0 -31
  179. package/scss/button/disabled.scss +0 -13
  180. package/scss/button/high-visibility.scss +0 -31
  181. package/scss/button/split-menu.scss +0 -66
  182. package/scss/inputs/checkbox-radio.scss +0 -73
  183. package/scss/inputs/index.scss +0 -10
  184. package/scss/reset-global-styles.scss +0 -33
  185. package/scss/style/anchor.scss +0 -82
  186. package/scss/style/ripple.scss +0 -18
  187. package/scss/table/condensed.scss +0 -15
  188. package/scss/table/extra-condensed.scss +0 -19
  189. package/scss/user-icon/classes.scss +0 -27
  190. package/scss/wizard/classes.scss +0 -27
  191. package/scss/wizard/index.scss +0 -5
  192. package/scss/wizard/long.scss +0 -19
  193. package/scss/wizard/wizard.scss +0 -160
  194. package/scss/wizard/workflow.scss +0 -43
package/css/tile.css CHANGED
@@ -13,7 +13,6 @@
13
13
  background-color:var(--iui-surface-background-color);
14
14
  border-radius:var(--iui-surface-border-radius);
15
15
  box-shadow:var(--iui-surface-elevation);
16
- box-sizing:border-box;
17
16
  color:var(--iui-text-color);
18
17
  display:inline-flex;
19
18
  flex-direction:column;
@@ -46,8 +45,6 @@
46
45
  font-weight:600;
47
46
  }
48
47
  .iui-tile.iui-selected{
49
- outline:solid 2px #008ae0;
50
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
51
48
  outline:solid 2px var(--iui-color-foreground-primary);
52
49
  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));
53
50
  }
@@ -90,7 +87,6 @@
90
87
  height:110px;
91
88
  flex:1;
92
89
  border-bottom:none;
93
- border-right:1px solid #c7ccd1;
94
90
  border-right:1px solid var(--iui-color-background-border);
95
91
  }
96
92
  .iui-tile.iui-folder .iui-tile-content{
@@ -102,103 +98,191 @@
102
98
  margin-bottom:0;
103
99
  -webkit-line-clamp:2;
104
100
  }
101
+ .iui-tile.iui-progress{
102
+ cursor:progress;
103
+ font-style:italic;
104
+ }
105
+ .iui-tile[aria-disabled=true]{
106
+ cursor:not-allowed;
107
+ }
108
+ .iui-tile[aria-disabled=true] .iui-tile-name-label{
109
+ color:var(--iui-text-color-muted);
110
+ }
111
+ .iui-tile[aria-disabled=true] .iui-thumbnail-icon,
112
+ .iui-tile[aria-disabled=true] .iui-tile-thumbnail-picture{
113
+ filter:grayscale(100%);
114
+ }
115
+ .iui-tile[aria-disabled=true]:hover .iui-tile-thumbnail-picture, .iui-tile[aria-disabled=true]:focus-within .iui-tile-thumbnail-picture{
116
+ transform:none;
117
+ }
118
+ .iui-tile[aria-disabled=true] .iui-tile-more-options{
119
+ display:none;
120
+ }
121
+ .iui-tile.iui-positive::-moz-selection, .iui-tile.iui-positive *::-moz-selection{
122
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
123
+ }
124
+ .iui-tile.iui-positive::selection,
125
+ .iui-tile.iui-positive *::selection{
126
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
127
+ }
128
+ .iui-tile.iui-positive .iui-tile-thumbnail{
129
+ box-shadow:0 4px 0 var(--iui-color-foreground-positive);
130
+ }
131
+ .iui-tile.iui-positive.iui-folder .iui-tile-thumbnail{
132
+ box-shadow:4px 0 0 var(--iui-color-foreground-positive);
133
+ }
134
+
135
+ .iui-tile.iui-positive .iui-tile-name-label{
136
+ color:var(--iui-color-foreground-positive);
137
+ }
138
+ .iui-tile.iui-positive .iui-tile-status-icon{
139
+ fill:var(--iui-color-foreground-positive);
140
+ }
141
+ .iui-tile.iui-warning::-moz-selection, .iui-tile.iui-warning *::-moz-selection{
142
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
143
+ }
144
+ .iui-tile.iui-warning::selection,
145
+ .iui-tile.iui-warning *::selection{
146
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
147
+ }
148
+ .iui-tile.iui-warning .iui-tile-thumbnail{
149
+ box-shadow:0 4px 0 var(--iui-color-foreground-warning);
150
+ }
151
+ .iui-tile.iui-warning.iui-folder .iui-tile-thumbnail{
152
+ box-shadow:4px 0 0 var(--iui-color-foreground-warning);
153
+ }
154
+
155
+ .iui-tile.iui-warning .iui-tile-name-label{
156
+ color:var(--iui-color-foreground-warning);
157
+ }
158
+ .iui-tile.iui-warning .iui-tile-status-icon{
159
+ fill:var(--iui-color-foreground-warning);
160
+ }
161
+ .iui-tile.iui-negative::-moz-selection, .iui-tile.iui-negative *::-moz-selection{
162
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
163
+ }
164
+ .iui-tile.iui-negative::selection,
165
+ .iui-tile.iui-negative *::selection{
166
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
167
+ }
168
+ .iui-tile.iui-negative .iui-tile-thumbnail{
169
+ box-shadow:0 4px 0 var(--iui-color-foreground-negative);
170
+ }
171
+ .iui-tile.iui-negative.iui-folder .iui-tile-thumbnail{
172
+ box-shadow:4px 0 0 var(--iui-color-foreground-negative);
173
+ }
174
+
175
+ .iui-tile.iui-negative .iui-tile-name-label{
176
+ color:var(--iui-color-foreground-negative);
177
+ }
178
+ .iui-tile.iui-negative .iui-tile-status-icon{
179
+ fill:var(--iui-color-foreground-negative);
180
+ }
105
181
 
106
182
  .iui-tile-thumbnail-type-indicator{
107
- border-color:transparent;
108
- background-color:transparent;
109
- padding:0 8px;
110
- height:38px;
111
- gap:8px;
112
- padding:0 2px;
113
- height:27px;
114
- gap:4px;
183
+ --_iui-button-text-color:var(--iui-text-color);
184
+ --_iui-button-background-color:transparent;
185
+ --_iui-button-border-color:transparent;
186
+ --_iui-button-icon-margin-x:3px;
187
+ --_iui-button-gap:8px;
188
+ --_iui-button-height:38px;
189
+ --_iui-button-padding-inline:16px;
190
+ --_iui-button-padding-inline:8px;
191
+ --_iui-button-gap:4px;
192
+ --_iui-button-height:27px;
193
+ --_iui-button-padding-inline:8px;
194
+ --_iui-button-padding-inline:2px;
115
195
  position:absolute;
116
196
  border-radius:50%;
117
197
  top:6px;
118
198
  left:8px;
119
199
  }
120
- .iui-tile-thumbnail-type-indicator > .iui-button-icon:only-child{
121
- margin-left:3px;
122
- margin-right:3px;
200
+ .iui-tile-thumbnail-type-indicator:where(:hover, :active){
201
+ --_iui-button-text-color:var(--iui-color-foreground-body);
202
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
123
203
  }
124
- .iui-tile-thumbnail-type-indicator:hover{
125
- background-color:rgba(0, 0, 0, 0.1);
126
- border-color:transparent;
127
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
128
- border-color:transparent;
204
+ .iui-tile-thumbnail-type-indicator:where(:focus){
205
+ outline-offset:-1px;
206
+ outline-width:1px;
129
207
  }
130
- .iui-tile-thumbnail-type-indicator.iui-active{
131
- background-color:rgba(0, 138, 224, 0.1);
132
- color:#008ae0;
133
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
134
- color:var(--iui-color-foreground-primary);
135
- border-color:transparent;
208
+ .iui-tile-thumbnail-type-indicator:where([disabled], :disabled, [aria-disabled="true"]){
209
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
210
+ --_iui-button-background-color:transparent;
211
+ --_iui-button-border-color:transparent;
136
212
  }
137
- .iui-tile-thumbnail-type-indicator[disabled], .iui-tile-thumbnail-type-indicator:disabled{
138
- cursor:not-allowed;
139
- background:#edeff2;
140
- border-color:#edeff2;
141
- color:rgba(0, 0, 0, 0.2);
142
- background:var(--iui-color-background-disabled);
143
- border-color:var(--iui-color-background-disabled);
144
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
145
- background-color:transparent;
146
- border-color:transparent;
147
- background-color:transparent;
148
- border-color:transparent;
149
- }
150
- .iui-tile-thumbnail-type-indicator[disabled].iui-active, .iui-tile-thumbnail-type-indicator:disabled.iui-active{
151
- background-color:rgba(0, 0, 0, 0.05);
152
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
213
+ .iui-tile-thumbnail-type-indicator[data-iui-active=true]{
214
+ --_iui-button-text-color:var(--iui-color-foreground-primary);
215
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
216
+ }
217
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
218
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
219
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
220
+ }
221
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
222
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator{
223
+ background-color:rgba(0, 0, 0, var(--iui-opacity-5));
224
+ -webkit-backdrop-filter:blur(5px);
225
+ backdrop-filter:blur(5px);
226
+ }
227
+ }
228
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon{
229
+ filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
230
+ }
231
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator[data-iui-active=true]:active{
232
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
153
233
  }
154
234
 
155
235
  .iui-tile-thumbnail-quick-action{
156
- border-color:transparent;
157
- background-color:transparent;
158
- padding:0 8px;
159
- height:38px;
160
- gap:8px;
161
- padding:0 2px;
162
- height:27px;
163
- gap:4px;
236
+ --_iui-button-text-color:var(--iui-text-color);
237
+ --_iui-button-background-color:transparent;
238
+ --_iui-button-border-color:transparent;
239
+ --_iui-button-icon-margin-x:3px;
240
+ --_iui-button-gap:8px;
241
+ --_iui-button-height:38px;
242
+ --_iui-button-padding-inline:16px;
243
+ --_iui-button-padding-inline:8px;
244
+ --_iui-button-gap:4px;
245
+ --_iui-button-height:27px;
246
+ --_iui-button-padding-inline:8px;
247
+ --_iui-button-padding-inline:2px;
164
248
  position:absolute;
165
249
  border-radius:50%;
166
250
  top:6px;
167
251
  right:8px;
168
252
  }
169
- .iui-tile-thumbnail-quick-action > .iui-button-icon:only-child{
170
- margin-left:3px;
171
- margin-right:3px;
253
+ .iui-tile-thumbnail-quick-action:where(:hover, :active){
254
+ --_iui-button-text-color:var(--iui-color-foreground-body);
255
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
172
256
  }
173
- .iui-tile-thumbnail-quick-action:hover{
174
- background-color:rgba(0, 0, 0, 0.1);
175
- border-color:transparent;
176
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
177
- border-color:transparent;
257
+ .iui-tile-thumbnail-quick-action:where(:focus){
258
+ outline-offset:-1px;
259
+ outline-width:1px;
178
260
  }
179
- .iui-tile-thumbnail-quick-action.iui-active{
180
- background-color:rgba(0, 138, 224, 0.1);
181
- color:#008ae0;
182
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
183
- color:var(--iui-color-foreground-primary);
184
- border-color:transparent;
261
+ .iui-tile-thumbnail-quick-action:where([disabled], :disabled, [aria-disabled="true"]){
262
+ --_iui-button-text-color:var(--iui-text-color-placeholder);
263
+ --_iui-button-background-color:transparent;
264
+ --_iui-button-border-color:transparent;
185
265
  }
186
- .iui-tile-thumbnail-quick-action[disabled], .iui-tile-thumbnail-quick-action:disabled{
187
- cursor:not-allowed;
188
- background:#edeff2;
189
- border-color:#edeff2;
190
- color:rgba(0, 0, 0, 0.2);
191
- background:var(--iui-color-background-disabled);
192
- border-color:var(--iui-color-background-disabled);
193
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
194
- background-color:transparent;
195
- border-color:transparent;
196
- background-color:transparent;
197
- border-color:transparent;
198
- }
199
- .iui-tile-thumbnail-quick-action[disabled].iui-active, .iui-tile-thumbnail-quick-action:disabled.iui-active{
200
- background-color:rgba(0, 0, 0, 0.05);
201
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
266
+ .iui-tile-thumbnail-quick-action[data-iui-active=true]{
267
+ --_iui-button-text-color:var(--iui-color-foreground-primary);
268
+ --_iui-button-background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
269
+ }
270
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
271
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
272
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
273
+ }
274
+ @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
275
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
276
+ background-color:rgba(0, 0, 0, var(--iui-opacity-5));
277
+ -webkit-backdrop-filter:blur(5px);
278
+ backdrop-filter:blur(5px);
279
+ }
280
+ }
281
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
282
+ filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
283
+ }
284
+ .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action[data-iui-active=true]:active{
285
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
202
286
  }
203
287
 
204
288
  .iui-tile-thumbnail-badge-container{
@@ -210,9 +294,7 @@
210
294
  display:flex;
211
295
  justify-content:flex-end;
212
296
  overflow:hidden;
213
- }
214
- .iui-tile-thumbnail-badge-container > .iui-badge:not(:last-child){
215
- margin-right:4px;
297
+ gap:4px;
216
298
  }
217
299
 
218
300
  .iui-tile-buttons{
@@ -238,17 +320,15 @@
238
320
  border-radius:0;
239
321
  }
240
322
  .iui-tile-buttons > .iui-button, .iui-tile-buttons > .iui-button:hover{
241
- border-top:1px solid #c7ccd1;
242
- border-color:#c7ccd1;
243
323
  border-top:1px solid var(--iui-color-background-border);
244
324
  border-color:var(--iui-color-background-border);
245
325
  }
246
326
  .iui-tile-buttons > button:not(:last-child){
247
- border-right:1px solid #c7ccd1;
248
327
  border-right:1px solid var(--iui-color-background-border);
249
328
  }
250
329
 
251
330
  .iui-tile-thumbnail{
331
+ box-sizing:content-box;
252
332
  width:100%;
253
333
  height:154px;
254
334
  flex-shrink:0;
@@ -257,32 +337,25 @@
257
337
  display:flex;
258
338
  align-items:center;
259
339
  justify-content:center;
260
- background-color:#f2f2f2;
261
- border-bottom:1px solid #c7ccd1;
262
340
  background-color:var(--iui-color-background-1-overlay);
263
341
  border-bottom:1px solid var(--iui-color-background-border);
264
342
  }
265
343
  .iui-tile-thumbnail .iui-thumbnail-icon{
266
- fill:rgba(0, 0, 0, 0.4);
267
344
  fill:var(--iui-icons-color);
268
345
  display:inline-flex;
269
346
  width:64px;
270
347
  height:64px;
271
348
  }
272
349
  .iui-tile-thumbnail .iui-thumbnail-icon.iui-informational{
273
- fill:#008ae0;
274
350
  fill:var(--iui-icons-color-primary);
275
351
  }
276
352
  .iui-tile-thumbnail .iui-thumbnail-icon.iui-positive{
277
- fill:#53a21a;
278
353
  fill:var(--iui-icons-color-positive);
279
354
  }
280
355
  .iui-tile-thumbnail .iui-thumbnail-icon.iui-warning{
281
- fill:#f18d13;
282
356
  fill:var(--iui-icons-color-warning);
283
357
  }
284
358
  .iui-tile-thumbnail .iui-thumbnail-icon.iui-negative{
285
- fill:#d10a0a;
286
359
  fill:var(--iui-icons-color-negative);
287
360
  }
288
361
 
@@ -304,10 +377,7 @@ div.iui-tile-thumbnail-picture{
304
377
  }
305
378
 
306
379
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon{
307
- z-index:1;
308
380
  cursor:pointer;
309
- fill:rgba(255, 255, 255, 0.6);
310
- filter:drop-shadow(0 2px 1px rgba(0, 1, 5, 0.2));
311
381
  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-3));
312
382
  filter:drop-shadow(0 2px 1px rgba(0, 1, 5, var(--iui-opacity-5)));
313
383
  }
@@ -317,45 +387,8 @@ div.iui-tile-thumbnail-picture{
317
387
  }
318
388
  }
319
389
  .iui-tile-thumbnail-picture ~ .iui-thumbnail-icon:hover{
320
- fill:rgba(255, 255, 255, 0.8);
321
390
  fill:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-2));
322
391
  }
323
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
324
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
325
- background-color:rgba(0, 0, 0, 0.4);
326
- background-color:rgba(0, 0, 0, var(--iui-opacity-4));
327
- }
328
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
329
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator,
330
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action{
331
- background-color:rgba(0, 0, 0, var(--iui-opacity-5));
332
- -webkit-backdrop-filter:blur(5px);
333
- backdrop-filter:blur(5px);
334
- }
335
- }
336
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator > .iui-button-icon,
337
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action > .iui-button-icon{
338
- fill:white;
339
- filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
340
- fill:var(--iui-color-foreground-accessory);
341
- filter:drop-shadow(0 2px 1px rgba(0, 0, 0, var(--iui-opacity-5)));
342
- }
343
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active,
344
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover,
345
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled,
346
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover,
347
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active{
348
- background-color:rgba(0, 0, 0, 0.4);
349
- background-color:rgba(0, 0, 0, var(--iui-opacity-4));
350
- }
351
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:enabled:hover .iui-button-icon, .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-type-indicator.iui-active:active .iui-button-icon,
352
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action:hover .iui-button-icon,
353
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled .iui-button-icon,
354
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:enabled:hover .iui-button-icon,
355
- .iui-tile-thumbnail-picture ~ .iui-tile-thumbnail-quick-action.iui-active:active .iui-button-icon{
356
- fill:white;
357
- fill:var(--iui-color-foreground-accessory);
358
- }
359
392
 
360
393
  .iui-tile-content{
361
394
  padding:11px 12px;
@@ -374,11 +407,9 @@ div.iui-tile-thumbnail-picture{
374
407
  -moz-user-select:all;
375
408
  user-select:all;
376
409
  margin-bottom:5.5px;
377
- color:rgba(0, 0, 0, 0.8);
378
410
  color:var(--iui-text-color);
379
411
  }
380
412
  .iui-tile-content .iui-tile-status-icon{
381
- fill:rgba(0, 0, 0, 0.4);
382
413
  fill:var(--iui-icons-color);
383
414
  display:inline-flex;
384
415
  width:16px;
@@ -387,19 +418,15 @@ div.iui-tile-thumbnail-picture{
387
418
  flex-shrink:0;
388
419
  }
389
420
  .iui-tile-content .iui-tile-status-icon.iui-informational{
390
- fill:#008ae0;
391
421
  fill:var(--iui-icons-color-primary);
392
422
  }
393
423
  .iui-tile-content .iui-tile-status-icon.iui-positive{
394
- fill:#53a21a;
395
424
  fill:var(--iui-icons-color-positive);
396
425
  }
397
426
  .iui-tile-content .iui-tile-status-icon.iui-warning{
398
- fill:#f18d13;
399
427
  fill:var(--iui-icons-color-warning);
400
428
  }
401
429
  .iui-tile-content .iui-tile-status-icon.iui-negative{
402
- fill:#d10a0a;
403
430
  fill:var(--iui-icons-color-negative);
404
431
  }
405
432
  .iui-tile-content .iui-tile-name-label{
@@ -413,19 +440,12 @@ div.iui-tile-thumbnail-picture{
413
440
  height:100%;
414
441
  max-height:66px;
415
442
  overflow:hidden;
416
- white-space:nowrap;
417
443
  text-overflow:ellipsis;
418
- color:rgba(0, 0, 0, 0.4);
444
+ display:-webkit-box;
445
+ -webkit-line-clamp:3;
446
+ -webkit-box-orient:vertical;
419
447
  color:var(--iui-text-color-muted);
420
448
  }
421
- @supports (-webkit-line-clamp: 1){
422
- .iui-tile-content .iui-tile-description{
423
- white-space:unset;
424
- display:-webkit-box;
425
- -webkit-line-clamp:3;
426
- -webkit-box-orient:vertical;
427
- }
428
- }
429
449
  .iui-tile-content .iui-tile-metadata{
430
450
  font-size:12px;
431
451
  flex-shrink:0;
@@ -436,12 +456,10 @@ div.iui-tile-thumbnail-picture{
436
456
  display:flex;
437
457
  align-items:center;
438
458
  margin-top:auto;
439
- color:rgba(0, 0, 0, 0.4);
440
459
  color:var(--iui-text-color-muted);
441
460
  }
442
461
  .iui-tile-content .iui-tile-metadata > svg,
443
462
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon{
444
- fill:rgba(0, 0, 0, 0.4);
445
463
  fill:var(--iui-icons-color);
446
464
  display:inline-flex;
447
465
  width:16px;
@@ -451,22 +469,18 @@ div.iui-tile-thumbnail-picture{
451
469
  }
452
470
  .iui-tile-content .iui-tile-metadata > svg.iui-informational,
453
471
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-informational{
454
- fill:#008ae0;
455
472
  fill:var(--iui-icons-color-primary);
456
473
  }
457
474
  .iui-tile-content .iui-tile-metadata > svg.iui-positive,
458
475
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-positive{
459
- fill:#53a21a;
460
476
  fill:var(--iui-icons-color-positive);
461
477
  }
462
478
  .iui-tile-content .iui-tile-metadata > svg.iui-warning,
463
479
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-warning{
464
- fill:#f18d13;
465
480
  fill:var(--iui-icons-color-warning);
466
481
  }
467
482
  .iui-tile-content .iui-tile-metadata > svg.iui-negative,
468
483
  .iui-tile-content .iui-tile-metadata .iui-tile-metadata-icon.iui-negative{
469
- fill:#d10a0a;
470
484
  fill:var(--iui-icons-color-negative);
471
485
  }
472
486
  .iui-tile-content .iui-tile-metadata > *{
package/css/time-picker.css CHANGED
@@ -14,11 +14,9 @@
14
14
  text-align:center;
15
15
  height:286px;
16
16
  display:inline-flex;
17
- background-color:white;
18
17
  background-color:var(--iui-color-background-1);
19
18
  }
20
19
  .iui-time-picker:not(:first-child){
21
- border-left:1px solid #c7ccd1;
22
20
  border-left:1px solid var(--iui-color-background-border);
23
21
  }
24
22
  .iui-time-picker:first-child{
@@ -32,7 +30,6 @@
32
30
  scrollbar-width:none;
33
31
  }
34
32
  .iui-time:not(:first-child){
35
- border-left:1px solid #c7ccd1;
36
33
  border-left:1px solid var(--iui-color-background-border);
37
34
  }
38
35
  .iui-time > ol{
@@ -58,16 +55,12 @@
58
55
  }
59
56
  .iui-time > ol > li:hover{
60
57
  cursor:pointer;
61
- color:#008ae0;
62
- background-color:rgba(0, 138, 224, 0.1);
63
58
  color:var(--iui-color-foreground-primary);
64
59
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
65
60
  }
66
61
  .iui-time > ol > li.iui-selected{
67
62
  font-weight:600;
68
63
  cursor:default;
69
- background-color:#008ae0;
70
- color:white;
71
64
  background-color:var(--iui-color-background-primary);
72
65
  color:var(--iui-color-foreground-accessory);
73
66
  }
@@ -91,7 +84,6 @@
91
84
  align-items:center;
92
85
  }
93
86
  .iui-period:not(:first-child){
94
- border-left:1px solid #c7ccd1;
95
87
  border-left:1px solid var(--iui-color-background-border);
96
88
  }
97
89
  .iui-period > ol{
@@ -117,16 +109,12 @@
117
109
  }
118
110
  .iui-period > ol > li:hover{
119
111
  cursor:pointer;
120
- color:#008ae0;
121
- background-color:rgba(0, 138, 224, 0.1);
122
112
  color:var(--iui-color-foreground-primary);
123
113
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
124
114
  }
125
115
  .iui-period > ol > li.iui-selected{
126
116
  font-weight:600;
127
117
  cursor:default;
128
- background-color:#008ae0;
129
- color:white;
130
118
  background-color:var(--iui-color-background-primary);
131
119
  color:var(--iui-color-foreground-accessory);
132
120
  }