Skip to content

Commit 14b96e7

Browse files
ValeraSValeraS
authored
chore(styles): use new SCSS api (#1722)
1 parent e050bd7 commit 14b96e7

File tree

70 files changed

+176
-185
lines changed

Some content is hidden

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

70 files changed

+176
-185
lines changed

‎src/components/BasicNodeViewer/BasicNodeViewer.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.basic-node-viewer {
44
display: flex;
55
align-items: center;
66

77
margin: 15px 0;
88

9-
@include body-2-typography();
9+
@include mixins.body-2-typography();
1010

1111
&__title {
1212
margin: 0 20px 0 0;

‎src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.developer-ui-link-button {
4-
@include table-hover-appearing-button();
4+
@include mixins.table-hover-appearing-button();
55
}

‎src/components/DiskStateProgressBar/DiskStateProgressBar.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins';
1+
@use '../../styles/mixins';
22

33
.storage-disk-progress-bar {
44
$block: &;
@@ -22,7 +22,7 @@
2222
border: $border-width solid var(--entity-state-border-color);
2323
border-radius: $outer-border-radius;
2424
background-color: var(--entity-state-background-color);
25-
@include entity-state-colors();
25+
@include mixins.entity-state-colors();
2626

2727
&_compact {
2828
min-width: 0;

‎src/components/EmptyState/EmptyState.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.empty-state {
44
padding: 20px;
@@ -50,18 +50,18 @@
5050
font-weight: 500;
5151

5252
&_size_s {
53-
@include lead-typography();
53+
@include mixins.lead-typography();
5454
}
5555

5656
&_size_m {
57-
@include header-2-typography();
57+
@include mixins.header-2-typography();
5858
}
5959
}
6060

6161
&__description {
6262
grid-area: description;
6363

64-
@include body-2-typography();
64+
@include mixins.body-2-typography();
6565
}
6666

6767
&__actions {

‎src/components/EntityPageTitle/EntityPageTitle.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-entity-page-title {
44
display: flex;
@@ -7,7 +7,7 @@
77

88
text-wrap: nowrap;
99

10-
@include header-2-typography();
10+
@include mixins.header-2-typography();
1111

1212
&__prefix {
1313
margin-right: 6px;

‎src/components/EntityStatus/EntityStatus.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.entity-status {
44
--button-width: 28px;
@@ -10,7 +10,7 @@
1010
max-width: 100%;
1111
height: 100%;
1212

13-
@include body-2-typography();
13+
@include mixins.body-2-typography();
1414

1515
&__icon {
1616
margin-right: var(--g-spacing-2);
@@ -19,7 +19,7 @@
1919
&__clipboard-button {
2020
color: var(--g-color-text-secondary);
2121

22-
@include table-hover-appearing-button();
22+
@include mixins.table-hover-appearing-button();
2323

2424
&_visible {
2525
opacity: 1;
@@ -68,7 +68,7 @@
6868

6969
color: var(--g-color-text-complementary);
7070

71-
@include body-2-typography();
71+
@include mixins.body-2-typography();
7272

7373
&_size_l {
7474
font-size: var(--g-text-header-2-font-size);

‎src/components/ErrorBoundary/ErrorBoundary.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-error-boundary {
44
display: flex;
@@ -7,7 +7,7 @@
77

88
padding: 20px;
99

10-
@include body-2-typography();
10+
@include mixins.body-2-typography();
1111

1212
&__illustration {
1313
width: 230px;
@@ -16,7 +16,7 @@
1616
}
1717
&__error-title {
1818
margin-top: 44px;
19-
@include lead-typography();
19+
@include mixins.lead-typography();
2020
}
2121
&__error-description {
2222
margin-top: 12px;

‎src/components/FullNodeViewer/FullNodeViewer.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.full-node-viewer {
4-
@include body-2-typography();
4+
@include mixins.body-2-typography();
55

66
&__common-info {
77
display: flex;

‎src/components/MemoryViewer/MemoryViewer.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '../../styles/mixins.scss';
2-
31
$memory-type-colors: (
42
'AllocatorCachesMemory': var(--g-color-base-utility-medium-hover),
53
'SharedCacheConsumption': var(--g-color-base-info-medium-hover),

‎src/components/PageMeta/PageMeta.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles//mixins.scss';
1+
@use '../../styles//mixins.scss';
22

33
.ydb-page-meta {
44
&__info {
@@ -12,7 +12,7 @@
1212

1313
color: var(--g-color-text-primary);
1414

15-
@include body-2-typography();
15+
@include mixins.body-2-typography();
1616
}
1717

1818
&__skeleton {

‎src/components/PaginatedTable/PaginatedTable.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-paginated-table {
44
$block: &;
@@ -10,7 +10,7 @@
1010
--paginated-table-hover-color: var(--g-color-base-float);
1111

1212
width: 100%;
13-
@include body-2-typography();
13+
@include mixins.body-2-typography();
1414

1515
&__table {
1616
width: max-content;
@@ -46,7 +46,7 @@
4646

4747
&__head {
4848
z-index: 2;
49-
@include sticky-top();
49+
@include mixins.sticky-top();
5050
}
5151

5252
&__sort-icon-container {

‎src/components/PoolUsage/PoolUsage.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-pool-usage {
4-
@include body-2-typography();
4+
@include mixins.body-2-typography();
55

66
&__info {
77
display: flex;

‎src/components/ProgressViewer/ProgressViewer.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.progress-viewer {
44
$block: &;
@@ -68,7 +68,7 @@
6868
&_size_xs {
6969
height: 20px;
7070

71-
@include body-2-typography();
71+
@include mixins.body-2-typography();
7272
}
7373

7474
&_size_s {

‎src/components/QueryResultTable/QueryResultTable.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-query-result-table {
44
&__cell {
55
width: 100%;
6-
@include cell-container;
6+
@include mixins.cell-container;
77
}
88

99
&__message {

‎src/components/TableWithControlsLayout/TableWithControlsLayout.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-table-with-controls-layout {
44
--data-table-sticky-top-offset: 62px;
@@ -14,7 +14,7 @@
1414
box-sizing: border-box;
1515
width: 100%;
1616

17-
@include sticky-top();
17+
@include mixins.sticky-top();
1818
}
1919

2020
&__controls {
@@ -23,8 +23,8 @@
2323
width: max-content;
2424
height: 62px;
2525

26-
@include controls();
27-
@include sticky-top();
26+
@include mixins.controls();
27+
@include mixins.sticky-top();
2828
}
2929

3030
&__table {

‎src/components/User/User.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.kv-user {
44
display: inline-block;
55

66
color: var(--g-color-text-primary);
7-
@include body-2-typography();
7+
@include mixins.body-2-typography();
88

99
&__name {
1010
display: inline-block;

‎src/components/YDBDefinitionList/YDBDefinitionList.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-definition-list {
4-
@include flex-container();
4+
@include mixins.flex-container();
55

66
&__title {
7-
@include info-viewer-title();
7+
@include mixins.info-viewer-title();
88
}
99

1010
&__properties-list {

‎src/containers/App/App.scss

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
@use '../../styles/mixins.scss';
2+
13
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
2-
@import '../../styles/mixins.scss';
34

45
* {
56
// FIXME: this is an overkill, potentially could break external components, needs refactoring
@@ -73,17 +74,17 @@ body,
7374
}
7475

7576
.loader {
76-
@include loader();
77+
@include mixins.loader();
7778
}
7879

7980
.app {
8081
height: 100%;
81-
@include flex-container();
82-
@include data-table-styles();
82+
@include mixins.flex-container();
83+
@include mixins.data-table-styles();
8384

8485
&__main {
8586
overflow: auto;
86-
@include flex-container();
87+
@include mixins.flex-container();
8788
}
8889
}
8990

‎src/containers/Authentication/Authentication.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.authentication {
44
display: flex;
@@ -45,7 +45,7 @@
4545
margin: 34px 0 16px;
4646

4747
font-weight: 600;
48-
@include header-2-typography;
48+
@include mixins.header-2-typography;
4949
}
5050

5151
&__form-wrapper {

‎src/containers/Cluster/Cluster.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

33
.ydb-cluster {
44
position: relative;
@@ -18,7 +18,7 @@
1818

1919
&__title {
2020
font-weight: var(--g-text-header-font-weight);
21-
@include header-1-typography();
21+
@include mixins.header-1-typography();
2222
}
2323

2424
&__title-skeleton {
@@ -36,11 +36,11 @@
3636
padding-left: 20px;
3737

3838
transform: translateX(-20px);
39-
@include sticky-top();
39+
@include mixins.sticky-top();
4040
}
4141
&__tabs {
4242
display: flex;
43-
@include tabs-wrapper-styles();
43+
@include mixins.tabs-wrapper-styles();
4444
}
4545

4646
&__sticky-wrapper {

‎src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../styles/mixins.scss';
1+
@use '../../../styles/mixins.scss';
22

33
.ydb-cluster-dashboard {
44
position: sticky;
@@ -7,7 +7,7 @@
77
padding-top: 16px;
88

99
&__error {
10-
@include body-2-typography();
10+
@include mixins.body-2-typography();
1111
}
1212
&__card {
1313
display: flex;

‎src/containers/Cluster/ClusterInfo/ClusterInfo.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../styles/mixins';
1+
@use '../../../styles/mixins';
22

33
.cluster-info {
44
padding: 20px 0;
@@ -8,7 +8,7 @@
88
}
99

1010
&__error {
11-
@include body-2-typography();
11+
@include mixins.body-2-typography();
1212
}
1313

1414
&__metrics {

‎src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../../../styles/mixins.scss';
1+
@use '../../../../../styles/mixins.scss';
22

33
.ydb-nodes-state {
44
display: flex;
@@ -13,5 +13,5 @@
1313
color: var(--entity-state-font-color);
1414
border-radius: var(--g-spacing-1);
1515
background-color: var(--entity-state-background-color);
16-
@include entity-state-colors();
16+
@include mixins.entity-state-colors();
1717
}

0 commit comments

Comments
 (0)