Switch

View Source

Switch component pack for Seed

Install

npm install seed-switch --save

Dependencies

Example

<label class="c-switch">
  <input type="checkbox">
  <span class="c-switch-toggle"></span>
</label>

Sizes

Extra small

<label class="c-switch c-switch--xs">
  <input type="checkbox">
  <span class="c-switch-toggle"></span>
</label>

Small

<label class="c-switch c-switch--sm">
  <input type="checkbox">
  <span class="c-switch-toggle"></span>
</label>

States

Active

<label class="c-switch is-active">
  <input type="checkbox">
  <span class="c-switch-toggle"></span>
</label>

Configurations

Below are the default Sass configuration variables for seed-switch. The variables can be found in the pack’s _config.scss file.

seed-switch/_config.scss
// Switch
// 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
// 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
// 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;
↑Back to top
© Help Scout 2024