Skip to content

Commit c5608e7

Browse files
NasgulNexusNasgulNexus
authored
feat: css api (#254)
1 parent 89edc89 commit c5608e7

File tree

51 files changed

+901
-219
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+901
-219
lines changed

‎docs/styles.md‎

Lines changed: 580 additions & 0 deletions
Large diffs are not rendered by default.

‎src/lib/core/components/Form/hooks/useSearch/useSearch.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
@import '../../../../../kit/styles/variables.scss';
22

33
.#{$ns}use-search {
4-
margin-bottom: 15px;
4+
margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs);
55

66
&_hidden {
77
display: none;
88
}
99

1010
&:last-child {
11-
margin-bottom: 0;
11+
margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child);
1212
}
1313
}

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
justify-content: space-between;
77
box-sizing: border-box;
88
box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
9-
border-radius: 5px;
9+
border-radius: var(--df-accordeon-card-border-radius, $df-border-radius-xs);
1010
color: var(--g-color-text-primary);
1111
background-color: var(--g-color-base-float);
12+
1213
.#{$ns}row {
13-
width: 100%;
14+
width: var(--df-accordeon-card-row-width, 100%);
1415
max-width: unset;
1516

1617
.#{$ns}select,
@@ -22,15 +23,15 @@
2223

2324
.#{$ns}monaco-input,
2425
.#{$ns}monaco-base-view {
25-
width: 100%;
26+
width: var(--df-accordeon-card-monaco-input-width, 100%);
2627
}
2728

2829
&:hover {
2930
box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
3031
}
3132

3233
&:last-child {
33-
margin-bottom: 0;
34+
margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child);
3435
}
3536

3637
&_empty {
@@ -48,8 +49,8 @@
4849
display: flex;
4950
position: relative;
5051
box-sizing: border-box;
51-
width: 100%;
52-
padding: 16px;
52+
width: var(--df-accordeon-card-header-width, 100%);
53+
padding: var(--df-accordeon-card-header-padding, var(--g-spacing-4));
5354

5455
&:hover {
5556
cursor: pointer;
@@ -78,7 +79,7 @@
7879
}
7980

8081
&-content-description {
81-
margin-top: 12px;
82+
margin-top: var(--df-accordeon-card-content-description-margin-top, var(--g-spacing-3));
8283
color: var(--g-color-text-complementary);
8384
}
8485

@@ -90,7 +91,7 @@
9091
}
9192

9293
&__interal-actions {
93-
margin-right: 5px;
94+
margin-right: var(--df-accordeon-card-interal-actions-margin-right, $df-offset-5);
9495
}
9596

9697
&__toggle-icon_open {
@@ -99,7 +100,7 @@
99100

100101
&__body {
101102
display: none;
102-
padding: 16px;
103+
padding: var(--df-accordeon-card-body-padding, var(--g-spacing-4));
103104

104105
&_open {
105106
display: block;

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
@import '../../styles/variables.scss';
22

33
.#{$ns}card {
4-
margin-bottom: 20px;
4+
margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section);
55

66
&:last-child {
7-
margin-bottom: 0;
7+
margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child);
88
}
99

1010
.#{$ns}row {
11-
width: 100%;
11+
width: var(--df-card-row-width, 100%);
1212
max-width: unset;
1313

1414
.#{$ns}select,
@@ -20,7 +20,7 @@
2020

2121
.#{$ns}monaco-input,
2222
.#{$ns}monaco-base-view {
23-
width: 100%;
23+
width: var(--df-card-monaco-input-width, 100%);
2424
}
2525

2626
&_empty-body {
@@ -41,7 +41,7 @@
4141
display: flex;
4242
justify-content: space-between;
4343
align-items: center;
44-
padding: 20px;
44+
padding: var(--df-card-header-padding, var(--g-spacing-5));
4545

4646
&_interactive {
4747
cursor: pointer;
@@ -59,21 +59,21 @@
5959
align-items: center;
6060

6161
& > * {
62-
margin-left: 10px;
62+
margin-left: var(--df-card-header-right-child-margin-left, $df-offset-10);
6363
}
6464
}
6565

6666
&__title {
67-
max-width: 533px;
68-
height: 20px;
67+
max-width: var(--df-card-title-max-width, 533px);
68+
height: var(--df-card-title-height, var(--g-spacing-5));
6969
}
7070

7171
&__title-popover {
72-
height: 20px;
72+
height: var(--df-card-title-popover-height, var(--g-spacing-5));
7373
}
7474

7575
&__note {
76-
margin-left: 5px;
76+
margin-left: var(--df-card-note-margin-left, $df-offset-5);
7777

7878
.gc-help-popover {
7979
display: flex;
@@ -92,7 +92,10 @@
9292

9393
&__body {
9494
display: none;
95-
padding: 0 20px 20px;
95+
padding: var(
96+
--df-card-body-padding,
97+
var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-5)
98+
);
9699

97100
&_open {
98101
display: block;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../styles/variables.scss';
22

33
.#{$ns}error-wrapper {
4-
width: 100%;
4+
width: var(--df-error-wrapper-width, 100%);
55

66
&_error {
77
.yc-select-control:not(.#{$ns}error-wrapper-ignore),
@@ -29,7 +29,7 @@
2929

3030
&__error-text {
3131
color: var(--g-color-text-danger);
32-
margin-top: 2px;
32+
margin-top: var(--df-error-wrapper-error-text-margin-top, var(--g-spacing-half));
3333
font-size: var(--g-text-body-1-font-size);
3434
line-height: var(--g-text-body-1-line-height);
3535
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import '../../styles/variables';
22

33
.#{$ns}generate-random-value-button {
4-
margin-left: 8px;
4+
margin-left: var(--df-generate-random-value-button-margin-left, var(--g-spacing-2));
55
}

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
11
@import '../../styles/variables.scss';
22

33
.#{$ns}group-indent {
4-
padding-top: 11px;
5-
padding-left: $normalOffset;
6-
margin-top: -11px;
7-
margin-bottom: 20px;
8-
margin-left: 5px;
4+
padding: var(
5+
--df-group-indent-padding,
6+
$df-offset-11 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
7+
);
8+
margin: var(
9+
--df-group-indent-margin,
10+
-$df-offset-11 var(--g-spacing-0) var(--g-spacing-0) $df-offset-5
11+
);
912
border-left: 1px solid var(--g-color-line-generic-accent);
1013

1114
&:last-child {
12-
margin-bottom: 0;
15+
margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child);
1316
}
1417

1518
&:empty {
1619
display: none;
1720
}
1821

1922
& > .#{$ns}simple-vertical-accordeon_view {
20-
margin-top: -10px;
23+
margin-top: var(
24+
--df-group-indent-simple-vertical-accordeon-view-margin-top,
25+
-$df-offset-10
26+
);
2127
}
2228
}

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212

1313
&__items-wrapper {
1414
&_add-button-down {
15-
margin-bottom: 15px;
15+
margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs);
1616
}
1717

1818
&_items-primitive {
19-
min-width: 100%;
19+
min-width: var(--df-array-base-items-primitive-min-width, 100%);
2020

2121
&:empty {
2222
min-width: unset;
@@ -25,13 +25,15 @@
2525
}
2626

2727
&__item-prefix {
28-
margin-top: -7px;
29-
margin-bottom: 8px;
28+
margin: var(
29+
--df-array-base-item-prefix-margin,
30+
-$df-offset-7 var(--g-spacing-0) var(--g-spacing-2)
31+
);
3032
}
3133

3234
&__add-button {
3335
&_right {
34-
margin-left: 4px;
36+
margin-left: var(--df-array-base-add-button-right-margin-left, var(--g-spacing-1));
3537
}
3638
}
3739
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../../styles/variables';
22

33
.#{$ns}checkbox {
4-
height: 28px;
4+
height: var(--df-checkbox-height, $df-checkbox-height);
55
display: flex;
66
align-items: center;
77
}

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,23 @@
33
.#{$ns}checkbox-group {
44
display: flex;
55
align-items: center;
6-
height: 28px;
6+
height: var(--df-checkbox-height, $df-checkbox-height);
77

88
& > *:not(:last-child) {
9-
margin-right: 6px;
9+
margin-right: var(--df-checkbox-group-child-margin-right, $df-offset-6);
1010
}
1111

1212
&_vertical {
1313
flex-direction: column;
1414
align-items: flex-start;
15-
margin-top: 8px;
15+
margin-top: var(--df-checkbox-group-vertical-margin-top, var(--g-spacing-2));
1616
height: auto;
1717

1818
& > *:not(:last-child) {
19-
margin-right: 0px;
20-
margin-bottom: 6px;
19+
margin: var(
20+
--df-checkbox-group-vertical-child-margin,
21+
var(--g-spacing-0) var(--g-spacing-0) $df-offset-6
22+
);
2123
}
2224
}
2325
}

0 commit comments

Comments
 (0)