@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/css/expandable-block.css CHANGED
@@ -2,231 +2,233 @@
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-expandable-block{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:flex;
11
- flex-direction:column;
12
- box-sizing:border-box;
13
- width:100%;
14
- background-color:white;
15
- background-color:var(--iui-color-background-1);
16
- }
17
- .iui-expandable-block > .iui-header{
18
- display:flex;
19
- align-items:center;
20
- padding:11px 12px;
21
- cursor:pointer;
22
- box-sizing:border-box;
23
- -webkit-user-select:none;
24
- -moz-user-select:none;
25
- -ms-user-select:none;
26
- user-select:none;
27
- border:1px solid #edeff2;
28
- border-bottom-color:#dde1e4;
29
- background-color:#edeff2;
30
- border:1px solid var(--iui-color-background-3);
31
- border-bottom-color:var(--iui-color-background-4);
32
- background-color:var(--iui-color-background-3);
33
- }
34
- .iui-expandable-block > .iui-header:focus-visible{
35
- outline:1px solid var(--iui-color-foreground-primary);
36
- outline-offset:-1px;
37
- }
38
- @supports not selector(*:focus-visible){
39
- .iui-expandable-block > .iui-header:focus{
5
+ @layer itwinui-v1{
6
+ .iui-expandable-block{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ display:flex;
12
+ flex-direction:column;
13
+ box-sizing:border-box;
14
+ width:100%;
15
+ background-color:white;
16
+ background-color:var(--iui-color-background-1);
17
+ }
18
+ .iui-expandable-block > .iui-header{
19
+ display:flex;
20
+ align-items:center;
21
+ padding:11px 12px;
22
+ cursor:pointer;
23
+ box-sizing:border-box;
24
+ -webkit-user-select:none;
25
+ -moz-user-select:none;
26
+ -ms-user-select:none;
27
+ user-select:none;
28
+ border:1px solid #edeff2;
29
+ border-bottom-color:#dde1e4;
30
+ background-color:#edeff2;
31
+ border:1px solid var(--iui-color-background-3);
32
+ border-bottom-color:var(--iui-color-background-4);
33
+ background-color:var(--iui-color-background-3);
34
+ }
35
+ .iui-expandable-block > .iui-header:focus-visible{
40
36
  outline:1px solid var(--iui-color-foreground-primary);
41
37
  outline-offset:-1px;
42
38
  }
43
- }
44
- @media (prefers-reduced-motion: no-preference){
45
- .iui-expandable-block > .iui-header{
46
- transition:background-color 0.2s ease-out;
39
+ @supports not selector(*:focus-visible){
40
+ .iui-expandable-block > .iui-header:focus{
41
+ outline:1px solid var(--iui-color-foreground-primary);
42
+ outline-offset:-1px;
43
+ }
44
+ }
45
+ @media (prefers-reduced-motion: no-preference){
46
+ .iui-expandable-block > .iui-header{
47
+ transition:background-color 0.2s ease-out;
48
+ }
47
49
  }
48
- }
49
- .iui-expandable-block > .iui-header > .iui-icon,
50
+ .iui-expandable-block > .iui-header > .iui-icon,
50
51
  .iui-expandable-block > .iui-header > .iui-status-icon{
51
- display:inline-flex;
52
- flex-shrink:0;
53
- width:16px;
54
- height:16px;
55
- }
56
- .iui-expandable-block > .iui-header > .iui-icon{
57
- fill:rgba(0, 0, 0, 0.8);
58
- fill:var(--iui-icons-color-actionable);
59
- }
60
- @media (prefers-reduced-motion: no-preference){
52
+ display:inline-flex;
53
+ flex-shrink:0;
54
+ width:16px;
55
+ height:16px;
56
+ }
61
57
  .iui-expandable-block > .iui-header > .iui-icon{
62
- transition:transform 0.2s ease-out;
58
+ fill:rgba(0, 0, 0, 0.8);
59
+ fill:var(--iui-icons-color-actionable);
60
+ }
61
+ @media (prefers-reduced-motion: no-preference){
62
+ .iui-expandable-block > .iui-header > .iui-icon{
63
+ transition:transform 0.2s ease-out;
64
+ }
63
65
  }
64
- }
65
- .iui-expandable-block > .iui-header > .iui-status-icon{
66
- margin-left:12px;
67
- fill:rgba(0, 0, 0, 0.4);
68
- fill:var(--iui-icons-color);
69
- }
70
- @media (forced-colors: active){
71
66
  .iui-expandable-block > .iui-header > .iui-status-icon{
72
- fill:CanvasText;
73
- }
74
- }
75
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
76
- fill:#008ae0;
77
- fill:var(--iui-icons-color-primary);
78
- }
79
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
80
- fill:#53a21a;
81
- fill:var(--iui-icons-color-positive);
82
- }
83
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
84
- fill:#f18d13;
85
- fill:var(--iui-icons-color-warning);
86
- }
87
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
88
- fill:#d10a0a;
89
- fill:var(--iui-icons-color-negative);
90
- }
91
- .iui-expandable-block > .iui-header .iui-expandable-block-label{
92
- display:flex;
93
- flex-direction:column;
94
- flex:auto;
95
- min-width:0;
96
- margin-left:12px;
97
- color:rgba(0, 0, 0, 0.8);
98
- color:var(--iui-text-color);
99
- }
100
- @media (prefers-reduced-motion: no-preference){
67
+ margin-left:12px;
68
+ fill:rgba(0, 0, 0, 0.4);
69
+ fill:var(--iui-icons-color);
70
+ }
71
+ @media (forced-colors: active){
72
+ .iui-expandable-block > .iui-header > .iui-status-icon{
73
+ fill:CanvasText;
74
+ }
75
+ }
76
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
77
+ fill:#008ae0;
78
+ fill:var(--iui-icons-color-primary);
79
+ }
80
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
81
+ fill:#53a21a;
82
+ fill:var(--iui-icons-color-positive);
83
+ }
84
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
85
+ fill:#f18d13;
86
+ fill:var(--iui-icons-color-warning);
87
+ }
88
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
89
+ fill:#d10a0a;
90
+ fill:var(--iui-icons-color-negative);
91
+ }
101
92
  .iui-expandable-block > .iui-header .iui-expandable-block-label{
102
- transition:color 0.2s ease;
93
+ display:flex;
94
+ flex-direction:column;
95
+ flex:auto;
96
+ min-width:0;
97
+ margin-left:12px;
98
+ color:rgba(0, 0, 0, 0.8);
99
+ color:var(--iui-text-color);
103
100
  }
104
- }
105
- .iui-expandable-block > .iui-header .iui-title,
106
- .iui-expandable-block > .iui-header .iui-caption{
107
- white-space:nowrap;
108
- overflow:hidden;
109
- text-overflow:ellipsis;
110
- }
111
- .iui-expandable-block > .iui-header .iui-title{
112
- font-size:16px;
113
- }
101
+ @media (prefers-reduced-motion: no-preference){
102
+ .iui-expandable-block > .iui-header .iui-expandable-block-label{
103
+ transition:color 0.2s ease;
104
+ }
105
+ }
106
+ .iui-expandable-block > .iui-header .iui-title,
114
107
  .iui-expandable-block > .iui-header .iui-caption{
115
- font-size:12px;
116
- color:rgba(0, 0, 0, 0.4);
117
- color:var(--iui-text-color-muted);
118
- }
119
- .iui-expandable-block > .iui-header:focus-visible{
120
- outline:1px solid var(--iui-color-foreground-primary);
121
- outline-offset:-1px;
122
- }
123
- @supports not selector(*:focus-visible){
124
- .iui-expandable-block > .iui-header:focus{
108
+ white-space:nowrap;
109
+ overflow:hidden;
110
+ text-overflow:ellipsis;
111
+ }
112
+ .iui-expandable-block > .iui-header .iui-title{
113
+ font-size:16px;
114
+ }
115
+ .iui-expandable-block > .iui-header .iui-caption{
116
+ font-size:12px;
117
+ color:rgba(0, 0, 0, 0.4);
118
+ color:var(--iui-text-color-muted);
119
+ }
120
+ .iui-expandable-block > .iui-header:focus-visible{
125
121
  outline:1px solid var(--iui-color-foreground-primary);
126
122
  outline-offset:-1px;
127
123
  }
128
- }
129
- .iui-expandable-block .iui-expandable-content{
130
- overflow:hidden;
131
- box-sizing:border-box;
132
- border-bottom:1px solid #dde1e4;
133
- border-right:1px solid #dde1e4;
134
- border-left:1px solid #dde1e4;
135
- border-bottom:1px solid var(--iui-color-background-4);
136
- border-right:1px solid var(--iui-color-background-4);
137
- border-left:1px solid var(--iui-color-background-4);
138
- }
139
- .iui-expandable-block .iui-expandable-content.iui-enter{
140
- opacity:0;
141
- }
142
- .iui-expandable-block .iui-expandable-content.iui-enter-active{
143
- opacity:1;
144
- }
145
- @media (prefers-reduced-motion: no-preference){
124
+ @supports not selector(*:focus-visible){
125
+ .iui-expandable-block > .iui-header:focus{
126
+ outline:1px solid var(--iui-color-foreground-primary);
127
+ outline-offset:-1px;
128
+ }
129
+ }
130
+ .iui-expandable-block .iui-expandable-content{
131
+ overflow:hidden;
132
+ box-sizing:border-box;
133
+ border-bottom:1px solid #dde1e4;
134
+ border-right:1px solid #dde1e4;
135
+ border-left:1px solid #dde1e4;
136
+ border-bottom:1px solid var(--iui-color-background-4);
137
+ border-right:1px solid var(--iui-color-background-4);
138
+ border-left:1px solid var(--iui-color-background-4);
139
+ }
140
+ .iui-expandable-block .iui-expandable-content.iui-enter{
141
+ opacity:0;
142
+ }
146
143
  .iui-expandable-block .iui-expandable-content.iui-enter-active{
147
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
148
- }
149
- }
150
- .iui-expandable-block .iui-expandable-content.iui-exit{
151
- opacity:1;
152
- }
153
- .iui-expandable-block .iui-expandable-content.iui-exit-active{
154
- opacity:0;
155
- }
156
- @media (prefers-reduced-motion: no-preference){
144
+ opacity:1;
145
+ }
146
+ @media (prefers-reduced-motion: no-preference){
147
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
148
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
149
+ }
150
+ }
151
+ .iui-expandable-block .iui-expandable-content.iui-exit{
152
+ opacity:1;
153
+ }
157
154
  .iui-expandable-block .iui-expandable-content.iui-exit-active{
158
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
159
- }
160
- }
161
- .iui-expandable-block .iui-expandable-content > div{
162
- padding:11px 12px;
163
- }
164
- .iui-expandable-block:hover > .iui-header{
165
- background-color:#dde1e4;
166
- background-color:var(--iui-color-background-4);
167
- }
168
- .iui-expandable-block:hover > .iui-header > .iui-icon{
169
- fill:black;
170
- fill:var(--iui-icons-color-actionable-hover);
171
- }
172
- .iui-expandable-block:hover > .iui-header .iui-caption,
173
- .iui-expandable-block:hover > .iui-header .iui-title{
174
- color:black;
175
- color:var(--iui-color-foreground-body);
176
- }
177
- @media (prefers-reduced-motion: no-preference){
155
+ opacity:0;
156
+ }
157
+ @media (prefers-reduced-motion: no-preference){
158
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
159
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
160
+ }
161
+ }
162
+ .iui-expandable-block .iui-expandable-content > div{
163
+ padding:11px 12px;
164
+ }
165
+ .iui-expandable-block:hover > .iui-header{
166
+ background-color:#dde1e4;
167
+ background-color:var(--iui-color-background-4);
168
+ }
169
+ .iui-expandable-block:hover > .iui-header > .iui-icon{
170
+ fill:black;
171
+ fill:var(--iui-icons-color-actionable-hover);
172
+ }
178
173
  .iui-expandable-block:hover > .iui-header .iui-caption,
179
174
  .iui-expandable-block:hover > .iui-header .iui-title{
180
- transition:color 0.2s ease;
181
- }
182
- }
183
- .iui-expandable-block.iui-expanded > .iui-header{
184
- background-color:#edeff2;
185
- border-left:1px solid #dde1e4;
186
- border-top:1px solid #dde1e4;
187
- border-right:1px solid #dde1e4;
188
- background-color:var(--iui-color-background-3);
189
- border-left:1px solid var(--iui-color-background-4);
190
- border-top:1px solid var(--iui-color-background-4);
191
- border-right:1px solid var(--iui-color-background-4);
192
- }
193
- .iui-expandable-block.iui-expanded > .iui-header:hover{
194
- background-color:#dde1e4;
195
- background-color:var(--iui-color-background-4);
196
- }
197
- .iui-expandable-block.iui-expanded > .iui-header:hover{
198
- background-color:#dde1e4;
199
- background-color:var(--iui-color-background-4);
200
- }
201
- .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
202
- transform:rotate(90deg);
203
- }
204
- .iui-expandable-block.iui-small .iui-header{
205
- padding:5.5px 8px;
206
- }
207
- .iui-expandable-block.iui-small .iui-header > .iui-icon{
208
- width:12px;
209
- height:12px;
210
- }
211
- .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
212
- margin-left:8px;
213
- }
214
- .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
215
- margin-left:8px;
216
- }
217
- .iui-expandable-block.iui-borderless,
175
+ color:black;
176
+ color:var(--iui-color-foreground-body);
177
+ }
178
+ @media (prefers-reduced-motion: no-preference){
179
+ .iui-expandable-block:hover > .iui-header .iui-caption,
180
+ .iui-expandable-block:hover > .iui-header .iui-title{
181
+ transition:color 0.2s ease;
182
+ }
183
+ }
184
+ .iui-expandable-block.iui-expanded > .iui-header{
185
+ background-color:#edeff2;
186
+ border-left:1px solid #dde1e4;
187
+ border-top:1px solid #dde1e4;
188
+ border-right:1px solid #dde1e4;
189
+ background-color:var(--iui-color-background-3);
190
+ border-left:1px solid var(--iui-color-background-4);
191
+ border-top:1px solid var(--iui-color-background-4);
192
+ border-right:1px solid var(--iui-color-background-4);
193
+ }
194
+ .iui-expandable-block.iui-expanded > .iui-header:hover{
195
+ background-color:#dde1e4;
196
+ background-color:var(--iui-color-background-4);
197
+ }
198
+ .iui-expandable-block.iui-expanded > .iui-header:hover{
199
+ background-color:#dde1e4;
200
+ background-color:var(--iui-color-background-4);
201
+ }
202
+ .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
203
+ transform:rotate(90deg);
204
+ }
205
+ .iui-expandable-block.iui-small .iui-header{
206
+ padding:5.5px 8px;
207
+ }
208
+ .iui-expandable-block.iui-small .iui-header > .iui-icon{
209
+ width:12px;
210
+ height:12px;
211
+ }
212
+ .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
213
+ margin-left:8px;
214
+ }
215
+ .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
216
+ margin-left:8px;
217
+ }
218
+ .iui-expandable-block.iui-borderless,
218
219
  .iui-expandable-block.iui-borderless .iui-header,
219
220
  .iui-expandable-block.iui-borderless .iui-expandable-content{
220
- background-color:transparent;
221
- border:initial;
222
- }
223
- .iui-expandable-block.iui-borderless .iui-header{
224
- border-radius:4px;
225
- }
226
- .iui-expandable-block.iui-borderless .iui-header:hover{
227
- background-color:rgba(0, 0, 0, 0.1);
228
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
229
- }
230
- .iui-expandable-block.iui-borderless .iui-expandable-content > div{
231
- padding:0;
221
+ background-color:transparent;
222
+ border:initial;
223
+ }
224
+ .iui-expandable-block.iui-borderless .iui-header{
225
+ border-radius:4px;
226
+ }
227
+ .iui-expandable-block.iui-borderless .iui-header:hover{
228
+ background-color:rgba(0, 0, 0, 0.1);
229
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
230
+ }
231
+ .iui-expandable-block.iui-borderless .iui-expandable-content > div{
232
+ padding:0;
233
+ }
232
234
  }
package/css/fieldset.css CHANGED
@@ -2,35 +2,37 @@
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-fieldset{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- padding:11px 12px;
11
- border-radius:4px;
12
- border:1px solid #c7ccd1;
13
- background-color:white;
14
- border:1px solid var(--iui-color-background-border);
15
- background-color:var(--iui-color-background-1);
16
- }
17
- .iui-fieldset legend{
18
- font-size:16px;
19
- padding:1.5px 8px;
20
- border-radius:4px;
21
- -webkit-user-select:none;
22
- -moz-user-select:none;
23
- -ms-user-select:none;
24
- user-select:none;
25
- background-color:#dde1e4;
26
- color:rgba(0, 0, 0, 0.8);
27
- background-color:var(--iui-color-background-4);
28
- color:var(--iui-text-color);
29
- }
30
- .iui-fieldset[disabled]{
31
- cursor:not-allowed;
32
- }
33
- .iui-fieldset[disabled] legend{
34
- color:rgba(0, 0, 0, 0.4);
35
- color:var(--iui-text-color-muted);
5
+ @layer itwinui-v1{
6
+ .iui-fieldset{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ padding:11px 12px;
12
+ border-radius:4px;
13
+ border:1px solid #c7ccd1;
14
+ background-color:white;
15
+ border:1px solid var(--iui-color-background-border);
16
+ background-color:var(--iui-color-background-1);
17
+ }
18
+ .iui-fieldset legend{
19
+ font-size:16px;
20
+ padding:1.5px 8px;
21
+ border-radius:4px;
22
+ -webkit-user-select:none;
23
+ -moz-user-select:none;
24
+ -ms-user-select:none;
25
+ user-select:none;
26
+ background-color:#dde1e4;
27
+ color:rgba(0, 0, 0, 0.8);
28
+ background-color:var(--iui-color-background-4);
29
+ color:var(--iui-text-color);
30
+ }
31
+ .iui-fieldset[disabled]{
32
+ cursor:not-allowed;
33
+ }
34
+ .iui-fieldset[disabled] legend{
35
+ color:rgba(0, 0, 0, 0.4);
36
+ color:var(--iui-text-color-muted);
37
+ }
36
38
  }