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