@itwin/itwinui-css 0.63.2-dev.0 → 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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  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/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/tag.css CHANGED
@@ -2,162 +2,164 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-tag{
6
- -webkit-user-select:all;
7
- -moz-user-select:all;
8
- user-select:all;
9
- text-transform:lowercase;
10
- display:inline-flex;
11
- height:33px;
12
- margin-top:3px;
13
- margin-bottom:3px;
14
- border-radius:9999px;
15
- box-sizing:border-box;
16
- padding:0 2px;
17
- align-items:center;
18
- transition:border-color 0.2s ease-out;
19
- font-size:14px;
20
- text-transform:none;
21
- cursor:default;
22
- -webkit-tap-highlight-color:transparent;
23
- border:1px solid rgba(0, 0, 0, 0.4);
24
- background-color:white;
25
- color:rgba(0, 0, 0, 0.8);
26
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
27
- background-color:var(--iui-color-background-1);
28
- color:var(--iui-text-color);
29
- }
30
- .iui-tag:hover{
31
- border-color:black;
32
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
33
- }
5
+ @layer itwinui-v1{
6
+ .iui-tag{
7
+ -webkit-user-select:all;
8
+ -moz-user-select:all;
9
+ user-select:all;
10
+ text-transform:lowercase;
11
+ display:inline-flex;
12
+ height:33px;
13
+ margin-top:3px;
14
+ margin-bottom:3px;
15
+ border-radius:9999px;
16
+ box-sizing:border-box;
17
+ padding:0 2px;
18
+ align-items:center;
19
+ transition:border-color 0.2s ease-out;
20
+ font-size:14px;
21
+ text-transform:none;
22
+ cursor:default;
23
+ -webkit-tap-highlight-color:transparent;
24
+ border:1px solid rgba(0, 0, 0, 0.4);
25
+ background-color:white;
26
+ color:rgba(0, 0, 0, 0.8);
27
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
28
+ background-color:var(--iui-color-background-1);
29
+ color:var(--iui-text-color);
30
+ }
31
+ .iui-tag:hover{
32
+ border-color:black;
33
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
34
+ }
34
35
 
35
- .iui-tag-basic{
36
- -webkit-user-select:all;
37
- -moz-user-select:all;
38
- user-select:all;
39
- text-transform:lowercase;
40
- display:inline-flex;
41
- }
42
- .iui-tag-basic:not(a){
43
- color:rgba(0, 0, 0, 0.4);
44
- color:var(--iui-text-color-muted);
45
- }
36
+ .iui-tag-basic{
37
+ -webkit-user-select:all;
38
+ -moz-user-select:all;
39
+ user-select:all;
40
+ text-transform:lowercase;
41
+ display:inline-flex;
42
+ }
43
+ .iui-tag-basic:not(a){
44
+ color:rgba(0, 0, 0, 0.4);
45
+ color:var(--iui-text-color-muted);
46
+ }
46
47
 
47
- .iui-tag-label{
48
- margin:0;
49
- padding:0;
50
- border:none;
51
- vertical-align:baseline;
52
- font-size:14px;
53
- font-weight:400;
54
- line-height:22px;
55
- white-space:nowrap;
56
- text-overflow:ellipsis;
57
- overflow:hidden;
58
- margin:0 4px 0 8px;
59
- }
60
- .iui-tag-label:only-child{
61
- margin:0 8px;
62
- }
48
+ .iui-tag-label{
49
+ margin:0;
50
+ padding:0;
51
+ border:none;
52
+ vertical-align:baseline;
53
+ font-size:14px;
54
+ font-weight:400;
55
+ line-height:22px;
56
+ white-space:nowrap;
57
+ text-overflow:ellipsis;
58
+ overflow:hidden;
59
+ margin:0 4px 0 8px;
60
+ }
61
+ .iui-tag-label:only-child{
62
+ margin:0 8px;
63
+ }
63
64
 
64
- .iui-tag-button{
65
- border-radius:50%;
66
- }
65
+ .iui-tag-button{
66
+ border-radius:50%;
67
+ }
67
68
 
68
- a.iui-tag-basic{
69
- color:#008ae0;
70
- -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
71
- color:var(--iui-color-foreground-primary);
72
- -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
73
- border-radius:4px;
74
- box-sizing:border-box;
75
- cursor:pointer;
76
- text-decoration:none;
77
- }
78
- a.iui-tag-basic:focus-visible{
79
- outline:1px solid var(--iui-color-foreground-primary);
80
- outline-offset:1px;
81
- }
82
- @supports not selector(*:focus-visible){
83
- a.iui-tag-basic:focus{
69
+ a.iui-tag-basic{
70
+ color:#008ae0;
71
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
72
+ color:var(--iui-color-foreground-primary);
73
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
74
+ border-radius:4px;
75
+ box-sizing:border-box;
76
+ cursor:pointer;
77
+ text-decoration:none;
78
+ }
79
+ a.iui-tag-basic:focus-visible{
84
80
  outline:1px solid var(--iui-color-foreground-primary);
85
81
  outline-offset:1px;
86
82
  }
87
- }
88
- a.iui-tag-basic:hover{
89
- color:#006bad;
90
- color:var(--iui-color-foreground-primary-overlay);
91
- }
92
- a.iui-tag-basic:hover{
93
- text-decoration:underline;
94
- }
95
- @media (prefers-contrast: more){
96
- a.iui-tag-basic{
97
- text-decoration:underline;
83
+ @supports not selector(*:focus-visible){
84
+ a.iui-tag-basic:focus{
85
+ outline:1px solid var(--iui-color-foreground-primary);
86
+ outline-offset:1px;
87
+ }
98
88
  }
99
89
  a.iui-tag-basic:hover{
90
+ color:#006bad;
91
+ color:var(--iui-color-foreground-primary-overlay);
92
+ }
93
+ a.iui-tag-basic:hover{
94
+ text-decoration:underline;
95
+ }
96
+ @media (prefers-contrast: more){
97
+ a.iui-tag-basic{
98
+ text-decoration:underline;
99
+ }
100
+ a.iui-tag-basic:hover{
101
+ text-decoration:none;
102
+ }
103
+ }
104
+ .iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
100
105
  text-decoration:none;
101
106
  }
102
- }
103
- .iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
104
- text-decoration:none;
105
- }
106
- .iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
107
- text-decoration:underline;
108
- }
107
+ .iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
108
+ text-decoration:underline;
109
+ }
109
110
 
110
- .iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
111
- text-decoration:underline;
112
- }
113
- .iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
114
- text-decoration:none;
115
- }
111
+ .iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
112
+ text-decoration:underline;
113
+ }
114
+ .iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
115
+ text-decoration:none;
116
+ }
116
117
 
117
- a.iui-tag-basic:focus-visible{
118
- outline:1px solid var(--iui-color-foreground-primary);
119
- outline-offset:1px;
120
- }
121
- @supports not selector(*:focus-visible){
122
- a.iui-tag-basic:focus{
118
+ a.iui-tag-basic:focus-visible{
123
119
  outline:1px solid var(--iui-color-foreground-primary);
124
120
  outline-offset:1px;
125
121
  }
126
- }
122
+ @supports not selector(*:focus-visible){
123
+ a.iui-tag-basic:focus{
124
+ outline:1px solid var(--iui-color-foreground-primary);
125
+ outline-offset:1px;
126
+ }
127
+ }
127
128
 
128
- .iui-tag-container{
129
- color:rgba(0, 0, 0, 0.4);
130
- color:var(--iui-text-color-muted);
131
- }
132
- .iui-tag-container > a.iui-tag-basic{
133
- margin:2px;
134
- }
135
- .iui-tag-container > *:not(last-child){
136
- margin-right:4px;
137
- }
138
- .iui-tag-container > .iui-tag-basic:not(:last-child)::after{
139
- content:",";
140
- }
141
- .iui-tag-container.iui-truncate{
142
- overflow:hidden;
143
- white-space:nowrap;
144
- text-overflow:ellipsis;
145
- }
146
- @supports (-webkit-line-clamp: 1){
129
+ .iui-tag-container{
130
+ color:rgba(0, 0, 0, 0.4);
131
+ color:var(--iui-text-color-muted);
132
+ }
133
+ .iui-tag-container > a.iui-tag-basic{
134
+ margin:2px;
135
+ }
136
+ .iui-tag-container > *:not(last-child){
137
+ margin-right:4px;
138
+ }
139
+ .iui-tag-container > .iui-tag-basic:not(:last-child)::after{
140
+ content:",";
141
+ }
147
142
  .iui-tag-container.iui-truncate{
148
- white-space:unset;
149
- display:-webkit-box;
150
- -webkit-line-clamp:1;
151
- -webkit-box-orient:vertical;
152
- }
153
- }
154
- .iui-tag-container.iui-scroll{
155
- white-space:nowrap;
156
- overflow-x:scroll;
157
- }
158
- .iui-tag-container.iui-visible{
159
- border-radius:4px;
160
- padding:3px 12px;
161
- background-color:#edeff2;
162
- background-color:var(--iui-color-background-3);
143
+ overflow:hidden;
144
+ white-space:nowrap;
145
+ text-overflow:ellipsis;
146
+ }
147
+ @supports (-webkit-line-clamp: 1){
148
+ .iui-tag-container.iui-truncate{
149
+ white-space:unset;
150
+ display:-webkit-box;
151
+ -webkit-line-clamp:1;
152
+ -webkit-box-orient:vertical;
153
+ }
154
+ }
155
+ .iui-tag-container.iui-scroll{
156
+ white-space:nowrap;
157
+ overflow-x:scroll;
158
+ }
159
+ .iui-tag-container.iui-visible{
160
+ border-radius:4px;
161
+ padding:3px 12px;
162
+ background-color:#edeff2;
163
+ background-color:var(--iui-color-background-3);
164
+ }
163
165
  }
package/css/text.css CHANGED
@@ -2,120 +2,122 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-text-headline{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- font-size:32px;
11
- font-weight:300;
12
- line-height:44px;
13
- }
14
-
15
- .iui-text-title{
16
- margin:0;
17
- padding:0;
18
- border:none;
19
- vertical-align:baseline;
20
- font-size:24px;
21
- font-weight:300;
22
- line-height:33px;
23
- }
5
+ @layer itwinui-v1{
6
+ .iui-text-headline{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ font-size:32px;
12
+ font-weight:300;
13
+ line-height:44px;
14
+ }
24
15
 
25
- .iui-text-subheading{
26
- margin:0;
27
- padding:0;
28
- border:none;
29
- vertical-align:baseline;
30
- font-size:18px;
31
- font-weight:400;
32
- line-height:33px;
33
- }
16
+ .iui-text-title{
17
+ margin:0;
18
+ padding:0;
19
+ border:none;
20
+ vertical-align:baseline;
21
+ font-size:24px;
22
+ font-weight:300;
23
+ line-height:33px;
24
+ }
34
25
 
35
- .iui-text-leading{
36
- margin:0;
37
- padding:0;
38
- border:none;
39
- vertical-align:baseline;
40
- font-size:16px;
41
- font-weight:400;
42
- line-height:22px;
43
- }
26
+ .iui-text-subheading{
27
+ margin:0;
28
+ padding:0;
29
+ border:none;
30
+ vertical-align:baseline;
31
+ font-size:18px;
32
+ font-weight:400;
33
+ line-height:33px;
34
+ }
44
35
 
45
- .iui-text-block{
46
- margin:0;
47
- padding:0;
48
- border:none;
49
- vertical-align:baseline;
50
- font-size:14px;
51
- font-weight:400;
52
- line-height:22px;
53
- }
36
+ .iui-text-leading{
37
+ margin:0;
38
+ padding:0;
39
+ border:none;
40
+ vertical-align:baseline;
41
+ font-size:16px;
42
+ font-weight:400;
43
+ line-height:22px;
44
+ }
54
45
 
55
- .iui-text-small{
56
- margin:0;
57
- padding:0;
58
- border:none;
59
- vertical-align:baseline;
60
- font-size:12px;
61
- font-weight:400;
62
- line-height:22px;
63
- }
46
+ .iui-text-block{
47
+ margin:0;
48
+ padding:0;
49
+ border:none;
50
+ vertical-align:baseline;
51
+ font-size:14px;
52
+ font-weight:400;
53
+ line-height:22px;
54
+ }
64
55
 
65
- .iui-text-muted{
66
- color:rgba(0, 0, 0, 0.4);
67
- color:var(--iui-text-color-muted);
68
- }
56
+ .iui-text-small{
57
+ margin:0;
58
+ padding:0;
59
+ border:none;
60
+ vertical-align:baseline;
61
+ font-size:12px;
62
+ font-weight:400;
63
+ line-height:22px;
64
+ }
69
65
 
70
- .iui-skeleton{
71
- display:inline-block;
72
- -webkit-user-select:none;
73
- -moz-user-select:none;
74
- -ms-user-select:none;
75
- user-select:none;
76
- color:transparent;
77
- border-radius:4px;
78
- cursor:progress;
79
- background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
80
- background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));
81
- background-size:200% 100%;
82
- }
83
- @media (forced-colors: active){
84
- .iui-skeleton{
85
- forced-color-adjust:none;
86
- background:linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
66
+ .iui-text-muted{
67
+ color:rgba(0, 0, 0, 0.4);
68
+ color:var(--iui-text-color-muted);
87
69
  }
88
- }
89
- @media (prefers-reduced-motion: no-preference){
70
+
90
71
  .iui-skeleton{
91
- -webkit-animation:skeleton-shimmer 0.8s linear infinite;
92
- animation:skeleton-shimmer 0.8s linear infinite;
72
+ display:inline-block;
73
+ -webkit-user-select:none;
74
+ -moz-user-select:none;
75
+ -ms-user-select:none;
76
+ user-select:none;
77
+ color:transparent;
78
+ border-radius:4px;
79
+ cursor:progress;
80
+ background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
81
+ background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));
82
+ background-size:200% 100%;
93
83
  }
94
- @-webkit-keyframes skeleton-shimmer{
95
- 0%{
96
- background-position:200% 50%;
97
- }
98
- 50%{
99
- background-position:100% 50%;
100
- }
101
- 100%{
102
- background-position:0% 50%;
84
+ @media (forced-colors: active){
85
+ .iui-skeleton{
86
+ forced-color-adjust:none;
87
+ background:linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
103
88
  }
104
89
  }
105
- @keyframes skeleton-shimmer{
106
- 0%{
107
- background-position:200% 50%;
90
+ @media (prefers-reduced-motion: no-preference){
91
+ .iui-skeleton{
92
+ -webkit-animation:skeleton-shimmer 0.8s linear infinite;
93
+ animation:skeleton-shimmer 0.8s linear infinite;
108
94
  }
109
- 50%{
110
- background-position:100% 50%;
95
+ @-webkit-keyframes skeleton-shimmer{
96
+ 0%{
97
+ background-position:200% 50%;
98
+ }
99
+ 50%{
100
+ background-position:100% 50%;
101
+ }
102
+ 100%{
103
+ background-position:0% 50%;
104
+ }
111
105
  }
112
- 100%{
113
- background-position:0% 50%;
106
+ @keyframes skeleton-shimmer{
107
+ 0%{
108
+ background-position:200% 50%;
109
+ }
110
+ 50%{
111
+ background-position:100% 50%;
112
+ }
113
+ 100%{
114
+ background-position:0% 50%;
115
+ }
114
116
  }
115
117
  }
116
- }
117
118
 
118
- .iui-text-spacing{
119
- padding:0;
120
- margin:0 0 22px;
119
+ .iui-text-spacing{
120
+ padding:0;
121
+ margin:0 0 22px;
122
+ }
121
123
  }