v2 first commit
This commit is contained in:
47
resources/assets/sass/core/custom-forms/_custom-checkbox.scss
vendored
Normal file
47
resources/assets/sass/core/custom-forms/_custom-checkbox.scss
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
//
|
||||
// Custom checkbox
|
||||
//
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
height: $custom-control-indicator-size;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.custom-checkbox-#{$color} {
|
||||
@include custom-checkbox-variant($value);
|
||||
}
|
||||
}
|
58
resources/assets/sass/core/custom-forms/_custom-control.scss
vendored
Normal file
58
resources/assets/sass/core/custom-forms/_custom-control.scss
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
//
|
||||
// Custom control
|
||||
// additional styles for custom checkboxes, radios and other
|
||||
//
|
||||
|
||||
.custom-control-label {
|
||||
// Background-color and (when enabled) gradient
|
||||
&::before {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
|
||||
@include transition($input-transition);
|
||||
top:($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
|
||||
left: -($custom-control-gutter + $custom-control-indicator-size - 1rem);
|
||||
|
||||
}
|
||||
|
||||
&::after{
|
||||
top:($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
|
||||
left: -($custom-control-gutter + $custom-control-indicator-size - 1rem);
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Alternative style
|
||||
|
||||
.custom-control-alternative {
|
||||
.custom-control-label {
|
||||
// Background-color and (when enabled) gradient
|
||||
&::before {
|
||||
border: 0;
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
box-shadow: $input-focus-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active~.custom-control-label::before,
|
||||
&:focus~.custom-control-label::before {
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
45
resources/assets/sass/core/custom-forms/_custom-form.scss
vendored
Normal file
45
resources/assets/sass/core/custom-forms/_custom-form.scss
vendored
Normal file
@ -0,0 +1,45 @@
|
||||
//
|
||||
// Custom checkbox
|
||||
//
|
||||
|
||||
.custom-control {
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.custom-checkbox {
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
left: -1.75rem
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
38
resources/assets/sass/core/custom-forms/_custom-radio.scss
vendored
Normal file
38
resources/assets/sass/core/custom-forms/_custom-radio.scss
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
//
|
||||
// Custom radio
|
||||
//
|
||||
|
||||
.custom-radio {
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
height: $custom-control-indicator-size;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-image: $custom-radio-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
122
resources/assets/sass/core/custom-forms/_custom-toggle.scss
vendored
Normal file
122
resources/assets/sass/core/custom-forms/_custom-toggle.scss
vendored
Normal file
@ -0,0 +1,122 @@
|
||||
//
|
||||
// Custom toggle
|
||||
//
|
||||
|
||||
.custom-toggle {
|
||||
position: relative;
|
||||
display: inherit;
|
||||
width: $custom-toggle-width;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
+ .custom-toggle-slider {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
|
||||
|
||||
&:before {
|
||||
background: $custom-toggle-checked-bg;
|
||||
transform: translateX(28px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ .custom-toggle-slider {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .custom-toggle-slider {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
|
||||
|
||||
&:before {
|
||||
background-color: lighten($custom-control-indicator-checked-bg, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: $custom-control-indicator-border-width solid $custom-toggle-border-color;
|
||||
border-radius: 34px !important;
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
border-radius: 50% !important;
|
||||
background-color: $custom-toggle-slider-bg;
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-toggle-wrapper {
|
||||
.custom-toggle + .custom-toggle {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Labeled toggles
|
||||
|
||||
.custom-toggle {
|
||||
input {
|
||||
&:checked {
|
||||
+ .custom-toggle-slider {
|
||||
|
||||
&:after {
|
||||
content: attr(data-label-on);
|
||||
color: $custom-control-indicator-checked-border-color;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-toggle-slider {
|
||||
&:after {
|
||||
color: $custom-toggle-border-color;
|
||||
content: attr(data-label-off);
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: .75rem;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0 .21667rem;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
min-width: 1.66667rem;
|
||||
overflow: hidden;
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.custom-toggle-#{$color} {
|
||||
@include custom-toggle-variant($value);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user