File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/*
* name : Checkbox Css
* date : 2024-01-03
*/
/* **** checkbox : switch type **** */
.form-switch {
$size: lg;
display: inline-flex;
position: relative;
label {
display: inline-flex;
font-size: var(--#{$prefix}switch-fz-#{$size});
}
[type="checkbox"] {
~ i {
display: inline-flex;
align-items: center;
&::before,
&::after {
display: inline-flex;
content: '';
}
&::before {
@include position($l: var(--#{$prefix}switch-br-#{$size}));
width: var(--#{$prefix}switch-b-#{$size});
height: var(--#{$prefix}switch-b-#{$size});
border-radius: var(--#{$prefix}switch-rd-#{$size});
background-color: var(--#{$prefix}white);
transition: all 0.3s;
}
&::after {
width: var(--#{$prefix}switch-w-#{$size});
height: var(--#{$prefix}switch-h-#{$size});
border-radius: var(--#{$prefix}switch-rd-#{$size});
background-color: var(--#{$prefix}secondary-20);
}
}
~ label {
z-index: 1;
$labelValue : var(--#{$prefix}switch-w-#{$size});
$pdValue : var(--#{$prefix}switch-pd-#{$size});
padding-left: calc($labelValue + $pdValue);
margin-left: calc($labelValue * -1);
font-size: var(--#{$prefix}switch-fz-#{$size});
}
&:checked {
~ i {
&::before {
$posL : calc(var(--#{$prefix}switch-w-#{$size}) - var(--#{$prefix}switch-b-#{$size}) - var(--#{$prefix}switch-br-#{$size}));
@include position($l: $posL);
}
&::after {
background-color: var(--#{$prefix}primary);
}
}
}
&:disabled {
~ i {
&::before {
border-color: var(--#{$prefix}gray-20);
background-color:var(--#{$prefix}gray-40);
}
&::after {
background-color: var(--#{$prefix}gray-20);
}
}
~ label {
color: var(--#{$prefix}gray-50);
cursor: inherit;
}
}
&:focus {
~ label {
@include focus($offset: .4rem, $color: $primary);
}
}
}
}
/* **** checkbox : chip type **** */
.form-chip {
.checkbox {
~ .form-chip-outline {
&::before {
display: inline-flex;
content: '';
}
}
&:focus {
~ .form-chip-outline {
@include focus(-.4rem);
border-radius: var(--#{$prefix}chkChipOutline-rd-lg);
}
}
}
&.md {
.checkbox {
&:focus {
~ .form-chip-outline {
border-radius: var(--#{$prefix}chkChipOutline-rd-md);
}
}
}
}
&.sm {
.checkbox {
&:focus {
~ .form-chip-outline {
border-radius: var(--#{$prefix}chkChipOutline-rd-sm);
}
}
}
}
}