Menu icon Foundation
How to style switches

I have been struggling to style a Switch on my site. I have been following the docs here:

http://foundation.zurb.com/docs/components/switch.html

But I just can't get it right. Further, the code I have inherited uses SASS (and not even SCSS) for the CSS. I am new to this as well so I am totally confused. No matter what I try, the background of the selected switch is always the same. I need to change the selected color.

Should I be making the style changes in foundation_and_overrides.scss or another .sass file? Also, on the documentation for using the mixin, I just don't understand. It would be nice to see a concrete example of using the mixin.

Help?

switchstyle

I have been struggling to style a Switch on my site. I have been following the docs here:

http://foundation.zurb.com/docs/components/switch.html

But I just can't get it right. Further, the code I have inherited uses SASS (and not even SCSS) for the CSS. I am new to this as well so I am totally confused. No matter what I try, the background of the selected switch is always the same. I need to change the selected color.

Should I be making the style changes in foundation_and_overrides.scss or another .sass file? Also, on the documentation for using the mixin, I just don't understand. It would be nice to see a concrete example of using the mixin.

Help?

Rafi Benkual over 4 years ago

At it's most basic form, you can create a switch with semantic markup like this http://sassmeister.com/gist/d5b2f4be0b5357d12bb4

<div class="custom-switch">
  <input id="switchName" type="checkbox">
  <label for="switchName"></label>
</div>
.custom-switch {
  @include switch;
}

You can also use the mixin to customize a switch with this classname like so:
http://sassmeister.com/gist/35017c68d5181f52df32

.my-switch {
  @include switch( 0.3s, 0.3s, 1rem, red, green, 0.25rem, true);
}

Based on these variables in order

/* This sets the speed at which the switch toggles */
$transition-speed: $switch-paddle-transition-speed;

/* This sets the ease of the switch transition */
$transition-ease: $switch-paddle-transition-ease;

/* This controls the overall height of the switch */
$height: $switch-height-med;

/* This controls the background of the paddle */
$paddle-bg: $switch-paddle-bg;

/* Set the background color for the switch when it's on */
$active-color: $switch-active-color;

/* Set this to true for default radius or any number for complete control */
$radius: false;

/* If you set this to false, base styles are left out */
$base-style: true;

Also you can change the defaults for all switches in the settings file (foundation_and_overrides.scss in rails)

// Controlling border styles and background colors for the switch container
// $switch-border-color: scale-color($white, $lightness: -20%);
// $switch-border-style: solid;
// $switch-border-width: 1px;
// $switch-bg: $white;

// We use these to control the switch heights for our default classes
// $switch-height-tny: rem-calc(22);
// $switch-height-sml: rem-calc(28);
// $switch-height-med: rem-calc(36);
// $switch-height-lrg: rem-calc(44);
// $switch-bottom-margin: rem-calc(20);

// We use these to control default font sizes for our classes.
// $switch-font-size-tny: 11px;
// $switch-font-size-sml: 12px;
// $switch-font-size-med: 14px;
// $switch-font-size-lrg: 17px;
// $switch-label-side-padding: 6px;

// We use these to style the switch-paddle
// $switch-paddle-bg: $white;
// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
// $switch-paddle-border-width: 1px;
// $switch-paddle-border-style: solid;
// $switch-paddle-transition-speed: .1s;
// $switch-paddle-transition-ease: ease-out;
// $switch-positive-color: scale-color($success-color, $lightness: 94%);
// $switch-negative-color: $white-smoke;

// Outline Style for tabbing through switches
// $switch-label-outline: 1px dotted $jumbo;

Just uncomment, change value, save.