_checkbox()

  • /src/css/core/abstract/_checkbox.scss

Abstract checkbox component

scss

//
// @param  hash  $params
//   size           length
//   border-radius  length
//

.c-checkbox {
  @include _checkbox((
    size: $_base-font-size-px,
    border-radius: $_border-radius,
  ));
}

html

<label>
  <span class="c-checkbox">
    <input type="checkbox">
    <span class="c-checkbox__control"></span>
  </span>
  ...
</label>

_form-control()

  • /src/css/core/abstract/_form-control.scss

Abstract form control component

scss

.c-form-control {
  @include _form-control();
}

html

<input type="text" class="c-form-control">

_input-group()

  • /src/css/core/abstract/_input-group.scss

Abstract input group component

scss

.c-input-group {
  @include _input-group();
}

html

<div class="c-input-group">
  <div class="c-input-group__addon">@</div>
  <div class="c-input-group__field">
    <input type="text">
  </div>
  <button class="c-input-group__btn">Go</button>
</div>

_radio()

  • /src/css/core/abstract/_radio.scss

Abstract radio button component

scss

.c-radio {
  @include _radio((
    size: $_base-font-size-px,
  ));
}

html

<label>
  <span class="c-radio">
    <input type="radio">
    <span class="c-radio__control"></span>
  </span>
  ...
</label>

_select()

  • /src/css/core/abstract/_select.scss

Abstract selectbox component

scss

.c-select {
  @include _select();
}

js

import BasisSelect from 'node_modules/sass-basis/src/js/select.js';
new BasisSelect({
  select: '.c-select',
  label : '.c-select__label'
});

html

<span class="c-select c-select--block" aria-selected="false">
  <select>
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__label"></span>
</span>