Skip to content

Instantly share code, notes, and snippets.

@tiesont
Last active August 12, 2018 23:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tiesont/c7493ba35ecbe4d2340db367bd9cfd63 to your computer and use it in GitHub Desktop.
Save tiesont/c7493ba35ecbe4d2340db367bd9cfd63 to your computer and use it in GitHub Desktop.
Bootstrap Switch (https://www.abeautifulsite.net/bootstrap-4-switches) with calc() replaced by calculated values - using 14px as base font size. This allows the styles to work with IE9+ (which has a rendering bug related to flex and calc()).
//
// Switches for Bootstrap 4.
// https://www.abeautifulsite.net/bootstrap-4-switches
//
// - Fully customizable with Sass variables
// - No JavaScript required
// - Fully accessible
//
// IMPORTANT: These Sass variables are defined in Bootstrap's variables.scss. You should import that file first, then remove these.
//
$font-size-base: 14px;
$font-size-lg: 17.5px;
$font-size-sm: 12.25px;
$input-height: 38px;
$input-height-sm: 31px;
$input-height-lg: 48px;
$input-btn-focus-width: 3.2px;
$custom-control-indicator-bg: #dee2e6;
$custom-control-indicator-disabled-bg: #e9ecef;
$custom-control-description-disabled-color: #868e96;
$white: white;
$theme-colors: ( 'primary': #08d );
//
// These variables can be used to customize the switch component.
//
$switch-height: 30.4px !default;
$switch-height-sm: 24.8px !default;
$switch-height-lg: 38.4px !default;
$switch-border-radius: $switch-height !default;
$switch-bg: $custom-control-indicator-bg !default;
$switch-checked-bg: map-get($theme-colors, 'primary') !default;
$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
$switch-disabled-color: $custom-control-description-disabled-color !default;
$switch-thumb-bg: $white !default;
$switch-thumb-border-radius: 50% !default;
$switch-thumb-padding: 2px !default;
$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
$switch-transition: .2s all !default;
.switch
{
font-size: $font-size-base;
position: relative;
input
{
position: absolute;
height: 1px;
width: 1px;
background: none;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
padding: 0;
+ label
{
position: relative;
min-width: 60.8px;
border-radius: $switch-border-radius;
height: $switch-height;
line-height: $switch-height;
display: inline-block;
cursor: pointer;
outline: none;
user-select: none;
vertical-align: middle;
text-indent: 68.8px;
}
+ label::before,
+ label::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 60.8px;
bottom: 0;
display: block;
}
+ label::before
{
right: 0;
background-color: $switch-bg;
border-radius: $switch-border-radius;
transition: $switch-transition;
}
+ label::after
{
top: $switch-thumb-padding;
left: $switch-thumb-padding;
width: 26.4px;
height: 26.4px;
border-radius: $switch-thumb-border-radius;
background-color: $switch-thumb-bg;
transition: $switch-transition;
}
&:checked + label::before
{
background-color: $switch-checked-bg;
}
&:checked + label::after
{
margin-left: $switch-height;
}
&:focus + label::before
{
outline: none;
}
&:disabled + label
{
color: $switch-disabled-color;
cursor: not-allowed;
}
&:disabled + label::before
{
background-color: $switch-disabled-bg;
}
}
// Small variation
&.switch-sm
{
font-size: $font-size-sm;
input
{
+ label
{
min-width: 49.6px;
height: $switch-height-sm;
line-height: $switch-height-sm;
text-indent: 57.6px;
}
+ label::before
{
width: 49.6px;
}
+ label::after
{
width: 20.8px;
height: 20.8px;
}
&:checked + label::after
{
margin-left: $switch-height-sm;
}
}
}
// Large variation
&.switch-lg
{
font-size: $font-size-lg;
input
{
+ label
{
min-width: 38.4px;
height: $switch-height-lg;
line-height: $switch-height-lg;
text-indent: 46.4px;
}
+ label::before
{
width: 76.8px;
}
+ label::after
{
width: 46.4px;
height: 46.4px;
}
&:checked + label::after
{
margin-left: $switch-height-lg;
}
}
}
+ .switch
{
margin-left: 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment