ariska/Ontime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Ariska Budijuwono
2026-03-03 16:30:57 +07:00
parent a13304e40e
commit c253e1a370
7569 changed files with 1324841 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backendpanel/asset/scss/components/_checkbox-radio.scss
+304
View File
@@ -0,0 +1,304 @@
/* Checkboxes and Radios */
.form-check,
.form-radio {
position: relative;
display: block;
margin-top: 15px;
margin-bottom: 10px;
.form-check-label {
display: block;
padding-left: 30px;
.rtl & {
padding-left: 0;
padding-right: 30px;
}
line-height: 1.5;
input {
position: absolute;
margin-left: -20px;
margin-top: 4px\9;
top: 0;
left: 0;
.rtl & {
left: auto;
right: 0;
}
z-index: 1;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
margin-top: 0;
}
}
}
.form-check {
padding-left: 0;
label {
font-size: $default-font-size;
line-height: 1.5;
input {
&:checked {
+.input-helper {
&:before {
background-color: color(white);
}
&:after {
width: 18px;
opacity: 1;
line-height: 18px;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
}
&:disabled {
+ .input-helper {
&:before {
border-color: $border-color;
}
}
&:checked {
+ .input-helper {
&:after {
color: $border-color;
}
}
}
}
}
.input-helper {
&:before {
position: absolute;
content: "";
top: 2px;
width: 18px;
height: 18px;
border-radius: 2px;
left: 0;
.rtl & {
left: auto;
right: 0;
}
border: 2px solid $border-color;
-webkit-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
&:after {
-webkit-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
font-family: Material Design Icons;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
content: '\F12C';
position: absolute;
font-size: .9375rem;
font-weight: bold;
left: 0;
.rtl & {
left: auto;
right: 0;
}
top: 2px;
color: theme-color(info);
}
}
}
&.form-check-flat {
label {
input {
&:checked {
+.input-helper {
&:before {
background-color: theme-color(success);
border: none;
}
}
}
&:disabled {
+ .input-helper {
&:after {
color: color(white);
}
&:before {
border-color: $border-color;
}
}
&:checked {
+ .input-helper {
&:before {
background: color(gray-lightest);
}
}
}
}
}
.input-helper {
&:before {
border: 2px solid $border-color;
}
&:after {
color: color(white);
}
}
}
}
}
.form-radio {
label {
input {
+.input-helper {
&:before {
position: absolute;
content: "";
top: 2px;
left: 0;
.rtl & {
left: auto;
right: 0;
}
border: 2px solid $border-color;
width: 20px;
height: 20px;
border-radius: 50%;
-webkit-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
&:after {
content: "";
width: 8px;
height: 8px;
background: theme-color(danger);
border-radius: 50%;
top: 8px;
left: 6px;
.rtl & {
left: auto;
right: 6px;
}
-webkit-transition: all;
-o-transition: all;
transition: all;
transition-duration: 0s;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
position: absolute;
}
}
&:checked {
+.input-helper {
&:before {
background-color: $white;
border: 2px solid $border-color;
}
&:after {
opacity: 1;
line-height: 1.5;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
}
&:disabled {
+ .input-helper {
&:before {
border-color: $border-color;
}
}
&:checked {
+ .input-helper {
&:before {
background-color: $white;
border-color: $border-color;
}
&:after {
background-color: $border-color;
}
}
}
}
}
}
&.form-radio-flat {
label {
input {
&:checked {
+.input-helper {
&:before {
background: theme-color(success);
border-color: theme-color(success);
}
&:after {
width: 20px;
height: 20px;
top: 2px;
left: -2px;
.rtl & {
left: auto;
right: -2px;
}
color: color(white);
background: none;
content: '\F12C';
font-family: Material Design Icons;
text-align: center;
font-weight: bold;
}
}
}
}
}
}
}