inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-34493 Improved internal mat-selectors (#10829)

Browse Source
This commit is contained in:
Denys Vuika
2025-04-28 11:17:36 -04:00
committed by GitHub
parent dc35ef8a6f
commit b1113c51a7
104 changed files with 1131 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.scss
View File

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

5
lib/content-services/src/lib/aspect-list/aspect-list.component.scss
View File

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

4
lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss
View File

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

8
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
View File

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

10
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

@@ -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 */

20
lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss
View File

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

6
lib/content-services/src/lib/content-node-selector/content-node-selector.component.scss
View File

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

6
lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
View File

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

10
lib/content-services/src/lib/dialogs/folder/folder.dialog.scss
View File

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

18
lib/content-services/src/lib/dialogs/library/library.dialog.scss
View File

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

8
lib/content-services/src/lib/document-list/components/document-list.component.scss
View File

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

81
lib/content-services/src/lib/flex.scss Normal file
View File

@@ -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 */

190
lib/content-services/src/lib/mat-selectors.scss Normal file
View File

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

10
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss
View File

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

12
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss
View File

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

4
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.scss
View File

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

6
lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.scss
View File

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

14
lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-control.component.scss
View File

@@ -1,5 +1,5 @@
@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
@@ -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;

4
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range-tabbed.component.scss
View File

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

8
lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
View File

@@ -1,4 +1,4 @@
@import "styles/mat-selectors";
@use '../../../../mat-selectors' as ms;
adf-search-date-range {
.adf-search-date-range-container {
@@ -20,7 +20,7 @@ adf-search-date-range {
margin-top: 8px;
}
#{$mat-select-arrow-wrapper} {
#{ms.$mat-select-arrow-wrapper} {
height: unset;
}
@@ -33,10 +33,10 @@ adf-search-date-range {
flex: 1;
margin-bottom: 12px;
#{$mat-form-field-flex} {
#{ms.$mat-form-field-flex} {
align-items: center;
#{$mat-form-field-infix} {
#{ms.$mat-form-field-infix} {
padding: 0.375em 0 4px;
}
}

6
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.scss
View File

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

8
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss
View File

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

6
lib/content-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
View File

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

4
lib/content-services/src/lib/search/components/search-form/search-form.component.scss
View File

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

40
lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
View File

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

2
lib/content-services/src/lib/search/components/search-text/search-text.component.scss
View File

@@ -1,5 +1,3 @@
@import 'styles/mat-selectors';
.adf-search-text {
padding: 0;

6
lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
View File

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

6
lib/content-services/src/lib/version-manager/version-upload.component.scss
View File

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

6
lib/core/feature-flags/src/lib/components/flags/flags.component.scss
View File

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

2
lib/core/feature-flags/src/lib/mat-selectors.scss Normal file
View File

@@ -0,0 +1,2 @@
$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
$mat-line-ripple: '.mdc-line-ripple';

6
lib/core/shell/src/lib/components/shell/shell.component.scss
View File

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

81
lib/core/shell/src/lib/styles/flex.scss Normal file
View File

@@ -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 */

8
lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
View File

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

4
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

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

10
lib/core/src/lib/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
View File

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

16
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

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

6
lib/core/src/lib/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
View File

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

12
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

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

20
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

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

18
lib/core/src/lib/comments/comments.component.scss
View File

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

26
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

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

4
lib/core/src/lib/dialogs/edit-json/edit-json.dialog.scss
View File

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

6
lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
View File

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

36
lib/core/src/lib/form/components/form-renderer.component.scss
View File

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

8
lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
View File

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

8
lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
View File

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

12
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
View File

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

17
lib/core/src/lib/form/components/widgets/form.theme.scss
View File

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

4
lib/core/src/lib/form/components/widgets/text/text.widget.scss
View File

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

6
lib/core/src/lib/identity-user-info/identity-user-info.component.scss
View File

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

16
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
View File

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

20
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

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

4
lib/core/src/lib/layout/components/header/header.component.scss
View File

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

6
lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
View File

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

12
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
View File

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

10
lib/core/src/lib/login/components/login/login.component.scss
View File

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

8
lib/core/src/lib/notifications/components/notification-history.component.scss
View File

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

4
lib/core/src/lib/search-text/search-text-input.component.scss
View File

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

4
lib/core/src/lib/snackbar-content/snackbar-content.component.scss
View File

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

10
lib/core/src/lib/styles/_mat-selectors.scss
View File

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

53
lib/core/src/lib/styles/material.theme.scss
View File

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

2
lib/core/src/lib/templates/empty-content/empty-content.component.scss
View File

@@ -1,5 +1,3 @@
@import 'styles/mat-selectors';
.adf-empty-content {
color: var(--adf-theme-foreground-text-color-054);
display: flex;

4
lib/core/src/lib/templates/error-content/error-content.component.scss
View File

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

4
lib/core/src/lib/viewer/components/img-viewer/img-viewer.component.scss
View File

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

6
lib/core/src/lib/viewer/components/pdf-viewer/pdf-viewer.component.scss
View File

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

1
lib/core/src/lib/viewer/components/viewer-render/viewer-render.component.scss
View File

@@ -1,5 +1,4 @@
/* stylelint-disable scss/at-extend-no-missing-placeholder */
@import 'styles/mat-selectors';
.adf-full-screen {
width: 100%;

6
lib/core/src/lib/viewer/components/viewer.component.scss
View File

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

4
lib/insights/src/lib/analytics-process/components/buttons-menu/buttons-menu.component.scss
View File

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

3
lib/insights/src/lib/analytics-process/mat-selectors.scss Normal file
View File

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

6
lib/process-services-cloud/src/lib/app/components/app-list-cloud/app-list-cloud.component.scss
View File

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

81
lib/process-services-cloud/src/lib/flex.scss Normal file
View File

@@ -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 */

6
lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
View File

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

8
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.scss
View File

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

4
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
View File

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

9
lib/process-services-cloud/src/lib/mat-selectors.scss Normal file
View File

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

4
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter/edit-process-filter-cloud.component.scss
View File

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

4
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter/edit-service-task-filter-cloud.component.scss
View File

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

4
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter/edit-task-filter-cloud.component.scss
View File

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

6
lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud/task-form-cloud.component.scss
View File

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

4
lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.scss
View File

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

74
lib/process-services/src/lib/app-list/apps-list.component.scss
View File

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

4
lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.scss
View File

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

6
lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.scss
View File

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

23
lib/process-services/src/lib/form/start-form/start-form.component.scss
View File

@@ -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,16 +26,16 @@
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-container-card {
.adf {
&-form-title {
font-size: var(--theme-title-font-size);
@@ -93,12 +93,12 @@
padding-bottom: 25px;
padding-right: 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;
@@ -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;

7
lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget-dialog.component.scss
View File

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

6
lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss
View File

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

4
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.scss
View File

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

4
lib/process-services/src/lib/form/widgets/people/people.widget.scss
View File

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

4
lib/process-services/src/lib/form/widgets/upload/upload.widget.scss
View File

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

4
lib/process-services/src/lib/people/components/people/people.component.scss
View File

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

22
lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss
View File

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

81
lib/process-services/src/lib/styles/flex.scss Normal file
View File

@@ -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 */

25
lib/process-services/src/lib/styles/mat-selectors.scss Normal file
View File

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

4
lib/process-services/src/lib/task-list/components/attach-form/attach-form.component.scss
View File

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

4
lib/process-services/src/lib/task-list/components/checklist/checklist.component.scss
View File

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

22
lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
View File

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

Some files were not shown because too many files have changed in this diff Show More