afb-client/bower_components/foundation-apps/scss/components/_switch.scss

   1 /*
   2   SWITCH
   3   ------
   4 */
   5
   6 /// @Foundation.settings
   7 // Switch
   8 $switch-width: rem-calc(50) !default;
   9 $switch-height: rem-calc(32) !default;
  10 $switch-background: #ccc !default;
  11 $switch-background-active: $primary-color !default;
  12 $switch-border: 0 !default;
  13 $switch-radius: 9999px !default;
  14 $switch-animation-speed: 0.15s !default;
  15
  16 $switch-paddle-color: white !default;
  17 $switch-paddle-offset: 4px !default;
  18 ///
  19
  20 %switch {
  21   position: relative;
  22   overflow: hidden;
  23   display: inline-block;
  24
  25   > input {
  26     position: absolute;
  27     left: -9999px;
  28     outline: none;
  29   }
  30
  31   > label {
  32     -ms-touch-action: manipulation;
  33         touch-action: manipulation;
  34     display: block;
  35     width: 100%;
  36     height: 100%;
  37     cursor: pointer;
  38     margin: 0;
  39
  40     // Paddle
  41     &::after {
  42       content: '';
  43       display: block;
  44       position: absolute;
  45       top: 0;
  46       left: 0;
  47     }
  48   }
  49 }
  50
  51 /*
  52   Defines the dimmensions of the switch.
  53
  54   $width - width of the switch.
  55   $height - height of the switch.
  56 */
  57 @mixin switch-layout(
  58   $width: $switch-width,
  59   $height: $switch-height
  60 ) {
  61   width: $width;
  62   height: $height;
  63
  64   > label {
  65     &::after {
  66       width: $height;
  67       height: $height;
  68     }
  69   }
  70   input:checked + label {
  71     &::after {
  72       left: $width - $height;
  73     }
  74   }
  75 }
  76
  77 @mixin switch-style(
  78   $background: $switch-background,
  79   $background-active: $switch-background-active,
  80   $border: $switch-border,
  81   $radius: $switch-radius,
  82   $paddle-color: $switch-paddle-color,
  83   $paddle-offset: $switch-paddle-offset,
  84   $animation-speed: $switch-animation-speed
  85 ) {
  86   @if hasvalue($border) {
  87     border: $border;
  88   }
  89   border-radius: $radius;
  90
  91   > label {
  92     background: $background;
  93
  94     &::after {
  95       background: $paddle-color;
  96       border-radius: $radius;
  97       transition: left $animation-speed ease-out;
  98
  99       @if hasvalue($paddle-offset) {
 100         border: $paddle-offset solid $background
 101       }
 102     }
 103   }
 104
 105   input:checked + label {
 106     background: $background-active;
 107     margin: 0;
 108
 109     &::after {
 110       @if hasvalue($paddle-offset) {
 111         border-color: $background-active;
 112       }
 113     }
 114   }
 115 }
 116
 117 @mixin switch() {
 118   @extend %switch;
 119   @include switch-layout;
 120   @include switch-style;
 121 }
 122
 123 @include exports(switch) {
 124   .switch {
 125     @include switch;
 126
 127     &.small { @include switch-layout(rem-calc(40), rem-calc(26)); }
 128     &.large { @include switch-layout(rem-calc(60), rem-calc(38)); }
 129   }
 130 }