40 行
798 B
SCSS
40 行
798 B
SCSS
|
/* #Section
|
||
|
|
-------------------------------------------------------------------------- */
|
||
|
|
/*doc
|
||
|
|
---
|
||
|
|
title: section
|
||
|
|
name: section
|
||
|
|
categories: [layout]
|
||
|
|
---
|
||
|
|
|
||
|
|
`<section>`タグを使うようなセクションの余白（`margin`）を管理します。
|
||
|
|
コンポーネント単位での余白はobject/utility/_margin.scssで管理をします。
|
||
|
|
|
||
|
|
サイズはデフォルトで3つ、最大で5つとします。
|
||
|
|
|
||
|
|
1. tiny(optional)
|
||
|
|
2. small
|
||
|
|
3. medium(default)
|
||
|
|
4. large
|
||
|
|
5. huge(optional)
|
||
|
|
|
||
|
|
Modifierなしをmedium、変更する場合にはModifierを指定します。
|
||
|
|
|
||
|
|
```block
|
||
|
|
<div class="l-section">
|
||
|
|
<h2>見出し2</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="l-section l-section--small">
|
||
|
|
<h2>見出し2</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="l-section l-section--large">
|
||
|
|
<h2>見出し2</h2>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
*/
|
||
|
|
.l-section {
|
||
|
|
|
||
|
|
}
|