From 5a14bf79fa961a47e520914241d5d8b235550b33 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Fri, 25 Aug 2023 23:27:56 +0300 Subject: [PATCH] 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; }