@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  23. package/css/modal.css +114 -44
  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 +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/icon.css CHANGED
@@ -7,111 +7,141 @@
7
7
  fill:var(--iui-icons-color);
8
8
  display:inline-flex;
9
9
  width:16px;
10
- height:16px; }
11
- .iui-icons-default.iui-informational{
12
- fill:#008BE1;
13
- fill:var(--iui-icons-color-primary); }
14
- .iui-icons-default.iui-positive{
15
- fill:#53A21A;
16
- fill:var(--iui-icons-color-positive); }
17
- .iui-icons-default.iui-warning{
18
- fill:#F18B12;
19
- fill:var(--iui-icons-color-warning); }
20
- .iui-icons-default.iui-negative{
21
- fill:#D30A0A;
22
- fill:var(--iui-icons-color-negative); }
10
+ height:16px;
11
+ }
12
+ .iui-icons-default.iui-informational{
13
+ fill:#008ae0;
14
+ fill:var(--iui-icons-color-primary);
15
+ }
16
+ .iui-icons-default.iui-positive{
17
+ fill:#53a21a;
18
+ fill:var(--iui-icons-color-positive);
19
+ }
20
+ .iui-icons-default.iui-warning{
21
+ fill:#f18d13;
22
+ fill:var(--iui-icons-color-warning);
23
+ }
24
+ .iui-icons-default.iui-negative{
25
+ fill:#d10a0a;
26
+ fill:var(--iui-icons-color-negative);
27
+ }
23
28
 
24
29
  .iui-icons-small{
25
30
  fill:rgba(0, 0, 0, 0.4);
26
31
  fill:var(--iui-icons-color);
27
32
  display:inline-flex;
28
33
  width:12px;
29
- height:12px; }
30
- .iui-icons-small.iui-informational{
31
- fill:#008BE1;
32
- fill:var(--iui-icons-color-primary); }
33
- .iui-icons-small.iui-positive{
34
- fill:#53A21A;
35
- fill:var(--iui-icons-color-positive); }
36
- .iui-icons-small.iui-warning{
37
- fill:#F18B12;
38
- fill:var(--iui-icons-color-warning); }
39
- .iui-icons-small.iui-negative{
40
- fill:#D30A0A;
41
- fill:var(--iui-icons-color-negative); }
34
+ height:12px;
35
+ }
36
+ .iui-icons-small.iui-informational{
37
+ fill:#008ae0;
38
+ fill:var(--iui-icons-color-primary);
39
+ }
40
+ .iui-icons-small.iui-positive{
41
+ fill:#53a21a;
42
+ fill:var(--iui-icons-color-positive);
43
+ }
44
+ .iui-icons-small.iui-warning{
45
+ fill:#f18d13;
46
+ fill:var(--iui-icons-color-warning);
47
+ }
48
+ .iui-icons-small.iui-negative{
49
+ fill:#d10a0a;
50
+ fill:var(--iui-icons-color-negative);
51
+ }
42
52
 
43
53
  .iui-icons-large{
44
54
  fill:rgba(0, 0, 0, 0.4);
45
55
  fill:var(--iui-icons-color);
46
56
  display:inline-flex;
47
57
  width:24px;
48
- height:24px; }
49
- .iui-icons-large.iui-informational{
50
- fill:#008BE1;
51
- fill:var(--iui-icons-color-primary); }
52
- .iui-icons-large.iui-positive{
53
- fill:#53A21A;
54
- fill:var(--iui-icons-color-positive); }
55
- .iui-icons-large.iui-warning{
56
- fill:#F18B12;
57
- fill:var(--iui-icons-color-warning); }
58
- .iui-icons-large.iui-negative{
59
- fill:#D30A0A;
60
- fill:var(--iui-icons-color-negative); }
58
+ height:24px;
59
+ }
60
+ .iui-icons-large.iui-informational{
61
+ fill:#008ae0;
62
+ fill:var(--iui-icons-color-primary);
63
+ }
64
+ .iui-icons-large.iui-positive{
65
+ fill:#53a21a;
66
+ fill:var(--iui-icons-color-positive);
67
+ }
68
+ .iui-icons-large.iui-warning{
69
+ fill:#f18d13;
70
+ fill:var(--iui-icons-color-warning);
71
+ }
72
+ .iui-icons-large.iui-negative{
73
+ fill:#d10a0a;
74
+ fill:var(--iui-icons-color-negative);
75
+ }
61
76
 
62
77
  .iui-icons-xl{
63
78
  fill:rgba(0, 0, 0, 0.4);
64
79
  fill:var(--iui-icons-color);
65
80
  display:inline-flex;
66
81
  width:32px;
67
- height:32px; }
68
- .iui-icons-xl.iui-informational{
69
- fill:#008BE1;
70
- fill:var(--iui-icons-color-primary); }
71
- .iui-icons-xl.iui-positive{
72
- fill:#53A21A;
73
- fill:var(--iui-icons-color-positive); }
74
- .iui-icons-xl.iui-warning{
75
- fill:#F18B12;
76
- fill:var(--iui-icons-color-warning); }
77
- .iui-icons-xl.iui-negative{
78
- fill:#D30A0A;
79
- fill:var(--iui-icons-color-negative); }
82
+ height:32px;
83
+ }
84
+ .iui-icons-xl.iui-informational{
85
+ fill:#008ae0;
86
+ fill:var(--iui-icons-color-primary);
87
+ }
88
+ .iui-icons-xl.iui-positive{
89
+ fill:#53a21a;
90
+ fill:var(--iui-icons-color-positive);
91
+ }
92
+ .iui-icons-xl.iui-warning{
93
+ fill:#f18d13;
94
+ fill:var(--iui-icons-color-warning);
95
+ }
96
+ .iui-icons-xl.iui-negative{
97
+ fill:#d10a0a;
98
+ fill:var(--iui-icons-color-negative);
99
+ }
80
100
 
81
101
  .iui-icons-xxl{
82
102
  fill:rgba(0, 0, 0, 0.4);
83
103
  fill:var(--iui-icons-color);
84
104
  display:inline-flex;
85
105
  width:48px;
86
- height:48px; }
87
- .iui-icons-xxl.iui-informational{
88
- fill:#008BE1;
89
- fill:var(--iui-icons-color-primary); }
90
- .iui-icons-xxl.iui-positive{
91
- fill:#53A21A;
92
- fill:var(--iui-icons-color-positive); }
93
- .iui-icons-xxl.iui-warning{
94
- fill:#F18B12;
95
- fill:var(--iui-icons-color-warning); }
96
- .iui-icons-xxl.iui-negative{
97
- fill:#D30A0A;
98
- fill:var(--iui-icons-color-negative); }
106
+ height:48px;
107
+ }
108
+ .iui-icons-xxl.iui-informational{
109
+ fill:#008ae0;
110
+ fill:var(--iui-icons-color-primary);
111
+ }
112
+ .iui-icons-xxl.iui-positive{
113
+ fill:#53a21a;
114
+ fill:var(--iui-icons-color-positive);
115
+ }
116
+ .iui-icons-xxl.iui-warning{
117
+ fill:#f18d13;
118
+ fill:var(--iui-icons-color-warning);
119
+ }
120
+ .iui-icons-xxl.iui-negative{
121
+ fill:#d10a0a;
122
+ fill:var(--iui-icons-color-negative);
123
+ }
99
124
 
100
125
  .iui-icons-3xl{
101
126
  fill:rgba(0, 0, 0, 0.4);
102
127
  fill:var(--iui-icons-color);
103
128
  display:inline-flex;
104
129
  width:64px;
105
- height:64px; }
106
- .iui-icons-3xl.iui-informational{
107
- fill:#008BE1;
108
- fill:var(--iui-icons-color-primary); }
109
- .iui-icons-3xl.iui-positive{
110
- fill:#53A21A;
111
- fill:var(--iui-icons-color-positive); }
112
- .iui-icons-3xl.iui-warning{
113
- fill:#F18B12;
114
- fill:var(--iui-icons-color-warning); }
115
- .iui-icons-3xl.iui-negative{
116
- fill:#D30A0A;
117
- fill:var(--iui-icons-color-negative); }
130
+ height:64px;
131
+ }
132
+ .iui-icons-3xl.iui-informational{
133
+ fill:#008ae0;
134
+ fill:var(--iui-icons-color-primary);
135
+ }
136
+ .iui-icons-3xl.iui-positive{
137
+ fill:#53a21a;
138
+ fill:var(--iui-icons-color-positive);
139
+ }
140
+ .iui-icons-3xl.iui-warning{
141
+ fill:#f18d13;
142
+ fill:var(--iui-icons-color-warning);
143
+ }
144
+ .iui-icons-3xl.iui-negative{
145
+ fill:#d10a0a;
146
+ fill:var(--iui-icons-color-negative);
147
+ }
@@ -4,154 +4,198 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  .iui-information-panel-wrapper{
6
6
  position:relative;
7
- overflow:hidden; }
7
+ overflow:hidden;
8
+ }
8
9
 
9
10
  .iui-information-panel{
10
11
  position:absolute;
11
12
  opacity:0;
13
+ visibility:hidden;
12
14
  display:flex;
13
15
  flex-direction:column;
14
16
  box-sizing:border-box;
15
17
  max-width:100%;
16
18
  max-height:100%;
17
19
  z-index:2;
18
- background-color:#FFF;
19
- background-color:var(--iui-color-background-1); }
20
- @media (prefers-reduced-motion: no-preference){
21
- .iui-information-panel{
22
- transition:transform 0.2s ease-out, opacity 0.2s ease; } }
23
- .iui-information-panel > .iui-resizer{
24
- display:none;
25
- position:absolute;
26
- touch-action:none; }
27
- .iui-information-panel > .iui-resizer > .iui-resizer-bar{
28
- background-color:#C7CCD1;
29
- background-color:var(--iui-color-background-5); }
30
- .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
31
- background-color:#008BE1;
32
- background-color:var(--iui-color-foreground-primary); }
33
- .iui-information-panel .iui-information-header,
34
- .iui-information-panel .iui-information-body{
35
- padding-left:12px;
36
- padding-right:12px;
37
- box-sizing:border-box; }
38
- .iui-information-panel .iui-information-header{
39
- height:55px;
40
- flex-shrink:0;
41
- display:flex;
42
- align-items:center;
43
- justify-content:space-between;
44
- background-color:#EEF0F3;
45
- background-color:var(--iui-color-background-3); }
46
- .iui-information-panel .iui-information-header .iui-information-header-label{
47
- display:flex;
48
- align-items:center;
49
- overflow:hidden; }
50
- .iui-information-panel .iui-information-header .iui-information-header-label > *{
51
- white-space:nowrap;
52
- overflow:hidden;
53
- text-overflow:ellipsis;
54
- -webkit-user-select:all;
55
- -moz-user-select:all;
56
- user-select:all; }
57
- .iui-information-panel .iui-information-header .iui-information-header-label svg{
58
- display:flex;
59
- width:24px;
60
- height:24px;
61
- margin-right:8px;
62
- flex-shrink:0;
63
- fill:rgba(0, 0, 0, 0.4);
64
- fill:var(--iui-icons-color); }
65
- .iui-information-panel .iui-information-header .iui-information-header-actions{
66
- flex-shrink:0;
67
- margin-left:8px; }
68
- .iui-information-panel .iui-information-body{
69
- padding-top:11px;
70
- padding-bottom:11px;
71
- height:100%;
72
- overflow-x:hidden;
73
- overflow-y:auto;
74
- overflow-y:overlay; }
75
- .iui-information-panel .iui-information-body > hr{
76
- border-color:#DCE0E3;
77
- border-color:var(--iui-color-background-4); }
78
- .iui-information-panel.iui-right{
79
- top:0;
80
- right:0;
81
- width:384px;
82
- min-width:192px;
83
- height:100%;
84
- transform:translateX(100%);
85
- box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
86
- -webkit-clip-path:inset(0 0 0 -15px);
87
- clip-path:inset(0 0 0 -15px); }
88
- .iui-information-panel.iui-right > .iui-resizer{
89
- height:100%;
90
- width:16px;
91
- top:0;
92
- cursor:ew-resize;
93
- justify-content:center; }
94
- .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
95
- height:100%;
96
- width:1px; }
97
- @media (prefers-reduced-motion: no-preference){
98
- .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
99
- transition:background-color 0.2s ease-out, width 0.2s ease-out; } }
100
- .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
101
- width:4px; }
102
- .iui-information-panel.iui-right > .iui-resizer{
103
- left:-8px; }
104
- .iui-information-panel.iui-bottom{
105
- left:0;
106
- bottom:0;
107
- height:384px;
108
- min-height:192px;
109
- width:100%;
110
- transform:translateY(100%);
111
- box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
112
- -webkit-clip-path:inset(-15px 0 0 0);
113
- clip-path:inset(-15px 0 0 0); }
114
- .iui-information-panel.iui-bottom > .iui-resizer{
115
- width:100%;
116
- height:16px;
117
- left:0;
118
- cursor:ns-resize;
119
- align-items:center; }
120
- .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
121
- width:100%;
122
- height:1px; }
123
- @media (prefers-reduced-motion: no-preference){
124
- .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
125
- transition:background-color 0.2s ease-out, height 0.2s ease-out; } }
126
- .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
127
- height:4px; }
128
- .iui-information-panel.iui-bottom > .iui-resizer{
129
- top:-8px; }
20
+ background-color:white;
21
+ background-color:var(--iui-color-background-1);
22
+ }
23
+ @media (prefers-reduced-motion: no-preference){
24
+ .iui-information-panel{
25
+ transition:visibility 0s 0.2s ease-in, transform 0.2s ease-out, opacity 0.2s ease;
26
+ }
27
+ }
28
+ .iui-information-panel > .iui-resizer{
29
+ display:none;
30
+ position:absolute;
31
+ touch-action:none;
32
+ }
33
+ .iui-information-panel > .iui-resizer > .iui-resizer-bar{
34
+ background-color:#c7ccd1;
35
+ background-color:var(--iui-color-background-border);
36
+ }
37
+ .iui-information-panel > .iui-resizer:hover > .iui-resizer-bar{
38
+ background-color:#008ae0;
39
+ background-color:var(--iui-color-foreground-primary);
40
+ }
41
+ .iui-information-panel .iui-information-header,
42
+ .iui-information-panel .iui-information-body{
43
+ padding-left:12px;
44
+ padding-right:12px;
45
+ box-sizing:border-box;
46
+ }
47
+ .iui-information-panel .iui-information-header{
48
+ height:55px;
49
+ flex-shrink:0;
50
+ display:flex;
51
+ align-items:center;
52
+ justify-content:space-between;
53
+ background-color:#edeff2;
54
+ background-color:var(--iui-color-background-3);
55
+ }
56
+ .iui-information-panel .iui-information-header .iui-information-header-label{
57
+ display:flex;
58
+ align-items:center;
59
+ overflow:hidden;
60
+ }
61
+ .iui-information-panel .iui-information-header .iui-information-header-label > *{
62
+ white-space:nowrap;
63
+ overflow:hidden;
64
+ text-overflow:ellipsis;
65
+ -webkit-user-select:all;
66
+ -moz-user-select:all;
67
+ user-select:all;
68
+ }
69
+ .iui-information-panel .iui-information-header .iui-information-header-label svg{
70
+ display:flex;
71
+ width:24px;
72
+ height:24px;
73
+ margin-right:8px;
74
+ flex-shrink:0;
75
+ fill:rgba(0, 0, 0, 0.4);
76
+ fill:var(--iui-icons-color);
77
+ }
78
+ .iui-information-panel .iui-information-header .iui-information-header-actions{
79
+ flex-shrink:0;
80
+ margin-left:8px;
81
+ }
82
+ .iui-information-panel .iui-information-body{
83
+ padding-top:11px;
84
+ padding-bottom:11px;
85
+ height:100%;
86
+ overflow-x:hidden;
87
+ overflow-y:auto;
88
+ overflow-y:overlay;
89
+ }
90
+ .iui-information-panel .iui-information-body > hr{
91
+ border-color:#c7ccd1;
92
+ border-color:var(--iui-color-background-border);
93
+ }
94
+ .iui-information-panel.iui-right{
95
+ top:0;
96
+ right:0;
97
+ width:384px;
98
+ min-width:192px;
99
+ height:100%;
100
+ transform:translateX(100%);
101
+ box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
102
+ -webkit-clip-path:inset(0 0 0 -15px);
103
+ clip-path:inset(0 0 0 -15px);
104
+ }
105
+ .iui-information-panel.iui-right > .iui-resizer{
106
+ height:100%;
107
+ width:16px;
108
+ top:0;
109
+ cursor:ew-resize;
110
+ justify-content:center;
111
+ }
112
+ .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
113
+ height:100%;
114
+ width:1px;
115
+ }
116
+ @media (prefers-reduced-motion: no-preference){
117
+ .iui-information-panel.iui-right > .iui-resizer > .iui-resizer-bar{
118
+ transition:background-color 0.2s ease-out, width 0.2s ease-out;
119
+ }
120
+ }
121
+ .iui-information-panel.iui-right > .iui-resizer:hover > .iui-resizer-bar{
122
+ width:4px;
123
+ }
124
+ .iui-information-panel.iui-right > .iui-resizer{
125
+ left:-8px;
126
+ }
127
+ .iui-information-panel.iui-bottom{
128
+ left:0;
129
+ bottom:0;
130
+ height:384px;
131
+ min-height:192px;
132
+ width:100%;
133
+ transform:translateY(100%);
134
+ box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
135
+ -webkit-clip-path:inset(-15px 0 0 0);
136
+ clip-path:inset(-15px 0 0 0);
137
+ }
138
+ .iui-information-panel.iui-bottom > .iui-resizer{
139
+ width:100%;
140
+ height:16px;
141
+ left:0;
142
+ cursor:ns-resize;
143
+ align-items:center;
144
+ }
145
+ .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
146
+ width:100%;
147
+ height:1px;
148
+ }
149
+ @media (prefers-reduced-motion: no-preference){
150
+ .iui-information-panel.iui-bottom > .iui-resizer > .iui-resizer-bar{
151
+ transition:background-color 0.2s ease-out, height 0.2s ease-out;
152
+ }
153
+ }
154
+ .iui-information-panel.iui-bottom > .iui-resizer:hover > .iui-resizer-bar{
155
+ height:4px;
156
+ }
157
+ .iui-information-panel.iui-bottom > .iui-resizer{
158
+ top:-8px;
159
+ }
160
+ .iui-information-panel.iui-visible{
161
+ opacity:1;
162
+ visibility:visible;
163
+ transform:translate(0);
164
+ }
165
+ @media (prefers-reduced-motion: no-preference){
130
166
  .iui-information-panel.iui-visible{
131
- opacity:1;
132
- transform:translate(0); }
133
- .iui-information-panel.iui-visible > .iui-resizer{
134
- display:flex; }
167
+ transition:transform 0.2s ease-out, opacity 0.2s ease;
168
+ }
169
+ }
170
+ .iui-information-panel.iui-visible > .iui-resizer{
171
+ display:flex;
172
+ }
135
173
 
136
174
  .iui-information-body-content{
137
175
  display:-ms-grid;
138
- display:grid; }
139
- .iui-information-body-content .iui-input-label{
140
- font-weight:400;
141
- color:rgba(0, 0, 0, 0.4);
142
- color:var(--iui-text-color-muted); }
143
- .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
144
- margin-bottom:11px; }
145
- .iui-information-body-content.iui-inline{
146
- row-gap:11px;
147
- -ms-grid-columns:auto 1fr;
148
- grid-template-columns:auto 1fr;
149
- align-items:center; }
150
- .iui-information-body-content.iui-inline .iui-input-label{
151
- margin:0 16px 0 0;
152
- -ms-grid-column-span:1;
153
- -ms-grid-column-align:end;
154
- justify-self:end;
155
- text-align:end; }
156
- .iui-information-body-content.iui-inline .iui-input-label.iui-required{
157
- margin-right:6px; }
176
+ display:grid;
177
+ }
178
+ .iui-information-body-content .iui-input-label{
179
+ font-weight:400;
180
+ color:rgba(0, 0, 0, 0.4);
181
+ color:var(--iui-text-color-muted);
182
+ }
183
+ .iui-information-body-content:not(.iui-inline) > *:nth-child(even):not(:last-child){
184
+ margin-bottom:11px;
185
+ }
186
+ .iui-information-body-content.iui-inline{
187
+ row-gap:11px;
188
+ -ms-grid-columns:auto 1fr;
189
+ grid-template-columns:auto 1fr;
190
+ align-items:center;
191
+ }
192
+ .iui-information-body-content.iui-inline .iui-input-label{
193
+ margin:0 16px 0 0;
194
+ -ms-grid-column-span:1;
195
+ -ms-grid-column-align:end;
196
+ justify-self:end;
197
+ text-align:end;
198
+ }
199
+ .iui-information-body-content.iui-inline .iui-input-label.iui-required{
200
+ margin-right:6px;
201
+ }