@hidoo/unit

v0.9.0

Sass based css framework.

9

unit-toggle

component for toggle field.

9.1

core

core module of unit-toggle

9.1.1

default style

default style of unit-toggle

default 
<!-- single -->
<span class="unit-toggle">
  <input class="unit-toggle__field" type="radio" name="" value="1" />
  <span class="unit-toggle__alt"></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle">
  <input class="unit-toggle__field" type="radio" name="" value="2" checked="checked" disabled="disabled" />
  <span class="unit-toggle__alt"></span>
</span>
<!-- with label -->
<label>
  <span class="unit-toggle">
    <input class="unit-toggle__field" type="radio" name="" value="3" />
    <span class="unit-toggle__alt"></span>
  </span>
  Lorem ipsum dolor sit amet.
</label>

9.2

radio

radio modifiers of unit-toggle

9.2.1

modifiers: radio

builtin modifiers of radio for unit-toggle

default
unit-toggle--radio-light
light radio
unit-toggle--radio-dark
dark radio 
<!-- single -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="1" />
  <span class="unit-toggle__alt"></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="2" checked="checked" disabled="disabled" />
  <span class="unit-toggle__alt"></span>
</span>
<!-- with label -->
<label>
  <span class="unit-toggle  {{modifier_class}}">
    <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="3" />
    <span class="unit-toggle__alt"></span>
  </span>
  Lorem ipsum dolor sit amet.
</label>

9.3

check

check modifiers of unit-toggle

9.3.1

modifiers: check

builtin modifiers of check for unit-toggle

default
unit-toggle--check-light
light check
unit-toggle--check-dark
dark check 
<!-- single -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="1" />
  <span class="unit-toggle__alt"></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="2" checked="checked" disabled="disabled" />
  <span class="unit-toggle__alt"></span>
</span>
<!-- with label -->
<label>
  <span class="unit-toggle  {{modifier_class}}">
    <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="3" />
    <span class="unit-toggle__alt"></span>
  </span>
  Lorem ipsum dolor sit amet.
</label>