From 5b977a1ccf3ca585e7b5dfb26ef1ec771e4af8e2 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Tue, 21 Sep 2021 12:44:54 +0300 Subject: [PATCH] improve imports and variables usage --- .../base-screen/base-screen.component.scss | 6 +- .../app/components/logo/logo.component.scss | 4 +- .../notifications.component.scss | 14 +-- .../spotlight-search.component.scss | 8 +- .../app/components/toast/toast.component.scss | 1 - .../user-profile-screen.component.scss | 8 +- .../add-edit-dictionary-dialog.component.scss | 2 - ...elete-file-attribute-dialog.component.scss | 4 +- ...confirm-delete-users-dialog.component.scss | 4 +- .../active-fields-listing.component.scss | 6 +- ...ttributes-csv-import-dialog.component.scss | 42 ++++----- ...e-attributes-listing-screen.component.scss | 4 +- .../general-config-screen.component.scss | 10 +- .../license-information-screen.component.scss | 10 +- .../reports/reports-screen.component.scss | 18 ++-- .../watermark/watermark-screen.component.scss | 14 +-- .../annotation-actions.component.scss | 4 +- .../comments/comments.component.scss | 2 - .../document-info.component.scss | 8 +- .../dossier-details-stats.component.scss | 10 +- .../dossier-details.component.scss | 6 +- .../dossier-listing-details.component.scss | 2 - .../file-workload.component.scss | 34 +++---- .../needs-work-badge.component.scss | 2 - .../page-exclusion.component.scss | 14 +-- .../page-indicator.component.scss | 14 +-- .../pdf-viewer/pdf-viewer.component.scss | 14 +-- .../team-members-manager.component.scss | 7 +- .../team-members/team-members.component.scss | 8 +- .../add-dossier-dialog.component.scss | 2 - .../edit-dossier-attributes.component.scss | 6 +- ...t-dossier-deleted-documents.component.scss | 8 +- ...it-dossier-download-package.component.scss | 2 - .../edit-dossier-dialog.component.scss | 8 +- .../edit-dossier-general-info.component.scss | 2 - .../dossier-overview-screen.component.scss | 8 +- .../file-preview-screen.component.scss | 6 +- .../search-screen.component.scss | 5 +- .../annotation-icon.component.scss | 8 +- .../user-button/user-button.component.scss | 4 +- .../dictionary-manager.component.scss | 8 +- .../initials-avatar.component.scss | 4 +- .../pagination/pagination.component.scss | 4 +- .../components/select/select.component.scss | 18 ++-- .../side-nav/side-nav.component.scss | 16 ++-- .../simple-doughnut-chart.component.scss | 6 +- .../file-drop/file-drop.component.scss | 2 - .../upload-status-overlay.component.scss | 32 +++---- .../src/assets/styles/red-autocomplete.scss | 5 +- .../src/assets/styles/red-breadcrumbs.scss | 10 +- .../src/assets/styles/red-checkbox.scss | 8 +- .../src/assets/styles/red-components.scss | 92 +++++++++---------- .../src/assets/styles/red-controls.scss | 14 +-- apps/red-ui/src/assets/styles/red-editor.scss | 10 +- .../src/assets/styles/red-help-mode.scss | 4 +- apps/red-ui/src/assets/styles/red-list.scss | 4 +- .../src/assets/styles/red-material-theme.scss | 44 ++++----- apps/red-ui/src/assets/styles/red-menu.scss | 10 +- .../src/assets/styles/red-page-layout.scss | 22 ++--- .../src/assets/styles/red-progress-bar.scss | 6 +- apps/red-ui/src/assets/styles/red-select.scss | 12 +-- apps/red-ui/src/assets/styles/red-slider.scss | 8 +- apps/red-ui/src/assets/styles/red-tables.scss | 5 +- apps/red-ui/src/assets/styles/red-tabs.scss | 10 +- apps/red-ui/src/assets/styles/red-theme.scss | 48 +++++----- apps/red-ui/src/assets/styles/red-toasts.scss | 22 ++--- .../src/assets/styles/red-toggle-button.scss | 6 +- apps/red-ui/src/assets/styles/red-toggle.scss | 10 +- .../src/assets/styles/red-tooltips.scss | 10 +- paligo-styles/footer.scss | 8 +- paligo-styles/header.scss | 16 ++-- paligo-styles/homepage.scss | 8 +- paligo-styles/manual-sidebar.scss | 18 ++-- paligo-styles/manual.scss | 24 ++--- paligo-styles/mixin.scss | 24 ++--- paligo-styles/search.scss | 22 ++--- paligo-styles/style.scss | 32 +++---- 77 files changed, 461 insertions(+), 480 deletions(-) diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss index 3ec6a589c..784045e90 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss @@ -1,8 +1,8 @@ -@import '../../../assets/styles/variables'; +@use 'variables'; .dev-mode { - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; font-size: 22px; line-height: 16px; text-align: center; diff --git a/apps/red-ui/src/app/components/logo/logo.component.scss b/apps/red-ui/src/app/components/logo/logo.component.scss index 2dc42ff64..fa91fa7e1 100644 --- a/apps/red-ui/src/app/components/logo/logo.component.scss +++ b/apps/red-ui/src/app/components/logo/logo.component.scss @@ -1,7 +1,7 @@ -@import '../../../assets/styles/variables'; +@use 'variables'; :host { - color: $primary; + color: variables.$primary; } mat-icon { diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss index 22cac0d80..c59622ea0 100644 --- a/apps/red-ui/src/app/components/notifications/notifications.component.scss +++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss @@ -1,4 +1,4 @@ -@import '../../../assets/styles/variables'; +@use 'variables'; .mt-2 { margin-top: 2px; @@ -35,7 +35,7 @@ white-space: normal; a { - color: $accent; + color: variables.$accent; font-weight: bold; } } @@ -45,17 +45,17 @@ height: 8px; width: 8px; border-radius: 50%; - background-color: $grey-4; + background-color: variables.$grey-4; position: absolute; top: 8px; right: 8px; } &:hover { - background-color: $grey-6; + background-color: variables.$grey-6; .dot { - background-color: $grey-5; + background-color: variables.$grey-5; } a { @@ -64,10 +64,10 @@ } &.unread { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); .dot { - background-color: $primary; + background-color: variables.$primary; } } } diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss index 9d7c4942c..94602ebe5 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss @@ -1,4 +1,4 @@ -@import '../../../assets/styles/variables'; +@use 'variables'; .spotlight-row { width: 300px; @@ -9,13 +9,13 @@ font-size: 13px; border: none; outline: none; - color: $accent; - background-color: $white; + color: variables.$accent; + background-color: variables.$white; } .highlight { border-radius: 4px; - background-color: $grey-2; + background-color: variables.$grey-2; } .wrapper { diff --git a/apps/red-ui/src/app/components/toast/toast.component.scss b/apps/red-ui/src/app/components/toast/toast.component.scss index 6b1684fa0..e69de29bb 100644 --- a/apps/red-ui/src/app/components/toast/toast.component.scss +++ b/apps/red-ui/src/app/components/toast/toast.component.scss @@ -1 +0,0 @@ -@import '../../../assets/styles/variables'; diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss index 292a6e5c4..677b2c3d2 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss +++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss @@ -1,10 +1,10 @@ -@import '../../../assets/styles/variables'; -@import '../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .content-container { - background-color: $grey-2; + background-color: variables.$grey-2; justify-content: center; - @include scroll-bar; + @include common-mixins.scroll-bar; overflow: auto; } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss index 57077da4b..d630c483b 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../assets/styles/variables'; - .first-row { display: flex; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss index 2e2ff968a..52d6e73ce 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss @@ -1,7 +1,7 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .dialog-header { - color: $primary; + color: variables.$primary; } .heading { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss index 2e2ff968a..52d6e73ce 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss @@ -1,7 +1,7 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .dialog-header { - color: $primary; + color: variables.$primary; } .heading { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss index be28d9506..d87b9c85d 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../assets/styles/variables'; +@use 'variables'; :host ::ng-deep iqser-table { iqser-table-header { @@ -8,7 +8,7 @@ .header-item { box-shadow: none; - border-top: 1px solid $separator; + border-top: 1px solid variables.$separator; .all-caps-label { margin-right: 10px; @@ -20,7 +20,7 @@ .separator { margin-left: 14px; - background-color: $separator; + background-color: variables.$separator; width: 1px; height: 30px; margin-right: 16px; diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss index f0975929f..652e85a9e 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss @@ -1,5 +1,5 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .sub-header { display: flex; @@ -13,7 +13,7 @@ padding-left: 32px; min-width: 376px; box-sizing: border-box; - border-right: 1px solid $separator; + border-right: 1px solid variables.$separator; .info { margin-bottom: 8px; @@ -55,9 +55,9 @@ .csv-part-header { height: 50px; box-sizing: border-box; - background: $white; - border-top: 1px solid $separator; - border-bottom: 1px solid $separator; + background: variables.$white; + border-top: 1px solid variables.$separator; + border-bottom: 1px solid variables.$separator; display: flex; align-items: center; justify-content: space-between; @@ -83,14 +83,14 @@ } .search-input-container { - background-color: $white; - border-bottom: 1px solid $separator; + background-color: variables.$white; + border-bottom: 1px solid variables.$separator; padding: 8px 16px; } .csv-part-content { overflow: auto; - @include no-scroll-bar; + @include common-mixins.no-scroll-bar; height: calc(100% - 49px); font-size: 12px; @@ -101,13 +101,13 @@ align-items: center; justify-content: center; text-align: center; - color: $grey-7; + color: variables.$grey-7; line-height: 15px; font-weight: 500; } > *:not(.no-column-data) { - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; display: flex; padding: 7px 16px; align-items: center; @@ -117,14 +117,14 @@ > .left { width: 375px; min-width: 375px; - background: $grey-2; + background: variables.$grey-2; .csv-header-pill-content { overflow: auto; padding: 7px 0; - background: $grey-2; + background: variables.$grey-2; height: calc(100% - 64px); - @include no-scroll-bar; + @include common-mixins.no-scroll-bar; &.search-open { height: calc(100% - 58px - 51px); @@ -137,7 +137,7 @@ min-height: 32px; border-radius: 8px; padding: 10px; - background: $white; + background: variables.$white; cursor: pointer; display: flex; flex-direction: column; @@ -153,26 +153,26 @@ } .sample { - @include line-clamp(1); + @include common-mixins.line-clamp(1); } } &.selected { - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; } } } } - border-right: 1px solid $separator; + border-right: 1px solid variables.$separator; } > .center { width: 150px; min-width: 150px; - background: $grey-2; - border-right: 1px solid $separator; + background: variables.$grey-2; + border-right: 1px solid variables.$separator; &:not(.collapsed) iqser-circle-button { margin-right: -8px; diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss index 5831de04b..6b4d12879 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'common-mixins'; :host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell { &.center { @@ -6,7 +6,7 @@ } &.label span { - @include line-clamp(1); + @include common-mixins.line-clamp(1); } &.read-only mat-icon { diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss index 4c55f0e8b..ba039443f 100644 --- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss @@ -1,12 +1,12 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .content-container { - background-color: $grey-2; + background-color: variables.$grey-2; display: flex; flex-direction: column; align-items: center; - @include scroll-bar; + @include common-mixins.scroll-bar; overflow: auto; } @@ -16,7 +16,7 @@ } .inline-input-group { - background-color: rgba($grey-6, 0.8); + background-color: rgba(variables.$grey-6, 0.8); width: 100%; height: 38px; border-radius: 4px; diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss index f70f123bb..4fb9dc336 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss @@ -1,9 +1,9 @@ -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; -@import '../../../../../assets/styles/variables'; +@use 'common-mixins'; +@use 'variables'; .content-container { overflow: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; display: flex; flex-direction: column; @@ -28,7 +28,7 @@ &:hover { > div { - background-color: $grey-2; + background-color: variables.$grey-2; } } } @@ -37,7 +37,7 @@ grid-column: span 2; padding: 20px 20px 8px; margin-bottom: 8px; - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; } } diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss index bb90d8932..82bf1b1f7 100644 --- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss @@ -1,12 +1,12 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .content-container, .right-container { flex: 1; padding: 30px; overflow: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; } .right-container { @@ -21,7 +21,7 @@ .template { padding: 8px 10px; - background-color: $grey-6; + background-color: variables.$grey-6; border-radius: 4px; transition: background-color 0.2s; position: relative; @@ -32,7 +32,7 @@ .name { max-width: calc(100% - 100px); - @include line-clamp(1); + @include common-mixins.line-clamp(1); } .actions { @@ -48,7 +48,7 @@ } &:hover { - background-color: $grey-4; + background-color: variables.$grey-4; .actions { display: flex; @@ -81,8 +81,8 @@ grid-template-columns: 1fr 2fr; .all-caps-label { - border-top: 1px solid $separator; - border-bottom: 1px solid $separator; + border-top: 1px solid variables.$separator; + border-bottom: 1px solid variables.$separator; padding: 8px 32px; &:nth-child(2) { @@ -93,7 +93,7 @@ .placeholder, .description { padding: 16px 16px; - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; } .placeholder { diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss index 23d6f68f5..a6a1f2223 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .content-container { order: 1; @@ -15,7 +15,7 @@ min-width: 353px; padding: 24px; border-left: none; - border-right: 1px solid $separator; + border-right: 1px solid variables.$separator; &.has-scrollbar:hover { padding-right: 13px; @@ -32,8 +32,8 @@ width: 60px; height: 60px; border-radius: 8px; - background-color: $grey-6; - color: $grey-7; + background-color: variables.$grey-6; + color: variables.$grey-7; align-items: center; justify-content: center; text-align: center; @@ -46,7 +46,7 @@ } &:not(.disabled):not(.active):hover { - background-color: darken($grey-6, 2); + background-color: darken(variables.$grey-6, 2); } &:not(:last-child) { @@ -54,8 +54,8 @@ } &.active { - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; } &.times-new-roman { diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss index 82e86a785..79ed0f815 100644 --- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .annotation-actions { display: none; @@ -8,7 +8,7 @@ } .confirm.active { - background-color: $grey-2; + background-color: variables.$grey-2; } > *:not(:last-child) { diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss index 422830c95..6d438a45f 100644 --- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../assets/styles/variables'; - :host { display: flex; flex-direction: column; diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss index f5b20cc92..4ff5ff6c0 100644 --- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss @@ -1,5 +1,5 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; :host { display: block; @@ -13,7 +13,7 @@ .right-content { flex-direction: column; - @include scroll-bar; + @include common-mixins.scroll-bar; overflow: hidden; &:hover { @@ -42,7 +42,7 @@ } &:not(:last-child) { - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; } } diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss index fde08cbc3..dd9794cb1 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss @@ -1,6 +1,6 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../assets/styles/red-components'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-texts'; +@use 'variables'; +@use 'red-components'; +@use 'common-texts'; :host { @extend .stats-subtitle; @@ -19,10 +19,10 @@ &.link-property { cursor: pointer; - transition: background-color 0.2; + transition: background-color 0.2s; &:hover { - background-color: $grey-6; + background-color: variables.$grey-6; } } } diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss index 55794a2a7..1be2bcbd3 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .header-wrapper { display: flex; @@ -29,11 +29,11 @@ padding: 3px 8px; &:hover { - background-color: $grey-6; + background-color: variables.$grey-6; } &.active { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); } &:not(:last-of-type) { diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss index d5ecdcf74..f0e54ada6 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../assets/styles/variables'; - :host { flex: 1; display: flex; diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss index b1562b2a2..e15439435 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss @@ -1,10 +1,10 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .read-only { padding: 13px 16px; - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; justify-content: space-between; .read-only-text { @@ -48,12 +48,12 @@ .multi-select { min-height: 40px; - background: $primary; + background: variables.$primary; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 16px; - color: $white; + color: variables.$white; .selected-wrapper { display: flex; @@ -90,7 +90,7 @@ } .quick-navigation { - border-right: 1px solid $separator; + border-right: 1px solid variables.$separator; min-width: 61px; overflow: hidden; display: flex; @@ -105,7 +105,7 @@ transition: background-color 0.25s; &:not(.disabled):hover { - background-color: $grey-6; + background-color: variables.$grey-6; } mat-icon { @@ -124,21 +124,21 @@ } .pages { - @include no-scroll-bar; + @include common-mixins.no-scroll-bar; overflow: auto; flex: 1; } } .page-separator { - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; height: 32px; box-sizing: border-box; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; - background-color: $grey-6; + background-color: variables.$grey-6; > div { display: flex; @@ -160,7 +160,7 @@ .annotation-wrapper { display: flex; width: 100%; - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; .active-bar-marker { min-width: 4px; @@ -173,7 +173,7 @@ &.active { &:not(.lower-height) .active-bar-marker { - background-color: $primary; + background-color: variables.$primary; } } @@ -188,7 +188,7 @@ &.removed { text-decoration: line-through; - color: $grey-7; + color: variables.$grey-7; } .details { @@ -221,7 +221,7 @@ } &:hover { - background-color: $grey-4; + background-color: variables.$grey-4; } } } @@ -233,7 +233,7 @@ } &:hover { - background-color: $grey-8; + background-color: variables.$grey-8; ::ng-deep .annotation-actions { display: flex; @@ -243,7 +243,7 @@ &:hover { overflow-y: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; } &.has-scrollbar:hover .annotation-wrapper .annotation { diff --git a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss index 098092c17..ab462620f 100644 --- a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../assets/styles/variables'; - .needs-work { display: flex; flex-direction: row; diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss index 904b0c0d2..7d6774afd 100644 --- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss @@ -1,5 +1,5 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; :host { height: 100%; @@ -7,13 +7,13 @@ flex-direction: column; .exclude-pages-input-container { - background-color: $grey-6; + background-color: variables.$grey-6; padding: 15px 15px 16px 14px; } .all-caps-label-container { padding: 8px 16px; - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; } .ranges { @@ -22,7 +22,7 @@ .range { padding-left: 17px; padding-right: 16px; - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; transition: background-color 0.2s; display: flex; align-items: center; @@ -34,7 +34,7 @@ } &:hover { - background-color: $grey-8; + background-color: variables.$grey-8; iqser-circle-button { display: initial; @@ -43,7 +43,7 @@ } &.has-scrollbar:hover { - @include scroll-bar; + @include common-mixins.scroll-bar; overflow: auto; .range { diff --git a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss index 30afe7bb5..047d53725 100644 --- a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss @@ -1,18 +1,18 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .page-wrapper { - color: $accent; + color: variables.$accent; position: relative; padding: 12px 14px 12px 8px; cursor: pointer; border-left: 4px solid transparent; &:hover { - background-color: $grey-2; + background-color: variables.$grey-2; } &.active { - border-left: 4px solid $primary; + border-left: 4px solid variables.$primary; } mat-icon { @@ -35,15 +35,15 @@ } &.read { - color: $grey-5; + color: variables.$grey-5; .text { - color: $accent; + color: variables.$accent; } } .dot { - background: $primary; + background: variables.$primary; height: 8px; width: 8px; border-radius: 50%; diff --git a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss index 436b3cfef..40e50e4c7 100644 --- a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .page { display: flex; @@ -28,9 +28,9 @@ bottom: 20px; left: 50%; transform: translate(-50%); - background: $white; - color: $grey-7; - border: 1px solid $grey-7; + background: variables.$white; + color: variables.$grey-7; + border: 1px solid variables.$grey-7; border-radius: 8px; padding: 6px 2px; display: flex; @@ -56,7 +56,7 @@ margin: 0; } - color: $grey-7; + color: variables.$grey-7; text-decoration: none; outline: none; border: none; @@ -67,7 +67,7 @@ &:hover, &:focus { font-weight: bold; - border-bottom: 1px solid $grey-7; + border-bottom: 1px solid variables.$grey-7; } } @@ -79,7 +79,7 @@ padding-right: 4px; &:hover { - color: $accent; + color: variables.$accent; } } } diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.scss b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.scss index babf015f8..59b089f07 100644 --- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.scss @@ -1,4 +1,5 @@ -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'common-mixins'; +@use 'variables'; .search-container { margin-top: 16px; @@ -16,7 +17,7 @@ redaction-team-members { &:hover { overflow-y: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; } > div { @@ -51,7 +52,7 @@ redaction-team-members { &.selected, &:hover { - background-color: $grey-2; + background-color: variables.$grey-2; .actions { display: flex; diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss index fd2d72cef..c424beb86 100644 --- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .container { flex-wrap: wrap; @@ -27,8 +27,8 @@ width: 16px; height: 16px; border-radius: 50%; - background-color: $accent; - color: $white; + background-color: variables.$accent; + color: variables.$white; position: absolute; right: -8px; bottom: -2px; @@ -48,6 +48,6 @@ .see-less { opacity: 1; - color: $primary; + color: variables.$primary; margin-top: 16px; } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss index dab425932..6b5cbee1d 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../assets/styles/variables'; - .watermark { margin-top: 24px; } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss index 69c1c2210..1354748b7 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../assets/styles/variables'; +@use 'variables'; :host { display: flex; @@ -18,7 +18,7 @@ height: 100%; width: 1px; padding: 0; - background-color: $separator; + background-color: variables.$separator; } .datepicker-wrapper { @@ -60,7 +60,7 @@ height: 50px; object-fit: cover; object-position: center; - border: 1px solid $grey-5; + border: 1px solid variables.$grey-5; margin-right: 15px; } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss index 24e88f23f..d7bf4a0af 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../assets/styles/variables'; -@import '../../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .instructions { - color: $grey-7; + color: variables.$grey-7; flex: 1; text-align: end; } @@ -11,6 +11,6 @@ height: calc(100% - 81px) !important; .cdk-virtual-scroll-content-wrapper .table-item > div.cell.filename span { - @include line-clamp(1); + @include common-mixins.line-clamp(1); } } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss index c8b945532..e333d23f3 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../../assets/styles/variables'; - .download-includes { margin: 16px 0 10px; font-weight: 500; diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss index e1ec50df5..82646d198 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss @@ -1,10 +1,10 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .dialog-content { padding: 0; margin-top: 24px; - border-top: 1px solid $separator; + border-top: 1px solid variables.$separator; display: flex; height: calc(90vh - 81px); @@ -14,7 +14,7 @@ .content { padding: 24px 32px; overflow: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; height: calc(100% - 81px); box-sizing: border-box; diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss index 99069165f..aae48e38a 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../../assets/styles/variables'; - .watermark { margin-top: 24px; } diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss index 5a0559734..a0301eeab 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .file-upload-input { display: none; @@ -8,7 +8,7 @@ &.last-opened { > .selection-column { padding-left: 6px !important; - border-left: 4px solid $primary; + border-left: 4px solid variables.$primary; } > div { @@ -18,7 +18,7 @@ > div.cell { .error { - color: $primary; + color: variables.$primary; } .table-item-title { @@ -57,7 +57,7 @@ @keyframes red-fading-background { 0% { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); } 100% { background-color: inherit; diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss index 4c58808d2..c27e79062 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss @@ -1,9 +1,9 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .vertical-line { width: 1px; height: 30px; - background-color: $grey-4; + background-color: variables.$grey-4; margin: 0 16px; } @@ -32,7 +32,7 @@ ::ng-deep .right-title { height: 70px; display: flex; - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; align-items: center; justify-content: space-between; padding: 0 24px; diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss index fe1d1758e..da9d39c30 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss +++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss @@ -1,9 +1,8 @@ -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; -@import '../../../../../assets/styles/variables'; +@use 'common-mixins'; :host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell { .highlights { - @include line-clamp(1); + @include common-mixins.line-clamp(1); em { background-color: #fffcc4; diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss index 5011306cf..056c8a268 100644 --- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .icon { height: 16px; @@ -11,7 +11,7 @@ align-items: center; text-align: center; text-transform: uppercase; - color: $white; + color: variables.$white; position: relative; background-color: var(--color); } @@ -60,9 +60,9 @@ } .skipped { - background-color: $grey-5; + background-color: variables.$grey-5; } .none { - color: $accent; + color: variables.$accent; } diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss index bf378e5b9..216b80ea7 100644 --- a/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../assets/styles/variables'; +@use 'variables'; :host { button { @@ -11,7 +11,7 @@ &[aria-expanded='true'] { button { - background: rgba($primary, 0.1); + background: rgba(variables.$primary, 0.1); } } diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss index f703f198d..f91bdee75 100644 --- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; :host { width: 100%; @@ -78,7 +78,7 @@ ngx-monaco-editor { position: absolute; right: 12px; top: 8px; - color: $accent; + color: variables.$accent; .with-input { display: flex; @@ -106,7 +106,7 @@ ngx-monaco-editor { padding: 0 100px; box-sizing: border-box; text-align: center; - border: 1px solid $grey-5; + border: 1px solid variables.$grey-5; > mat-icon { height: 60px; @@ -116,6 +116,6 @@ ngx-monaco-editor { } .heading-l { - color: $grey-7; + color: variables.$grey-7; } } diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss index b3063d96f..cba801a89 100644 --- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; .wrapper { display: flex; @@ -15,5 +15,5 @@ } .border { - border: 1px solid $grey-7; + border: 1px solid variables.$grey-7; } diff --git a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss index ef6d9d9df..f8dc457ed 100644 --- a/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; :host { display: flex; @@ -22,7 +22,7 @@ } &.active { - color: $primary; + color: variables.$primary; font-weight: bold; } } diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss index c2ea5945b..1cc0bc590 100644 --- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss @@ -1,13 +1,13 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; :host { border-radius: 8px; - border: 1px solid $grey-5; + border: 1px solid variables.$grey-5; min-height: 100%; display: block; &.ng-invalid { - border-color: rgba($primary, 0.3); + border-color: rgba(variables.$primary, 0.3); } } @@ -47,23 +47,23 @@ mat-chip { } .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { - background-color: $grey-6; - color: $accent; + background-color: variables.$grey-6; + color: variables.$accent; } .mat-chip.mat-standard-chip { - background-color: $white; - color: $accent; + background-color: variables.$white; + color: variables.$accent; margin: 0 0 2px 0; transition: background-color 0.2s; &:hover { - background-color: $grey-8; + background-color: variables.$grey-8; } } .mat-chip.mat-standard-chip::after { - background: $grey-8; + background: variables.$grey-8; } .mat-standard-chip:focus::after { diff --git a/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss b/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss index 3dcac2573..5e4fa5fc4 100644 --- a/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss @@ -1,17 +1,17 @@ -@import '../../../../../assets/styles/variables'; -@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; :host { display: block; min-width: 200px; max-width: 200px; - background-color: $grey-2; - border-right: 1px solid $separator; + background-color: variables.$grey-2; + border-right: 1px solid variables.$separator; box-sizing: border-box; padding: 8px; height: 100%; overflow: auto; - @include no-scroll-bar; + @include common-mixins.no-scroll-bar; .all-caps-label { padding: 16px; @@ -26,12 +26,12 @@ font-weight: 500; &:not(.active):hover { - background-color: rgba($primary, 0.2); + background-color: rgba(variables.$primary, 0.2); } &.active { - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; } } } diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss index b9f005054..321b18b7c 100644 --- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../assets/styles/variables'; +@use 'variables'; :host { height: fit-content; @@ -60,11 +60,11 @@ } &:hover:not(.active):not(.filter-disabled) { - background-color: $grey-6; + background-color: variables.$grey-6; } &.active { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); } } } diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss index c77ef3a1b..76c424883 100644 --- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss +++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss @@ -1,5 +1,3 @@ -@import '../../../../assets/styles/variables'; - section { position: fixed; top: 0; diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss index 9c09f803b..58d734dae 100644 --- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss +++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss @@ -1,8 +1,8 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .red-upload-download-overlay { - background: $white; + background: variables.$white; position: fixed; bottom: 20px; right: 20px; @@ -19,14 +19,14 @@ padding: 16px 14px 16px 16px; cursor: pointer; - color: $accent; + color: variables.$accent; font-size: 13px; font-weight: 600; line-height: 16px; mat-icon { height: 13px; - color: $accent; + color: variables.$accent; &.collapse-icon { height: 15px; @@ -34,28 +34,28 @@ } &.expanded { - border-bottom: 1px solid $separator; + border-bottom: 1px solid variables.$separator; } } .upload-download-list { overflow: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; max-height: 260px; > div:not(:first-child) { .dossier-name-wrapper { - border-top: 1px solid $separator; + border-top: 1px solid variables.$separator; } } .dossier-name-wrapper { display: flex; padding: 4px 16px; - background-color: $grey-2; + background-color: variables.$grey-2; > span { - @include line-clamp(1); + @include common-mixins.line-clamp(1); } } @@ -63,7 +63,7 @@ padding: 10px 16px 12px 16px; font-size: 11px; line-height: 14px; - border-top: 1px solid $separator; + border-top: 1px solid variables.$separator; position: relative; .upload-download-line { @@ -72,7 +72,7 @@ align-items: center; .upload-download-item-name { - @include line-clamp(1); + @include common-mixins.line-clamp(1); &.complete { text-decoration: underline; @@ -90,12 +90,12 @@ } &.error { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); padding-right: 100px; .error-message { margin-top: 2px; - color: $primary; + color: variables.$primary; } } @@ -113,13 +113,13 @@ } &:not(.error) { - background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%); + background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, variables.$grey-2 35%); padding-left: 60px; } } &:not(.error):hover { - background-color: $grey-2; + background-color: variables.$grey-2; .actions { display: flex; diff --git a/apps/red-ui/src/assets/styles/red-autocomplete.scss b/apps/red-ui/src/assets/styles/red-autocomplete.scss index 847b98a32..ac9e3a872 100644 --- a/apps/red-ui/src/assets/styles/red-autocomplete.scss +++ b/apps/red-ui/src/assets/styles/red-autocomplete.scss @@ -1,8 +1,7 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'common-mixins'; .mat-autocomplete-panel { - @include scroll-bar; + @include common-mixins.scroll-bar; .mat-option { font-size: inherit; diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss index 06ff34bf5..6e5ff85ab 100644 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss @@ -1,5 +1,5 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .breadcrumbs-container { display: flex; @@ -17,7 +17,7 @@ .breadcrumb { text-decoration: none; - color: $accent; + color: variables.$accent; font-weight: 600; width: fit-content; white-space: nowrap; @@ -33,10 +33,10 @@ } &:last-child { - @include line-clamp(1); + @include common-mixins.line-clamp(1); } &.active { - color: $primary; + color: variables.$primary; } } diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss index bd3220f78..effac2e87 100644 --- a/apps/red-ui/src/assets/styles/red-checkbox.scss +++ b/apps/red-ui/src/assets/styles/red-checkbox.scss @@ -1,7 +1,7 @@ -@import 'variables'; +@use 'variables'; .mat-checkbox .mat-checkbox-frame { - border: 1px solid $grey-5; + border: 1px solid variables.$grey-5; } .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, @@ -21,7 +21,7 @@ .mat-checkbox-label { font-size: 13px; - color: $accent; + color: variables.$accent; display: flex; align-items: center; @@ -33,5 +33,5 @@ } .mat-checkbox.error .mat-checkbox-label { - color: $primary; + color: variables.$primary; } diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 50f13ea60..b8f850889 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -1,5 +1,5 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .oval, .square { @@ -24,45 +24,45 @@ } &.gray-dark { - background-color: $grey-6; + background-color: variables.$grey-6; } &.gray-red { - background-color: $grey-6; - color: $primary; + background-color: variables.$grey-6; + color: variables.$primary; } &.lightgray-dark { - background-color: $grey-4; + background-color: variables.$grey-4; } &.lightgray-red { - background-color: $grey-4; - color: $primary; + background-color: variables.$grey-4; + color: variables.$primary; } &.darkgray-white { - background-color: $accent; - color: $white; + background-color: variables.$accent; + color: variables.$white; } &.lightgray-white { - background-color: $grey-5; - color: $white; + background-color: variables.$grey-5; + color: variables.$white; } &.red-white { - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; } &.white-dark { - border: 1px solid $grey-4; + border: 1px solid variables.$grey-4; } &.inactive { - background-color: $grey-6; - color: $grey-7; + background-color: variables.$grey-6; + color: variables.$grey-7; } } @@ -93,8 +93,8 @@ .pill { padding: 2px 5px; border-radius: 9px; - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; font-size: 10px; font-weight: 600; line-height: 12px; @@ -104,61 +104,61 @@ } .UNASSIGNED { - stroke: $grey-5; - background-color: $grey-5; + stroke: variables.$grey-5; + background-color: variables.$grey-5; } .UNPROCESSED { - stroke: $grey-3; - background-color: $grey-3; + stroke: variables.$grey-3; + background-color: variables.$grey-3; } .UNDER_REVIEW, .REGULAR { - stroke: $yellow-1; - background-color: $yellow-1; + stroke: variables.$yellow-1; + background-color: variables.$yellow-1; } .UNDER_APPROVAL { - stroke: $blue-4; - background-color: $blue-4; + stroke: variables.$blue-4; + background-color: variables.$blue-4; } .APPROVED, .ADMIN { - stroke: $blue-3; - background-color: $blue-3; + stroke: variables.$blue-3; + background-color: variables.$blue-3; } .PROCESSING { - stroke: $accent; - background-color: $accent; + stroke: variables.$accent; + background-color: variables.$accent; } .OCR_PROCESSING, .USER_ADMIN { - stroke: $green-2; - background-color: $green-2; + stroke: variables.$green-2; + background-color: variables.$green-2; } .REPROCESS { - stroke: $accent; - background-color: $accent; + stroke: variables.$accent; + background-color: variables.$accent; } .FULLREPROCESS { - stroke: $accent; - background-color: $accent; + stroke: variables.$accent; + background-color: variables.$accent; } .EXCLUDED { - stroke: $pink-1; - background-color: $pink-1; + stroke: variables.$pink-1; + background-color: variables.$pink-1; } .ERROR { - stroke: lighten($primary, 25%); - background-color: lighten($primary, 25%); + stroke: lighten(variables.$primary, 25%); + background-color: lighten(variables.$primary, 25%); } .ACTIVE { @@ -172,18 +172,18 @@ } .INACTIVE { - stroke: $grey-5; - background-color: $grey-5; + stroke: variables.$grey-5; + background-color: variables.$grey-5; } .MANAGER, .MANAGER_ADMIN { - stroke: $primary; - background-color: $primary; + stroke: variables.$primary; + background-color: variables.$primary; } .overlay-shadow { - @include inset-shadow; + @include common-mixins.inset-shadow; position: fixed; width: 100%; height: 4px; diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss index bd9fcc563..a25881cc2 100644 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ b/apps/red-ui/src/assets/styles/red-controls.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@use 'variables'; .btn-group { display: flex; @@ -6,8 +6,8 @@ .btn-group-btn { cursor: pointer; - color: $accent; - background: $white; + color: variables.$accent; + background: variables.$white; font-family: Inter, sans-serif; font-size: 13px; line-height: 14px; @@ -17,17 +17,17 @@ border: none; &:hover { - color: $black; + color: variables.$black; } &.active { - color: $light; - background: $primary; + color: variables.$light; + background: variables.$primary; border-radius: 17px; } &.active:hover { - color: $grey-3; + color: variables.$grey-3; } } } diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss index ac37e71e5..ed2c1dc9e 100644 --- a/apps/red-ui/src/assets/styles/red-editor.scss +++ b/apps/red-ui/src/assets/styles/red-editor.scss @@ -1,17 +1,17 @@ -@import 'variables'; +@use 'variables'; .changed-row-marker { - background: rgba($primary, 0.1); + background: rgba(variables.$primary, 0.1); z-index: 20; } .too-short-marker { - background: rgba($primary, 0.5); + background: rgba(variables.$primary, 0.5); z-index: 30; } .search-marker { - background: rgba($blue-5, 0.3); + background: rgba(variables.$blue-5, 0.3); z-index: 40; } @@ -29,7 +29,7 @@ right: 40px; border-radius: 8px; padding: 16px 32px 16px 16px; - background-color: $white; + background-color: variables.$white; box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); z-index: 5000; diff --git a/apps/red-ui/src/assets/styles/red-help-mode.scss b/apps/red-ui/src/assets/styles/red-help-mode.scss index d59bd1452..35a068059 100644 --- a/apps/red-ui/src/assets/styles/red-help-mode.scss +++ b/apps/red-ui/src/assets/styles/red-help-mode.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@use 'variables'; .help-mode-on-mouse-over { z-index: 100; @@ -15,7 +15,7 @@ .help-highlight, .help-mode-on-mouse-over:hover { background: rgba(92, 229, 148, 0.5); - box-shadow: 0 0 0 2px $green-2 inset; + box-shadow: 0 0 0 2px variables.$green-2 inset; cursor: help; } diff --git a/apps/red-ui/src/assets/styles/red-list.scss b/apps/red-ui/src/assets/styles/red-list.scss index 506c9a718..a628aa996 100644 --- a/apps/red-ui/src/assets/styles/red-list.scss +++ b/apps/red-ui/src/assets/styles/red-list.scss @@ -1,7 +1,7 @@ -@import 'variables'; +@use 'variables'; .mat-list-item { - color: $accent !important; + color: variables.$accent !important; font-size: 13px !important; line-height: 16px !important; } diff --git a/apps/red-ui/src/assets/styles/red-material-theme.scss b/apps/red-ui/src/assets/styles/red-material-theme.scss index 52308f0a6..3a7ad72c3 100644 --- a/apps/red-ui/src/assets/styles/red-material-theme.scss +++ b/apps/red-ui/src/assets/styles/red-material-theme.scss @@ -1,41 +1,41 @@ @use '~@angular/material' as mat; -@import 'variables'; +@use 'variables'; @include mat.core(); $primary-palette: ( - default: $primary, - lighter: lighten($primary, 30%), - darker: darken($primary, 30%), - text: $primary, + default: variables.$primary, + lighter: lighten(variables.$primary, 30%), + darker: darken(variables.$primary, 30%), + text: variables.$primary, contrast: ( - default: $light, - lighter: $light, - darker: $light + default: variables.$light, + lighter: variables.$light, + darker: variables.$light ) ); $secondary-palette: ( - default: $accent, - lighter: lighten($accent, 30%), - darker: darken($accent, 30%), - text: $accent, + default: variables.$accent, + lighter: lighten(variables.$accent, 30%), + darker: darken(variables.$accent, 30%), + text: variables.$accent, contrast: ( - default: $light, - lighter: $light, - darker: $light + default: variables.$light, + lighter: variables.$light, + darker: variables.$light ) ); $red-palette: ( - default: $primary, - lighter: lighten($primary, 30%), - darker: darken($primary, 30%), - text: $primary, + default: variables.$primary, + lighter: lighten(variables.$primary, 30%), + darker: darken(variables.$primary, 30%), + text: variables.$primary, contrast: ( - default: $light, - lighter: $light, - darker: $light + default: variables.$light, + lighter: variables.$light, + darker: variables.$light ) ); diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss index dc3120dfb..9ceace30e 100644 --- a/apps/red-ui/src/assets/styles/red-menu.scss +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -1,5 +1,5 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .mat-menu-panel { border-radius: 8px !important; @@ -7,7 +7,7 @@ max-width: none !important; min-width: 180px !important; margin-top: 10px; - @include scroll-bar; + @include common-mixins.scroll-bar; .mat-menu-content:not(:empty) { padding-top: 8px; @@ -24,7 +24,7 @@ .mat-menu-item { font-size: 13px; - color: $accent; + color: variables.$accent; padding: 0 8px; margin: 0 8px 2px 8px; border-radius: 4px; @@ -57,7 +57,7 @@ } &:hover { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); } } } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 286468764..0a485feeb 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -1,5 +1,5 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; html, body { @@ -7,7 +7,7 @@ body { padding: 0; height: 100vh; font-family: 'Inter', sans-serif; - color: $accent; + color: variables.$accent; font-size: 13px; line-height: 16px; } @@ -33,8 +33,8 @@ section.settings { height: 50px; width: 100vw; box-sizing: border-box; - background-color: $white; - border-bottom: 1px solid $separator; + background-color: variables.$white; + border-bottom: 1px solid variables.$separator; .filters { display: flex; @@ -58,7 +58,7 @@ section.settings { .reset-filters { margin-left: 12px; - color: $primary; + color: variables.$primary; cursor: pointer; } } @@ -108,7 +108,7 @@ section.settings { border-radius: 8px; margin-top: 40px; margin-bottom: 70px; - background-color: $white; + background-color: variables.$white; max-width: 650px; height: fit-content; box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); @@ -145,15 +145,15 @@ section.settings { } .right-container { - border-left: 1px solid $grey-4; + border-left: 1px solid variables.$grey-4; box-sizing: border-box; - background: $white; + background: variables.$white; overflow: hidden; transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; &:hover { overflow-y: auto; - @include scroll-bar; + @include common-mixins.scroll-bar; } .collapsed-wrapper { @@ -334,7 +334,7 @@ section.settings { .divider { height: 1px; opacity: 0.15; - background-color: $accent; + background-color: variables.$accent; } } diff --git a/apps/red-ui/src/assets/styles/red-progress-bar.scss b/apps/red-ui/src/assets/styles/red-progress-bar.scss index 22eadd163..ebc09d45e 100644 --- a/apps/red-ui/src/assets/styles/red-progress-bar.scss +++ b/apps/red-ui/src/assets/styles/red-progress-bar.scss @@ -1,16 +1,16 @@ -@import 'variables'; +@use 'variables'; .mat-progress-bar { height: 6px; border-radius: 3px; .mat-progress-bar-buffer { - background-color: $grey-4; + background-color: variables.$grey-4; } &.green { .mat-progress-bar-fill::after { - background-color: $green-2; + background-color: variables.$green-2; } } } diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss index c8ac24b20..794f5ed6e 100644 --- a/apps/red-ui/src/assets/styles/red-select.scss +++ b/apps/red-ui/src/assets/styles/red-select.scss @@ -1,18 +1,18 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; +@use 'common-mixins'; .mat-select-panel { - @include scroll-bar; + @include common-mixins.scroll-bar; .mat-option { &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) { - background-color: $grey-6; + background-color: variables.$grey-6; } &.mat-selected:not(.mat-option-multiple) { - background-color: rgba($primary, 0.2); - color: $accent; + background-color: rgba(variables.$primary, 0.2); + color: variables.$accent; } } } diff --git a/apps/red-ui/src/assets/styles/red-slider.scss b/apps/red-ui/src/assets/styles/red-slider.scss index 4e2e4e181..7bb1b099a 100644 --- a/apps/red-ui/src/assets/styles/red-slider.scss +++ b/apps/red-ui/src/assets/styles/red-slider.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@use 'variables'; .mat-slider-horizontal { width: 140px; @@ -17,14 +17,14 @@ // For disabled state .mat-slider-track-fill { - background-color: $primary; + background-color: variables.$primary; } .mat-slider-track-background { height: 4px !important; margin-top: 1px; border-radius: 3px; - background-color: $grey-4 !important; + background-color: variables.$grey-4 !important; } .mat-slider-focus-ring { @@ -36,7 +36,7 @@ width: 16px !important; height: 16px !important; border-width: 0 !important; - background-color: $primary !important; + background-color: variables.$primary !important; } .mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb { diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index de51eaf8d..d6165357b 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -1,5 +1,4 @@ -@import 'variables'; -@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; +@use 'variables'; .default-table { border-collapse: collapse; @@ -8,7 +7,7 @@ td { padding: 8px; text-align: left; - border: 1px solid $separator; + border: 1px solid variables.$separator; } } diff --git a/apps/red-ui/src/assets/styles/red-tabs.scss b/apps/red-ui/src/assets/styles/red-tabs.scss index d6353c88f..d7f6675a9 100644 --- a/apps/red-ui/src/assets/styles/red-tabs.scss +++ b/apps/red-ui/src/assets/styles/red-tabs.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@use 'variables'; .red-tab { &:not(:last-child) { @@ -13,17 +13,17 @@ cursor: pointer; &:not(.disabled):not(.active):hover { - background-color: $grey-6; + background-color: variables.$grey-6; } &.active { - background-color: rgba($primary, 0.1); + background-color: rgba(variables.$primary, 0.1); font-weight: 600; - color: $primary; + color: variables.$primary; } &.disabled { - color: rgba($accent, 0.3); + color: rgba(variables.$accent, 0.3); cursor: not-allowed; } } diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 570d2c455..7f20d3abf 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -1,24 +1,24 @@ -@import 'red-fonts'; -@import '~ngx-toastr/toastr'; -@import 'red-material-theme'; -@import 'red-page-layout'; -@import 'red-select'; -@import 'red-autocomplete'; -@import 'red-list'; -@import 'red-checkbox'; -@import 'red-toggle'; -@import 'red-toggle-button'; -@import 'red-menu'; -@import 'red-media-queries'; -@import 'red-tables'; -@import 'red-components'; -@import 'red-controls'; -@import 'red-toasts'; -@import 'red-tooltips'; -@import 'red-breadcrumbs'; -@import 'red-editor'; -@import 'red-slider'; -@import 'red-loading'; -@import 'red-progress-bar'; -@import 'red-tabs'; -@import 'red-help-mode'; +@use 'red-fonts'; +@use '~ngx-toastr/toastr'; +@use 'red-material-theme'; +@use 'red-page-layout'; +@use 'red-select'; +@use 'red-autocomplete'; +@use 'red-list'; +@use 'red-checkbox'; +@use 'red-toggle'; +@use 'red-toggle-button'; +@use 'red-menu'; +@use 'red-media-queries'; +@use 'red-tables'; +@use 'red-components'; +@use 'red-controls'; +@use 'red-toasts'; +@use 'red-tooltips'; +@use 'red-breadcrumbs'; +@use 'red-editor'; +@use 'red-slider'; +@use 'red-loading'; +@use 'red-progress-bar'; +@use 'red-tabs'; +@use 'red-help-mode'; diff --git a/apps/red-ui/src/assets/styles/red-toasts.scss b/apps/red-ui/src/assets/styles/red-toasts.scss index bd230786c..4e7520593 100644 --- a/apps/red-ui/src/assets/styles/red-toasts.scss +++ b/apps/red-ui/src/assets/styles/red-toasts.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@use 'variables'; $toast-width: 400px; @@ -36,7 +36,7 @@ $toast-width: 400px; font-size: 11px; font-weight: 600; line-height: 14px; - color: $accent; + color: variables.$accent; text-transform: uppercase; cursor: pointer; } @@ -70,37 +70,37 @@ $toast-width: 400px; .toast-warning, .toast-success { .toast-message { - color: $accent; + color: variables.$accent; } .toast-close-button { - color: $accent; + color: variables.$accent; } } .toast-error, .toast-info { .toast-close-button:hover { - color: $white; + color: variables.$white; } } .toast-success { - background-color: $green-2; + background-color: variables.$green-2; } .toast-error { - background-color: $primary; - color: $white; + background-color: variables.$primary; + color: variables.$white; } .toast-warning { - background-color: $yellow-2; - color: $accent; + background-color: variables.$yellow-2; + color: variables.$accent; } .toast-info { - background-color: $accent; + background-color: variables.$accent; } .inline-dialog-toast { diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss index 23758c898..808f4f61c 100644 --- a/apps/red-ui/src/assets/styles/red-toggle-button.scss +++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss @@ -1,4 +1,4 @@ -@import 'variables'; +@use 'variables'; .mat-button-toggle-standalone, .mat-button-toggle-group { @@ -8,8 +8,8 @@ .mat-button-toggle:not(.mat-button-toggle-checked) { .mat-button-toggle-button { - background: $grey-6; - color: $grey-7; + background: variables.$grey-6; + color: variables.$grey-7; } } } diff --git a/apps/red-ui/src/assets/styles/red-toggle.scss b/apps/red-ui/src/assets/styles/red-toggle.scss index d82c96f82..270388615 100644 --- a/apps/red-ui/src/assets/styles/red-toggle.scss +++ b/apps/red-ui/src/assets/styles/red-toggle.scss @@ -1,11 +1,11 @@ -@import 'variables'; +@use 'variables'; .mat-slide-toggle { .mat-slide-toggle-bar { height: 16px !important; width: 30px !important; border-radius: 16px !important; - background-color: $grey-4; + background-color: variables.$grey-4; } .mat-slide-toggle-thumb-container { @@ -19,7 +19,7 @@ height: 12px !important; width: 12px !important; box-shadow: none; - background-color: $grey-2; + background-color: variables.$grey-2; } .mat-ripple { @@ -28,11 +28,11 @@ &.mat-primary.mat-checked { .mat-slide-toggle-bar { - background-color: $primary; + background-color: variables.$primary; } .mat-slide-toggle-thumb { - background-color: $white; + background-color: variables.$white; } .mat-slide-toggle-thumb-container { diff --git a/apps/red-ui/src/assets/styles/red-tooltips.scss b/apps/red-ui/src/assets/styles/red-tooltips.scss index 3e4f60d72..84a8655ef 100644 --- a/apps/red-ui/src/assets/styles/red-tooltips.scss +++ b/apps/red-ui/src/assets/styles/red-tooltips.scss @@ -1,13 +1,13 @@ -@import 'variables'; +@use 'variables'; .mat-tooltip { - background-color: $accent; + background-color: variables.$accent; border-radius: 3px !important; padding: 10px; margin: 12px !important; font-size: 11px; line-height: 14px; - color: $white !important; + color: variables.$white !important; position: relative; overflow: visible !important; text-align: center; @@ -30,8 +30,8 @@ } &.warn { - background-color: $yellow-2; - color: $accent !important; + background-color: variables.$yellow-2; + color: variables.$accent !important; //&:after { // border-top: solid 6px $yellow-2; diff --git a/paligo-styles/footer.scss b/paligo-styles/footer.scss index 47cbce181..4aca2aea8 100644 --- a/paligo-styles/footer.scss +++ b/paligo-styles/footer.scss @@ -1,9 +1,9 @@ -@import '../apps/red-ui/src/assets/styles/variables'; -@import 'mixin'; +@use '../apps/red-ui/src/assets/styles/variables'; +@use 'mixin'; .portal-footer, .site-footer { - border-top: 1px solid $grey-4; + border-top: 1px solid variables.$grey-4; padding: 0; &.portal-footer { @@ -13,7 +13,7 @@ .inner { margin: 0; padding: 8px 0 64px 0; - @include paragraph; + @include mixin.paragraph; > * { padding: 0; diff --git a/paligo-styles/header.scss b/paligo-styles/header.scss index 4e78cb71e..1ffb88c4a 100644 --- a/paligo-styles/header.scss +++ b/paligo-styles/header.scss @@ -1,16 +1,16 @@ -@import '../apps/red-ui/src/assets/styles/variables'; -@import 'mixin'; +@use '../apps/red-ui/src/assets/styles/variables'; +@use 'mixin'; .portal-header { z-index: 1; height: 450px; &::before { - background-color: $grey-1; + background-color: variables.$grey-1; } h1 { - @include heading-1; + @include mixin.heading-1; margin-top: 68px; margin-bottom: 40px; } @@ -20,7 +20,7 @@ margin: auto; position: relative; - @include search-input; + @include mixin.search-input; .search-field { padding: 12px 17px; @@ -31,12 +31,12 @@ right: 0; padding: 11px 18px; background-color: transparent; - color: $accent; + color: variables.$accent; cursor: pointer; border-radius: 0 8px 8px 0; &:hover { - background-color: $primary; + background-color: variables.$primary; } } } @@ -44,6 +44,6 @@ @media only screen and (max-width: 768px) { .portal-header h1 { - @include heading-2; + @include mixin.heading-2; } } diff --git a/paligo-styles/homepage.scss b/paligo-styles/homepage.scss index f138e9304..e12a7a116 100644 --- a/paligo-styles/homepage.scss +++ b/paligo-styles/homepage.scss @@ -1,5 +1,5 @@ -@import '../apps/red-ui/src/assets/styles/variables'; -@import 'mixin'; +@use '../apps/red-ui/src/assets/styles/variables'; +@use 'mixin'; .featured-content-label { display: none; @@ -11,7 +11,7 @@ .portal-single-publication { .publication-icon { - background-color: $red-1; + background-color: variables.$red-1; } } @@ -32,7 +32,7 @@ } .publication-contents { - @include card; + @include mixin.card; } @media only screen and (max-width: 768px) { diff --git a/paligo-styles/manual-sidebar.scss b/paligo-styles/manual-sidebar.scss index 753614a84..43c35504b 100644 --- a/paligo-styles/manual-sidebar.scss +++ b/paligo-styles/manual-sidebar.scss @@ -1,21 +1,21 @@ -@import '../apps/red-ui/src/assets/styles/variables'; -@import '../libs/common-ui/src/assets/styles/common-mixins'; -@import 'mixin'; +@use '../apps/red-ui/src/assets/styles/variables'; +@use '../libs/common-ui/src/assets/styles/common-mixins'; +@use 'mixin'; .site-sidebar { - background-color: $accent; + background-color: variables.$accent; .logo { padding: 24px 0 30px 0 !important; } - @include scroll-bar; + @include common-mixins.scroll-bar; } .site-sidebar-search { padding: 0 24px; - @include search-input; + @include mixin.search-input; .search-field { padding: 7px 13px; @@ -33,16 +33,16 @@ color: #d3d5da; &:hover { - background-color: $grey-10; + background-color: variables.$grey-10; } } .active > .topic-link { - background-color: $grey-10; + background-color: variables.$grey-10; } .active > a { - color: $white; + color: variables.$white; font-weight: 600; } diff --git a/paligo-styles/manual.scss b/paligo-styles/manual.scss index 5ee858b4c..c858ca484 100644 --- a/paligo-styles/manual.scss +++ b/paligo-styles/manual.scss @@ -1,5 +1,5 @@ -@import '../apps/red-ui/src/assets/styles/variables'; -@import 'manual-sidebar'; +@use '../apps/red-ui/src/assets/styles/variables'; +@use 'mixin'; .toolbar { box-shadow: none; @@ -19,16 +19,16 @@ font-weight: 600; a { - color: $accent; + color: variables.$accent; &:hover { - color: $primary; + color: variables.$primary; text-decoration: underline; } } .breadcrumb-node { - color: $primary; + color: variables.$primary; } } } @@ -41,7 +41,7 @@ main article { #topic-content > section > .titlepage h2.title { margin: 0 0 24px; - @include heading-3; + @include mixin.heading-3; } .image-viewport { @@ -61,7 +61,7 @@ main article { .pager li > a, .pager li > span { - @include button; + @include mixin.button; } .warning, @@ -72,11 +72,11 @@ main article { margin-top: 32px; margin-bottom: 32px; padding: 16px 24px 16px 68px; - background-color: $white; - border-left: 4px solid $primary; + background-color: variables.$white; + border-left: 4px solid variables.$primary; &:before { - color: $primary; + color: variables.$primary; width: 20px; height: 20px; text-align: center; @@ -86,7 +86,7 @@ main article { h3 { padding: 0; - @include heading-5; + @include mixin.heading-5; margin-bottom: 8px; } @@ -125,7 +125,7 @@ main ul { } .section-toc { - @include card; + @include mixin.card; li:first-child { margin-top: 16px; diff --git a/paligo-styles/mixin.scss b/paligo-styles/mixin.scss index d39b54307..66f17891b 100644 --- a/paligo-styles/mixin.scss +++ b/paligo-styles/mixin.scss @@ -1,11 +1,11 @@ -@import '../apps/red-ui/src/assets/styles/variables'; +@use '../apps/red-ui/src/assets/styles/variables'; @mixin search-input { .search-field { width: 100%; - border: 1px solid $grey-5; + border: 1px solid variables.$grey-5; border-radius: 8px; - background-color: $white; + background-color: variables.$white; } .search-field::placeholder { @@ -14,7 +14,7 @@ .search-field, .search-field::placeholder { - color: $accent; + color: variables.$accent; font-size: 14px; line-height: 18px; } @@ -61,7 +61,7 @@ } @mixin button { - color: $primary; + color: variables.$primary; font-size: 14px; font-weight: 600; line-height: 19px; @@ -74,16 +74,16 @@ &:hover { text-decoration: underline; background-color: transparent; - color: $primary; + color: variables.$primary; } } @mixin card { padding: 24px 40px; - border: 1px solid $grey-4; + border: 1px solid variables.$grey-4; width: 100%; margin: 0; - background-color: $white; + background-color: variables.$white; border-radius: 4px; &:first-child { @@ -96,10 +96,10 @@ margin: 0; a { - color: $accent; + color: variables.$accent; &:hover { - color: $accent; + color: variables.$accent; text-decoration: underline; } } @@ -122,11 +122,11 @@ } a { - color: $primary; + color: variables.$primary; @include paragraph; &:hover { - color: $primary; + color: variables.$primary; text-decoration: underline; } } diff --git a/paligo-styles/search.scss b/paligo-styles/search.scss index d872af42a..13d1f21e5 100644 --- a/paligo-styles/search.scss +++ b/paligo-styles/search.scss @@ -1,15 +1,15 @@ -@import '../apps/red-ui/src/assets/styles/variables'; -@import 'mixin'; +@use '../apps/red-ui/src/assets/styles/variables'; +@use 'mixin'; .portal-search-result { - background-color: $grey-9; + background-color: variables.$grey-9; } .search-container { padding-bottom: 100px; h2 { - @include heading-2; + @include mixin.heading-2; } } @@ -19,8 +19,8 @@ } ul.searchresults { - border: 1px solid $grey-4; - background-color: $white; + border: 1px solid variables.$grey-4; + background-color: variables.$white; border-radius: 4px; margin-top: 32px; @@ -31,7 +31,7 @@ ul.searchresults { li.searchresultitem { margin: 0 32px; - border-bottom: 1px solid $grey-4; + border-bottom: 1px solid variables.$grey-4; padding: 32px 8px; } @@ -41,15 +41,15 @@ li.searchresultitem { } .searchresulttitle { - @include heading-4; - color: $accent; + @include mixin.heading-4; + color: variables.$accent; } .searchresultsnippet { margin: 16px 0; - color: $accent; + color: variables.$accent; } .search-result-breadcrumbs { - color: $primary; + color: variables.$primary; } diff --git a/paligo-styles/style.scss b/paligo-styles/style.scss index 47caa0fa1..250f883dd 100644 --- a/paligo-styles/style.scss +++ b/paligo-styles/style.scss @@ -1,16 +1,16 @@ -@import 'apps/red-ui/src/assets/styles/variables'; -@import '../libs/common-ui/src/assets/styles/common-mixins'; -@import 'fonts'; -@import 'header'; -@import 'homepage'; -@import 'search'; -@import 'footer'; -@import 'manual'; -@import 'mixin'; +@use 'apps/red-ui/src/assets/styles/variables'; +@use '../libs/common-ui/src/assets/styles/common-mixins'; +@use 'fonts'; +@use 'header'; +@use 'homepage'; +@use 'search'; +@use 'footer'; +@use 'manual'; +@use 'mixin'; body { - color: $accent; - background-color: $grey-9; + color: variables.$accent; + background-color: variables.$grey-9; font-family: 'Inter', sans-serif; h1, @@ -25,22 +25,22 @@ body { font-family: 'Inter', sans-serif; } - @include scroll-bar; + @include common-mixins.scroll-bar; h3 { - @include heading-3; + @include mixin.heading-3; } p { - @include paragraph; + @include mixin.paragraph; } a { - color: $primary; + color: variables.$primary; &:hover { text-decoration: underline; - color: $primary; + color: variables.$primary; } } }