Foundation - Switch SASS Reference

---

---

Description

You can change the styles of the components by using SASS Reference.

Variables

The following table lists the SASS variables in project's settings file that makes this component's default styles to get customized.

Mixins

To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.

switch-container

@include switch-container;

It adds switch container's styles. Apply it to a container class.

switch-input

@include switch-input;

It adds switch input styles. Within a switch you have to apply it to an <input>.

switch-paddle

@include switch-paddle;

It adds styles for paddle and background of a switch. Within a switch you have to apply it to a <label>.

switch-text

@include switch-text;

Within a switch, it adds base styles for active or inactive text. You have to apply this to text elements within <label>.

switch-text-active

@include switch-text-active;

It adds styles for switch's active state text.

switch-text-inactive

@include switch-text-inactive;

It adds styles for switch's inactive state text.

switch-size

@include switch-size($font-size, $width, $height, $paddle-width, $paddle-offset);

By changing the size of the body and paddle, the switch-size alters the switch's size. You have to apply this to a container of the switch.

The following table lists the parameters that switch-size accepts.