// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group switch //// /// Background color of a switch. /// @type Color $switch-background: $medium-gray !default; /// Background active color of a switch. /// @type Color $switch-background-active: $primary-color !default; /// Height of a switch, with no class applied. /// @type Number $switch-height: 2rem !default; /// Height of a switch with .tiny class. /// @type Number $switch-height-tiny: 1.5rem !default; /// Height of a switch with .small class. /// @type Number $switch-height-small: 1.75rem !default; /// Height of a switch with .large class. /// @type Number $switch-height-large: 2.5rem !default; /// Border radius of the switch /// @type Number $switch-radius: $global-radius !default; /// border around a modal. /// @type Number $switch-margin: $global-margin !default; /// Background color for the switch container and paddle. /// @type Color $switch-paddle-background: $white !default; /// Spacing between a switch paddle and the edge of the body. /// @type Number $switch-paddle-offset: 0.25rem !default; /// border radius of the switch paddle /// @type Number $switch-paddle-radius: $global-radius !default; /// switch transition. /// @type Number $switch-paddle-transition: all 0.25s ease-out !default; // make them variables // ask about accessibility on label // change class name for text /// Adds styles for a switch container. Apply this to a container class. @mixin switch-container { position: relative; margin-bottom: $switch-margin; outline: 0; // These properties cascade down to the switch text font-size: rem-calc(14); font-weight: bold; color: $white; user-select: none; } /// Adds styles for a switch input. Apply this to an `` within a switch. @mixin switch-input { position: absolute; margin-bottom: 0; opacity: 0; } /// Adds styles for the background and paddle of a switch. Apply this to a `