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

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