@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
@@ -6,19 +6,20 @@
6
6
  @import './button-icon';
7
7
 
8
8
  @mixin iui-button-borderless {
9
- @include iui-button-borderless-base;
10
- @include iui-button-size(medium, borderless);
11
-
12
- &:focus {
13
- @include iui-button-borderless-hover-focus;
9
+ border-color: transparent;
10
+ background-color: transparent;
14
11
 
15
- &:where(:not(:focus-visible)) {
16
- @include iui-button-borderless-base;
17
- }
12
+ > .iui-button-icon:only-child {
13
+ margin-left: $iui-component-offset;
14
+ margin-right: $iui-component-offset;
18
15
  }
16
+ @include iui-button-size(medium, borderless);
19
17
 
20
18
  &:hover {
21
- @include iui-button-borderless-hover-focus;
19
+ @include themed {
20
+ background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
21
+ border-color: transparent;
22
+ }
22
23
  }
23
24
 
24
25
  &.iui-active {
@@ -45,20 +46,3 @@
45
46
  }
46
47
  }
47
48
  }
48
-
49
- @mixin iui-button-borderless-hover-focus {
50
- @include themed {
51
- background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
52
- border-color: transparent;
53
- }
54
- }
55
-
56
- @mixin iui-button-borderless-base {
57
- border-color: transparent;
58
- background-color: transparent;
59
-
60
- > .iui-button-icon:only-child {
61
- margin-left: $iui-component-offset;
62
- margin-right: $iui-component-offset;
63
- }
64
- }
@@ -5,72 +5,94 @@
5
5
  @mixin iui-button-group {
6
6
  display: inline-flex;
7
7
  align-items: center;
8
+ isolation: isolate;
8
9
 
9
- > .iui-button {
10
- &:not(.iui-borderless) {
11
- border-radius: 0;
12
- }
10
+ $childSelector: 'input, button'; // target nested inputs and buttons
13
11
 
14
- &:first-of-type:not(.iui-borderless) {
15
- border-top-left-radius: $iui-border-radius;
16
- border-bottom-left-radius: $iui-border-radius;
17
- }
12
+ > * {
13
+ display: flex;
18
14
 
19
- &:last-of-type:not(.iui-borderless) {
20
- border-top-right-radius: $iui-border-radius;
21
- border-bottom-right-radius: $iui-border-radius;
22
- }
15
+ #{$childSelector} {
16
+ position: relative;
23
17
 
24
- &.iui-default:not(:last-of-type) {
25
- border-right: none;
26
- }
18
+ &:hover {
19
+ z-index: 1;
20
+ }
21
+
22
+ &:focus {
23
+ z-index: 2;
27
24
 
28
- &.iui-default {
29
- // Border trick for grouped default & disabled buttons
30
- &:not(:disabled) {
31
- + :disabled {
25
+ &:where(:not(:focus-visible):not(:hover)) {
26
+ z-index: revert;
27
+ }
28
+ }
29
+
30
+ &:disabled {
31
+ z-index: -1;
32
+ }
33
+
34
+ transition-duration: 0ms; // disable exit animation to avoid border flicker
35
+
36
+ &:hover,
37
+ &:focus {
38
+ transition-duration: $iui-speed-fast; // re-enable enter animation
39
+ }
40
+
41
+ // Adds stripe above active button
42
+ &.iui-active {
43
+ &::after {
44
+ content: '';
45
+ position: absolute;
46
+ height: $iui-xxs;
47
+ opacity: 1;
48
+ top: $iui-xxs;
49
+ left: $iui-xxs;
50
+ width: calc(100% - #{$iui-xs});
32
51
  @include themed {
33
- border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
52
+ background-color: t(iui-color-foreground-primary);
34
53
  }
35
54
  }
36
55
 
37
- &:hover + .iui-button,
38
- &:active + .iui-button,
39
- &:focus-visible + .iui-button {
40
- @include themed {
41
- border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
56
+ &:disabled {
57
+ &::after {
58
+ @include themed {
59
+ background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
60
+ }
42
61
  }
43
62
  }
44
63
  }
45
64
 
46
- // Border between 2 side-by-side disabled buttons
47
- &:disabled + .iui-button:disabled {
48
- @include themed {
49
- border-left-color: t(iui-color-background-4);
50
- }
65
+ // Reset border radius only for non-borderless items
66
+ &:not(.iui-borderless) {
67
+ border-radius: 0;
51
68
  }
52
69
  }
53
- }
54
70
 
55
- // Adds stripe above active button
56
- > .iui-active {
57
- &::after {
58
- content: '';
59
- position: absolute;
60
- height: $iui-xxs;
61
- opacity: 1;
62
- top: $iui-xxs;
63
- left: $iui-xxs;
64
- width: calc(100% - #{$iui-xs});
65
- @include themed {
66
- background-color: t(iui-color-foreground-primary);
71
+ // Add rounded corners to first and last items
72
+ &:first-child {
73
+ #{$childSelector}:not(.iui-borderless) {
74
+ border-top-left-radius: $iui-border-radius;
75
+ border-bottom-left-radius: $iui-border-radius;
67
76
  }
68
77
  }
69
78
 
70
- &:disabled {
71
- &::after {
79
+ &:last-child {
80
+ #{$childSelector}:not(.iui-borderless) {
81
+ border-top-right-radius: $iui-border-radius;
82
+ border-bottom-right-radius: $iui-border-radius;
83
+ }
84
+ }
85
+
86
+ // Use negative margin to make adjacent borders overlap
87
+ + * {
88
+ margin-left: -1px;
89
+ }
90
+
91
+ // Add slight border between disabled items
92
+ &:not(:first-child) {
93
+ .iui-default:disabled {
72
94
  @include themed {
73
- background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
95
+ border-left-color: t(iui-color-background-4);
74
96
  }
75
97
  }
76
98
  }
@@ -6,19 +6,20 @@
6
6
  @import './disabled';
7
7
 
8
8
  @mixin iui-button-cta {
9
- @include iui-button-cta-base;
10
-
11
- &:focus {
12
- @include iui-button-cta-hover-focus;
13
-
14
- &:where(:not(:focus-visible)) {
15
- @include iui-button-cta-base;
16
- }
9
+ @include themed {
10
+ background-color: t(iui-color-background-positive);
11
+ border-color: t(iui-color-background-positive);
12
+ color: t(iui-color-foreground-accessory);
17
13
  }
14
+ @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
18
15
 
19
16
  &:hover,
20
17
  &:active {
21
- @include iui-button-cta-hover-focus;
18
+ @include themed {
19
+ background-color: t(iui-color-background-positive-overlay);
20
+ border-color: t(iui-color-background-positive-overlay);
21
+ color: t(iui-color-foreground-accessory);
22
+ }
22
23
  }
23
24
 
24
25
  &[disabled],
@@ -26,19 +27,3 @@
26
27
  @include iui-button-disabled;
27
28
  }
28
29
  }
29
-
30
- @mixin iui-button-cta-hover-focus {
31
- @include themed {
32
- background-color: t(iui-color-background-positive-overlay);
33
- border-color: t(iui-color-background-positive-overlay);
34
- color: t(iui-color-foreground-accessory);
35
- }
36
- }
37
-
38
- @mixin iui-button-cta-base {
39
- @include themed {
40
- background-color: t(iui-color-background-positive);
41
- border-color: t(iui-color-background-positive);
42
- color: t(iui-color-foreground-accessory);
43
- }
44
- }
@@ -7,19 +7,21 @@
7
7
  @import './disabled';
8
8
 
9
9
  @mixin iui-button-default {
10
- @include iui-button-default-base;
11
-
12
- &:focus {
13
- @include iui-button-default-hover-focus;
14
-
15
- &:where(:not(:focus-visible)) {
16
- @include iui-button-default-base;
17
- }
10
+ @include themed {
11
+ background-color: t(iui-color-background-1);
12
+ border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
13
+ color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
18
14
  }
15
+ @include iui-focus($offset: -2px, $thickness: 2px);
19
16
 
20
17
  &:hover,
21
18
  &:active {
22
- @include iui-button-default-hover-focus;
19
+ @include themed {
20
+ background-color: t(iui-color-background-1-overlay);
21
+ border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
22
+ color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
23
+ }
24
+ @include iui-notification-marker-hover;
23
25
  }
24
26
 
25
27
  &.iui-dropdown {
@@ -51,20 +53,3 @@
51
53
  @include iui-button-disabled;
52
54
  }
53
55
  }
54
-
55
- @mixin iui-button-default-hover-focus {
56
- @include themed {
57
- background-color: t(iui-color-background-1-overlay);
58
- border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
59
- color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
60
- }
61
- @include iui-notification-marker-hover;
62
- }
63
-
64
- @mixin iui-button-default-base {
65
- @include themed {
66
- background-color: t(iui-color-background-1);
67
- border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
68
- color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
69
- }
70
- }
@@ -6,19 +6,20 @@
6
6
  @import './button-icon';
7
7
 
8
8
  @mixin iui-button-high-visibility {
9
- @include iui-button-high-visibility-base;
10
-
11
- &:focus {
12
- @include iui-button-high-visibility-hover-focus;
13
-
14
- &:where(:not(:focus-visible)) {
15
- @include iui-button-high-visibility-base;
16
- }
9
+ @include themed {
10
+ background-color: t(iui-color-background-primary);
11
+ border-color: t(iui-color-background-primary);
12
+ color: t(iui-color-foreground-accessory);
17
13
  }
14
+ @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
18
15
 
19
16
  &:hover,
20
17
  &:active {
21
- @include iui-button-high-visibility-hover-focus;
18
+ @include themed {
19
+ background-color: t(iui-color-background-primary-overlay);
20
+ border-color: t(iui-color-background-primary-overlay);
21
+ color: t(iui-color-foreground-accessory);
22
+ }
22
23
  }
23
24
 
24
25
  &[disabled],
@@ -26,19 +27,3 @@
26
27
  @include iui-button-disabled;
27
28
  }
28
29
  }
29
-
30
- @mixin iui-button-high-visibility-hover-focus {
31
- @include themed {
32
- background-color: t(iui-color-background-primary-overlay);
33
- border-color: t(iui-color-background-primary-overlay);
34
- color: t(iui-color-foreground-accessory);
35
- }
36
- }
37
-
38
- @mixin iui-button-high-visibility-base {
39
- @include themed {
40
- background-color: t(iui-color-background-primary);
41
- border-color: t(iui-color-background-primary);
42
- color: t(iui-color-foreground-accessory);
43
- }
44
- }
@@ -11,31 +11,45 @@
11
11
  }
12
12
  }
13
13
 
14
- .iui-button:first-child {
15
- &.iui-borderless:hover {
16
- background-color: transparent;
14
+ > * {
15
+ &:first-child {
16
+ > .iui-borderless:hover {
17
+ background-color: transparent;
18
+ }
17
19
  }
18
- }
19
20
 
20
- // Sizes
21
- > .iui-button + .iui-button {
22
- padding: $iui-xs;
23
- }
21
+ // Sizes
22
+ &:last-child {
23
+ > .iui-button {
24
+ padding: $iui-xs;
25
+ }
24
26
 
25
- > .iui-small + .iui-small {
26
- padding: $iui-xxs;
27
- }
27
+ > .iui-small {
28
+ padding: $iui-xxs;
29
+ }
28
30
 
29
- > .iui-large + .iui-large {
30
- padding: $iui-s;
31
- }
31
+ > .iui-large {
32
+ padding: $iui-s;
33
+ }
34
+ }
32
35
 
33
- > .iui-high-visibility + .iui-high-visibility,
34
- > .iui-high-visibility + .iui-high-visibility:hover,
35
- > .iui-cta + .iui-cta,
36
- > .iui-cta + .iui-cta:hover {
37
- @include themed {
38
- border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
36
+ // Border between buttons for high-visibility and cta
37
+ &:first-child {
38
+ > .iui-high-visibility,
39
+ > .iui-cta {
40
+ @include themed {
41
+ border-right-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
42
+ }
43
+ }
44
+ }
45
+
46
+ &:last-child {
47
+ > .iui-high-visibility,
48
+ > .iui-cta {
49
+ @include themed {
50
+ border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
51
+ }
52
+ }
39
53
  }
40
54
  }
41
55
 
@@ -10,7 +10,6 @@ $iui-color-swatch-border-radius: 5px;
10
10
  $iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
11
11
  $iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
12
12
  $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
13
- $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
14
13
 
15
14
  @mixin iui-color-picker {
16
15
  @include iui-dropdown;
@@ -61,12 +60,7 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
61
60
  }
62
61
  }
63
62
 
64
- &:focus {
65
- outline: 0;
66
- @include themed {
67
- box-shadow: $iui-focus-box-shadow, $iui-inset-box-shadow;
68
- }
69
- }
63
+ @include iui-focus($offset: 0, $thickness: 2px);
70
64
 
71
65
  &.iui-active {
72
66
  @include themed {
@@ -78,18 +72,6 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
78
72
  box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
79
73
  }
80
74
  }
81
-
82
- &:focus {
83
- @include themed {
84
- box-shadow: $iui-focus-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
85
- }
86
- }
87
-
88
- &:focus:not(:focus-visible) {
89
- @include themed {
90
- box-shadow: $iui-inset-box-shadow, $iui-active-box-shadow;
91
- }
92
- }
93
75
  }
94
76
  }
95
77
 
@@ -273,10 +255,5 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
273
255
  }
274
256
  }
275
257
 
276
- &:focus {
277
- outline: 0;
278
- @include themed {
279
- box-shadow: $iui-focus-box-shadow;
280
- }
281
- }
258
+ @include iui-focus($offset: 0, $thickness: 2px);
282
259
  }
@@ -5,3 +5,23 @@
5
5
  .iui-date-picker {
6
6
  @include iui-date-picker;
7
7
  }
8
+
9
+ .iui-calendar-month-year {
10
+ @include iui-calendar-month-year;
11
+ }
12
+
13
+ .iui-calendar-month {
14
+ @include iui-calendar-month;
15
+ }
16
+
17
+ .iui-calendar-weekdays {
18
+ @include iui-calendar-weekdays;
19
+ }
20
+
21
+ .iui-calendar-week {
22
+ @include iui-calendar-week;
23
+ }
24
+
25
+ .iui-calendar-day {
26
+ @include iui-calendar-day;
27
+ }