From 9714c93fc38388ecb9f87e1b812a4782f7fd6917 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 28 Jun 2022 12:02:14 +0300 Subject: [PATCH] Theme --- src/assets/styles/_common-mixins.scss | 8 ++++---- src/assets/styles/common-breadcrumbs.scss | 2 +- src/assets/styles/common-buttons.scss | 2 +- src/assets/styles/common-components.scss | 1 + src/assets/styles/common-dialogs.scss | 3 ++- src/assets/styles/common-inputs.scss | 2 +- src/assets/styles/common-layout.scss | 2 +- src/assets/styles/common-loading.scss | 8 ++++---- src/assets/styles/common-menu.scss | 4 ++-- src/assets/styles/common-select.scss | 4 ++-- src/assets/styles/common-toggle.scss | 4 ++-- src/lib/buttons/help-button/help-button.component.html | 10 +--------- src/lib/buttons/help-button/help-button.component.ts | 3 +-- .../help-mode-dialog/help-mode-dialog.component.scss | 2 +- .../listing/scroll-button/scroll-button.component.scss | 2 +- 15 files changed, 25 insertions(+), 32 deletions(-) diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss index 4cf6984..dfe467c 100644 --- a/src/assets/styles/_common-mixins.scss +++ b/src/assets/styles/_common-mixins.scss @@ -40,11 +40,11 @@ } @mixin inset-shadow { - box-shadow: inset 0 4px 3px -2px var(--iqser-btn-bg-hover); + box-shadow: inset 0 4px 3px -2px var(--iqser-shadow); } @mixin drop-shadow { - box-shadow: 0 4px 3px 2px var(--iqser-btn-bg-hover); + box-shadow: 0 2px 6px 0 var(--iqser-shadow); } @mixin clear-btn { @@ -59,9 +59,9 @@ @mixin clear-a { text-decoration: none; - color: initial; + color: var(--iqser-text); &:hover { - color: initial; + color: var(--iqser-text); } } diff --git a/src/assets/styles/common-breadcrumbs.scss b/src/assets/styles/common-breadcrumbs.scss index 5756f33..7df17fb 100644 --- a/src/assets/styles/common-breadcrumbs.scss +++ b/src/assets/styles/common-breadcrumbs.scss @@ -18,7 +18,7 @@ color: var(--iqser-primary); &[aria-expanded='true'] .mat-button-wrapper > span { - color: var(--iqser-accent); + color: var(--iqser-text); } } } diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss index 84c43ab..f136b90 100644 --- a/src/assets/styles/common-buttons.scss +++ b/src/assets/styles/common-buttons.scss @@ -23,7 +23,7 @@ } &.mat-button-disabled .mat-button-wrapper { - color: var(--iqser-accent); + color: var(--iqser-text); opacity: 0.3; } } diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss index 4598a4f..a3bd775 100644 --- a/src/assets/styles/common-components.scss +++ b/src/assets/styles/common-components.scss @@ -79,6 +79,7 @@ display: flex; align-items: center; min-width: fit-content; + @include mixins.line-clamp(1); mat-icon { width: 10px; diff --git a/src/assets/styles/common-dialogs.scss b/src/assets/styles/common-dialogs.scss index ede9ae4..9eda646 100644 --- a/src/assets/styles/common-dialogs.scss +++ b/src/assets/styles/common-dialogs.scss @@ -2,7 +2,8 @@ .mat-dialog-container { display: flex !important; - color: var(--iqser-accent); + color: var(--iqser-text); + background-color: var(--iqser-background); padding: 0 !important; border-radius: 8px !important; @include common-mixins.scroll-bar; diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index c9c540b..e4c566f 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -177,7 +177,7 @@ form .iqser-input-group:not(first-of-type) { letter-spacing: 0; line-height: 14px; margin-bottom: 2px; - color: var(--iqser-accent); + color: var(--iqser-text); &.mat-checkbox-layout { opacity: 1; diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss index d9a2c4a..27a6ed0 100644 --- a/src/assets/styles/common-layout.scss +++ b/src/assets/styles/common-layout.scss @@ -125,7 +125,7 @@ section.settings { background-color: var(--iqser-background); max-width: 650px; height: fit-content; - box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19); + box-shadow: 0 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.19); position: unset; .heading-l { diff --git a/src/assets/styles/common-loading.scss b/src/assets/styles/common-loading.scss index 43fdc4f..7f93ba9 100644 --- a/src/assets/styles/common-loading.scss +++ b/src/assets/styles/common-loading.scss @@ -6,15 +6,15 @@ @keyframes dots { 0%, 20% { - color: rgba(40, 50, 65, 0); - text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0); + color: rgba(var(--iqser-accent-rgb), 0); + text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0); } 40% { color: #283241; - text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0); + text-shadow: 0.25em 0 0 rgba(var(--iqser-accent-rgb), 0), 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0); } 60% { - text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0); + text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(var(--iqser-accent-rgb), 0); } 80%, 100% { diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss index 8775cd5..f2586b9 100644 --- a/src/assets/styles/common-menu.scss +++ b/src/assets/styles/common-menu.scss @@ -2,12 +2,12 @@ .mat-menu-panel { border-radius: 8px !important; - box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); max-width: none !important; min-width: 180px !important; margin-top: 10px; - background-color: var(--iqser-background); + background-color: var(--iqser-popup-background); @include common-mixins.scroll-bar; + @include common-mixins.drop-shadow; .mat-menu-content:not(:empty) { padding-top: 8px; diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index 56fee69..5773c34 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -8,15 +8,15 @@ .mat-option { margin: 1px 8px; border-radius: 4px; + color: var(--iqser-text); &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); } &.mat-selected:not(.mat-option-multiple) { background-color: rgba(var(--iqser-primary-rgb), 0.2); - color: var(--iqser-text); } } } diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss index 161a8bd..092d02d 100644 --- a/src/assets/styles/common-toggle.scss +++ b/src/assets/styles/common-toggle.scss @@ -27,11 +27,11 @@ &.mat-primary.mat-checked { .mat-slide-toggle-bar { background-color: var(--iqser-primary); - border: 1px solid var(--iqser-white); + border: 1px solid var(--iqser-background); } .mat-slide-toggle-thumb { - background-color: var(--iqser-white); + background-color: var(--iqser-background); } .mat-slide-toggle-thumb-container { diff --git a/src/lib/buttons/help-button/help-button.component.html b/src/lib/buttons/help-button/help-button.component.html index bac8fc3..45fbb64 100644 --- a/src/lib/buttons/help-button/help-button.component.html +++ b/src/lib/buttons/help-button/help-button.component.html @@ -1,14 +1,6 @@ - diff --git a/src/lib/buttons/help-button/help-button.component.ts b/src/lib/buttons/help-button/help-button.component.ts index 86f8d49..c684311 100644 --- a/src/lib/buttons/help-button/help-button.component.ts +++ b/src/lib/buttons/help-button/help-button.component.ts @@ -8,7 +8,6 @@ import { HelpModeService } from '@iqser/common-ui'; styleUrls: ['./help-button.component.scss'], }) export class HelpButtonComponent implements OnInit, OnDestroy { - @Input() dialogButton = true; @Input() helpButtonKey?: string; constructor(private readonly _helpModeService: HelpModeService) {} @@ -27,6 +26,6 @@ export class HelpButtonComponent implements OnInit, OnDestroy { window.open(url, '_blank'); return; } - this._helpModeService.activateHelpMode(this.dialogButton); + this._helpModeService.activateHelpMode(); } } diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss index 6f76799..ba695e0 100644 --- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss +++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss @@ -1,5 +1,5 @@ section { - background: var(--iqser-grey-4); + background: var(--iqser-grey-4); // todo align-items: center; .content { diff --git a/src/lib/listing/scroll-button/scroll-button.component.scss b/src/lib/listing/scroll-button/scroll-button.component.scss index ee4a294..8eaace7 100644 --- a/src/lib/listing/scroll-button/scroll-button.component.scss +++ b/src/lib/listing/scroll-button/scroll-button.component.scss @@ -6,7 +6,7 @@ width: 44px; border: none; border-radius: 8px 0 0 8px; - box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25); + box-shadow: -1px 1px 5px 0 rgba(var(--iqser-accent-rgb), 0.25); &.bottom { bottom: 30px;