Skip to content

Commit d448e10

Browse files
NasgulNexusNasgulNexus
committed
feat: design update
1 parent a22970d commit d448e10

File tree

16 files changed

+41
-38
lines changed

16 files changed

+41
-38
lines changed

‎docs/styles.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ The Group Indent variables adjust the indentation and spacing of grouped element
114114
| Variable | Default Value | Description |
115115
| :------------------------------------------------------------ | :-----------------: | :-------------------------------------------------------------------- |
116116
| `--df-group-indent-padding` | `12px 0px 0px 20px` | Padding for the group indent (top, right, bottom, left) |
117-
| `--df-group-indent-margin` | `-12px 0px 0px 5px` | Margin for the group indent (top, right, bottom, left) |
117+
| `--df-group-indent-margin` | `-12px 0px 0px 4px` | Margin for the group indent (top, right, bottom, left) |
118118
| `--df-group-indent-simple-vertical-accordeon-view-margin-top` | `-10px` | Top margin for the simple vertical accordion view within group indent |
119119

120120
---
@@ -157,12 +157,12 @@ Variables for customizing the Simple Vertical Accordion component:
157157
| Variable | Default Value | Description |
158158
| :-------------------------------------------------------- | :-----------: | :------------------------------------------ |
159159
| `--df-simple-vertical-accordeon-body-padding-left` | `20px` | Left padding of the accordion body |
160-
| `--df-simple-vertical-accordeon-body-margin-left` | `5px` | Left margin of the accordion body |
161-
| `--df-simple-vertical-accordeon-header-inner-margin-left` | `-13px` | Left margin of the header inner element |
160+
| `--df-simple-vertical-accordeon-body-margin-left` | `4px` | Left margin of the accordion body |
161+
| `--df-simple-vertical-accordeon-header-inner-margin-left` | `-12px` | Left margin of the header inner element |
162162
| `--df-simple-vertical-accordeon-header-inner-max-width` | `533px` | Maximum width of the header inner element |
163-
| `--df-simple-vertical-accordeon-tooltip-margin` | `0px 5px` | Margin for the tooltip within the accordion |
163+
| `--df-simple-vertical-accordeon-tooltip-margin` | `0px 4px` | Margin for the tooltip within the accordion |
164164
| `--df-simple-vertical-accordeon-body-margin-top` | `4px` | Top margin of the accordion body |
165-
| `--df-simple-vertical-accordeon-body-padding-top` | `6px` | Top padding of the accordion body |
165+
| `--df-simple-vertical-accordeon-body-padding-top` | `4px` | Top padding of the accordion body |
166166

167167
---
168168

@@ -173,7 +173,7 @@ Variables for customizing the Toggler Card component:
173173
| Variable | Default Value | Description |
174174
| :------------------------------ | :-----------------: | :----------------------------------------------------------------- |
175175
| `--df-toggler-card-width` | `254px` | Width of the toggler card |
176-
| `--df-toggler-card-padding` | `6px` | Padding inside the toggler card |
176+
| `--df-toggler-card-padding` | `8px` | Padding inside the toggler card |
177177
| `--df-toggler-card-height` | `88px` | Height of the toggler card |
178178
| `--df-toggler-card-text-margin` | `12px 16px 0px 0px` | Margin for the text in the toggler card (top, right, bottom, left) |
179179
| `--df-toggler-card-text-height` | `36px` | Height of the text field within the toggler card |
@@ -200,10 +200,10 @@ Variables for the Checkbox Group component:
200200

201201
| Variable | Default Value | Description |
202202
| :------------------------------------------ | :-----------: | :-------------------------------------------------------------------- |
203-
| `--df-checkbox-group-child-margin-right` | `6px` | Right margin for child checkbox elements |
203+
| `--df-checkbox-group-child-margin-right` | `12px` | Right margin for child checkbox elements |
204204
| `--df-checkbox-group-vertical-margin-top` | `8px` | Top margin in vertical layout |
205-
| `--df-checkbox-group-vertical-child-margin` | `0px 0px 6px` | Margin for child elements in vertical view (top, right, bottom, left) |
206-
| `--df-checkbox-margint-start` | `5px` | Indent from text to checkbox |
205+
| `--df-checkbox-group-vertical-child-margin` | `0px 0px 8px` | Margin for child elements in vertical view (top, right, bottom, left) |
206+
| `--df-checkbox-margint-start` | `4px` | Indent from text to checkbox |
207207

208208
---
209209

@@ -237,7 +237,7 @@ Variables for the Monaco Input component:
237237
| `--df-monaco-input-width` | `550px` | Width of the Monaco editor input |
238238
| `--df-monaco-header-height` | `52px` | Height of the Monaco editor header |
239239
| `--df-monaco-header-padding` | `16px` | Padding inside the Monaco editor header |
240-
| `--df-monaco-input-dialog-dialog-footer-padding` | `6px 32px 32px` | Padding for the Monaco dialog footer (top, sides, bottom) |
240+
| `--df-monaco-input-dialog-dialog-footer-padding` | `8px 32px 32px` | Padding for the Monaco dialog footer (top, sides, bottom) |
241241
| `--df-monaco-dialog-header-caption-min-height` | `24px` | Minimum height for the Monaco dialog header caption |
242242

243243
---
@@ -271,7 +271,7 @@ Variables for the Number with Scale input component:
271271
| Variable | Default Value | Description |
272272
| :------------------------------------------ | :-----------: | :-------------------------------- |
273273
| `--df-number-with-scale-select-max-width` | `102px` | Maximum width of the select input |
274-
| `--df-number-with-scale-select-margin-left` | `5px` | Left margin of the select input |
274+
| `--df-number-with-scale-select-margin-left` | `4px` | Left margin of the select input |
275275

276276
---
277277

@@ -295,7 +295,7 @@ Variables for the OneOf component:
295295
| Variable | Default Value | Description |
296296
| :----------------------------------------------------- | :-----------------: | :--------------------------------------- |
297297
| `--df-oneof-base-padding` | `12px 0px 0px 20px` | Base padding (top, right, bottom, left) |
298-
| `--df-oneof-base-margin` | `4px 0px 20px 5px` | Base margin (top, right, bottom, left) |
298+
| `--df-oneof-base-margin` | `4px 0px 20px 4px` | Base margin (top, right, bottom, left) |
299299
| `--df-oneof-base-simple-vertical-accordeon-margin-top` | `-12px` | Top margin for simple vertical accordion |
300300
| `--df-oneof-flat-margin` | `0px` | Margin for flat layout |
301301
| `--df-oneof-flat-padding` | `0px` | Padding for flat layout |
@@ -366,8 +366,8 @@ Variables for the Checkbox Group View component:
366366

367367
| Variable | Default Value | Description |
368368
| :----------------------------------------------- | :-----------: | :--------------------------------------------------------- |
369-
| `--df-checkbox-group-view-child-margin-right` | `6px` | Right margin of child items |
370-
| `--df-checkbox-group-view-vertical-child-margin` | `0px 0px 6px` | Margin for vertical child items (top, right, bottom, left) |
369+
| `--df-checkbox-group-view-child-margin-right` | `12px` | Right margin of child items |
370+
| `--df-checkbox-group-view-vertical-child-margin` | `0px 0px 8px` | Margin for vertical child items (top, right, bottom, left) |
371371

372372
---
373373

@@ -501,7 +501,7 @@ Variables for the Section layout:
501501
| `--df-section-header-size-s` | `18px` | Headers size for small headers |
502502
| `--df-section-header-size-m` | `20px` | Headers size for medium headers |
503503
| `--df-section-title-max-width` | `533px` | Maximum width of the section title |
504-
| `--df-section-note-margin-left` | `5px` | Left margin of the note |
504+
| `--df-section-note-margin-left` | `4px` | Left margin of the note |
505505
| `--df-section-description-margin-top` | `4px` | Top margin of the description |
506506

507507
---

‎src/lib/kit/components/GroupIndent/GroupIndent.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
--df-group-indent-padding,
66
var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
77
);
8-
margin: var(--df-group-indent-margin, -12px var(--g-spacing-0) var(--g-spacing-0) $df-offset-5);
8+
margin: var(
9+
--df-group-indent-margin,
10+
-12px var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1)
11+
);
912
border-left: 1px solid var(--g-color-line-generic-accent);
1013

1114
&:last-child {

‎src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
height: var(--df-checkbox-height, $df-checkbox-height);
77

88
.g-control-label__text {
9-
margin-inline-start: var(--df-checkbox-margint-start, 5px);
9+
margin-inline-start: var(--df-checkbox-margint-start, var(--g-spacing-1));
1010
}
1111

1212
& > *:not(:last-child) {
13-
margin-right: var(--df-checkbox-group-child-margin-right, $df-offset-6);
13+
margin-right: var(--df-checkbox-group-child-margin-right, var(--g-spacing-3));
1414
}
1515

1616
&_vertical {
@@ -22,7 +22,7 @@
2222
& > *:not(:last-child) {
2323
margin: var(
2424
--df-checkbox-group-vertical-child-margin,
25-
var(--g-spacing-0) var(--g-spacing-0) $df-offset-6
25+
var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2)
2626
);
2727
}
2828
}

‎src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
.g-dialog-footer {
55
padding: var(
66
--df-monaco-input-dialog-dialog-footer-padding,
7-
$df-offset-6 var(--g-spacing-8) var(--g-spacing-8)
7+
var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8)
88
);
99
}
1010

‎src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77

88
&__select {
99
max-width: var(--df-number-with-scale-select-max-width, 102px);
10-
margin-left: var(--df-number-with-scale-select-margin-left, $df-offset-5);
10+
margin-left: var(--df-number-with-scale-select-margin-left, var(--g-spacing-1));
1111
}
1212
}

‎src/lib/kit/components/Inputs/OneOf/OneOf.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
);
2222
margin: var(
2323
--df-oneof-base-margin,
24-
var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) $df-offset-5
24+
var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-1)
2525
);
2626
border-left: 1px solid var(--g-color-line-generic-accent);
2727

‎src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,6 @@
5959
}
6060

6161
&__idx {
62-
padding-top: var(--df-table-array-idx-padding-top, $df-offset-6);
62+
padding-top: var(--df-table-array-idx-padding-top, 6px);
6363
}
6464
}

‎src/lib/kit/components/Layouts/Section/Section.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ $block: '.#{$ns}section';
3636
}
3737

3838
&__note {
39-
margin-left: var(--df-section-note-margin-left, $df-offset-5);
39+
margin-left: var(--df-section-note-margin-left, var(--g-spacing-1));
4040

4141
.g-help-popover {
4242
display: flex;

‎src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $animationDuration: 0.3s;
1111

1212
&_branch &__body {
1313
padding-left: var(--df-simple-vertical-accordeon-body-padding-left, var(--g-spacing-5));
14-
margin-left: var(--df-simple-vertical-accordeon-body-margin-left, $df-offset-5);
14+
margin-left: var(--df-simple-vertical-accordeon-body-margin-left, var(--g-spacing-1));
1515
border-left: 1px solid var(--g-color-line-generic-accent);
1616
}
1717

@@ -20,7 +20,7 @@ $animationDuration: 0.3s;
2020
align-items: center;
2121

2222
&-inner {
23-
margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, -13px);
23+
margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, -12px);
2424
max-width: var(--df-simple-vertical-accordeon-header-inner-max-width, 533px);
2525
}
2626

@@ -30,7 +30,10 @@ $animationDuration: 0.3s;
3030
}
3131

3232
&__tooltip {
33-
margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) $df-offset-5);
33+
margin: var(
34+
--df-simple-vertical-accordeon-tooltip-margin,
35+
var(--g-spacing-0) var(--g-spacing-1)
36+
);
3437
}
3538

3639
&__popover {
@@ -47,7 +50,7 @@ $animationDuration: 0.3s;
4750

4851
&__body {
4952
margin-top: var(--df-simple-vertical-accordeon-body-margin-top, var(--g-spacing-1));
50-
padding-top: var(--df-simple-vertical-accordeon-body-padding-top, $df-offset-6);
53+
padding-top: var(--df-simple-vertical-accordeon-body-padding-top, var(--g-spacing-1));
5154

5255
&_hidden {
5356
display: none;

‎src/lib/kit/components/TogglerCard/TogglerCard.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.#{$ns}toggler-card {
44
width: var(--df-toggler-card-width, 254px);
5-
padding: var(--df-toggler-card-padding, $df-offset-6);
5+
padding: var(--df-toggler-card-padding, var(--g-spacing-2));
66
height: var(--df-toggler-card-height, 88px);
77

88
&__header {

0 commit comments

Comments
 (0)