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:
Denys Vuika
GitHub
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
@import 'styles/mat-selectors';
|
||||
@use '../../styles/mat-selectors' as ms;
|
||||
|
||||
.adf-form-container {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
& #{$mat-card} {
|
||||
& #{ms.$mat-card} {
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& #{$mat-card-header-text} {
|
||||
& #{ms.$mat-card-header-text} {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& #{$mat-tab-body-content} {
|
||||
& #{ms.$mat-tab-body-content} {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& #{$mat-tab-label-text} {
|
||||
& #{ms.$mat-tab-label-text} {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
letter-spacing: -0.4px;
|
||||
@@ -26,79 +26,79 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& #{$mat-tab-ink-bar} {
|
||||
& #{ms.$mat-tab-ink-bar} {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
& #{$mat-form-field-wrapper} {
|
||||
& #{ms.$mat-form-field-wrapper} {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-form-container-card {
|
||||
.adf {
|
||||
&-form-title {
|
||||
font-size: var(--theme-title-font-size);
|
||||
.adf-form-container-card {
|
||||
.adf {
|
||||
&-form-title {
|
||||
font-size: var(--theme-title-font-size);
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: var(--theme-accent-color);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px;
|
||||
padding-right: 25px;
|
||||
|
||||
& #{ms.$mat-button} {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: var(--theme-accent-color);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px;
|
||||
padding-right: 25px;
|
||||
|
||||
& #{$mat-button} {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
& #{$mat-button-label} {
|
||||
& #{ms.$mat-button-label} {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
@@ -109,11 +109,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
form-field {
|
||||
width: 100%;
|
||||
|
||||
#{$mat-input-element} {
|
||||
#{ms.$mat-input-element} {
|
||||
font-size: var(--theme-body-2-font-size);
|
||||
padding-top: 8px;
|
||||
line-height: normal;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'styles/flex';
|
||||
@import 'styles/mat-selectors';
|
||||
@use '../../../styles/mat-selectors' as ms;
|
||||
@use '../../../styles/flex' as flex;
|
||||
|
||||
.adf {
|
||||
&-start-process {
|
||||
@@ -12,7 +12,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#{$mat-form-field-label} {
|
||||
#{ms.$mat-form-field-label} {
|
||||
color: var(--adf-theme-mat-grey-color-a200-dark);
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#{$mat-button} {
|
||||
#{ms.$mat-button} {
|
||||
width: auto;
|
||||
padding: 0 16px;
|
||||
margin: 0 8px;
|
||||
@@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
&-process-name {
|
||||
margin-top: 16px
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,11 +62,11 @@
|
||||
}
|
||||
|
||||
&-start-form-container {
|
||||
#{$mat-card-content} {
|
||||
#{ms.$mat-card-content} {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
#{$mat-card-header} {
|
||||
#{ms.$mat-card-header} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
padding-bottom: 16px;
|
||||
|
||||
button {
|
||||
text-wrap: none;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -92,11 +92,11 @@
|
||||
align-items: baseline;
|
||||
|
||||
.adf-start-process-definition-select {
|
||||
.mat-mdc-select-arrow-wrapper {
|
||||
transform: none;
|
||||
#{ms.$mat-select-arrow-wrapper} {
|
||||
transform: none;
|
||||
|
||||
svg {
|
||||
fill: initial;
|
||||
fill: currentcolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -107,7 +107,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-bp(lt-sm) {
|
||||
@include flex.layout-bp(lt-sm) {
|
||||
.adf-start-process {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
|
||||
81
lib/process-services/src/lib/styles/flex.scss
Normal file
81
lib/process-services/src/lib/styles/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 */
|
||||
25
lib/process-services/src/lib/styles/mat-selectors.scss
Normal file
25
lib/process-services/src/lib/styles/mat-selectors.scss
Normal 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';
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'styles/flex';
|
||||
@import 'styles/mat-selectors';
|
||||
@use '../../../styles/mat-selectors' as ms;
|
||||
@use '../../../styles/flex' as flex;
|
||||
|
||||
adf-task-details {
|
||||
width: 100%;
|
||||
@@ -55,7 +55,7 @@ adf-task-details {
|
||||
|
||||
&-sidebar {
|
||||
&-drawer {
|
||||
@include layout-bp(lt-lg) {
|
||||
@include flex.layout-bp(lt-lg) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -76,7 +76,7 @@ adf-task-details {
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
|
||||
#{$mat-slide-toggle} {
|
||||
#{ms.$mat-slide-toggle} {
|
||||
margin-left: auto;
|
||||
|
||||
& + div {
|
||||
@@ -89,7 +89,7 @@ adf-task-details {
|
||||
}
|
||||
}
|
||||
|
||||
& #{$mat-tab-label-text} {
|
||||
& #{ms.$mat-tab-label-text} {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'styles/mat-selectors';
|
||||
@use '../../../styles/mat-selectors' as ms;
|
||||
|
||||
.adf-task-form {
|
||||
&-container {
|
||||
@@ -10,12 +10,12 @@
|
||||
padding-right: 25px;
|
||||
padding-bottom: 25px;
|
||||
|
||||
& #{$mat-button} {
|
||||
& #{ms.$mat-button} {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
& #{$mat-button-label} {
|
||||
& #{ms.$mat-button-label} {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'styles/flex';
|
||||
@use '../../../styles/flex' as flex;
|
||||
|
||||
.adf {
|
||||
&-controls {
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-bp(lt-md) {
|
||||
@include flex.layout-bp(lt-md) {
|
||||
adf-card-view .adf-property-value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'styles/mat-selectors';
|
||||
@use '../../../styles/mat-selectors' as ms;
|
||||
|
||||
.adf-message-card {
|
||||
width: 60%;
|
||||
@@ -49,7 +49,7 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
& #{$mat-button-label} {
|
||||
& #{ms.$mat-button-label} {
|
||||
opacity: 0.54;
|
||||
font-size: var(--theme-button-font-size);
|
||||
font-weight: bold;
|
||||
|
||||
Reference in New Issue
Block a user