seed-switch 
Switch component pack for Seed!
Install
npm install seed-switch --save
Documentation
Check out our documentation of this pack.
Basic Usage
SCSS
This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:
var gulp = require('gulp');
var sass = require('gulp-sass');
var pack = require('seed-switch');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({
includePaths: pack
}))
.pipe(gulp.dest('./css'));
});Once that is setup, simply @import seed-switch as needed in your .scss file:
// Packs
@import "pack/seed-switch/_index";Usage
<label class="c-switch">
<input type="checkbox">
<span class="c-switch-toggle"></span>
</label>Options
The following variables can be found in _config.scss
Switch configs
// Namespaces
$seed-switch-namespace: "c-switch" !default;
$seed-switch-active-namespace: "is-active" !default;
$seed-switch-focused-namespace: "is-focused" !default;
// Configs
// "switch" or "switch-toggle"
$seed-switch-active-component: "switch" !default;Switch toggle configs
// Namespaces
$seed-switch-toggle-namespace: "#{$seed-switch-namespace}-toggle" !default;
// Animations
$seed-switch-toggle-transition: all 0.3s ease !default;
// Colors and typography
$seed-switch-toggle-background: #d7d7d7 !default
$seed-switch-toggle-background-active: #3197d6 !default;
$seed-switch-toggle-border-radius: 100px !default;
$seed-switch-toggle-shadow: 0 0 0 0 rgba(black, 0.1) inset !default;
$seed-switch-toggle-shadow-focus: 0 0 0 1px rgba(white, 0.5) inset !default;
$seed-switch-toggle-text-color: #2b2b2b !default;
$seed-switch-toggle-text-color-active: #fff !default;
$seed-switch-toggle-font-size: 12px !default;
// Sizing and offsets
$seed-switch-toggle-height: 28px !default;
$seed-switch-toggle-width: ceil($seed-switch-toggle-height * 2) !default;
$seed-switch-toggle-padding: 0 10px !default;
$seed-switch-toggle-offset: 2px !default;
$seed-switch-toggle-offset-inner: $seed-switch-toggle-offset - 1px !default;
// Modifier sizes
$seed-switch-toggle-height-sm: 20px !default;
$seed-switch-toggle-width-sm: ceil($seed-switch-toggle-height-sm * 2) !default;
$seed-switch-toggle-height-xs: 16px !default;
$seed-switch-toggle-width-xs: ceil($seed-switch-toggle-height-xs * 2) !default;Switch handle configs
// Namespaces
$seed-switch-handle-namespace: "#{$seed-switch-toggle-namespace}::before" !default;
$seed-switch-toggle-active-handle-namespace: "#{$seed-switch-toggle-namespace}.#{$seed-switch-active-namespace}::before" !default;
$seed-switch-toggle-focused-handle-namespace: "#{$seed-switch-toggle-namespace}.#{$seed-switch-focused-namespace}::before" !default;
// Transitions
$seed-switch-handle-transition: all 0.1s ease !default;
// Background and shadow
$seed-switch-handle-background-color: #fff !default;
$seed-switch-handle-shadow: shadow(2) !default;
$seed-switch-handle-shadow-active: shadow(3) !default;
// Offsets and sizing
$seed-switch-handle-offset: ceil($seed-switch-toggle-offset * 2) !default;
$seed-switch-handle-size: ($seed-switch-toggle-height - $seed-switch-handle-offset) !default;
$seed-switch-handle-width-active: 60% !default;
// Modifier sizes
$seed-switch-handle-size-sm: ($seed-switch-toggle-height-sm - $seed-switch-handle-offset) !default;
$seed-switch-handle-size-xs: ($seed-switch-toggle-height-xs - $seed-switch-handle-offset) !default;
