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 - revert (#9699)
* Revert "[ACS-7768] unify inputs and selects across the app (#9687)"
This reverts commit 7cfb5ea64a.
* ACS-7768 Little correction
This commit is contained in:
AleksanderSklorz
committed by
VitoAlbano
VitoAlbano
parent
802d196840
commit
d2b3dae05a
@@ -1,14 +1,24 @@
|
||||
<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 }">
|
||||
<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 *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
|
||||
>
|
||||
{{ property.label | translate }}
|
||||
</mat-label>
|
||||
</span>
|
||||
<div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
|
||||
<div class="adf-dateitem-editable-controls">
|
||||
<span
|
||||
class="adf-datepicker-toggle"
|
||||
@@ -18,18 +28,13 @@
|
||||
role="button"
|
||||
(keyup.enter)="showDatePicker()"
|
||||
>
|
||||
<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">
|
||||
<span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
|
||||
{{ property.displayValue }}</span
|
||||
>
|
||||
</span>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="showClearAction && isEditable"
|
||||
*ngIf="showClearAction"
|
||||
class="adf-date-reset-icon"
|
||||
(click)="onDateClear()"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
|
||||
@@ -39,7 +44,6 @@
|
||||
</mat-icon>
|
||||
|
||||
<mat-datetimepicker-toggle
|
||||
*ngIf="isEditable"
|
||||
[attr.tabindex]="-1"
|
||||
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
|
||||
[attr.data-automation-id]="'datepickertoggle-' + property.key"
|
||||
@@ -49,11 +53,9 @@
|
||||
</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"
|
||||
@@ -67,12 +69,12 @@
|
||||
[startAt]="valueDate"
|
||||
>
|
||||
</mat-datetimepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<ng-template #elseEmptyValueBlock>
|
||||
{{ property.default | translate }}
|
||||
</ng-template>
|
||||
|
||||
<mat-form-field *ngIf="property.multivalued"
|
||||
<div *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
|
||||
@@ -83,15 +85,7 @@
|
||||
<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"
|
||||
@@ -101,7 +95,6 @@
|
||||
(keyup.enter)="showDatePicker()"
|
||||
>
|
||||
<input
|
||||
matInput
|
||||
class="adf-invisible-date-input"
|
||||
[attr.tabIndex]="-1"
|
||||
[matDatetimepicker]="datetimePicker"
|
||||
@@ -125,5 +118,5 @@
|
||||
>
|
||||
</mat-datetimepicker>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,33 +9,28 @@
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
margin-top: 10px;
|
||||
|
||||
&: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-value-editable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
border-bottom: inherit;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
#{$mat-select-arrow-wrapper} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.adf-property-readonly-value {
|
||||
padding: 0 0 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$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-invisible-date-input {
|
||||
height: 2px;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.adf-dateitem-chip-list-container.adf-property-field {
|
||||
@@ -45,7 +40,8 @@
|
||||
}
|
||||
|
||||
.adf-dateitem-editable {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
padding: 0 12px;
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
&-controls {
|
||||
@@ -61,6 +57,8 @@
|
||||
}
|
||||
|
||||
#{$mat-icon} {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
@@ -73,6 +71,9 @@
|
||||
}
|
||||
|
||||
.adf-date-reset-icon {
|
||||
line-height: 10px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,34 +1,37 @@
|
||||
<ng-container *ngIf="!property.isEmpty() || isEditable">
|
||||
<div class="adf-property-field">
|
||||
<mat-form-field class="adf-property-value" [ngClass]="{
|
||||
<div
|
||||
[attr.data-automation-id]="'card-select-label-' + property.key"
|
||||
class="adf-property-label"
|
||||
[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>
|
||||
'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>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -24,6 +24,17 @@
|
||||
#{$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} {
|
||||
@@ -31,19 +42,9 @@
|
||||
}
|
||||
|
||||
.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,6 +5,7 @@
|
||||
[ngClass]="{
|
||||
'adf-property-read-only': !isEditable
|
||||
}"
|
||||
[floatLabel]="'always'"
|
||||
>
|
||||
<mat-label
|
||||
*ngIf="showProperty || isEditable"
|
||||
|
||||
@@ -55,17 +55,8 @@
|
||||
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);
|
||||
}
|
||||
|
||||
#{$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-read-only:not(:has(.adf-property-readonly-value)) {
|
||||
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
}
|
||||
|
||||
.adf-property-readonly-value {
|
||||
|
||||
@@ -6,11 +6,32 @@
|
||||
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%;
|
||||
|
||||
@@ -20,6 +41,7 @@
|
||||
|
||||
#{mat-input-element} {
|
||||
text-overflow: ellipsis;
|
||||
color: var(--adf-metadata-property-panel-title-color);
|
||||
padding: 6px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
@@ -38,11 +60,59 @@
|
||||
#{$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,7 +9,6 @@ adf-comments {
|
||||
.adf-comments-input-container {
|
||||
width: 100%;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 8px;
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
|
||||
@@ -183,6 +183,10 @@
|
||||
|
||||
.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) {
|
||||
@@ -200,6 +204,26 @@
|
||||
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;
|
||||
@@ -211,17 +235,16 @@
|
||||
|
||||
.adf-login-validation {
|
||||
background-color: transparent;
|
||||
color: var(--adf-error-input-color);
|
||||
color: var(--theme-warn-color);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
|
||||
.adf-login-error {
|
||||
color: var(--adf-error-input-color);
|
||||
color: var(--theme-warn-color);
|
||||
position: absolute;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
margin-top: -12px;
|
||||
display: block;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
|
||||
@@ -89,13 +89,6 @@
|
||||
--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,12 +51,7 @@ $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';
|
||||
@@ -79,7 +74,6 @@ $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';
|
||||
@@ -119,10 +113,6 @@ $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';
|
||||
@@ -136,4 +126,3 @@ $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,9 +27,3 @@ $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);
|
||||
|
||||
@@ -68,159 +68,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$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