From 14b96e73f234a94ddb8345c19ba6816abe8b8596 Mon Sep 17 00:00:00 2001 From: Valerii Sidorenko Date: Thu, 28 Nov 2024 10:56:45 +0100 Subject: [PATCH] chore(styles): use new SCSS api (#1722) --- .../BasicNodeViewer/BasicNodeViewer.scss | 4 ++-- .../DeveloperUILinkButton.scss | 4 ++-- .../DiskStateProgressBar.scss | 4 ++-- src/components/EmptyState/EmptyState.scss | 8 ++++---- .../EntityPageTitle/EntityPageTitle.scss | 4 ++-- src/components/EntityStatus/EntityStatus.scss | 8 ++++---- src/components/ErrorBoundary/ErrorBoundary.scss | 6 +++--- .../FullNodeViewer/FullNodeViewer.scss | 4 ++-- src/components/MemoryViewer/MemoryViewer.scss | 2 -- src/components/PageMeta/PageMeta.scss | 4 ++-- .../PaginatedTable/PaginatedTable.scss | 6 +++--- src/components/PoolUsage/PoolUsage.scss | 4 ++-- .../ProgressViewer/ProgressViewer.scss | 4 ++-- .../QueryResultTable/QueryResultTable.scss | 4 ++-- .../TableWithControlsLayout.scss | 8 ++++---- src/components/User/User.scss | 4 ++-- .../YDBDefinitionList/YDBDefinitionList.scss | 6 +++--- src/containers/App/App.scss | 11 ++++++----- .../Authentication/Authentication.scss | 4 ++-- src/containers/Cluster/Cluster.scss | 8 ++++---- .../ClusterDashboard/ClusterDashboard.scss | 4 ++-- .../Cluster/ClusterInfo/ClusterInfo.scss | 4 ++-- .../components/NodesState/NodesState.scss | 4 ++-- src/containers/Header/Header.scss | 2 -- src/containers/Heatmap/Heatmap.scss | 6 +++--- src/containers/Node/Node.scss | 8 ++++---- .../Node/NodeStructure/NodeStructure.scss | 6 +++--- src/containers/Nodes/Nodes.scss | 4 ++-- src/containers/PDiskPage/PDiskPage.scss | 4 ++-- src/containers/ReduxTooltip/ReduxTooltip.scss | 4 ++-- src/containers/Storage/Storage.scss | 4 ++-- .../StorageGroupPage/StorageGroupPage.scss | 4 ++-- src/containers/Tablet/Tablet.scss | 4 ++-- .../Tablet/components/TabletInfo/TabletInfo.scss | 4 ++-- .../TabletStorageInfo/TabletStorageInfo.scss | 6 +++--- src/containers/Tenant/Acl/Acl.scss | 6 +++--- .../Tenant/Diagnostics/Consumers/Consumers.scss | 12 ++++++------ .../TopicStats/ConsumersTopicStats.scss | 4 ++-- .../Tenant/Diagnostics/Describe/Describe.scss | 4 ++-- .../Tenant/Diagnostics/Diagnostics.scss | 4 ++-- .../Tenant/Diagnostics/HotKeys/HotKeys.scss | 2 -- .../Tenant/Diagnostics/Network/Network.scss | 12 ++++++------ .../AsyncReplicationPaths.scss | 4 ++-- .../Overview/TableInfo/TableInfo.scss | 4 ++-- .../Overview/TopicStats/TopicStats.scss | 4 ++-- .../Diagnostics/Partitions/Partitions.scss | 12 ++++++------ .../TenantOverview/Healthcheck/Healthcheck.scss | 4 ++-- .../Healthcheck/IssuesViewer/IssueTree.scss | 4 ++-- .../MetricsCards/MetricCard/MetricCard.scss | 4 ++-- .../TenantOverview/TenantOverview.scss | 4 ++-- .../Diagnostics/TopQueries/TopQueries.scss | 6 +++--- .../Tenant/ObjectGeneral/ObjectGeneral.scss | 2 -- .../Tenant/ObjectSummary/ObjectSummary.scss | 6 +++--- .../CancelQueryButton/CancelQueryButton.scss | 4 ++-- src/containers/Tenant/Query/Preview/Preview.scss | 6 +++--- .../Query/QueriesHistory/QueriesHistory.scss | 6 +++--- src/containers/Tenant/Query/Query.scss | 4 ++-- .../Tenant/Query/QueryEditor/QueryEditor.scss | 4 ++-- .../QueryJSONViewer/QueryJSONViewer.scss | 4 ++-- .../ResultSetsViewer/ResultSetsViewer.scss | 4 ++-- .../SimplifiedPlan/SimplifiedPlan.scss | 6 +++--- .../Tenant/Query/SavedQueries/SavedQueries.scss | 6 +++--- .../Tenant/Schema/SchemaViewer/SchemaViewer.scss | 6 +++--- src/containers/Tenant/Tenant.scss | 6 +++--- src/containers/Tenants/Tenants.scss | 4 ++-- src/containers/VDiskPage/VDiskPage.scss | 4 ++-- .../GroupedNodesTree/GroupedNodesTree.scss | 4 ++-- src/containers/Versions/Versions.scss | 2 -- src/styles/mixins.scss | 2 +- src/styles/themes.scss | 16 ++++++++-------- 70 files changed, 176 insertions(+), 185 deletions(-) diff --git a/src/components/BasicNodeViewer/BasicNodeViewer.scss b/src/components/BasicNodeViewer/BasicNodeViewer.scss index 3529d3dec..d6b358007 100644 --- a/src/components/BasicNodeViewer/BasicNodeViewer.scss +++ b/src/components/BasicNodeViewer/BasicNodeViewer.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .basic-node-viewer { display: flex; @@ -6,7 +6,7 @@ margin: 15px 0; - @include body-2-typography(); + @include mixins.body-2-typography(); &__title { margin: 0 20px 0 0; diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss index 33d9c7693..8060a60cb 100644 --- a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss +++ b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss @@ -1,5 +1,5 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .developer-ui-link-button { - @include table-hover-appearing-button(); + @include mixins.table-hover-appearing-button(); } diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss index bb3ae13ab..c9b916b64 100644 --- a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss +++ b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins'; +@use '../../styles/mixins'; .storage-disk-progress-bar { $block: &; @@ -22,7 +22,7 @@ border: $border-width solid var(--entity-state-border-color); border-radius: $outer-border-radius; background-color: var(--entity-state-background-color); - @include entity-state-colors(); + @include mixins.entity-state-colors(); &_compact { min-width: 0; diff --git a/src/components/EmptyState/EmptyState.scss b/src/components/EmptyState/EmptyState.scss index d1d3d0009..2ed7b57c6 100644 --- a/src/components/EmptyState/EmptyState.scss +++ b/src/components/EmptyState/EmptyState.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .empty-state { padding: 20px; @@ -50,18 +50,18 @@ font-weight: 500; &_size_s { - @include lead-typography(); + @include mixins.lead-typography(); } &_size_m { - @include header-2-typography(); + @include mixins.header-2-typography(); } } &__description { grid-area: description; - @include body-2-typography(); + @include mixins.body-2-typography(); } &__actions { diff --git a/src/components/EntityPageTitle/EntityPageTitle.scss b/src/components/EntityPageTitle/EntityPageTitle.scss index 54b8b7fd3..4ec1d5c62 100644 --- a/src/components/EntityPageTitle/EntityPageTitle.scss +++ b/src/components/EntityPageTitle/EntityPageTitle.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-entity-page-title { display: flex; @@ -7,7 +7,7 @@ text-wrap: nowrap; - @include header-2-typography(); + @include mixins.header-2-typography(); &__prefix { margin-right: 6px; diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss index f51670c89..d1267c455 100644 --- a/src/components/EntityStatus/EntityStatus.scss +++ b/src/components/EntityStatus/EntityStatus.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .entity-status { --button-width: 28px; @@ -10,7 +10,7 @@ max-width: 100%; height: 100%; - @include body-2-typography(); + @include mixins.body-2-typography(); &__icon { margin-right: var(--g-spacing-2); @@ -19,7 +19,7 @@ &__clipboard-button { color: var(--g-color-text-secondary); - @include table-hover-appearing-button(); + @include mixins.table-hover-appearing-button(); &_visible { opacity: 1; @@ -68,7 +68,7 @@ color: var(--g-color-text-complementary); - @include body-2-typography(); + @include mixins.body-2-typography(); &_size_l { font-size: var(--g-text-header-2-font-size); diff --git a/src/components/ErrorBoundary/ErrorBoundary.scss b/src/components/ErrorBoundary/ErrorBoundary.scss index 49a88823e..290dc77d9 100644 --- a/src/components/ErrorBoundary/ErrorBoundary.scss +++ b/src/components/ErrorBoundary/ErrorBoundary.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-error-boundary { display: flex; @@ -7,7 +7,7 @@ padding: 20px; - @include body-2-typography(); + @include mixins.body-2-typography(); &__illustration { width: 230px; @@ -16,7 +16,7 @@ } &__error-title { margin-top: 44px; - @include lead-typography(); + @include mixins.lead-typography(); } &__error-description { margin-top: 12px; diff --git a/src/components/FullNodeViewer/FullNodeViewer.scss b/src/components/FullNodeViewer/FullNodeViewer.scss index 7e41e2cfb..4a6f44914 100644 --- a/src/components/FullNodeViewer/FullNodeViewer.scss +++ b/src/components/FullNodeViewer/FullNodeViewer.scss @@ -1,7 +1,7 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .full-node-viewer { - @include body-2-typography(); + @include mixins.body-2-typography(); &__common-info { display: flex; diff --git a/src/components/MemoryViewer/MemoryViewer.scss b/src/components/MemoryViewer/MemoryViewer.scss index 049df2db4..8740b771d 100644 --- a/src/components/MemoryViewer/MemoryViewer.scss +++ b/src/components/MemoryViewer/MemoryViewer.scss @@ -1,5 +1,3 @@ -@import '../../styles/mixins.scss'; - $memory-type-colors: ( 'AllocatorCachesMemory': var(--g-color-base-utility-medium-hover), 'SharedCacheConsumption': var(--g-color-base-info-medium-hover), diff --git a/src/components/PageMeta/PageMeta.scss b/src/components/PageMeta/PageMeta.scss index 7f1452c97..d201b74cc 100644 --- a/src/components/PageMeta/PageMeta.scss +++ b/src/components/PageMeta/PageMeta.scss @@ -1,4 +1,4 @@ -@import '../../styles//mixins.scss'; +@use '../../styles//mixins.scss'; .ydb-page-meta { &__info { @@ -12,7 +12,7 @@ color: var(--g-color-text-primary); - @include body-2-typography(); + @include mixins.body-2-typography(); } &__skeleton { diff --git a/src/components/PaginatedTable/PaginatedTable.scss b/src/components/PaginatedTable/PaginatedTable.scss index a9060b723..589287571 100644 --- a/src/components/PaginatedTable/PaginatedTable.scss +++ b/src/components/PaginatedTable/PaginatedTable.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-paginated-table { $block: &; @@ -10,7 +10,7 @@ --paginated-table-hover-color: var(--g-color-base-float); width: 100%; - @include body-2-typography(); + @include mixins.body-2-typography(); &__table { width: max-content; @@ -46,7 +46,7 @@ &__head { z-index: 2; - @include sticky-top(); + @include mixins.sticky-top(); } &__sort-icon-container { diff --git a/src/components/PoolUsage/PoolUsage.scss b/src/components/PoolUsage/PoolUsage.scss index 60e2dc74b..c5910a64d 100644 --- a/src/components/PoolUsage/PoolUsage.scss +++ b/src/components/PoolUsage/PoolUsage.scss @@ -1,7 +1,7 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-pool-usage { - @include body-2-typography(); + @include mixins.body-2-typography(); &__info { display: flex; diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss index 02f9d600c..470a598f5 100644 --- a/src/components/ProgressViewer/ProgressViewer.scss +++ b/src/components/ProgressViewer/ProgressViewer.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .progress-viewer { $block: &; @@ -68,7 +68,7 @@ &_size_xs { height: 20px; - @include body-2-typography(); + @include mixins.body-2-typography(); } &_size_s { diff --git a/src/components/QueryResultTable/QueryResultTable.scss b/src/components/QueryResultTable/QueryResultTable.scss index 41f9d8536..89129744d 100644 --- a/src/components/QueryResultTable/QueryResultTable.scss +++ b/src/components/QueryResultTable/QueryResultTable.scss @@ -1,9 +1,9 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-query-result-table { &__cell { width: 100%; - @include cell-container; + @include mixins.cell-container; } &__message { diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.scss b/src/components/TableWithControlsLayout/TableWithControlsLayout.scss index 820b0197a..69d71bebd 100644 --- a/src/components/TableWithControlsLayout/TableWithControlsLayout.scss +++ b/src/components/TableWithControlsLayout/TableWithControlsLayout.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-table-with-controls-layout { --data-table-sticky-top-offset: 62px; @@ -14,7 +14,7 @@ box-sizing: border-box; width: 100%; - @include sticky-top(); + @include mixins.sticky-top(); } &__controls { @@ -23,8 +23,8 @@ width: max-content; height: 62px; - @include controls(); - @include sticky-top(); + @include mixins.controls(); + @include mixins.sticky-top(); } &__table { diff --git a/src/components/User/User.scss b/src/components/User/User.scss index 574b13c53..c6a8b0adf 100644 --- a/src/components/User/User.scss +++ b/src/components/User/User.scss @@ -1,10 +1,10 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .kv-user { display: inline-block; color: var(--g-color-text-primary); - @include body-2-typography(); + @include mixins.body-2-typography(); &__name { display: inline-block; diff --git a/src/components/YDBDefinitionList/YDBDefinitionList.scss b/src/components/YDBDefinitionList/YDBDefinitionList.scss index 5c2889f11..de6da797c 100644 --- a/src/components/YDBDefinitionList/YDBDefinitionList.scss +++ b/src/components/YDBDefinitionList/YDBDefinitionList.scss @@ -1,10 +1,10 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-definition-list { - @include flex-container(); + @include mixins.flex-container(); &__title { - @include info-viewer-title(); + @include mixins.info-viewer-title(); } &__properties-list { diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss index a696a34d2..45c273dcc 100644 --- a/src/containers/App/App.scss +++ b/src/containers/App/App.scss @@ -1,5 +1,6 @@ +@use '../../styles/mixins.scss'; + @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap'); -@import '../../styles/mixins.scss'; * { // FIXME: this is an overkill, potentially could break external components, needs refactoring @@ -73,17 +74,17 @@ body, } .loader { - @include loader(); + @include mixins.loader(); } .app { height: 100%; - @include flex-container(); - @include data-table-styles(); + @include mixins.flex-container(); + @include mixins.data-table-styles(); &__main { overflow: auto; - @include flex-container(); + @include mixins.flex-container(); } } diff --git a/src/containers/Authentication/Authentication.scss b/src/containers/Authentication/Authentication.scss index 4d16cc346..6a0ee2c49 100644 --- a/src/containers/Authentication/Authentication.scss +++ b/src/containers/Authentication/Authentication.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .authentication { display: flex; @@ -45,7 +45,7 @@ margin: 34px 0 16px; font-weight: 600; - @include header-2-typography; + @include mixins.header-2-typography; } &__form-wrapper { diff --git a/src/containers/Cluster/Cluster.scss b/src/containers/Cluster/Cluster.scss index 51b407308..635cd96cc 100644 --- a/src/containers/Cluster/Cluster.scss +++ b/src/containers/Cluster/Cluster.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-cluster { position: relative; @@ -18,7 +18,7 @@ &__title { font-weight: var(--g-text-header-font-weight); - @include header-1-typography(); + @include mixins.header-1-typography(); } &__title-skeleton { @@ -36,11 +36,11 @@ padding-left: 20px; transform: translateX(-20px); - @include sticky-top(); + @include mixins.sticky-top(); } &__tabs { display: flex; - @include tabs-wrapper-styles(); + @include mixins.tabs-wrapper-styles(); } &__sticky-wrapper { diff --git a/src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss b/src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss index c2b633161..b16281ec7 100644 --- a/src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss +++ b/src/containers/Cluster/ClusterDashboard/ClusterDashboard.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .ydb-cluster-dashboard { position: sticky; @@ -7,7 +7,7 @@ padding-top: 16px; &__error { - @include body-2-typography(); + @include mixins.body-2-typography(); } &__card { display: flex; diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss index 8db9a954b..568a1076a 100644 --- a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss +++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins'; +@use '../../../styles/mixins'; .cluster-info { padding: 20px 0; @@ -8,7 +8,7 @@ } &__error { - @include body-2-typography(); + @include mixins.body-2-typography(); } &__metrics { diff --git a/src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss b/src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss index be7cee3e1..7db889550 100644 --- a/src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss +++ b/src/containers/Cluster/ClusterInfo/components/NodesState/NodesState.scss @@ -1,4 +1,4 @@ -@import '../../../../../styles/mixins.scss'; +@use '../../../../../styles/mixins.scss'; .ydb-nodes-state { display: flex; @@ -13,5 +13,5 @@ color: var(--entity-state-font-color); border-radius: var(--g-spacing-1); background-color: var(--entity-state-background-color); - @include entity-state-colors(); + @include mixins.entity-state-colors(); } diff --git a/src/containers/Header/Header.scss b/src/containers/Header/Header.scss index c0af72f01..bffe551b7 100644 --- a/src/containers/Header/Header.scss +++ b/src/containers/Header/Header.scss @@ -1,5 +1,3 @@ -@import '../../styles/mixins.scss'; - .header { display: flex; flex: 0 0 40px; diff --git a/src/containers/Heatmap/Heatmap.scss b/src/containers/Heatmap/Heatmap.scss index 3947bfcdd..ea1d7dd33 100644 --- a/src/containers/Heatmap/Heatmap.scss +++ b/src/containers/Heatmap/Heatmap.scss @@ -1,10 +1,10 @@ -@import '../../styles/mixins'; +@use '../../styles/mixins'; .heatmap { overflow: auto; height: 100%; - @include flex-container(); + @include mixins.flex-container(); &__limits { display: flex; @@ -43,7 +43,7 @@ font-weight: 500; text-transform: uppercase; - @include body-2-typography(); + @include mixins.body-2-typography(); &_overall { margin-right: 15px; diff --git a/src/containers/Node/Node.scss b/src/containers/Node/Node.scss index e9b83feb7..86bf17c0b 100644 --- a/src/containers/Node/Node.scss +++ b/src/containers/Node/Node.scss @@ -1,8 +1,8 @@ -@import '../../styles/mixins'; +@use '../../styles/mixins'; .node { overflow: auto; - @include flex-container(); + @include mixins.flex-container(); &__header { margin: 16px 20px; @@ -12,7 +12,7 @@ position: relative; overflow: auto; - @include flex-container(); + @include mixins.flex-container(); } &__storage { @@ -28,7 +28,7 @@ align-items: center; padding: 0 20px; - @include tabs-wrapper-styles(); + @include mixins.tabs-wrapper-styles(); } &__tab { diff --git a/src/containers/Node/NodeStructure/NodeStructure.scss b/src/containers/Node/NodeStructure/NodeStructure.scss index f196cabbd..50e449f2f 100644 --- a/src/containers/Node/NodeStructure/NodeStructure.scss +++ b/src/containers/Node/NodeStructure/NodeStructure.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .kv-node-structure { position: relative; @@ -7,8 +7,8 @@ overflow: auto; flex-direction: column; flex-shrink: 0; - @include flex-container(); - @include body-2-typography(); + @include mixins.flex-container(); + @include mixins.body-2-typography(); &__error { padding: 20px 20px 0; diff --git a/src/containers/Nodes/Nodes.scss b/src/containers/Nodes/Nodes.scss index 15459b7d2..5970de76a 100644 --- a/src/containers/Nodes/Nodes.scss +++ b/src/containers/Nodes/Nodes.scss @@ -1,8 +1,8 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-nodes { &__search { - @include search(); + @include mixins.search(); } &__show-all-wrapper { diff --git a/src/containers/PDiskPage/PDiskPage.scss b/src/containers/PDiskPage/PDiskPage.scss index 72cf55a0b..6da61947a 100644 --- a/src/containers/PDiskPage/PDiskPage.scss +++ b/src/containers/PDiskPage/PDiskPage.scss @@ -1,4 +1,4 @@ -@import '../../styles//mixins.scss'; +@use '../../styles//mixins.scss'; .ydb-pdisk-page { position: relative; @@ -45,6 +45,6 @@ } &__tabs { - @include tabs-wrapper-styles(); + @include mixins.tabs-wrapper-styles(); } } diff --git a/src/containers/ReduxTooltip/ReduxTooltip.scss b/src/containers/ReduxTooltip/ReduxTooltip.scss index e3882998a..c39afd505 100644 --- a/src/containers/ReduxTooltip/ReduxTooltip.scss +++ b/src/containers/ReduxTooltip/ReduxTooltip.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .popup2 { max-width: 300px; @@ -22,7 +22,7 @@ padding: 20px 20px 20px 0; &__inspector { - @include json-tree-styles(); + @include mixins.json-tree-styles(); :not(.json-inspector__leaf_expanded).json-inspector__leaf_composite:before { content: ''; diff --git a/src/containers/Storage/Storage.scss b/src/containers/Storage/Storage.scss index 7dc3df8bc..d52695d7e 100644 --- a/src/containers/Storage/Storage.scss +++ b/src/containers/Storage/Storage.scss @@ -1,8 +1,8 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .global-storage { &__search { - @include search(); + @include mixins.search(); } &__table { diff --git a/src/containers/StorageGroupPage/StorageGroupPage.scss b/src/containers/StorageGroupPage/StorageGroupPage.scss index 34d6c80e0..956f4d947 100644 --- a/src/containers/StorageGroupPage/StorageGroupPage.scss +++ b/src/containers/StorageGroupPage/StorageGroupPage.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-storage-group-page { position: relative; @@ -28,7 +28,7 @@ &__storage-title { margin-bottom: 0; - @include header-1-typography(); + @include mixins.header-1-typography(); } &__info { diff --git a/src/containers/Tablet/Tablet.scss b/src/containers/Tablet/Tablet.scss index 6b13f19c1..0c7d84bd9 100644 --- a/src/containers/Tablet/Tablet.scss +++ b/src/containers/Tablet/Tablet.scss @@ -1,10 +1,10 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .ydb-tablet-page { $_: &; height: 100%; padding: 20px; - @include body-2-typography(); + @include mixins.body-2-typography(); &__placeholder { display: flex; diff --git a/src/containers/Tablet/components/TabletInfo/TabletInfo.scss b/src/containers/Tablet/components/TabletInfo/TabletInfo.scss index b464aa735..ce24577d7 100644 --- a/src/containers/Tablet/components/TabletInfo/TabletInfo.scss +++ b/src/containers/Tablet/components/TabletInfo/TabletInfo.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-tablet-info { &__link { @@ -7,6 +7,6 @@ &__section-title { margin: var(--g-spacing-1) 0 var(--g-spacing-3); - @include text-subheader-2(); + @include mixins.text-subheader-2(); } } diff --git a/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss b/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss index 8ca2cb43c..735519c65 100644 --- a/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss +++ b/src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-tablet-storage-info { $block: &; @@ -21,12 +21,12 @@ text-align: left; background-color: var(--g-color-base-background); - @include text-subheader-2(); + @include mixins.text-subheader-2(); } :is(#{$block}__table-cell) { height: 40px; padding: 0; - @include text-body-2(); + @include mixins.text-body-2(); } } diff --git a/src/containers/Tenant/Acl/Acl.scss b/src/containers/Tenant/Acl/Acl.scss index 0ed1a6259..bfd2dce80 100644 --- a/src/containers/Tenant/Acl/Acl.scss +++ b/src/containers/Tenant/Acl/Acl.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .ydb-acl { width: 100%; @@ -19,9 +19,9 @@ margin: var(--g-spacing-3) 0 var(--g-spacing-5); font-weight: 600; - @include text-subheader-2(); + @include mixins.text-subheader-2(); } &__group-label { - @include text-subheader-2(); + @include mixins.text-subheader-2(); } } diff --git a/src/containers/Tenant/Diagnostics/Consumers/Consumers.scss b/src/containers/Tenant/Diagnostics/Consumers/Consumers.scss index f86810b32..25244f7e8 100644 --- a/src/containers/Tenant/Diagnostics/Consumers/Consumers.scss +++ b/src/containers/Tenant/Diagnostics/Consumers/Consumers.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-diagnostics-consumers { overflow: auto; @@ -6,19 +6,19 @@ height: 100%; - @include flex-container(); + @include mixins.flex-container(); &__controls { - @include controls(); + @include mixins.controls(); } &__search { - @include search(); + @include mixins.search(); } &__table-wrapper { overflow: auto; - @include flex-container(); + @include mixins.flex-container(); } &__table-content { @@ -28,6 +28,6 @@ } &__table { - @include freeze-nth-column(1); + @include mixins.freeze-nth-column(1); } } diff --git a/src/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss b/src/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss index 5539f52f8..826c7b13a 100644 --- a/src/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss +++ b/src/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss @@ -1,7 +1,7 @@ -@import '../../../../../styles/mixins.scss'; +@use '../../../../../styles/mixins.scss'; .ydb-diagnostics-consumers-topic-stats { - @include body-2-typography(); + @include mixins.body-2-typography(); &__wrapper { display: flex; diff --git a/src/containers/Tenant/Diagnostics/Describe/Describe.scss b/src/containers/Tenant/Diagnostics/Describe/Describe.scss index d1ae60287..b8d8a57c0 100644 --- a/src/containers/Tenant/Diagnostics/Describe/Describe.scss +++ b/src/containers/Tenant/Diagnostics/Describe/Describe.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-describe { &__message-container { @@ -16,7 +16,7 @@ } &__tree { - @include json-tree-styles(); + @include mixins.json-tree-styles(); } &__copy { diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss index 85424bc20..070d3d16c 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.scss +++ b/src/containers/Tenant/Diagnostics/Diagnostics.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .kv-tenant-diagnostics { display: flex; @@ -18,7 +18,7 @@ justify-content: space-between; align-items: center; - @include tabs-wrapper-styles(); + @include mixins.tabs-wrapper-styles(); & .g-tabs_direction_horizontal { box-shadow: unset; } diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss index 3d046f204..494ffdcb1 100644 --- a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss +++ b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss @@ -1,5 +1,3 @@ -@import '../../../../styles/mixins.scss'; - .ydb-hot-keys { &__primary-key-column { display: flex; diff --git a/src/containers/Tenant/Diagnostics/Network/Network.scss b/src/containers/Tenant/Diagnostics/Network/Network.scss index baf2b4418..753cf305f 100644 --- a/src/containers/Tenant/Diagnostics/Network/Network.scss +++ b/src/containers/Tenant/Diagnostics/Network/Network.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .network { display: flex; @@ -10,7 +10,7 @@ max-width: 1305px; height: 100%; - @include body-2-typography(); + @include mixins.body-2-typography(); &__nodes-row { display: flex; @@ -24,7 +24,7 @@ &__inner { overflow: auto; - @include flex-container(); + @include mixins.flex-container(); } &__right { @@ -77,7 +77,7 @@ color: var(--g-color-text-secondary); border-bottom: 1px solid var(--g-color-base-generic-accent); - @include body-2-typography(); + @include mixins.body-2-typography(); } &__link { @@ -91,7 +91,7 @@ font-weight: 500; - @include body-1-typography(); + @include mixins.body-1-typography(); } &__checkbox-wrapper { @@ -116,7 +116,7 @@ &__controls-wrapper { display: flex; flex-direction: row; - @include flex-container(); + @include mixins.flex-container(); } &__select { diff --git a/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/AsyncReplicationPaths.scss b/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/AsyncReplicationPaths.scss index d36fa8ffb..585285df5 100644 --- a/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/AsyncReplicationPaths.scss +++ b/src/containers/Tenant/Diagnostics/Overview/AsyncReplicationPaths/AsyncReplicationPaths.scss @@ -1,7 +1,7 @@ -@import '../../../../../styles/mixins.scss'; +@use '../../../../../styles/mixins.scss'; .ydb-async-replication-paths { &__title { - @include info-viewer-title(); + @include mixins.info-viewer-title(); } } diff --git a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss index 973dfbec6..4f787845b 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss +++ b/src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss @@ -1,8 +1,8 @@ -@import '../../../../../styles/mixins.scss'; +@use '../../../../../styles/mixins.scss'; .ydb-diagnostics-table-info { &__title { - @include info-viewer-title(); + @include mixins.info-viewer-title(); } &__row { diff --git a/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss b/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss index c995006cf..5fe9b4a4e 100644 --- a/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss +++ b/src/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss @@ -1,8 +1,8 @@ -@import '../../../../../styles/mixins.scss'; +@use '../../../../../styles/mixins.scss'; .ydb-overview-topic-stats { &__title { - @include info-viewer-title(); + @include mixins.info-viewer-title(); } .ydb-loader { diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.scss b/src/containers/Tenant/Diagnostics/Partitions/Partitions.scss index 713a7f98f..f94cec1dc 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/Partitions.scss +++ b/src/containers/Tenant/Diagnostics/Partitions/Partitions.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-diagnostics-partitions { overflow: auto; @@ -6,10 +6,10 @@ height: 100%; - @include flex-container(); + @include mixins.flex-container(); &__controls { - @include controls(); + @include mixins.controls(); } &__consumer-select { @@ -21,7 +21,7 @@ } &__search { - @include search(); + @include mixins.search(); &_partition { width: 100px; } @@ -32,7 +32,7 @@ &__table-wrapper { overflow: auto; - @include flex-container(); + @include mixins.flex-container(); } &__table-content { @@ -42,6 +42,6 @@ } &__table { - @include freeze-nth-column(1); + @include mixins.freeze-nth-column(1); } } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss index 1b5048536..169ae1911 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss @@ -1,4 +1,4 @@ -@import '../../../../../styles/mixins.scss'; +@use '../../../../../styles/mixins.scss'; .healthcheck { $block: &; @@ -23,7 +23,7 @@ color: var(--g-color-text-link); - @include lead-typography(); + @include mixins.lead-typography(); } &__preview-content { diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss index 609fb67f8..91e4a98d8 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss @@ -1,4 +1,4 @@ -@import '../../../../../../styles/mixins.scss'; +@use '../../../../../../styles/mixins.scss'; .issue-tree { display: flex; @@ -23,7 +23,7 @@ } &__inspector { - @include json-tree-styles(); + @include mixins.json-tree-styles(); :not(.json-inspector__leaf_expanded).json-inspector__leaf_composite:before { content: ''; diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss index de5a3fa54..dc863b062 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss @@ -1,4 +1,4 @@ -@import '../../../../../../styles/mixins.scss'; +@use '../../../../../../styles/mixins.scss'; .ydb-metrics-card { $b: &; @@ -18,7 +18,7 @@ font-weight: 600; color: var(--g-color-text-link); - @include lead-typography(); + @include mixins.lead-typography(); } &__content { diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss index 003311176..dcc5d3599 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .tenant-overview { overflow: auto; @@ -47,7 +47,7 @@ font-weight: 700; - @include body-2-typography(); + @include mixins.body-2-typography(); } &__table { diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss index 99cb59533..7f7d2b2fa 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss +++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .kv-top-queries { display: flex; @@ -6,10 +6,10 @@ height: 100%; - @include query-data-table; + @include mixins.query-data-table; &__search { - @include search(); + @include mixins.search(); } &__row { diff --git a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.scss b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.scss index ae1c4ebb2..94f139291 100644 --- a/src/containers/Tenant/ObjectGeneral/ObjectGeneral.scss +++ b/src/containers/Tenant/ObjectGeneral/ObjectGeneral.scss @@ -1,5 +1,3 @@ -@import '../../../styles/mixins.scss'; - .object-general { display: flex; flex-grow: 1; diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss index 0907d3e1f..4b75e9a67 100644 --- a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss +++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .ydb-object-summary { position: relative; @@ -59,7 +59,7 @@ &__sticky-top { z-index: 5; - @include sticky-top(); + @include mixins.sticky-top(); } &__tabs { @@ -147,7 +147,7 @@ } } &__overview-title { - @include info-viewer-title(); + @include mixins.info-viewer-title(); } &__overview-item-content { text-align: end; diff --git a/src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.scss b/src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.scss index 6c8350720..a688c80a4 100644 --- a/src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.scss +++ b/src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.scss @@ -1,9 +1,9 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .cancel-query-button { &__stop-button { &_error { - @include query-buttons-animations(); + @include mixins.query-buttons-animations(); } } } diff --git a/src/containers/Tenant/Query/Preview/Preview.scss b/src/containers/Tenant/Query/Preview/Preview.scss index e90041983..a151d5f2d 100644 --- a/src/containers/Tenant/Query/Preview/Preview.scss +++ b/src/containers/Tenant/Query/Preview/Preview.scss @@ -1,9 +1,9 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .kv-preview { height: 100%; - @include flex-container(); - @include query-data-table(); + @include mixins.flex-container(); + @include mixins.query-data-table(); &__header { position: sticky; top: 0; diff --git a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss index 452c96551..26a16c55d 100644 --- a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss +++ b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-queries-history { overflow: auto; @@ -6,7 +6,7 @@ height: 100%; padding: 0 20px; - @include flex-container(); + @include mixins.flex-container(); .ydb-table-with-controls-layout__controls { height: 46px; @@ -18,7 +18,7 @@ } &__search { - @include search(); + @include mixins.search(); } &__table-row { diff --git a/src/containers/Tenant/Query/Query.scss b/src/containers/Tenant/Query/Query.scss index d86e8f49a..c35445fbe 100644 --- a/src/containers/Tenant/Query/Query.scss +++ b/src/containers/Tenant/Query/Query.scss @@ -1,8 +1,8 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .ydb-query { max-height: calc(100% - 56px); // 56px - height of TenantNavigation - @include flex-container(); + @include mixins.flex-container(); &__tabs { padding: 0 20px 16px; diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss b/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss index e0f989a0f..59c9a2379 100644 --- a/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss +++ b/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .query-editor { position: relative; @@ -9,7 +9,7 @@ height: 100%; - @include query-data-table; + @include mixins.query-data-table; &__monaco { position: relative; diff --git a/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss b/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss index 7f154b2c9..b668d3ba1 100644 --- a/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss +++ b/src/containers/Tenant/Query/QueryResult/components/QueryJSONViewer/QueryJSONViewer.scss @@ -1,4 +1,4 @@ -@import '../../../../../../styles/mixins.scss'; +@use '../../../../../../styles/mixins.scss'; .ydb-query-json-viewer { &__inspector { @@ -7,6 +7,6 @@ width: 100%; height: 100%; padding: 15px 10px; - @include json-tree-styles(); + @include mixins.json-tree-styles(); } } diff --git a/src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.scss b/src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.scss index 34db8dba6..7b302e602 100644 --- a/src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.scss +++ b/src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.scss @@ -1,4 +1,4 @@ -@import '../../../../../../styles/mixins.scss'; +@use '../../../../../../styles/mixins.scss'; .ydb-query-result-sets-viewer { &__tabs { @@ -28,7 +28,7 @@ padding-left: 10px; - @include query-data-table(); + @include mixins.query-data-table(); & .data-table__table-wrapper { padding-bottom: 0; } diff --git a/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/SimplifiedPlan.scss b/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/SimplifiedPlan.scss index 2127858db..4b0094d00 100644 --- a/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/SimplifiedPlan.scss +++ b/src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/SimplifiedPlan.scss @@ -1,4 +1,4 @@ -@import '../../../../../../styles/mixins.scss'; +@use '../../../../../../styles/mixins.scss'; .ydb-query-simplified-plan { $block: &; @@ -36,7 +36,7 @@ text-align: left; background-color: var(--g-color-base-background); - @include text-subheader-2(); + @include mixins.text-subheader-2(); &_align_right { text-align: right; } @@ -55,7 +55,7 @@ &__table-cell { height: 30px; padding: 0; - @include text-body-2(); + @include mixins.text-body-2(); &_align_right { text-align: right; } diff --git a/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss b/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss index c38bec416..165d33984 100644 --- a/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss +++ b/src/containers/Tenant/Query/SavedQueries/SavedQueries.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .ydb-saved-queries { $block: &; @@ -8,7 +8,7 @@ height: 100%; padding: 0 20px; - @include flex-container(); + @include mixins.flex-container(); .ydb-table-with-controls-layout__controls { height: 46px; @@ -20,7 +20,7 @@ } &__search { - @include search(); + @include mixins.search(); } &__row { diff --git a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss index 04f508bd4..6a819980e 100644 --- a/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss +++ b/src/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/mixins.scss'; +@use '../../../../styles/mixins.scss'; .schema-viewer { &__keys { @@ -11,7 +11,7 @@ display: inline; color: var(--g-color-text-complementary); - @include body-1-typography(); + @include mixins.body-1-typography(); } &-header { @@ -21,7 +21,7 @@ white-space: nowrap; color: var(--g-color-text-primary); - @include subheader-1-typography(); + @include mixins.subheader-1-typography(); } &-label { diff --git a/src/containers/Tenant/Tenant.scss b/src/containers/Tenant/Tenant.scss index 9b18ea19b..76d6539b7 100644 --- a/src/containers/Tenant/Tenant.scss +++ b/src/containers/Tenant/Tenant.scss @@ -1,10 +1,10 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .tenant-page { overflow: hidden; - @include body-2-typography(); - @include flex-container(); + @include mixins.body-2-typography(); + @include mixins.flex-container(); &__main { flex-grow: 1; diff --git a/src/containers/Tenants/Tenants.scss b/src/containers/Tenants/Tenants.scss index bcfc95acd..0307fe190 100644 --- a/src/containers/Tenants/Tenants.scss +++ b/src/containers/Tenants/Tenants.scss @@ -1,4 +1,4 @@ -@import '../../styles/mixins.scss'; +@use '../../styles/mixins.scss'; .tenants { &__format-label { @@ -14,7 +14,7 @@ } &__search { - @include search(); + @include mixins.search(); } &__tablets { diff --git a/src/containers/VDiskPage/VDiskPage.scss b/src/containers/VDiskPage/VDiskPage.scss index fba6f02b7..5af1027dc 100644 --- a/src/containers/VDiskPage/VDiskPage.scss +++ b/src/containers/VDiskPage/VDiskPage.scss @@ -1,4 +1,4 @@ -@import '../../styles//mixins.scss'; +@use '../../styles//mixins.scss'; .ydb-vdisk-page { position: relative; @@ -31,6 +31,6 @@ &__storage-title { margin-bottom: 0; - @include header-1-typography(); + @include mixins.header-1-typography(); } } diff --git a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss b/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss index a57839a44..0cdd0c626 100644 --- a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss +++ b/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss @@ -1,4 +1,4 @@ -@import '../../../styles/mixins.scss'; +@use '../../../styles/mixins.scss'; .ydb-versions-grouped-node-tree { $item-width: 100%; @@ -23,7 +23,7 @@ } .ydb-tree-view { - @include body-2-typography(); + @include mixins.body-2-typography(); // Apply margin ignoring first element of the tree .ydb-tree-view { diff --git a/src/containers/Versions/Versions.scss b/src/containers/Versions/Versions.scss index 9a781374d..928965e7c 100644 --- a/src/containers/Versions/Versions.scss +++ b/src/containers/Versions/Versions.scss @@ -1,5 +1,3 @@ -@import '../../styles/mixins.scss'; - .ydb-versions { $_: &; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 0f729606f..2b9014038 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -1,4 +1,4 @@ -@import '@gravity-ui/uikit/styles/mixins.scss'; +@forward '@gravity-ui/uikit/styles/mixins.scss'; @mixin container() { max-width: 1170px; diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 1d543486f..52b0320dc 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -1,7 +1,7 @@ -@import './themes/light'; -@import './themes/light-hc'; -@import './themes/dark'; -@import './themes/dark-hc'; +@use './themes/light'; +@use './themes/light-hc'; +@use './themes/dark'; +@use './themes/dark-hc'; // Override @gravity-ui/uikit color palette with our own colors @@ -23,7 +23,7 @@ --g-color-text-brand-contrast: var(--g-color-text-light-primary); --g-color-text-link: var(--g-color-private-blue-600-solid); --g-color-text-link-hover: var(--g-color-private-blue-800-solid); - @include colors-private-light; + @include light.colors-private-light; } &_theme_light-hc { @@ -38,7 +38,7 @@ --g-color-text-brand-contrast: var(--g-color-text-light-primary); --g-color-text-link: var(--g-color-private-blue-650-solid); --g-color-text-link-hover: var(--g-color-private-blue-850-solid); - @include colors-private-light-hc; + @include light-hc.colors-private-light-hc; } &_theme_dark { @@ -53,7 +53,7 @@ --g-color-text-brand-contrast: var(--g-color-text-light-primary); --g-color-text-link: var(--g-color-private-blue-550-solid); --g-color-text-link-hover: var(--g-color-private-blue-700-solid); - @include colors-private-dark; + @include dark.colors-private-dark; } &_theme_dark-hc { @@ -68,6 +68,6 @@ --g-color-text-brand-contrast: var(--g-color-text-light-primary); --g-color-text-link: var(--g-color-private-blue-650-solid); --g-color-text-link-hover: var(--g-color-private-blue-800-solid); - @include colors-private-dark-hc; + @include dark-hc.colors-private-dark-hc; } }