Penambahan FrontEnd All-New-Manufacture
This commit is contained in:
pand03
278
public/scss/components/forms/_form-checkbox.scss
Normal file
278
public/scss/components/forms/_form-checkbox.scss
Normal file
@@ -0,0 +1,278 @@
|
||||
|
||||
.form-check-label{
|
||||
margin-#{$dlab-pos-left}: 0.3125rem;
|
||||
margin-top: 0.1875rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.radio{
|
||||
label{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio.disabled{
|
||||
label{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$d-ctl;
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-inline{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.form-check-input{
|
||||
top:0.125rem;
|
||||
border-width:0.125rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-color: #e7e7e7;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.rtl .form-check-label{
|
||||
&:before,
|
||||
&:after{
|
||||
#{$dlab-pos-right}: -1.5rem !important;
|
||||
#{$dlab-pos-left}: inherit;
|
||||
}
|
||||
}
|
||||
.form-check {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// Toggle Switch
|
||||
.toggle-switch{
|
||||
padding-#{$dlab-pos-left}:3.125rem;
|
||||
line-height: 1.25;
|
||||
display:inline-block;
|
||||
color:$black;
|
||||
font-weight: 600;
|
||||
.form-check-input{
|
||||
border: 0;
|
||||
cursor:pointer;
|
||||
background: #d8d8d8;
|
||||
width: 2.3125rem;
|
||||
border-radius: 1.25rem !important;
|
||||
height: 0.875rem;
|
||||
position:relative;
|
||||
#{$dlab-pos-left}: -0.3125rem;
|
||||
@include transitionFast;
|
||||
background-image:none;
|
||||
&:focus{
|
||||
background-image:none!important;
|
||||
}
|
||||
&:checked{
|
||||
background:var(--rgba-primary-2);
|
||||
background-image:none!important;
|
||||
&:after{
|
||||
#{$dlab-pos-left}:1.25rem;
|
||||
background:var(--primary);
|
||||
}
|
||||
}
|
||||
&:focus{
|
||||
box-shadow:none;
|
||||
}
|
||||
&:after{
|
||||
width: 1.25rem;
|
||||
background:#909090;
|
||||
height: 1.25rem;
|
||||
content:"";
|
||||
position:absolute;
|
||||
border-radius: 1.5rem;
|
||||
top: -0.1875rem;
|
||||
#{$dlab-pos-left}: 0;
|
||||
box-shadow:0 0 0.3125rem rgba(0,0,0,0.3);
|
||||
@include transitionFast;
|
||||
}
|
||||
}
|
||||
&.text-end{
|
||||
padding-#{$dlab-pos-right}:0rem;
|
||||
padding-#{$dlab-pos-left}:0;
|
||||
.form-check-input{
|
||||
#{$dlab-pos-left}: auto;
|
||||
margin-#{$dlab-pos-left}: 0;
|
||||
float:right;
|
||||
#{$dlab-pos-right}: 0rem;
|
||||
}
|
||||
.form-check-label{
|
||||
margin-#{$dlab-pos-right}: 0.9375rem;
|
||||
margin-#{$dlab-pos-left}:0;
|
||||
}
|
||||
}
|
||||
.form-check-label{
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// CheckBox
|
||||
.form-check-input:focus ~ .form-check-label::before{
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.form-check-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $light;
|
||||
border-width: 0.125rem;
|
||||
border-radius: 0.125rem !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.check-xs{
|
||||
.form-check-input{
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
}
|
||||
.check-lg{
|
||||
.form-check-input{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
.check-xl{
|
||||
.form-check-input{
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
.checkbox{
|
||||
&-info{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $info;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($info , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-danger {
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $danger;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($danger , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $success;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($success , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $warning;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($warning , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-secondary{
|
||||
.form-check-input{
|
||||
&:focus{
|
||||
border-color: $secondary;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem rgba($secondary , 0.25);
|
||||
}
|
||||
&:checked{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//Check Switch
|
||||
.check-switch{
|
||||
padding-#{$dlab-pos-left}: 2.5rem;
|
||||
.form-check-label{
|
||||
line-height: 1.875rem;
|
||||
font-weight: 500;
|
||||
span{
|
||||
line-height: 1;
|
||||
}
|
||||
&:after,&:before{
|
||||
height:1.5rem;
|
||||
width:1.5rem;
|
||||
#{$dlab-pos-left}: -2rem;
|
||||
border-radius: 3rem!important;
|
||||
border-color:var(--rgba-primary-3);
|
||||
}
|
||||
}
|
||||
.form-check-input:checked ~ .form-check-label::after{
|
||||
background-image:url('../images/svg/check.svg');
|
||||
}
|
||||
.form-check-input:checked ~ .form-check-label::before{
|
||||
background:$white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user