76 lines
2.3 KiB
SCSS
76 lines
2.3 KiB
SCSS
$checkbox-size: 16px;
|
|
$ripple-size: 26px;
|
|
|
|
.mat-mdc-checkbox .mdc-checkbox {
|
|
flex: 0 0 $checkbox-size;
|
|
width: $checkbox-size;
|
|
height: $checkbox-size;
|
|
}
|
|
|
|
.mat-mdc-checkbox,
|
|
.mdc-checkbox {
|
|
--mdc-checkbox-state-layer-size: $checkbox-size;
|
|
--mdc-checkbox-unselected-icon-color: var(--iqser-grey-5);
|
|
--mdc-checkbox-unselected-hover-icon-color: var(--iqser-grey-5);
|
|
--mdc-checkbox-unselected-pressed-icon-color: var(--iqser-grey-5);
|
|
--mdc-checkbox-unselected-focus-icon-color: var(--iqser-grey-5);
|
|
--mdc-checkbox-disabled-selected-icon-color: var(--iqser-primary);
|
|
--mdc-checkbox-disabled-unselected-icon-color: var(--iqser-grey-5);
|
|
--mdc-checkbox-selected-focus-icon-color: var(--iqser-primary);
|
|
--mdc-checkbox-selected-hover-icon-color: var(--iqser-primary);
|
|
--mdc-checkbox-selected-icon-color: var(--iqser-primary);
|
|
--mdc-checkbox-selected-pressed-icon-color: var(--iqser-primary);
|
|
--mdc-checkbox-selected-focus-state-layer-color: var(--iqser-primary);
|
|
--mdc-checkbox-selected-hover-state-layer-color: var(--iqser-primary);
|
|
--mdc-checkbox-selected-pressed-state-layer-color: var(--iqser-primary);
|
|
|
|
input[type='checkbox'] {
|
|
margin-top: calc($checkbox-size * -1.5);
|
|
}
|
|
|
|
.mdc-form-field > label {
|
|
padding-left: 8px;
|
|
line-height: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mdc-checkbox__ripple {
|
|
--mdc-checkbox-unselected-focus-state-layer-color: var(--iqser-alt-background);
|
|
|
|
width: $ripple-size;
|
|
height: $ripple-size;
|
|
left: calc(($checkbox-size - $ripple-size) / 2);
|
|
top: calc(($checkbox-size - $ripple-size) / 2);
|
|
}
|
|
|
|
.mdc-checkbox__background {
|
|
border-width: 1px;
|
|
width: $checkbox-size;
|
|
height: $checkbox-size;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
}
|
|
|
|
.mat-mdc-checkbox-touch-target {
|
|
height: $ripple-size;
|
|
width: $ripple-size;
|
|
transform: translate(calc(($checkbox-size - $ripple-size) / 2), calc(($checkbox-size - $ripple-size) / 2));
|
|
}
|
|
}
|
|
|
|
.mdc-checkbox label {
|
|
font-size: var(--iqser-font-size);
|
|
color: var(--iqser-text);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> *:not(:last-child) {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.mat-mdc-checkbox-disabled .mdc-checkbox {
|
|
opacity: 0.5;
|
|
}
|