mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-7768] unify inputs and selects across the app (#9687)
* Changed ng version before material migration * migration for material' * Fixed most of unit tests failing * [affected:*][ci:force] Fixing rebase * [affected:*][ci:force] attempt to fix mat-selectors importing * [affected:*][ci:force] Fixing the styles - check * AAE-21392 Fix dropdown form widget style (#9605) * ACS-7768 Applied new styles for inputs * ACS-7768 Align icon * ACS-7768 Input colors based on input state * ACS-7768 Corrected spaces * ACS-7768 Styles for selectboxes * ACS-7768 Fixed label jumping on hovering * ACS-7768 Style inputs for add permission panel, user role column and comments, styles for inputs without label * ACS-7768 Style inputs in search filters * ACS-7768 Set appearance for inputs globally to outline * ACS-7768 Style inputs for share dialog and login page * ACS-7768 Style inputs in properties panel * ACS-7768 Fixed white background when disabled field * ACS-7768 Moved setting outline appearance for inputs to ACA, fix issue for inputs in permission container * Revert "[affected:*][ci:force] Fixing the styles - check" This reverts commit80d971f7ab. * Revert "[affected:*][ci:force] attempt to fix mat-selectors importing" This reverts commit821d9e1864. * Revert "[affected:*][ci:force] Fixing rebase" This reverts commit378c6c2000. * Revert "Fixed most of unit tests failing" This reverts commit44948e0a28. * ACS-7768 Reverted unwanted changes --------- Co-authored-by: Vito Albano <vito.albano@hyland.com> Co-authored-by: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
This commit is contained in:
AleksanderSklorz
committed by
VitoAlbano
VitoAlbano
parent
00b8e5f790
commit
a410fbec7f
@@ -1,24 +1,14 @@
|
||||
<label
|
||||
class="adf-property-label"
|
||||
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
|
||||
*ngIf="showProperty || isEditable"
|
||||
[attr.for]="'card-view-dateitem-' + property.key"
|
||||
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
|
||||
>
|
||||
{{ property.label | translate }}
|
||||
</label>
|
||||
<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
|
||||
<span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
|
||||
<span
|
||||
*ngIf="showProperty"
|
||||
[attr.data-automation-id]="'card-dateitem-' + property.key"
|
||||
(dblclick)="copyToClipboard(property.displayValue)"
|
||||
matTooltipShowDelay="1000"
|
||||
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
|
||||
>{{ property.displayValue }}</span
|
||||
<mat-form-field *ngIf="!property.multivalued" class="adf-dateitem-editable">
|
||||
<mat-label
|
||||
class="adf-property-label"
|
||||
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
|
||||
*ngIf="showProperty || isEditable"
|
||||
[attr.for]="'card-view-dateitem-' + property.key"
|
||||
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
|
||||
>
|
||||
</span>
|
||||
<div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
|
||||
{{ property.label | translate }}
|
||||
</mat-label>
|
||||
<div class="adf-dateitem-editable-controls">
|
||||
<span
|
||||
class="adf-datepicker-toggle"
|
||||
@@ -28,13 +18,18 @@
|
||||
role="button"
|
||||
(keyup.enter)="showDatePicker()"
|
||||
>
|
||||
<span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
|
||||
<span
|
||||
(dblclick)="copyToClipboard(property.displayValue)"
|
||||
matTooltipShowDelay="1000"
|
||||
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
|
||||
*ngIf="showProperty; else elseEmptyValueBlock"
|
||||
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
|
||||
{{ property.displayValue }}</span
|
||||
>
|
||||
</span>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="showClearAction"
|
||||
*ngIf="showClearAction && isEditable"
|
||||
class="adf-date-reset-icon"
|
||||
(click)="onDateClear()"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
|
||||
@@ -44,6 +39,7 @@
|
||||
</mat-icon>
|
||||
|
||||
<mat-datetimepicker-toggle
|
||||
*ngIf="isEditable"
|
||||
[attr.tabindex]="-1"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.data-automation-id]="'datepickertoggle-' + property.key"
|
||||
@@ -53,9 +49,11 @@
|
||||
</div>
|
||||
|
||||
<input
|
||||
matInput
|
||||
class="adf-invisible-date-input"
|
||||
[attr.tabIndex]="-1"
|
||||
[matDatetimepicker]="datetimePicker"
|
||||
[disabled]="!isEditable"
|
||||
[value]="valueDate"
|
||||
(dateChange)="onDateChanged($event)"
|
||||
[attr.id]="'card-view-dateitem-' + property.key"
|
||||
@@ -69,12 +67,12 @@
|
||||
[startAt]="valueDate"
|
||||
>
|
||||
</mat-datetimepicker>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<ng-template #elseEmptyValueBlock>
|
||||
{{ property.default | translate }}
|
||||
</ng-template>
|
||||
|
||||
<div *ngIf="property.multivalued"
|
||||
<mat-form-field *ngIf="property.multivalued"
|
||||
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
|
||||
<mat-chip-listbox #chipList class="adf-textitem-chip-list">
|
||||
<mat-chip-option
|
||||
@@ -85,7 +83,15 @@
|
||||
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
|
||||
</mat-chip-option>
|
||||
</mat-chip-listbox>
|
||||
|
||||
<mat-label
|
||||
class="adf-property-label"
|
||||
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
|
||||
*ngIf="showProperty || isEditable"
|
||||
[attr.for]="'card-view-dateitem-' + property.key"
|
||||
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
|
||||
>
|
||||
{{ property.label | translate }}
|
||||
</mat-label>
|
||||
<div
|
||||
*ngIf="isEditable"
|
||||
class="adf-property-field adf-dateitem-editable-controls"
|
||||
@@ -95,6 +101,7 @@
|
||||
(keyup.enter)="showDatePicker()"
|
||||
>
|
||||
<input
|
||||
matInput
|
||||
class="adf-invisible-date-input"
|
||||
[attr.tabIndex]="-1"
|
||||
[matDatetimepicker]="datetimePicker"
|
||||
@@ -118,5 +125,5 @@
|
||||
>
|
||||
</mat-datetimepicker>
|
||||
</div>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -9,28 +9,33 @@
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
margin-top: 10px;
|
||||
|
||||
&.adf-property-value-editable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border-bottom: inherit;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
&:not(.adf-property-readonly-value) {
|
||||
#{$mat-text-field-disabled} {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
&.adf-property-readonly-value {
|
||||
padding: 0 0 0 12px;
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-invisible-date-input {
|
||||
height: 2px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
#{$mat-form-field-wrapper} {
|
||||
#{$mat-form-field-input-control} {
|
||||
&.adf-invisible-date-input {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-dateitem-chip-list-container.adf-property-field {
|
||||
@@ -40,8 +45,7 @@
|
||||
}
|
||||
|
||||
.adf-dateitem-editable {
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
&-controls {
|
||||
@@ -57,8 +61,6 @@
|
||||
}
|
||||
|
||||
#{$mat-icon} {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
@@ -71,9 +73,6 @@
|
||||
}
|
||||
|
||||
.adf-date-reset-icon {
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,37 +1,34 @@
|
||||
<ng-container *ngIf="!property.isEmpty() || isEditable">
|
||||
<div
|
||||
[attr.data-automation-id]="'card-select-label-' + property.key"
|
||||
class="adf-property-label"
|
||||
[ngClass]="{
|
||||
'adf-property-value-editable': isEditable,
|
||||
'adf-property-readonly-value': isReadonlyProperty
|
||||
}"
|
||||
>{{ property.label | translate }}</div>
|
||||
<div class="adf-property-field">
|
||||
<div
|
||||
*ngIf="!isEditable"
|
||||
class="adf-property-value adf-property-read-only"
|
||||
[attr.data-automation-id]="'select-readonly-value-' + property.key"
|
||||
data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
|
||||
</div>
|
||||
<div *ngIf="isEditable">
|
||||
<mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': isEditable}">
|
||||
<mat-select
|
||||
[(value)]="value"
|
||||
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
|
||||
panelClass="adf-select-filter"
|
||||
(selectionChange)="onChange($event)"
|
||||
data-automation-class="select-box"
|
||||
[aria-label]="property.label | translate">
|
||||
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
|
||||
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
|
||||
<mat-option
|
||||
*ngFor="let option of list$ | async"
|
||||
[value]="option.key">
|
||||
{{ option.label | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field class="adf-property-value" [ngClass]="{
|
||||
'adf-property-value-editable': isEditable,
|
||||
'adf-property-read-only': !isEditable
|
||||
}">
|
||||
<mat-label
|
||||
[attr.data-automation-id]="'card-select-label-' + property.key"
|
||||
class="adf-property-label adf-property-value-editable"
|
||||
[ngClass]="{
|
||||
'adf-property-readonly-value': isReadonlyProperty
|
||||
}">
|
||||
{{ property.label | translate }}
|
||||
</mat-label>
|
||||
<mat-select
|
||||
[attr.data-automation-id]="'select-readonly-value-' + property.key"
|
||||
[(value)]="value"
|
||||
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
|
||||
panelClass="adf-select-filter"
|
||||
(selectionChange)="onChange($event)"
|
||||
data-automation-class="select-box"
|
||||
[aria-label]="property.label | translate"
|
||||
[disabled]="!isEditable">
|
||||
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
|
||||
<mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
|
||||
<mat-option
|
||||
*ngFor="let option of list$ | async"
|
||||
[value]="option.key">
|
||||
{{ option.label | translate }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -24,17 +24,6 @@
|
||||
#{$mat-form-field-wrapper} {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
|
||||
mat-select {
|
||||
padding: 6px 0 8px 12px;
|
||||
margin-top: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
#{$mat-select-value} {
|
||||
color: var(--adf-metadata-action-button-clear-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-subscript-wrapper} {
|
||||
@@ -42,9 +31,19 @@
|
||||
}
|
||||
|
||||
.adf-property-read-only {
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
|
||||
#{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-line-ripple {
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
[ngClass]="{
|
||||
'adf-property-read-only': !isEditable
|
||||
}"
|
||||
[floatLabel]="'always'"
|
||||
>
|
||||
<mat-label
|
||||
*ngIf="showProperty || isEditable"
|
||||
|
||||
@@ -55,8 +55,17 @@
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
.adf-property-read-only:not(:has(.adf-property-readonly-value)) {
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
.adf-property-read-only {
|
||||
&:not(:has(.adf-property-readonly-value)) {
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
}
|
||||
|
||||
#{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-property-readonly-value {
|
||||
|
||||
@@ -6,32 +6,11 @@
|
||||
border-color: var(--adf-card-view-border-color);
|
||||
border-radius: var(--adf-card-view-border-radius);
|
||||
|
||||
.adf-property-label {
|
||||
color: var(--adf-metadata-property-panel-text-color);
|
||||
display: flex;
|
||||
padding: 3px 0;
|
||||
line-height: 20px;
|
||||
|
||||
&.adf-property-value-editable {
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
}
|
||||
|
||||
&.adf-property-readonly-value {
|
||||
color: var(--adf-metadata-property-panel-label-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-property-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.adf-property {
|
||||
.adf-card-view-textitem {
|
||||
.adf-property-field {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-property-field {
|
||||
width: 100%;
|
||||
|
||||
@@ -41,7 +20,6 @@
|
||||
|
||||
#{mat-input-element} {
|
||||
text-overflow: ellipsis;
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
padding: 6px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
@@ -60,59 +38,11 @@
|
||||
#{$mat-form-field-flex} {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#{$mat-form-field-wrapper} {
|
||||
background-color: inherit;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#{$mat-form-field-label} {
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 20px;
|
||||
|
||||
&.adf-property-field-label--empty {
|
||||
transform: translateY(-1.3437em) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-property-value {
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
|
||||
&.adf-property-value-editable {
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
background-color: var(--adf-metadata-buttons-background-color);
|
||||
border-radius: 6px;
|
||||
height: 32px;
|
||||
padding-left: 10px;
|
||||
|
||||
#{$mat-input-element} {
|
||||
color: var(--adf-metadata-action-button-clear-color);
|
||||
padding: 5px 0 6px 12px;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.adf-property-readonly-value {
|
||||
color: var(--adf-metadata-property-panel-label-color);
|
||||
|
||||
#{$mat-input-element} {
|
||||
color: var(--adf-metadata-property-panel-label-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-has-error {
|
||||
border: 1px solid var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&-input {
|
||||
background-color: var(--adf-metadata-buttons-background-color);
|
||||
border-radius: 6px;
|
||||
padding: 6px 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -9,6 +9,7 @@ adf-comments {
|
||||
.adf-comments-input-container {
|
||||
width: 100%;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
|
||||
@@ -183,10 +183,6 @@
|
||||
|
||||
.adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
|
||||
color: var(--adf-theme-foreground-text-color);
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
top: 9px;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.adf-login-controls:has(div) {
|
||||
@@ -204,26 +200,6 @@
|
||||
padding-bottom: 16px;
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
|
||||
#{$mat-form-field-infix} {
|
||||
min-height: 0;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 20px;
|
||||
|
||||
.adf-login-form-input-label {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
}
|
||||
|
||||
#{$mat-floating-label-float-above} {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
#{$mat-floating-label--required} {
|
||||
&::after {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& input:-webkit-autofill {
|
||||
/* stylelint-disable */
|
||||
-webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
|
||||
@@ -235,16 +211,17 @@
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: var(--theme-warn-color);
|
||||
color: var(--adf-error-input-color);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: var(--theme-warn-color);
|
||||
color: var(--adf-error-input-color);
|
||||
position: absolute;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
|
||||
@@ -89,6 +89,13 @@
|
||||
--adf-danger-button-background: $adf-danger-button-background,
|
||||
--adf-secondary-button-background: $adf-secondary-button-background,
|
||||
|
||||
--adf-input-text-color: $adf-input-text-color,
|
||||
--adf-input-border-color: $adf-input-border-color,
|
||||
--adf-focused-input-color: $adf-focused-input-color,
|
||||
--adf-error-input-color: $adf-error-input-color,
|
||||
--adf-hint-input-color: $adf-hint-input-color,
|
||||
--adf-disabled-input-color: $adf-disabled-input-color,
|
||||
|
||||
--adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
|
||||
);
|
||||
|
||||
|
||||
@@ -51,7 +51,12 @@ $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-form-field-label-always-float: '.mat-mdc-form-field-label-always-float';
|
||||
$mat-form-field-input-control: '.mat-mdc-form-field-input-control';
|
||||
$mat-text-field-outlined: '.mdc-text-field--outlined';
|
||||
$mat-text-field-disabled: '.mdc-text-field--disabled';
|
||||
$mat-text-field-focused: '.mdc-text-field--focused';
|
||||
$mat-text-field-invalid: '.mdc-text-field--invalid';
|
||||
$mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
|
||||
$mat-dialog-actions: '.mat-mdc-dialog-actions';
|
||||
$mat-dialog-container: '.mdc-dialog__container';
|
||||
@@ -74,6 +79,7 @@ $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-invalid: '.mat-mdc-select-invalid';
|
||||
$mat-select-value-text: '.mat-mdc-select-value-text';
|
||||
$mat-select-panel: '.mat-mdc-select-panel';
|
||||
$mat-grid-tile: '.mat-grid-tile';
|
||||
@@ -113,6 +119,10 @@ $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-notched-outline-notched: '.mdc-notched-outline--notched';
|
||||
$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-icon-suffix: '.mat-mdc-form-field-icon-suffix';
|
||||
$mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
|
||||
$mat-select-trigger: '.mat-mdc-select-trigger';
|
||||
$mat-select-arrow: '.mat-mdc-select-arrow';
|
||||
@@ -126,3 +136,4 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
|
||||
$mat-snackbar: '.mdc-snackbar';
|
||||
$mat-snack-bar-container: '.mat-mdc-snack-bar-container';
|
||||
$mat-snackbar-label: '.mdc-snackbar__label';
|
||||
$mat-date-range-input-container: '.mat-date-range-input-container';
|
||||
|
||||
@@ -27,3 +27,9 @@ $adf-ref-header-icon-color: inherit;
|
||||
$adf-ref-header-icon-border-radius: 50%;
|
||||
$adf-danger-button-background: #ba1b1b;
|
||||
$adf-secondary-button-background: #2121210d;
|
||||
$adf-input-text-color: rgb(33, 33, 33);
|
||||
$adf-input-border-color: rgba(33, 33, 33, 0.24);
|
||||
$adf-focused-input-color: rgb(0, 133, 53);
|
||||
$adf-error-input-color: rgb(186, 27, 27);
|
||||
$adf-hint-input-color: rgba(33, 33, 33, 0.7);
|
||||
$adf-disabled-input-color: rgba(33, 33, 33, 0.12);
|
||||
|
||||
@@ -2,17 +2,17 @@
|
||||
|
||||
$alfresco-typography: mat.define-typography-config(
|
||||
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
|
||||
$headline-1: mat.define-typography-level(112px, 112px, 300),
|
||||
$headline-2: mat.define-typography-level(56px, 56px, 400),
|
||||
$headline-3: mat.define-typography-level(45px, 48px, 400),
|
||||
$headline-4: mat.define-typography-level(34px, 40px, 400),
|
||||
$headline-5: mat.define-typography-level(24px, 32px, 400),
|
||||
$headline-6: mat.define-typography-level(20px, 32px, 500),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$body-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.define-typography-level(12px, 20px, 400),
|
||||
$button: mat.define-typography-level(14px, 14px, 500),
|
||||
$headline-1: mat.define-typography-level(112px, 112px, 300),
|
||||
$headline-2: mat.define-typography-level(56px, 56px, 400),
|
||||
$headline-3: mat.define-typography-level(45px, 48px, 400),
|
||||
$headline-4: mat.define-typography-level(34px, 40px, 400),
|
||||
$headline-5: mat.define-typography-level(24px, 32px, 400),
|
||||
$headline-6: mat.define-typography-level(20px, 32px, 500),
|
||||
$subtitle-1: mat.define-typography-level(16px, 28px, 400),
|
||||
$body-1: mat.define-typography-level(15px, 24px, 400),
|
||||
$subtitle-2: mat.define-typography-level(14px, 24px, 500),
|
||||
$body-2: mat.define-typography-level(14px, 20px, 400),
|
||||
$caption: mat.define-typography-level(12px, 20px, 400),
|
||||
$button: mat.define-typography-level(14px, 14px, 500),
|
||||
// Line-height must be unit-less fraction of the font-size.
|
||||
);
|
||||
|
||||
@@ -68,4 +68,159 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-appearance-outline} {
|
||||
#{$mat-text-field-outlined} {
|
||||
padding-top: 14px;
|
||||
padding-left: 12px;
|
||||
|
||||
&#{$mat-text-field--no-label} {
|
||||
#{$mat-form-field-infix} {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
#{$mat-form-field-icon-suffix} {
|
||||
#{$mat-icon} {
|
||||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-notched-outline} {
|
||||
padding-bottom: 2px;
|
||||
|
||||
&#{$mat-notched-outline-notched} {
|
||||
#{$mat-notched-outline-notch} {
|
||||
top: 15px;
|
||||
position: absolute;
|
||||
border: none;
|
||||
left: 9px
|
||||
}
|
||||
}
|
||||
|
||||
&:not(#{$mat-notched-outline-notched}) {
|
||||
#{$mat-notched-outline-notch} {
|
||||
|
||||
#{$mat-form-field-label} {
|
||||
top: 30px;
|
||||
left: -5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#{$mat-form-field-label} {
|
||||
color: var(--adf-input-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-icon-suffix} {
|
||||
#{$mat-icon} {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border-color: var(--adf-input-border-color);
|
||||
}
|
||||
|
||||
&:not(#{$mat-text-field-disabled}) {
|
||||
&:hover, &#{$mat-text-field-focused}, &#{$mat-text-field-invalid} {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&#{$mat-text-field-focused} {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
|
||||
border-color: var(--adf-focused-input-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
#{$mat-notched-outline} {
|
||||
&:not(#{$mat-notched-outline-notched}) {
|
||||
#{$mat-notched-outline-notch} {
|
||||
#{$mat-form-field-label} {
|
||||
top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#{$mat-text-field-invalid} {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
|
||||
border-color: var(--adf-error-input-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#{$mat-text-field-disabled} {
|
||||
#{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
|
||||
background-color: var(--adf-disabled-input-color);
|
||||
}
|
||||
|
||||
#{$mat-notched-outline}:not(#{$mat-notched-outline-notched}) {
|
||||
#{$mat-notched-outline-notch} {
|
||||
background-color: var(--adf-disabled-input-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-text-filed-input} {
|
||||
color: var(--adf-input-text-color);
|
||||
}
|
||||
|
||||
#{$mat-select-value-text} {
|
||||
color: var(--adf-input-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-select} {
|
||||
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(#{$mat-text-field--no-label}) {
|
||||
#{$mat-select} {
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
margin-top: -6px;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$mat-form-field-hint-wrapper}, #{$mat-form-field-error-wrapper} {
|
||||
padding-left: 9px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#{$mat-form-field-hint-wrapper} {
|
||||
color: var(--adf-hint-input-color);
|
||||
}
|
||||
|
||||
#{$mat-form-field-error-wrapper} {
|
||||
color: var(--adf-error-input-color);
|
||||
}
|
||||
|
||||
&#{$mat-focused} {
|
||||
#{$mat-select} {
|
||||
#{$mat-select-arrow} {
|
||||
color: var(--adf-focused-input-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#{$mat-focused}#{$mat-select}, #{$mat-select} {
|
||||
&#{$mat-select-invalid} {
|
||||
#{$mat-select-arrow} {
|
||||
color: var(--adf-error-input-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user