From 1e4247c24750f979e3f3e139f5882884355c65e2 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 25 Aug 2023 23:22:47 +0300 Subject: [PATCH 1/2] update styles to fix material changes --- src/assets/styles/common-inputs.scss | 580 +++++++++--------- src/assets/styles/common-select.scss | 56 +- src/assets/styles/common-toggle.scss | 58 +- src/lib/dialog/iqser-dialog.service.ts | 23 +- .../editable-input.component.ts | 8 +- 5 files changed, 365 insertions(+), 360 deletions(-) diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index adb9d4f..568469d 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -2,319 +2,323 @@ form .iqser-input-group:not(first-of-type), iqser-dynamic-input:not(first-of-type) { - margin-top: 14px; + margin-top: 14px; } iqser-dynamic-input { - display: flex; + display: flex; } .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { - padding-top: 0; - padding-bottom: 0; - min-height: var(--iqser-inputs-height); + padding-top: 0; + padding-bottom: 0; + min-height: var(--iqser-inputs-height); } .iqser-input-group { + display: flex; + flex-direction: column; + position: relative; + height: fit-content; + + .hint { + margin-top: 5px; + font-size: 11px; + line-height: 14px; + opacity: 0.7; + } + + .input-icon { + position: absolute; + left: 114px; + bottom: 1px; + background: var(--iqser-grey-5); + height: 34px; + width: 34px; + border-left: 1px solid var(--iqser-inputs-outline); + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; + cursor: pointer; + transition: background-color 0.25s ease; display: flex; - flex-direction: column; + align-items: center; + justify-content: center; + + &:hover { + background: var(--iqser-btn-bg); + } + + mat-icon { + width: 14px; + height: 14px; + color: var(--iqser-accent); + } + + &.disabled { + cursor: default; + } + } + + &:first-child { + margin-top: 0; + } + + .icon-right { + width: 14px; + height: 14px; + position: absolute; + top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); + right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); + } + + .slider-row { + display: flex; + flex-direction: row; + align-items: center; + } + + .mat-button-toggle-checked { + background: var(--iqser-primary); + transition: background-color 0.25s ease; + color: var(--iqser-white); + } + + .mat-mdc-text-field-wrapper { + padding: 0; + } + + .mdc-text-field { + background: var(--iqser-background); + } + + input:not([type='checkbox']), + textarea { + box-sizing: border-box; + margin-top: 3px; + min-height: var(--iqser-inputs-height); + line-height: 32px; + padding-left: calc((var(--iqser-inputs-height) - 14px) / 2); + padding-right: calc((var(--iqser-inputs-height) - 14px) / 2); + } + + .mat-mdc-form-field { + margin-top: 3px; + + input { + margin-top: 0; + } + } + + .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + .mdc-text-field--outlined { + --mdc-outlined-text-field-focus-outline-width: 1px; + --mdc-shape-small: 8px; // border-radius + --mdc-outlined-text-field-container-shape: 8px; // border-radius + border-bottom-left-radius: var(--mdc-shape-small); + border-bottom-right-radius: var(--mdc-shape-small); + } + + .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-inputs-outline); + } + + &:hover { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-inputs-outline); + } + } + } + + .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-text); + } + + &:hover { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-text); + } + } + } + + .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-inputs-font-size); + background-color: var(--iqser-background); + color: var(--iqser-text); + border-radius: 8px; + outline: none; + + &.with-icon { + padding-right: 34px; + } + + &:focus:not(:disabled) { + border-color: var(--iqser-text); + } + + &::placeholder { + color: var(--iqser-text); + opacity: 0.7; + } + + &.ng-invalid.ng-touched { + border-color: rgba(var(--iqser-primary-rgb), 0.3); + + &:focus { + border-color: var(--iqser-primary); + } + } + } + + input:disabled, + textarea:disabled, + .mdc-text-field--disabled { + background-color: var(--iqser-alt-background); + color: rgba(var(--iqser-text-rgb), 0.3); + } + + textarea { + line-height: calc(var(--iqser-inputs-font-size) * 1.4); + } + + .hex-color-input { + width: 150px; + max-width: 150px; + } + + textarea { + resize: vertical; + padding-top: var(--iqser-textarea-padding-y); + padding-bottom: var(--iqser-textarea-padding-y); + @include mixins.scroll-bar; + + &.has-scrollbar { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) { + opacity: 0.7; + font-size: 11px; + letter-spacing: 0; + line-height: 14px; + margin-bottom: 2px; + color: var(--iqser-text); + + &.mat-checkbox-layout { + opacity: 1; + margin-bottom: 0; + } + } + + &.required label:after { + content: ' *'; + color: var(--iqser-primary); + } + + &.datepicker-wrapper { position: relative; - height: fit-content; + display: flex; + margin-top: 0; + width: 120px; - .hint { - margin-top: 5px; - font-size: 11px; - line-height: 14px; - opacity: 0.7; + .mat-datepicker-input { + margin-top: 0; + width: 120px; } - .input-icon { - position: absolute; - left: 114px; - bottom: 1px; - background: var(--iqser-grey-5); - height: 34px; - width: 34px; - border-left: 1px solid var(--iqser-inputs-outline); - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; - cursor: pointer; - transition: background-color 0.25s ease; - display: flex; - align-items: center; - justify-content: center; + .mat-datepicker-toggle { + position: absolute; + right: 0; + bottom: 1px; + color: var(--iqser-accent); - &:hover { - background: var(--iqser-btn-bg); - } - - mat-icon { - width: 14px; - height: 14px; - color: var(--iqser-accent); - } - - &.disabled { - cursor: default; - } - } - - &:first-child { - margin-top: 0; - } - - .icon-right { - width: 14px; - height: 14px; - position: absolute; - top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); - right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); - } - - .slider-row { - display: flex; - flex-direction: row; - align-items: center; - } - - .mat-button-toggle-checked { - background: var(--iqser-primary); - transition: background-color 0.25s ease; - color: var(--iqser-white); - } - - .mat-mdc-text-field-wrapper { - padding: 0; - } - - .mdc-text-field { - background: var(--iqser-background); - } - - input:not([type='checkbox']), - textarea { - box-sizing: border-box; - margin-top: 3px; - min-height: var(--iqser-inputs-height); - line-height: 32px; - padding-left: calc((var(--iqser-inputs-height) - 14px) / 2); - padding-right: calc((var(--iqser-inputs-height) - 14px) / 2); - } - - .mat-mdc-form-field { - margin-top: 3px; - - input { - margin-top: 0; - } - } - - .mat-mdc-form-field-subscript-wrapper { - display: none; - } - - .mdc-text-field--outlined { - --mdc-shape-small: 8px; // border-radius - } - - .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-inputs-outline); - } - - &:hover { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-inputs-outline); - } - } - } - - .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-text); - } - - &:hover { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-text); - } - } - } - - .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-inputs-font-size); - background-color: var(--iqser-background); - color: var(--iqser-text); - border-radius: 8px; - outline: none; - - &.with-icon { - padding-right: 34px; - } - - &:focus:not(:disabled) { - border-color: var(--iqser-text); - } - - &::placeholder { - color: var(--iqser-text); - opacity: 0.7; - } - - &.ng-invalid.ng-touched { - border-color: rgba(var(--iqser-primary-rgb), 0.3); - - &:focus { - border-color: var(--iqser-primary); - } - } - } - - input:disabled, - textarea:disabled, - .mdc-text-field--disabled { - background-color: var(--iqser-alt-background); - color: rgba(var(--iqser-text-rgb), 0.3); - } - - textarea { - line-height: calc(var(--iqser-inputs-font-size) * 1.4); - } - - .hex-color-input { - width: 150px; - max-width: 150px; - } - - textarea { - resize: vertical; - padding-top: var(--iqser-textarea-padding-y); - padding-bottom: var(--iqser-textarea-padding-y); - @include mixins.scroll-bar; - - &.has-scrollbar { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) { - opacity: 0.7; - font-size: 11px; - letter-spacing: 0; - line-height: 14px; - margin-bottom: 2px; - color: var(--iqser-text); - - &.mat-checkbox-layout { - opacity: 1; - margin-bottom: 0; - } - } - - &.required label:after { - content: ' *'; + &.mat-datepicker-toggle-active { color: var(--iqser-primary); + } + + .mat-icon-button { + width: 34px; + height: 34px; + line-height: 34px; + } + + mat-icon { + width: 14px; + } + + .mat-mdc-icon-button svg { + width: unset; + height: unset; + } } + } - &.datepicker-wrapper { - position: relative; - display: flex; - margin-top: 0; - width: 120px; + &.w-75 { + width: 75px; + max-width: 75px; + } - .mat-datepicker-input { - margin-top: 0; - width: 120px; - } + &.w-110 { + width: 110px; + max-width: 110px; + } - .mat-datepicker-toggle { - position: absolute; - right: 0; - bottom: 1px; - color: var(--iqser-accent); + &.w-150 { + max-width: 150px; + width: 150px; + } - &.mat-datepicker-toggle-active { - color: var(--iqser-primary); - } + &.w-160 { + width: 160px; + max-width: 160px; + } - .mat-icon-button { - width: 34px; - height: 34px; - line-height: 34px; - } + &.w-200 { + width: 200px; + max-width: 200px; + } - mat-icon { - width: 14px; - } + &.w-250 { + width: 250px; + max-width: 250px; + } - .mat-mdc-icon-button svg { - width: unset; - height: unset; - } - } - } + &.w-300 { + width: 300px; + max-width: 300px; + } - &.w-75 { - width: 75px; - max-width: 75px; - } + &.w-400 { + width: 400px; + max-width: 400px; + } - &.w-110 { - width: 110px; - max-width: 110px; - } + &.w-450 { + width: 450px; + max-width: 450px; + } - &.w-150 { - max-width: 150px; - width: 150px; - } - - &.w-160 { - width: 160px; - max-width: 160px; - } - - &.w-200 { - width: 200px; - max-width: 200px; - } - - &.w-250 { - width: 250px; - max-width: 250px; - } - - &.w-300 { - width: 300px; - max-width: 300px; - } - - &.w-400 { - width: 400px; - max-width: 400px; - } - - &.w-450 { - width: 450px; - max-width: 450px; - } - - &.w-full { - width: 100%; - max-width: 100%; - } + &.w-full { + width: 100%; + max-width: 100%; + } } diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index bae0bc9..c54742b 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -1,51 +1,51 @@ @use 'common-mixins'; .mat-mdc-select { - padding: 0 11px; - box-sizing: border-box; - line-height: var(--iqser-inputs-height); + padding: 0 11px; + box-sizing: border-box; + --mat-select-trigger-text-line-height: 36px; } .mat-mdc-select-panel { - padding: 7px 0 !important; - min-width: fit-content; - background-color: var(--iqser-background); - @include common-mixins.scroll-bar; - @include common-mixins.drop-shadow; + padding: 7px 0 !important; + min-width: fit-content; + background-color: var(--iqser-background); + @include common-mixins.scroll-bar; + @include common-mixins.drop-shadow; } .mat-mdc-select-arrow-wrapper { - margin-left: 10px; + margin-left: 10px; } .mat-mdc-option { - margin: 1px 8px; - border-radius: 4px; - color: var(--iqser-text); + 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); - } + &: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); + } - &.mdc-list-item--selected { - background-color: rgba(var(--iqser-primary-rgb), 0.2) !important; - color: var(--iqser-primary); - } + &.mdc-list-item--selected { + background-color: rgba(var(--iqser-primary-rgb), 0.2) !important; + color: var(--iqser-primary); + } - &.mdc-list-item--disabled { - color: rgba(var(--iqser-text-rgb), 0.7); - } + &.mdc-list-item--disabled { + color: rgba(var(--iqser-text-rgb), 0.7); + } - > span { - width: 100%; - } + > span { + width: 100%; + } } .mat-mdc-select-value { - color: var(--iqser-text); + color: var(--iqser-text); } .mat-mdc-option .mat-mdc-option-pseudo-checkbox { - display: none; + display: none; } diff --git a/src/assets/styles/common-toggle.scss b/src/assets/styles/common-toggle.scss index b82ed78..f463999 100644 --- a/src/assets/styles/common-toggle.scss +++ b/src/assets/styles/common-toggle.scss @@ -1,38 +1,40 @@ .mat-mdc-slide-toggle { - --mdc-switch-handle-elevation: none; + .mdc-switch { + --mdc-switch-handle-elevation: none; - --mdc-switch-selected-track-color: var(--iqser-primary); - --mdc-switch-selected-hover-track-color: var(--iqser-primary); - --mdc-switch-selected-pressed-track-color: var(--iqser-primary); - --mdc-switch-selected-focus-track-color: var(--iqser-primary); - --mdc-switch-disabled-selected-track-color: var(--iqser-primary); + --mdc-switch-selected-track-color: var(--iqser-primary); + --mdc-switch-selected-hover-track-color: var(--iqser-primary); + --mdc-switch-selected-pressed-track-color: var(--iqser-primary); + --mdc-switch-selected-focus-track-color: var(--iqser-primary); + --mdc-switch-disabled-selected-track-color: var(--iqser-primary); - --mdc-switch-unselected-track-color: var(--iqser-toggle-bg); - --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg); - --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg); - --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg); - --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-hover-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-pressed-track-color: var(--iqser-toggle-bg); + --mdc-switch-unselected-focus-track-color: var(--iqser-toggle-bg); + --mdc-switch-disabled-unselected-track-color: var(--iqser-toggle-bg); - --mdc-switch-selected-handle-color: var(--iqser-background); - --mdc-switch-selected-pressed-handle-color: var(--iqser-background); - --mdc-switch-selected-hover-handle-color: var(--iqser-background); - --mdc-switch-selected-focus-handle-color: var(--iqser-background); - --mdc-switch-disabled-selected-handle-color: var(--iqser-background); + --mdc-switch-selected-handle-color: var(--iqser-background); + --mdc-switch-selected-pressed-handle-color: var(--iqser-background); + --mdc-switch-selected-hover-handle-color: var(--iqser-background); + --mdc-switch-selected-focus-handle-color: var(--iqser-background); + --mdc-switch-disabled-selected-handle-color: var(--iqser-background); - --mdc-switch-unselected-handle-color: var(--iqser-alt-background); - --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background); - --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background); - --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background); - --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-pressed-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-hover-handle-color: var(--iqser-alt-background); + --mdc-switch-unselected-focus-handle-color: var(--iqser-alt-background); + --mdc-switch-disabled-unselected-handle-color: var(--iqser-alt-background); - --mdc-switch-disabled-track-opacity: 0.38; + --mdc-switch-disabled-track-opacity: 0.38; - --mdc-switch-track-width: 30px; - --mdc-switch-track-height: 16px; - --mdc-switch-track-shape: 8px; - --mdc-switch-handle-width: 12px; - --mdc-switch-handle-height: 12px; - --mdc-switch-handle-shape: 6px; + --mdc-switch-track-width: 30px; + --mdc-switch-track-height: 16px; + --mdc-switch-track-shape: 8px; + --mdc-switch-handle-width: 12px; + --mdc-switch-handle-height: 12px; + --mdc-switch-handle-shape: 6px; + } .mdc-form-field > label { margin-left: 8px; diff --git a/src/lib/dialog/iqser-dialog.service.ts b/src/lib/dialog/iqser-dialog.service.ts index 760adc9..599d65b 100644 --- a/src/lib/dialog/iqser-dialog.service.ts +++ b/src/lib/dialog/iqser-dialog.service.ts @@ -1,9 +1,9 @@ +import { ComponentType } from '@angular/cdk/portal'; import { inject, Injectable } from '@angular/core'; import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog'; -import { ComponentType } from '@angular/cdk/portal'; import { firstValueFrom } from 'rxjs'; -import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive'; import { defaultDialogConfig, largeDialogConfig } from './dialog.service'; +import { DATA_TYPE, IqserDialogComponent, RETURN_TYPE } from './iqser-dialog-component.directive'; @Injectable({ providedIn: 'root', @@ -12,32 +12,31 @@ export class IqserDialog { protected readonly _dialog = inject(MatDialog); open< - Component extends IqserDialogComponent, - Data extends Component[DATA_TYPE], - Return extends Component[RETURN_TYPE], + Component extends IqserDialogComponent, + Data extends Component[DATA_TYPE] = Component[DATA_TYPE], + Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE], >(dialog: ComponentType, config?: MatDialogConfig) { const ref = this._dialog.open(dialog, config); return { ...ref, result() { - console.log('result'); return firstValueFrom(ref.afterClosed()); }, } as MatDialogRef & { result(): Promise }; } openLarge< - Component extends IqserDialogComponent, - Data extends Component[DATA_TYPE], - Return extends Component[RETURN_TYPE], + Component extends IqserDialogComponent, + Data extends Component[DATA_TYPE] = Component[DATA_TYPE], + Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE], >(dialog: ComponentType, config?: MatDialogConfig) { return this.open(dialog, { ...largeDialogConfig, ...config }); } openDefault< - Component extends IqserDialogComponent, - Data extends Component[DATA_TYPE], - Return extends Component[RETURN_TYPE], + Component extends IqserDialogComponent, + Data extends Component[DATA_TYPE] = Component[DATA_TYPE], + Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE], >(dialog: ComponentType, config?: MatDialogConfig) { return this.open(dialog, { ...defaultDialogConfig, ...config }); } diff --git a/src/lib/inputs/editable-input/editable-input.component.ts b/src/lib/inputs/editable-input/editable-input.component.ts index 1a20d8a..bec7a5a 100644 --- a/src/lib/inputs/editable-input/editable-input.component.ts +++ b/src/lib/inputs/editable-input/editable-input.component.ts @@ -1,7 +1,7 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; -import { CircleButtonComponent, CircleButtonType } from '../../buttons'; import { NgIf } from '@angular/common'; +import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { FormsModule } from '@angular/forms'; +import { CircleButtonComponent, CircleButtonType, CircleButtonTypes } from '../../buttons'; @Component({ selector: 'iqser-editable-input [value]', @@ -22,9 +22,9 @@ export class EditableInputComponent implements OnChanges { @Input() class?: string; @Input() showPreview = true; @Input() canEdit = true; - @Input() buttonsType?: CircleButtonType; + @Input() buttonsType: CircleButtonType = CircleButtonTypes.default; @Output() readonly save = new EventEmitter(); - parentDimensions: { width: number; height: number }; + parentDimensions?: { width: number; height: number }; newValue = ''; private _editing = false; From 5a14bf79fa961a47e520914241d5d8b235550b33 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 25 Aug 2023 23:27:56 +0300 Subject: [PATCH 2/2] fix indent --- src/assets/styles/common-inputs.scss | 582 +++++++++++++-------------- src/assets/styles/common-select.scss | 56 +-- 2 files changed, 319 insertions(+), 319 deletions(-) diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss index 568469d..25b4f44 100644 --- a/src/assets/styles/common-inputs.scss +++ b/src/assets/styles/common-inputs.scss @@ -2,323 +2,323 @@ form .iqser-input-group:not(first-of-type), iqser-dynamic-input:not(first-of-type) { - margin-top: 14px; + margin-top: 14px; } iqser-dynamic-input { - display: flex; + display: flex; } .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix { - padding-top: 0; - padding-bottom: 0; - min-height: var(--iqser-inputs-height); + padding-top: 0; + padding-bottom: 0; + min-height: var(--iqser-inputs-height); } .iqser-input-group { - display: flex; - flex-direction: column; - position: relative; - height: fit-content; - - .hint { - margin-top: 5px; - font-size: 11px; - line-height: 14px; - opacity: 0.7; - } - - .input-icon { - position: absolute; - left: 114px; - bottom: 1px; - background: var(--iqser-grey-5); - height: 34px; - width: 34px; - border-left: 1px solid var(--iqser-inputs-outline); - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; - cursor: pointer; - transition: background-color 0.25s ease; display: flex; - align-items: center; - justify-content: center; - - &:hover { - background: var(--iqser-btn-bg); - } - - mat-icon { - width: 14px; - height: 14px; - color: var(--iqser-accent); - } - - &.disabled { - cursor: default; - } - } - - &:first-child { - margin-top: 0; - } - - .icon-right { - width: 14px; - height: 14px; - position: absolute; - top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); - right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); - } - - .slider-row { - display: flex; - flex-direction: row; - align-items: center; - } - - .mat-button-toggle-checked { - background: var(--iqser-primary); - transition: background-color 0.25s ease; - color: var(--iqser-white); - } - - .mat-mdc-text-field-wrapper { - padding: 0; - } - - .mdc-text-field { - background: var(--iqser-background); - } - - input:not([type='checkbox']), - textarea { - box-sizing: border-box; - margin-top: 3px; - min-height: var(--iqser-inputs-height); - line-height: 32px; - padding-left: calc((var(--iqser-inputs-height) - 14px) / 2); - padding-right: calc((var(--iqser-inputs-height) - 14px) / 2); - } - - .mat-mdc-form-field { - margin-top: 3px; - - input { - margin-top: 0; - } - } - - .mat-mdc-form-field-subscript-wrapper { - display: none; - } - - .mdc-text-field--outlined { - --mdc-outlined-text-field-focus-outline-width: 1px; - --mdc-shape-small: 8px; // border-radius - --mdc-outlined-text-field-container-shape: 8px; // border-radius - border-bottom-left-radius: var(--mdc-shape-small); - border-bottom-right-radius: var(--mdc-shape-small); - } - - .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-inputs-outline); - } - - &:hover { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-inputs-outline); - } - } - } - - .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-text); - } - - &:hover { - .mdc-notched-outline__leading, - .mdc-notched-outline__trailing { - border-color: var(--iqser-text); - } - } - } - - .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-inputs-font-size); - background-color: var(--iqser-background); - color: var(--iqser-text); - border-radius: 8px; - outline: none; - - &.with-icon { - padding-right: 34px; - } - - &:focus:not(:disabled) { - border-color: var(--iqser-text); - } - - &::placeholder { - color: var(--iqser-text); - opacity: 0.7; - } - - &.ng-invalid.ng-touched { - border-color: rgba(var(--iqser-primary-rgb), 0.3); - - &:focus { - border-color: var(--iqser-primary); - } - } - } - - input:disabled, - textarea:disabled, - .mdc-text-field--disabled { - background-color: var(--iqser-alt-background); - color: rgba(var(--iqser-text-rgb), 0.3); - } - - textarea { - line-height: calc(var(--iqser-inputs-font-size) * 1.4); - } - - .hex-color-input { - width: 150px; - max-width: 150px; - } - - textarea { - resize: vertical; - padding-top: var(--iqser-textarea-padding-y); - padding-bottom: var(--iqser-textarea-padding-y); - @include mixins.scroll-bar; - - &.has-scrollbar { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) { - opacity: 0.7; - font-size: 11px; - letter-spacing: 0; - line-height: 14px; - margin-bottom: 2px; - color: var(--iqser-text); - - &.mat-checkbox-layout { - opacity: 1; - margin-bottom: 0; - } - } - - &.required label:after { - content: ' *'; - color: var(--iqser-primary); - } - - &.datepicker-wrapper { + flex-direction: column; position: relative; - display: flex; - margin-top: 0; - width: 120px; + height: fit-content; - .mat-datepicker-input { - margin-top: 0; - width: 120px; + .hint { + margin-top: 5px; + font-size: 11px; + line-height: 14px; + opacity: 0.7; } - .mat-datepicker-toggle { - position: absolute; - right: 0; - bottom: 1px; - color: var(--iqser-accent); - - &.mat-datepicker-toggle-active { - color: var(--iqser-primary); - } - - .mat-icon-button { - width: 34px; + .input-icon { + position: absolute; + left: 114px; + bottom: 1px; + background: var(--iqser-grey-5); height: 34px; - line-height: 34px; - } + width: 34px; + border-left: 1px solid var(--iqser-inputs-outline); + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; + cursor: pointer; + transition: background-color 0.25s ease; + display: flex; + align-items: center; + justify-content: center; - mat-icon { - width: 14px; - } + &:hover { + background: var(--iqser-btn-bg); + } - .mat-mdc-icon-button svg { - width: unset; - height: unset; - } + mat-icon { + width: 14px; + height: 14px; + color: var(--iqser-accent); + } + + &.disabled { + cursor: default; + } } - } - &.w-75 { - width: 75px; - max-width: 75px; - } + &:first-child { + margin-top: 0; + } - &.w-110 { - width: 110px; - max-width: 110px; - } + .icon-right { + width: 14px; + height: 14px; + position: absolute; + top: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); + right: calc((var(--iqser-inputs-height) - 14px) / 2 - 1px); + } - &.w-150 { - max-width: 150px; - width: 150px; - } + .slider-row { + display: flex; + flex-direction: row; + align-items: center; + } - &.w-160 { - width: 160px; - max-width: 160px; - } + .mat-button-toggle-checked { + background: var(--iqser-primary); + transition: background-color 0.25s ease; + color: var(--iqser-white); + } - &.w-200 { - width: 200px; - max-width: 200px; - } + .mat-mdc-text-field-wrapper { + padding: 0; + } - &.w-250 { - width: 250px; - max-width: 250px; - } + .mdc-text-field { + background: var(--iqser-background); + } - &.w-300 { - width: 300px; - max-width: 300px; - } + input:not([type='checkbox']), + textarea { + box-sizing: border-box; + margin-top: 3px; + min-height: var(--iqser-inputs-height); + line-height: 32px; + padding-left: calc((var(--iqser-inputs-height) - 14px) / 2); + padding-right: calc((var(--iqser-inputs-height) - 14px) / 2); + } - &.w-400 { - width: 400px; - max-width: 400px; - } + .mat-mdc-form-field { + margin-top: 3px; - &.w-450 { - width: 450px; - max-width: 450px; - } + input { + margin-top: 0; + } + } - &.w-full { - width: 100%; - max-width: 100%; - } + .mat-mdc-form-field-subscript-wrapper { + display: none; + } + + .mdc-text-field--outlined { + --mdc-outlined-text-field-focus-outline-width: 1px; + --mdc-shape-small: 8px; // border-radius + --mdc-outlined-text-field-container-shape: 8px; // border-radius + border-bottom-left-radius: var(--mdc-shape-small); + border-bottom-right-radius: var(--mdc-shape-small); + } + + .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-inputs-outline); + } + + &:hover { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-inputs-outline); + } + } + } + + .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-text); + } + + &:hover { + .mdc-notched-outline__leading, + .mdc-notched-outline__trailing { + border-color: var(--iqser-text); + } + } + } + + .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-inputs-font-size); + background-color: var(--iqser-background); + color: var(--iqser-text); + border-radius: 8px; + outline: none; + + &.with-icon { + padding-right: 34px; + } + + &:focus:not(:disabled) { + border-color: var(--iqser-text); + } + + &::placeholder { + color: var(--iqser-text); + opacity: 0.7; + } + + &.ng-invalid.ng-touched { + border-color: rgba(var(--iqser-primary-rgb), 0.3); + + &:focus { + border-color: var(--iqser-primary); + } + } + } + + input:disabled, + textarea:disabled, + .mdc-text-field--disabled { + background-color: var(--iqser-alt-background); + color: rgba(var(--iqser-text-rgb), 0.3); + } + + textarea { + line-height: calc(var(--iqser-inputs-font-size) * 1.4); + } + + .hex-color-input { + width: 150px; + max-width: 150px; + } + + textarea { + resize: vertical; + padding-top: var(--iqser-textarea-padding-y); + padding-bottom: var(--iqser-textarea-padding-y); + @include mixins.scroll-bar; + + &.has-scrollbar { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + > label:not(.mat-slide-toggle-label):not(.mat-radio-label):not(.details-radio-label) { + opacity: 0.7; + font-size: 11px; + letter-spacing: 0; + line-height: 14px; + margin-bottom: 2px; + color: var(--iqser-text); + + &.mat-checkbox-layout { + opacity: 1; + margin-bottom: 0; + } + } + + &.required label:after { + content: ' *'; + color: var(--iqser-primary); + } + + &.datepicker-wrapper { + position: relative; + display: flex; + margin-top: 0; + width: 120px; + + .mat-datepicker-input { + margin-top: 0; + width: 120px; + } + + .mat-datepicker-toggle { + position: absolute; + right: 0; + bottom: 1px; + color: var(--iqser-accent); + + &.mat-datepicker-toggle-active { + color: var(--iqser-primary); + } + + .mat-icon-button { + width: 34px; + height: 34px; + line-height: 34px; + } + + mat-icon { + width: 14px; + } + + .mat-mdc-icon-button svg { + width: unset; + height: unset; + } + } + } + + &.w-75 { + width: 75px; + max-width: 75px; + } + + &.w-110 { + width: 110px; + max-width: 110px; + } + + &.w-150 { + max-width: 150px; + width: 150px; + } + + &.w-160 { + width: 160px; + max-width: 160px; + } + + &.w-200 { + width: 200px; + max-width: 200px; + } + + &.w-250 { + width: 250px; + max-width: 250px; + } + + &.w-300 { + width: 300px; + max-width: 300px; + } + + &.w-400 { + width: 400px; + max-width: 400px; + } + + &.w-450 { + width: 450px; + max-width: 450px; + } + + &.w-full { + width: 100%; + max-width: 100%; + } } diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss index c54742b..c82a587 100644 --- a/src/assets/styles/common-select.scss +++ b/src/assets/styles/common-select.scss @@ -1,51 +1,51 @@ @use 'common-mixins'; .mat-mdc-select { - padding: 0 11px; - box-sizing: border-box; - --mat-select-trigger-text-line-height: 36px; + padding: 0 11px; + box-sizing: border-box; + --mat-select-trigger-text-line-height: 36px; } .mat-mdc-select-panel { - padding: 7px 0 !important; - min-width: fit-content; - background-color: var(--iqser-background); - @include common-mixins.scroll-bar; - @include common-mixins.drop-shadow; + padding: 7px 0 !important; + min-width: fit-content; + background-color: var(--iqser-background); + @include common-mixins.scroll-bar; + @include common-mixins.drop-shadow; } .mat-mdc-select-arrow-wrapper { - margin-left: 10px; + margin-left: 10px; } .mat-mdc-option { - margin: 1px 8px; - border-radius: 4px; - color: var(--iqser-text); + 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); - } + &: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); + } - &.mdc-list-item--selected { - background-color: rgba(var(--iqser-primary-rgb), 0.2) !important; - color: var(--iqser-primary); - } + &.mdc-list-item--selected { + background-color: rgba(var(--iqser-primary-rgb), 0.2) !important; + color: var(--iqser-primary); + } - &.mdc-list-item--disabled { - color: rgba(var(--iqser-text-rgb), 0.7); - } + &.mdc-list-item--disabled { + color: rgba(var(--iqser-text-rgb), 0.7); + } - > span { - width: 100%; - } + > span { + width: 100%; + } } .mat-mdc-select-value { - color: var(--iqser-text); + color: var(--iqser-text); } .mat-mdc-option .mat-mdc-option-pseudo-checkbox { - display: none; + display: none; }