mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

Add switch custom form control (#23004)

Browse Source
This commit is contained in:
Gijs Boddeus
2018-12-12 14:28:25 +01:00
committed by XhmikosR
parent dbadf24bb3
commit 180a06eeb7
3 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_custom-forms.scss
+41
View File
@@ -161,6 +161,47 @@
}
// switches
//
// Tweak a few things for switches
.custom-switch {
padding-left: $custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size);
.custom-control-label {
&::before {
left: -($custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size));
width: $custom-switch-width;
pointer-events: all;
border-radius: $custom-switch-indicator-border-radius;
}
&::after {
top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
left: calc(#{-($custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size))} + #{$custom-control-indicator-border-width * 2});
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
background-color: $custom-control-indicator-border-color;
border-radius: $custom-switch-indicator-border-radius;
@include transition(transform .15s ease-in-out, $custom-forms-transition);
}
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
background-color: $custom-control-indicator-bg;
transform: translateX($custom-switch-width - $custom-control-indicator-size);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
background-color: $custom-control-indicator-checked-disabled-bg;
}
}
}
// Select
//
// Replaces the browser default select with a custom one, mostly pulled from