@itwin/itwinui-css 0.37.2 → 0.40.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 (64) hide show
  1. package/css/all.css +563 -367
  2. package/css/breadcrumbs.css +26 -15
  3. package/css/button.css +192 -137
  4. package/css/code.css +2 -0
  5. package/css/color-picker.css +2 -0
  6. package/css/date-picker.css +2 -0
  7. package/css/header.css +134 -91
  8. package/css/information-panel.css +26 -0
  9. package/css/inputs.css +79 -43
  10. package/css/menu.css +3 -3
  11. package/css/side-navigation.css +27 -24
  12. package/css/table.css +9 -2
  13. package/css/tabs.css +15 -12
  14. package/css/tile.css +46 -40
  15. package/package.json +6 -2
  16. package/scss/breadcrumbs/breadcrumbs.scss +1 -1
  17. package/scss/button/borderless.scss +31 -46
  18. package/scss/button/button-group.scss +6 -15
  19. package/scss/button/button-icon.scss +12 -0
  20. package/scss/button/button.scss +28 -35
  21. package/scss/button/classes.scss +25 -3
  22. package/scss/button/cta.scss +22 -19
  23. package/scss/button/default.scss +29 -41
  24. package/scss/button/disabled.scss +3 -14
  25. package/scss/button/high-visibility.scss +22 -19
  26. package/scss/button/index.scss +1 -0
  27. package/scss/button/split-menu.scss +7 -8
  28. package/scss/code/codeblock.scss +4 -0
  29. package/scss/color-picker/color-picker.scss +16 -1
  30. package/scss/date-picker/date-picker.scss +2 -8
  31. package/scss/header/classes.scss +4 -0
  32. package/scss/header/header.scss +72 -60
  33. package/scss/information-panel/classes.scss +4 -0
  34. package/scss/information-panel/information-panel.scss +37 -0
  35. package/scss/inputs/checkbox-radio.scss +9 -9
  36. package/scss/inputs/checkbox.scss +36 -0
  37. package/scss/inputs/classes.scss +5 -1
  38. package/scss/inputs/labeled-inputs.scss +41 -16
  39. package/scss/inputs/radio-tile.scss +2 -4
  40. package/scss/keyboard/keyboard.scss +2 -4
  41. package/scss/location-marker/data-rich.scss +1 -2
  42. package/scss/menu/menu.scss +3 -11
  43. package/scss/modal/modal.scss +1 -2
  44. package/scss/progress-indicator/linear.scss +3 -10
  45. package/scss/progress-indicator/overlay.scss +3 -9
  46. package/scss/progress-indicator/radial.scss +4 -4
  47. package/scss/side-navigation/side-navigation.scss +32 -29
  48. package/scss/slider/slider.scss +5 -3
  49. package/scss/style/global.scss +1 -4
  50. package/scss/style/mixins.scss +17 -12
  51. package/scss/style/theme.scss +63 -208
  52. package/scss/table/table.scss +7 -19
  53. package/scss/table/variables.scss +2 -4
  54. package/scss/tabs/borderless.scss +3 -12
  55. package/scss/tabs/pill.scss +2 -8
  56. package/scss/tabs/tabs.scss +11 -8
  57. package/scss/tile/tile.scss +4 -2
  58. package/scss/time-picker/time-picker.scss +1 -4
  59. package/scss/toast-notification/categories.scss +1 -4
  60. package/scss/toast-notification/toast.scss +1 -3
  61. package/scss/toggle-switch/toggle-switch.scss +4 -8
  62. package/scss/tooltip/tooltip.scss +1 -2
  63. package/scss/user-icon/user-icon.scss +3 -6
  64. package/scss/wizard/wizard.scss +2 -1
package/scss/table/table.scss CHANGED
@@ -129,7 +129,7 @@
129
129
  display: flex;
130
130
  flex-direction: column;
131
131
  flex-grow: 1;
132
-
132
+ @include iui-scroll-snapping('.iui-row');
133
133
  @include themed {
134
134
  background-color: t(iui-color-background-1);
135
135
  }
@@ -151,10 +151,7 @@
151
151
  &:hover:not(.iui-disabled) {
152
152
  &:not(.iui-expanded-content) {
153
153
  @include themed {
154
- background-color: rgba(
155
- t(iui-color-foreground-primary-rgb),
156
- t(iui-opacity-6)
157
- );
154
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
158
155
  }
159
156
  }
160
157
 
@@ -167,7 +164,7 @@
167
164
  visibility: visible;
168
165
  }
169
166
 
170
- .iui-row-expander > .iui-icon {
167
+ .iui-row-expander > .iui-button-icon {
171
168
  @media (prefers-reduced-motion: no-preference) {
172
169
  transition: transform $iui-speed-fast ease-out;
173
170
  }
@@ -181,7 +178,7 @@
181
178
  border-bottom-color: transparent;
182
179
  }
183
180
 
184
- .iui-row-expander > .iui-icon {
181
+ .iui-row-expander > .iui-button-icon {
185
182
  transform: rotate(90deg);
186
183
  }
187
184
 
@@ -367,10 +364,7 @@
367
364
 
368
365
  *::selection {
369
366
  @include themed {
370
- background-color: rgba(
371
- t(iui-color-foreground-#{$status}-rgb),
372
- t(iui-opacity-4)
373
- );
367
+ background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
374
368
  }
375
369
  }
376
370
  }
@@ -384,18 +378,12 @@
384
378
 
385
379
  @mixin iui-table-cell-status($status) {
386
380
  @include themed {
387
- background-color: rgba(
388
- t(iui-color-foreground-#{$status}-rgb),
389
- t(iui-opacity-6)
390
- );
381
+ background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6));
391
382
  }
392
383
 
393
384
  &::selection {
394
385
  @include themed {
395
- background-color: rgba(
396
- t(iui-color-foreground-#{$status}-rgb),
397
- t(iui-opacity-4)
398
- );
386
+ background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
399
387
  }
400
388
  }
401
389
  }
package/scss/table/variables.scss CHANGED
@@ -6,7 +6,5 @@ $iui-table-density-vertical: $iui-baseline * 1.5;
6
6
  $iui-table-density-vertical-condensed: $iui-baseline;
7
7
  $iui-table-density-vertical-extra-condensed: $iui-baseline * 0.5;
8
8
  $iui-table-density: $iui-table-density-vertical $iui-m;
9
- $iui-table-density-condensed: $iui-table-density-vertical-condensed
10
- $iui-m;
11
- $iui-table-density-extra-condensed: $iui-table-density-vertical-extra-condensed
12
- $iui-m;
9
+ $iui-table-density-condensed: $iui-table-density-vertical-condensed $iui-m;
10
+ $iui-table-density-extra-condensed: $iui-table-density-vertical-extra-condensed $iui-m;
package/scss/tabs/borderless.scss CHANGED
@@ -16,19 +16,13 @@
16
16
 
17
17
  &:hover {
18
18
  @include themed {
19
- background-color: rgba(
20
- t(iui-color-foreground-primary-rgb),
21
- t(iui-opacity-6)
22
- );
19
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
23
20
  }
24
21
  }
25
22
 
26
23
  &.iui-active {
27
24
  @include themed {
28
- background-color: rgba(
29
- t(iui-color-foreground-primary-rgb),
30
- t(iui-opacity-6)
31
- );
25
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
32
26
  }
33
27
  }
34
28
  }
@@ -56,10 +50,7 @@
56
50
  &.iui-green .iui-active,
57
51
  &.iui-green .iui-tab:hover {
58
52
  @include themed {
59
- background-color: rgba(
60
- t(iui-color-foreground-positive-rgb),
61
- t(iui-opacity-6)
62
- );
53
+ background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
63
54
  }
64
55
  }
65
56
 
package/scss/tabs/pill.scss CHANGED
@@ -17,10 +17,7 @@
17
17
 
18
18
  &.iui-green .iui-tab:hover {
19
19
  @include themed {
20
- background-color: rgba(
21
- t(iui-color-foreground-positive-rgb),
22
- t(iui-opacity-6)
23
- );
20
+ background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-6));
24
21
  }
25
22
  }
26
23
 
@@ -38,10 +35,7 @@
38
35
 
39
36
  &:hover {
40
37
  @include themed {
41
- background-color: rgba(
42
- t(iui-color-foreground-primary-rgb),
43
- t(iui-opacity-6)
44
- );
38
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
45
39
  }
46
40
  }
47
41
 
package/scss/tabs/tabs.scss CHANGED
@@ -177,29 +177,29 @@
177
177
  background-color: t(iui-color-foreground-positive);
178
178
  }
179
179
  }
180
-
181
- ~ .iui-tab-stripe {
182
- display: none;
183
- }
184
180
  }
185
181
 
186
182
  @mixin iui-tab-animated {
187
- ~ .iui-tab-stripe {
183
+ &::after {
188
184
  position: absolute;
185
+ content: ' ';
189
186
  @include themed {
190
187
  background-color: t(iui-color-foreground-primary);
191
188
  }
192
189
  }
193
190
 
194
- &.iui-green ~ .iui-tab-stripe {
191
+ &.iui-green::after {
195
192
  @include themed {
196
193
  background-color: t(iui-color-foreground-positive);
197
194
  }
198
195
  }
199
196
 
200
197
  @at-root {
201
- .iui-horizontal & ~ .iui-tab-stripe {
198
+ .iui-horizontal &::after {
199
+ top: calc(100% - #{$iui-xxs});
202
200
  height: $iui-xxs;
201
+ left: var(--stripe-left);
202
+ width: var(--stripe-width);
203
203
  @media (prefers-reduced-motion: no-preference) {
204
204
  transition: width $iui-speed-fast ease-out, left $iui-speed-fast ease-out;
205
205
  }
@@ -207,8 +207,11 @@
207
207
  }
208
208
 
209
209
  @at-root {
210
- .iui-vertical & ~ .iui-tab-stripe {
210
+ .iui-vertical &::after {
211
+ left: calc(100% - #{$iui-xxs});
211
212
  width: $iui-xxs;
213
+ top: var(--stripe-top);
214
+ height: var(--stripe-height);
212
215
  @media (prefers-reduced-motion: no-preference) {
213
216
  transition: top $iui-speed-fast ease-out;
214
217
  }
package/scss/tile/tile.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  > .iui-type-indicator,
36
36
  > .iui-quick-action {
37
37
  @include iui-button-borderless;
38
+ @include iui-button-size(small, borderless);
38
39
  position: absolute;
39
40
  border-radius: 50%;
40
41
  top: round($iui-baseline * 0.5);
@@ -107,7 +108,7 @@
107
108
  > .iui-picture + .iui-button + .iui-button {
108
109
  @include iui-blur($opacity: 5);
109
110
 
110
- &:enabled > .iui-icon {
111
+ &:enabled > .iui-button-icon {
111
112
  @include themed() {
112
113
  fill: t(iui-color-foreground-accessory);
113
114
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, t(iui-opacity-5)));
@@ -122,7 +123,7 @@
122
123
  background-color: rgba(0, 0, 0, t(iui-opacity-4));
123
124
  }
124
125
 
125
- > .iui-icon {
126
+ .iui-button-icon {
126
127
  @include themed() {
127
128
  fill: t(iui-color-foreground-accessory);
128
129
  }
@@ -206,6 +207,7 @@
206
207
  }
207
208
 
208
209
  > .iui-more-options {
210
+ @include iui-button-size(small, borderless);
209
211
  position: absolute;
210
212
  bottom: $iui-baseline * 0.5;
211
213
  right: $iui-s;
package/scss/time-picker/time-picker.scss CHANGED
@@ -49,10 +49,7 @@
49
49
  cursor: pointer;
50
50
  @include themed {
51
51
  color: t(iui-color-foreground-primary);
52
- background-color: rgba(
53
- t(iui-color-foreground-primary-rgb),
54
- t(iui-opacity-6)
55
- );
52
+ background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
56
53
  }
57
54
  }
58
55
 
package/scss/toast-notification/categories.scss CHANGED
@@ -12,10 +12,7 @@
12
12
  > .iui-message {
13
13
  &::selection {
14
14
  @include themed {
15
- background-color: rgba(
16
- t(iui-color-foreground-#{$category}-rgb),
17
- t(iui-opacity-4)
18
- );
15
+ background-color: rgba(t(iui-color-foreground-#{$category}-rgb), t(iui-opacity-4));
19
16
  }
20
17
  }
21
18
  }
package/scss/toast-notification/toast.scss CHANGED
@@ -15,9 +15,7 @@
15
15
  @include themed {
16
16
  background-color: t(iui-color-background-1);
17
17
  border: 1px solid t(iui-color-foreground-body);
18
- box-shadow: 0 0 0 1px
19
- rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4)),
20
- $iui-elevation-24;
18
+ box-shadow: 0 0 0 1px rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4)), $iui-elevation-24;
21
19
  }
22
20
 
23
21
  > .iui-status-area {
package/scss/toggle-switch/toggle-switch.scss CHANGED
@@ -31,13 +31,11 @@
31
31
  width: ($iui-m * 2) + ($iui-xxs * 3);
32
32
  border-radius: $iui-baseline;
33
33
  @media (prefers-reduced-motion: no-preference) {
34
- transition: background-color $iui-speed-fast ease,
35
- border-color $iui-speed-fast ease;
34
+ transition: background-color $iui-speed-fast ease, border-color $iui-speed-fast ease;
36
35
  }
37
36
  @include themed {
38
37
  background-color: t(iui-color-background-1);
39
- border: 1px solid
40
- rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
38
+ border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
41
39
  }
42
40
 
43
41
  > .iui-icon {
@@ -64,8 +62,7 @@
64
62
  right: $iui-m + $iui-xs;
65
63
  border-radius: 50%;
66
64
  @media (prefers-reduced-motion: no-preference) {
67
- transition: right $iui-speed-fast ease,
68
- background-color $iui-speed-fast ease, opacity $iui-speed-fast ease;
65
+ transition: right $iui-speed-fast ease, background-color $iui-speed-fast ease, opacity $iui-speed-fast ease;
69
66
  }
70
67
  @include themed {
71
68
  background-color: t(iui-color-foreground-body);
@@ -78,8 +75,7 @@
78
75
  &:focus {
79
76
  ~ .iui-toggle {
80
77
  @include themed {
81
- border: 1px solid
82
- rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
78
+ border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
83
79
  }
84
80
 
85
81
  > .iui-handle {
package/scss/tooltip/tooltip.scss CHANGED
@@ -30,8 +30,7 @@
30
30
  opacity: 0;
31
31
  /// Following this guide for animation on exit hover: https://greywyvern.com/?post=337
32
32
  @media (prefers-reduced-motion: no-preference) {
33
- transition: visibility 0s linear $iui-speed-fast,
34
- opacity $iui-speed-fast ease-out;
33
+ transition: visibility 0s linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
35
34
  }
36
35
  }
37
36
 
package/scss/user-icon/user-icon.scss CHANGED
@@ -23,8 +23,7 @@
23
23
  border-radius: 50%;
24
24
  box-sizing: border-box;
25
25
  @include themed {
26
- box-shadow: inset 0 0 0 $iui-xxs
27
- rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
26
+ box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
28
27
  }
29
28
  }
30
29
 
@@ -86,8 +85,7 @@
86
85
  @include themed {
87
86
  border: $iui-xxs solid t(iui-color-background-1);
88
87
  background-color: t(iui-color-background-1);
89
- box-shadow: inset 0 0 0 1px
90
- rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
88
+ box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
91
89
  }
92
90
 
93
91
  > .iui-status-symbol {
@@ -155,8 +153,7 @@
155
153
  &:focus:not(:focus-visible) {
156
154
  > .iui-stroke {
157
155
  @include themed {
158
- box-shadow: inset 0 0 0 $iui-xxs
159
- rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
156
+ box-shadow: inset 0 0 0 $iui-xxs rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
160
157
  }
161
158
  }
162
159
  }
package/scss/wizard/wizard.scss CHANGED
@@ -36,7 +36,8 @@
36
36
  justify-content: center;
37
37
  overflow-wrap: break-word;
38
38
  user-select: none;
39
- transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out, color $iui-speed-fast ease-out;
39
+ transition: background-color $iui-speed-fast ease-out, border-color $iui-speed-fast ease-out,
40
+ color $iui-speed-fast ease-out;
40
41
  @include themed {
41
42
  border: 1px solid t(iui-color-foreground-positive);
42
43
  background-color: t(iui-color-background-1);