fix indent
This commit is contained in:
Dan Percic
parent
1e4247c247
commit
5a14bf79fa
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user