[add] boxオブジェクトの追加

[manabuyasuda]

p-box（仮）オブジェクトを追加する。デフォルトでは装飾的なスタイルはつけないけど、将来的につけることになると思うので、Projectレイヤーとする。

• 画像とテキスト、見出しやラベルなどを配置することを想定
• 画像は100%表示で主に最初に配置される
• コンテンツ部分はpaddingがつくことを想定

このようなスタイルになる。

.p-box {
  display: block;
  @include _clearfix;
}

.p-box__image {
  position: relative;
  display: block;
  > img {
    width: 100%;
    max-width: none;
  }
}

.p-box__labels {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding-left: 0;
  list-style-type: none;
  @include _clearfix;
}

.p-box__labels--right-bottom {
  top: auto;
  bottom: 0;
}

.p-box__labels--left-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

.p-box__label {
  float: left;
}

.p-box__content {
  display: block;
  padding: 1em;
  > :first-child {
    margin-top: 0;
  }
  > :last-child {
    margin-bottom: 0;
  }
}

[manabuyasuda]

クオーテーションの修正。

<li class="p-box__label p-label"">ラベル2</li>

[manabuyasuda]

修正完了（IDのつけ忘れ）。

b8e06181420ad43419080b933b3fd5bcc979d168