_alert()
Abstract alert component
scss
.c-alert {
@include _alert();
padding: var(--_padding1);
background-color: #4b9ad8;
color: #fff;
}
html
<div class="c-alert" role="alert">
...
</div>
Abstract alert component
.c-alert {
@include _alert();
padding: var(--_padding1);
background-color: #4b9ad8;
color: #fff;
}
<div class="c-alert" role="alert">
...
</div>
Abstract top balloon component
//
// @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,
));
padding: var(--_padding1);
}
<div class="c-top-balloon">
...
</div>
Abstract right balloon component
//
// @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,
));
padding: var(--_padding1);
}
<div class="c-right-balloon">
...
</div>
Abstract bottom balloon component
//
// @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,
));
padding: var(--_padding1);
}
<div class="c-bottom-balloon">
...
</div>
Abstract left balloon component
//
// @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,
));
padding: var(--_padding1);
}
<div class="c-left-balloon">
...
</div>
Abstract breadcrumbs component
.c-breadcrumbs {
@include _breadcrumbs();
}
<ol class="c-breadcrumbs">
<li class="c-breadcrumbs__item"><a href="#">Lorem</a></li>
<li class="c-breadcrumbs__item">ipsum</li>
</ol>
Abstract button component
.c-btn {
@include _btn();
padding: var(--_padding-2) var(--_padding-1);
background-color: #fff;
color: var(--_color-text);
}
<a class="c-btn" role="button">btn</a>
Abstract checkbox component
.c-checkbox {
@include _checkbox();
}
<label>
<span class="c-checkbox">
<input type="checkbox" class="c-checkbox__control">
<span class="c-checkbox__label">...</span>
</span>
</label>
Abstract fluid container component
.c-fluid-container {
@include _fluid-container();
}
<div class="c-fluid-container">
...
</div>
Abstract container component
.c-container {
@include _container();
}
<div class="c-container">
...
</div>
Abstract row component of inline-block based grid system
.c-ib-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);
}
}
}
<div class="c-ib-row">
<div class="c-ib-row__col c-ib-row__col--1-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="c-ib-row__col c-ib-row__col--1-3">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
Abstract column element of inline-block based grid system
//
// @param int $columns molecule column size
// @param int $max-columns denominator column size
//
.c-ib-row {
@include _ib-row();
&__col {
@include _ib-row__col();
&--1-3 {
@include _ib-row__col(1, 3);
}
}
}
<div class="c-ib-row">
<div class="c-ib-row__col c-ib-row__col--1-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="c-ib-row__col c-ib-row__col--1-3">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
Sets column width of inline-block based grid system
//
// @param length $width
//
.c-ib-row {
@include _ib-row();
&__col {
@include _ib-row__col();
@include _ib-row__col--width(auto);
}
}
Sets column offset of inline-block based grid system
//
// @param int $columns molecule column size
// @param int $max-columns denominator column size
//
.c-ib-row {
@include _ib-row();
&__col {
@include _ib-row__col();
@include _ib-row__col--offset(1, 3);
}
}
Sets row margin of inline-block based grid system
//
// @param int $coefficient
//
.c-ib-row {
@include _ib-row();
@include _ib-row--margin(1);
}
Sets column margin of inline-block based grid system
//
// @param int $coefficient
//
.c-ib-row {
@include _ib-row();
@include _ib-row--margin(1);
}
Abstract column element of flexbox based grid system
//
// @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);
}
}
}
<div class="c-row">
<div class="c-row__col c-row__col--1-3">
...
</div>
</div>
Sets column width of flexbox based grid system
//
// @param length $width
//
.c-row {
@include _row();
&__col {
@include _row__col();
@include _row__col--width(auto);
}
}
Sets column offset of flexbox based grid system
//
// @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);
}
}
Sets row margin of flexbox based grid system
//
// @param int $coefficient
//
.c-row {
@include _row();
@include _row--margin(1);
}
Sets column margin of flexbox based grid system
//
// @param int $coefficient
//
.c-row__col {
@include _row__col();
@include _row__col--margin(1);
}
Abstract row component of flexbox based grid system
.c-lattice {
@include _lattice();
&__col {
@include _lattice__col();
&--1-3 {
@include _lattice__col(1, 3);
}
}
}
<div class="c-lattice">
<div class="c-lattice__col c-lattice__col--1-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="c-lattice__col c-lattice__col--1-3">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
Abstract column element of flexbox based grid system
//
// @param int $columns molecule column size
// @param int $max-columns denominator column size
//
.c-lattice {
@include _lattice();
&__col {
@include _lattice__col();
&--1-3 {
@include _lattice__col(1, 3);
}
}
}
<div class="c-lattice">
<div class="c-lattice__col c-lattice__col--1-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="c-lattice__col c-lattice__col--1-3">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
Sets column width of flexbox based grid system
//
// @param length $width
//
.c-lattice {
@include _lattice();
&__col {
@include _lattice__col(1, 2);
@include _media-min(lg) {
@include _lattice__col--width(1 / 3 * 100%);
}
}
}
Abstract drawer component
//
// @param hash $params
// width length
// max-width length
//
.c-drawer {
@include _drawer();
&__focus-point {
height: 0px !important;
width: 0px !important;
opacity: 0 !important;
}
&__menu,
&__submenu {
@include _list-unstyled();
> *:not(:first-child) {
margin-top: var(--_margin-1);
}
}
&__item,
&__subitem {
position: relative;
overflow: hidden;
&--has-submenu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> * {
flex: 1 1 auto;
}
> a {
padding-right: var(--_padding-1);
max-width: calc(100% - 42px);
}
> .#{ $_prefix }c-drawer__toggle {
flex: 0 0 auto;
width: 42px;
overflow: hidden;
}
> .#{ $_prefix }c-drawer__submenu {
flex: 1 1 100%;
}
}
}
&__submenu {
margin-top: var(--_margin-1);
margin-left: var(--_margin-1);
&[aria-hidden="true"] {
display: none;
visibility: hidden;
}
}
&__toggle {
display: flex;
align-items: center;
justify-content: center;
}
}
import BasisDrawer from 'node_modules/sass-basis/src/js/_drawer.js';
new BasisDrawer({
drawer : '.c-drawer',
});
<div style="min-height: 200px; overflow: hidden">
<nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="my-drawer-btn">
<div class="c-drawer__inner">
<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>
<button class="c-drawer__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<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>
<button class="c-drawer__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-drawer__submenu" aria-hidden="true">
<li class="c-drawer__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-drawer__item">
<a href="#">menu</a>
<button class="c-drawer__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<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>
</div>
</nav>
<div class="c-drawer-close-zone" aria-controls="drawer" aria-hidden="true"></div>
<nav id="drawer-inverse" class="c-drawer c-drawer--inverse" role="navigation" aria-hidden="true" aria-labelledby="my-drawer-btn-inverse">
<div class="c-drawer__inner">
<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>
<button class="c-drawer__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<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>
<button class="c-drawer__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-drawer__submenu" aria-hidden="true">
<li class="c-drawer__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-drawer__item">
<a href="#">menu</a>
<button class="c-drawer__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<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>
</div>
</nav>
<div class="c-drawer-close-zone" aria-controls="drawer-inverse" aria-hidden="true"></div>
</div>
<button id="my-drawer-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
<span class="c-hamburger-btn__bars">
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
</span>
<span class="c-hamburger-btn__label">MENU</span>
</button>
<button id="my-drawer-btn-inverse" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer-inverse">
<span class="c-hamburger-btn__bars">
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
</span>
<span class="c-hamburger-btn__label">MENU (Inverse)</span>
</dibuttonv>
Abstract dropdown component
.c-dropdown {
@include _dropdown();
&__menu,
&__submenu {
@include _list-unstyled();
> *:not(:first-child) {
margin-top: var(--_margin-1);
}
}
&__item,
&__subitem {
position: relative;
overflow: hidden;
&--has-submenu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> * {
flex: 1 1 auto;
}
> a {
padding-right: var(--_padding-1);
max-width: calc(100% - 42px);
}
> .#{ $_prefix }c-dropdown__toggle {
flex: 0 0 auto;
width: 42px;
overflow: hidden;
}
> .#{ $_prefix }c-dropdown__submenu {
flex: 1 1 100%;
}
}
}
&__submenu {
margin-top: var(--_margin-1);
margin-left: var(--_margin-1);
&[aria-hidden="true"] {
display: none;
visibility: hidden;
}
}
&__toggle {
display: flex;
align-items: center;
justify-content: center;
}
}
import BasisDrawer from 'node_modules/sass-basis/src/js/_drawer.js';
new BasisDrawer({
drawer : '.c-dropdown',
});
<div style="min-height: 200px; position: relative">
<nav id="my-dropdown" class="c-dropdown" role="navigation" aria-hidden="true" aria-labelledby="my-dropdown-btn">
<div class="c-dropdown__inner">
<ul class="c-dropdown__menu">
<li class="c-dropdown__item">
<div class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="my-dropdown">
<div class="c-hamburger-btn__bars">
<div class="c-hamburger-btn__bar"></div>
<div class="c-hamburger-btn__bar"></div>
<div class="c-hamburger-btn__bar"></div>
</div>
<div class="c-hamburger-btn__label">MENU</div>
</div>
</li>
<li class="c-dropdown__item"><a href="#">menu</a></li>
<li class="c-dropdown__item"><a href="#">menu</a></li>
<li class="c-dropdown__item">
<a href="#">menu</a>
<button class="c-dropdown__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-dropdown__submenu" aria-hidden="true">
<li class="c-dropdown__subitem"><a href="#">submenu</a></li>
<li class="c-dropdown__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<button id="my-dropdown-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-dropdown">
<span class="c-hamburger-btn__bars">
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
</span>
<span class="c-hamburger-btn__label">MENU</span>
</button>
Abstract entries component
.c-entries {
@include _entries();
boder-top: 1px solid var(--_light-color-gray);
&__item {
padding: var(--_padding1) 0;
boder-bottom: 1px solid var(--_light-color-gray);
}
}
<ul class="c-entries">
<li class="c-entries__item">
...
</li>
</ul>
Abstract entry component
.c-entry {
@include _entry();
&__header {
margin-bottom: var(--_margin1);
@include _set-font-size-level(3);
}
&__content {
@include _set-content-level(1);
}
}
<article class="c-entry">
<header class="c-entry__header">
<h1 class="c-entry__title">...</h1>
<div class="c-entry__content">
...
</div>
</header>
</article>
Abstract form control component
.c-form-control {
@include _form-control();
}
<input type="text" class="c-form-control">
Abstract hamburger button component
.c-hamburger-btn {
@include _hamburger-btn((
height: 16px,
width: 22px,
bar-height: 2px,
color: var(--_color-text),
));
}
import BasisHamburgerBtn from 'node_modules/sass-basis/src/js/_hamburger-btn.js';
new BasisHamburgerBtn({
btn: '.c-hamburger-btn'
});
<button id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
<span class="c-hamburger-btn__bars">
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
<span class="c-hamburger-btn__bar"></span>
</span>
<span class="c-hamburger-btn__label">MENU</span>
</button>
<nav id="drawer" aria-labelledby="hamburger-btn">...</nav>
Abstract hero component
.c-hero {
@include _hero();
padding: var(--_padding1);
&__header {
margin-bottom: var(--_margin1);
}
&__footer {
margin-top: var(--_margin1);
}
}
<div class="c-hero">
<div class="c-hero__header">
...
</div>
<div class="c-hero__content">
...
</div>
<div class="c-hero__footer">
...
</div>
</div>
Abstract input group component
.c-input-group {
@include _input-group();
}
<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>
Abstract media component
.c-media {
@include _media();
&__figure {
margin-right: var(--_margin1);
}
}
<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>
Abstract meta component
.c-meta {
@include _meta();
}
<ul class="c-meta">
<li class="c-meta__item">
...
</li>
</ul>
Abstract navbar component
.c-navbar {
@include _navbar();
&__item > a {
color: inherit;
padding: var(--_padding-1) var(--_padding1);
}
}
import BasisNavbar from 'node_modules/sass-basis/src/js/_navbar.js';
new BasisNavbar({
wrapper: '.c-navbar',
});
<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>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<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>
<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>
<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">
<a href="#">menu</a>
</li>
</ul>
``````html
<ul class="c-navbar" data-popup-mode="click">
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<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>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<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">
<a href="#">menu</a>
</li>
</ul>
Abstract page effect component
.c-page-effect {
@include _page-effect((
duration: .2s,
background-color: #fff,
));
}
import BasisPageEffect from 'node_modules/sass-basis/src/js/_page-effect.js';
new BasisPageEffect({
pageEffect: '.c-page-effect',
duration: 200
});
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
Loading...
</div>
</div>
Abstract page header component
.c-page-header {
@include _page-header();
padding: var(--_padding2) 0;
&__title {
@include _set-font-size-level(3);
}
}
<div class="c-page-header">
<h1 class="c-page-header__title">...</h1>
</div>
Abstract pagination component
.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;
}
}
<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>
Abstract pre component
pre {
@include _pre();
}
<pre>pre</pre>
Abstract radio button component
.c-radio {
@include _radio();
}
<label>
<span class="c-radio">
<input type="radio" class="c-radio__control">
<span class="c-radio__label">...</span>
</span>
</label>
Abstract responsive container component
.c-responsive-container-16-9 {
@include _responsive-container();
padding-bottom: (9 / 16 * 100%);
}
<div class="c-responsive-container-16-9">
<iframe></iframe>
</div>
Abstract responsive table component
.responsive-table {
@include _media-max(sm) {
@include _responsive-table();
}
}
th | td | td |
---|---|---|
th | td | td |
<div class="c-responsive-table">
<table style="width: 1000px">
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
</tr>
</table>
</div>
Abstract row component of flexbox based grid system
.c-row {
@include _row();
&__col {
flex: 0 1 100%;
max-width: 100%;
&--1-3 {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
}
}
<div class="c-row">
<div class="c-row__col c-row__col--1-3">
...
</div>
</div>
Abstract section component
.c-section {
@include _section();
padding: var(--_padding3) 0;
&__title {
margin-bottom: var(--_margin2);
@include _set-font-size-level(3);
text-align: center;
}
&__content {
@include _set-content-level(1);
}
}
<section class="c-section">
<div class="_c-container">
<h2 class="c-section__title">...</h2>
<div class="c-section__content">
...
</div>
</div>
</section>
Abstract selectbox component
.c-select {
@include _select();
}
<div class="c-select">
<select class="c-select__control">
<option value="1">label-1</option>
<option value="2">label-2</option>
<option value="3">label-3</option>
</select>
<span class="c-select__toggle"></span>
</div>
Abstract site branding component
.c-site-branding {
@include _site-branding();
}
<div class="c-site-branding">
<h1 class="c-site-branding__title">...</h1>
</div>
Abstract circle spinner component
//
// @param hash $params
// size length
// color hex
// border-size length
// delay seconds
// duration seconds
//
.c-circle-spinner {
@include _circle-spinner((
size: 20px,
color: var(--_light-color-gray),
border-size: 3px,
delay: 0s,
duration: 2s,
));
}
<div class="c-circle-spinner"></div>
Abstract dots spinner component
//
// @param hash $params
// size length
// color hex
// delay seconds
// duration seconds
// scale int
//
.c-dots-spinner {
@include _dots-spinner((
size: 10px,
color: var(--_color-gray),
delay: 0s,
duration: 2s,
scale: 1.3,
));
}
<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>
Abstract pulse spinner component
//
// @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: var(--_color-gray),
delay: 0s,
duration: 2s,
scale: 1.3,
));
}
<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>
Container side margin
//
// @var length
//
$_container-margin: $_base-line-height;
Container max width
//
// @var length
//
$_container-max-width: 1280px;
z-index
of page effect
$_page-effect-z-index: 1000000;