diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss index d5c4fe65c2..4710abd175 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss @@ -1,9 +1,9 @@ -@import 'styles/mat-selectors'; +@use '../mat-selectors.scss' as ms; adf-aspect-list-dialog { display: block; - #{$mat-expansion-panel-body} { + #{ms.$mat-expansion-panel-body} { margin-top: -2px; } } @@ -35,7 +35,7 @@ adf-aspect-list-dialog { padding-right: 4px; padding-top: 0; - #{$mat-dialog-content} { + #{ms.$mat-dialog-content} { padding: 0; } diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss index d9b73a5f18..2a58a68f0f 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss @@ -1,4 +1,5 @@ -@import 'styles/mat-selectors'; +@use '../mat-selectors.scss' as ms; + $dialog-title-height: 100px; $dialog-information-height: 44px; $dialog-buttons-height: 68px; @@ -49,7 +50,7 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei box-shadow: none; background: border-box; - #{$mat-checkbox-background} { + #{ms.$mat-checkbox-background} { height: 16px; width: 16px; } diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss index aeaf451fd9..152d1dd4e3 100644 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../mat-selectors.scss' as ms; $dropdown-horizontal-offset: 30px; @@ -98,6 +98,6 @@ $dropdown-horizontal-offset: 30px; } } -#{$cdk-overlay-pane}:has(>.adf-breadcrumb-dropdown-panel){ +#{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) { min-width: fit-content; } diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index 072bd026bf..759524a5ad 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors.scss' as ms; .adf-categories-management { .adf-category-name-field { @@ -20,7 +20,7 @@ box-sizing: content-box; } - #{$mat-form-field-error} { + #{ms.$mat-form-field-error} { padding-top: 5px; } } @@ -56,7 +56,7 @@ background-color: inherit; color: inherit; - &:not(#{$mat-list-item-disabled}):hover { + &:not(#{ms.$mat-list-item-disabled}):hover { cursor: pointer; background: var(--adf-theme-mat-grey-color-a200); } @@ -86,7 +86,7 @@ overflow-wrap: anywhere; } - #{$mat-list-item-disabled} #{$mat-list-item-primary-text} { + #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} { opacity: 1; } } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index 57c55e5b5c..ba1b8d0d88 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; $panel-properties-height: 56px !default; @@ -11,11 +11,11 @@ $panel-properties-height: 56px !default; margin: 12px; adf-card-view-textitem { - #{$mat-form-field-subscript-wrapper} { + #{ms.$mat-form-field-subscript-wrapper} { display: none; } - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { padding-bottom: 0; } } @@ -47,7 +47,7 @@ $panel-properties-height: 56px !default; } } - #{$mat-expansion-panel-body} { + #{ms.$mat-expansion-panel-body} { padding-top: 16px; input { @@ -64,7 +64,7 @@ $panel-properties-height: 56px !default; color: var(--adf-theme-foreground-text-color-054); } - #{$mat-chip} { + #{ms.$mat-chip} { &.metadata-properties-tag-chip { // TODO: bug open https://github.com/angular/components/issues/26584 /* stylelint-disable selector-class-pattern */ diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss index 42afc134af..cd4c0f8bde 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors.scss' as ms; /* stylelint-disable no-descending-specificity */ $content-node-selector-thumbnail-width: 35px !default; @@ -15,8 +15,8 @@ h2.adf-search-results-label { color: var(--adf-theme-foreground-text-color-087); } -#{$mdc-dialog} { - #{$mat-dialog-surface}:is(div) { +#{ms.$mdc-dialog} { + #{ms.$mat-dialog-surface}:is(div) { padding-bottom: 0; } } @@ -41,17 +41,17 @@ h2.adf-search-results-label { } &-content { - #{$mat-input-element} { + #{ms.$mat-input-element} { &:focus::placeholder { color: var(--theme-primary-color); } } - #{$mat-form-field-wrapper} { - #{$mat-form-field-flex} { + #{ms.$mat-form-field-wrapper} { + #{ms.$mat-form-field-flex} { align-items: center; - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { padding-bottom: 0; } } @@ -59,13 +59,13 @@ h2.adf-search-results-label { .adf-sites-dropdown-form-field { label { - &#{$mat-form-field-label} { + &#{ms.$mat-form-field-label} { top: 32px; } } } - #{$mat-form-field-subscript-wrapper} { + #{ms.$mat-form-field-subscript-wrapper} { height: 16px; } @@ -88,7 +88,7 @@ h2.adf-search-results-label { } } - #{$mat-form-field-subscript-wrapper} { + #{ms.$mat-form-field-subscript-wrapper} { display: none; } } diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss index b81189d1a5..9bc175a570 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../mat-selectors.scss' as ms; adf-content-node-selector { .adf-upload-dialog { @@ -42,7 +42,7 @@ adf-content-node-selector { } .adf-content-node-selector-dialog { - #{$mat-form-field} { + #{ms.$mat-form-field} { width: 100%; } @@ -50,7 +50,7 @@ adf-content-node-selector { color: var(--adf-theme-foreground-base-color-045); } - #{$mat-dialog-title} { + #{ms.$mat-dialog-title} { margin-bottom: 0; padding: 0; diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss index 2bc22d50bb..a6029ef7b7 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss @@ -1,8 +1,8 @@ -@import 'styles/mat-selectors'; +@use '../mat-selectors.scss' as ms; .adf-share-link-dialog { .adf-share-link { - #{$mat-form-field-flex} { + #{ms.$mat-form-field-flex} { height: 48px; } @@ -35,7 +35,7 @@ &__form { padding-top: 8px; - #{$mat-form-field-infix}:has(.adf-share-link__input) { + #{ms.$mat-form-field-infix}:has(.adf-share-link__input) { border-top: 0.9375em solid transparent; border-bottom: 0.9375em solid transparent; height: 16px; diff --git a/lib/content-services/src/lib/dialogs/folder/folder.dialog.scss b/lib/content-services/src/lib/dialogs/folder/folder.dialog.scss index f8442b37b7..eb48e71d42 100644 --- a/lib/content-services/src/lib/dialogs/folder/folder.dialog.scss +++ b/lib/content-services/src/lib/dialogs/folder/folder.dialog.scss @@ -1,21 +1,21 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors.scss' as ms; .adf-folder-dialog { .adf-folder-dialog-content { padding: 0; overflow: unset; - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { padding-bottom: 3.5px; } - #{$mat-form-field-hide-placeholder} { - #{$mat-floating-label} { + #{ms.$mat-form-field-hide-placeholder} { + #{ms.$mat-floating-label} { padding-top: 20px; } } - #{$mat-form-field-hint-wrapper} { + #{ms.$mat-form-field-hint-wrapper} { padding-left: 0; margin-left: -2px; color: var(--adf-theme-foreground-secondary-text-color); diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.scss b/lib/content-services/src/lib/dialogs/library/library.dialog.scss index 882d827bbf..807a1bc5fa 100644 --- a/lib/content-services/src/lib/dialogs/library/library.dialog.scss +++ b/lib/content-services/src/lib/dialogs/library/library.dialog.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors.scss' as ms; .adf-library-dialog { .adf-library-dialog-content { @@ -28,34 +28,34 @@ padding-top: 4.5px; } - #{$mat-floating-label} { + #{ms.$mat-floating-label} { -webkit-font-smoothing: subpixel-antialiased; } - &#{$mat-form-field-hide-placeholder} { - #{$mat-floating-label} { + &#{ms.$mat-form-field-hide-placeholder} { + #{ms.$mat-floating-label} { padding-top: 20px; } } &-description { - &#{$mat-form-field-hide-placeholder} { - #{$mat-floating-label} { + &#{ms.$mat-form-field-hide-placeholder} { + #{ms.$mat-floating-label} { padding-top: 20px; } } } - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { padding-bottom: 3.5px; } - #{$mat-form-field-error-wrapper} { + #{ms.$mat-form-field-error-wrapper} { margin-left: -2px; font-size: 10.5px; -webkit-font-smoothing: subpixel-antialiased; - #{$mat-form-field-error} { + #{ms.$mat-form-field-error} { height: 13.125px; } } diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss index a648d37876..0179880bf6 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.scss +++ b/lib/content-services/src/lib/document-list/components/document-list.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../flex' as flex; .adf-document-list { min-height: 0; @@ -143,7 +143,7 @@ word-break: break-all; white-space: pre-line; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { font-size: 48px; } } @@ -165,12 +165,12 @@ object-fit: contain; margin-top: 17px; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { width: 250px; } } - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { &-drag-drop, &-any-files-here-to-add { display: none; diff --git a/lib/content-services/src/lib/flex.scss b/lib/content-services/src/lib/flex.scss new file mode 100644 index 0000000000..c11802eec2 --- /dev/null +++ b/lib/content-services/src/lib/flex.scss @@ -0,0 +1,81 @@ +@charset "UTF-8"; +/* stylelint-disable */ + +// Non-overlapping Material Design breakpoints +// @type map +$breakpoints: ( + xs: ( + begin: 0, + end: 599.9px + ), + sm: ( + begin: 600px, + end: 959.9px + ), + md: ( + begin: 960px, + end: 1279.9px + ), + lg: ( + begin: 1280px, + end: 1919.9px + ), + xl: ( + begin: 1920px, + end: 4999.99px + ) +) !default; + +// Overlapping breakpoints that are greater than defined +// Material Design breakpoints +// @type map +$overlapping-gt: ( + gt-xs: 600px, + gt-sm: 960px, + gt-md: 1280px, + gt-lg: 1920px +) !default; + +// Overlapping breakpoints that are less than defined +// Material Design breakpoints +// @type map +$overlapping-lt: ( + lt-sm: 599.9px, + lt-md: 959.9px, + lt-lg: 1279.9px, + lt-xl: 1919.9px +) !default; + +// Media Query Mixin, takes a breakpoint and returns a wrapping +// media query statement +// e.g. +// +// @include layout-bp(xs) { +// background-color: red; +// } +// +// becomes +// +// @media (min-width: 0px) and (max-width: 599px) { +// background-color: red; +// } +@mixin layout-bp($bp) { + @if map-has-key($breakpoints, $bp) { + $min: map-get(map-get($breakpoints, $bp), begin); + $max: map-get(map-get($breakpoints, $bp), end); + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if map-has-key($overlapping-gt, $bp) { + $min: map-get($overlapping-gt, $bp); + @media (min-width: $min) { + @content; + } + } @else if map-has-key($overlapping-lt, $bp) { + $max: map-get($overlapping-lt, $bp); + @media (max-width: $max) { + @content; + } + } +} +/* stylelint-enable */ diff --git a/lib/content-services/src/lib/mat-selectors.scss b/lib/content-services/src/lib/mat-selectors.scss new file mode 100644 index 0000000000..5d1e8a9626 --- /dev/null +++ b/lib/content-services/src/lib/mat-selectors.scss @@ -0,0 +1,190 @@ +/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */ + +$material-icons: '.material-icons'; +$mat-icon: '.mat-icon'; +$mat-icon-button: '.mat-mdc-icon-button'; +$mat-icon-button-hover: '.mdc-icon-button__ripple'; +$mat-accent: '.mat-accent'; +$mat-focused: '.mat-focused'; +$mat-line: '.mat-line'; +$mat-tab-label: '.mat-mdc-tab'; +$mat-tab-label-active: '.mdc-tab--active'; +$mat-tab-label-content: '.mdc-tab__content'; +$mat-tab-label-container: '.mat-mdc-tab-label-container'; +$mat-expansion-panel-body: '.mat-expansion-panel-body'; +$mat-tab-label-text: '.mdc-tab__text-label'; +$mat-tab-list: '.mat-mdc-tab-list'; +$mat-tab-body: '.mat-mdc-tab-body'; +$mat-tab-body-wrapper: '.mat-mdc-tab-body-wrapper'; +$mat-tab-body-content: '.mat-mdc-tab-body-content'; +$mat-tab-header: '.mat-mdc-tab-header'; +$mat-tab-labels: '.mat-mdc-tab-labels'; +$mat-tab-ink-bar: '.mdc-tab-indicator'; +$mat-chip: '.mat-mdc-chip'; +$mat-chip-list: '.mat-mdc-chip-list'; +$mat-chip-list-wrapper: '.mat-chip-list-wrapper'; +$mat-checkbox: '.mat-mdc-checkbox'; +$mat-checkbox-box: '.mdc-checkbox'; +$mat-checkbox-frame: '.mdc-checkbox__checkmark'; +$mat-checkbox-label: '.mdc-label'; +$mat-checkbox-checked: '.mat-mdc-checkbox-checked'; +$mat-button: '.mat-mdc-button'; +$mat-button-label: '.mdc-button__label'; +$mat-button-label-text: '.mdc-button__label'; +$mat-radio-checked: '.mat-mdc-radio-checked'; +$mat-radio-label: '.mdc-label'; +$mat-progress-bar: '.mat-mdc-progress-bar'; +$mat-progress-spinner: '.mat-mdc-progress-spinner'; +$mat-form-field: '.mat-mdc-form-field'; +$mat-form-field-flex: '.mat-mdc-form-field-flex'; +$mat-form-field-outline: '.mat-mdc-form-field-outline'; +$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper'; +$mat-line-ripple: '.mdc-line-ripple'; +$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper'; +$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix'; +$mat-form-field-suffix: '.mat-mdc-form-field-text-suffix'; +$mat-form-text-field-infix: '.mat-mdc-form-text-infix'; +$mat-form-field-label: '.mat-mdc-floating-label'; +$mat-form-field-invalid: '.mat-form-field-invalid'; +$mat-form-field-appearance-outline: '.mat-form-field-appearance-outline'; +$mat-text-field-outlined: '.mdc-text-field--outlined'; +$mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick'; +$mat-text-field-focused: '.mdc-text-field--focused'; +$mat-dialog-actions: '.mat-mdc-dialog-actions'; +$mat-dialog-container: '.mdc-dialog__container'; +$mat-dialog-content: '.mat-mdc-dialog-content'; +$mat-button-toggle: '.mat-button-toggle'; +$mat-button-toggle-checked: '.mat-button-toggle-checked'; +$mat-button-touch-target: '.mat-mdc-button-touch-target'; +$mat-input-element: '.mat-mdc-input-element'; +$mat-card: '.mat-mdc-card'; +$mat-card-actions: '.mat-mdc-card-actions'; +$mat-card-header-text: '.mat-mdc-card-header-text'; +$mat-card-title: '.mat-mdc-card-title'; +$mat-card-content: '.mat-mdc-card-content'; +$mat-mini-fab: '.mat-mdc-mini-fab'; +$mat-list-item-primary-text: '.mdc-list-item__primary-text'; +$mat-list-item-end: '.mdc-list-item__end'; +$mat-table: '.mat-mdc-table'; +$mat-header-row: '.mat-mdc-header-row'; +$mat-row: '.mat-mdc-row'; +$mat-select: '.mat-mdc-select'; +$mat-select-value: '.mat-select-value'; +$mat-select-value-text: '.mat-mdc-select-value-text'; +$mat-select-panel: '.mat-mdc-select-panel'; +$mat-grid-tile: '.mat-grid-tile'; +$mat-sidenav-content: '.mat-sidenav-content'; +$mat-drawer-transition: '.mat-drawer-transition'; +$mat-drawer-content: '.mat-drawer-content'; +$mat-subheader: '.mat-mdc-subheader'; +$mat-menu-panel: '.mat-mdc-menu-panel'; +$mat-menu-content: '.mat-mdc-menu-content'; +$mat-expansion-panel: '.mat-expansion-panel'; +$mat-expansion-panel-header: '.mat-expansion-panel-header'; +$mat-expanded: '.mat-expanded'; +$mat-calendar: '.mat-calendar'; +$mat-calendar-header: '.mat-calendar-header'; +$mat-calendar-content: '.mat-calendar-content'; +$mat-calendar-table-header: '.mat-calendar-table-header'; +$mat-calendar-body-disabled: '.mat-calendar-body-disabled'; +$mat-toolbar: '.mat-toolbar'; +$mat-slide-toggle: '.mat-mdc-slide-toggle'; +$mat-list-item-content: '.mdc-list-item__content'; +$mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content'; +$mat-text-field-no-label: '.mdc-text-field--no-label'; +$mat-form-field-infix: '.mat-mdc-form-field-infix'; +$mat-form-field-hide-placeholder: '.mat-form-field-hide-placeholder'; +$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper'; +$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper'; +$mat-form-field-error: '.mat-mdc-form-field-error'; +$mat-checkbox-background: '.mdc-checkbox__background'; +$mat-dialog-content: '.mdc-dialog__content'; +$mat-floating-label: '.mdc-floating-label'; +$mat-floating-label-above: '.mdc-floating-label--float-above'; +$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper'; +$mat-dialog-title: '.mdc-dialog__title'; +$mat-expansion-panel-body: '.mat-expansion-panel-body'; +$mat-dialog-surface: '.mat-mdc-dialog-surface'; +$mdc-dialog: '.mdc-dialog'; +$mat-text-filed-input: '.mdc-text-field__input'; +$mat-floating-label-float-above: '.mdc-floating-label--float-above'; +$mat-floating-label-required: '.mdc-floating-label--required'; +$mat-evolution-chip: '.mdc-evolution-chip'; +$mat-standard-chip: '.mat-mdc-standard-chip'; +$mat-evolution-chip-action: '.mdc-evolution-chip__action'; +$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label'; +$mat-notched-outline: '.mdc-notched-outline'; +$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic'; +$mat-select-trigger: '.mat-mdc-select-trigger'; +$mat-select-arrow: '.mat-mdc-select-arrow'; +$mat-notched-outline-leading: '.mdc-notched-outline__leading'; +$mat-notched-outline-trailing: '.mdc-notched-outline__trailing'; +$mat-notched-outline-notch: '.mdc-notched-outline__notch'; +$mat-evolution-chip-set: '.mdc-evolution-chip-set'; +$mat-mdc-button: '.mdc-button'; +$mat-outlined-button: '.mat-mdc-outlined-button'; +$mat-button-base: '.mat-mdc-button-base'; +$mat-button-touch-target: '.mat-mdc-button-touch-target'; +$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label'; +$cdk-overlay-pane: '.cdk-overlay-pane'; +$cdk-drag-preview: '.cdk-drag-preview'; +$mat-snackbar: '.mdc-snackbar'; +$mat-snack-bar-container: '.mat-mdc-snack-bar-container'; +$mat-snackbar-label: '.mdc-snackbar__label'; +$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog'; +$mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline'; +$mat-autocomplete-panel: '.mat-mdc-autocomplete-panel'; +$mat-menu-surface: '.mdc-menu-surface'; +$mat-text-field-filled: '.mdc-text-field--filled'; +$mat-text-field-disabled: '.mdc-text-field--disabled'; +$mat-form-field-focus-overlay: '.mat-mdc-form-field-focus-overlay'; +$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper'; +$mat-text-field-textarea: '.mdc-text-field--textarea'; +$mat-list-item-disabled: '.mdc-list-item--disabled'; +$mat-chip-focus-overlay: '.mat-mdc-chip-focus-overlay'; +$mat-primary: '.mat-primary'; +$mat-checkbox-touch-target: '.mat-mdc-checkbox-touch-target'; +$mat-switch: '.mdc-switch'; +$mat-switch-ripple: '.mdc-switch-ripple'; +$mat-switch-selected: '.mdc-switch--selected'; +$mat-switch-checked: '.mdc-switch--checked'; +$mat-switch-handle-track: '.mdc-switch__handle-track'; +$mat-switch-handle: '.mdc-switch__handle'; +$mat-switch-track: '.mdc-switch__track'; +$mat-switch-icons: '.mdc-switch__icons'; +$mat-switch-shadow: '.mdc-switch__shadow'; +$mat-switch-unselected: '.mdc-switch--unselected'; +$mat-chip-action: '.mat-mdc-chip-action'; +$mat-chip-graphic: '.mat-mdc-chip-graphic'; +$mat-data-table-row: '.mdc-data-table__row'; +$mat-data-table-cell: '.mdc-data-table__cell'; +$mat-data-table-header-cell: '.mdc-data-table__header-cell'; +$mat-toolbar-single-row: '.mat-toolbar-single-row'; +$mat-toolbar-multiple-row: '.mat-toolbar-multiple-row'; +$mat-unthemed: '.mat-unthemed'; +$mat-calendar-period-button: '.mat-calendar-period-button'; +$mat-radio-button: '.mat-mdc-radio-button'; +$mat-radio: '.mdc-radio'; +$mat-tab-ripple: '.mdc-tab__ripple'; +$mat-tab-disabled: '.mat-mdc-tab-disabled'; +$mat-tab-group: '.mat-mdc-tab-group'; +$mat-tab-group-stretch: '.mat-mdc-tab-group-stretch-tabs'; +$mat-list-item: '.mdc-list-item'; +$mat-menu-item: '.mat-mdc-menu-item'; +$mat-icon-no-color: '.mat-icon-no-color'; +$mat-submenu-icon: '.mat-menu-submenu-icon'; +$mat-mdc-submenu-icon: '.mat-mdc-menu-submenu-icon'; +$mdc-form-field: '.mdc-form-field'; +$mat-divider-horizontal: '.mat-divider-horizontal'; +$mat-accordion: '.mat-accordion'; +$mdc-list: '.mdc-list'; +$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix'; +$mat-text-field: '.mdc-text-field'; +$mat-form-field-disabled: '.mat-form-field-disabled'; +$mat-select-disabled: '.mat-mdc-select-disabled'; +$mat-select-value: '.mat-mdc-select-value'; +$mat-checkbox-native-control: '.mdc-checkbox__native-control'; +$mat-checkbox-selected: '.mdc-checkbox--selected'; +$mat-checkbox-ripple: '.mat-mdc-checkbox-ripple'; +$mat-list-base: '.mat-mdc-list-base'; +$mat-card-header: '.mat-mdc-card-header'; diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss index 04be59fb8d..0b2962f3e6 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss @@ -1,7 +1,7 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; -#{$mdc-dialog} { - #{$mat-dialog-surface}:is(div) { +#{ms.$mdc-dialog} { + #{ms.$mat-dialog-surface}:is(div) { padding-bottom: 0; } } @@ -31,11 +31,11 @@ width: 100%; justify-content: unset; - #{$mat-button-label} { + #{ms.$mat-button-label} { padding-right: 0; } - #{$mat-icon} { + #{ms.$mat-icon} { font-size: 24px; width: 24px; height: 24px; diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss index 6c8a7466ba..3bbc0d993b 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; $search-result-height: calc(100% - 60px); @@ -9,7 +9,7 @@ $search-result-height: calc(100% - 60px); overflow: auto; border: 2px solid var(--adf-theme-foreground-text-color-007); - #{$mat-list-item-end} { + #{ms.$mat-list-item-end} { display: none; } @@ -54,18 +54,18 @@ $search-result-height: calc(100% - 60px); padding-bottom: 0; padding-top: 12px; - #{$mat-form-field-wrapper} { - #{$mat-form-field-flex} { + #{ms.$mat-form-field-wrapper} { + #{ms.$mat-form-field-flex} { align-items: center; - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { padding-top: 0; padding-bottom: 0; } } } - #{$mat-form-field-subscript-wrapper} { + #{ms.$mat-form-field-subscript-wrapper} { height: 16px; } diff --git a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss index 3323168598..89ec90a351 100644 --- a/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; .adf { &-permission-card { @@ -88,7 +88,7 @@ height: calc(100% - 63px); } - &-local-permission-container#{$mat-card-content} { + &-local-permission-container#{ms.$mat-card-content} { overflow: hidden; flex: 1 1 auto; padding: 0; diff --git a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss index a0da180108..9112f7aad2 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss @@ -1,11 +1,11 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; -.adf-role-selector-field#{$mat-form-field} { +.adf-role-selector-field#{ms.$mat-form-field} { width: 100%; max-width: 200px; height: 40px; - #{$mat-form-field-infix}:not(:disabled) { + #{ms.$mat-form-field-infix}:not(:disabled) { padding-top: 8px; } } diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss index 2c47984d46..7dee4a5994 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; .adf-search-check-list > div { display: flex; @@ -21,7 +21,7 @@ white-space: nowrap; } - #{$mat-checkbox-box} { + #{ms.$mat-checkbox-box} { margin-left: 4px; margin-top: 5px; margin-bottom: 4px; diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss index 825f4873e1..ca728fc596 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss @@ -1,21 +1,21 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; adf-search-chip-autocomplete-input { .adf-chip-list { width: 100%; } - .adf-chip-list:has(#{$mat-notched-outline}) { + .adf-chip-list:has(#{ms.$mat-notched-outline}) { margin-top: 4px; } - #{$mat-form-text-field-infix} { + #{ms.$mat-form-text-field-infix} { border: none; } - .adf-chip-list#{$mat-form-field} { - #{$mat-form-field-infix} { + .adf-chip-list#{ms.$mat-form-field} { + #{ms.$mat-form-field-infix} { padding-top: 14px; padding-bottom: 14px; min-height: unset; @@ -35,8 +35,8 @@ adf-search-chip-autocomplete-input { padding: 4px 0; } - #{$mat-evolution-chip-set} { - #{$mat-evolution-chip} { + #{ms.$mat-evolution-chip-set} { + #{ms.$mat-evolution-chip} { margin-left: 0; margin-right: 4px; } diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss index 6fb81dce03..cdffb08767 100644 --- a/lib/content-services/src/lib/search/components/search-control.component.scss +++ b/lib/content-services/src/lib/search/components/search-control.component.scss @@ -1,8 +1,8 @@ @use '@angular/material' as mat; -@import 'styles/flex'; +@use '../../flex' as flex; -$mat-menu-overlay-min-width: 112px !default; // 56 * 2 -$mat-menu-overlay-max-width: 280px !default; // 56 * 5 +$mat-menu-overlay-min-width: 112px !default; // 56 * 2 +$mat-menu-overlay-max-width: 280px !default; // 56 * 5 .adf { &-search-result-autocomplete { @@ -24,7 +24,7 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5 background-color: var(--adf-theme-background-card-color); border-radius: 2px; - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss index cd99c8cff4..0dc3884c4e 100644 --- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss +++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss @@ -1,7 +1,7 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; adf-search-date-range-tabbed { - #{$mat-tab-header} { + #{ms.$mat-tab-header} { margin-top: -5px; } } diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss index 5fe6e522a5..6aa30f4f48 100644 --- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss +++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss @@ -1,50 +1,50 @@ -@import "styles/mat-selectors"; +@use '../../../../mat-selectors' as ms; adf-search-date-range { - .adf-search-date-range-container { - margin-top: 20px; - padding: 10px; + .adf-search-date-range-container { + margin-top: 20px; + padding: 10px; - .adf-search-date-range-form-field-select { - width: 180px; - min-width: 180px; - } - - &-row { - display: flex; - flex-direction: row; - padding-bottom: 21px; - align-items: center; - - &-date { - margin-top: 8px; - } - - #{$mat-select-arrow-wrapper} { - height: unset; - } - - .adf-search-date-range-input-field { - width: 75px; - } - - .adf-search-date-range-form-field { - padding-left: 10px; - flex: 1; - margin-bottom: 12px; - - #{$mat-form-field-flex} { - align-items: center; - - #{$mat-form-field-infix} { - padding: 0.375em 0 4px; - } + .adf-search-date-range-form-field-select { + width: 180px; + min-width: 180px; } - } - } - } - .adf-search-widget-extra-width { - max-width: 500px; - } + &-row { + display: flex; + flex-direction: row; + padding-bottom: 21px; + align-items: center; + + &-date { + margin-top: 8px; + } + + #{ms.$mat-select-arrow-wrapper} { + height: unset; + } + + .adf-search-date-range-input-field { + width: 75px; + } + + .adf-search-date-range-form-field { + padding-left: 10px; + flex: 1; + margin-bottom: 12px; + + #{ms.$mat-form-field-flex} { + align-items: center; + + #{ms.$mat-form-field-infix} { + padding: 0.375em 0 4px; + } + } + } + } + } + + .adf-search-widget-extra-width { + max-width: 500px; + } } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss index c62c84c424..0091f78e04 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../../mat-selectors.scss' as ms; adf-search-facet-chip-tabbed { .adf-search-filter-chip-tabbed { @@ -6,7 +6,7 @@ adf-search-facet-chip-tabbed { pointer-events: none; } - #{$mat-evolution-chip-graphic} { + #{ms.$mat-evolution-chip-graphic} { display: none; } } @@ -16,6 +16,6 @@ adf-search-facet-chip-tabbed { } } -.adf-search-widget-extra-width#{$mat-menu-panel} { +.adf-search-widget-extra-width#{ms.$mat-menu-panel} { max-width: 500px; } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss index 8f754766ff..1720616798 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss @@ -1,7 +1,7 @@ -@import 'styles/mat-selectors'; +@use '../../../../mat-selectors.scss' as ms; .adf-search-filter-chip { - #{$mat-evolution-chip-graphic} { + #{ms.$mat-evolution-chip-graphic} { display: none; } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss index 29b4e882a7..3e86957c53 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -1,5 +1,5 @@ @use '@angular/material' as mat; -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; .adf-search-filter-chip, .adf-search-filter-chip-tabbed { @@ -52,15 +52,15 @@ } } -.adf-search-filter-chip#{$mat-evolution-chip}#{$mat-standard-chip} { +.adf-search-filter-chip#{ms.$mat-evolution-chip}#{ms.$mat-standard-chip} { margin-top: 0; margin-bottom: 0; } -#{$mat-standard-chip} { +#{ms.$mat-standard-chip} { -webkit-font-smoothing: unset; } -#{$mat-evolution-chip-set} { +#{ms.$mat-evolution-chip-set} { margin-top: -4px; } diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss index 922484007e..da8b17b4df 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss @@ -1,5 +1,5 @@ @use '@angular/material' as mat; -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; .adf-filter { &-button:has(.adf-filter-icon) { @@ -73,7 +73,7 @@ padding-right: 16px; -webkit-font-smoothing: subpixel-antialiased; - #{$mat-button-label} { + #{ms.$mat-button-label} { font-weight: unset; } } diff --git a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss index e495697775..8421db5f40 100644 --- a/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss @@ -1,14 +1,14 @@ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; adf-search-filter-tabbed { - #{$mat-tab-header} { + #{ms.$mat-tab-header} { margin-top: 0; } .adf-search-tab-label-active { border-bottom: 1px solid var(--theme-primary-color); - #{$mat-tab-label-text} { + #{ms.$mat-tab-label-text} { color: var(--adf-theme-foreground-secondary-text-color); } } diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss index 65923a3278..2d9d2fb566 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss @@ -1,5 +1,5 @@ @use '@angular/material' as mat; -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; .adf-search-form { &.adf-search-form-button { @@ -28,7 +28,7 @@ text-align: left; } - .adf-search-form-icon#{$mat-icon} { + .adf-search-form-icon#{ms.$mat-icon} { font-size: 24px; height: 24px; width: 24px; diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss index a4262f35eb..103094b47f 100644 --- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss +++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss @@ -1,5 +1,5 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../mat-selectors.scss' as ms; adf-search-properties { .adf-search-properties-form { @@ -9,39 +9,39 @@ adf-search-properties { display: block; } - #{$mat-text-field-no-label} { - #{$mat-form-field-infix} { + #{ms.$mat-text-field-no-label} { + #{ms.$mat-form-field-infix} { padding-top: 9px; padding-bottom: 9px; display: inline-block; } } - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { height: 37.5px; min-height: 37.5px; display: inline-block; } - #{$mat-select-trigger} { + #{ms.$mat-select-trigger} { height: 17.5px; } - #{$mat-select-arrow-wrapper} { + #{ms.$mat-select-arrow-wrapper} { width: 16px; } - #{$mat-line-ripple} { + #{ms.$mat-line-ripple} { &::before { display: none; } } - #{$mat-select-arrow} { + #{ms.$mat-select-arrow} { margin-left: 5px; } - #{$mat-form-field} { + #{ms.$mat-form-field} { margin-bottom: 18px; } } @@ -49,7 +49,7 @@ adf-search-properties { adf-search-chip-autocomplete-input { display: block; - #{$mat-text-field-outlined} { + #{ms.$mat-text-field-outlined} { &-start, &-end { border-top: 1px solid var(--adf-theme-mat-grey-color-a400); @@ -65,15 +65,15 @@ adf-search-properties { } } - #{$mat-focused} { - #{$mat-text-field-outlined} { + #{ms.$mat-focused} { + #{ms.$mat-text-field-outlined} { outline: 2px auto -webkit-focus-ring-color; } } - #{$mat-form-field-appearance-outline} { - #{$mat-text-field-outlined-thick} { - #{$mat-text-field-outlined} { + #{ms.$mat-form-field-appearance-outline} { + #{ms.$mat-text-field-outlined-thick} { + #{ms.$mat-text-field-outlined} { &-start, &-end { border-width: 1px; @@ -82,11 +82,11 @@ adf-search-properties { } } - #{$mat-notched-outline-leading} { + #{ms.$mat-notched-outline-leading} { border-color: var(--adf-theme-foreground-text-color-027); } - #{$mat-notched-outline-trailing} { + #{ms.$mat-notched-outline-trailing} { border-color: var(--adf-theme-foreground-text-color-027); } } @@ -107,14 +107,14 @@ adf-search-properties { .adf-search-properties-file-size-operator, .adf-search-properties-file-size-unit { - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { border: 1px solid var(--adf-theme-mat-grey-color-a400); border-radius: 5px; padding: 9px; } - &#{$mat-focused} { - #{$mat-form-field-infix} { + &#{ms.$mat-focused} { + #{ms.$mat-form-field-infix} { outline: 2px auto -webkit-focus-ring-color; } } diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss index b69554c699..27729e02ae 100644 --- a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss +++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss @@ -1,5 +1,3 @@ -@import 'styles/mat-selectors'; - .adf-search-text { padding: 0; diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss index b4a86b37d4..a2469f70d6 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors.scss' as ms; adf-tags-creator { display: block; @@ -77,7 +77,7 @@ adf-tags-creator { background-color: inherit; color: inherit; - &:not(#{$mat-list-item-disabled}):hover { + &:not(#{ms.$mat-list-item-disabled}):hover { cursor: pointer; background: var(--adf-theme-mat-grey-color-a200); } @@ -93,7 +93,7 @@ adf-tags-creator { min-height: 62px; } - #{$mat-list-item-disabled} #{$mat-list-item-primary-text} { + #{ms.$mat-list-item-disabled} #{ms.$mat-list-item-primary-text} { opacity: 1; } } diff --git a/lib/content-services/src/lib/version-manager/version-upload.component.scss b/lib/content-services/src/lib/version-manager/version-upload.component.scss index 30698f6150..86974e9e76 100644 --- a/lib/content-services/src/lib/version-manager/version-upload.component.scss +++ b/lib/content-services/src/lib/version-manager/version-upload.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../mat-selectors.scss' as ms; .adf-new-version-radio-group { display: inline-flex; @@ -26,11 +26,11 @@ width: 100%; float: right; - #{$mat-floating-label} { + #{ms.$mat-floating-label} { padding-bottom: 10px; } - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { padding-top: 12px; padding-bottom: 0; } diff --git a/lib/core/feature-flags/src/lib/components/flags/flags.component.scss b/lib/core/feature-flags/src/lib/components/flags/flags.component.scss index 070bf1c338..a76c8cbaad 100644 --- a/lib/core/feature-flags/src/lib/components/flags/flags.component.scss +++ b/lib/core/feature-flags/src/lib/components/flags/flags.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors' as ms; /* stylelint-disable selector-class-pattern */ .adf-feature-flags-overrides-header { @@ -36,8 +36,8 @@ width: 100%; display: flex; - #{$mat-form-field-subscript-wrapper}, - #{$mat-line-ripple} { + #{ms.$mat-form-field-subscript-wrapper}, + #{ms.$mat-line-ripple} { display: none; } } diff --git a/lib/core/feature-flags/src/lib/mat-selectors.scss b/lib/core/feature-flags/src/lib/mat-selectors.scss new file mode 100644 index 0000000000..c56797dd27 --- /dev/null +++ b/lib/core/feature-flags/src/lib/mat-selectors.scss @@ -0,0 +1,2 @@ +$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper'; +$mat-line-ripple: '.mdc-line-ripple'; diff --git a/lib/core/shell/src/lib/components/shell/shell.component.scss b/lib/core/shell/src/lib/components/shell/shell.component.scss index 34c3eb0fec..e432433667 100644 --- a/lib/core/shell/src/lib/components/shell/shell.component.scss +++ b/lib/core/shell/src/lib/components/shell/shell.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../styles/flex' as flex; .app-shell { display: flex; @@ -23,13 +23,13 @@ } } -@include layout-bp(lt-sm) { +@include flex.layout-bp(lt-sm) { .adf-app-title { display: none; } } -@media screen and (max-width: 719px) { +@media screen and (width <= 719px) { .adf-app-logo { display: none; } diff --git a/lib/core/shell/src/lib/styles/flex.scss b/lib/core/shell/src/lib/styles/flex.scss new file mode 100644 index 0000000000..c11802eec2 --- /dev/null +++ b/lib/core/shell/src/lib/styles/flex.scss @@ -0,0 +1,81 @@ +@charset "UTF-8"; +/* stylelint-disable */ + +// Non-overlapping Material Design breakpoints +// @type map +$breakpoints: ( + xs: ( + begin: 0, + end: 599.9px + ), + sm: ( + begin: 600px, + end: 959.9px + ), + md: ( + begin: 960px, + end: 1279.9px + ), + lg: ( + begin: 1280px, + end: 1919.9px + ), + xl: ( + begin: 1920px, + end: 4999.99px + ) +) !default; + +// Overlapping breakpoints that are greater than defined +// Material Design breakpoints +// @type map +$overlapping-gt: ( + gt-xs: 600px, + gt-sm: 960px, + gt-md: 1280px, + gt-lg: 1920px +) !default; + +// Overlapping breakpoints that are less than defined +// Material Design breakpoints +// @type map +$overlapping-lt: ( + lt-sm: 599.9px, + lt-md: 959.9px, + lt-lg: 1279.9px, + lt-xl: 1919.9px +) !default; + +// Media Query Mixin, takes a breakpoint and returns a wrapping +// media query statement +// e.g. +// +// @include layout-bp(xs) { +// background-color: red; +// } +// +// becomes +// +// @media (min-width: 0px) and (max-width: 599px) { +// background-color: red; +// } +@mixin layout-bp($bp) { + @if map-has-key($breakpoints, $bp) { + $min: map-get(map-get($breakpoints, $bp), begin); + $max: map-get(map-get($breakpoints, $bp), end); + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if map-has-key($overlapping-gt, $bp) { + $min: map-get($overlapping-gt, $bp); + @media (min-width: $min) { + @content; + } + } @else if map-has-key($overlapping-lt, $bp) { + $max: map-get($overlapping-lt, $bp); + @media (max-width: $max) { + @content; + } + } +} +/* stylelint-enable */ diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss index 897383ae5e..ec3078d97f 100644 --- a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf { &-array-item-icon { @@ -22,7 +22,7 @@ } &-array-item-more-chip-container { - &#{$mat-card} { + &#{ms.$mat-card} { box-shadow: none; max-height: 300px; overflow-y: auto; @@ -30,7 +30,7 @@ } &-property-value { - #{$mat-chip-list} { + #{ms.$mat-chip-list} { padding-top: 6px; } } @@ -45,7 +45,7 @@ border-color: var(--adf-theme-foreground-divider-color); border-radius: 0; - #{$mat-chip}:hover { + #{ms.$mat-chip}:hover { cursor: pointer; } } diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss index 797a1c5e0b..f389f07814 100644 --- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-card-view-dateitem { .adf-property-value { @@ -50,7 +50,7 @@ align-items: center; justify-content: space-between; - #{$mat-icon} { + #{ms.$mat-icon} { opacity: 0.5; &:hover { diff --git a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss index ae3a58be83..1b6626d623 100644 --- a/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-card-view-key-value-pairs-item { .adf-property-col-key { @@ -28,19 +28,19 @@ justify-content: center; } - &__add-btn#{$mat-button} { + &__add-btn#{ms.$mat-button} { margin-bottom: 20px; } &__read-only { padding-bottom: 20px; - #{$mat-table} { + #{ms.$mat-table} { box-shadow: none; } - #{$mat-header-row}, - #{$mat-row} { + #{ms.$mat-header-row}, + #{ms.$mat-row} { padding: 0; } } diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss index d8e4df5b8a..530fd57b50 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-card-view-selectitem { .adf-property-value { @@ -17,23 +17,23 @@ .adf-property-value-editable.adf-property-value-editable { padding-left: 0; - #{$mat-text-field-no-label} #{$mat-form-field-infix} { + #{ms.$mat-text-field-no-label} #{ms.$mat-form-field-infix} { padding: 0; } - #{$mat-form-field-wrapper} { + #{ms.$mat-form-field-wrapper} { background-color: unset; } - #{$mat-select} { + #{ms.$mat-select} { margin-top: 0; border-radius: 6px; - #{$mat-select-value} { + #{ms.$mat-select-value} { color: var(--adf-metadata-action-button-clear-color); } - #{$mat-select-trigger} { + #{ms.$mat-select-trigger} { padding: 6px 12px 6px 6px; } } @@ -43,7 +43,7 @@ padding-left: 10px; } - #{$mat-form-field-subscript-wrapper} { + #{ms.$mat-form-field-subscript-wrapper} { display: none; } @@ -53,7 +53,7 @@ color: var(--adf-metadata-property-panel-title-color); } - #{$mat-line-ripple} { + #{ms.$mat-line-ripple} { display: none; } diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss index 7a3d3b5351..f5164c117f 100644 --- a/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../../styles/mat-selectors' as ms; $select-filter-height: 4em !default; @@ -17,7 +17,7 @@ $select-filter-height: 4em !default; background: var(--adf-theme-background-card-color); } - #{$mat-form-field} { + #{ms.$mat-form-field} { width: 100%; } @@ -26,7 +26,7 @@ $select-filter-height: 4em !default; } } -#{$mat-select-panel}.adf-select-filter { +#{ms.$mat-select-panel}.adf-select-filter { transform: none; overflow-x: hidden; max-height: calc(256px + #{$select-filter-height}); diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index e5c5b6e89a..2e2f3838eb 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-card-view-textitem { .adf-textitem-error { @@ -29,20 +29,20 @@ color: var(--adf-theme-foreground-text-color); } - #{$mat-button-touch-target} { + #{ms.$mat-button-touch-target} { width: 30px; height: 30px; } } - #{$mat-form-field-icon-suffix} { + #{ms.$mat-form-field-icon-suffix} { position: absolute; right: 1px; bottom: 7px; } .adf-textitem-chip-list-container { - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { margin-top: 6px; } } @@ -56,7 +56,7 @@ } .adf-property-field { - #{$mat-input-element} { + #{ms.$mat-input-element} { color: var(--theme-primary-color); cursor: pointer; } @@ -86,7 +86,7 @@ white-space: nowrap; } - #{$mat-line-ripple} { + #{ms.$mat-line-ripple} { &::before, &::after { display: none; diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index 6ef101419b..757a2da819 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-property-list { border: unset; @@ -28,11 +28,11 @@ .adf-property-field { width: 100%; - #{mat-form-field-underline} { + #{ms.$mat-form-field-underline} { display: none; } - #{mat-input-element} { + #{ms.$mat-input-element} { text-overflow: ellipsis; color: var(--adf-metadata-property-panel-title-color); padding: 6px 0; @@ -40,28 +40,28 @@ } .adf-card-view__key-value-pairs__row { - #{$mat-input-element} { + #{ms.$mat-input-element} { margin-top: 0; padding-left: 12px; } } - #{$mat-form-text-field-infix} { + #{ms.$mat-form-text-field-infix} { border-top-width: 0; } - #{$mat-form-field-flex} { + #{ms.$mat-form-field-flex} { padding-top: 0; } - #{$mat-form-field-wrapper} { + #{ms.$mat-form-field-wrapper} { background-color: inherit; padding-bottom: 0; padding-left: 0; padding-right: 0; } - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { padding: 0; justify-content: center; display: flex; @@ -92,7 +92,7 @@ height: 32px; padding-left: 10px; - #{$mat-input-element} { + #{ms.$mat-input-element} { color: var(--adf-metadata-action-button-clear-color); padding: 5px 0 6px 12px; margin: 5px 0 0; @@ -102,7 +102,7 @@ &.adf-property-readonly-value { color: var(--adf-metadata-property-panel-label-color); - #{$mat-input-element} { + #{ms.$mat-input-element} { color: var(--adf-metadata-property-panel-label-color); } } diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss index 0b1b628e72..229d260ea9 100644 --- a/lib/core/src/lib/comments/comments.component.scss +++ b/lib/core/src/lib/comments/comments.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; adf-comments { .adf-comments-container { @@ -10,11 +10,11 @@ adf-comments { width: 100%; padding-bottom: 8px; - #{$mat-form-field} { + #{ms.$mat-form-field} { width: 100%; - &#{$mat-form-field-invalid} { - #{$mat-input-element} { + &#{ms.$mat-form-field-invalid} { + #{ms.$mat-input-element} { &::placeholder, &:focus::placeholder { color: var(--theme-warn-color); @@ -23,15 +23,15 @@ adf-comments { } } - #{$mat-form-field-wrapper} { - #{$mat-form-field-flex} { - #{$mat-form-field-infix} { + #{ms.$mat-form-field-wrapper} { + #{ms.$mat-form-field-flex} { + #{ms.$mat-form-field-infix} { padding-bottom: 2px; padding-top: 25px; } } - #{$mat-input-element} { + #{ms.$mat-input-element} { &:focus::placeholder { color: var(--theme-primary-color); -webkit-font-smoothing: subpixel-antialiased; @@ -62,7 +62,7 @@ adf-comments { justify-content: flex-end; } - #{$mat-list-item-unscoped-content} { + #{ms.$mat-list-item-unscoped-content} { display: flex; padding: 0 16px; } diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index d559d04780..cbb1e417d9 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss @@ -1,7 +1,7 @@ /* stylelint-disable no-descending-specificity */ @use '@angular/material' as mat; -@import '../../../styles/mixins'; -@import 'styles/mat-selectors'; +@use '../../../styles/mixins' as mixins; +@use '../../../styles/mat-selectors' as ms; $data-table-header-font-size: var(--theme-caption-font-size) !default; $data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default; @@ -53,7 +53,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-datatable-list, -#{$cdk-drag-preview} { +#{ms.$cdk-drag-preview} { display: flex; flex-direction: column; background-color: var(--adf-theme-background-card-color); @@ -145,14 +145,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-datatable-row { - @include material-animation-default(0.28s); + @include mixins.material-animation-default(0.28s); transition-property: background-color; border-top: 1px solid var(--adf-theme-foreground-text-color-007); min-height: $data-table-row-height; cursor: pointer; - @include adf-no-select; + @include mixins.adf-no-select; &.adf-is-selected, &.adf-is-selected:hover { @@ -238,7 +238,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } button { - #{$mat-icon} { + #{ms.$mat-icon} { margin-top: -10px; } } @@ -512,7 +512,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-datatable-cell-header { - @include adf-no-select; + @include mixins.adf-no-select; position: relative; display: flex; @@ -532,7 +532,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } &.adf-sortable { - @include adf-no-select; + @include mixins.adf-no-select; display: flex; align-items: center; @@ -544,7 +544,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; padding-right: 0.25rem; &::after { - @include typo-icon; + @include mixins.typo-icon; font-size: $data-table-header-sort-icon-size; content: '\e5d8'; @@ -626,7 +626,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } } -#{$cdk-drag-preview} { +#{ms.$cdk-drag-preview} { min-height: $data-table-row-height; display: flex; flex-direction: row; @@ -646,7 +646,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } /* [Accessibility] Material checkbox labels */ -.adf-checkbox-sr-only #{$mat-checkbox-label} { +.adf-checkbox-sr-only #{ms.$mat-checkbox-label} { position: absolute; width: 1px; height: 1px; @@ -692,7 +692,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-datatable--empty { - @include flex-column; + @include mixins.flex-column; justify-content: center; align-items: center; @@ -719,7 +719,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default; } .adf-datatable-body { - @include flex-column; + @include mixins.flex-column; justify-content: center; align-items: center; diff --git a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss b/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss index a383423e9e..3e6bb3b703 100644 --- a/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss +++ b/lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss @@ -1,7 +1,7 @@ -@import 'styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; .adf-edit-json-dialog { - #{$mat-dialog-content} { + #{ms.$mat-dialog-content} { height: 300px; overflow: hidden; } diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss index eb1785fe60..d8ff15a700 100644 --- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss +++ b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .adf-dynamic-chip-list-container { display: flex; @@ -60,10 +60,10 @@ margin-bottom: 0; padding: 6px 11px; - #{$mat-evolution-chip-action} { + #{ms.$mat-evolution-chip-action} { padding: 2px 12px; - #{$mat-evolution-chip-text-label} { + #{ms.$mat-evolution-chip-text-label} { color: var(--adf-theme-foreground-text-color-054); } } diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss index 4ebe8b1cf8..c2e840a9c1 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.scss +++ b/lib/core/src/lib/form/components/form-renderer.component.scss @@ -1,6 +1,6 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/flex'; -@import 'styles/mat-selectors'; +@use '../../styles/flex' as flex; +@use '../../styles/mat-selectors' as ms; .adf-hidden { display: none; @@ -18,7 +18,7 @@ display: grid; &-column-view { - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { display: flow; } @@ -47,7 +47,7 @@ } } - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { .adf-grid-list-item { flex: 1 0 100%; } @@ -75,10 +75,10 @@ top: 1.8em; } - #{$mat-focused} { + #{ms.$mat-focused} { width: 100%; - #{$mat-text-field-focused} { + #{ms.$mat-text-field-focused} { label { color: var(--theme-primary-color); } @@ -89,12 +89,12 @@ background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2); } - #{$mat-form-field-prefix} { + #{ms.$mat-form-field-prefix} { color: var(--theme-primary-color); } } - #{$mat-grid-tile} { + #{ms.$mat-grid-tile} { overflow: visible; width: 80%; } @@ -110,16 +110,16 @@ max-width: 100%; max-height: 100%; - & #{$mat-card} { + & #{ms.$mat-card} { padding: 16px 24px; overflow: hidden; } - & #{$mat-card-header-text} { + & #{ms.$mat-card-header-text} { margin: 0; } - & #{$mat-tab-body-content} { + & #{ms.$mat-tab-body-content} { overflow: hidden; } @@ -132,13 +132,13 @@ text-transform: uppercase; } - & #{$mat-tab-ink-bar} { - #{$mat-tab-indicator-underline} { + & #{ms.$mat-tab-ink-bar} { + #{ms.$mat-tab-indicator-underline} { border-top-width: 4px; } } - & #{$mat-form-field-wrapper} { + & #{ms.$mat-form-field-wrapper} { margin: 0 12px 0 0; } } @@ -201,7 +201,7 @@ padding-bottom: 25px; padding-right: 25px; - & #{$mat-button} { + & #{ms.$mat-button} { height: 36px; border-radius: 5px; width: auto; @@ -210,7 +210,7 @@ white-space: nowrap; } - & #{$mat-button-label} { + & #{ms.$mat-button-label} { min-width: 58px; } } @@ -223,7 +223,7 @@ } } - &-left-label-input-container #{$mat-form-field-label} { + &-left-label-input-container #{ms.$mat-form-field-label} { top: auto; bottom: 0; } @@ -237,7 +237,7 @@ form-field { width: 100%; - #{$mat-input-element} { + #{ms.$mat-input-element} { font-size: var(--theme-body-2-font-size); padding-top: 8px; line-height: normal; diff --git a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss index 45d067addc..be40e0a14d 100644 --- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss +++ b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss @@ -1,5 +1,5 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; $adf-inplace-input-padding: 7px; @@ -10,16 +10,16 @@ $adf-inplace-input-padding: 7px; } } - #{$mat-line-ripple} { + #{ms.$mat-line-ripple} { display: none; } - #{$mat-form-text-field-infix} { + #{ms.$mat-form-text-field-infix} { display: flex; border-top: 0; } - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { padding: $adf-inplace-input-padding; } diff --git a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss index 175fea3bf9..f9d7d37dca 100644 --- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss +++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss @@ -1,5 +1,5 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../../styles/mat-selectors' as ms; .adf { &-amount-widget { @@ -14,17 +14,17 @@ &-amount-widget__input { margin-top: -15px; - #{$mat-focused} { + #{ms.$mat-focused} { transition: none; } - #{$mat-form-field-prefix} { + #{ms.$mat-form-field-prefix} { padding-top: 16px; padding-bottom: 16px; align-self: flex-end; } - &:not(#{$mat-focused}):not(#{$mat-form-field-invalid}) { + &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) { .adf-amount-widget__prefix-spacing { color: var(--adf-theme-foreground-secondary-text-color); } diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss index 423e67149a..d98c9ff174 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss @@ -1,27 +1,27 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../../styles/mat-selectors' as ms; .adf { &-date-time-widget { - #{$mat-form-field-suffix} { + #{ms.$mat-form-field-suffix} { top: 26px; } - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { top: 20px; } } &-left-label-input-datepicker { - #{$mat-form-field-suffix} { + #{ms.$mat-form-field-suffix} { top: 0; } - #{$mat-form-text-field-infix} { + #{ms.$mat-form-text-field-infix} { width: 100%; } } } -.mat-datetimepicker-toggle { +#{ms.$mat-datetimepicker-toggle} { color: var(--adf-theme-foreground-icon-color); } diff --git a/lib/core/src/lib/form/components/widgets/form.theme.scss b/lib/core/src/lib/form/components/widgets/form.theme.scss index 450da7bf84..6a77b8c779 100644 --- a/lib/core/src/lib/form/components/widgets/form.theme.scss +++ b/lib/core/src/lib/form/components/widgets/form.theme.scss @@ -1,5 +1,6 @@ /* stylelint-disable no-descending-specificity */ -@import 'styles/mat-selectors'; +/* stylelint-disable declaration-no-important */ +@use '../../../styles/mat-selectors' as ms; ul > li > form-field > .adf-focus { .adf-label { @@ -36,15 +37,15 @@ ul > li > form-field > .adf-focus { } &-invalid { - #{$mat-checkbox} { + #{ms.$mat-checkbox} { padding-bottom: 12px; } - #{$mat-line-ripple} { + #{ms.$mat-line-ripple} { background-color: var(--theme-warn-color) !important; } - #{$mat-select} { + #{ms.$mat-select} { &-arrow { color: var(--adf-theme-foreground-secondary-text-color) !important; } @@ -54,7 +55,7 @@ ul > li > form-field > .adf-focus { border-color: var(--theme-warn-color); } - #{$mat-form-field-prefix} { + #{ms.$mat-form-field-prefix} { color: var(--adf-theme-foreground-secondary-text-color); } @@ -71,9 +72,9 @@ ul > li > form-field > .adf-focus { /* query for Microsoft IE 11 */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { adf-form-field { - #{$mat-input-element}, - #{$mat-select}, - #{$mat-form-field} { + #{ms.$mat-input-element}, + #{ms.$mat-select}, + #{ms.$mat-form-field} { display: block !important; } } diff --git a/lib/core/src/lib/form/components/widgets/text/text.widget.scss b/lib/core/src/lib/form/components/widgets/text/text.widget.scss index 384097a9b5..b8b622a419 100644 --- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss +++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss @@ -1,11 +1,11 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../../styles/mat-selectors' as ms; .adf { &-text-widget { width: 100%; - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { top: 20px; } } diff --git a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss index 374bf1d080..49af0f2d18 100644 --- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss +++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../styles/flex' as flex; .adf { &-userinfo-container { @@ -14,7 +14,7 @@ &-userinfo-name { padding: 0 5px; - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { display: none; } } @@ -65,7 +65,7 @@ display: flex; flex-direction: column; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { padding: 10px; } } diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index cd4cb7fc41..b2197720c8 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -1,5 +1,5 @@ -@import '../styles/mixins'; -@import 'styles/mat-selectors'; +@use '../styles/mixins' as mixins; +@use '../styles/mat-selectors' as ms; $adf-info-drawer-layout-title-font-size: var(--theme-title-font-size) !default; $adf-info-drawer-icon-size: 48px !default; @@ -7,25 +7,25 @@ $adf-info-drawer-icon-size-half: 24px !default; .adf { &-info-drawer { - @include flex-column; + @include mixins.flex-column; } &-info-drawer-layout { - @include flex-column; + @include mixins.flex-column; overflow: auto; width: 100%; background-color: var(--theme-card-background-color); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27); - & #{$mat-tab-label-text} { + & #{ms.$mat-tab-label-text} { font-weight: bold; text-align: left; opacity: 1; } - #{$mat-tab-label}#{$mat-tab-label-active} { - & #{$mat-tab-label-text} { + #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} { + & #{ms.$mat-tab-label-text} { color: inherit; } } @@ -75,7 +75,7 @@ $adf-info-drawer-icon-size-half: 24px !default; margin-bottom: 0; } - .adf-info-drawer-tabs #{$mat-tab-body-content} { + .adf-info-drawer-tabs #{ms.$mat-tab-body-content} { .adf-manage-versions-empty, .adf-manage-versions-no-permission { margin: 0; diff --git a/lib/core/src/lib/info-drawer/info-drawer.component.scss b/lib/core/src/lib/info-drawer/info-drawer.component.scss index 896259c018..5762a1ce7f 100644 --- a/lib/core/src/lib/info-drawer/info-drawer.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .adf { &-info-drawer { @@ -7,7 +7,7 @@ margin: 0; } - #{$mat-tab-label-text} { + #{ms.$mat-tab-label-text} { min-width: 0; } @@ -31,28 +31,28 @@ } .adf-info-drawer-tabs { - & #{$mat-tab-body-content} > * { + & #{ms.$mat-tab-body-content} > * { margin-bottom: 20px; display: block; } - & #{$mat-tab-body-content} > *:last-child { + & #{ms.$mat-tab-body-content} > *:last-child { margin-bottom: 0; } - #{$mat-tab-label-text} { + #{ms.$mat-tab-label-text} { flex-grow: 1; - #{$mat-icon} + span { + #{ms.$mat-icon} + span { padding-left: 5px; } } - #{$mat-tab-body} { + #{ms.$mat-tab-body} { overflow-y: hidden; } - #{$mat-tab-body-content} { + #{ms.$mat-tab-body-content} { /* stylelint-disable */ overflow: auto; /* stylelint-enable */ @@ -65,7 +65,7 @@ /* stylelint-disable-next-line no-descending-specificity */ .adf-info-drawer-tabs { - #{$mat-tab-label-container} { + #{ms.$mat-tab-label-container} { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } @@ -75,7 +75,7 @@ border-bottom: unset; opacity: 1; - &#{$mat-tab-label} { + &#{ms.$mat-tab-label} { flex-grow: 1; } diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss index 52637ea1d9..116f0bbb3d 100644 --- a/lib/core/src/lib/layout/components/header/header.component.scss +++ b/lib/core/src/lib/layout/components/header/header.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../styles/flex' as flex; adf-layout-header .adf-toolbar-container-row { color: var(--theme-header-text-color); @@ -51,7 +51,7 @@ adf-layout-header .adf-toolbar-container-row { padding: 0; } - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { .adf-app-logo, .adf-app-title { display: none; diff --git a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss index a96bdfce77..80f241f5f8 100644 --- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss +++ b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; adf-layout-container { display: block; @@ -34,8 +34,8 @@ adf-layout-container { } /* stylelint-disable selector-class-pattern, declaration-no-important */ -#{$mat-sidenav-content}, -#{$mat-drawer-transition} #{$mat-drawer-content} { +#{ms.$mat-sidenav-content}, +#{ms.$mat-drawer-transition} #{ms.$mat-drawer-content} { margin-left: 0 !important; margin-right: 0 !important; transform: unset !important; diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss index 9a4a266f3a..fa4405181d 100644 --- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss +++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss @@ -1,6 +1,6 @@ @use '../../../styles/flex' as flex; -@import '../../../styles/mixins'; -@import 'styles/mat-selectors'; +@use '../../../styles/mixins' as mixins; +@use '../../../styles/mat-selectors' as ms; .adf-sidenav-layout { &-full-space { @@ -13,7 +13,7 @@ width: 100%; } - @include flex-column; + @include mixins.flex-column; width: 100%; @@ -25,15 +25,15 @@ flex: 0 0; } - #{$mat-drawer-content} { - @include flex-column; + #{ms.$mat-drawer-content} { + @include mixins.flex-column; position: unset; overflow: auto; } .adf-layout-container-sidenav { - #{$mat-icon} { + #{ms.$mat-icon} { vertical-align: sub; } } diff --git a/lib/core/src/lib/login/components/login/login.component.scss b/lib/core/src/lib/login/components/login/login.component.scss index 4191f06afe..be894915c3 100644 --- a/lib/core/src/lib/login/components/login/login.component.scss +++ b/lib/core/src/lib/login/components/login/login.component.scss @@ -1,8 +1,8 @@ -@import '../../../styles/mixins'; -@import 'styles/mat-selectors'; +@use '../../../styles/mixins' as mixins; +@use '../../../styles/mat-selectors' as ms; .adf-login { - @include flex-column; + @include mixins.flex-column; } .adf-login-content { @@ -204,7 +204,7 @@ padding-bottom: 16px; font-size: var(--theme-subheading-2-font-size); - #{$mat-form-field-infix} { + #{ms.$mat-form-field-infix} { min-height: 0; padding-bottom: 3px; padding-top: 20px; @@ -213,7 +213,7 @@ font-size: var(--theme-subheading-2-font-size); } - #{$mat-floating-label-required} { + #{ms.$mat-floating-label-required} { &::after { font-size: var(--theme-subheading-2-font-size); } diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss index f0e5108068..5977b83688 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.scss +++ b/lib/core/src/lib/notifications/components/notification-history.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; $notification-item-height: 72px; @@ -8,7 +8,7 @@ $notification-item-height: 72px; -webkit-font-smoothing: subpixel-antialiased; } - &-notification-history-menu_button#{$mat-button} { + &-notification-history-menu_button#{ms.$mat-button} { border-radius: 90%; padding: 0; min-width: 40px; @@ -154,11 +154,11 @@ $notification-item-height: 72px; } } -#{$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel { +#{ms.$mat-menu-panel}.adf-notification-history-menu.adf-notification-history-menu-panel { min-width: 320px; max-height: 500px; - #{$mat-menu-content} { + #{ms.$mat-menu-content} { padding: 0; } } diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss index da8727db4b..ec16f6f27e 100644 --- a/lib/core/src/lib/search-text/search-text-input.component.scss +++ b/lib/core/src/lib/search-text/search-text-input.component.scss @@ -1,11 +1,11 @@ -@import 'styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; .adf-search-container { &:has(.adf-input-form-field-divider) { overflow: hidden; } - #{$mat-form-field-subscript-wrapper} { + #{ms.$mat-form-field-subscript-wrapper} { display: none; } diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss index 8a5be4d6d3..7178b8f2e8 100644 --- a/lib/core/src/lib/snackbar-content/snackbar-content.component.scss +++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../styles/mat-selectors' as ms; :host { display: flex; @@ -20,7 +20,7 @@ display: flex; flex-direction: row; - #{$mat-button} { + #{ms.$mat-button} { min-width: 0; margin: -8px; height: unset; diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index 7509a32d8f..e3490f7959 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/lib/core/src/lib/styles/_mat-selectors.scss @@ -186,3 +186,13 @@ $mat-checkbox-selected: '.mdc-checkbox--selected'; $mat-checkbox-ripple: '.mat-mdc-checkbox-ripple'; $mat-list-base: '.mat-mdc-list-base'; $mat-card-header: '.mat-mdc-card-header'; +$mat-datetimepicker-calendar: '.mat-datetimepicker-calendar'; +$mat-datetimepicker-calendar-header: '.mat-datetimepicker-calendar-header'; +$mat-datetimepicker-calendar-table-header: '.mat-datetimepicker-calendar-table-header'; +$mat-datetimepicker-calendar-header-year: '.mat-datetimepicker-calendar-header-year'; +$mat-datetimepicker-calendar-header-date: '.mat-datetimepicker-calendar-header-date'; +$mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-time'; +$mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content'; +$mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled'; +$mat-datetimepicker-toggle: '.mat-datetimepicker-toggle'; +$mat-form-field-underline: '.mat-form-field-underline'; diff --git a/lib/core/src/lib/styles/material.theme.scss b/lib/core/src/lib/styles/material.theme.scss index afa0e7e028..388c77882c 100644 --- a/lib/core/src/lib/styles/material.theme.scss +++ b/lib/core/src/lib/styles/material.theme.scss @@ -1,18 +1,18 @@ -@import './mat-selectors'; +@use './mat-selectors' as ms; @mixin adf-material-theme() { - #{$mat-expansion-panel} { - & #{$mat-expansion-panel-header}.cdk-keyboard-focused, - & #{$mat-expansion-panel-header}.cdk-program-focused, - &:not(#{$mat-expanded}) #{$mat-expansion-panel-header}:hover { + #{ms.$mat-expansion-panel} { + & #{ms.$mat-expansion-panel-header}.cdk-keyboard-focused, + & #{ms.$mat-expansion-panel-header}.cdk-program-focused, + &:not(#{ms.$mat-expanded}) #{ms.$mat-expansion-panel-header}:hover { &:not([aria-disabled='true']) { background-color: var(--adf-theme-background-hover-color); } } } - #{$mat-calendar} { - #{$mat-calendar-header} { + #{ms.$mat-calendar} { + #{ms.$mat-calendar-header} { button { color: var(--adf-theme-foreground-text-color-087); @@ -22,68 +22,69 @@ } } - #{$mat-calendar-content} { - #{$mat-calendar-table-header} th { + #{ms.$mat-calendar-content} { + #{ms.$mat-calendar-table-header} th { color: var(--adf-theme-foreground-text-color-054); } - #{$mat-calendar-body-disabled} > div { + #{ms.$mat-calendar-body-disabled} > div { + /* stylelint-disable-next-line declaration-no-important */ color: var(--adf-theme-foreground-text-color-054) !important; } } } - .mat-datetimepicker-calendar { - .mat-datetimepicker-calendar-header { - .mat-datetimepicker-calendar-header-year { + #{ms.$mat-datetimepicker-calendar} { + #{ms.$mat-datetimepicker-calendar-header} { + #{ms.$mat-datetimepicker-calendar-header-year} { opacity: 1; } - .mat-datetimepicker-calendar-header-date { + #{ms.$mat-datetimepicker-calendar-header-date} { opacity: 1; } - .mat-datetimepicker-calendar-header-time { + #{ms.$mat-datetimepicker-calendar-header-time} { opacity: 1; } } - .mat-datetimepicker-calendar-content { - .mat-datetimepicker-calendar-table-header th { + #{ms.$mat-datetimepicker-calendar-content} { + #{ms.$mat-datetimepicker-calendar-table-header} th { color: var(--adf-theme-foreground-text-color-054); } - .mat-datetimepicker-calendar-body-disabled > div { + #{ms.$mat-datetimepicker-calendar-body-disabled} > div { color: var(--adf-theme-foreground-text-color-054); } } } - #{$mat-snackbar} { - &#{$mat-snack-bar-container} { + #{ms.$mat-snackbar} { + &#{ms.$mat-snack-bar-container} { margin: 24px; - #{$mat-snackbar-label} { + #{ms.$mat-snackbar-label} { line-height: unset; } } } - #{$mat-input-element} { + #{ms.$mat-input-element} { &:focus::placeholder { color: var(--theme-primary-color); } } - #{$mat-datetimepicker-dialog} { - #{$mat-dialog-container} { - #{$mat-dialog-surface} { + #{ms.$mat-datetimepicker-dialog} { + #{ms.$mat-dialog-container} { + #{ms.$mat-dialog-surface} { padding: 0; } } } - #{$mat-button-base} { + #{ms.$mat-button-base} { -webkit-font-smoothing: antialiased; } } diff --git a/lib/core/src/lib/templates/empty-content/empty-content.component.scss b/lib/core/src/lib/templates/empty-content/empty-content.component.scss index eef5b5dde7..2f015a1609 100644 --- a/lib/core/src/lib/templates/empty-content/empty-content.component.scss +++ b/lib/core/src/lib/templates/empty-content/empty-content.component.scss @@ -1,5 +1,3 @@ -@import 'styles/mat-selectors'; - .adf-empty-content { color: var(--adf-theme-foreground-text-color-054); display: flex; diff --git a/lib/core/src/lib/templates/error-content/error-content.component.scss b/lib/core/src/lib/templates/error-content/error-content.component.scss index dbd5769107..d0379b1a97 100644 --- a/lib/core/src/lib/templates/error-content/error-content.component.scss +++ b/lib/core/src/lib/templates/error-content/error-content.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../styles/flex' as flex; .adf-error-content { color: var(--adf-theme-foreground-text-color-054); @@ -36,7 +36,7 @@ } } -@include layout-bp(lt-md) { +@include flex.layout-bp(lt-md) { .adf-error-content { &-code { margin-top: 100px; diff --git a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss index 1d37215e2d..b2237920cf 100644 --- a/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-image-viewer { width: 100%; @@ -33,7 +33,7 @@ left: 50%; transform: translateX(-50%); - .adf-toolbar #{$mat-toolbar} { + .adf-toolbar #{ms.$mat-toolbar} { max-height: 48px; background-color: var(--adf-theme-background-card-color); border-width: 0; diff --git a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss index 409179d456..d03ac94614 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss +++ b/lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-pdf-viewer { width: 100%; @@ -79,7 +79,7 @@ max-height: 100px; max-width: 300px; - #{$mat-progress-bar} { + #{ms.$mat-progress-bar} { max-width: 300px; margin: 0; position: absolute; @@ -98,7 +98,7 @@ left: 50%; transform: translateX(-50%); - .adf-toolbar #{$mat-toolbar} { + .adf-toolbar #{ms.$mat-toolbar} { max-height: 48px; background-color: var(--adf-theme-background-card-color); border-width: 0; diff --git a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss index e13ef0fb0f..8a43a48d66 100644 --- a/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss +++ b/lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss @@ -1,5 +1,4 @@ /* stylelint-disable scss/at-extend-no-missing-placeholder */ -@import 'styles/mat-selectors'; .adf-full-screen { width: 100%; diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss index d21c7340f8..9116c626fb 100644 --- a/lib/core/src/lib/viewer/components/viewer.component.scss +++ b/lib/core/src/lib/viewer/components/viewer.component.scss @@ -1,5 +1,5 @@ /* stylelint-disable scss/at-extend-no-missing-placeholder */ -@import 'styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; .adf-full-screen { width: 100%; @@ -12,7 +12,7 @@ width: 100%; height: 100%; - #{$mat-toolbar} { + #{ms.$mat-toolbar} { color: var(--adf-theme-foreground-text-color-054); .adf-toolbar-title { @@ -33,7 +33,7 @@ } &-toolbar { - #{$mat-toolbar} { + #{ms.$mat-toolbar} { background-color: var(--adf-theme-background-card-color-087); } } diff --git a/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss b/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss index e111746645..52554f087b 100644 --- a/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss +++ b/lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors' as ms; .adf-buttons-menu { margin-right: 10px; @@ -23,7 +23,7 @@ display: none; } - button > #{$material-icons} { + button > #{ms.$material-icons} { color: black; margin: 0 10px; } diff --git a/lib/insights/src/lib/analytics-process/mat-selectors.scss b/lib/insights/src/lib/analytics-process/mat-selectors.scss new file mode 100644 index 0000000000..fadcc734f0 --- /dev/null +++ b/lib/insights/src/lib/analytics-process/mat-selectors.scss @@ -0,0 +1,3 @@ +/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */ + +$material-icons: '.material-icons'; diff --git a/lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss b/lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss index 10f86147c3..7d7ffa931a 100644 --- a/lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../flex' as flex; adf-cloud-app-list { width: 100%; @@ -29,11 +29,11 @@ adf-cloud-app-list { flex: 1 1 100%; max-width: 33.3333%; - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { max-width: 50%; } - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { max-width: 100%; } } diff --git a/lib/process-services-cloud/src/lib/flex.scss b/lib/process-services-cloud/src/lib/flex.scss new file mode 100644 index 0000000000..c11802eec2 --- /dev/null +++ b/lib/process-services-cloud/src/lib/flex.scss @@ -0,0 +1,81 @@ +@charset "UTF-8"; +/* stylelint-disable */ + +// Non-overlapping Material Design breakpoints +// @type map +$breakpoints: ( + xs: ( + begin: 0, + end: 599.9px + ), + sm: ( + begin: 600px, + end: 959.9px + ), + md: ( + begin: 960px, + end: 1279.9px + ), + lg: ( + begin: 1280px, + end: 1919.9px + ), + xl: ( + begin: 1920px, + end: 4999.99px + ) +) !default; + +// Overlapping breakpoints that are greater than defined +// Material Design breakpoints +// @type map +$overlapping-gt: ( + gt-xs: 600px, + gt-sm: 960px, + gt-md: 1280px, + gt-lg: 1920px +) !default; + +// Overlapping breakpoints that are less than defined +// Material Design breakpoints +// @type map +$overlapping-lt: ( + lt-sm: 599.9px, + lt-md: 959.9px, + lt-lg: 1279.9px, + lt-xl: 1919.9px +) !default; + +// Media Query Mixin, takes a breakpoint and returns a wrapping +// media query statement +// e.g. +// +// @include layout-bp(xs) { +// background-color: red; +// } +// +// becomes +// +// @media (min-width: 0px) and (max-width: 599px) { +// background-color: red; +// } +@mixin layout-bp($bp) { + @if map-has-key($breakpoints, $bp) { + $min: map-get(map-get($breakpoints, $bp), begin); + $max: map-get(map-get($breakpoints, $bp), end); + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if map-has-key($overlapping-gt, $bp) { + $min: map-get($overlapping-gt, $bp); + @media (min-width: $min) { + @content; + } + } @else if map-has-key($overlapping-lt, $bp) { + $max: map-get($overlapping-lt, $bp); + @media (max-width: $max) { + @content; + } + } +} +/* stylelint-enable */ diff --git a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss index 46da9db344..1c5619fab7 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../mat-selectors' as ms; /* cspell: disable-next-line */ /* stylelint-disable scss/at-extend-no-missing-placeholder */ @@ -38,7 +38,7 @@ } &-toolbar { - #{$mat-toolbar} { + #{ms.$mat-toolbar} { background-color: var(--adf-theme-background-card-color-087); } } @@ -83,7 +83,7 @@ flex-direction: column; height: 100%; - #{$mat-card-content} { + #{ms.$mat-card-content} { height: 100%; overflow: hidden auto; } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss index 81b8b7f393..63073c09de 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss @@ -1,10 +1,10 @@ /* stylelint-disable selector-class-pattern */ -@import 'styles/mat-selectors'; +@use '../../../../mat-selectors' as ms; .adf { // eslint-disable-selector-class-pattern &-date-widget { - #{$mat-form-field-suffix} { + #{ms.$mat-form-field-suffix} { top: 26px; } @@ -14,11 +14,11 @@ } &-left-label-input-datepicker { - #{$mat-form-field-suffix} { + #{ms.$mat-form-field-suffix} { top: 0; } - #{$mat-form-text-field-infix} { + #{ms.$mat-form-text-field-infix} { width: 100%; } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss index 95dcc93d09..1e637a5e91 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../../mat-selectors' as ms; .adf { &-dropdown-widget { @@ -27,7 +27,7 @@ margin-top: 1px; } - #{$mat-select-arrow-wrapper} { + #{ms.$mat-select-arrow-wrapper} { height: auto; } } diff --git a/lib/process-services-cloud/src/lib/mat-selectors.scss b/lib/process-services-cloud/src/lib/mat-selectors.scss new file mode 100644 index 0000000000..5c123b43cf --- /dev/null +++ b/lib/process-services-cloud/src/lib/mat-selectors.scss @@ -0,0 +1,9 @@ +/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */ + +$mat-toolbar: '.mat-toolbar'; +$mat-card-content: '.mat-mdc-card-content'; +$mat-form-field-suffix: '.mat-mdc-form-field-text-suffix'; +$mat-form-text-field-infix: '.mat-mdc-form-text-infix'; +$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper'; +$mat-button: '.mat-mdc-button'; +$mat-button-label: '.mdc-button__label'; diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss index 17c9d6df09..0911e51551 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../../flex' as flex; .adf-edit-process-filter-date-error-container { position: absolute; @@ -50,7 +50,7 @@ max-width: 23%; } - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { flex-flow: column; :not(:last-child) { diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss index 0e7ed4d1b1..32b0a897ae 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../../../flex' as flex; .adf-edit-task-filter-checkbox { font-size: var(--theme-subheading-2-font-size); @@ -60,7 +60,7 @@ flex: 1 1 23%; } - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { flex-flow: column; :not(:last-child) { diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss index 0e7ed4d1b1..32b0a897ae 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../../../flex' as flex; .adf-edit-task-filter-checkbox { font-size: var(--theme-subheading-2-font-size); @@ -60,7 +60,7 @@ flex: 1 1 23%; } - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { flex-flow: column; :not(:last-child) { diff --git a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss index 7a6a13e88a..22f730e313 100644 --- a/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../../mat-selectors' as ms; .adf-task-form-cloud-container { height: 100%; @@ -16,7 +16,7 @@ border-radius: 5px; } - #{$mat-button} { + #{ms.$mat-button} { height: 36px; border-radius: 5px; width: auto; @@ -25,7 +25,7 @@ white-space: nowrap; } - #{$mat-button-label} { + #{ms.$mat-button-label} { min-width: 58px; } } diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss index d5a428118b..d3e0207446 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../flex' as flex; .adf { &-controls { @@ -28,7 +28,7 @@ } } -@include layout-bp(lt-md) { +@include flex.layout-bp(lt-md) { adf-card-view .adf-property-value { text-overflow: ellipsis; overflow: hidden; diff --git a/lib/process-services/src/lib/app-list/apps-list.component.scss b/lib/process-services/src/lib/app-list/apps-list.component.scss index b0735e5680..c76ae39ace 100644 --- a/lib/process-services/src/lib/app-list/apps-list.component.scss +++ b/lib/process-services/src/lib/app-list/apps-list.component.scss @@ -1,21 +1,52 @@ -@import 'styles/flex'; -@import 'styles/mat-selectors'; +@use 'sass:map'; +@use '../styles/mat-selectors' as ms; +@use '../styles/flex' as flex; .adf-app-list-item { cursor: pointer; } $tile-themes: ( - theme-1: (bg: #269abc, color: #168aac), - theme-2: (bg: #7da9b0, color: #6d99a0), - theme-3: (bg: #7689ab, color: #66799b), - theme-4: (bg: #c74e3e, color: #b73e2e), - theme-5: (bg: #fab96c, color: #eaa95c), - theme-6: (bg: #759d4c, color: #658d3c), - theme-7: (bg: #b1b489, color: #a1a479), - theme-8: (bg: #a17299, color: #916289), - theme-9: (bg: #696c67, color: #595c57), - theme-10: (bg: #cabb33, color: #baab23) + theme-1: ( + bg: #269abc, + color: #168aac + ), + theme-2: ( + bg: #7da9b0, + color: #6d99a0 + ), + theme-3: ( + bg: #7689ab, + color: #66799b + ), + theme-4: ( + bg: #c74e3e, + color: #b73e2e + ), + theme-5: ( + bg: #fab96c, + color: #eaa95c + ), + theme-6: ( + bg: #759d4c, + color: #658d3c + ), + theme-7: ( + bg: #b1b489, + color: #a1a479 + ), + theme-8: ( + bg: #a17299, + color: #916289 + ), + theme-9: ( + bg: #696c67, + color: #595c57 + ), + theme-10: ( + bg: #cabb33, + color: #baab23 + ) ); .adf-app-list-spinner, @@ -26,7 +57,7 @@ $tile-themes: ( flex-direction: column; height: 85vh; - #{$mat-progress-spinner} { + #{ms.$mat-progress-spinner} { margin: 0 auto; } } @@ -46,12 +77,12 @@ $tile-themes: ( flex: 1 1 33.3333%; max-width: 33.3333%; - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { flex: 1 1 50%; max-width: 50%; } - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { flex: 1 1 100%; max-width: 100%; } @@ -59,12 +90,12 @@ $tile-themes: ( &-card { @for $i from 1 through 10 { &.theme-#{$i} { - $tile-theme: map-get($tile-themes, theme-#{$i}); + $tile-theme: map.get($tile-themes, theme-#{$i}); - background-color: map-get($tile-theme, bg); + background-color: map.get($tile-theme, bg); .adf-app-listgrid-item-card-logo-icon { - color: map-get($tile-theme, color); + color: map.get($tile-theme, color); } } } @@ -72,15 +103,12 @@ $tile-themes: ( outline: none; flex-direction: column; display: flex; - transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), - box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); + transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); min-height: 200px; padding: 0; &:hover { - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12), - 0 5px 5px -3px rgba(0, 0, 0, 0.2); + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); cursor: pointer; transform: scale(1.015); } diff --git a/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss b/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss index ee0bacf2de..64847b7d4c 100644 --- a/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss +++ b/lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../styles/flex' as flex; .adf-attachment-list-loading-margin { margin-left: calc((100% - 100px) / 2); @@ -41,7 +41,7 @@ object-fit: contain; margin-top: 17px; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { width: 250px; } } diff --git a/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss b/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss index cf42ed31cb..416d2a3773 100644 --- a/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss +++ b/lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../styles/flex' as flex; .adf-attachment-list-loading-margin { margin-left: calc((100% - 100px) / 2); @@ -23,7 +23,7 @@ word-break: break-all; white-space: pre-line; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { font-size: 40px; } } @@ -46,7 +46,7 @@ object-fit: contain; margin-top: 17px; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { width: 250px; } } diff --git a/lib/process-services/src/lib/form/start-form/start-form.component.scss b/lib/process-services/src/lib/form/start-form/start-form.component.scss index 53164ccfc5..73e8beee87 100644 --- a/lib/process-services/src/lib/form/start-form/start-form.component.scss +++ b/lib/process-services/src/lib/form/start-form/start-form.component.scss @@ -1,23 +1,23 @@ -@import 'styles/mat-selectors'; +@use '../../styles/mat-selectors' as ms; .adf-form-container { max-width: 100%; max-height: 100%; - & #{$mat-card} { + & #{ms.$mat-card} { padding: 16px 24px; overflow: hidden; } - & #{$mat-card-header-text} { + & #{ms.$mat-card-header-text} { margin: 0; } - & #{$mat-tab-body-content} { + & #{ms.$mat-tab-body-content} { overflow: hidden; } - & #{$mat-tab-label-text} { + & #{ms.$mat-tab-label-text} { font-size: var(--theme-subheading-2-font-size); line-height: var(--theme-headline-line-height); letter-spacing: -0.4px; @@ -26,79 +26,79 @@ text-transform: uppercase; } - & #{$mat-tab-ink-bar} { + & #{ms.$mat-tab-ink-bar} { height: 4px; } - & #{$mat-form-field-wrapper} { + & #{ms.$mat-form-field-wrapper} { margin: 0 12px 0 0; } } - .adf-form-container-card { - .adf { - &-form-title { - font-size: var(--theme-title-font-size); +.adf-form-container-card { + .adf { + &-form-title { + font-size: var(--theme-title-font-size); + } + + &-form-debug-container { + padding: 10px; + } + + &-form-debug-container .adf-debug-toggle-text { + padding-left: 15px; + cursor: pointer; + } + + &-form-debug-container .adf-debug-toggle-text:hover { + font-weight: bold; + } + + &-form-reload-button { + position: absolute; + right: 12px; + top: 30px; + } + + &-form-validation-button { + position: absolute; + right: 50px; + top: 39px; + color: var(--theme-accent-color); + + & .adf-invalid-color { + color: var(--theme-warn-color); + } + } + + &-form-hide-button { + display: none; + } + + &-task-title { + text-align: center; + } + + &-label { + width: 32px; + height: 16px; + font-size: var(--theme-caption-font-size); + line-height: var(--theme-headline-line-height); + text-align: left; + white-space: nowrap; + } + + &-form-mat-card-actions { + float: right; + padding-bottom: 25px; + padding-right: 25px; + + & #{ms.$mat-button} { + height: 36px; + border-radius: 5px; } - &-form-debug-container { - padding: 10px; - } - - &-form-debug-container .adf-debug-toggle-text { - padding-left: 15px; - cursor: pointer; - } - - &-form-debug-container .adf-debug-toggle-text:hover { - font-weight: bold; - } - - &-form-reload-button { - position: absolute; - right: 12px; - top: 30px; - } - - &-form-validation-button { - position: absolute; - right: 50px; - top: 39px; - color: var(--theme-accent-color); - - & .adf-invalid-color { - color: var(--theme-warn-color); - } - } - - &-form-hide-button { - display: none; - } - - &-task-title { - text-align: center; - } - - &-label { - width: 32px; - height: 16px; - font-size: var(--theme-caption-font-size); - line-height: var(--theme-headline-line-height); - text-align: left; - white-space: nowrap; - } - - &-form-mat-card-actions { - float: right; - padding-bottom: 25px; - padding-right: 25px; - - & #{$mat-button} { - height: 36px; - border-radius: 5px; - } - - & #{$mat-button-label} { + & #{ms.$mat-button-label} { width: 58px; height: 20px; opacity: 0.54; @@ -109,11 +109,10 @@ } } - form-field { width: 100%; - #{$mat-input-element} { + #{ms.$mat-input-element} { font-size: var(--theme-body-2-font-size); padding-top: 8px; line-height: normal; diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss index 69251d4626..15c806f0f9 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss @@ -1,7 +1,7 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-attach-file-widget-dialog { - #{$mat-dialog-actions} { + #{ms.$mat-dialog-actions} { background-color: var(--theme-background-color); display: flex; justify-content: flex-end; @@ -30,7 +30,6 @@ } } -#{$mat-dialog-surface} { +#{ms.$mat-dialog-surface} { overflow-x: hidden; } - diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss index b6e033b258..0e49abcf9a 100644 --- a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss +++ b/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf { &-attach-folder-widget-container { @@ -28,7 +28,7 @@ &-attach-folder-files-row { padding-left: 8px; - #{$mat-line} { + #{ms.$mat-line} { margin-bottom: 0; } } @@ -42,7 +42,7 @@ display: flex; flex-direction: row-reverse; - #{$mat-icon} { + #{ms.$mat-icon} { margin-left: 4px; margin-right: 0; } diff --git a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss index 0446f3e2ce..1a31db4cf5 100644 --- a/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss +++ b/lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf { &-dropdown-widget { @@ -9,7 +9,7 @@ width: 100%; } - #{$mat-select-value-text} { + #{ms.$mat-select-value-text} { font-size: var(--theme-body-1-font-size); } diff --git a/lib/process-services/src/lib/form/widgets/people/people.widget.scss b/lib/process-services/src/lib/form/widgets/people/people.widget.scss index 4640ecf150..b7bd46ca05 100644 --- a/lib/process-services/src/lib/form/widgets/people/people.widget.scss +++ b/lib/process-services/src/lib/form/widgets/people/people.widget.scss @@ -1,10 +1,10 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf { &-people-widget { width: 100%; - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { top: 10px; } diff --git a/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss b/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss index c5476f8532..e17f8f993e 100644 --- a/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss +++ b/lib/process-services/src/lib/form/widgets/upload/upload.widget.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf { &-upload-widget-container { @@ -27,7 +27,7 @@ } &-upload-files-row { - #{$mat-line} { + #{ms.$mat-line} { margin-bottom: 0; } } diff --git a/lib/process-services/src/lib/people/components/people/people.component.scss b/lib/process-services/src/lib/people/components/people/people.component.scss index 0b0ad6bed8..5d8d2118af 100644 --- a/lib/process-services/src/lib/people/components/people/people.component.scss +++ b/lib/process-services/src/lib/people/components/people/people.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-assignment-header { border-bottom: 1px solid var(--adf-theme-foreground-divider-color); @@ -26,7 +26,7 @@ } } -.adf-assignment-top-container#{$mat-card} { +.adf-assignment-top-container#{ms.$mat-card} { border-top: 1px solid var(--adf-theme-foreground-divider-color); margin: 0; padding: 0; diff --git a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss b/lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss index 022013d1a2..0a6e9c54f7 100644 --- a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss +++ b/lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss @@ -1,5 +1,5 @@ -@import 'styles/flex'; -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; +@use '../../../styles/flex' as flex; .adf { &-start-process { @@ -12,7 +12,7 @@ width: 100%; } - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { color: var(--adf-theme-mat-grey-color-a200-dark); } @@ -22,7 +22,7 @@ text-align: right; } - #{$mat-button} { + #{ms.$mat-button} { width: auto; padding: 0 16px; margin: 0 8px; @@ -40,7 +40,7 @@ } &-process-name { - margin-top: 16px + margin-top: 16px; } } @@ -62,11 +62,11 @@ } &-start-form-container { - #{$mat-card-content} { + #{ms.$mat-card-content} { margin-bottom: 100px; } - #{$mat-card-header} { + #{ms.$mat-card-header} { display: none; } @@ -81,7 +81,7 @@ padding-bottom: 16px; button { - text-wrap: none; + text-wrap: nowrap; } } @@ -92,11 +92,11 @@ align-items: baseline; .adf-start-process-definition-select { - .mat-mdc-select-arrow-wrapper { - transform: none; + #{ms.$mat-select-arrow-wrapper} { + transform: none; svg { - fill: initial; + fill: currentcolor; } } } @@ -107,7 +107,7 @@ } } -@include layout-bp(lt-sm) { +@include flex.layout-bp(lt-sm) { .adf-start-process { width: 90%; margin-left: auto; diff --git a/lib/process-services/src/lib/styles/flex.scss b/lib/process-services/src/lib/styles/flex.scss new file mode 100644 index 0000000000..c11802eec2 --- /dev/null +++ b/lib/process-services/src/lib/styles/flex.scss @@ -0,0 +1,81 @@ +@charset "UTF-8"; +/* stylelint-disable */ + +// Non-overlapping Material Design breakpoints +// @type map +$breakpoints: ( + xs: ( + begin: 0, + end: 599.9px + ), + sm: ( + begin: 600px, + end: 959.9px + ), + md: ( + begin: 960px, + end: 1279.9px + ), + lg: ( + begin: 1280px, + end: 1919.9px + ), + xl: ( + begin: 1920px, + end: 4999.99px + ) +) !default; + +// Overlapping breakpoints that are greater than defined +// Material Design breakpoints +// @type map +$overlapping-gt: ( + gt-xs: 600px, + gt-sm: 960px, + gt-md: 1280px, + gt-lg: 1920px +) !default; + +// Overlapping breakpoints that are less than defined +// Material Design breakpoints +// @type map +$overlapping-lt: ( + lt-sm: 599.9px, + lt-md: 959.9px, + lt-lg: 1279.9px, + lt-xl: 1919.9px +) !default; + +// Media Query Mixin, takes a breakpoint and returns a wrapping +// media query statement +// e.g. +// +// @include layout-bp(xs) { +// background-color: red; +// } +// +// becomes +// +// @media (min-width: 0px) and (max-width: 599px) { +// background-color: red; +// } +@mixin layout-bp($bp) { + @if map-has-key($breakpoints, $bp) { + $min: map-get(map-get($breakpoints, $bp), begin); + $max: map-get(map-get($breakpoints, $bp), end); + @media (min-width: $min) and (max-width: $max) { + @content; + } + } @else if map-has-key($overlapping-gt, $bp) { + $min: map-get($overlapping-gt, $bp); + @media (min-width: $min) { + @content; + } + } @else if map-has-key($overlapping-lt, $bp) { + $max: map-get($overlapping-lt, $bp); + @media (max-width: $max) { + @content; + } + } +} +/* stylelint-enable */ diff --git a/lib/process-services/src/lib/styles/mat-selectors.scss b/lib/process-services/src/lib/styles/mat-selectors.scss new file mode 100644 index 0000000000..d4c5d1dcbe --- /dev/null +++ b/lib/process-services/src/lib/styles/mat-selectors.scss @@ -0,0 +1,25 @@ +/* Variables in this file are used in the Angular Material library. Do not modify them unless you know what you are doing. */ + +$mat-progress-spinner: '.mat-mdc-progress-spinner'; +$mat-card: '.mat-mdc-card'; +$mat-card-header-text: '.mat-mdc-card-header-text'; +$mat-card-content: '.mat-mdc-card-content'; +$mat-card-header: '.mat-mdc-card-header'; +$mat-card-title: '.mat-mdc-card-title'; +$mat-tab-body-content: '.mat-mdc-tab-body-content'; +$mat-tab-label-text: '.mdc-tab__text-label'; +$mat-tab-ink-bar: '.mdc-tab-indicator'; +$mat-form-field-wrapper: '.mat-mdc-text-field-wrapper'; +$mat-button: '.mat-mdc-button'; +$mat-button-label: '.mdc-button__label'; +$mat-input-element: '.mat-mdc-input-element'; +$mat-dialog-actions: '.mat-mdc-dialog-actions'; +$mat-line: '.mat-line'; +$mat-icon: '.mat-icon'; +$mat-select-value-text: '.mat-mdc-select-value-text'; +$mat-form-field-label: '.mat-mdc-floating-label'; +$mat-form-field: '.mat-mdc-form-field'; +$mat-form-field-prefix: '.mat-mdc-form-field-text-prefix'; +$mat-slide-toggle: '.mat-mdc-slide-toggle'; +$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper'; +$mat-dialog-surface: '.mat-mdc-dialog-surface'; diff --git a/lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss b/lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss index 31ef2a71fc..163f66138c 100644 --- a/lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss +++ b/lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss @@ -1,7 +1,7 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-attach-form { - #{$mat-form-field} { + #{ms.$mat-form-field} { width: 100%; } diff --git a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss index 108c458b61..4a5c247afa 100644 --- a/lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss +++ b/lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; :host { width: 100%; @@ -8,7 +8,7 @@ font-weight: bolder; } -#{$mat-form-field} { +#{ms.$mat-form-field} { width: 100%; } diff --git a/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss b/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss index dee85b0edb..161b9d920a 100644 --- a/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss +++ b/lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss @@ -1,12 +1,12 @@ -@import 'styles/flex'; -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; +@use '../../../styles/flex' as flex; /* stylelint-disable no-descending-specificity */ .adf-new-task-heading { padding-top: 12px; border-bottom: 1px solid var(--adf-theme-foreground-divider-color); - #{$mat-card-title} { + #{ms.$mat-card-title} { font-weight: bold; font-size: var(--theme-adf-task-title-font-size); } @@ -32,11 +32,11 @@ } .adf-input-row { - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { flex-direction: column; } - @include layout-bp(lt-md) { + @include flex.layout-bp(lt-md) { mat-form-field { margin-right: 20px; } @@ -48,7 +48,7 @@ box-sizing: border-box; max-width: 48%; - @include layout-bp(lt-sm) { + @include flex.layout-bp(lt-sm) { max-width: 100%; } } @@ -69,20 +69,20 @@ } adf-start-task { - #{$mat-button}.adf-uppercase { + #{ms.$mat-button}.adf-uppercase { text-transform: uppercase; } people-widget.adf-people-widget-content { width: 100%; - #{$mat-form-field-label} { + #{ms.$mat-form-field-label} { top: -14px; } } .adf-people-widget-content { - #{$mat-form-field} { + #{ms.$mat-form-field} { width: 100%; } @@ -96,7 +96,7 @@ adf-start-task { } .adf { - &-start-task-input-container #{$mat-form-field-wrapper} { + &-start-task-input-container #{ms.$mat-form-field-wrapper} { padding-top: 8px; } @@ -136,7 +136,7 @@ adf-start-task { border-color: var(--theme-warn-color); } - #{$mat-form-field-prefix} { + #{ms.$mat-form-field-prefix} { color: var(--theme-warn-color); } diff --git a/lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss b/lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss index 2f75d6f0f7..dd1284f69a 100644 --- a/lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-details/task-details.component.scss @@ -1,5 +1,5 @@ -@import 'styles/flex'; -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; +@use '../../../styles/flex' as flex; adf-task-details { width: 100%; @@ -55,7 +55,7 @@ adf-task-details { &-sidebar { &-drawer { - @include layout-bp(lt-lg) { + @include flex.layout-bp(lt-lg) { margin-left: 0; } } @@ -76,7 +76,7 @@ adf-task-details { flex-direction: column; padding: 20px 0; - #{$mat-slide-toggle} { + #{ms.$mat-slide-toggle} { margin-left: auto; & + div { @@ -89,7 +89,7 @@ adf-task-details { } } - & #{$mat-tab-label-text} { + & #{ms.$mat-tab-label-text} { flex-grow: 1; } } diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss index 7237a79a4e..3a00189562 100644 --- a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-task-form { &-container { @@ -10,12 +10,12 @@ padding-right: 25px; padding-bottom: 25px; - & #{$mat-button} { + & #{ms.$mat-button} { height: 36px; border-radius: 5px; } - & #{$mat-button-label} { + & #{ms.$mat-button-label} { width: 58px; height: 20px; opacity: 0.54; diff --git a/lib/process-services/src/lib/task-list/components/task-header/task-header.component.scss b/lib/process-services/src/lib/task-list/components/task-header/task-header.component.scss index 0b4fc431e9..c90bc205ca 100644 --- a/lib/process-services/src/lib/task-list/components/task-header/task-header.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-header/task-header.component.scss @@ -1,4 +1,4 @@ -@import 'styles/flex'; +@use '../../../styles/flex' as flex; .adf { &-controls { @@ -27,7 +27,7 @@ } } -@include layout-bp(lt-md) { +@include flex.layout-bp(lt-md) { adf-card-view .adf-property-value { text-overflow: ellipsis; overflow: hidden; diff --git a/lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss b/lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss index 930bb572f9..ea45a5c943 100644 --- a/lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-standalone/task-standalone.component.scss @@ -1,4 +1,4 @@ -@import 'styles/mat-selectors'; +@use '../../../styles/mat-selectors' as ms; .adf-message-card { width: 60%; @@ -49,7 +49,7 @@ border-radius: 5px; } - & #{$mat-button-label} { + & #{ms.$mat-button-label} { opacity: 0.54; font-size: var(--theme-button-font-size); font-weight: bold;