mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-34493 Improved internal mat-selectors (#10829)
This commit is contained in:
@@ -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
81
lib/process-services-cloud/src/lib/flex.scss
Normal 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 */
|
@@ -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;
|
||||
}
|
||||
|
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
@@ -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
9
lib/process-services-cloud/src/lib/mat-selectors.scss
Normal 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';
|
@@ -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) {
|
||||
|
@@ -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) {
|
||||
|
@@ -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) {
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user