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 { .dev-mode {
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
font-size: 22px; font-size: 22px;
line-height: 16px; line-height: 16px;
text-align: center; 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 { :host {
color: $primary; color: variables.$primary;
} }
mat-icon { 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 { .mt-2 {
margin-top: 2px; margin-top: 2px;
@ -35,7 +35,7 @@
white-space: normal; white-space: normal;
a { a {
color: $accent; color: variables.$accent;
font-weight: bold; font-weight: bold;
} }
} }
@ -45,17 +45,17 @@
height: 8px; height: 8px;
width: 8px; width: 8px;
border-radius: 50%; border-radius: 50%;
background-color: $grey-4; background-color: variables.$grey-4;
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
} }
&:hover { &:hover {
background-color: $grey-6; background-color: variables.$grey-6;
.dot { .dot {
background-color: $grey-5; background-color: variables.$grey-5;
} }
a { a {
@ -64,10 +64,10 @@
} }
&.unread { &.unread {
background-color: rgba($primary, 0.1); background-color: rgba(variables.$primary, 0.1);
.dot { .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 { .spotlight-row {
width: 300px; width: 300px;
@ -9,13 +9,13 @@
font-size: 13px; font-size: 13px;
border: none; border: none;
outline: none; outline: none;
color: $accent; color: variables.$accent;
background-color: $white; background-color: variables.$white;
} }
.highlight { .highlight {
border-radius: 4px; border-radius: 4px;
background-color: $grey-2; background-color: variables.$grey-2;
} }
.wrapper { .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'; @use 'variables';
@import '../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.content-container { .content-container {
background-color: $grey-2; background-color: variables.$grey-2;
justify-content: center; justify-content: center;
@include scroll-bar; @include common-mixins.scroll-bar;
overflow: auto; 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 { .first-row {
display: flex; 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 { .dialog-header {
color: $primary; color: variables.$primary;
} }
.heading { .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 { .dialog-header {
color: $primary; color: variables.$primary;
} }
.heading { .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 { :host ::ng-deep iqser-table {
iqser-table-header { iqser-table-header {
@ -8,7 +8,7 @@
.header-item { .header-item {
box-shadow: none; box-shadow: none;
border-top: 1px solid $separator; border-top: 1px solid variables.$separator;
.all-caps-label { .all-caps-label {
margin-right: 10px; margin-right: 10px;
@ -20,7 +20,7 @@
.separator { .separator {
margin-left: 14px; margin-left: 14px;
background-color: $separator; background-color: variables.$separator;
width: 1px; width: 1px;
height: 30px; height: 30px;
margin-right: 16px; 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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.sub-header { .sub-header {
display: flex; display: flex;
@ -13,7 +13,7 @@
padding-left: 32px; padding-left: 32px;
min-width: 376px; min-width: 376px;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid $separator; border-right: 1px solid variables.$separator;
.info { .info {
margin-bottom: 8px; margin-bottom: 8px;
@ -55,9 +55,9 @@
.csv-part-header { .csv-part-header {
height: 50px; height: 50px;
box-sizing: border-box; box-sizing: border-box;
background: $white; background: variables.$white;
border-top: 1px solid $separator; border-top: 1px solid variables.$separator;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -83,14 +83,14 @@
} }
.search-input-container { .search-input-container {
background-color: $white; background-color: variables.$white;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
padding: 8px 16px; padding: 8px 16px;
} }
.csv-part-content { .csv-part-content {
overflow: auto; overflow: auto;
@include no-scroll-bar; @include common-mixins.no-scroll-bar;
height: calc(100% - 49px); height: calc(100% - 49px);
font-size: 12px; font-size: 12px;
@ -101,13 +101,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
color: $grey-7; color: variables.$grey-7;
line-height: 15px; line-height: 15px;
font-weight: 500; font-weight: 500;
} }
> *:not(.no-column-data) { > *:not(.no-column-data) {
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
display: flex; display: flex;
padding: 7px 16px; padding: 7px 16px;
align-items: center; align-items: center;
@ -117,14 +117,14 @@
> .left { > .left {
width: 375px; width: 375px;
min-width: 375px; min-width: 375px;
background: $grey-2; background: variables.$grey-2;
.csv-header-pill-content { .csv-header-pill-content {
overflow: auto; overflow: auto;
padding: 7px 0; padding: 7px 0;
background: $grey-2; background: variables.$grey-2;
height: calc(100% - 64px); height: calc(100% - 64px);
@include no-scroll-bar; @include common-mixins.no-scroll-bar;
&.search-open { &.search-open {
height: calc(100% - 58px - 51px); height: calc(100% - 58px - 51px);
@ -137,7 +137,7 @@
min-height: 32px; min-height: 32px;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
background: $white; background: variables.$white;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -153,26 +153,26 @@
} }
.sample { .sample {
@include line-clamp(1); @include common-mixins.line-clamp(1);
} }
} }
&.selected { &.selected {
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
} }
} }
} }
} }
border-right: 1px solid $separator; border-right: 1px solid variables.$separator;
} }
> .center { > .center {
width: 150px; width: 150px;
min-width: 150px; min-width: 150px;
background: $grey-2; background: variables.$grey-2;
border-right: 1px solid $separator; border-right: 1px solid variables.$separator;
&:not(.collapsed) iqser-circle-button { &:not(.collapsed) iqser-circle-button {
margin-right: -8px; 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 { :host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
&.center { &.center {
@ -6,7 +6,7 @@
} }
&.label span { &.label span {
@include line-clamp(1); @include common-mixins.line-clamp(1);
} }
&.read-only mat-icon { &.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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.content-container { .content-container {
background-color: $grey-2; background-color: variables.$grey-2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@include scroll-bar; @include common-mixins.scroll-bar;
overflow: auto; overflow: auto;
} }
@ -16,7 +16,7 @@
} }
.inline-input-group { .inline-input-group {
background-color: rgba($grey-6, 0.8); background-color: rgba(variables.$grey-6, 0.8);
width: 100%; width: 100%;
height: 38px; height: 38px;
border-radius: 4px; 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'; @use 'common-mixins';
@import '../../../../../assets/styles/variables'; @use 'variables';
.content-container { .content-container {
overflow: auto; overflow: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -28,7 +28,7 @@
&:hover { &:hover {
> div { > div {
background-color: $grey-2; background-color: variables.$grey-2;
} }
} }
} }
@ -37,7 +37,7 @@
grid-column: span 2; grid-column: span 2;
padding: 20px 20px 8px; padding: 20px 20px 8px;
margin-bottom: 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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.content-container, .content-container,
.right-container { .right-container {
flex: 1; flex: 1;
padding: 30px; padding: 30px;
overflow: auto; overflow: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
} }
.right-container { .right-container {
@ -21,7 +21,7 @@
.template { .template {
padding: 8px 10px; padding: 8px 10px;
background-color: $grey-6; background-color: variables.$grey-6;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.2s; transition: background-color 0.2s;
position: relative; position: relative;
@ -32,7 +32,7 @@
.name { .name {
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
@include line-clamp(1); @include common-mixins.line-clamp(1);
} }
.actions { .actions {
@ -48,7 +48,7 @@
} }
&:hover { &:hover {
background-color: $grey-4; background-color: variables.$grey-4;
.actions { .actions {
display: flex; display: flex;
@ -81,8 +81,8 @@
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
.all-caps-label { .all-caps-label {
border-top: 1px solid $separator; border-top: 1px solid variables.$separator;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
padding: 8px 32px; padding: 8px 32px;
&:nth-child(2) { &:nth-child(2) {
@ -93,7 +93,7 @@
.placeholder, .placeholder,
.description { .description {
padding: 16px 16px; padding: 16px 16px;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
} }
.placeholder { .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 { .content-container {
order: 1; order: 1;
@ -15,7 +15,7 @@
min-width: 353px; min-width: 353px;
padding: 24px; padding: 24px;
border-left: none; border-left: none;
border-right: 1px solid $separator; border-right: 1px solid variables.$separator;
&.has-scrollbar:hover { &.has-scrollbar:hover {
padding-right: 13px; padding-right: 13px;
@ -32,8 +32,8 @@
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 8px; border-radius: 8px;
background-color: $grey-6; background-color: variables.$grey-6;
color: $grey-7; color: variables.$grey-7;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@ -46,7 +46,7 @@
} }
&:not(.disabled):not(.active):hover { &:not(.disabled):not(.active):hover {
background-color: darken($grey-6, 2); background-color: darken(variables.$grey-6, 2);
} }
&:not(:last-child) { &:not(:last-child) {
@ -54,8 +54,8 @@
} }
&.active { &.active {
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
} }
&.times-new-roman { &.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 { .annotation-actions {
display: none; display: none;
@ -8,7 +8,7 @@
} }
.confirm.active { .confirm.active {
background-color: $grey-2; background-color: variables.$grey-2;
} }
> *:not(:last-child) { > *: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 { :host {
display: flex; display: flex;
flex-direction: column; 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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
:host { :host {
display: block; display: block;
@ -13,7 +13,7 @@
.right-content { .right-content {
flex-direction: column; flex-direction: column;
@include scroll-bar; @include common-mixins.scroll-bar;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
@ -42,7 +42,7 @@
} }
&:not(:last-child) { &: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'; @use 'variables';
@import '../../../../../assets/styles/red-components'; @use 'red-components';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-texts'; @use 'common-texts';
:host { :host {
@extend .stats-subtitle; @extend .stats-subtitle;
@ -19,10 +19,10 @@
&.link-property { &.link-property {
cursor: pointer; cursor: pointer;
transition: background-color 0.2; transition: background-color 0.2s;
&:hover { &: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 { .header-wrapper {
display: flex; display: flex;
@ -29,11 +29,11 @@
padding: 3px 8px; padding: 3px 8px;
&:hover { &:hover {
background-color: $grey-6; background-color: variables.$grey-6;
} }
&.active { &.active {
background-color: rgba($primary, 0.1); background-color: rgba(variables.$primary, 0.1);
} }
&:not(:last-of-type) { &: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 { :host {
flex: 1; flex: 1;
display: flex; 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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.read-only { .read-only {
padding: 13px 16px; padding: 13px 16px;
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
justify-content: space-between; justify-content: space-between;
.read-only-text { .read-only-text {
@ -48,12 +48,12 @@
.multi-select { .multi-select {
min-height: 40px; min-height: 40px;
background: $primary; background: variables.$primary;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 8px 0 16px; padding: 0 8px 0 16px;
color: $white; color: variables.$white;
.selected-wrapper { .selected-wrapper {
display: flex; display: flex;
@ -90,7 +90,7 @@
} }
.quick-navigation { .quick-navigation {
border-right: 1px solid $separator; border-right: 1px solid variables.$separator;
min-width: 61px; min-width: 61px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -105,7 +105,7 @@
transition: background-color 0.25s; transition: background-color 0.25s;
&:not(.disabled):hover { &:not(.disabled):hover {
background-color: $grey-6; background-color: variables.$grey-6;
} }
mat-icon { mat-icon {
@ -124,21 +124,21 @@
} }
.pages { .pages {
@include no-scroll-bar; @include common-mixins.no-scroll-bar;
overflow: auto; overflow: auto;
flex: 1; flex: 1;
} }
} }
.page-separator { .page-separator {
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
height: 32px; height: 32px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: $grey-6; background-color: variables.$grey-6;
> div { > div {
display: flex; display: flex;
@ -160,7 +160,7 @@
.annotation-wrapper { .annotation-wrapper {
display: flex; display: flex;
width: 100%; width: 100%;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
.active-bar-marker { .active-bar-marker {
min-width: 4px; min-width: 4px;
@ -173,7 +173,7 @@
&.active { &.active {
&:not(.lower-height) .active-bar-marker { &:not(.lower-height) .active-bar-marker {
background-color: $primary; background-color: variables.$primary;
} }
} }
@ -188,7 +188,7 @@
&.removed { &.removed {
text-decoration: line-through; text-decoration: line-through;
color: $grey-7; color: variables.$grey-7;
} }
.details { .details {
@ -221,7 +221,7 @@
} }
&:hover { &:hover {
background-color: $grey-4; background-color: variables.$grey-4;
} }
} }
} }
@ -233,7 +233,7 @@
} }
&:hover { &:hover {
background-color: $grey-8; background-color: variables.$grey-8;
::ng-deep .annotation-actions { ::ng-deep .annotation-actions {
display: flex; display: flex;
@ -243,7 +243,7 @@
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
} }
&.has-scrollbar:hover .annotation-wrapper .annotation { &.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 { .needs-work {
display: flex; display: flex;
flex-direction: row; 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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
:host { :host {
height: 100%; height: 100%;
@ -7,13 +7,13 @@
flex-direction: column; flex-direction: column;
.exclude-pages-input-container { .exclude-pages-input-container {
background-color: $grey-6; background-color: variables.$grey-6;
padding: 15px 15px 16px 14px; padding: 15px 15px 16px 14px;
} }
.all-caps-label-container { .all-caps-label-container {
padding: 8px 16px; padding: 8px 16px;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
} }
.ranges { .ranges {
@ -22,7 +22,7 @@
.range { .range {
padding-left: 17px; padding-left: 17px;
padding-right: 16px; padding-right: 16px;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
transition: background-color 0.2s; transition: background-color 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
@ -34,7 +34,7 @@
} }
&:hover { &:hover {
background-color: $grey-8; background-color: variables.$grey-8;
iqser-circle-button { iqser-circle-button {
display: initial; display: initial;
@ -43,7 +43,7 @@
} }
&.has-scrollbar:hover { &.has-scrollbar:hover {
@include scroll-bar; @include common-mixins.scroll-bar;
overflow: auto; overflow: auto;
.range { .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 { .page-wrapper {
color: $accent; color: variables.$accent;
position: relative; position: relative;
padding: 12px 14px 12px 8px; padding: 12px 14px 12px 8px;
cursor: pointer; cursor: pointer;
border-left: 4px solid transparent; border-left: 4px solid transparent;
&:hover { &:hover {
background-color: $grey-2; background-color: variables.$grey-2;
} }
&.active { &.active {
border-left: 4px solid $primary; border-left: 4px solid variables.$primary;
} }
mat-icon { mat-icon {
@ -35,15 +35,15 @@
} }
&.read { &.read {
color: $grey-5; color: variables.$grey-5;
.text { .text {
color: $accent; color: variables.$accent;
} }
} }
.dot { .dot {
background: $primary; background: variables.$primary;
height: 8px; height: 8px;
width: 8px; width: 8px;
border-radius: 50%; 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 { .page {
display: flex; display: flex;
@ -28,9 +28,9 @@
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
background: $white; background: variables.$white;
color: $grey-7; color: variables.$grey-7;
border: 1px solid $grey-7; border: 1px solid variables.$grey-7;
border-radius: 8px; border-radius: 8px;
padding: 6px 2px; padding: 6px 2px;
display: flex; display: flex;
@ -56,7 +56,7 @@
margin: 0; margin: 0;
} }
color: $grey-7; color: variables.$grey-7;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
border: none; border: none;
@ -67,7 +67,7 @@
&:hover, &:hover,
&:focus { &:focus {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid $grey-7; border-bottom: 1px solid variables.$grey-7;
} }
} }
@ -79,7 +79,7 @@
padding-right: 4px; padding-right: 4px;
&:hover { &: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 { .search-container {
margin-top: 16px; margin-top: 16px;
@ -16,7 +17,7 @@ redaction-team-members {
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
} }
> div { > div {
@ -51,7 +52,7 @@ redaction-team-members {
&.selected, &.selected,
&:hover { &:hover {
background-color: $grey-2; background-color: variables.$grey-2;
.actions { .actions {
display: flex; 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 { .container {
flex-wrap: wrap; flex-wrap: wrap;
@ -27,8 +27,8 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
background-color: $accent; background-color: variables.$accent;
color: $white; color: variables.$white;
position: absolute; position: absolute;
right: -8px; right: -8px;
bottom: -2px; bottom: -2px;
@ -48,6 +48,6 @@
.see-less { .see-less {
opacity: 1; opacity: 1;
color: $primary; color: variables.$primary;
margin-top: 16px; 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 { .watermark {
margin-top: 24px; 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 { :host {
display: flex; display: flex;
@ -18,7 +18,7 @@
height: 100%; height: 100%;
width: 1px; width: 1px;
padding: 0; padding: 0;
background-color: $separator; background-color: variables.$separator;
} }
.datepicker-wrapper { .datepicker-wrapper {
@ -60,7 +60,7 @@
height: 50px; height: 50px;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border: 1px solid $grey-5; border: 1px solid variables.$grey-5;
margin-right: 15px; 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'; @use 'variables';
@import '../../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.instructions { .instructions {
color: $grey-7; color: variables.$grey-7;
flex: 1; flex: 1;
text-align: end; text-align: end;
} }
@ -11,6 +11,6 @@
height: calc(100% - 81px) !important; height: calc(100% - 81px) !important;
.cdk-virtual-scroll-content-wrapper .table-item > div.cell.filename span { .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 { .download-includes {
margin: 16px 0 10px; margin: 16px 0 10px;
font-weight: 500; 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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.dialog-content { .dialog-content {
padding: 0; padding: 0;
margin-top: 24px; margin-top: 24px;
border-top: 1px solid $separator; border-top: 1px solid variables.$separator;
display: flex; display: flex;
height: calc(90vh - 81px); height: calc(90vh - 81px);
@ -14,7 +14,7 @@
.content { .content {
padding: 24px 32px; padding: 24px 32px;
overflow: auto; overflow: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
height: calc(100% - 81px); height: calc(100% - 81px);
box-sizing: border-box; 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 { .watermark {
margin-top: 24px; 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 { .file-upload-input {
display: none; display: none;
@ -8,7 +8,7 @@
&.last-opened { &.last-opened {
> .selection-column { > .selection-column {
padding-left: 6px !important; padding-left: 6px !important;
border-left: 4px solid $primary; border-left: 4px solid variables.$primary;
} }
> div { > div {
@ -18,7 +18,7 @@
> div.cell { > div.cell {
.error { .error {
color: $primary; color: variables.$primary;
} }
.table-item-title { .table-item-title {
@ -57,7 +57,7 @@
@keyframes red-fading-background { @keyframes red-fading-background {
0% { 0% {
background-color: rgba($primary, 0.1); background-color: rgba(variables.$primary, 0.1);
} }
100% { 100% {
background-color: inherit; 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 { .vertical-line {
width: 1px; width: 1px;
height: 30px; height: 30px;
background-color: $grey-4; background-color: variables.$grey-4;
margin: 0 16px; margin: 0 16px;
} }
@ -32,7 +32,7 @@
::ng-deep .right-title { ::ng-deep .right-title {
height: 70px; height: 70px;
display: flex; display: flex;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24px; 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'; @use 'common-mixins';
@import '../../../../../assets/styles/variables';
:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell { :host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
.highlights { .highlights {
@include line-clamp(1); @include common-mixins.line-clamp(1);
em { em {
background-color: #fffcc4; 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 { .icon {
height: 16px; height: 16px;
@ -11,7 +11,7 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: $white; color: variables.$white;
position: relative; position: relative;
background-color: var(--color); background-color: var(--color);
} }
@ -60,9 +60,9 @@
} }
.skipped { .skipped {
background-color: $grey-5; background-color: variables.$grey-5;
} }
.none { .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 { :host {
button { button {
@ -11,7 +11,7 @@
&[aria-expanded='true'] { &[aria-expanded='true'] {
button { 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 { :host {
width: 100%; width: 100%;
@ -78,7 +78,7 @@ ngx-monaco-editor {
position: absolute; position: absolute;
right: 12px; right: 12px;
top: 8px; top: 8px;
color: $accent; color: variables.$accent;
.with-input { .with-input {
display: flex; display: flex;
@ -106,7 +106,7 @@ ngx-monaco-editor {
padding: 0 100px; padding: 0 100px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border: 1px solid $grey-5; border: 1px solid variables.$grey-5;
> mat-icon { > mat-icon {
height: 60px; height: 60px;
@ -116,6 +116,6 @@ ngx-monaco-editor {
} }
.heading-l { .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 { .wrapper {
display: flex; display: flex;
@ -15,5 +15,5 @@
} }
.border { .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 { :host {
display: flex; display: flex;
@ -22,7 +22,7 @@
} }
&.active { &.active {
color: $primary; color: variables.$primary;
font-weight: bold; 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 { :host {
border-radius: 8px; border-radius: 8px;
border: 1px solid $grey-5; border: 1px solid variables.$grey-5;
min-height: 100%; min-height: 100%;
display: block; display: block;
&.ng-invalid { &.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 { .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: $grey-6; background-color: variables.$grey-6;
color: $accent; color: variables.$accent;
} }
.mat-chip.mat-standard-chip { .mat-chip.mat-standard-chip {
background-color: $white; background-color: variables.$white;
color: $accent; color: variables.$accent;
margin: 0 0 2px 0; margin: 0 0 2px 0;
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: $grey-8; background-color: variables.$grey-8;
} }
} }
.mat-chip.mat-standard-chip::after { .mat-chip.mat-standard-chip::after {
background: $grey-8; background: variables.$grey-8;
} }
.mat-standard-chip:focus::after { .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'; @use 'variables';
@import '../../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
:host { :host {
display: block; display: block;
min-width: 200px; min-width: 200px;
max-width: 200px; max-width: 200px;
background-color: $grey-2; background-color: variables.$grey-2;
border-right: 1px solid $separator; border-right: 1px solid variables.$separator;
box-sizing: border-box; box-sizing: border-box;
padding: 8px; padding: 8px;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
@include no-scroll-bar; @include common-mixins.no-scroll-bar;
.all-caps-label { .all-caps-label {
padding: 16px; padding: 16px;
@ -26,12 +26,12 @@
font-weight: 500; font-weight: 500;
&:not(.active):hover { &:not(.active):hover {
background-color: rgba($primary, 0.2); background-color: rgba(variables.$primary, 0.2);
} }
&.active { &.active {
background-color: $primary; background-color: variables.$primary;
color: $white; 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 { :host {
height: fit-content; height: fit-content;
@ -60,11 +60,11 @@
} }
&:hover:not(.active):not(.filter-disabled) { &:hover:not(.active):not(.filter-disabled) {
background-color: $grey-6; background-color: variables.$grey-6;
} }
&.active { &.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 { section {
position: fixed; position: fixed;
top: 0; 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'; @use 'variables';
@import '../../../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.red-upload-download-overlay { .red-upload-download-overlay {
background: $white; background: variables.$white;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
@ -19,14 +19,14 @@
padding: 16px 14px 16px 16px; padding: 16px 14px 16px 16px;
cursor: pointer; cursor: pointer;
color: $accent; color: variables.$accent;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
line-height: 16px; line-height: 16px;
mat-icon { mat-icon {
height: 13px; height: 13px;
color: $accent; color: variables.$accent;
&.collapse-icon { &.collapse-icon {
height: 15px; height: 15px;
@ -34,28 +34,28 @@
} }
&.expanded { &.expanded {
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
} }
} }
.upload-download-list { .upload-download-list {
overflow: auto; overflow: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
max-height: 260px; max-height: 260px;
> div:not(:first-child) { > div:not(:first-child) {
.dossier-name-wrapper { .dossier-name-wrapper {
border-top: 1px solid $separator; border-top: 1px solid variables.$separator;
} }
} }
.dossier-name-wrapper { .dossier-name-wrapper {
display: flex; display: flex;
padding: 4px 16px; padding: 4px 16px;
background-color: $grey-2; background-color: variables.$grey-2;
> span { > span {
@include line-clamp(1); @include common-mixins.line-clamp(1);
} }
} }
@ -63,7 +63,7 @@
padding: 10px 16px 12px 16px; padding: 10px 16px 12px 16px;
font-size: 11px; font-size: 11px;
line-height: 14px; line-height: 14px;
border-top: 1px solid $separator; border-top: 1px solid variables.$separator;
position: relative; position: relative;
.upload-download-line { .upload-download-line {
@ -72,7 +72,7 @@
align-items: center; align-items: center;
.upload-download-item-name { .upload-download-item-name {
@include line-clamp(1); @include common-mixins.line-clamp(1);
&.complete { &.complete {
text-decoration: underline; text-decoration: underline;
@ -90,12 +90,12 @@
} }
&.error { &.error {
background-color: rgba($primary, 0.1); background-color: rgba(variables.$primary, 0.1);
padding-right: 100px; padding-right: 100px;
.error-message { .error-message {
margin-top: 2px; margin-top: 2px;
color: $primary; color: variables.$primary;
} }
} }
@ -113,13 +113,13 @@
} }
&:not(.error) { &: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; padding-left: 60px;
} }
} }
&:not(.error):hover { &:not(.error):hover {
background-color: $grey-2; background-color: variables.$grey-2;
.actions { .actions {
display: flex; display: flex;

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

@ -1,8 +1,7 @@
@import 'variables'; @use 'common-mixins';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins';
.mat-autocomplete-panel { .mat-autocomplete-panel {
@include scroll-bar; @include common-mixins.scroll-bar;
.mat-option { .mat-option {
font-size: inherit; font-size: inherit;

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

@ -1,5 +1,5 @@
@import 'variables'; @use 'variables';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.breadcrumbs-container { .breadcrumbs-container {
display: flex; display: flex;
@ -17,7 +17,7 @@
.breadcrumb { .breadcrumb {
text-decoration: none; text-decoration: none;
color: $accent; color: variables.$accent;
font-weight: 600; font-weight: 600;
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;
@ -33,10 +33,10 @@
} }
&:last-child { &:last-child {
@include line-clamp(1); @include common-mixins.line-clamp(1);
} }
&.active { &.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 { .mat-checkbox .mat-checkbox-frame {
border: 1px solid $grey-5; border: 1px solid variables.$grey-5;
} }
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
@ -21,7 +21,7 @@
.mat-checkbox-label { .mat-checkbox-label {
font-size: 13px; font-size: 13px;
color: $accent; color: variables.$accent;
display: flex; display: flex;
align-items: center; align-items: center;
@ -33,5 +33,5 @@
} }
.mat-checkbox.error .mat-checkbox-label { .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'; @use 'variables';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.oval, .oval,
.square { .square {
@ -24,45 +24,45 @@
} }
&.gray-dark { &.gray-dark {
background-color: $grey-6; background-color: variables.$grey-6;
} }
&.gray-red { &.gray-red {
background-color: $grey-6; background-color: variables.$grey-6;
color: $primary; color: variables.$primary;
} }
&.lightgray-dark { &.lightgray-dark {
background-color: $grey-4; background-color: variables.$grey-4;
} }
&.lightgray-red { &.lightgray-red {
background-color: $grey-4; background-color: variables.$grey-4;
color: $primary; color: variables.$primary;
} }
&.darkgray-white { &.darkgray-white {
background-color: $accent; background-color: variables.$accent;
color: $white; color: variables.$white;
} }
&.lightgray-white { &.lightgray-white {
background-color: $grey-5; background-color: variables.$grey-5;
color: $white; color: variables.$white;
} }
&.red-white { &.red-white {
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
} }
&.white-dark { &.white-dark {
border: 1px solid $grey-4; border: 1px solid variables.$grey-4;
} }
&.inactive { &.inactive {
background-color: $grey-6; background-color: variables.$grey-6;
color: $grey-7; color: variables.$grey-7;
} }
} }
@ -93,8 +93,8 @@
.pill { .pill {
padding: 2px 5px; padding: 2px 5px;
border-radius: 9px; border-radius: 9px;
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
line-height: 12px; line-height: 12px;
@ -104,61 +104,61 @@
} }
.UNASSIGNED { .UNASSIGNED {
stroke: $grey-5; stroke: variables.$grey-5;
background-color: $grey-5; background-color: variables.$grey-5;
} }
.UNPROCESSED { .UNPROCESSED {
stroke: $grey-3; stroke: variables.$grey-3;
background-color: $grey-3; background-color: variables.$grey-3;
} }
.UNDER_REVIEW, .UNDER_REVIEW,
.REGULAR { .REGULAR {
stroke: $yellow-1; stroke: variables.$yellow-1;
background-color: $yellow-1; background-color: variables.$yellow-1;
} }
.UNDER_APPROVAL { .UNDER_APPROVAL {
stroke: $blue-4; stroke: variables.$blue-4;
background-color: $blue-4; background-color: variables.$blue-4;
} }
.APPROVED, .APPROVED,
.ADMIN { .ADMIN {
stroke: $blue-3; stroke: variables.$blue-3;
background-color: $blue-3; background-color: variables.$blue-3;
} }
.PROCESSING { .PROCESSING {
stroke: $accent; stroke: variables.$accent;
background-color: $accent; background-color: variables.$accent;
} }
.OCR_PROCESSING, .OCR_PROCESSING,
.USER_ADMIN { .USER_ADMIN {
stroke: $green-2; stroke: variables.$green-2;
background-color: $green-2; background-color: variables.$green-2;
} }
.REPROCESS { .REPROCESS {
stroke: $accent; stroke: variables.$accent;
background-color: $accent; background-color: variables.$accent;
} }
.FULLREPROCESS { .FULLREPROCESS {
stroke: $accent; stroke: variables.$accent;
background-color: $accent; background-color: variables.$accent;
} }
.EXCLUDED { .EXCLUDED {
stroke: $pink-1; stroke: variables.$pink-1;
background-color: $pink-1; background-color: variables.$pink-1;
} }
.ERROR { .ERROR {
stroke: lighten($primary, 25%); stroke: lighten(variables.$primary, 25%);
background-color: lighten($primary, 25%); background-color: lighten(variables.$primary, 25%);
} }
.ACTIVE { .ACTIVE {
@ -172,18 +172,18 @@
} }
.INACTIVE { .INACTIVE {
stroke: $grey-5; stroke: variables.$grey-5;
background-color: $grey-5; background-color: variables.$grey-5;
} }
.MANAGER, .MANAGER,
.MANAGER_ADMIN { .MANAGER_ADMIN {
stroke: $primary; stroke: variables.$primary;
background-color: $primary; background-color: variables.$primary;
} }
.overlay-shadow { .overlay-shadow {
@include inset-shadow; @include common-mixins.inset-shadow;
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 4px; height: 4px;

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

@ -1,4 +1,4 @@
@import 'variables'; @use 'variables';
.btn-group { .btn-group {
display: flex; display: flex;
@ -6,8 +6,8 @@
.btn-group-btn { .btn-group-btn {
cursor: pointer; cursor: pointer;
color: $accent; color: variables.$accent;
background: $white; background: variables.$white;
font-family: Inter, sans-serif; font-family: Inter, sans-serif;
font-size: 13px; font-size: 13px;
line-height: 14px; line-height: 14px;
@ -17,17 +17,17 @@
border: none; border: none;
&:hover { &:hover {
color: $black; color: variables.$black;
} }
&.active { &.active {
color: $light; color: variables.$light;
background: $primary; background: variables.$primary;
border-radius: 17px; border-radius: 17px;
} }
&.active:hover { &.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 { .changed-row-marker {
background: rgba($primary, 0.1); background: rgba(variables.$primary, 0.1);
z-index: 20; z-index: 20;
} }
.too-short-marker { .too-short-marker {
background: rgba($primary, 0.5); background: rgba(variables.$primary, 0.5);
z-index: 30; z-index: 30;
} }
.search-marker { .search-marker {
background: rgba($blue-5, 0.3); background: rgba(variables.$blue-5, 0.3);
z-index: 40; z-index: 40;
} }
@ -29,7 +29,7 @@
right: 40px; right: 40px;
border-radius: 8px; border-radius: 8px;
padding: 16px 32px 16px 16px; padding: 16px 32px 16px 16px;
background-color: $white; background-color: variables.$white;
box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
z-index: 5000; 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 { .help-mode-on-mouse-over {
z-index: 100; z-index: 100;
@ -15,7 +15,7 @@
.help-highlight, .help-highlight,
.help-mode-on-mouse-over:hover { .help-mode-on-mouse-over:hover {
background: rgba(92, 229, 148, 0.5); 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; 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 { .mat-list-item {
color: $accent !important; color: variables.$accent !important;
font-size: 13px !important; font-size: 13px !important;
line-height: 16px !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; @use '~@angular/material' as mat;
@import 'variables'; @use 'variables';
@include mat.core(); @include mat.core();
$primary-palette: ( $primary-palette: (
default: $primary, default: variables.$primary,
lighter: lighten($primary, 30%), lighter: lighten(variables.$primary, 30%),
darker: darken($primary, 30%), darker: darken(variables.$primary, 30%),
text: $primary, text: variables.$primary,
contrast: ( contrast: (
default: $light, default: variables.$light,
lighter: $light, lighter: variables.$light,
darker: $light darker: variables.$light
) )
); );
$secondary-palette: ( $secondary-palette: (
default: $accent, default: variables.$accent,
lighter: lighten($accent, 30%), lighter: lighten(variables.$accent, 30%),
darker: darken($accent, 30%), darker: darken(variables.$accent, 30%),
text: $accent, text: variables.$accent,
contrast: ( contrast: (
default: $light, default: variables.$light,
lighter: $light, lighter: variables.$light,
darker: $light darker: variables.$light
) )
); );
$red-palette: ( $red-palette: (
default: $primary, default: variables.$primary,
lighter: lighten($primary, 30%), lighter: lighten(variables.$primary, 30%),
darker: darken($primary, 30%), darker: darken(variables.$primary, 30%),
text: $primary, text: variables.$primary,
contrast: ( contrast: (
default: $light, default: variables.$light,
lighter: $light, lighter: variables.$light,
darker: $light darker: variables.$light
) )
); );

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

@ -1,5 +1,5 @@
@import 'variables'; @use 'variables';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.mat-menu-panel { .mat-menu-panel {
border-radius: 8px !important; border-radius: 8px !important;
@ -7,7 +7,7 @@
max-width: none !important; max-width: none !important;
min-width: 180px !important; min-width: 180px !important;
margin-top: 10px; margin-top: 10px;
@include scroll-bar; @include common-mixins.scroll-bar;
.mat-menu-content:not(:empty) { .mat-menu-content:not(:empty) {
padding-top: 8px; padding-top: 8px;
@ -24,7 +24,7 @@
.mat-menu-item { .mat-menu-item {
font-size: 13px; font-size: 13px;
color: $accent; color: variables.$accent;
padding: 0 8px; padding: 0 8px;
margin: 0 8px 2px 8px; margin: 0 8px 2px 8px;
border-radius: 4px; border-radius: 4px;
@ -57,7 +57,7 @@
} }
&:hover { &: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'; @use 'variables';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
html, html,
body { body {
@ -7,7 +7,7 @@ body {
padding: 0; padding: 0;
height: 100vh; height: 100vh;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
color: $accent; color: variables.$accent;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
} }
@ -33,8 +33,8 @@ section.settings {
height: 50px; height: 50px;
width: 100vw; width: 100vw;
box-sizing: border-box; box-sizing: border-box;
background-color: $white; background-color: variables.$white;
border-bottom: 1px solid $separator; border-bottom: 1px solid variables.$separator;
.filters { .filters {
display: flex; display: flex;
@ -58,7 +58,7 @@ section.settings {
.reset-filters { .reset-filters {
margin-left: 12px; margin-left: 12px;
color: $primary; color: variables.$primary;
cursor: pointer; cursor: pointer;
} }
} }
@ -108,7 +108,7 @@ section.settings {
border-radius: 8px; border-radius: 8px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 70px; margin-bottom: 70px;
background-color: $white; background-color: variables.$white;
max-width: 650px; max-width: 650px;
height: fit-content; height: fit-content;
box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
@ -145,15 +145,15 @@ section.settings {
} }
.right-container { .right-container {
border-left: 1px solid $grey-4; border-left: 1px solid variables.$grey-4;
box-sizing: border-box; box-sizing: border-box;
background: $white; background: variables.$white;
overflow: hidden; overflow: hidden;
transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
@include scroll-bar; @include common-mixins.scroll-bar;
} }
.collapsed-wrapper { .collapsed-wrapper {
@ -334,7 +334,7 @@ section.settings {
.divider { .divider {
height: 1px; height: 1px;
opacity: 0.15; 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 { .mat-progress-bar {
height: 6px; height: 6px;
border-radius: 3px; border-radius: 3px;
.mat-progress-bar-buffer { .mat-progress-bar-buffer {
background-color: $grey-4; background-color: variables.$grey-4;
} }
&.green { &.green {
.mat-progress-bar-fill::after { .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'; @use 'variables';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins'; @use 'common-mixins';
.mat-select-panel { .mat-select-panel {
@include scroll-bar; @include common-mixins.scroll-bar;
.mat-option { .mat-option {
&:hover:not(.mat-option-disabled), &:hover:not(.mat-option-disabled),
&:focus:not(.mat-option-disabled) { &:focus:not(.mat-option-disabled) {
background-color: $grey-6; background-color: variables.$grey-6;
} }
&.mat-selected:not(.mat-option-multiple) { &.mat-selected:not(.mat-option-multiple) {
background-color: rgba($primary, 0.2); background-color: rgba(variables.$primary, 0.2);
color: $accent; 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 { .mat-slider-horizontal {
width: 140px; width: 140px;
@ -17,14 +17,14 @@
// For disabled state // For disabled state
.mat-slider-track-fill { .mat-slider-track-fill {
background-color: $primary; background-color: variables.$primary;
} }
.mat-slider-track-background { .mat-slider-track-background {
height: 4px !important; height: 4px !important;
margin-top: 1px; margin-top: 1px;
border-radius: 3px; border-radius: 3px;
background-color: $grey-4 !important; background-color: variables.$grey-4 !important;
} }
.mat-slider-focus-ring { .mat-slider-focus-ring {
@ -36,7 +36,7 @@
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
border-width: 0 !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 { .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'; @use 'variables';
@import '../../../../../libs/common-ui/src/assets/styles/common-mixins';
.default-table { .default-table {
border-collapse: collapse; border-collapse: collapse;
@ -8,7 +7,7 @@
td { td {
padding: 8px; padding: 8px;
text-align: left; 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 { .red-tab {
&:not(:last-child) { &:not(:last-child) {
@ -13,17 +13,17 @@
cursor: pointer; cursor: pointer;
&:not(.disabled):not(.active):hover { &:not(.disabled):not(.active):hover {
background-color: $grey-6; background-color: variables.$grey-6;
} }
&.active { &.active {
background-color: rgba($primary, 0.1); background-color: rgba(variables.$primary, 0.1);
font-weight: 600; font-weight: 600;
color: $primary; color: variables.$primary;
} }
&.disabled { &.disabled {
color: rgba($accent, 0.3); color: rgba(variables.$accent, 0.3);
cursor: not-allowed; cursor: not-allowed;
} }
} }

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

@ -1,24 +1,24 @@
@import 'red-fonts'; @use 'red-fonts';
@import '~ngx-toastr/toastr'; @use '~ngx-toastr/toastr';
@import 'red-material-theme'; @use 'red-material-theme';
@import 'red-page-layout'; @use 'red-page-layout';
@import 'red-select'; @use 'red-select';
@import 'red-autocomplete'; @use 'red-autocomplete';
@import 'red-list'; @use 'red-list';
@import 'red-checkbox'; @use 'red-checkbox';
@import 'red-toggle'; @use 'red-toggle';
@import 'red-toggle-button'; @use 'red-toggle-button';
@import 'red-menu'; @use 'red-menu';
@import 'red-media-queries'; @use 'red-media-queries';
@import 'red-tables'; @use 'red-tables';
@import 'red-components'; @use 'red-components';
@import 'red-controls'; @use 'red-controls';
@import 'red-toasts'; @use 'red-toasts';
@import 'red-tooltips'; @use 'red-tooltips';
@import 'red-breadcrumbs'; @use 'red-breadcrumbs';
@import 'red-editor'; @use 'red-editor';
@import 'red-slider'; @use 'red-slider';
@import 'red-loading'; @use 'red-loading';
@import 'red-progress-bar'; @use 'red-progress-bar';
@import 'red-tabs'; @use 'red-tabs';
@import 'red-help-mode'; @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; $toast-width: 400px;
@ -36,7 +36,7 @@ $toast-width: 400px;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
line-height: 14px; line-height: 14px;
color: $accent; color: variables.$accent;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
} }
@ -70,37 +70,37 @@ $toast-width: 400px;
.toast-warning, .toast-warning,
.toast-success { .toast-success {
.toast-message { .toast-message {
color: $accent; color: variables.$accent;
} }
.toast-close-button { .toast-close-button {
color: $accent; color: variables.$accent;
} }
} }
.toast-error, .toast-error,
.toast-info { .toast-info {
.toast-close-button:hover { .toast-close-button:hover {
color: $white; color: variables.$white;
} }
} }
.toast-success { .toast-success {
background-color: $green-2; background-color: variables.$green-2;
} }
.toast-error { .toast-error {
background-color: $primary; background-color: variables.$primary;
color: $white; color: variables.$white;
} }
.toast-warning { .toast-warning {
background-color: $yellow-2; background-color: variables.$yellow-2;
color: $accent; color: variables.$accent;
} }
.toast-info { .toast-info {
background-color: $accent; background-color: variables.$accent;
} }
.inline-dialog-toast { .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-standalone,
.mat-button-toggle-group { .mat-button-toggle-group {
@ -8,8 +8,8 @@
.mat-button-toggle:not(.mat-button-toggle-checked) { .mat-button-toggle:not(.mat-button-toggle-checked) {
.mat-button-toggle-button { .mat-button-toggle-button {
background: $grey-6; background: variables.$grey-6;
color: $grey-7; 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 {
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
height: 16px !important; height: 16px !important;
width: 30px !important; width: 30px !important;
border-radius: 16px !important; border-radius: 16px !important;
background-color: $grey-4; background-color: variables.$grey-4;
} }
.mat-slide-toggle-thumb-container { .mat-slide-toggle-thumb-container {
@ -19,7 +19,7 @@
height: 12px !important; height: 12px !important;
width: 12px !important; width: 12px !important;
box-shadow: none; box-shadow: none;
background-color: $grey-2; background-color: variables.$grey-2;
} }
.mat-ripple { .mat-ripple {
@ -28,11 +28,11 @@
&.mat-primary.mat-checked { &.mat-primary.mat-checked {
.mat-slide-toggle-bar { .mat-slide-toggle-bar {
background-color: $primary; background-color: variables.$primary;
} }
.mat-slide-toggle-thumb { .mat-slide-toggle-thumb {
background-color: $white; background-color: variables.$white;
} }
.mat-slide-toggle-thumb-container { .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 { .mat-tooltip {
background-color: $accent; background-color: variables.$accent;
border-radius: 3px !important; border-radius: 3px !important;
padding: 10px; padding: 10px;
margin: 12px !important; margin: 12px !important;
font-size: 11px; font-size: 11px;
line-height: 14px; line-height: 14px;
color: $white !important; color: variables.$white !important;
position: relative; position: relative;
overflow: visible !important; overflow: visible !important;
text-align: center; text-align: center;
@ -30,8 +30,8 @@
} }
&.warn { &.warn {
background-color: $yellow-2; background-color: variables.$yellow-2;
color: $accent !important; color: variables.$accent !important;
//&:after { //&:after {
// border-top: solid 6px $yellow-2; // 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'; @use '../apps/red-ui/src/assets/styles/variables';
@import 'mixin'; @use 'mixin';
.portal-footer, .portal-footer,
.site-footer { .site-footer {
border-top: 1px solid $grey-4; border-top: 1px solid variables.$grey-4;
padding: 0; padding: 0;
&.portal-footer { &.portal-footer {
@ -13,7 +13,7 @@
.inner { .inner {
margin: 0; margin: 0;
padding: 8px 0 64px 0; padding: 8px 0 64px 0;
@include paragraph; @include mixin.paragraph;
> * { > * {
padding: 0; padding: 0;

16
paligo-styles/header.scss
View File

@ -1,16 +1,16 @@
@import '../apps/red-ui/src/assets/styles/variables'; @use '../apps/red-ui/src/assets/styles/variables';
@import 'mixin'; @use 'mixin';
.portal-header { .portal-header {
z-index: 1; z-index: 1;
height: 450px; height: 450px;
&::before { &::before {
background-color: $grey-1; background-color: variables.$grey-1;
} }
h1 { h1 {
@include heading-1; @include mixin.heading-1;
margin-top: 68px; margin-top: 68px;
margin-bottom: 40px; margin-bottom: 40px;
} }
@ -20,7 +20,7 @@
margin: auto; margin: auto;
position: relative; position: relative;
@include search-input; @include mixin.search-input;
.search-field { .search-field {
padding: 12px 17px; padding: 12px 17px;
@ -31,12 +31,12 @@
right: 0; right: 0;
padding: 11px 18px; padding: 11px 18px;
background-color: transparent; background-color: transparent;
color: $accent; color: variables.$accent;
cursor: pointer; cursor: pointer;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
&:hover { &:hover {
background-color: $primary; background-color: variables.$primary;
} }
} }
} }
@ -44,6 +44,6 @@
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.portal-header h1 { .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'; @use '../apps/red-ui/src/assets/styles/variables';
@import 'mixin'; @use 'mixin';
.featured-content-label { .featured-content-label {
display: none; display: none;
@ -11,7 +11,7 @@
.portal-single-publication { .portal-single-publication {
.publication-icon { .publication-icon {
background-color: $red-1; background-color: variables.$red-1;
} }
} }
@ -32,7 +32,7 @@
} }
.publication-contents { .publication-contents {
@include card; @include mixin.card;
} }
@media only screen and (max-width: 768px) { @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'; @use '../apps/red-ui/src/assets/styles/variables';
@import '../libs/common-ui/src/assets/styles/common-mixins'; @use '../libs/common-ui/src/assets/styles/common-mixins';
@import 'mixin'; @use 'mixin';
.site-sidebar { .site-sidebar {
background-color: $accent; background-color: variables.$accent;
.logo { .logo {
padding: 24px 0 30px 0 !important; padding: 24px 0 30px 0 !important;
} }
@include scroll-bar; @include common-mixins.scroll-bar;
} }
.site-sidebar-search { .site-sidebar-search {
padding: 0 24px; padding: 0 24px;
@include search-input; @include mixin.search-input;
.search-field { .search-field {
padding: 7px 13px; padding: 7px 13px;
@ -33,16 +33,16 @@
color: #d3d5da; color: #d3d5da;
&:hover { &:hover {
background-color: $grey-10; background-color: variables.$grey-10;
} }
} }
.active > .topic-link { .active > .topic-link {
background-color: $grey-10; background-color: variables.$grey-10;
} }
.active > a { .active > a {
color: $white; color: variables.$white;
font-weight: 600; font-weight: 600;
} }

24
paligo-styles/manual.scss
View File

@ -1,5 +1,5 @@
@import '../apps/red-ui/src/assets/styles/variables'; @use '../apps/red-ui/src/assets/styles/variables';
@import 'manual-sidebar'; @use 'mixin';
.toolbar { .toolbar {
box-shadow: none; box-shadow: none;
@ -19,16 +19,16 @@
font-weight: 600; font-weight: 600;
a { a {
color: $accent; color: variables.$accent;
&:hover { &:hover {
color: $primary; color: variables.$primary;
text-decoration: underline; text-decoration: underline;
} }
} }
.breadcrumb-node { .breadcrumb-node {
color: $primary; color: variables.$primary;
} }
} }
} }
@ -41,7 +41,7 @@ main article {
#topic-content > section > .titlepage h2.title { #topic-content > section > .titlepage h2.title {
margin: 0 0 24px; margin: 0 0 24px;
@include heading-3; @include mixin.heading-3;
} }
.image-viewport { .image-viewport {
@ -61,7 +61,7 @@ main article {
.pager li > a, .pager li > a,
.pager li > span { .pager li > span {
@include button; @include mixin.button;
} }
.warning, .warning,
@ -72,11 +72,11 @@ main article {
margin-top: 32px; margin-top: 32px;
margin-bottom: 32px; margin-bottom: 32px;
padding: 16px 24px 16px 68px; padding: 16px 24px 16px 68px;
background-color: $white; background-color: variables.$white;
border-left: 4px solid $primary; border-left: 4px solid variables.$primary;
&:before { &:before {
color: $primary; color: variables.$primary;
width: 20px; width: 20px;
height: 20px; height: 20px;
text-align: center; text-align: center;
@ -86,7 +86,7 @@ main article {
h3 { h3 {
padding: 0; padding: 0;
@include heading-5; @include mixin.heading-5;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -125,7 +125,7 @@ main ul {
} }
.section-toc { .section-toc {
@include card; @include mixin.card;
li:first-child { li:first-child {
margin-top: 16px; 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 { @mixin search-input {
.search-field { .search-field {
width: 100%; width: 100%;
border: 1px solid $grey-5; border: 1px solid variables.$grey-5;
border-radius: 8px; border-radius: 8px;
background-color: $white; background-color: variables.$white;
} }
.search-field::placeholder { .search-field::placeholder {
@ -14,7 +14,7 @@
.search-field, .search-field,
.search-field::placeholder { .search-field::placeholder {
color: $accent; color: variables.$accent;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
} }
@ -61,7 +61,7 @@
} }
@mixin button { @mixin button {
color: $primary; color: variables.$primary;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 19px; line-height: 19px;
@ -74,16 +74,16 @@
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
background-color: transparent; background-color: transparent;
color: $primary; color: variables.$primary;
} }
} }
@mixin card { @mixin card {
padding: 24px 40px; padding: 24px 40px;
border: 1px solid $grey-4; border: 1px solid variables.$grey-4;
width: 100%; width: 100%;
margin: 0; margin: 0;
background-color: $white; background-color: variables.$white;
border-radius: 4px; border-radius: 4px;
&:first-child { &:first-child {
@ -96,10 +96,10 @@
margin: 0; margin: 0;
a { a {
color: $accent; color: variables.$accent;
&:hover { &:hover {
color: $accent; color: variables.$accent;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -122,11 +122,11 @@
} }
a { a {
color: $primary; color: variables.$primary;
@include paragraph; @include paragraph;
&:hover { &:hover {
color: $primary; color: variables.$primary;
text-decoration: underline; text-decoration: underline;
} }
} }

22
paligo-styles/search.scss
View File

@ -1,15 +1,15 @@
@import '../apps/red-ui/src/assets/styles/variables'; @use '../apps/red-ui/src/assets/styles/variables';
@import 'mixin'; @use 'mixin';
.portal-search-result { .portal-search-result {
background-color: $grey-9; background-color: variables.$grey-9;
} }
.search-container { .search-container {
padding-bottom: 100px; padding-bottom: 100px;
h2 { h2 {
@include heading-2; @include mixin.heading-2;
} }
} }
@ -19,8 +19,8 @@
} }
ul.searchresults { ul.searchresults {
border: 1px solid $grey-4; border: 1px solid variables.$grey-4;
background-color: $white; background-color: variables.$white;
border-radius: 4px; border-radius: 4px;
margin-top: 32px; margin-top: 32px;
@ -31,7 +31,7 @@ ul.searchresults {
li.searchresultitem { li.searchresultitem {
margin: 0 32px; margin: 0 32px;
border-bottom: 1px solid $grey-4; border-bottom: 1px solid variables.$grey-4;
padding: 32px 8px; padding: 32px 8px;
} }
@ -41,15 +41,15 @@ li.searchresultitem {
} }
.searchresulttitle { .searchresulttitle {
@include heading-4; @include mixin.heading-4;
color: $accent; color: variables.$accent;
} }
.searchresultsnippet { .searchresultsnippet {
margin: 16px 0; margin: 16px 0;
color: $accent; color: variables.$accent;
} }
.search-result-breadcrumbs { .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'; @use 'apps/red-ui/src/assets/styles/variables';
@import '../libs/common-ui/src/assets/styles/common-mixins'; @use '../libs/common-ui/src/assets/styles/common-mixins';
@import 'fonts'; @use 'fonts';
@import 'header'; @use 'header';
@import 'homepage'; @use 'homepage';
@import 'search'; @use 'search';
@import 'footer'; @use 'footer';
@import 'manual'; @use 'manual';
@import 'mixin'; @use 'mixin';
body { body {
color: $accent; color: variables.$accent;
background-color: $grey-9; background-color: variables.$grey-9;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
h1, h1,
@ -25,22 +25,22 @@ body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
} }
@include scroll-bar; @include common-mixins.scroll-bar;
h3 { h3 {
@include heading-3; @include mixin.heading-3;
} }
p { p {
@include paragraph; @include mixin.paragraph;
} }
a { a {
color: $primary; color: variables.$primary;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
color: $primary; color: variables.$primary;
} }
} }
} }