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

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

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

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

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

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

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

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

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

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

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

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

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;