diff --git a/src/assets/styles/common-autocomplete.scss b/src/assets/styles/common-autocomplete.scss index 5be01bc..2190ac2 100644 --- a/src/assets/styles/common-autocomplete.scss +++ b/src/assets/styles/common-autocomplete.scss @@ -1,11 +1,12 @@ @use 'common-mixins'; -.mat-autocomplete-panel { +.mat-mdc-autocomplete-panel { @include common-mixins.scroll-bar; + background-color: var(--iqser-background); border-radius: 8px; - .mat-option { + .mat-mdc-option { font-size: inherit; } } diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index e940b0b..2a52f51 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -53,23 +53,8 @@ iqser-dynamic-input { } } - .mat-form-field-underline { - display: none; - } - - .mat-form-field-wrapper, - .mat-form-field-infix { - padding-bottom: 0; - } - - .mat-form-field-label { - opacity: 0.7 !important; - color: var(--iqser-text) !important; - transform: translateY(-1.34em) !important; - } - - .mat-form-field-required-marker { - display: none; + .mdc-floating-label { + transform: none; } &:first-child { @@ -96,12 +81,46 @@ iqser-dynamic-input { color: var(--iqser-white); } + .mat-mdc-text-field-wrapper { + padding: 0; + } + input, - textarea, - mat-select { + textarea { box-sizing: border-box; + margin-top: 3px; + min-height: var(--iqser-inputs-height); + line-height: 32px; padding-left: 11px; padding-right: 11px; + } + + .mat-mdc-form-field { + margin-top: 3px; + + input { + margin-top: 0; + } + } + + .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + --mdc-shape-small: 8px; // border-radius + border-color: var(--iqser-inputs-outline); + } + + .mdc-text-field--focused .mdc-notched-outline__leading, + .mdc-text-field--focused .mdc-notched-outline__notch, + .mdc-text-field--focused .mdc-notched-outline__trailing { + border-width: 1px; + } + + input, + textarea { border: 1px solid var(--iqser-inputs-outline); font-family: var(--iqser-font-family); font-size: var(--iqser-font-size); @@ -109,14 +128,12 @@ iqser-dynamic-input { color: var(--iqser-text); border-radius: 8px; outline: none; - margin-top: 3px; - min-height: 36px; &.with-icon { padding-right: 34px; } - &:focus:not(:disabled):not(.mat-select-disabled) { + &:focus:not(:disabled) { border-color: var(--iqser-text); } @@ -132,12 +149,13 @@ iqser-dynamic-input { border-color: var(--iqser-primary); } } + } - &:disabled, - &.mat-select-disabled { - background-color: var(--iqser-alt-background); - color: rgba(var(--iqser-text-rgb), 0.3); - } + input:disabled, + textarea:disabled, + .mdc-text-field--disabled { + background-color: var(--iqser-alt-background); + color: rgba(var(--iqser-text-rgb), 0.3); } textarea { @@ -149,26 +167,6 @@ iqser-dynamic-input { max-width: 150px; } - mat-select, - .mat-select.mat-select-disabled { - .mat-select-trigger { - height: 32px; - } - - .mat-select-placeholder { - color: rgba(var(--iqser-text-rgb), 0.4); - } - - .mat-select-value { - vertical-align: middle; - color: var(--iqser-text); - } - - .mat-select-arrow { - color: rgba(var(--iqser-text-rgb), 0.7); - } - } - textarea { resize: vertical; padding-top: 7px; diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index 7f48c26..de7a56c 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -1,42 +1,39 @@ @use 'common-mixins'; -.mat-select-panel { +.mat-mdc-select { + padding: 0 11px; + box-sizing: border-box; + line-height: var(--iqser-inputs-height); +} + +.mat-mdc-select-panel { padding: 7px 0 !important; + min-width: fit-content; background-color: var(--iqser-background); @include common-mixins.scroll-bar; - - .mat-option { - margin: 1px 8px; - border-radius: 4px; - color: var(--iqser-text); - - &:hover:not(.mat-option-disabled), - &:focus:not(.mat-option-disabled) { - background-color: var(--iqser-btn-bg); - } - - &.mat-selected:not(.mat-option-multiple) { - background-color: rgba(var(--iqser-primary-rgb), 0.2); - } - - &.mat-option-disabled { - color: rgba(var(--iqser-text-rgb), 0.7); - } - } + @include common-mixins.drop-shadow; } -.mat-form-field.no-label .mat-form-field-infix { - padding: 0 !important; - border-top: 0 !important; +.mat-mdc-select-arrow-wrapper { + margin-left: 10px; } -mat-select { - .mat-select-value, - .mat-select-arrow { - color: var(--iqser-text); +.mat-mdc-option { + margin: 1px 8px; + border-radius: 4px; + color: var(--iqser-text); + + &:hover:not(.mdc-list-item--disabled, .mdc-list-item--selected), + &:focus:not(.mdc-list-item--disabled, .mdc-list-item--selected) { + background-color: var(--iqser-btn-bg); } - .mat-select-arrow { - margin-left: 6px; + &.mdc-list-item--selected { + background-color: rgba(var(--iqser-primary-rgb), 0.2); + color: var(--iqser-primary); + } + + &.mdc-list-item--disabled { + color: rgba(var(--iqser-text-rgb), 0.7); } } diff --git a/src/lib/inputs/inputs.module.ts b/src/lib/inputs/inputs.module.ts index ef8cf19..3558135 100644 --- a/src/lib/inputs/inputs.module.ts +++ b/src/lib/inputs/inputs.module.ts @@ -11,6 +11,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { DynamicInputComponent } from './dynamic-input/dynamic-input.component'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatInputModule } from '@angular/material/input'; +import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; const modules = [ IqserIconsModule, @@ -27,5 +28,6 @@ const components = [RoundCheckboxComponent, EditableInputComponent, InputWithAct declarations: [...components], exports: [...components], imports: [CommonModule, ...modules], + providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }], }) export class IqserInputsModule {}