[update] c-blockに要素の順序を逆にするModifierを追加

[manabuyasuda]

画像・テキストをテキスト・画像のように視覚的な要素の順番を入れ替えるModifierを追加する。 また、__imageと__bodyと役割を示さない方が使いやすいので__itemに統一する。

 /* #Block
   -------------------------------------------------------------------------- */
/*

---
name: block
category: component

---

画像とテキストをblock（縦）に配置します。
Modifierは以下のとおりです。

- 要素の順番を逆に配置 `c-block--reverse`
- 画像を左右中央に配置（Blockで指定） `c-block--left`, `c-block--center`, `c-block--right`
- 画像を左右中央に配置（Elementで指定） `c-block__item--left`, `c-block__item--center`, `c-block__item--right`

```jade
div.c-block
  div.c-block__item
    img(src="https://placehold.jp/600x400.png" alt="")
  div.c-block__item
    p この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。This sentence is a dummy. Size of the character, amount, character spacing, has been put in order to check the line spacing and the like.

div.c-block
  div.c-block__item
    p この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。This sentence is a dummy. Size of the character, amount, character spacing, has been put in order to check the line spacing and the like.
  div.c-block__item
    img(src="https://placehold.jp/600x400.png" alt="")

div.c-block.c-block--reverse-md
  div.c-block__item
    img(src="https://placehold.jp/600x400.png" alt="")
  div.c-block__item
    p この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。This sentence is a dummy. Size of the character, amount, character spacing, has been put in order to check the line spacing and the like.

*/ .c-block { display: block; width: 100%; }

.c-block__item { display: block; width: 100%; &:not(:first-of-type) { margin-top: 0.25em; }

:last-child { margin-bottom: 0; } }

.c-block__item > img { display: block; width: 100%; max-width: none; }

@include _responsive('.c-block__item--left') { text-align: left; }

@include _responsive('.c-block__item--center') { text-align: center; }

@include _responsive('.c-block__item--right') { text-align: right; }

@include _responsive('.c-block--left') { text-align: left; }

@include _responsive('.c-block--center') { text-align: center; }

@include _responsive('.c-block--right') { text-align: right; }

@include _responsive('.c-block--reverse') { display: table; width: 100%;

.c-blockitem:first-child { margin-top: 0.5rem; } .c-blockitem:last-child { display: table-header-group; } }