diff options
author | Gijs Boddeus <botje_gijs@hotmail.com> | 2018-12-12 16:28:25 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2018-12-12 16:28:25 +0300 |
commit | 180a06eeb7484048c6bfb381b04bd96a858d42e5 (patch) | |
tree | 5d05da005cb1023d4e20261c5231b95bd6297fff /scss | |
parent | dbadf24bb31379d1310c50bce5c40457fe1b729e (diff) |
Add switch custom form control (#23004)
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_custom-forms.scss | 41 | ||||
-rw-r--r-- | scss/_variables.scss | 4 |
2 files changed, 45 insertions, 0 deletions
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index e999daf0ca..71eb746b82 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -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 diff --git a/scss/_variables.scss b/scss/_variables.scss index 057a149ea8..2d0816808e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -555,6 +555,10 @@ $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicato $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-switch-width: $custom-control-indicator-size * 1.75 !default; +$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; + $custom-select-padding-y: $input-btn-padding-y !default; $custom-select-padding-x: $input-btn-padding-x !default; $custom-select-height: $input-height !default; |