Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

improve imports and variables usage

Browse Source
This commit is contained in:
Dan Percic 2021-09-21 12:44:54 +03:00
parent f02eb92f16
commit 5b977a1ccf
77 changed files with 461 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/components/base-screen/base-screen.component.scss
View File

@ -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;

4
apps/red-ui/src/app/components/logo/logo.component.scss
View File

@ -1,7 +1,7 @@
@import '../../../assets/styles/variables';
@use 'variables';
:host {
color: $primary;
color: variables.$primary;
}
mat-icon {

14
apps/red-ui/src/app/components/notifications/notifications.component.scss
View File

@ -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;
}
}
}

8
apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
View File

@ -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 {

1
apps/red-ui/src/app/components/toast/toast.component.scss
View File

@ -1 +0,0 @@
@import '../../../assets/styles/variables';

8
apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss
View File

@ -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;
}

2
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../assets/styles/variables';
.first-row {
display: flex;

4
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.scss
View File

@ -1,7 +1,7 @@
@import '../../../../../assets/styles/variables';
@use 'variables';
.dialog-header {
color: $primary;
color: variables.$primary;
}
.heading {

4
apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.scss
View File

@ -1,7 +1,7 @@
@import '../../../../../assets/styles/variables';
@use 'variables';
.dialog-header {
color: $primary;
color: variables.$primary;
}
.heading {

6
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
View File

@ -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;

42
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -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;

4
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
View File

@ -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 {

10
apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss
View File

@ -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;

10
apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
View File

@ -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;
}
}

18
apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.scss
View File

@ -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 {

14
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
View File

@ -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 {

4
apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
View File

@ -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) {

2
apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../assets/styles/variables';
:host {
display: flex;
flex-direction: column;

8
apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
View File

@ -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;
}
}

10
apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
View File

@ -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;
}
}
}

6
apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
View File

@ -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) {

2
apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../assets/styles/variables';
:host {
flex: 1;
display: flex;

34
apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
View File

@ -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 {

2
apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../assets/styles/variables';
.needs-work {
display: flex;
flex-direction: row;

14
apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
View File

@ -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 {

14
apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.scss
View File

@ -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%;

14
apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.scss
View File

@ -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;
}
}
}

7
apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.scss
View File

@ -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;

8
apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss
View File

@ -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;
}

2
apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../assets/styles/variables';
.watermark {
margin-top: 24px;
}

6
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
View File

@ -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;
}

8
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
View File

@ -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);
}
}

2
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../../assets/styles/variables';
.download-includes {
margin: 16px 0 10px;
font-weight: 500;

8
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
View File

@ -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;

2
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../../../assets/styles/variables';
.watermark {
margin-top: 24px;
}

8
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
View File

@ -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;

6
apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.scss
View File

@ -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;

5
apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
View File

@ -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;

8
apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.scss
View File

@ -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;
}

4
apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss
View File

@ -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);
}
}

8
apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
View File

@ -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;
}
}

4
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.scss
View File

@ -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;
}

4
apps/red-ui/src/app/modules/shared/components/pagination/pagination.component.scss
View File

@ -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;
}
}

18
apps/red-ui/src/app/modules/shared/components/select/select.component.scss
View File

@ -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 {

16
apps/red-ui/src/app/modules/shared/components/side-nav/side-nav.component.scss
View File

@ -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;
}
}
}

6
apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.scss
View File

@ -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);
}
}
}

2
apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.scss
View File

@ -1,5 +1,3 @@
@import '../../../../assets/styles/variables';
section {
position: fixed;
top: 0;

32
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
View File

@ -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;

5
apps/red-ui/src/assets/styles/red-autocomplete.scss
View File

@ -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;

10
apps/red-ui/src/assets/styles/red-breadcrumbs.scss
View File

@ -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;
}
}

8
apps/red-ui/src/assets/styles/red-checkbox.scss
View File

@ -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;
}

92
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -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;

14
apps/red-ui/src/assets/styles/red-controls.scss
View File

@ -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;
}
}
}

10
apps/red-ui/src/assets/styles/red-editor.scss
View File

@ -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;

4
apps/red-ui/src/assets/styles/red-help-mode.scss
View File

@ -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;
}

4
apps/red-ui/src/assets/styles/red-list.scss
View File

@ -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;
}

44
apps/red-ui/src/assets/styles/red-material-theme.scss
View File

@ -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
)
);

10
apps/red-ui/src/assets/styles/red-menu.scss
View File

@ -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);
}
}
}

22
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -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;
}
}

6
apps/red-ui/src/assets/styles/red-progress-bar.scss
View File

@ -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;
}
}
}

12
apps/red-ui/src/assets/styles/red-select.scss
View File

@ -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;
}
}
}

8
apps/red-ui/src/assets/styles/red-slider.scss
View File

@ -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 {

5
apps/red-ui/src/assets/styles/red-tables.scss
View File

@ -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;
}
}

10
apps/red-ui/src/assets/styles/red-tabs.scss
View File

@ -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;
}
}

48
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -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';

22
apps/red-ui/src/assets/styles/red-toasts.scss
View File

@ -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 {

6
apps/red-ui/src/assets/styles/red-toggle-button.scss
View File

@ -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;
}
}
}

10
apps/red-ui/src/assets/styles/red-toggle.scss
View File

@ -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 {

10
apps/red-ui/src/assets/styles/red-tooltips.scss
View File

@ -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;

8
paligo-styles/footer.scss
View File

@ -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;

16
paligo-styles/header.scss
View File

@ -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;
}
}

8
paligo-styles/homepage.scss
View File

@ -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) {

18
paligo-styles/manual-sidebar.scss
View File

@ -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;
}

24
paligo-styles/manual.scss
View File

@ -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;

24
paligo-styles/mixin.scss
View File

@ -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;
}
}

22
paligo-styles/search.scss
View File

@ -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;
}

32
paligo-styles/style.scss
View File

@ -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;
}
}
}