@hidoo/unit

v0.9.0

Sass based css framework.

10

unit-select

component for select field.

10.1

core

core module of unit-select

10.1.1

default style

default style of unit-select

default 
<span class="unit-select">
  <select class="unit-select__field" name="">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">Consectetur adipiscing elit</option>
  </select>
</span>
<!-- disabled -->
<span class="unit-select">
  <select class="unit-select__field" name="" disabled="disabled">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">Consectetur adipiscing elit</option>
  </select>
</span>

10.2

theme

theme modifiers of unit-select

10.2.1

modifiers: theme

builtin modifiers of theme for unit-select

default
unit-select--theme-light
light theme
unit-select--theme-dark
dark theme 
<span class="unit-select  {{modifier_class}}">
  <select class="unit-select__field" name="{{modifier_class}}">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">Consectetur adipiscing elit</option>
  </select>
</span>
<!-- disabled -->
<span class="unit-select  {{modifier_class}}">
  <select class="unit-select__field" name="{{modifier_class}}" disabled="disabled">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">Consectetur adipiscing elit</option>
  </select>
</span>

10.3

inline

inline modifiers of unit-select

10.3.1

modifiers: inline

builtin modifiers of inline for unit-select

default
unit-select--inline-false
disable inline (default)
unit-select--inline-true
enable inline 
<span class="unit-select  unit-select--theme-light  {{modifier_class}}">
  <select class="unit-select__field" name="{{modifier_class}}">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">Consectetur adipiscing elit</option>
  </select>
</span>
<!-- disabled -->
<span class="unit-select  unit-select--theme-dark  {{modifier_class}}">
  <select class="unit-select__field" name="{{modifier_class}}" disabled="disabled">
    <option value="">select...</option>
    <option value="option-1">Lorem ipsum dolor sit amet</option>
    <option value="option-2">Consectetur adipiscing elit</option>
  </select>
</span>