superdesk-ui-framework 3.0.41 → 3.0.43

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 (104) hide show
  1. package/app/styles/_accessibility.scss +349 -310
  2. package/app/styles/_alerts.scss +102 -71
  3. package/app/styles/_animations.scss +29 -16
  4. package/app/styles/_avatar.scss +159 -140
  5. package/app/styles/_badge.scss +11 -5
  6. package/app/styles/_big-icon-font.scss +21 -9
  7. package/app/styles/_boxed-list.scss +72 -47
  8. package/app/styles/_buttons.scss +266 -177
  9. package/app/styles/_carousel.scss +58 -45
  10. package/app/styles/_content-divider.scss +28 -2
  11. package/app/styles/_drag-drop.scss +3 -0
  12. package/app/styles/_empty-states.scss +21 -13
  13. package/app/styles/_hamburger.scss +142 -144
  14. package/app/styles/_helpers.scss +297 -93
  15. package/app/styles/_icon-font.scss +75 -43
  16. package/app/styles/_icon-labels.scss +11 -1
  17. package/app/styles/_labels.scss +27 -14
  18. package/app/styles/_loaders.scss +2 -1
  19. package/app/styles/_master-desk.scss +67 -31
  20. package/app/styles/_mixins.scss +40 -20
  21. package/app/styles/_modals.scss +112 -56
  22. package/app/styles/_panel-info.scss +38 -34
  23. package/app/styles/_popover.scss +0 -1
  24. package/app/styles/_publisher-styles.scss +132 -122
  25. package/app/styles/_sd-tag-input.scss +104 -24
  26. package/app/styles/_simple-list.scss +89 -66
  27. package/app/styles/_spinner.scss +24 -17
  28. package/app/styles/_table-list.scss +114 -80
  29. package/app/styles/_tables.scss +14 -2
  30. package/app/styles/_tabs-vertical.scss +46 -43
  31. package/app/styles/_tabs.scss +97 -87
  32. package/app/styles/_tag-labels.scss +26 -11
  33. package/app/styles/_thumb-carousel.scss +37 -11
  34. package/app/styles/_toggle-box.scss +27 -7
  35. package/app/styles/_toggle-button.scss +5 -1
  36. package/app/styles/_tooltips.scss +284 -272
  37. package/app/styles/components/_card-item.scss +268 -192
  38. package/app/styles/components/_list-item.scss +261 -175
  39. package/app/styles/components/_sd-circular-progress.scss +109 -79
  40. package/app/styles/components/_sd-collapse-box.scss +45 -33
  41. package/app/styles/components/_sd-comment-box.scss +17 -12
  42. package/app/styles/components/_sd-dropzone.scss +32 -15
  43. package/app/styles/components/_sd-editor-popup.scss +29 -15
  44. package/app/styles/components/_sd-grid-item.scss +349 -237
  45. package/app/styles/components/_sd-loader.scss +1 -2
  46. package/app/styles/components/_sd-media-carousel.scss +119 -78
  47. package/app/styles/components/_sd-notification-panel.scss +2 -1
  48. package/app/styles/components/_sd-pagination.scss +27 -19
  49. package/app/styles/components/_sd-photo-preview.scss +82 -41
  50. package/app/styles/components/_sd-searchbar.scss +79 -51
  51. package/app/styles/components/_sd-toaster.scss +52 -30
  52. package/app/styles/components/_subnav.scss +230 -135
  53. package/app/styles/components/_theme-selector.scss +78 -53
  54. package/app/styles/components/sd-slider.scss +11 -7
  55. package/app/styles/design-tokens/_design-tokens-general.scss +31 -27
  56. package/app/styles/design-tokens/_new-colors.scss +3 -1
  57. package/app/styles/dropdowns/_basic-dropdown.scss +164 -86
  58. package/app/styles/dropdowns/_input-dropdown.scss +5 -2
  59. package/app/styles/dropdowns/_navigation_dropdown.scss +18 -4
  60. package/app/styles/dropdowns/_nested-dropdown.scss +11 -2
  61. package/app/styles/dropdowns/_other_dropdown.scss +9 -3
  62. package/app/styles/editor/_editor-buttons.scss +10 -6
  63. package/app/styles/editor/_editor-themes.scss +401 -350
  64. package/app/styles/form-elements/_autocomplete.scss +7 -1
  65. package/app/styles/form-elements/_checkbox.scss +230 -159
  66. package/app/styles/form-elements/_forms-general.scss +345 -285
  67. package/app/styles/form-elements/_input-preview.scss +15 -9
  68. package/app/styles/form-elements/_input-wrap.scss +77 -71
  69. package/app/styles/form-elements/_inputs.scss +668 -489
  70. package/app/styles/form-elements/_radio.scss +10 -5
  71. package/app/styles/form-elements/_switch.scss +27 -16
  72. package/app/styles/grids/_basic-grid.scss +83 -64
  73. package/app/styles/grids/_grid-layout.scss +301 -165
  74. package/app/styles/grids/_layout-grid.scss +85 -59
  75. package/app/styles/grids/_sd-kanban-list.scss +14 -4
  76. package/app/styles/interface-elements/_side-panel.scss +279 -200
  77. package/app/styles/layout/_basic-layout.scss +36 -34
  78. package/app/styles/layout/_container.scss +38 -31
  79. package/app/styles/layout/_editor.scss +57 -17
  80. package/app/styles/layout/_general.scss +81 -67
  81. package/app/styles/menus/_sd-bottom-tabs.scss +21 -12
  82. package/app/styles/menus/_sd-content-navigation.scss +20 -16
  83. package/app/styles/menus/_sd-left-navigation.scss +62 -49
  84. package/app/styles/menus/_sd-sidebar-menu.scss +365 -323
  85. package/app/styles/menus/_sd-top-menu.scss +16 -7
  86. package/app/styles/primereact/_pr-autocomplete.scss +2 -0
  87. package/app/styles/primereact/_pr-datepicker.scss +20 -7
  88. package/app/styles/primereact/_pr-dialog.scss +55 -47
  89. package/app/styles/primereact/_pr-dropdown.scss +27 -22
  90. package/app/styles/primereact/_pr-general.scss +3 -0
  91. package/app/styles/primereact/_pr-menu.scss +2 -1
  92. package/app/styles/primereact/_pr-skeleton.scss +1 -0
  93. package/app/styles/primereact/_pr-tag-input.scss +1 -0
  94. package/app/styles/variables/_colors.scss +168 -170
  95. package/app/styles/variables/_typography.scss +1 -2
  96. package/app-typescript/components/Form/InputWrapper.tsx +1 -1
  97. package/app-typescript/components/Menu.tsx +1 -1
  98. package/dist/examples.bundle.css +18 -16
  99. package/dist/examples.bundle.js +5 -7
  100. package/dist/superdesk-ui.bundle.css +4271 -3557
  101. package/dist/superdesk-ui.bundle.js +4 -6
  102. package/package.json +2 -2
  103. package/react/components/Form/InputWrapper.d.ts +1 -1
  104. package/react/components/Menu.js +1 -1
package/app/styles/form-elements/_forms-general.scss CHANGED
@@ -1,336 +1,396 @@
1
1
  .form__row {
2
- width:100%;
3
- padding-bottom: 2rem;
4
- &--flex {
5
- display: flex;
6
- align-items: baseline;
7
- }
8
- &--no-padding {
9
- padding-bottom: 0;
10
- }
11
- &--small-padding, &--s-padding {
12
- padding-bottom: 0.8rem;
13
- }
14
- &--l-padding {
15
- padding-bottom: 3rem;
16
- }
17
- &--xl-padding {
18
- padding-bottom: 4rem;
19
- }
20
- &--inner {
21
- padding-bottom: 0;
22
- padding-top: 1rem;
23
- }
24
- &--bordered {
25
- padding: 1rem 0;
26
- border-bottom: 1px solid rgba(123, 123, 123, 0.3);
27
- &:first-child, &:only-child {
28
- border-top: 1px solid rgba(123, 123, 123, 0.3);
29
- }
30
- }
31
- &--flex-NEW {
32
- display: flex;
33
- align-items: baseline;
34
- }
2
+ width: 100%;
3
+ padding-bottom: 2rem;
35
4
  }
36
5
 
37
6
  .form__row--flex {
38
- // behavior for simple inline form inputs
39
- .sd-line-input {
40
- flex-grow: 1;
41
- }
42
- .sd-line-input + .btn {
43
- flex-grow: 0;
44
- vertical-align: bottom;
45
- margin: 0 0 0 1.2rem;
46
- }
47
- .sd-line-input + .sd-line-input{
48
- margin-left: 1.2rem;
49
- }
50
- // For more complex inline form combinations an additional element that goes inside .form__row--flex container is provided.
51
- .form__row-item {
52
- flex-basis: 0;
53
- flex-grow: 1;
54
- margin: 0 0.6rem;
55
- &:first-child {
56
- margin-left: 0;
57
- }
58
- &:last-child {
59
- margin-right: 0;
60
- }
61
- &:only-child {
62
- margin: 0;
63
- }
64
- &--no-grow {
65
- flex-basis: auto;
66
- flex-grow: 0;
67
- }
68
- }
7
+ display: flex;
8
+ align-items: baseline;
9
+ }
10
+
11
+ .form__row--no-padding {
12
+ padding-bottom: 0;
13
+ }
14
+
15
+ .form__row--small-padding,
16
+ .form__row--s-padding {
17
+ padding-bottom: 0.8rem;
18
+ }
19
+
20
+ .form__row--l-padding {
21
+ padding-bottom: 3rem;
22
+ }
23
+
24
+ .form__row--xl-padding {
25
+ padding-bottom: 4rem;
26
+ }
27
+
28
+ .form__row--inner {
29
+ padding-bottom: 0;
30
+ padding-top: 1rem;
31
+ }
32
+
33
+ .form__row--bordered {
34
+ padding: 1rem 0;
35
+ border-bottom: 1px solid rgba(123, 123, 123, 0.3);
36
+
37
+ &:first-child,
38
+ &:only-child {
39
+ border-top: 1px solid rgba(123, 123, 123, 0.3);
40
+ }
41
+ }
42
+
43
+ .form__row--flex-NEW {
44
+ display: flex;
45
+ align-items: baseline;
46
+ }
47
+
48
+ .form__row--flex {
49
+ // behavior for simple inline form inputs
50
+ .sd-line-input {
51
+ flex-grow: 1;
52
+ }
53
+
54
+ .sd-line-input+.btn {
55
+ flex-grow: 0;
56
+ vertical-align: bottom;
57
+ margin: 0 0 0 1.2rem;
58
+ }
59
+
60
+ .sd-line-input+.sd-line-input {
61
+ margin-left: 1.2rem;
62
+ }
63
+
64
+ // For more complex inline form combinations an additional element that goes inside .form__row--flex container is provided.
65
+ .form__row-item {
66
+ flex-basis: 0;
67
+ flex-grow: 1;
68
+ margin: 0 0.6rem;
69
+
70
+ &:first-child {
71
+ margin-left: 0;
72
+ }
73
+
74
+ &:last-child {
75
+ margin-right: 0;
76
+ }
77
+
78
+ &:only-child {
79
+ margin: 0;
80
+ }
81
+ }
82
+
83
+ .form__row-item--no-grow {
84
+ flex-basis: auto;
85
+ flex-grow: 0;
86
+ }
69
87
  }
70
88
 
71
89
  .form__row,
72
90
  .form__row-item {
73
- label {
74
- vertical-align: middle;
75
- line-height: 1;
76
- margin-right: 0.6rem;
77
- @include transition(color, 0.15s, ease-in);
78
- &.form__row-label.form-label {
79
- display: block;
80
- width: 100%;
81
- margin-bottom: 1rem;
82
- margin-right: 0;
83
- }
84
- }
91
+ label {
92
+ vertical-align: middle;
93
+ line-height: 1;
94
+ margin-right: 0.6rem;
95
+ @include transition(color, 0.15s, ease-in);
96
+
97
+ &.form__row-label.form-label {
98
+ display: block;
99
+ width: 100%;
100
+ margin-bottom: 1rem;
101
+ margin-right: 0;
102
+ }
103
+ }
85
104
  }
105
+
86
106
  .label--active {
87
- color: var(--sd-colour-interactive--darken-10);
107
+ color: var(--sd-colour-interactive--darken-10);
88
108
  }
89
109
 
90
110
  .form__block {
91
- display: block;
92
- margin-bottom: 1rem;
93
- padding: 2rem;
94
- border-radius: $border-radius__base--x-small;
95
- box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 4px 0 rgba(0,0,0,0.2);
111
+ display: block;
112
+ margin-bottom: 1rem;
113
+ padding: 2rem;
114
+ border-radius: $border-radius__base--x-small;
115
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
96
116
  }
117
+
97
118
  .form__heading {
98
- font-size: 1.6rem;
99
- padding-bottom: 1.2rem;
100
- line-height: 120%;
119
+ font-size: 1.6rem;
120
+ padding-bottom: 1.2rem;
121
+ line-height: 120%;
101
122
  }
102
123
 
103
- /// ---------------------------- NEW FORM LAYOUT ---------------------------- ///
104
124
 
105
125
 
126
+ /// ---------------------------- NEW FORM LAYOUT ---------------------------- ///
106
127
 
107
128
  .form__group {
108
- display: flex;
109
- flex-direction: row;
110
- width:100%;
111
- align-items: flex-start;
112
- gap: $sd-base-increment * 2;
113
- &--condensed {
114
- gap: $sd-base-increment;
115
- }
116
- &--relaxed {
117
- gap: $sd-base-increment * 3;
118
- }
119
- .form__item {
120
- margin-bottom: $sd-base-increment * 2;
121
- }
122
- &--mb-0 {
123
- .form__item {
124
- margin-bottom: 0;
125
- }
126
- }
127
- &--mb-1 {
128
- .form__item {
129
- margin-bottom: $sd-base-increment;
130
- }
131
- }
132
- &--mb-2 {
133
- .form__item {
134
- margin-bottom: $sd-base-increment * 2;
135
- }
136
- }
137
- &--mb-3 {
138
- .form__item {
139
- margin-bottom: $sd-base-increment * 3;
140
- }
141
- }
142
- &--mb-4 {
143
- .form__item {
144
- margin-bottom: $sd-base-increment * 4;
145
- }
146
- }
147
- &--rows,
148
- &--vertical {
149
- flex-direction: column;
150
- align-items: stretch;
151
- .form__item {
152
- margin-bottom: 0 !important;
153
- }
154
- &.form__group--mb-0 {
155
- margin-bottom: 0;
156
-
157
- }
158
- &.form__group--mb-1 {
159
- margin-bottom: $sd-base-increment;
160
-
161
- }
162
- &.form__group--mb-2 {
163
- margin-bottom: $sd-base-increment * 2;
164
-
165
- }
166
- &.form__group--mb-3 {
167
- margin-bottom: $sd-base-increment * 3;
168
-
169
- }
170
- &.form__group--mb-4 {
171
- margin-bottom: $sd-base-increment * 4;
172
- }
173
- }
129
+ display: flex;
130
+ flex-direction: row;
131
+ width: 100%;
132
+ align-items: flex-start;
133
+ gap: $sd-base-increment * 2;
134
+
135
+ .form__item {
136
+ margin-bottom: $sd-base-increment * 2;
137
+ }
138
+ }
139
+
140
+ .form__group--condensed {
141
+ gap: $sd-base-increment;
142
+ }
143
+
144
+ .form__group--relaxed {
145
+ gap: $sd-base-increment * 3;
146
+ }
147
+
148
+ .form__group--mb-0 {
149
+ .form__item {
150
+ margin-bottom: 0;
151
+ }
152
+ }
153
+
154
+ .form__group--mb-1 {
155
+ .form__item {
156
+ margin-bottom: $sd-base-increment;
157
+ }
158
+ }
159
+
160
+ .form__group--mb-2 {
161
+ .form__item {
162
+ margin-bottom: $sd-base-increment * 2;
163
+ }
164
+ }
165
+
166
+ .form__group--mb-3 {
167
+ .form__item {
168
+ margin-bottom: $sd-base-increment * 3;
169
+ }
170
+ }
171
+
172
+ .form__group--mb-4 {
173
+ .form__item {
174
+ margin-bottom: $sd-base-increment * 4;
175
+ }
176
+ }
177
+
178
+ .form__group--rows,
179
+ .form__group--vertical {
180
+ flex-direction: column;
181
+ align-items: stretch;
182
+
183
+ .form__item {
184
+ margin-bottom: 0 !important;
185
+ }
186
+
187
+ &.form__group--mb-0 {
188
+ margin-bottom: 0;
189
+
190
+ }
191
+
192
+ &.form__group--mb-1 {
193
+ margin-bottom: $sd-base-increment;
194
+
195
+ }
196
+
197
+ &.form__group--mb-2 {
198
+ margin-bottom: $sd-base-increment * 2;
199
+
200
+ }
201
+
202
+ &.form__group--mb-3 {
203
+ margin-bottom: $sd-base-increment * 3;
204
+
205
+ }
206
+
207
+ &.form__group--mb-4 {
208
+ margin-bottom: $sd-base-increment * 4;
209
+ }
174
210
  }
175
211
 
176
212
  .form__header {
177
- margin-bottom: 1rem;
178
- font-size: 1.6rem;
213
+ margin-bottom: 1rem;
214
+ font-size: 1.6rem;
179
215
  }
180
216
 
181
217
  .form__label {
182
- margin-bottom: 0.8rem;
218
+ margin-bottom: 0.8rem;
183
219
  }
184
220
 
185
221
  .form__item {
186
- flex: 1 1 0;
187
- min-width: 12rem;
188
- margin: 0;
189
- &--auto-width {
190
- flex-grow: 0;
191
- min-width: 0;
192
- flex-basis: auto;
193
- }
222
+ flex: 1 1 0;
223
+ min-width: 12rem;
224
+ margin: 0;
225
+ }
226
+
227
+ .form__item--auto-width {
228
+ flex-grow: 0;
229
+ min-width: 0;
230
+ flex-basis: auto;
194
231
  }
195
232
 
196
233
  .form__text-block {
197
- min-height: $form-input-height;
198
- margin-top: $form-label-height;
199
- color: inherit;
200
- font-size: 1.3rem;
201
- display: inline-flex;
202
- align-items: center;
234
+ min-height: $form-input-height;
235
+ margin-top: $form-label-height;
236
+ color: inherit;
237
+ font-size: 1.3rem;
238
+ display: inline-flex;
239
+ align-items: center;
203
240
  }
241
+
204
242
  .form__item.form__item--auto-width {
205
- .btn,
206
- .icn-btn {
207
- margin-top: $form-label-height;
208
- }
243
+
244
+ .btn,
245
+ .icn-btn {
246
+ margin-top: $form-label-height;
247
+ }
209
248
  }
210
249
 
211
250
  .form__group.form__group--inline-label {
212
- .sd-input {
213
- grid-template-columns: auto 1fr auto;
214
- grid-template-rows: auto auto auto;
215
- .sd-input__label {
216
- grid-row: 2/3;
217
- grid-column: 1/2;
218
- padding-inline-end: 1rem;
219
- padding-inline-start: 0;
220
- padding-block-start: 0.4rem;
221
- padding-block-end: 0;
222
- position: relative;
223
- max-width: 260px;
224
- min-width: 100px;
225
- text-align: end;
226
- position: relative;
227
- align-self: center;
228
- line-height: 1.2;
229
- &.a11y-only {
230
- font-size: 0.01px !important;
231
- height: 0;
232
- width: 0;
233
- min-width: 0;
234
- overflow: hidden;
235
- padding: 0 !important;
236
- margin: 0 !important;
237
- opacity: 0 !important;
238
- }
239
- }
240
- }
241
- .form__text-block {
242
- margin-top: 0;
243
- }
244
- .form__item.form__item--auto-width {
245
- .btn,
246
- .icn-btn {
247
- margin-top: 0;
248
- }
249
- }
251
+ .sd-input {
252
+ grid-template-columns: auto 1fr auto;
253
+ grid-template-rows: auto auto auto;
254
+
255
+ .sd-input__label {
256
+ grid-row: 2/3;
257
+ grid-column: 1/2;
258
+ padding-inline-end: 1rem;
259
+ padding-inline-start: 0;
260
+ padding-block-start: 0.4rem;
261
+ padding-block-end: 0;
262
+ position: relative;
263
+ max-width: 260px;
264
+ min-width: 100px;
265
+ text-align: end;
266
+ position: relative;
267
+ align-self: center;
268
+ line-height: 1.2;
269
+
270
+ &.a11y-only {
271
+ font-size: 0.01px !important;
272
+ height: 0;
273
+ width: 0;
274
+ min-width: 0;
275
+ overflow: hidden;
276
+ padding: 0 !important;
277
+ margin: 0 !important;
278
+ opacity: 0 !important;
279
+ }
280
+ }
281
+ }
282
+
283
+ .form__text-block {
284
+ margin-top: 0;
285
+ }
286
+
287
+ .form__item.form__item--auto-width {
288
+
289
+ .btn,
290
+ .icn-btn {
291
+ margin-top: 0;
292
+ }
293
+ }
250
294
  }
251
295
 
252
296
  .sd-form-element {
253
- background-color: var(--color-form-bg);
254
- color: var(--color-text);
297
+ background-color: var(--color-form-bg);
298
+ color: var(--color-text);
255
299
  }
256
300
 
301
+
302
+
257
303
  /// ---------------------------- NEW FORM LAYOUT TEST---------------------------- ///
258
304
 
259
305
  .form__group-new {
260
- display: flex;
261
- flex-direction: row;
262
- width:100%;
263
- align-items: flex-start;
264
- gap: $sd-base-increment * 2;
265
- .sd-input {
266
- flex: 1 1 0;
267
- min-width: 12rem;
268
- margin: 0;
269
- align-self: flex-start;
270
- }
271
- .btn,
272
- .icn-btn {
273
- flex: 0 0 auto;
274
- margin-top: $form-label-height;
275
- }
276
- .sd-text {
277
- min-height: $form-input-height;
278
- margin-block-start: $form-label-height;
279
- line-height: $form-input-height;
280
- }
281
- &--condensed {
282
- gap: $sd-base-increment;
283
- }
284
- &--relaxed {
285
- gap: $sd-base-increment * 3;
286
- }
287
- &--mb-0 {
288
- margin-bottom: 0;
289
- }
290
- &--mb-1 {
291
- margin-bottom: $sd-base-increment;
292
- }
293
- &--mb-2 {
294
- margin-bottom: $sd-base-increment * 2;
295
- }
296
- &--mb-3 {
297
- margin-bottom: $sd-base-increment * 3;
298
- }
299
- &--mb-4 {
300
- margin-bottom: $sd-base-increment * 4;
301
- }
302
- &--inline-labels {
303
- .btn,
304
- .icn-btn,
305
- .sd-text {
306
- margin-top: 0;
307
- }
308
- }
309
- &--inline-labels {
310
- .btn,
311
- .icn-btn,
312
- .sd-text {
313
- margin-top: 0;
314
- }
315
- }
306
+ display: flex;
307
+ flex-direction: row;
308
+ width: 100%;
309
+ align-items: flex-start;
310
+ gap: $sd-base-increment * 2;
311
+
312
+ .sd-input {
313
+ flex: 1 1 0;
314
+ min-width: 12rem;
315
+ margin: 0;
316
+ align-self: flex-start;
317
+ }
316
318
 
319
+ .btn,
320
+ .icn-btn {
321
+ flex: 0 0 auto;
322
+ margin-top: $form-label-height;
323
+ }
324
+
325
+ .sd-text {
326
+ min-height: $form-input-height;
327
+ margin-block-start: $form-label-height;
328
+ line-height: $form-input-height;
329
+ }
330
+ }
331
+
332
+ .form__group-new--condensed {
333
+ gap: $sd-base-increment;
334
+ }
335
+
336
+ .form__group-new--relaxed {
337
+ gap: $sd-base-increment * 3;
338
+ }
339
+
340
+ .form__group-new--mb-0 {
341
+ margin-bottom: 0;
342
+ }
343
+
344
+ .form__group-new--mb-1 {
345
+ margin-bottom: $sd-base-increment;
346
+ }
347
+
348
+ .form__group-new--mb-2 {
349
+ margin-bottom: $sd-base-increment * 2;
350
+ }
351
+
352
+ .form__group-new--mb-3 {
353
+ margin-bottom: $sd-base-increment * 3;
354
+ }
355
+
356
+ .form__group-new--mb-4 {
357
+ margin-bottom: $sd-base-increment * 4;
358
+ }
359
+
360
+ .form__group-new--inline-labels {
361
+
362
+ .btn,
363
+ .icn-btn,
364
+ .sd-text {
365
+ margin-top: 0;
366
+ }
367
+ }
368
+
369
+ .form__group-new--inline-labels {
370
+
371
+ .btn,
372
+ .icn-btn,
373
+ .sd-text {
374
+ margin-top: 0;
375
+ }
317
376
  }
318
377
 
319
378
  .form__group-new__wrapper {
320
- display: flex;
321
- flex-direction: column;
322
- width: 100%;
323
- .form__group-new__label {
324
- flex: 0 0 auto;
325
- min-height: $form-label-height + 0.4rem;
326
- display: inline-block;
327
- font-size: 1.6rem;
328
- margin: 0;
329
- margin-bottom: $sd-base-increment * 1.5;
330
- line-height: 1;
331
- color: var(--color-label-text);
332
- //text-transform: uppercase;
333
- font-weight: 500;
334
- letter-spacing: 0.02em;
335
- }
379
+ display: flex;
380
+ flex-direction: column;
381
+ width: 100%;
382
+
383
+ .form__group-new__label {
384
+ flex: 0 0 auto;
385
+ min-height: $form-label-height + 0.4rem;
386
+ display: inline-block;
387
+ font-size: 1.6rem;
388
+ margin: 0;
389
+ margin-bottom: $sd-base-increment * 1.5;
390
+ line-height: 1;
391
+ color: var(--color-label-text);
392
+ //text-transform: uppercase;
393
+ font-weight: 500;
394
+ letter-spacing: 0.02em;
395
+ }
336
396
  }