@itwin/itwinui-css 0.49.0 → 0.51.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 (63) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7251 -5567
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +443 -315
  7. package/css/carousel.css +125 -78
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +54 -42
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +204 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/button/button-group.scss +38 -8
  47. package/scss/button/classes.scss +4 -0
  48. package/scss/carousel/carousel.scss +17 -6
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/inputs/checkbox.scss +1 -0
  51. package/scss/inputs/labeled-inputs.scss +8 -8
  52. package/scss/inputs/radio.scss +0 -4
  53. package/scss/location-marker/data-rich.scss +1 -1
  54. package/scss/location-marker/me.scss +4 -4
  55. package/scss/modal/modal.scss +1 -0
  56. package/scss/popover/popover.scss +1 -2
  57. package/scss/progress-indicator/linear.scss +2 -10
  58. package/scss/style/global.scss +1 -5
  59. package/scss/style/mixins.scss +9 -0
  60. package/scss/table/table.scss +23 -14
  61. package/scss/toast-notification/categories.scss +1 -5
  62. package/scss/toggle-switch/classes.scss +4 -0
  63. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/date-picker.css CHANGED
@@ -21,7 +21,8 @@
21
21
  height:286px;
22
22
  display:inline-flex;
23
23
  background-color:#FFF;
24
- background-color:var(--iui-color-background-1); }
24
+ background-color:var(--iui-color-background-1);
25
+ }
25
26
 
26
27
  .iui-calendar-month-year{
27
28
  display:inline-flex;
@@ -32,23 +33,26 @@
32
33
  box-sizing:border-box;
33
34
  font-weight:700;
34
35
  background-color:#FFF;
35
- background-color:var(--iui-color-background-1); }
36
- .iui-calendar-month-year > span{
37
- margin:0 4px;
38
- width:156px;
39
- white-space:nowrap;
40
- display:inline-flex;
41
- flex-shrink:0;
42
- align-items:center;
43
- justify-content:center;
44
- line-height:44px; }
36
+ background-color:var(--iui-color-background-1);
37
+ }
38
+ .iui-calendar-month-year > span{
39
+ margin:0 4px;
40
+ width:156px;
41
+ white-space:nowrap;
42
+ display:inline-flex;
43
+ flex-shrink:0;
44
+ align-items:center;
45
+ justify-content:center;
46
+ line-height:44px;
47
+ }
45
48
 
46
49
  .iui-calendar-month{
47
50
  overflow:hidden;
48
51
  max-width:15ch;
49
52
  text-overflow:ellipsis;
50
53
  white-space:nowrap;
51
- flex-shrink:0; }
54
+ flex-shrink:0;
55
+ }
52
56
 
53
57
  .iui-calendar-weekdays{
54
58
  line-height:33px;
@@ -58,12 +62,14 @@
58
62
  padding:0 8px;
59
63
  font-weight:700;
60
64
  background-color:#F8F9FB;
61
- background-color:var(--iui-color-background-2); }
62
- .iui-calendar-weekdays > div{
63
- white-space:nowrap;
64
- overflow:hidden;
65
- width:32px;
66
- text-align:center; }
65
+ background-color:var(--iui-color-background-2);
66
+ }
67
+ .iui-calendar-weekdays > div{
68
+ white-space:nowrap;
69
+ overflow:hidden;
70
+ width:32px;
71
+ text-align:center;
72
+ }
67
73
 
68
74
  .iui-calendar-week{
69
75
  white-space:nowrap;
@@ -71,47 +77,59 @@
71
77
  display:flex;
72
78
  align-items:center;
73
79
  justify-content:space-evenly;
74
- padding:0 8px; }
80
+ padding:0 8px;
81
+ }
75
82
 
76
83
  .iui-calendar-day{
77
84
  cursor:pointer;
78
85
  display:inline-block;
79
86
  width:33px;
80
87
  line-height:33px;
81
- border-radius:3px; }
82
- .iui-calendar-day:focus-visible{
88
+ border-radius:3px;
89
+ }
90
+ .iui-calendar-day:focus-visible{
91
+ outline:1px solid var(--iui-color-foreground-primary);
92
+ outline-offset:-1px;
93
+ }
94
+ @supports not selector(*:focus-visible){
95
+ .iui-calendar-day:focus{
83
96
  outline:1px solid var(--iui-color-foreground-primary);
84
- outline-offset:-1px; }
85
- @supports not selector(*:focus-visible){
86
- .iui-calendar-day:focus{
87
- outline:1px solid var(--iui-color-foreground-primary);
88
- outline-offset:-1px; } }
89
- .iui-calendar-day.iui-today{
90
- font-weight:600;
91
- border-radius:50%;
92
- background-color:rgba(0, 0, 0, 0.1);
93
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
94
- .iui-calendar-day:hover{
95
- font-weight:600;
96
- color:#008BE1;
97
- background-color:rgba(0, 139, 225, 0.1);
98
- color:var(--iui-color-foreground-primary);
99
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
100
- .iui-calendar-day.iui-selected{
101
- font-weight:600;
102
- border-radius:3px;
103
- cursor:default;
104
- background-color:#008BE1;
105
- color:#FFF;
106
- background-color:var(--iui-color-background-primary);
107
- color:var(--iui-color-foreground-accessory); }
108
- .iui-calendar-day.iui-selected:focus-visible{
109
- outline:1px solid var(--iui-color-foreground-accessory);
110
- outline-offset:-3px; }
111
- @supports not selector(*:focus-visible){
112
- .iui-calendar-day.iui-selected:focus{
113
- outline:1px solid var(--iui-color-foreground-accessory);
114
- outline-offset:-3px; } }
115
- .iui-calendar-day.iui-outside-month{
116
- color:rgba(0, 0, 0, 0.4);
117
- color:var(--iui-text-color-muted); }
97
+ outline-offset:-1px;
98
+ }
99
+ }
100
+ .iui-calendar-day.iui-today{
101
+ font-weight:600;
102
+ border-radius:50%;
103
+ background-color:rgba(0, 0, 0, 0.1);
104
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
105
+ }
106
+ .iui-calendar-day:hover{
107
+ font-weight:600;
108
+ color:#008BE1;
109
+ background-color:rgba(0, 139, 225, 0.1);
110
+ color:var(--iui-color-foreground-primary);
111
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
112
+ }
113
+ .iui-calendar-day.iui-selected{
114
+ font-weight:600;
115
+ border-radius:3px;
116
+ cursor:default;
117
+ background-color:#008BE1;
118
+ color:#FFF;
119
+ background-color:var(--iui-color-background-primary);
120
+ color:var(--iui-color-foreground-accessory);
121
+ }
122
+ .iui-calendar-day.iui-selected:focus-visible{
123
+ outline:1px solid var(--iui-color-foreground-accessory);
124
+ outline-offset:-3px;
125
+ }
126
+ @supports not selector(*:focus-visible){
127
+ .iui-calendar-day.iui-selected:focus{
128
+ outline:1px solid var(--iui-color-foreground-accessory);
129
+ outline-offset:-3px;
130
+ }
131
+ }
132
+ .iui-calendar-day.iui-outside-month{
133
+ color:rgba(0, 0, 0, 0.4);
134
+ color:var(--iui-text-color-muted);
135
+ }
package/css/expandable-block.css CHANGED
@@ -12,164 +12,216 @@
12
12
  box-sizing:border-box;
13
13
  width:100%;
14
14
  background-color:#FFF;
15
- background-color:var(--iui-color-background-1); }
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 #EEF0F3;
28
+ border-bottom-color:#DCE0E3;
29
+ background-color:#EEF0F3;
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{
40
+ outline:1px solid var(--iui-color-foreground-primary);
41
+ outline-offset:-1px;
42
+ }
43
+ }
44
+ @media (prefers-reduced-motion: no-preference){
16
45
  .iui-expandable-block > .iui-header{
17
- display:flex;
18
- align-items:center;
19
- padding:11px 12px;
20
- cursor:pointer;
21
- box-sizing:border-box;
22
- -webkit-user-select:none;
23
- -moz-user-select:none;
24
- -ms-user-select:none;
25
- user-select:none;
26
- border:1px solid #EEF0F3;
27
- border-bottom-color:#DCE0E3;
28
- background-color:#EEF0F3;
29
- border:1px solid var(--iui-color-background-3);
30
- border-bottom-color:var(--iui-color-background-4);
31
- background-color:var(--iui-color-background-3); }
32
- .iui-expandable-block > .iui-header:focus-visible{
33
- outline:1px solid var(--iui-color-foreground-primary);
34
- outline-offset:-1px; }
35
- @supports not selector(*:focus-visible){
36
- .iui-expandable-block > .iui-header:focus{
37
- outline:1px solid var(--iui-color-foreground-primary);
38
- outline-offset:-1px; } }
39
- @media (prefers-reduced-motion: no-preference){
40
- .iui-expandable-block > .iui-header{
41
- transition:background-color 0.2s ease-out; } }
42
- .iui-expandable-block > .iui-header > .iui-icon,
43
- .iui-expandable-block > .iui-header > .iui-status-icon{
44
- display:inline-flex;
45
- flex-shrink:0;
46
- width:16px;
47
- height:16px; }
48
- .iui-expandable-block > .iui-header > .iui-icon{
49
- fill:rgba(0, 0, 0, 0.8);
50
- fill:var(--iui-icons-color-actionable); }
51
- @media (prefers-reduced-motion: no-preference){
52
- .iui-expandable-block > .iui-header > .iui-icon{
53
- transition:transform 0.2s ease-out; } }
54
- .iui-expandable-block > .iui-header > .iui-status-icon{
55
- margin-left:12px;
56
- fill:rgba(0, 0, 0, 0.4);
57
- fill:var(--iui-icons-color); }
58
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
59
- fill:#008BE1;
60
- fill:var(--iui-icons-color-primary); }
61
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
62
- fill:#53A21A;
63
- fill:var(--iui-icons-color-positive); }
64
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
65
- fill:#F18B12;
66
- fill:var(--iui-icons-color-warning); }
67
- .iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
68
- fill:#D30A0A;
69
- fill:var(--iui-icons-color-negative); }
70
- .iui-expandable-block > .iui-header .iui-expandable-block-label{
71
- display:flex;
72
- flex-direction:column;
73
- flex:auto;
74
- min-width:0;
75
- margin-left:12px;
76
- color:rgba(0, 0, 0, 0.8);
77
- color:var(--iui-text-color); }
78
- @media (prefers-reduced-motion: no-preference){
79
- .iui-expandable-block > .iui-header .iui-expandable-block-label{
80
- transition:color 0.2s ease; } }
81
- .iui-expandable-block > .iui-header .iui-title,
82
- .iui-expandable-block > .iui-header .iui-caption{
83
- white-space:nowrap;
84
- overflow:hidden;
85
- text-overflow:ellipsis; }
86
- .iui-expandable-block > .iui-header .iui-title{
87
- font-size:16px; }
88
- .iui-expandable-block > .iui-header .iui-caption{
89
- font-size:12px;
90
- color:rgba(0, 0, 0, 0.4);
91
- color:var(--iui-text-color-muted); }
92
- .iui-expandable-block > .iui-header:focus-visible{
93
- outline:1px solid var(--iui-color-foreground-primary);
94
- outline-offset:-1px; }
95
- @supports not selector(*:focus-visible){
96
- .iui-expandable-block > .iui-header:focus{
97
- outline:1px solid var(--iui-color-foreground-primary);
98
- outline-offset:-1px; } }
99
- .iui-expandable-block .iui-expandable-content{
100
- overflow:hidden;
101
- box-sizing:border-box;
102
- border-bottom:1px solid #DCE0E3;
103
- border-right:1px solid #DCE0E3;
104
- border-left:1px solid #DCE0E3;
105
- border-bottom:1px solid var(--iui-color-background-4);
106
- border-right:1px solid var(--iui-color-background-4);
107
- border-left:1px solid var(--iui-color-background-4); }
108
- .iui-expandable-block .iui-expandable-content.iui-enter{
109
- opacity:0; }
110
- .iui-expandable-block .iui-expandable-content.iui-enter-active{
111
- opacity:1; }
112
- @media (prefers-reduced-motion: no-preference){
113
- .iui-expandable-block .iui-expandable-content.iui-enter-active{
114
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
115
- .iui-expandable-block .iui-expandable-content.iui-exit{
116
- opacity:1; }
117
- .iui-expandable-block .iui-expandable-content.iui-exit-active{
118
- opacity:0; }
119
- @media (prefers-reduced-motion: no-preference){
120
- .iui-expandable-block .iui-expandable-content.iui-exit-active{
121
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
122
- .iui-expandable-block .iui-expandable-content > div{
123
- padding:11px 12px; }
124
- .iui-expandable-block:hover > .iui-header{
125
- background-color:#DCE0E3;
126
- background-color:var(--iui-color-background-4); }
127
- .iui-expandable-block:hover > .iui-header > .iui-icon{
128
- fill:black;
129
- fill:var(--iui-icons-color-actionable-hover); }
130
- .iui-expandable-block:hover > .iui-header .iui-caption,
131
- .iui-expandable-block:hover > .iui-header .iui-title{
132
- color:#000;
133
- color:var(--iui-color-foreground-body); }
134
- @media (prefers-reduced-motion: no-preference){
135
- .iui-expandable-block:hover > .iui-header .iui-caption,
136
- .iui-expandable-block:hover > .iui-header .iui-title{
137
- transition:color 0.2s ease; } }
138
- .iui-expandable-block.iui-expanded > .iui-header{
139
- background-color:#EEF0F3;
140
- border-left:1px solid #DCE0E3;
141
- border-top:1px solid #DCE0E3;
142
- border-right:1px solid #DCE0E3;
143
- background-color:var(--iui-color-background-3);
144
- border-left:1px solid var(--iui-color-background-4);
145
- border-top:1px solid var(--iui-color-background-4);
146
- border-right:1px solid var(--iui-color-background-4); }
147
- .iui-expandable-block.iui-expanded > .iui-header:hover{
148
- background-color:#DCE0E3;
149
- background-color:var(--iui-color-background-4); }
150
- .iui-expandable-block.iui-expanded > .iui-header:hover{
151
- background-color:#DCE0E3;
152
- background-color:var(--iui-color-background-4); }
153
- .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
154
- transform:rotate(90deg); }
155
- .iui-expandable-block.iui-small .iui-header{
156
- padding:5.5px 8px; }
157
- .iui-expandable-block.iui-small .iui-header > .iui-icon{
158
- width:12px;
159
- height:12px; }
160
- .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
161
- margin-left:8px; }
162
- .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
163
- margin-left:8px; }
164
- .iui-expandable-block.iui-borderless,
165
- .iui-expandable-block.iui-borderless .iui-header,
166
- .iui-expandable-block.iui-borderless .iui-expandable-content{
167
- background-color:transparent;
168
- border:initial; }
169
- .iui-expandable-block.iui-borderless .iui-header{
170
- border-radius:3px; }
171
- .iui-expandable-block.iui-borderless .iui-header:hover{
172
- background-color:rgba(0, 0, 0, 0.1);
173
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
174
- .iui-expandable-block.iui-borderless .iui-expandable-content > div{
175
- padding:0; }
46
+ transition:background-color 0.2s ease-out;
47
+ }
48
+ }
49
+ .iui-expandable-block > .iui-header > .iui-icon,
50
+ .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){
61
+ .iui-expandable-block > .iui-header > .iui-icon{
62
+ transition:transform 0.2s ease-out;
63
+ }
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
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
71
+ fill:#008BE1;
72
+ fill:var(--iui-icons-color-primary);
73
+ }
74
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
75
+ fill:#53A21A;
76
+ fill:var(--iui-icons-color-positive);
77
+ }
78
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
79
+ fill:#F18B12;
80
+ fill:var(--iui-icons-color-warning);
81
+ }
82
+ .iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
83
+ fill:#D30A0A;
84
+ fill:var(--iui-icons-color-negative);
85
+ }
86
+ .iui-expandable-block > .iui-header .iui-expandable-block-label{
87
+ display:flex;
88
+ flex-direction:column;
89
+ flex:auto;
90
+ min-width:0;
91
+ margin-left:12px;
92
+ color:rgba(0, 0, 0, 0.8);
93
+ color:var(--iui-text-color);
94
+ }
95
+ @media (prefers-reduced-motion: no-preference){
96
+ .iui-expandable-block > .iui-header .iui-expandable-block-label{
97
+ transition:color 0.2s ease;
98
+ }
99
+ }
100
+ .iui-expandable-block > .iui-header .iui-title,
101
+ .iui-expandable-block > .iui-header .iui-caption{
102
+ white-space:nowrap;
103
+ overflow:hidden;
104
+ text-overflow:ellipsis;
105
+ }
106
+ .iui-expandable-block > .iui-header .iui-title{
107
+ font-size:16px;
108
+ }
109
+ .iui-expandable-block > .iui-header .iui-caption{
110
+ font-size:12px;
111
+ color:rgba(0, 0, 0, 0.4);
112
+ color:var(--iui-text-color-muted);
113
+ }
114
+ .iui-expandable-block > .iui-header:focus-visible{
115
+ outline:1px solid var(--iui-color-foreground-primary);
116
+ outline-offset:-1px;
117
+ }
118
+ @supports not selector(*:focus-visible){
119
+ .iui-expandable-block > .iui-header:focus{
120
+ outline:1px solid var(--iui-color-foreground-primary);
121
+ outline-offset:-1px;
122
+ }
123
+ }
124
+ .iui-expandable-block .iui-expandable-content{
125
+ overflow:hidden;
126
+ box-sizing:border-box;
127
+ border-bottom:1px solid #DCE0E3;
128
+ border-right:1px solid #DCE0E3;
129
+ border-left:1px solid #DCE0E3;
130
+ border-bottom:1px solid var(--iui-color-background-4);
131
+ border-right:1px solid var(--iui-color-background-4);
132
+ border-left:1px solid var(--iui-color-background-4);
133
+ }
134
+ .iui-expandable-block .iui-expandable-content.iui-enter{
135
+ opacity:0;
136
+ }
137
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
138
+ opacity:1;
139
+ }
140
+ @media (prefers-reduced-motion: no-preference){
141
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
142
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
143
+ }
144
+ }
145
+ .iui-expandable-block .iui-expandable-content.iui-exit{
146
+ opacity:1;
147
+ }
148
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
149
+ opacity:0;
150
+ }
151
+ @media (prefers-reduced-motion: no-preference){
152
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
153
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
154
+ }
155
+ }
156
+ .iui-expandable-block .iui-expandable-content > div{
157
+ padding:11px 12px;
158
+ }
159
+ .iui-expandable-block:hover > .iui-header{
160
+ background-color:#DCE0E3;
161
+ background-color:var(--iui-color-background-4);
162
+ }
163
+ .iui-expandable-block:hover > .iui-header > .iui-icon{
164
+ fill:black;
165
+ fill:var(--iui-icons-color-actionable-hover);
166
+ }
167
+ .iui-expandable-block:hover > .iui-header .iui-caption,
168
+ .iui-expandable-block:hover > .iui-header .iui-title{
169
+ color:#000;
170
+ color:var(--iui-color-foreground-body);
171
+ }
172
+ @media (prefers-reduced-motion: no-preference){
173
+ .iui-expandable-block:hover > .iui-header .iui-caption,
174
+ .iui-expandable-block:hover > .iui-header .iui-title{
175
+ transition:color 0.2s ease;
176
+ }
177
+ }
178
+ .iui-expandable-block.iui-expanded > .iui-header{
179
+ background-color:#EEF0F3;
180
+ border-left:1px solid #DCE0E3;
181
+ border-top:1px solid #DCE0E3;
182
+ border-right:1px solid #DCE0E3;
183
+ background-color:var(--iui-color-background-3);
184
+ border-left:1px solid var(--iui-color-background-4);
185
+ border-top:1px solid var(--iui-color-background-4);
186
+ border-right:1px solid var(--iui-color-background-4);
187
+ }
188
+ .iui-expandable-block.iui-expanded > .iui-header:hover{
189
+ background-color:#DCE0E3;
190
+ background-color:var(--iui-color-background-4);
191
+ }
192
+ .iui-expandable-block.iui-expanded > .iui-header:hover{
193
+ background-color:#DCE0E3;
194
+ background-color:var(--iui-color-background-4);
195
+ }
196
+ .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
197
+ transform:rotate(90deg);
198
+ }
199
+ .iui-expandable-block.iui-small .iui-header{
200
+ padding:5.5px 8px;
201
+ }
202
+ .iui-expandable-block.iui-small .iui-header > .iui-icon{
203
+ width:12px;
204
+ height:12px;
205
+ }
206
+ .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
207
+ margin-left:8px;
208
+ }
209
+ .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
210
+ margin-left:8px;
211
+ }
212
+ .iui-expandable-block.iui-borderless,
213
+ .iui-expandable-block.iui-borderless .iui-header,
214
+ .iui-expandable-block.iui-borderless .iui-expandable-content{
215
+ background-color:transparent;
216
+ border:initial;
217
+ }
218
+ .iui-expandable-block.iui-borderless .iui-header{
219
+ border-radius:3px;
220
+ }
221
+ .iui-expandable-block.iui-borderless .iui-header:hover{
222
+ background-color:rgba(0, 0, 0, 0.1);
223
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
224
+ }
225
+ .iui-expandable-block.iui-borderless .iui-expandable-content > div{
226
+ padding:0;
227
+ }
package/css/fieldset.css CHANGED
@@ -12,21 +12,25 @@
12
12
  border:1px solid #DCE0E3;
13
13
  background-color:#FFF;
14
14
  border:1px solid var(--iui-color-background-4);
15
- background-color:var(--iui-color-background-1); }
16
- .iui-fieldset legend{
17
- font-size:16px;
18
- padding:1.5px 8px;
19
- border-radius:3px;
20
- -webkit-user-select:none;
21
- -moz-user-select:none;
22
- -ms-user-select:none;
23
- user-select:none;
24
- background-color:#DCE0E3;
25
- color:rgba(0, 0, 0, 0.8);
26
- background-color:var(--iui-color-background-4);
27
- color:var(--iui-text-color); }
28
- .iui-fieldset[disabled]{
29
- cursor:not-allowed; }
30
- .iui-fieldset[disabled] legend{
31
- color:rgba(0, 0, 0, 0.4);
32
- color:var(--iui-text-color-muted); }
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:3px;
21
+ -webkit-user-select:none;
22
+ -moz-user-select:none;
23
+ -ms-user-select:none;
24
+ user-select:none;
25
+ background-color:#DCE0E3;
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);
36
+ }