Edit
/* scss/Checkboxes/_Checkbox.scss */
.theme-chechbox {
display: inline-flex;
cursor: pointer;
margin: 0;
user-select: none;
/* Hide input checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
border-radius: 6px;
background-color: $white;
border: 1px solid $gray-300;
transition: 0.3s ease;
margin-top: 4px;
}
/* when hover */
&:hover .checkmark {
background-color: $primary-50;
border: 1px solid $primary-600;
}
/* when focus */
input:focus~.checkmark {
border: 1px solid $primary-300;
box-shadow: 0px 0px 0px 4px #DEEFFC;
}
/* when disabled */
input:disabled~.checkmark {
background-color: $gray-100 !important;
border: 1px solid $gray-200 !important;
box-shadow: none;
cursor: not-allowed;
}
input:disabled~.checkmark:after {
color: $gray-200;
}
/* When checked */
input:checked~.checkmark {
background-color: $primary-50;
border: 1px solid $primary-600;
}
/* Style the checkmark/indicator plus */
.checkmark:after {
content: "\e97d";
font-family: 'icomoonapp' !important;
color: $primary-600;
font-size: 14px;
line-height: 20px;
transition: 0.3s ease;
transform: scale(0);
}
/* Style the checkmark/indicator minus */
&.theme-chechbox-minus .checkmark:after {
content: "\e9f5";
}
/* Show the checkmark/indicator when checked */
input:checked~.checkmark:after {
transform: scale(1);
}
/* Style title description */
.checkbox-content {
margin-inline-start: 12px;
@extend .text-md;
.title {
margin: 0;
color: $gray-700;
@extend .weight-m;
}
.desc {
color: $gray-500;
@extend .weight-r;
}
}
}
// theme radio
.theme-radio {
display: inline-flex;
cursor: pointer;
margin: 0;
user-select: none;
/* Hide input checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: $white;
border: 1px solid $gray-300;
transition: 0.3s ease;
position: relative;
}
/* when hover */
&:hover .checkmark {
background-color: $primary-50;
border: 1px solid $primary-600;
}
/* when focus */
input:focus~.checkmark {
border: 1px solid $primary-300;
box-shadow: 0px 0px 0px 4px #DEEFFC;
}
/* when disabled */
input:disabled~.checkmark {
background-color: $gray-100 !important;
border: 1px solid $gray-200 !important;
box-shadow: none;
cursor: not-allowed;
}
input:disabled~.checkmark:after {
color: $gray-200;
}
/* When checked */
input:checked~.checkmark {
background-color: $primary-50;
border: 1px solid $primary-600;
position: relative;
}
/* Style the checkmark/indicator */
.checkmark:after {
content: "";
width: 8px;
height: 8px;
background-color: $primary-800;
border-radius: 50%;
line-height: 20px;
// transition: 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: scale(0) translate(-50%, -50%);
}
/* Show the checkmark/indicator when checked */
input:checked~.checkmark:after {
transform: scale(1) translate(-50%, -50%);
}
/* Style title description */
.radio-content {
margin-inline-start: 12px;
@extend .text-md;
.title {
margin: 0;
color: $gray-700;
@extend .weight-m;
}
.desc {
color: $gray-500;
@extend .weight-r;
}
}
}
// theme toggle
.theme-toggle {
display: inline-flex;
cursor: pointer;
margin: 0;
user-select: none;
/* Hide input checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 2px;
width: 36px;
height: 20px;
border-radius: 16px;
background-color: $gray-100;
transition: 0.3s ease;
}
/* when hover */
&:hover .checkmark {
background-color: $gray-200;
}
/* when focus */
input:focus~.checkmark {
box-shadow: 0px 0px 0px 4px #DEEFFC;
}
/* when disabled */
input:disabled~.checkmark {
background-color: $gray-100 !important;
box-shadow: none;
cursor: not-allowed;
}
input:disabled~.checkmark:after {
background-color: $gray-50 !important;
}
/* When checked */
input:checked~.checkmark {
background-color: $primary-600;
}
/* Style the checkmark/indicator */
.checkmark:after {
content: "";
background-color: $white;
width: 16px;
height: 16px;
border-radius: 12px;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
transition: 0.3s ease;
}
/* Show the checkmark/indicator when checked */
input:checked~.checkmark:after {
margin-inline-start: 16px;
}
/* Style title description */
.toggle-content {
margin-inline-start: 12px;
@extend .text-sm;
.title {
margin: 0;
color: $gray-700;
@extend .weight-m;
}
.desc {
color: $gray-500;
@extend .weight-r;
}
}
// theme toggle size
&.theme-toggle-lg {
.checkmark {
width: 44px;
height: 24px;
}
.toggle-content {
@extend .text-md;
}
.checkmark:after {
width: 20px;
height: 20px;
}
input:checked~.checkmark:after {
margin-inline-start: 20px;
}
&.toggle-status {
.toggle-title, .status-title {
@extend .text-md;
}
}
}
// theme toggle status
&.toggle-status {
cursor:auto;
display: flex;
justify-content: space-between;
align-items: center;
.toggle-title {
margin-bottom: 0;
color: $gray-900;
@extend .text-sm;
@extend .weight-m;
}
label {
cursor: pointer;
display: flex;
align-items: center;
.status-title {
display: none;
margin-inline-end: 10px;
color: $gray-400;
@extend .weight-r;
}
.status-title.status-disabled {
display: block;
}
input:checked ~ {
.status-enabled {
display: block !important;
}
.status-disabled {
display: none !important;
}
}
}
}
}