switch.md

Switch

Root component class name

hggs-switch

Theme selector

.hggs-switch {
  /*
  ... put here variables ...
  */
}

Component variables

--switch-background
--switch-background-checked
--switch-border
--switch-border-radius
--switch-box-shadow
--switch-box-shadow-focus
--switch-circle-background
--switch-circle-background-checked
--switch-circle-background-checked
--switch-circle-border
--switch-circle-border-checked
--switch-circle-border-radius
--switch-circle-box-shadow
--switch-circle-height
--switch-circle-left
--switch-circle-left-checked
--switch-circle-top
--switch-circle-transform-checked
--switch-circle-transition
--switch-circle-width
--switch-circle-width-active
--switch-height
--switch-label-color
--switch-label-font-family
--switch-label-font-size
--switch-label-font-style
--switch-label-font-weight
--switch-margin-left
--switch-width

HTML Structure

Default

Basic HTML structure

<div class="hggs-switch">
  <input type="checkbox" id="switch">
  <label for="switch">Switch</label>
  <label class="hggs-label" for="switch">Active Superpowers</label>
</div>