@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/scss/tag/classes.scss CHANGED
@@ -3,27 +3,29 @@
3
3
  @import './tag';
4
4
  @import '../anchor/index';
5
5
 
6
- .iui-tag {
7
- @include iui-tag;
8
- }
6
+ @layer itwinui-v1 {
7
+ .iui-tag {
8
+ @include iui-tag;
9
+ }
9
10
 
10
- .iui-tag-basic {
11
- @include iui-tag-basic;
12
- }
11
+ .iui-tag-basic {
12
+ @include iui-tag-basic;
13
+ }
13
14
 
14
- .iui-tag-label {
15
- @include iui-tag-label;
16
- }
15
+ .iui-tag-label {
16
+ @include iui-tag-label;
17
+ }
17
18
 
18
- .iui-tag-button {
19
- @include iui-tag-button;
20
- }
19
+ .iui-tag-button {
20
+ @include iui-tag-button;
21
+ }
21
22
 
22
- a.iui-tag-basic {
23
- @include iui-anchor;
24
- @include iui-focus($offset: 1px);
25
- }
23
+ a.iui-tag-basic {
24
+ @include iui-anchor;
25
+ @include iui-focus($offset: 1px);
26
+ }
26
27
 
27
- .iui-tag-container {
28
- @include iui-tag-container;
28
+ .iui-tag-container {
29
+ @include iui-tag-container;
30
+ }
29
31
  }
package/scss/text/classes.scss CHANGED
@@ -3,38 +3,40 @@
3
3
  @import './index';
4
4
  @import './mixins';
5
5
 
6
- .iui-text-headline {
7
- @include iui-text(headline);
8
- }
9
-
10
- .iui-text-title {
11
- @include iui-text(title);
12
- }
13
-
14
- .iui-text-subheading {
15
- @include iui-text(subheading);
16
- }
17
-
18
- .iui-text-leading {
19
- @include iui-text(leading);
20
- }
21
-
22
- .iui-text-block {
23
- @include iui-text(body);
24
- }
25
-
26
- .iui-text-small {
27
- @include iui-text(small);
28
- }
29
-
30
- .iui-text-muted {
31
- @include iui-text-muted;
32
- }
33
-
34
- .iui-skeleton {
35
- @include iui-text-skeleton;
36
- }
37
-
38
- .iui-text-spacing {
39
- @include iui-text-block-spacing;
6
+ @layer itwinui-v1 {
7
+ .iui-text-headline {
8
+ @include iui-text(headline);
9
+ }
10
+
11
+ .iui-text-title {
12
+ @include iui-text(title);
13
+ }
14
+
15
+ .iui-text-subheading {
16
+ @include iui-text(subheading);
17
+ }
18
+
19
+ .iui-text-leading {
20
+ @include iui-text(leading);
21
+ }
22
+
23
+ .iui-text-block {
24
+ @include iui-text(body);
25
+ }
26
+
27
+ .iui-text-small {
28
+ @include iui-text(small);
29
+ }
30
+
31
+ .iui-text-muted {
32
+ @include iui-text-muted;
33
+ }
34
+
35
+ .iui-skeleton {
36
+ @include iui-text-skeleton;
37
+ }
38
+
39
+ .iui-text-spacing {
40
+ @include iui-text-block-spacing;
41
+ }
40
42
  }
package/scss/tile/classes.scss CHANGED
@@ -2,50 +2,52 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-tile {
6
- @include iui-tile;
5
+ @layer itwinui-v1 {
6
+ .iui-tile {
7
+ @include iui-tile;
7
8
 
8
- &.iui-positive {
9
- @include iui-tile-status(positive);
10
- }
9
+ &.iui-positive {
10
+ @include iui-tile-status(positive);
11
+ }
11
12
 
12
- &.iui-warning {
13
- @include iui-tile-status(warning);
14
- }
13
+ &.iui-warning {
14
+ @include iui-tile-status(warning);
15
+ }
15
16
 
16
- &.iui-negative {
17
- @include iui-tile-status(negative);
17
+ &.iui-negative {
18
+ @include iui-tile-status(negative);
19
+ }
18
20
  }
19
- }
20
21
 
21
- .iui-tile-thumbnail-type-indicator {
22
- @include iui-tile-thumbnail-type-indicator;
23
- }
22
+ .iui-tile-thumbnail-type-indicator {
23
+ @include iui-tile-thumbnail-type-indicator;
24
+ }
24
25
 
25
- .iui-tile-thumbnail-quick-action {
26
- @include iui-tile-thumbnail-quick-action;
27
- }
26
+ .iui-tile-thumbnail-quick-action {
27
+ @include iui-tile-thumbnail-quick-action;
28
+ }
28
29
 
29
- .iui-tile-thumbnail-badge-container {
30
- @include iui-tile-thumbnail-badge;
31
- }
30
+ .iui-tile-thumbnail-badge-container {
31
+ @include iui-tile-thumbnail-badge;
32
+ }
32
33
 
33
- .iui-tile-buttons {
34
- @include iui-tile-buttons;
35
- }
34
+ .iui-tile-buttons {
35
+ @include iui-tile-buttons;
36
+ }
36
37
 
37
- .iui-tile-thumbnail {
38
- @include iui-tile-thumbnail;
39
- }
38
+ .iui-tile-thumbnail {
39
+ @include iui-tile-thumbnail;
40
+ }
40
41
 
41
- .iui-tile-thumbnail-picture {
42
- @include iui-tile-thumbnail-picture;
43
- }
42
+ .iui-tile-thumbnail-picture {
43
+ @include iui-tile-thumbnail-picture;
44
+ }
44
45
 
45
- .iui-tile-content {
46
- @include iui-tile-content;
47
- }
46
+ .iui-tile-content {
47
+ @include iui-tile-content;
48
+ }
48
49
 
49
- .iui-tile-more-options {
50
- @include iui-tile-more-options;
50
+ .iui-tile-more-options {
51
+ @include iui-tile-more-options;
52
+ }
51
53
  }
package/scss/time-picker/classes.scss CHANGED
@@ -2,15 +2,17 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-time-picker {
6
- @include iui-time-picker;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-time-picker {
7
+ @include iui-time-picker;
8
+ }
8
9
 
9
- .iui-time {
10
- @include iui-time-picker-list;
11
- }
10
+ .iui-time {
11
+ @include iui-time-picker-list;
12
+ }
12
13
 
13
- .iui-period {
14
- @include iui-time-picker-list;
15
- @include iui-time-picker-period;
14
+ .iui-period {
15
+ @include iui-time-picker-list;
16
+ @include iui-time-picker-period;
17
+ }
16
18
  }
package/scss/toast-notification/classes.scss CHANGED
@@ -10,89 +10,91 @@
10
10
  }
11
11
  }
12
12
 
13
- .iui-toast-wrapper {
14
- pointer-events: none;
15
- position: fixed;
16
- display: flex;
17
- align-items: center;
18
- flex-direction: column;
19
- justify-content: center;
20
- z-index: 99999;
21
-
22
- @media screen and (max-width: 400px) {
23
- width: calc(100vw - 36px);
24
- margin-top: $iui-baseline;
25
- }
13
+ @layer itwinui-v1 {
14
+ .iui-toast-wrapper {
15
+ pointer-events: none;
16
+ position: fixed;
17
+ display: flex;
18
+ align-items: center;
19
+ flex-direction: column;
20
+ justify-content: center;
21
+ z-index: 99999;
22
+
23
+ @media screen and (max-width: 400px) {
24
+ width: calc(100vw - 36px);
25
+ margin-top: $iui-baseline;
26
+ }
26
27
 
27
- @media screen and (min-width: 401px) {
28
- min-width: 400px;
29
- max-width: 640px;
30
- margin: $iui-line-height 0;
31
- }
28
+ @media screen and (min-width: 401px) {
29
+ min-width: 400px;
30
+ max-width: 640px;
31
+ margin: $iui-line-height 0;
32
+ }
32
33
 
33
- @media (prefers-reduced-motion: no-preference) {
34
- .iui-toast-all {
35
- transition: all 240ms cubic-bezier(0, 0, 0.2, 1);
34
+ @media (prefers-reduced-motion: no-preference) {
35
+ .iui-toast-all {
36
+ transition: all 240ms cubic-bezier(0, 0, 0.2, 1);
37
+ }
36
38
  }
37
- }
38
39
 
39
- &.iui-placement-top {
40
- margin-left: auto;
41
- margin-right: auto;
42
- left: 0;
43
- top: 0;
44
- right: 0;
45
- }
40
+ &.iui-placement-top {
41
+ margin-left: auto;
42
+ margin-right: auto;
43
+ left: 0;
44
+ top: 0;
45
+ right: 0;
46
+ }
46
47
 
47
- &.iui-placement-top-start {
48
- left: 0;
49
- top: 0;
50
- align-items: flex-start;
51
- }
48
+ &.iui-placement-top-start {
49
+ left: 0;
50
+ top: 0;
51
+ align-items: flex-start;
52
+ }
52
53
 
53
- &.iui-placement-top-end {
54
- right: 0;
55
- top: 0;
56
- align-items: flex-end;
57
- }
54
+ &.iui-placement-top-end {
55
+ right: 0;
56
+ top: 0;
57
+ align-items: flex-end;
58
+ }
58
59
 
59
- &.iui-placement-bottom {
60
- @include iui-bottom-placement;
61
- margin-left: auto;
62
- margin-right: auto;
63
- left: 0;
64
- right: 0;
65
- }
60
+ &.iui-placement-bottom {
61
+ @include iui-bottom-placement;
62
+ margin-left: auto;
63
+ margin-right: auto;
64
+ left: 0;
65
+ right: 0;
66
+ }
66
67
 
67
- &.iui-placement-bottom-start {
68
- @include iui-bottom-placement;
69
- left: 0;
70
- align-items: flex-start;
71
- }
68
+ &.iui-placement-bottom-start {
69
+ @include iui-bottom-placement;
70
+ left: 0;
71
+ align-items: flex-start;
72
+ }
72
73
 
73
- &.iui-placement-bottom-end {
74
- @include iui-bottom-placement;
75
- right: 0;
76
- align-items: flex-end;
74
+ &.iui-placement-bottom-end {
75
+ @include iui-bottom-placement;
76
+ right: 0;
77
+ align-items: flex-end;
78
+ }
77
79
  }
78
- }
79
80
 
80
- .iui-toast {
81
- @include iui-toast;
81
+ .iui-toast {
82
+ @include iui-toast;
82
83
 
83
- &.iui-informational {
84
- @include iui-toast-category($category: primary);
85
- }
84
+ &.iui-informational {
85
+ @include iui-toast-category($category: primary);
86
+ }
86
87
 
87
- &.iui-positive {
88
- @include iui-toast-category($category: positive);
89
- }
88
+ &.iui-positive {
89
+ @include iui-toast-category($category: positive);
90
+ }
90
91
 
91
- &.iui-negative {
92
- @include iui-toast-category($category: negative);
93
- }
92
+ &.iui-negative {
93
+ @include iui-toast-category($category: negative);
94
+ }
94
95
 
95
- &.iui-warning {
96
- @include iui-toast-category($category: warning);
96
+ &.iui-warning {
97
+ @include iui-toast-category($category: warning);
98
+ }
97
99
  }
98
100
  }
package/scss/toggle-switch/classes.scss CHANGED
@@ -2,10 +2,12 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-toggle-switch-wrapper {
6
- @include iui-toggle-switch-wrapper;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-toggle-switch-wrapper {
7
+ @include iui-toggle-switch-wrapper;
8
+ }
8
9
 
9
- .iui-toggle-switch {
10
- @include iui-toggle-switch;
10
+ .iui-toggle-switch {
11
+ @include iui-toggle-switch;
12
+ }
11
13
  }
package/scss/tooltip/classes.scss CHANGED
@@ -2,23 +2,25 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- // Statics version of hidden/visible animation handling
6
- .iui-tooltip-container {
7
- width: fit-content;
8
- height: fit-content;
9
- position: relative;
5
+ @layer itwinui-v1 {
6
+ // Statics version of hidden/visible animation handling
7
+ .iui-tooltip-container {
8
+ width: fit-content;
9
+ height: fit-content;
10
+ position: relative;
10
11
 
11
- > .iui-tooltip {
12
- @include iui-tooltip-hidden;
13
- }
12
+ > .iui-tooltip {
13
+ @include iui-tooltip-hidden;
14
+ }
14
15
 
15
- > .iui-tooltip.iui-tooltip-visible,
16
- &:hover > .iui-tooltip {
17
- @include iui-tooltip-visible;
16
+ > .iui-tooltip.iui-tooltip-visible,
17
+ &:hover > .iui-tooltip {
18
+ @include iui-tooltip-visible;
19
+ }
18
20
  }
19
- }
20
21
 
21
- // Styling tooltip only
22
- .iui-tooltip {
23
- @include iui-tooltip;
22
+ // Styling tooltip only
23
+ .iui-tooltip {
24
+ @include iui-tooltip;
25
+ }
24
26
  }
package/scss/tree/classes.scss CHANGED
@@ -2,18 +2,20 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-tree {
6
- @include iui-tree;
7
- }
5
+ @layer itwinui-v1 {
6
+ .iui-tree {
7
+ @include iui-tree;
8
+ }
8
9
 
9
- .iui-sub-tree {
10
- @include iui-sub-tree;
11
- }
10
+ .iui-sub-tree {
11
+ @include iui-sub-tree;
12
+ }
12
13
 
13
- .iui-tree-item {
14
- @include iui-tree-item;
15
- }
14
+ .iui-tree-item {
15
+ @include iui-tree-item;
16
+ }
16
17
 
17
- .iui-tree-node {
18
- @include iui-tree-node;
18
+ .iui-tree-node {
19
+ @include iui-tree-node;
20
+ }
19
21
  }
package/scss/user-icon/classes.scss CHANGED
@@ -2,26 +2,28 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-user-icon {
6
- @include iui-user-icon;
5
+ @layer itwinui-v1 {
6
+ .iui-user-icon {
7
+ @include iui-user-icon;
7
8
 
8
- &#{&} {
9
- @include iui-user-icon-size;
10
- }
9
+ &#{&} {
10
+ @include iui-user-icon-size;
11
+ }
11
12
 
12
- &.iui-small {
13
- @include iui-user-icon-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
14
- }
13
+ &.iui-small {
14
+ @include iui-user-icon-size($size: $iui-icons-large, $font-size: $iui-font-size-small);
15
+ }
15
16
 
16
- &.iui-large {
17
- @include iui-user-icon-size($size: $iui-icons-xxl, $font-size: $iui-font-size-subheading);
18
- }
17
+ &.iui-large {
18
+ @include iui-user-icon-size($size: $iui-icons-xxl, $font-size: $iui-font-size-subheading);
19
+ }
19
20
 
20
- &.iui-x-large {
21
- @include iui-user-icon-size($size: $iui-icons-3xl, $font-size: $iui-font-size-title);
21
+ &.iui-x-large {
22
+ @include iui-user-icon-size($size: $iui-icons-3xl, $font-size: $iui-font-size-title);
23
+ }
22
24
  }
23
- }
24
25
 
25
- .iui-user-icon-list {
26
- @include iui-user-icon-list;
26
+ .iui-user-icon-list {
27
+ @include iui-user-icon-list;
28
+ }
27
29
  }
package/scss/wizard/classes.scss CHANGED
@@ -2,26 +2,28 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import './index';
4
4
 
5
- .iui-wizard {
6
- @include iui-wizard;
5
+ @layer itwinui-v1 {
6
+ .iui-wizard {
7
+ @include iui-wizard;
7
8
 
8
- &.iui-long {
9
- @include iui-wizard-long;
10
- }
9
+ &.iui-long {
10
+ @include iui-wizard-long;
11
+ }
11
12
 
12
- &.iui-workflow {
13
- @include iui-wizard-workflow;
13
+ &.iui-workflow {
14
+ @include iui-wizard-workflow;
15
+ }
14
16
  }
15
- }
16
17
 
17
- .iui-wizard-step {
18
- @include iui-wizard-step;
19
- }
18
+ .iui-wizard-step {
19
+ @include iui-wizard-step;
20
+ }
20
21
 
21
- .iui-wizard-track-content {
22
- @include iui-wizard-track-content;
23
- }
22
+ .iui-wizard-track-content {
23
+ @include iui-wizard-track-content;
24
+ }
24
25
 
25
- .iui-wizard-step-name {
26
- @include iui-wizard-step-name;
26
+ .iui-wizard-step-name {
27
+ @include iui-wizard-step-name;
28
+ }
27
29
  }