_alert()

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

Abstract alert component

scss

.c-alert {
  @include _alert();
  @include _padding(1);
  background-color: #4b9ad8;
  color: #fff;
}

html

<div class="c-alert" role="alert">
  ...
</div>

_top-balloon()

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

Abstract top balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-top-balloon {
  @include _top-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-top-balloon">
  ...
</div>

_right-balloon()

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

Abstract right balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-right-balloon {
  @include _right-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-right-balloon">
  ...
</div>

_bottom-balloon()

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

Abstract bottom balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-bottom-balloon {
  @include _bottom-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-bottom-balloon">
  ...
</div>

_left-balloon()

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

Abstract left balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-left-balloon {
  @include _left-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}

html

<div class="c-left-balloon">
  ...
</div>

_breadcrumbs()

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

Abstract breadcrumbs component

scss

.c-breadcrumbs {
  @include _breadcrumbs();
}

html

<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">...</a></li>
  <li class="c-breadcrumbs__item">...</li>
</ol>

_btn()

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

Abstract button component

scss

.c-btn {
  @include _btn();
  @include _padding(.5, 1);
  background-color: #fff;
  color: $_color-text;
}

html

<a class="c-btn" role="button">btn</a>

_card()

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

Abstract card component

scss

.c-card {
  @include _card();
  background-color: #fff;

  &__body, &__action {
    @include _padding(.75);
  }
}

html

<div class="c-card">
  <div class="c-card__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg">
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>
<div class="c-card">
  <div class="c-card__figure" style="background-image: url('/basis/aigis_assets/images/dummy.jpg'); padding-top: 50%">
    <div style="position: absolute; left: 10px; bottom: 10px">...</div>
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>

_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>

$_container-margin

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

Container side margin

scss

//
// @var  length
//

$_container-margin: $_base-line-height;

_fluid-container()

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

Abstract fluid container component

scss

.c-fluid-container {
  @include _fluid-container();
}

html

<div class="c-fluid-container">
  ...
</div>

$_container-max-width

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

Container max width

scss

//
// @var  length
//

$_container-max-width: 1200px;

_container()

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

Abstract container component

scss

.c-container {
  @include _container();
}

html

<div class="c-container">
  ...
</div>

_drawer()

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

Abstract drawer component

scss

//
// @param  hash  $params
//   width      length
//   max-width  length
//

.c-drawer {
  @include _drawer((
    width: ($_base-line-height * 10),
    max-width: 80%,
  ));

  $item-padding-coefficient: 1;

  &__menu {
    @include _list-unstyled();
  }

  &__item, &__subitem {
    position: relative;
  }

  &__item {
    @include _padding(.5, $item-padding-coefficient, 0);
  }

  &__submenu {
    @include _list-unstyled();
    @include _margin(0, ($item-padding-coefficient * -1), 0, 0);
    padding-left: 1em;
  }

  &__subitem {
    @include _padding(.5, $item-padding-coefficient, 0, 0);
  }

  &__toggle {
    @include _position(absolute, _space(.5), 5px, 0);
    @include _square($_base-line-height);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

js

import BasisDrawer from 'node_modules/sass-basis/src/js/drawer.js';
new BasisDrawer({
  drawer : '.c-drawer',
  toggle : '.c-drawer__toggle',
  submenu: '.c-drawer__submenu'
});

html

<div style="min-height: 200px">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="hamburger-btn">
    <ul class="c-drawer__menu">
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item">
        <a href="#">menu</a>
        <div class="c-drawer__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="c-drawer__submenu" aria-hidden="true">
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div id="hamburger-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>

_entries()

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

Abstract entries component

scss

.c-entries {
  @include _entries();
  boder-top: 1px solid _light($_color-gray);

  &__item {
    @include _padding(1, 0);
    boder-bottom: 1px solid _light($_color-gray);
  }
}

html

<ul class="c-entries">
  <li class="c-entries__item">
    ...
  </li>
</ul>

_entry()

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

Abstract entry component

scss

.c-entry {
  @include _entry();

  &__header {
    @include _margin(0, 0, 1);
    @include _font-size-line-height($_base-font-size * 1.5);
  }

  &__content {
    @include _content();
  }
}

html

<article class="c-entry">
  <header class="c-entry__header">
    <h1 class="c-entry__title">...</h1>
    <div class="c-entry__content">
      ...
    </div>
  </header>
</article>

_flex-media()

  • /src/css/core/abstract/_flex-media.scss

Abstract flexible media component

scss

.c-flex-media {
  @include _flex-media();

  &__figure {
    @include _margin(0, 0, .5);
    width: 100%;

    @include _media-min(md) {
      @include _margin(0, 1, 0, 0);
      width: 150px;
    }
  }
}

html

<div class="c-flex-media">
  <div class="c-flex-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg">
  </div>
  <div class="c-flex-media__body">
    ...
  </div>
</div>

_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">

_hamburger-btn()

  • /src/css/core/abstract/_hamburger-btn.scss

Abstract hamburger button component

scss

.c-hamburger-btn {
  @include _hamburger-btn((
    height: 16px,
    width: 22px,
    bar-height: 2px,
    color: $_color-text,
  ));
}

js

import BasisHamburgerBtn from 'node_modules/sass-basis/src/js/hamburger-btn.js';
new BasisHamburgerBtn({
  btn: '.c-hamburger-btn'
});

html

<div id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>

<nav id="drawer" aria-labelledby="hamburger-btn">...</nav>

_hero()

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

Abstract hero component

scss

.c-hero {
  @include _hero();
  @include _padding(1);

  &__header {
    @include _margin(0, 0, 1);
  }

  &__footer {
    @include _margin(1, 0, 0);
  }
}

html

<div class="c-hero">
  <div class="c-hero__header">
    ...
  </div>
  <div class="c-hero__content">
    ...
  </div>
  <div class="c-hero__footer">
    ...
  </div>
</div>

_ib-row()

  • /src/css/core/abstract/_ib-row.scss

Abstract row component of inline-block based grid system

scss

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();

    &--1-3 {
      @include _ib-row__col(1, 3);
    }

    &--offset-1-3 {
      @include _ib-row__col--offset(1, 3);
    }
  }
}

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>

_ib-row__col()

  • /src/css/core/abstract/_ib-row.scss

Abstract column element of inline-block based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();

    &--1-3 {
      @include _ib-row__col(1, 3);
    }
  }
}

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>

_ib-row__col--width()

  • /src/css/core/abstract/_ib-row.scss

Sets column width of inline-block based grid system

scss

//
// @param  length  $width
//

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();
    @include _ib-row__col--width(auto);
  }
}

_ib-row__col--offset()

  • /src/css/core/abstract/_ib-row.scss

Sets column offset of inline-block based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();
    @include _ib-row__col--offset(1, 3);
  }
}

_ib-row--margin()

  • /src/css/core/abstract/_ib-row.scss

Sets row margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

.c-row {
  @include _ib-row();
  @include _ib-row--margin(1);
}

_ib-row__col--margin()

  • /src/css/core/abstract/_ib-row.scss

Sets column margin of inline-block based grid system

scss

//
// @param  int  $coefficient
//

.c-row {
  @include _ib-row();
  @include _ib-row--margin(1);
}

_ic()

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

Abstract icon component

scss

.c-ic-angle-right {
  @include _ic();

  &::before {
    content: "\e900";
  }
}

html

<span class="c-ic-angle-right" aria-hidden="true"></span>

_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>

_media()

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

Abstract media component

scss

.c-media {
  @include _media();

  &__figure {
    @include _margin(0, 1, 0, 0);
  }
}

html

<div class="c-media">
  <div class="c-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-media__body">
    ...
  </div>
</div>

_meta()

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

Abstract meta component

scss

.c-meta {
  @include _meta();
}

html

<ul class="c-meta">
  <li class="c-meta__item">
    ...
  </li>
</ul>

_navbar()

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

Abstract navbar component

scss

.c-navbar {
  @include _navbar();

  &__item > a {
    color: $_color-text;
    @include _padding(.5, 1);
  }
}

js

import BasisNavbar from 'node_modules/sass-basis/src/js/navbar.js';
new BasisNavbar({
  item   : '.c-navbar__item',
  submenu: '.c-navbar__submenu',
  subitem: '.c-navbar__subitem'
});

html

<ul class="c-navbar">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
</ul>

$_page-effect-z-index

  • /src/css/core/abstract/_page-effect.scss

z-index of page effect

scss

$_page-effect-z-index: 1000000;

_page-effect()

  • /src/css/core/abstract/_page-effect.scss

Abstract page effect component

scss

.c-page-effect {
  @include _page-effect((
    duration: .2s,
    background-color: #fff,
  ));
}

js

import BasisPageEffect from 'node_modules/sass-basis/src/js/page-effect.js';
new BasisPageEffect({
  pageEffect: '.c-page-effect',
  duration: 200
});

html

<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>

_page-header()

  • /src/css/core/abstract/_page-header.scss

Abstract page header component

scss

.c-page-header {
  @include _page-header();
  @include _padding(2, 0);

  &__title {
    @include _font-size-line-height($_base-font-size * 2);
  }
}

html

<div class="c-page-header">
  <h1 class="c-page-header__title">...</h1>
</div>

_pagination()

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

Abstract pagination component

scss

.c-pagination {
  @include _pagination();
  text-align: center;
  font-size: 0;

  &__item,
  &__item-link,
  &__item-ellipsis {
    margin: 0 3px;
    display: inline-flex;
    @include _square(30px);
    @include _font-size($_base-font-size-px - 2);
    align-items: center;
    justify-content: center;
  }
}

html

<div class="c-pagination">
  <span class="c-pagination__item" aria-current="page">1</span>
  <a class="c-pagination__item-link">2</a>
  <span class="c-pagination__item-ellipsis" aria-hidden="true"></span>
  <a class="c-pagination__item-link">99</a>
  <a class="c-pagination__item-link">100</a>
</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>

_row()

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

Abstract row component of flexbox based grid system

scss

.c-row {
  @include _row();

  &__col {
    @include _row__col();

    &--1-3 {
      @include _row__col(1, 3);
    }

    &--offset-1-3 {
      @include _row__col--offset(1, 3);
    }
  }
}

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>

_row__col()

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

Abstract column element of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();

    &--1-3 {
      @include _row__col(1, 3);
    }
  }
}

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>

_row__col--width()

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

Sets column width of flexbox based grid system

scss

//
// @param  length  $width
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();
    @include _row__col--width(auto);
  }
}

_row__col--offset()

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

Sets column offset of flexbox based grid system

scss

//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();
    @include _row__col--offset(1, 3);
  }
}

_row--margin()

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

Sets row margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

.c-row {
  @include _row();
  @include _row--margin(1);
}

_row__col--margin()

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

Sets column margin of flexbox based grid system

scss

//
// @param  int  $coefficient
//

.c-row {
  @include _row();
  @include _row--margin(1);
}

_section()

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

Abstract section component

scss

.c-section {
  @include _section();
  @include _padding(2, 0);

  &__title {
    @include _margin(0, 0, 2);
    @include _font-size-line-height($_base-font-size * 1.5);
    text-align: center;
  }

  &__content {
    @include _content();
  }
}

html

<section class="c-section">
  <div class="_c-container">
    <h2 class="c-section__title">...</h2>
    <div class="c-section__content">
      ...
    </div>
  </div>
</section>

_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>

_site-branding()

  • /src/css/core/abstract/_site-branding.scss

Abstract site branding component

scss

.c-site-branding {
  @include _site-branding();
}

html

<div class="c-site-branding">
  <h1 class="c-site-branding__title">...</h1>
</div>

_circle-spinner()

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

Abstract circle spinner component

scss

//
// @param  hash  $params
//   size         length
//   color        hex
//   border-size  length
//   delay        seconds
//   duration     seconds
//

.c-circle-spinner {
  @include _circle-spinner((
    size: 20px,
    color: _light($_color-gray),
    border-size: 3px,
    delay: 0s,
    duration: 2s,
  ));
}

html

<div class="c-circle-spinner"></div>

_dots-spinner()

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

Abstract dots spinner component

scss

//
// @param  hash  $params
//   size         length
//   color        hex
//   delay        seconds
//   duration     seconds
//   scale        int
//

.c-dots-spinner {
  @include _dots-spinner((
    size: 10px,
    color: $_color-gray,
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}

html

<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>

_pulse-spinner()

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

Abstract pulse spinner component

scss

//
// @param  hash  $params
//   height    length
//   width     length
//   color     hex
//   delay     seconds
//   duration  seconds
//   scale     int
//

.c-pulse-spinner {
  @include _pulse-spinner((
    height: 16px,
    width: 5px,
    color: $_color-gray,
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}

html

<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>