update styles to fix material changes
This commit is contained in:
Dan Percic
parent
6f3833a7f0
commit
1e4247c247
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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<Component, unknown, unknown>,
|
||||
Data extends Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE],
|
||||
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
|
||||
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
|
||||
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
|
||||
const ref = this._dialog.open<Component, Data, Return>(dialog, config);
|
||||
return {
|
||||
...ref,
|
||||
result() {
|
||||
console.log('result');
|
||||
return firstValueFrom(ref.afterClosed());
|
||||
},
|
||||
} as MatDialogRef<Component, Return> & { result(): Promise<Return> };
|
||||
}
|
||||
|
||||
openLarge<
|
||||
Component extends IqserDialogComponent<Component, unknown, unknown>,
|
||||
Data extends Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE],
|
||||
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
|
||||
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
|
||||
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
|
||||
return this.open<Component, Data, Return>(dialog, { ...largeDialogConfig, ...config });
|
||||
}
|
||||
|
||||
openDefault<
|
||||
Component extends IqserDialogComponent<Component, unknown, unknown>,
|
||||
Data extends Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE],
|
||||
Component extends IqserDialogComponent<Component, Component[DATA_TYPE], Component[RETURN_TYPE]>,
|
||||
Data extends Component[DATA_TYPE] = Component[DATA_TYPE],
|
||||
Return extends Component[RETURN_TYPE] = Component[RETURN_TYPE],
|
||||
>(dialog: ComponentType<Component>, config?: MatDialogConfig<Data>) {
|
||||
return this.open<Component, Data, Return>(dialog, { ...defaultDialogConfig, ...config });
|
||||
}
|
||||
|
||||
@ -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<string>();
|
||||
parentDimensions: { width: number; height: number };
|
||||
parentDimensions?: { width: number; height: number };
|
||||
newValue = '';
|
||||
|
||||
private _editing = false;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user