From dc525eb0a94e4c68d0b6da0774dd28b21e5b16a5 Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Thu, 4 Sep 2025 20:24:46 +0200 Subject: [PATCH] refactor: modernize scss syntax and get rid of most of the warnings --- angular.json | 10 +----- src/_common.scss | 10 ++++-- src/app/app.component.scss | 2 +- .../main-header/main-header.component.scss | 2 +- .../side-nav-item.component.scss | 2 +- .../core-ui/side-nav/side-nav.component.scss | 2 +- .../core/banner/banner/banner.component.scss | 2 +- .../board-panel/board-panel.component.scss | 4 +-- .../boards/board/board.component.scss | 2 +- src/app/features/boards/boards.component.scss | 2 +- .../dialog-board-edit.component.scss | 2 +- .../config-form/config-form.component.scss | 2 +- .../config-section.component.scss | 2 +- .../repeat-section-type.component.scss | 2 +- .../focus-mode-main.component.scss | 2 +- .../focus-mode-overlay.component.scss | 2 +- .../dialog-idle-split.component.scss | 2 +- .../dialog-idle/dialog-idle.component.scss | 2 +- .../issue-panel/issue-panel.component.scss | 2 +- .../issue-preview-item.component.scss | 2 +- ...sue-provider-setup-overview.component.scss | 2 +- .../dialog-edit-issue-provider.component.scss | 2 +- .../issue-content.component.scss | 2 +- .../github-issue-content.component.scss | 2 +- .../gitlab-issue-content.component.scss | 2 +- .../jira-issue-content.component.scss | 2 +- .../open-project-issue-content.component.scss | 2 +- .../evaluation-sheet.component.scss | 2 +- src/app/features/metric/metric.component.scss | 2 +- .../features/note/note/note.component.scss | 2 +- .../features/note/notes/notes.component.scss | 2 +- .../dialog-schedule-task.component.scss | 2 +- .../planner-calendar-event.component.scss | 4 +-- .../planner-day-overdue.component.scss | 4 +-- .../planner-day/planner-day.component.scss | 4 +-- .../planner-plan-view.component.scss | 2 +- .../planner-repeat-projection.component.scss | 4 +-- .../planner-task/planner-task.component.scss | 4 +-- .../quick-history.component.scss | 2 +- .../create-task-placeholder.component.scss | 2 +- .../schedule-event.component.scss | 2 +- .../schedule-month.component.scss | 2 +- .../schedule-week.component.scss | 2 +- .../schedule/schedule/schedule.component.scss | 2 +- .../dialog-simple-counter-edit.component.scss | 2 +- .../simple-counter-button.component.scss | 2 +- .../dialog-edit-tags-for-task.component.scss | 2 +- src/app/features/tag/tag/tag.component.scss | 2 +- src/app/features/tasks/_task-shared.scss | 2 ++ .../add-task-bar-actions.component.scss | 2 +- .../add-task-bar/add-task-bar.component.scss | 2 +- ...time-estimate-for-other-day.component.scss | 2 +- .../dialog-task-detail-panel.component.scss | 2 +- .../dialog-time-estimate.component.scss | 2 +- .../dialog-view-task-reminders.component.scss | 2 +- .../select-task-minimal.component.scss | 2 +- .../task-attachment-list.component.scss | 2 +- .../task-context-menu-inner.component.scss | 4 +-- .../task-detail-item.component.scss | 2 +- .../task-detail-panel.component.scss | 4 +-- .../tasks/task-list/task-list.component.scss | 2 +- src/app/features/tasks/task/_task-base.scss | 3 ++ .../features/tasks/task/_task-controls.scss | 3 ++ .../task-hover-controls.component.scss | 4 +-- .../tasks/task/task.component.mixins.scss | 4 +-- .../features/tasks/task/task.component.scss | 8 ++--- .../dialog-tracking-reminder.component.scss | 2 +- .../work-view/backlog/backlog.component.scss | 2 +- .../work-view/work-view.component.scss | 2 +- .../worklog-export.component.scss | 2 +- .../worklog-week/worklog-week.component.scss | 2 ++ .../features/worklog/worklog.component.scss | 2 +- .../dialog-sync-initial-cfg.component.scss | 2 +- .../config-page/config-page.component.scss | 2 +- .../daily-summary.component.scss | 2 +- .../scheduled-list-page.component.scss | 4 +-- .../plugin-index/plugin-index.component.scss | 7 ++-- .../better-drawer-container.component.scss | 15 ++++---- .../better-simple-drawer.component.scss | 2 ++ .../dialog-fullscreen-markdown.component.scss | 2 +- .../input-duration-slider.component.scss | 2 +- .../inline-input/inline-input.component.scss | 2 +- .../inline-markdown.component.scss | 2 +- .../ui/task-title/task-title.component.scss | 2 +- src/styles.scss | 14 ++++---- src/styles/_globals.scss | 8 +++++ src/styles/components/_components.scss | 34 +++++++++---------- .../components/_overwrite-material.scss | 8 +++-- src/styles/components/fab-wrapper.scss | 4 ++- src/styles/components/formly-rows.scss | 2 +- src/styles/components/markdown.scss | 4 ++- src/styles/components/multi-btn-wrapper.scss | 6 ++-- src/styles/components/planner-shared.scss | 9 ++--- src/styles/components/scrollbars.scss | 12 +++---- src/styles/components/shepherd.scss | 4 ++- src/styles/components/table.scss | 4 ++- src/styles/extends/_extends.scss | 4 +-- src/styles/font/material-icons.scss | 4 +-- src/styles/mixins/_inline-edit-elevation.scss | 4 ++- src/styles/mixins/_mixins.scss | 31 +++++++++-------- src/styles/mixins/_responsive-ratio.scss | 7 ++-- src/styles/mixins/_scroll.scss | 2 +- src/styles/page.scss | 13 +++---- src/styles/util.scss | 14 ++++---- 104 files changed, 227 insertions(+), 193 deletions(-) create mode 100644 src/styles/_globals.scss diff --git a/angular.json b/angular.json index ee3fdbbde..34b6633f9 100644 --- a/angular.json +++ b/angular.json @@ -41,15 +41,7 @@ "webWorkerTsConfig": "src/tsconfig.worker.json", "browser": "src/main.ts", "stylePreprocessorOptions": { - "includePaths": ["."], - "sass": { - "silenceDeprecations": [ - "mixed-decls", - "color-functions", - "global-builtin", - "import" - ] - } + "includePaths": [".", "src", "src/styles"] } }, "configurations": { diff --git a/src/_common.scss b/src/_common.scss index 5f3b4c6c3..c1d6f51ed 100644 --- a/src/_common.scss +++ b/src/_common.scss @@ -1,6 +1,10 @@ @use 'angular-material-css-vars' as mat-css-vars; -@import 'styles/functions/_ddivide'; +// Forward functions so they can be used without namespace +@forward 'styles/functions/_ddivide'; +@use 'styles/functions/_ddivide'; -@import 'styles/mixins/mixins'; -@import 'styles/extends/extends'; +// Forward all mixins so they can be used without namespace +@forward 'styles/mixins/_mixins'; +@use 'styles/mixins/_mixins'; +@use 'styles/extends/extends'; diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 7b9550720..362303d78 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,4 +1,4 @@ -@import '../common'; +@use '_globals' as *; :host { display: flex; diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss index 7e35ed465..aa27e846a 100644 --- a/src/app/core-ui/main-header/main-header.component.scss +++ b/src/app/core-ui/main-header/main-header.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; // TODO split up into more manageable bits diff --git a/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss b/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss index 1440e54eb..0b5c972e5 100644 --- a/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss +++ b/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { button .badge { diff --git a/src/app/core-ui/side-nav/side-nav.component.scss b/src/app/core-ui/side-nav/side-nav.component.scss index 9552d977f..8216cd526 100644 --- a/src/app/core-ui/side-nav/side-nav.component.scss +++ b/src/app/core-ui/side-nav/side-nav.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; // MAIN LAYOUT // ----------- diff --git a/src/app/core/banner/banner/banner.component.scss b/src/app/core/banner/banner/banner.component.scss index 7e200282c..c8ea6583b 100644 --- a/src/app/core/banner/banner/banner.component.scss +++ b/src/app/core/banner/banner/banner.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/boards/board-panel/board-panel.component.scss b/src/app/features/boards/board-panel/board-panel.component.scss index 52a7f6055..bebcc3e4f 100644 --- a/src/app/features/boards/board-panel/board-panel.component.scss +++ b/src/app/features/boards/board-panel/board-panel.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { //border: 1px solid var(--c-light-20); @@ -18,8 +18,6 @@ min-height: 300px; } - border-color: var(--extra-border-color); - planner-task { margin-bottom: 8px; margin-right: 4px; diff --git a/src/app/features/boards/board/board.component.scss b/src/app/features/boards/board/board.component.scss index 890ad828f..0b5d8673b 100644 --- a/src/app/features/boards/board/board.component.scss +++ b/src/app/features/boards/board/board.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: grid; diff --git a/src/app/features/boards/boards.component.scss b/src/app/features/boards/boards.component.scss index cbc11e94b..6f70db7fe 100644 --- a/src/app/features/boards/boards.component.scss +++ b/src/app/features/boards/boards.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { ::ng-deep { diff --git a/src/app/features/boards/dialog-board-edit/dialog-board-edit.component.scss b/src/app/features/boards/dialog-board-edit/dialog-board-edit.component.scss index c422aaf8a..e83e3e85f 100644 --- a/src/app/features/boards/dialog-board-edit/dialog-board-edit.component.scss +++ b/src/app/features/boards/dialog-board-edit/dialog-board-edit.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { mat-dialog-content { diff --git a/src/app/features/config/config-form/config-form.component.scss b/src/app/features/config/config-form/config-form.component.scss index 241acbfab..b5d96c446 100644 --- a/src/app/features/config/config-form/config-form.component.scss +++ b/src/app/features/config/config-form/config-form.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { padding-bottom: var(--s2); diff --git a/src/app/features/config/config-section/config-section.component.scss b/src/app/features/config/config-section/config-section.component.scss index 679043072..96217e98d 100644 --- a/src/app/features/config/config-section/config-section.component.scss +++ b/src/app/features/config/config-section/config-section.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .form-wrapper { overflow: hidden; diff --git a/src/app/features/config/repeat-section-type/repeat-section-type.component.scss b/src/app/features/config/repeat-section-type/repeat-section-type.component.scss index b739fb3dc..0abd15aec 100644 --- a/src/app/features/config/repeat-section-type/repeat-section-type.component.scss +++ b/src/app/features/config/repeat-section-type/repeat-section-type.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host ::ng-deep { .mat-mdc-form-field { diff --git a/src/app/features/focus-mode/focus-mode-main/focus-mode-main.component.scss b/src/app/features/focus-mode/focus-mode-main/focus-mode-main.component.scss index 1407d4064..52dc7a1a7 100644 --- a/src/app/features/focus-mode/focus-mode-main/focus-mode-main.component.scss +++ b/src/app/features/focus-mode/focus-mode-main/focus-mode-main.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { position: absolute; diff --git a/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.scss b/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.scss index b609415e6..e98d150b8 100644 --- a/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.scss +++ b/src/app/features/focus-mode/focus-mode-overlay/focus-mode-overlay.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { position: fixed; diff --git a/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss b/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss index aa16216da..179e02005 100644 --- a/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss +++ b/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../common'; +@use '_globals' as *; :host p { text-align: center; diff --git a/src/app/features/idle/dialog-idle/dialog-idle.component.scss b/src/app/features/idle/dialog-idle/dialog-idle.component.scss index 868d39573..661aa5c02 100644 --- a/src/app/features/idle/dialog-idle/dialog-idle.component.scss +++ b/src/app/features/idle/dialog-idle/dialog-idle.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .dialog-content { @include mq(xs) { diff --git a/src/app/features/issue-panel/issue-panel.component.scss b/src/app/features/issue-panel/issue-panel.component.scss index 376b3e32d..150b25c77 100644 --- a/src/app/features/issue-panel/issue-panel.component.scss +++ b/src/app/features/issue-panel/issue-panel.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { // NOTE 0 because we want the inner scrollbars at the very right diff --git a/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss b/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss index 2ff2dc025..c5a241719 100644 --- a/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss +++ b/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss @@ -1,4 +1,4 @@ -@import '../../tasks/task/task.component.mixins'; +@use '_globals' as *; :host { //@include grabCursor(); diff --git a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss index 1bf782d2c..8aa4d7387 100644 --- a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss +++ b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss index cf35fffe6..d525cc807 100644 --- a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss +++ b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { @include mq(xxs) { diff --git a/src/app/features/issue/issue-content/issue-content.component.scss b/src/app/features/issue/issue-content/issue-content.component.scss index f0c6cbe48..143bd0dcf 100644 --- a/src/app/features/issue/issue-content/issue-content.component.scss +++ b/src/app/features/issue/issue-content/issue-content.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss b/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss index 01d94dd01..ba4478608 100644 --- a/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss +++ b/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../common'; +@use '_globals' as *; // table styled by ./src/styles/components/issue-table.scss diff --git a/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss b/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss index 2d6cccebc..53877dd0f 100644 --- a/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss +++ b/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../common'; +@use '_globals' as *; // table styled by ./src/styles/components/issue-table.scss diff --git a/src/app/features/issue/providers/jira/OLD-jira-issue-content/jira-issue-content.component.scss b/src/app/features/issue/providers/jira/OLD-jira-issue-content/jira-issue-content.component.scss index efcdc73f6..08a42cae5 100644 --- a/src/app/features/issue/providers/jira/OLD-jira-issue-content/jira-issue-content.component.scss +++ b/src/app/features/issue/providers/jira/OLD-jira-issue-content/jira-issue-content.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../common'; +@use '_globals' as *; // table styled by ./src/styles/components/issue-table.scss diff --git a/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss b/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss index 440be030d..de0e82c3f 100644 --- a/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss +++ b/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../common'; +@use '_globals' as *; // table styled by ./src/styles/components/issue-table.scss diff --git a/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss b/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss index f70398177..dc68acda2 100644 --- a/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss +++ b/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .wrapper { position: relative; diff --git a/src/app/features/metric/metric.component.scss b/src/app/features/metric/metric.component.scss index 7096f6ba1..47704b2d7 100644 --- a/src/app/features/metric/metric.component.scss +++ b/src/app/features/metric/metric.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { text-align: center; diff --git a/src/app/features/note/note/note.component.scss b/src/app/features/note/note/note.component.scss index ced87cfbb..833a3a6ae 100644 --- a/src/app/features/note/note/note.component.scss +++ b/src/app/features/note/note/note.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { --note-font-size: 14px; diff --git a/src/app/features/note/notes/notes.component.scss b/src/app/features/note/notes/notes.component.scss index fbc0284af..df438a44f 100644 --- a/src/app/features/note/notes/notes.component.scss +++ b/src/app/features/note/notes/notes.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { background-color: inherit; diff --git a/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss b/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss index 248ca35a0..08621ae68 100644 --- a/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss +++ b/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host, :host * { diff --git a/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss b/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss index c60053fc8..5e7127717 100644 --- a/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss +++ b/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss @@ -1,5 +1,5 @@ -@import '../../../../common'; -@import '../../tasks/task/task.component.mixins'; +@use '_globals' as *; +@use '../../tasks/task/task.component.mixins' as *; :host { flex: 1; diff --git a/src/app/features/planner/planner-day-overdue/planner-day-overdue.component.scss b/src/app/features/planner/planner-day-overdue/planner-day-overdue.component.scss index d7f9bcd57..798f7056c 100644 --- a/src/app/features/planner/planner-day-overdue/planner-day-overdue.component.scss +++ b/src/app/features/planner/planner-day-overdue/planner-day-overdue.component.scss @@ -1,5 +1,5 @@ -@import '../../../../common'; -@import '../../tasks/task/task.component.mixins'; +@use '_globals' as *; +@use '../../tasks/task/task.component.mixins' as *; :host { display: flex; diff --git a/src/app/features/planner/planner-day/planner-day.component.scss b/src/app/features/planner/planner-day/planner-day.component.scss index f557e41ad..8bdf7101f 100644 --- a/src/app/features/planner/planner-day/planner-day.component.scss +++ b/src/app/features/planner/planner-day/planner-day.component.scss @@ -1,5 +1,5 @@ -@import '../../../../common'; -@import '../../tasks/task/task.component.mixins'; +@use '_globals' as *; +@use '../../tasks/task/task.component.mixins' as *; :host { display: flex; diff --git a/src/app/features/planner/planner-plan-view/planner-plan-view.component.scss b/src/app/features/planner/planner-plan-view/planner-plan-view.component.scss index dfc1c6fa1..d48baf348 100644 --- a/src/app/features/planner/planner-plan-view/planner-plan-view.component.scss +++ b/src/app/features/planner/planner-plan-view/planner-plan-view.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { overflow: auto; diff --git a/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss b/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss index f67486f91..7ff5dd22d 100644 --- a/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss +++ b/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss @@ -1,5 +1,5 @@ -@import '../../../../common'; -@import '../../tasks/task/task.component.mixins'; +@use '_globals' as *; +@use '../../tasks/task/task.component.mixins' as *; :host { display: block; diff --git a/src/app/features/planner/planner-task/planner-task.component.scss b/src/app/features/planner/planner-task/planner-task.component.scss index 131c9c1c8..3842d291b 100644 --- a/src/app/features/planner/planner-task/planner-task.component.scss +++ b/src/app/features/planner/planner-task/planner-task.component.scss @@ -1,5 +1,5 @@ -@import '../../../../common'; -@import '../../tasks/task/task.component.mixins'; +@use '_globals' as *; +@use '../../tasks/task/task.component.mixins' as *; :host { border-radius: 6px; diff --git a/src/app/features/quick-history/quick-history.component.scss b/src/app/features/quick-history/quick-history.component.scss index a9f31a3ba..4a46ee365 100644 --- a/src/app/features/quick-history/quick-history.component.scss +++ b/src/app/features/quick-history/quick-history.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss b/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss index 7841dd7ce..94fece593 100644 --- a/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss +++ b/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { border: 2px dashed var(--c-accent); diff --git a/src/app/features/schedule/schedule-event/schedule-event.component.scss b/src/app/features/schedule/schedule-event/schedule-event.component.scss index 27cfc4a02..70824e7e5 100644 --- a/src/app/features/schedule/schedule-event/schedule-event.component.scss +++ b/src/app/features/schedule/schedule-event/schedule-event.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; // TODO split up into more manageable bits diff --git a/src/app/features/schedule/schedule-month/schedule-month.component.scss b/src/app/features/schedule/schedule-month/schedule-month.component.scss index c94967619..14bec5d42 100644 --- a/src/app/features/schedule/schedule-month/schedule-month.component.scss +++ b/src/app/features/schedule/schedule-month/schedule-month.component.scss @@ -1,5 +1,5 @@ @use 'angular-material-css-vars' as mat-css-vars; -@import '../../../../common'; +@use '_globals' as *; .month-grid-container { display: grid; diff --git a/src/app/features/schedule/schedule-week/schedule-week.component.scss b/src/app/features/schedule/schedule-week/schedule-week.component.scss index 67f03b6dd..8a4f938bc 100644 --- a/src/app/features/schedule/schedule-week/schedule-week.component.scss +++ b/src/app/features/schedule/schedule-week/schedule-week.component.scss @@ -1,5 +1,5 @@ @use 'angular-material-css-vars' as mat-css-vars; -@import '../../../../common'; +@use '_globals' as *; .week-grid-container { --schedule-time-width: 3em; diff --git a/src/app/features/schedule/schedule/schedule.component.scss b/src/app/features/schedule/schedule/schedule.component.scss index 0b4af668d..63088143e 100644 --- a/src/app/features/schedule/schedule/schedule.component.scss +++ b/src/app/features/schedule/schedule/schedule.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { --nr-of-days: 5; diff --git a/src/app/features/simple-counter/dialog-simple-counter-edit/dialog-simple-counter-edit.component.scss b/src/app/features/simple-counter/dialog-simple-counter-edit/dialog-simple-counter-edit.component.scss index c63c9f71f..24207733e 100644 --- a/src/app/features/simple-counter/dialog-simple-counter-edit/dialog-simple-counter-edit.component.scss +++ b/src/app/features/simple-counter/dialog-simple-counter-edit/dialog-simple-counter-edit.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .streak-info { display: flex; diff --git a/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss b/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss index 540e559f8..ca25b65ab 100644 --- a/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss +++ b/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss @@ -1,6 +1,6 @@ @use 'sass:math'; -@import '../../../../common'; +@use '_globals' as *; .wrapper { position: relative; diff --git a/src/app/features/tag/dialog-edit-tags/dialog-edit-tags-for-task.component.scss b/src/app/features/tag/dialog-edit-tags/dialog-edit-tags-for-task.component.scss index d66af4a86..5247d8d18 100644 --- a/src/app/features/tag/dialog-edit-tags/dialog-edit-tags-for-task.component.scss +++ b/src/app/features/tag/dialog-edit-tags/dialog-edit-tags-for-task.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: flex; diff --git a/src/app/features/tag/tag/tag.component.scss b/src/app/features/tag/tag/tag.component.scss index 4efa739c9..3d772ef65 100644 --- a/src/app/features/tag/tag/tag.component.scss +++ b/src/app/features/tag/tag/tag.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: inline-flex; diff --git a/src/app/features/tasks/_task-shared.scss b/src/app/features/tasks/_task-shared.scss index daafb49a0..eff551d10 100644 --- a/src/app/features/tasks/_task-shared.scss +++ b/src/app/features/tasks/_task-shared.scss @@ -1,3 +1,5 @@ +@use '_globals' as *; + // Shared task styling mixins and utilities @mixin task-box-base() { position: absolute; diff --git a/src/app/features/tasks/add-task-bar/add-task-bar-actions/add-task-bar-actions.component.scss b/src/app/features/tasks/add-task-bar/add-task-bar-actions/add-task-bar-actions.component.scss index 1dbb9f749..3796c9661 100644 --- a/src/app/features/tasks/add-task-bar/add-task-bar-actions/add-task-bar-actions.component.scss +++ b/src/app/features/tasks/add-task-bar/add-task-bar-actions/add-task-bar-actions.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../common'; +@use '_globals' as *; .clear-btn { opacity: 0.5; diff --git a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss index d6c3d51d5..126ec266d 100644 --- a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss +++ b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/tasks/dialog-add-time-estimate-for-other-day/dialog-add-time-estimate-for-other-day.component.scss b/src/app/features/tasks/dialog-add-time-estimate-for-other-day/dialog-add-time-estimate-for-other-day.component.scss index 3b7231fe8..3d072d892 100644 --- a/src/app/features/tasks/dialog-add-time-estimate-for-other-day/dialog-add-time-estimate-for-other-day.component.scss +++ b/src/app/features/tasks/dialog-add-time-estimate-for-other-day/dialog-add-time-estimate-for-other-day.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .wrap-time { display: flex; diff --git a/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss b/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss index 0c9097753..0b9469c37 100644 --- a/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss +++ b/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { mat-dialog-content { diff --git a/src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.scss b/src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.scss index d6b1006ad..e480bf20b 100644 --- a/src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.scss +++ b/src/app/features/tasks/dialog-time-estimate/dialog-time-estimate.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .dialog-help-wrapper { :host-context([dir='rtl']) & { diff --git a/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss b/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss index f6cd8cf3b..dc8448f2a 100644 --- a/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss +++ b/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { //text-align: center; diff --git a/src/app/features/tasks/select-task/select-task-minimal/select-task-minimal.component.scss b/src/app/features/tasks/select-task/select-task-minimal/select-task-minimal.component.scss index 126e2a0e5..a86f39fdf 100644 --- a/src/app/features/tasks/select-task/select-task-minimal/select-task-minimal.component.scss +++ b/src/app/features/tasks/select-task/select-task-minimal/select-task-minimal.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss b/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss index cc96ecfc5..6c7a8f1bd 100644 --- a/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss +++ b/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../common'; +@use '_globals' as *; :host { --this-height: 88px; diff --git a/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss b/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss index e3a56f3e2..95553956d 100644 --- a/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss +++ b/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss @@ -1,5 +1,5 @@ -@import '../../../../../common.scss'; -@import '../task-context-menu-touch-fix.scss'; +@use '_globals' as *; +@use '../task-context-menu-touch-fix.scss'; .key-i { opacity: 0.4; diff --git a/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss b/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss index a9a9ef1c7..1c74567d0 100644 --- a/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss +++ b/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss b/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss index c561bd4c2..816574ac6 100644 --- a/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss +++ b/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss @@ -1,5 +1,5 @@ -@import '../../../../common'; -@import '../task/task.component.mixins'; +@use '_globals' as *; +@use '../task/task.component.mixins' as *; :host { position: relative; diff --git a/src/app/features/tasks/task-list/task-list.component.scss b/src/app/features/tasks/task-list/task-list.component.scss index ef3f717a1..b3aea2da1 100644 --- a/src/app/features/tasks/task-list/task-list.component.scss +++ b/src/app/features/tasks/task-list/task-list.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/features/tasks/task/_task-base.scss b/src/app/features/tasks/task/_task-base.scss index aefb9bb21..2a262e727 100644 --- a/src/app/features/tasks/task/_task-base.scss +++ b/src/app/features/tasks/task/_task-base.scss @@ -1,3 +1,6 @@ +@use '_globals' as *; +@use 'task.component.mixins' as *; + // TASK BOX STYLES // --------------- // NOTE: needs to come first to be overwritten by :host.isCurrent diff --git a/src/app/features/tasks/task/_task-controls.scss b/src/app/features/tasks/task/_task-controls.scss index fd2c6e5d7..b0fdb2894 100644 --- a/src/app/features/tasks/task/_task-controls.scss +++ b/src/app/features/tasks/task/_task-controls.scss @@ -1,3 +1,6 @@ +@use '_globals' as *; +@use 'task.component.mixins' as *; + // CONTROLS // -------- .all-controls-wrapper { diff --git a/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss b/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss index 1ae2ef183..e36c42715 100644 --- a/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss +++ b/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss @@ -1,5 +1,5 @@ -@import '../../../../../common'; -@import '../task.component.mixins'; +@use '_globals' as *; +@use '../task.component.mixins' as *; :host { transform-origin: right center; diff --git a/src/app/features/tasks/task/task.component.mixins.scss b/src/app/features/tasks/task/task.component.mixins.scss index fb52608e1..f814dabf9 100644 --- a/src/app/features/tasks/task/task.component.mixins.scss +++ b/src/app/features/tasks/task/task.component.mixins.scss @@ -1,6 +1,6 @@ -// Import only to access the material design color variables -@import '../../../../common'; +@use '_globals' as *; +// Import only to access the material design color variables @mixin isDone($direct-parent-only-sel: false) { @if $direct-parent-only-sel { .inner-wrapper.isDone > #{$direct-parent-only-sel} > & { diff --git a/src/app/features/tasks/task/task.component.scss b/src/app/features/tasks/task/task.component.scss index 3b33e123e..dc1f72ff8 100644 --- a/src/app/features/tasks/task/task.component.scss +++ b/src/app/features/tasks/task/task.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; -@import './task.component.mixins'; -@import './task-base'; -@import './task-controls'; +@use '_globals' as *; +@use './task.component.mixins' as *; +@use './task-base'; +@use './task-controls'; diff --git a/src/app/features/tracking-reminder/dialog-tracking-reminder/dialog-tracking-reminder.component.scss b/src/app/features/tracking-reminder/dialog-tracking-reminder/dialog-tracking-reminder.component.scss index 8135f1da0..b7f96feee 100644 --- a/src/app/features/tracking-reminder/dialog-tracking-reminder/dialog-tracking-reminder.component.scss +++ b/src/app/features/tracking-reminder/dialog-tracking-reminder/dialog-tracking-reminder.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; .dialog-content { // 600px diff --git a/src/app/features/work-view/backlog/backlog.component.scss b/src/app/features/work-view/backlog/backlog.component.scss index 442102001..fbae3065b 100644 --- a/src/app/features/work-view/backlog/backlog.component.scss +++ b/src/app/features/work-view/backlog/backlog.component.scss @@ -1,4 +1,4 @@ -@import './../../../../_common'; +@use '_globals' as *; :host { position: absolute; diff --git a/src/app/features/work-view/work-view.component.scss b/src/app/features/work-view/work-view.component.scss index c2435ee9a..4e714068b 100644 --- a/src/app/features/work-view/work-view.component.scss +++ b/src/app/features/work-view/work-view.component.scss @@ -1,4 +1,4 @@ -@import './../../../_common'; +@use '_globals' as *; :host { overflow: hidden !important; diff --git a/src/app/features/worklog/worklog-export/worklog-export.component.scss b/src/app/features/worklog/worklog-export/worklog-export.component.scss index 3120b1df8..561ffd5a9 100644 --- a/src/app/features/worklog/worklog-export/worklog-export.component.scss +++ b/src/app/features/worklog/worklog-export/worklog-export.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host-context([dir='rtl']) { direction: rtl; diff --git a/src/app/features/worklog/worklog-week/worklog-week.component.scss b/src/app/features/worklog/worklog-week/worklog-week.component.scss index 04d300e63..baf0e9245 100644 --- a/src/app/features/worklog/worklog-week/worklog-week.component.scss +++ b/src/app/features/worklog/worklog-week/worklog-week.component.scss @@ -1,3 +1,5 @@ +@use '_globals' as *; + :host { display: block; } diff --git a/src/app/features/worklog/worklog.component.scss b/src/app/features/worklog/worklog.component.scss index bd887b268..a4d571ef2 100644 --- a/src/app/features/worklog/worklog.component.scss +++ b/src/app/features/worklog/worklog.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { text-align: center; diff --git a/src/app/imex/sync/dialog-sync-initial-cfg/dialog-sync-initial-cfg.component.scss b/src/app/imex/sync/dialog-sync-initial-cfg/dialog-sync-initial-cfg.component.scss index 050926f04..95a0638f1 100644 --- a/src/app/imex/sync/dialog-sync-initial-cfg/dialog-sync-initial-cfg.component.scss +++ b/src/app/imex/sync/dialog-sync-initial-cfg/dialog-sync-initial-cfg.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; :host { form { diff --git a/src/app/pages/config-page/config-page.component.scss b/src/app/pages/config-page/config-page.component.scss index ae3c32138..6b8d7702a 100644 --- a/src/app/pages/config-page/config-page.component.scss +++ b/src/app/pages/config-page/config-page.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; .page-settings { text-align: start; diff --git a/src/app/pages/daily-summary/daily-summary.component.scss b/src/app/pages/daily-summary/daily-summary.component.scss index c20cbe614..6781a5104 100644 --- a/src/app/pages/daily-summary/daily-summary.component.scss +++ b/src/app/pages/daily-summary/daily-summary.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; $summary-point-inner-margin: var(--s); diff --git a/src/app/pages/scheduled-list-page/scheduled-list-page.component.scss b/src/app/pages/scheduled-list-page/scheduled-list-page.component.scss index 05a2437b3..19f8eafda 100644 --- a/src/app/pages/scheduled-list-page/scheduled-list-page.component.scss +++ b/src/app/pages/scheduled-list-page/scheduled-list-page.component.scss @@ -1,5 +1,5 @@ -@import './../../../_common'; -@import './../../features/tasks/task/task.component.mixins'; +@use '_globals' as *; +@use '../../features/tasks/task/task.component.mixins' as *; :host ::ng-deep mat-card-content { padding: 0 !important; diff --git a/src/app/plugins/ui/plugin-index/plugin-index.component.scss b/src/app/plugins/ui/plugin-index/plugin-index.component.scss index 8ea67aee4..46aa2a848 100644 --- a/src/app/plugins/ui/plugin-index/plugin-index.component.scss +++ b/src/app/plugins/ui/plugin-index/plugin-index.component.scss @@ -1,5 +1,6 @@ -@import '../../../../common'; -@import '../../../../styles/components/scrollbars'; +@use '_globals' as *; + +@use '../../../../styles/components/scrollbars'; .plugin-index-container { height: 100%; @@ -82,7 +83,7 @@ height: 100%; border: none; background: transparent; - @include _scrollBarStyles; + @include scrollbars.scrollBarStyles; &.hidden { visibility: hidden; diff --git a/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss b/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss index b933977d4..81b0b17c7 100644 --- a/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss +++ b/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; $z-this-content: calc(var(--z-side-panel-task-and-notes) + 1); $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1); @@ -31,10 +31,11 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1); min-width: 200px; // NOTE: prevents overlapping with nav when open max-width: 700px; - background: transparent; + background: var(--selected-task-bg-color); //border: 1px solid; //border-right: 0; //border-bottom: 0; + //border-color: var(--extra-border-color); //box-shadow: 0px 8px 10px -5px var(--c-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important; @include mq(sm, max) { @@ -46,9 +47,6 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1); max-width: 100%; } - background: var(--selected-task-bg-color); - //border-color: var(--extra-border-color); - :host.isOver & { position: fixed; width: 80vw !important; @@ -100,6 +98,9 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1); box-shadow: var(--whiteframe-shadow-2dp); border-radius: 50%; border: 1px solid; + color: var(--text-color); + background: var(--bg-lightest); + border-color: var(--extra-border-color); @include mq(xs) { top: 0; @@ -115,10 +116,6 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1); outline: none; } - color: var(--text-color); - background: var(--bg-lightest); - border-color: var(--extra-border-color); - @include mq(xs) { background: var(--bg-slightly-lighter); } diff --git a/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss b/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss index 2ef323e21..520747473 100644 --- a/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss +++ b/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss @@ -1,3 +1,5 @@ +@use '_globals' as *; + $z-this-content: calc(var(--z-side-panel-task-and-notes) + 1); $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1); $z-this-side: calc(#{$z-this-content} + 2); diff --git a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss index 0bf2f6a6f..b1ee89e32 100644 --- a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss +++ b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { position: fixed; diff --git a/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss b/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss index f561db222..c15d3600c 100644 --- a/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss +++ b/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss @@ -1,4 +1,4 @@ -@import '../../../../common'; +@use '_globals' as *; $this-size: 130px; $this-handle-size: 20px; diff --git a/src/app/ui/inline-input/inline-input.component.scss b/src/app/ui/inline-input/inline-input.component.scss index 77d4209e2..3cddb437f 100644 --- a/src/app/ui/inline-input/inline-input.component.scss +++ b/src/app/ui/inline-input/inline-input.component.scss @@ -1,4 +1,4 @@ -@import '../../../_common'; +@use '_globals' as *; :host { display: inline-block; diff --git a/src/app/ui/inline-markdown/inline-markdown.component.scss b/src/app/ui/inline-markdown/inline-markdown.component.scss index a226b4497..76307ea7b 100644 --- a/src/app/ui/inline-markdown/inline-markdown.component.scss +++ b/src/app/ui/inline-markdown/inline-markdown.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; :host { display: block; diff --git a/src/app/ui/task-title/task-title.component.scss b/src/app/ui/task-title/task-title.component.scss index e72198915..96dcefac8 100644 --- a/src/app/ui/task-title/task-title.component.scss +++ b/src/app/ui/task-title/task-title.component.scss @@ -1,4 +1,4 @@ -@import '../../../common'; +@use '_globals' as *; //@import '../../../tasks/task/task.component.mixins'; // TODO rename to task title component diff --git a/src/styles.scss b/src/styles.scss index 55978ba0e..2538de77f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,16 +1,18 @@ +@use 'sass:meta'; +@use 'styles/font/material-icons'; + @use 'sass:math'; @import '../node_modules/@fontsource/roboto/400.css'; @import '../node_modules/@fontsource/roboto/400-italic.css'; @import '../node_modules/@fontsource/roboto/700.css'; @import '../node_modules/@fontsource/roboto/300.css'; -@import './styles/font/material-icons'; -@import './styles/_css-variables'; -@import './styles/themes'; -@import './styles/page'; -@import './styles/util'; -@import './styles/components/components'; +@include meta.load-css('styles/_css-variables'); +@include meta.load-css('styles/themes'); +@include meta.load-css('styles/page'); +@include meta.load-css('styles/util'); +@include meta.load-css('styles/components/components'); * { //box-shadow: none !important; diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss new file mode 100644 index 000000000..d8cf90e31 --- /dev/null +++ b/src/styles/_globals.scss @@ -0,0 +1,8 @@ +// Global mixins and functions that are available in all component styles +// This file forwards all mixins without namespace so they can be used directly + +// Forward functions +@forward 'functions/_ddivide'; + +// Forward all mixins +@forward 'mixins/_mixins'; diff --git a/src/styles/components/_components.scss b/src/styles/components/_components.scss index 0a8f8bcd4..06eeeaef6 100644 --- a/src/styles/components/_components.scss +++ b/src/styles/components/_components.scss @@ -1,19 +1,19 @@ -@import './emoji'; -@import './scrollbars'; -@import './table'; -@import './markdown'; -@import './fab-wrapper'; -@import './backdrop'; -@import './formly-rows'; -@import './native-datepicker'; -@import './issue-table'; -@import './enlarge-img'; -@import './overwrite-material'; -@import './global-error-alert'; -@import './wrap-buttons'; -@import './shepherd'; -@import './multi-btn-wrapper'; -@import './planner-shared'; -@import './mentions'; +@use './emoji'; +@use './scrollbars'; +@use './table'; +@use './markdown'; +@use './fab-wrapper'; +@use './backdrop'; +@use './formly-rows'; +@use './native-datepicker'; +@use './issue-table'; +@use './enlarge-img'; +@use './overwrite-material'; +@use './global-error-alert'; +@use './wrap-buttons'; +@use './shepherd'; +@use './multi-btn-wrapper'; +@use './planner-shared'; +@use './mentions'; //@import '../../app/ui/custom-datetime-picker/sass/picker'; diff --git a/src/styles/components/_overwrite-material.scss b/src/styles/components/_overwrite-material.scss index 85f9caf7a..3cc6fc57d 100644 --- a/src/styles/components/_overwrite-material.scss +++ b/src/styles/components/_overwrite-material.scss @@ -1,3 +1,5 @@ +@use '../mixins/_media-queries'; + :root { //--mat-fab-small-container-elevation-shadow: var(--whiteframe-shadow-4dp); --mat-dialog-container-small-max-width: 94vw; @@ -34,7 +36,7 @@ } .cdk-overlay-pane.mat-mdc-dialog-panel { - @include mq(xs, max) { + @include media-queries.mq(xs, max) { max-width: 96vw !important; } } @@ -52,7 +54,7 @@ body .mat-mdc-dialog-surface { } .mat-mdc-dialog-panel { - @include mq(xs) { + @include media-queries.mq(xs) { //--mat-dialog-container-min-width: 350px; } } @@ -77,7 +79,7 @@ body .mat-mdc-dialog-surface { width: 100% !important; max-width: none !important; - @include mq(xs) { + @include media-queries.mq(xs) { margin: var(--s2); max-height: 95vh !important; } diff --git a/src/styles/components/fab-wrapper.scss b/src/styles/components/fab-wrapper.scss index e1101adac..0760732b4 100644 --- a/src/styles/components/fab-wrapper.scss +++ b/src/styles/components/fab-wrapper.scss @@ -1,10 +1,12 @@ +@use '../mixins/_media-queries'; + .fab-wrapper { position: fixed; right: 32px; bottom: 32px; z-index: 333; - @include mq(xs, max) { + @include media-queries.mq(xs, max) { right: 50%; transform: translateX(50%); bottom: 16px; diff --git a/src/styles/components/formly-rows.scss b/src/styles/components/formly-rows.scss index 0c89ec403..a2e7d76b7 100644 --- a/src/styles/components/formly-rows.scss +++ b/src/styles/components/formly-rows.scss @@ -1,4 +1,4 @@ -@import '../../common'; +@use '_globals' as *; .formly-row { @include mq(xs) { diff --git a/src/styles/components/markdown.scss b/src/styles/components/markdown.scss index 4c5fe5555..62cbca015 100644 --- a/src/styles/components/markdown.scss +++ b/src/styles/components/markdown.scss @@ -1,6 +1,8 @@ +@use '../mixins/_scroll'; + .markdown-preview, .markdown { - @include scrollY; + @include scroll.scrollY; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; diff --git a/src/styles/components/multi-btn-wrapper.scss b/src/styles/components/multi-btn-wrapper.scss index 9d30e7b77..a437e631a 100644 --- a/src/styles/components/multi-btn-wrapper.scss +++ b/src/styles/components/multi-btn-wrapper.scss @@ -1,3 +1,5 @@ +@use '../mixins/_is-touch-device'; + .g-multi-btn-wrapper { display: flex; position: relative; @@ -36,7 +38,7 @@ height: 40px; } - @include mousePrimaryDevice(true) { + @include is-touch-device.mousePrimaryDevice(true) { opacity: 0; display: none; } @@ -45,7 +47,7 @@ &:focus, &:hover { button:nth-of-type(n + 2) { - @include mousePrimaryDevice(true) { + @include is-touch-device.mousePrimaryDevice(true) { opacity: 0.8; display: inline-flex; } diff --git a/src/styles/components/planner-shared.scss b/src/styles/components/planner-shared.scss index c5eb2546e..3d59741b2 100644 --- a/src/styles/components/planner-shared.scss +++ b/src/styles/components/planner-shared.scss @@ -1,4 +1,5 @@ -@import '../../common'; +@use '../../_common'; +@use '../mixins/_media-queries'; // to share between planner-task and planner-calendar-event .planner-time-remaining-shared { @@ -11,18 +12,18 @@ line-height: 1; margin-left: auto; font-size: var(--planner-font-size-mobile); + color: var(--text-color-muted); - @include mq(xs) { + @include media-queries.mq(xs) { font-size: var(--planner-font-size); } - color: var(--text-color-muted); mat-icon { vertical-align: middle; margin-top: -2px; height: 14px !important; - @include mq(xs) { + @include media-queries.mq(xs) { height: 16px !important; font-size: var(--planner-font-size); } diff --git a/src/styles/components/scrollbars.scss b/src/styles/components/scrollbars.scss index 3fc12bcc8..992cfcf7d 100644 --- a/src/styles/components/scrollbars.scss +++ b/src/styles/components/scrollbars.scss @@ -1,6 +1,6 @@ -@import '../mixins/media-queries'; +@use '../mixins/_media-queries'; -@mixin _scrollBarStyles() { +@mixin scrollBarStyles() { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: 4px; @@ -27,14 +27,14 @@ } } -@include mq(xs) { +@include media-queries.mq(xs) { .isNoMac { - @include _scrollBarStyles; + @include scrollBarStyles; } } -@include mq(xs, max) { +@include media-queries.mq(xs, max) { .isNoTouchOnly { - @include _scrollBarStyles; + @include scrollBarStyles; } } diff --git a/src/styles/components/shepherd.scss b/src/styles/components/shepherd.scss index 0b29ed617..dd5cdf3d7 100644 --- a/src/styles/components/shepherd.scss +++ b/src/styles/components/shepherd.scss @@ -1,3 +1,5 @@ +@use '../mixins/_theming'; + //@import "shepherd.js/dist/css/shepherd.css"; .shepherd-modal-overlay-container { @@ -45,7 +47,7 @@ line-height: 2em; position: relative; - @include darkTheme(true) { + @include theming.darkTheme(true) { background: var(--dark8) !important; } diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss index efac39f35..666ff67b1 100644 --- a/src/styles/components/table.scss +++ b/src/styles/components/table.scss @@ -1,3 +1,5 @@ +@use '../mixins/_media-queries'; + table { th, td { @@ -6,7 +8,7 @@ table { overflow-y: visible !important; } - @include mq(xs) { + @include media-queries.mq(xs) { th, td { padding: 0 var(--s); diff --git a/src/styles/extends/_extends.scss b/src/styles/extends/_extends.scss index 07c327e52..a1ab590c3 100644 --- a/src/styles/extends/_extends.scss +++ b/src/styles/extends/_extends.scss @@ -1,2 +1,2 @@ -@import 'clearfix'; -@import 'list-reset'; +@use './clearfix'; +@use './list-reset'; diff --git a/src/styles/font/material-icons.scss b/src/styles/font/material-icons.scss index dc9594754..b00345cfc 100644 --- a/src/styles/font/material-icons.scss +++ b/src/styles/font/material-icons.scss @@ -1,4 +1,4 @@ -@import '../mixins/material-icon'; +@use '../mixins/material-icon'; // Download from: // https://github.com/google/material-design-icons/tree/master/font @@ -14,5 +14,5 @@ } .material-icons { - @include materialIconBase(); + @include material-icon.materialIconBase(); } diff --git a/src/styles/mixins/_inline-edit-elevation.scss b/src/styles/mixins/_inline-edit-elevation.scss index 76f0135ea..22ab64ff1 100644 --- a/src/styles/mixins/_inline-edit-elevation.scss +++ b/src/styles/mixins/_inline-edit-elevation.scss @@ -1,3 +1,5 @@ +@use './theming'; + //$shadow-edit-on-click-light: 0 0 4px 0 var(--c-dark-80), var(--whiteframe-shadow-14dp); //$shadow-edit-on-click-dark: 0 0 4px 0 var(--bg)-lightest, var(--whiteframe-shadow-14dp); $shadow-edit-on-click-dark: var(--whiteframe-shadow-15dp); @@ -11,7 +13,7 @@ $shadow-edit-on-click-light: var(--whiteframe-shadow-7dp); border: 1px solid var(--c-accent); //border: 1px solid var(--extra-border-color); - @include darkTheme() { + @include theming.darkTheme() { background: var(--dark24); } } diff --git a/src/styles/mixins/_mixins.scss b/src/styles/mixins/_mixins.scss index 263a97bc1..cd9dd1243 100644 --- a/src/styles/mixins/_mixins.scss +++ b/src/styles/mixins/_mixins.scss @@ -1,14 +1,17 @@ -@import 'theming'; -@import 'positioning'; -@import 'text'; -@import 'grab-cursor'; -@import 'note-style'; -@import 'hardware'; -@import 'pseudo'; -@import 'scroll'; -@import 'main-container'; -@import 'inline-edit-elevation'; -@import 'is-touch-device'; -@import 'responsive-ratio'; -@import 'material-icon'; -@import 'media-queries'; +// Forward all mixins so they can be used without namespace in components +@forward '_theming'; +@forward '_positioning'; +@forward '_text'; +@forward '_grab-cursor'; +@forward '_note-style'; +@forward '_hardware'; +@forward '_pseudo'; +@forward '_scroll'; +@forward '_main-container'; +@forward '_inline-edit-elevation'; +@forward '_is-touch-device'; +@forward '_responsive-ratio'; +@forward '_material-icon'; +@forward '_media-queries'; + +// Internal @use statements removed to avoid potential circular dependency issues diff --git a/src/styles/mixins/_responsive-ratio.scss b/src/styles/mixins/_responsive-ratio.scss index 6bb1453de..e4901652d 100644 --- a/src/styles/mixins/_responsive-ratio.scss +++ b/src/styles/mixins/_responsive-ratio.scss @@ -1,13 +1,14 @@ @use 'sass:math'; -@import '../functions/_ddivide'; +@use '../functions/_ddivide'; +@use './pseudo'; @mixin responsiveRatio($x, $y, $pseudo: false) { - $padding: (ddivide(math.div($y, $x))) * 100 + '%'; + $padding: (ddivide.ddivide(math.div($y, $x))) * 100 + '%'; @if $pseudo { &:before { - @include pseudo($pos: relative); + @include pseudo.pseudo($pos: relative); width: 100%; padding-top: $padding; } diff --git a/src/styles/mixins/_scroll.scss b/src/styles/mixins/_scroll.scss index 6940d0d2e..ba674dcd2 100644 --- a/src/styles/mixins/_scroll.scss +++ b/src/styles/mixins/_scroll.scss @@ -1,4 +1,4 @@ -@import 'media-queries'; +@use './media-queries'; @mixin scroll() { -webkit-overflow-scrolling: touch; diff --git a/src/styles/page.scss b/src/styles/page.scss index 09ae7c457..043ebfac5 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -1,5 +1,6 @@ @use 'angular-material-css-vars' as mat-css-vars; -@import '../_common'; +@use '../_common'; +@use './mixins/media-queries'; html, body, @@ -110,7 +111,7 @@ body { .page-wrapper { padding: var(--s) var(--s) calc(var(--s) * 9); - @include mq(xs) { + @include media-queries.mq(xs) { padding: var(--s) var(--s2) calc(var(--s) * 9); } } @@ -126,20 +127,20 @@ body { max-width: calc(var(--component-max-width) - 40px); margin: auto; - @include mq(xxs) { + @include media-queries.mq(xxs) { padding: 0 var(--s) var(--s7); } - @include mq(xs) { + @include media-queries.mq(xs) { padding: 0 calc(var(--s) * 1.5) var(--s7); } - @include mq(sm) { + @include media-queries.mq(sm) { padding: 0 var(--s3) var(--s7); max-width: var(--component-max-width); } - @include mq(lg) { + @include media-queries.mq(lg) { padding: 0 var(--s3) var(--s7); max-width: calc(var(--component-max-width) + 100px); } diff --git a/src/styles/util.scss b/src/styles/util.scss index 388c4f6a2..1bf1aa79d 100644 --- a/src/styles/util.scss +++ b/src/styles/util.scss @@ -1,4 +1,4 @@ -@import 'mixins/media-queries'; +@use './mixins/_media-queries'; .center-wrapper { display: flex; @@ -22,19 +22,19 @@ } .hide-xs { - @include mq(xs, max) { + @include media-queries.mq(xs, max) { display: none !important; } } .hide-xxs { - @include mq(xxs, max) { + @include media-queries.mq(xxs, max) { display: none !important; } } .hide-xxxs { - @include mq(xxxs, max) { + @include media-queries.mq(xxxs, max) { display: none !important; } } @@ -64,19 +64,19 @@ } .show-xs-only { - @include mq(xs) { + @include media-queries.mq(xs) { display: none !important; } } .hide-gt-sm { - @include mq(sm, max) { + @include media-queries.mq(sm, max) { display: none !important; } } .show-gt-sm-only { - @include mq(sm) { + @include media-queries.mq(sm) { display: none !important; } }