123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import 'global';
- //
- // @name
- // @dependencies _global.scss
- //
- //
- // @variables
- //
- $include-html-form-classes: $include-html-classes !default;
- // Controlling background color for the switch container
- $switch-bg: $gainsboro !default;
- // We use these to control the switch heights for our default classes
- $switch-height-tny: 1.5rem !default;
- $switch-height-sml: 1.75rem !default;
- $switch-height-med: 2rem !default;
- $switch-height-lrg: 2.5rem !default;
- $switch-bottom-margin: 1.5rem !default;
- // We use these to style the switch-paddle
- $switch-paddle-bg: $white !default;
- $switch-paddle-transition-speed: .15s !default;
- $switch-paddle-transition-ease: ease-out !default;
- $switch-active-color: $primary-color !default;
- //
- // @mixins
- //
- // We use this mixin to create the base styles for our switch element.
- //
- // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
- // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
- @mixin switch-base(
- $transition-speed:$switch-paddle-transition-speed,
- $transition-ease:$switch-paddle-transition-ease) {
- border: none;
- margin-bottom: $switch-bottom-margin;
- outline: 0;
- padding: 0;
- position: relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- // Default label styles for type and transition
- label {
- background: $switch-bg;
- color: transparent;
- cursor: pointer;
- display: block;
- margin-bottom: ($switch-height-med / 2);
- position: relative;
- text-indent: 100%;
- width: $switch-height-med * 2; height: $switch-height-med;
- // Transition for the switch label to follow paddle
- @include single-transition(left, $transition-speed, $transition-ease);
- }
- // So that we don't need to recreate the form with any JS, we use the
- // existing checkbox or radio button, but we cleverly position and hide it.
- input {
- left: 10px;
- opacity: 0;
- padding:0;
- position: absolute;
- top: 9px;
- & + label { margin-left: 0; margin-right: 0; }
- }
- // The paddle for the switch is created from an after psuedoclass
- // content element. This is sized and positioned, and reacts to
- // the state of the input.
- label:after {
- background: $switch-paddle-bg;
- content: "";
- display: block;
- height: $switch-height-med - .5rem;
- left: .25rem;
- position: absolute;
- top: .25rem;
- width: $switch-height-med - .5rem;
- -webkit-transition: left $transition-speed $transition-ease;
- -moz-transition: left $transition-speed $transition-ease;
- -o-transition: translate3d(0,0,0);
- transition: left $transition-speed $transition-ease;
- -webkit-transform: translate3d(0,0,0);
- -moz-transform: translate3d(0,0,0);
- -ms-transform: translate3d(0,0,0);
- -o-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- }
- input:checked + label {
- background: $switch-active-color;
- }
- input:checked + label:after {
- left: $switch-height-med + .25rem;
- }
- }
- // We use this mixin to create the size styles for switches.
- //
- // $height - Height (in px) of the switch. Default: $switch-height-med.
- // $font-size - Font size of text in switch. Default: $switch-font-size-med.
- // $line-height - Line height of switch. Default: 2.3rem.
- @mixin switch-size($height: $switch-height-med) {
- label {
- height: $height;
- width: $height * 2;
- }
- label:after {
- height: $height - .5rem;
- width: $height - .5rem;
- }
- input:checked + label:after {
- left: $height + .25rem;
- }
- }
- // We use this mixin to add color and other fanciness to the switches.
- //
- // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
- // $active-color - Background color of positive side of switch. Default: $switch-positive-color.
- // $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
- // $radius - Radius to apply to switch. Default: false.
- // $base-style - Apply base styles? Default: true.
- @mixin switch-style(
- $paddle-bg:$switch-paddle-bg,
- $active-color:$switch-active-color,
- $radius:false,
- $base-style:true) {
- @if $base-style {
- label {
- color: transparent;
- background: $switch-bg;
- }
- label:after {
- background: $paddle-bg;
- }
- input:checked + label {
- background: $active-color;
- }
- }
- // Setting up the radius for switches
- @if $radius == true {
- label {
- border-radius: 2rem;
- }
- label:after {
- border-radius: 2rem;
- }
- }
- @else if $radius {
- label {
- border-radius: $radius;
- }
- label:after {
- border-radius: $radius;
- }
- }
- }
- // We use this to quickly create switches with a single mixin
- //
- // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
- // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
- // $height - Height (in px) of the switch. Default: $switch-height-med.
- // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
- // $active-color - Background color of an active switch. Default: $switch-active-color.
- // $radius - Radius to apply to switch. Default: false.
- // $base-style - Apply base styles? Default: true.
- @mixin switch(
- $transition-speed: $switch-paddle-transition-speed,
- $transition-ease: $switch-paddle-transition-ease,
- $height: $switch-height-med,
- $paddle-bg: $switch-paddle-bg,
- $active-color: $switch-active-color,
- $radius:false,
- $base-style:true) {
- @include switch-base($transition-speed, $transition-ease);
- @include switch-size($height);
- @include switch-style($paddle-bg, $active-color, $radius, $base-style);
- }
- @include exports("switch") {
- @if $include-html-form-classes {
- .switch {
- @include switch;
- // Large radio switches
- &.large { @include switch-size($switch-height-lrg); }
- // Small radio switches
- &.small { @include switch-size($switch-height-sml); }
- // Tiny radio switches
- &.tiny { @include switch-size($switch-height-tny); }
- // Add a radius to the switch
- &.radius {
- label { @include radius(4px); }
- label:after { @include radius(3px); }
- }
- // Make the switch completely round, like a pill
- &.round { @include radius(1000px);
- label { @include radius(2rem); }
- label:after { @include radius(2rem); }
- }
- }
- }
- }
|