Now with sass-support
This commit is contained in:
Moritz »mo.« Sauer
parent
e8835b4899
commit
87ca494ca0
62 changed files with 12427 additions and 269 deletions
238
_sass/foundation-components/_switches.scss
Normal file
238
_sass/foundation-components/_switches.scss
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
// 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) {
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
position: relative;
|
||||
outline: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
// Default label styles for type and transition
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: ($switch-height-med / 2);
|
||||
position: relative;
|
||||
color: transparent;
|
||||
background: $switch-bg;
|
||||
text-indent: 100%;
|
||||
width: $switch-height-med * 2; height: $switch-height-med;
|
||||
cursor: pointer;
|
||||
|
||||
// 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 {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 10px;
|
||||
padding:0;
|
||||
|
||||
& + 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 {
|
||||
content: "";
|
||||
display: block;
|
||||
background: $switch-paddle-bg;
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
width: $switch-height-med - 0.5rem;
|
||||
height: $switch-height-med - 0.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);
|
||||
-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 + 0.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 {
|
||||
width: $height * 2;
|
||||
height: $height;
|
||||
}
|
||||
|
||||
label:after {
|
||||
width: $height - 0.5rem;
|
||||
height: $height - 0.5rem;
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
left: $height + 0.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); }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in a new issue