187 行
4.9 KiB
SCSS
187 行
4.9 KiB
SCSS
/* #Layout
|
|
-------------------------------------------------------------------------- */
|
|
/*doc
|
|
---
|
|
title: layout
|
|
name: layout
|
|
categories: [component]
|
|
---
|
|
|
|
汎用的なレイアウトオブジェクトです。`width`の変更はUtilityレイヤーで指定します。
|
|
|
|
Modifierは以下のとおりです。
|
|
|
|
* ガターの追加 `--small`, `--medium`, `--large`
|
|
* text-alignの変更 `--middle`, `--bottom`
|
|
* 配置を反転 `--reverse`
|
|
* `.c-layout__item`のカラム幅をまとめて指定 `--colx`, `--colxandx`
|
|
|
|
```block
|
|
<div class="c-wrapper">
|
|
<div class="c-layout c-layout--medium" style="margin-bottom:1rem;">
|
|
<div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout__item u-8of12-md</div></div>
|
|
<div class="c-layout__item u-4of12-md"><div style="background-color:lightblue;">c-layout__item u-4of12-md</div></div>
|
|
</div>
|
|
|
|
<div class="c-layout c-layout--reverse c-layout--medium" style="margin-bottom:1rem;">
|
|
<div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout--rev c-layout__item u-8of12-md</div></div>
|
|
<div class="c-layout__item u-4of12-md"><div style="background-color:lightblue;">c-layout--rev c-layout__item u-4of12-md</div></div>
|
|
</div>
|
|
|
|
<div class="c-layout c-layout--center c-layout--medium" style="margin-bottom:1rem;">
|
|
<div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout--center c-layout__item u-8of12-md</div></div>
|
|
</div>
|
|
|
|
<div class="c-layout c-layout--medium c-layout--col2-sm c-layout--col3-md" style="margin-bottom:1rem;">
|
|
<div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
|
|
<div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
|
|
<div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
|
|
</div>
|
|
|
|
<div class="c-layout c-layout--col4and8" style="margin-bottom:1rem;">
|
|
<div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item u-8of12-md</div></div>
|
|
<div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item u-4of12-md</div></div>
|
|
</div>
|
|
</div>
|
|
```
|
|
*/
|
|
$_layout-gutter: $_white-space !default;
|
|
$_layout-gutter-small: ($_layout-gutter / 2) !default;
|
|
$_layout-gutter-large: ($_layout-gutter * 2) !default;
|
|
|
|
.c-layout {
|
|
@include _c-layout();
|
|
}
|
|
|
|
.c-layout__item {
|
|
@include _c-layout__item();
|
|
}
|
|
|
|
/**
|
|
* ガターを3つのパリエーションから選択します。
|
|
*/
|
|
.c-layout--small {
|
|
margin-left: -$_layout-gutter-small;
|
|
> .c-layout__item {
|
|
padding-left: $_layout-gutter-small;
|
|
}
|
|
}
|
|
|
|
.c-layout--medium {
|
|
margin-left: -$_layout-gutter;
|
|
> .c-layout__item {
|
|
padding-left: $_layout-gutter;
|
|
}
|
|
}
|
|
|
|
.c-layout--large {
|
|
margin-left: -$_layout-gutter-large;
|
|
> .c-layout__item {
|
|
padding-left: $_layout-gutter-large;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 垂直位置を2つのパリエーションから選択します(デフォルトは`top`)。
|
|
*/
|
|
.c-layout--middle {
|
|
> .c-layout__item {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.c-layout--bottom {
|
|
> .c-layout__item {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 要素を中央配置にします(デフォルトは`left`)。
|
|
*/
|
|
.c-layout--center {
|
|
text-align: center;
|
|
> .c-layout__item {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 要素を右端寄せにします(デフォルトは`left`)。
|
|
*/
|
|
.c-layout--right {
|
|
text-align: right;
|
|
> .c-layout__item {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* `.c-layout__item`のカラム数をまとめて指定します。
|
|
*/
|
|
@include _responsive('.c-layout--col2') {
|
|
> .c-layout__item {
|
|
width: percentage(1 / 2);
|
|
}
|
|
}
|
|
|
|
@include _responsive('.c-layout--col3') {
|
|
> .c-layout__item {
|
|
width: percentage(1 / 3);
|
|
}
|
|
}
|
|
|
|
@include _responsive('.c-layout--col4') {
|
|
> .c-layout__item {
|
|
width: percentage(1 / 4);
|
|
}
|
|
}
|
|
|
|
@include _responsive('.c-layout--col2and10') {
|
|
> .c-layout__item:nth-child(odd) {
|
|
width: percentage(2 / 12);
|
|
}
|
|
> .c-layout__item:nth-child(even) {
|
|
width: percentage(10 / 12);
|
|
}
|
|
}
|
|
|
|
@include _responsive('.c-layout--col3and9') {
|
|
> .c-layout__item:nth-child(odd) {
|
|
width: percentage(3 / 12);
|
|
}
|
|
> .c-layout__item:nth-child(even) {
|
|
width: percentage(9 / 12);
|
|
}
|
|
}
|
|
|
|
@include _responsive('.c-layout--col4and8') {
|
|
> .c-layout__item:nth-child(odd) {
|
|
width: percentage(4 / 12);
|
|
}
|
|
> .c-layout__item:nth-child(even) {
|
|
width: percentage(8 / 12);
|
|
}
|
|
}
|
|
|
|
@include _responsive('.c-layout--col5and7') {
|
|
> .c-layout__item:nth-child(odd) {
|
|
width: percentage(5 / 12);
|
|
}
|
|
> .c-layout__item:nth-child(even) {
|
|
width: percentage(7 / 12);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 要素を右から配置させます(HTMLの記述を反転させた状態でレイアウトされます)。
|
|
*/
|
|
@include _responsive('.c-layout--reverse') {
|
|
text-align: left;
|
|
direction: rtl;
|
|
> .c-layout__item {
|
|
text-align: left;
|
|
direction: ltr;
|
|
}
|
|
}
|