// switch /* Switch ------------------------------------------------- */ @mixin switch { $switch-width: 52px; $switch-padding: 2px; $switch-height: 32px; $switch-radius: $switch-height; $knob-size: $switch-height - ($switch-padding * 2); $knob-radius: $switch-height - ($switch-padding * 2); $knob-width: $knob-size; $switch-background: $white; $switch-border-background: $contrastColor; $switch-shadow: 0 0px 2px transparentize(black, 0.6); border-radius: $switch-radius; cursor: pointer; display: inline-block; height: $switch-height; position: relative; width: $switch-width; input[type="checkbox"] { display: none; + .checkbox { @include transition(all 0.3s ease); background: $switch-border-background; border-radius: $switch-radius; border: none; cursor: pointer; height: $switch-height; margin: 0; padding: 0; position: relative; width: $switch-width; z-index: 0; &:before { @include position(absolute, 2px 0 0 2px); @include transform(scale(1)); @include transition(all 0.3s ease); background: $switch-background; border-radius: $switch-radius; content: ""; height: $knob-radius; width: $switch-width - ($switch-padding * 2); z-index: 1; } &:after { @include position(absolute, 2px 0 0 2px); @include transition(all 0.3s ease); @include size($knob-size); background: $switch-background; border-radius: $knob-radius; box-shadow: $switch-shadow; content: ""; z-index: 2; } } &:checked { + .checkbox { background: $positiveColor; &:before { @include transform(scale(0)); } &:after { left: $switch-width - $knob-width - ($switch-padding); } } } } } .form { .input-switch { padding-top: .75em; .label { cursor: pointer; } .switch { @include switch; float: right; } } }