70 行
1.2 KiB
SCSS
70 行
1.2 KiB
SCSS
/* #Box
|
|
-------------------------------------------------------------------------- */
|
|
/*doc
|
|
---
|
|
title: box
|
|
name: box
|
|
categories: [project]
|
|
---
|
|
|
|
画像やテキストなどを縦に並べるコンポーネントです。
|
|
|
|
ラベルはデフォルトで右上に配置されます。Modifierで以下のように変更できます。
|
|
|
|
- 右下 `.p-box__labels--right-bottom`
|
|
- 左上 `.p-box__labels--left-top`
|
|
- 左下 `.p-box__labels--left-bottom`
|
|
|
|
```block
|
|
<div class="p-box">
|
|
<div class="p-box__image">
|
|
<img src="http://lorempixel.com/600/400/" alt="">
|
|
<ul class="p-box__labels">
|
|
<li class="p-box__label p-label">ラベル1</li>
|
|
<li class="p-box__label p-label">ラベル2</li>
|
|
</ul>
|
|
</div>
|
|
<div class="p-box__content">
|
|
<h2>見出し</h2>
|
|
<p>文章</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
*/
|
|
.p-box {
|
|
@include _p-box();
|
|
}
|
|
|
|
.p-box__image {
|
|
@include _p-box__image();
|
|
}
|
|
|
|
.p-box__labels {
|
|
@include _p-box__labels();
|
|
}
|
|
|
|
.p-box__labels--right-bottom {
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
.p-box__labels--left-top {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
.p-box__labels--left-bottom {
|
|
top: auto;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.p-box__label {
|
|
@include _p-box__label();
|
|
}
|
|
|
|
.p-box__content {
|
|
@include _p-box__content();
|
|
}
|