[add] ratioコンポーネントを追加

[manabuyasuda]

以前削除した.c-ratioコンポーネントを再追加する。 特に正方形に固定するパターンを再現するのに必要。

@mixinにしてからincludeさせる。

 /* #Ratio
   -------------------------------------------------------------------------- */
/*doc

---
title: raio
name: ratio
categories: [component]

---
アスペクト比を固定したまま伸縮させます。
Modifierは以下のとおりです。
* アスペクト比16:9 `--16to9`
* アスペクト比4:3 `--4to3`
* アスペクト比3:2 `--3to2`
* アスペクト比2:1 `--2to1`
`.c-ratio__content`には`padding`を指定できないので注意してください。
```block
<div class="c-ratio c-ratio--16to9">
  <div class="c-ratio__content">
    <p></p>
  </div>
</div>

/ .c-ratio { display: block; overflow: hidden; position: relative; &:before { content: ""; display: block; width: 100%; / 1:1 ratio */ padding-bottom: 100%; } }

.c-ratio__content, .c-ratio > iframe, .c-ratio > embed, .c-ratio > object { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; }

.c-ratio--16to9 { padding-bottom: percentage(9 / 16); }

.c-ratio--4to3 { padding-bottom: percentage(3 / 4); }

.c-ratio--3to2 { padding-bottom: percentage(2 / 3); }

.c-ratio--2to1 { padding-bottom: percentage(1 / 2); }