Skip to content

Commit

Permalink
Add switch custom form control (#23004)
Browse files Browse the repository at this point in the history
  • Loading branch information
gijsbotje authored and XhmikosR committed Dec 12, 2018
1 parent dbadf24 commit 180a06e
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 0 deletions.
41 changes: 41 additions & 0 deletions scss/_custom-forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 16 additions & 0 deletions site/docs/4.1/components/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -1185,6 +1185,22 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
{% endcapture %}
{% include example.html content=example %}

### Switches

A switch has the markup of a custom checkbox but uses the `.custom-switch` class to render a toggle switch. Switches also support the `disabled` attribute.

{% capture example %}
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
{% endcapture %}
{% include example.html content=example %}

### Select menu

Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.
Expand Down

0 comments on commit 180a06e

Please sign in to comment.