@hidoo/styleunit

v1.0.0-alpha.9

The unit oriented CSS framework implemented in Sass.

3 unit-toggle

The toggle unit.

3.1 Core

The core module.

3.1.1 Default style

The default style.

default 
<!-- single -->
<span class="unit-toggle">
  <input class="unit-toggle__field" type="radio" name="toggle" value="1" />
</span>
<!-- single (legacy) -->
<span class="unit-toggle">
  <input class="unit-toggle__field" type="radio" name="toggle" value="2" />
  <span class="unit-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle">
  <input class="unit-toggle__field" type="radio" name="toggle" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="unit-text  unit-text--inline-block">
  <span class="unit-toggle">
    <input class="unit-toggle__field" type="radio" name="toggle" value="4" />
  </span>
  Lorem ipsum dolor sit amet.
</label>

3.2 Check

The check module.

3.2.1 Modifiers

The additional modifiers.

default
unit-toggle--check-example-a
Check box example a (Type: svg)
unit-toggle--check-example-b
Check box example b (Type: svg, Options: responsive: true
unit-toggle--check-example-c
Check box example c (Type: image, Options: use2x: true)
unit-toggle--check-example-d
Check box example d (Type: image, Options: responsive: true, use2x: "sm")
<!-- single -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="1" />
</span>
<!-- single (legacy) -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="2" />
  <span class="unit-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="unit-text  unit-text--inline-block">
  <span class="unit-toggle  {{modifier_class}}">
    <input class="unit-toggle__field" type="checkbox" name="{{modifier_class}}" value="4" />
  </span>
  Lorem ipsum dolor sit amet.
</label>

3.3 Radio

The radio module.

3.3.1 Modifiers

The additional modifiers.

default
unit-toggle--radio-example-a
Radio button example a (Type: svg)
unit-toggle--radio-example-b
Radio button example b (Type: svg, Options: responsive: true
unit-toggle--radio-example-c
Radio button example c (Type: image, Options: use2x: true)
unit-toggle--radio-example-d
Radio button example d (Type: image, Options: responsive: true, use2x: "sm")
<!-- single -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="1" />
</span>
<!-- single (legacy) -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="2" />
  <span class="unit-toggle__alt"><!-- Alt element is not use. --></span>
</span>
<!-- single:disabled -->
<span class="unit-toggle  {{modifier_class}}">
  <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="3" checked="checked" disabled="disabled" />
</span>
<!-- with label -->
<label class="unit-text  unit-text--inline-block">
  <span class="unit-toggle  {{modifier_class}}">
    <input class="unit-toggle__field" type="radio" name="{{modifier_class}}" value="4" />
  </span>
  Lorem ipsum dolor sit amet.
</label>