Skip to content

Commit c0ba015

Browse files
NasgulNexusNasgulNexus
committed
feat: css api
1 parent f156e5b commit c0ba015

File tree

41 files changed

+549
-170
lines changed

Some content is hidden

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

41 files changed

+549
-170
lines changed

‎.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type {StorybookConfig} from '@storybook/react-webpack5';
33
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
44

55
const config: StorybookConfig = {
6-
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
6+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
77
addons: ['@storybook/addon-essentials', '@storybook/preset-scss'],
88
framework: {
99
name: '@storybook/react-webpack5',

‎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: $df-offset-15;
55

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

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

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
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: $df-border-radius-xs;
1010
color: var(--g-color-text-primary);
1111
background-color: var(--g-color-base-float);
1212
.#{$ns}row {
@@ -30,7 +30,7 @@
3030
}
3131

3232
&:last-child {
33-
margin-bottom: 0;
33+
margin-bottom: var(--g-spacing-0);
3434
}
3535

3636
&_empty {
@@ -49,7 +49,7 @@
4949
position: relative;
5050
box-sizing: border-box;
5151
width: 100%;
52-
padding: 16px;
52+
padding: var(--g-spacing-4);
5353

5454
&:hover {
5555
cursor: pointer;
@@ -78,7 +78,7 @@
7878
}
7979

8080
&-content-description {
81-
margin-top: 12px;
81+
margin-top: var(--g-spacing-3);
8282
color: var(--g-color-text-complementary);
8383
}
8484

@@ -90,7 +90,7 @@
9090
}
9191

9292
&__interal-actions {
93-
margin-right: 5px;
93+
margin-right: $df-offset-5;
9494
}
9595

9696
&__toggle-icon_open {
@@ -99,7 +99,7 @@
9999

100100
&__body {
101101
display: none;
102-
padding: 16px;
102+
padding: var(--g-spacing-4);
103103

104104
&_open {
105105
display: block;

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

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

33
.#{$ns}card {
4-
margin-bottom: 20px;
4+
--_--title-max-width: 533px;
5+
6+
margin-bottom: var(--g-spacing-5);
57

68
&:last-child {
7-
margin-bottom: 0;
9+
margin-bottom: var(--g-spacing-0);
810
}
911

1012
.#{$ns}row {
@@ -41,7 +43,7 @@
4143
display: flex;
4244
justify-content: space-between;
4345
align-items: center;
44-
padding: 20px;
46+
padding: var(--g-spacing-5);
4547

4648
&_interactive {
4749
cursor: pointer;
@@ -59,12 +61,12 @@
5961
align-items: center;
6062

6163
& > * {
62-
margin-left: 10px;
64+
margin-left: $df-offset-10;
6365
}
6466
}
6567

6668
&__title {
67-
max-width: 533px;
69+
max-width: var(--df-card-title-max-width, var(--_--title-max-width));
6870
height: 20px;
6971
}
7072

@@ -73,7 +75,7 @@
7375
}
7476

7577
&__note {
76-
margin-left: 5px;
78+
margin-left: $df-offset-5;
7779

7880
.gc-help-popover {
7981
display: flex;
@@ -92,7 +94,7 @@
9294

9395
&__body {
9496
display: none;
95-
padding: 0 20px 20px;
97+
padding: 0 var(--g-spacing-5) var(--g-spacing-5);
9698

9799
&_open {
98100
display: block;

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
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-top: $df-offset-11;
5+
padding-left: var(--g-spacing-5);
6+
margin-top: -$df-offset-11;
7+
margin-bottom: var(--g-spacing-5);
8+
margin-left: $df-offset-5;
99
border-left: 1px solid var(--g-color-line-generic-accent);
1010

1111
&:last-child {
12-
margin-bottom: 0;
12+
margin-bottom: var(--g-spacing-0);
1313
}
1414

1515
&:empty {
1616
display: none;
1717
}
1818

1919
& > .#{$ns}simple-vertical-accordeon_view {
20-
margin-top: -10px;
20+
margin-top: -$df-offset-10;
2121
}
2222
}

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

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

1313
&__items-wrapper {
1414
&_add-button-down {
15-
margin-bottom: 15px;
15+
margin-bottom: $df-offset-15;
1616
}
1717

1818
&_items-primitive {
@@ -25,13 +25,13 @@
2525
}
2626

2727
&__item-prefix {
28-
margin-top: -7px;
29-
margin-bottom: 8px;
28+
margin-top: -$df-offset-7;
29+
margin-bottom: var(--g-spacing-2);
3030
}
3131

3232
&__add-button {
3333
&_right {
34-
margin-left: 4px;
34+
margin-left: var(--g-spacing-1);
3535
}
3636
}
3737
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@
66
height: 28px;
77

88
& > *:not(:last-child) {
9-
margin-right: 6px;
9+
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(--g-spacing-2);
1616
height: auto;
1717

1818
& > *:not(:last-child) {
19-
margin-right: 0px;
20-
margin-bottom: 6px;
19+
margin-right: var(--g-spacing-0);
20+
margin-bottom: $df-offset-6;
2121
}
2222
}
2323
}

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

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

33
.#{$ns}file-input {
4+
--_--file-name-max-width: 160px;
5+
46
display: flex;
57

68
&__input {
@@ -9,7 +11,7 @@
911

1012
&__file-name {
1113
display: block;
12-
margin: auto 10px;
13-
max-width: 160px;
14+
margin: auto $df-offset-10;
15+
max-width: var(--df-file-input-file-name-max-width, var(--_--file-name-max-width));
1416
}
1517
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
height: 52px;
55
display: flex;
66
justify-content: space-between;
7-
padding: 15px;
7+
padding: $df-offset-3;
88
align-items: center;
99
background-color: var(--g-color-base-float-hover);
1010
}

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

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

33
.#{$ns}monaco-input-dialog {
44
.g-dialog-footer {
5-
padding: 10px 32px 32px;
5+
padding: $df-offset-6 var(--g-spacing-8) var(--g-spacing-8);
66
}
77

88
&__container {

0 commit comments

Comments
 (0)