/*
===
3.1 Columns
===
### Columns Class
グリッドシステムを構成するクラスです。
これらを利用することでページ全体のレイアウトを構築することができます。
Frontwork CSSのグリッドシステムは[BootStrap](https://getbootstrap.com/)や[Foundation](https://foundation.zurb.com/)を参考にしています。
#### Site
`body`要素直下の要素に使用します。
```html
Page
```
#### Container
グリッドシステムにおけるコンテナーです。
```html
```
##### Full Size Modifier
コンテナーの横幅を100%に設定します。
```html
```
#### Row & Column
グリッドシステムにおけるグリッドです。
コンテナーの直下の要素にRowを使用し、Rowの直下の要素にColumnを使用します。
またColumnの直下にRowを使用することで、ネストして利用することができます。
```html
```
##### Size Modifier (Column)
グリッドシステムにおけるグリッドのサイズを指定します。
```html
```
##### Offset Modifier (Column)
左側、もしくは右側にマージンを追加します。
```html
```
##### No Gatter Modifier (Row & Column)
グリッドシステムにおけるガターを削除します。
```html
```
##### Flexible Box Modifier (Row & Column)
CSS3のFlexible Boxを適用します。
```html
Flexible Item
Flexible Item
```
###### Direction
Flexible Itemの並びの方向を縦、もしくは横並びにします。
```html
Side by Side (Default)
Side by Side (Default)
Vertical Row (Default)
Vertical Row (Default)
```
###### Align Item
Flexible Itemの縦方向の揃えの位置を上揃え、もしくは中央揃えにします。
```html
Align Top (Default)
Align Top (Default)
Align Middle
Align Middle
```
###### Order
Flexible Itemの表示順の優先順位を指定します。
```html
Priority 0 (Default)
Priority +1
Priority -1
```
*/
.l-st,
.l-cn,
.l-rw,
.l-cl {
display: block;
min-height: 0;
}
.l-st,
.l-cn,
.l-rw {
@include clearfix;
}
.l-cn {
margin-left: auto;
margin-right: auto;
}
.l-cl {
width: 100%;
float: left;
}
@include media-query-asc {
.l-st {
@if unit(get-value($container-size-list)) == 'px' {
min-width: get-value($container-size-list);
} @else if unit(get-value($container-min-size-list)) == 'px' {
min-width: get-value($container-min-size-list);
} @else if get-value($container-max-size-list) != 'none' and unit(get-value($container-max-size-list)) == 'px' {
min-width: get-value($container-max-size-list);
} @else {
min-width: 0;
}
}
.l-cn {
width: get-value($container-size-list);
min-width: get-value($container-min-size-list);
max-width: get-value($container-max-size-list);
padding-right: get-value($gatter-size-list);
padding-left: get-value($gatter-size-list);
}
.l-rw {
margin-right: -(get-value($gatter-size-list));
margin-left: -(get-value($gatter-size-list));
padding-left: get-value($gatter-size-list) / 2;
padding-right: get-value($gatter-size-list) / 2;
}
.l-cl {
padding-right: get-value($gatter-size-list) / 2;
padding-left: get-value($gatter-size-list) / 2;
}
}
@include media-query-asc {
.l-cn--fl\@#{$query} {
width: 100%;
}
.l-rw--ng\@#{$query},
.l-cl--ng\@#{$query} {
padding-right: 0;
padding-left: 0;
}
@for $i from 1 through $grid-unit {
.l-cl--#{$i}\@#{$query} {
width: 100 / $grid-unit * $i * 1%;
}
}
@for $i from 0 through $grid-unit {
.l-cl--ml#{$i}\@#{$query} {
margin-left: 100 / $grid-unit * $i * 1%;
}
.l-cl--mr#{$i}\@#{$query} {
margin-right: 100 / $grid-unit * $i * 1%;
}
}
.l-rw--fx\@#{$query} {
display: flex;
flex-wrap: wrap;
}
.l-rw--fx--hr\@#{$query} {
flex-direction: row; // default
}
.l-rw--fx--vt\@#{$query} {
flex-direction: column;
}
.l-rw--fx--tp\@#{$query} {
align-items: stretch; // default
}
.l-rw--fx--md\@#{$query} {
align-items: center;
}
.l-cl--fx--od\@#{$query} {
order: 0; // default
}
.l-cl--fx--op\@#{$query} {
order: 1;
}
.l-cl--fx--om\@#{$query} {
order: -1;
}
}