[add] c-list-inlineコンポーネントの追加

[manabuyasuda]

.c-list-inline {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;
  list-style-type: none;
}

.c-list-inline__item {
  display: inline-block;
  font-size: medium;
  font-size: 1rem;
  vertical-align: top;
}

.c-list-inline--medium {
  > .c-list-inline__item:not(:last-child) {
    margin-right: 1em;
  }
}

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

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

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

リスト1　リスト2　リスト3 のようなレイアウトになる。

.c-list-inline--mediumを指定すると余白で区切られる。

[manabuyasuda]

役割は要素を横並びにすること。用途としてはボタンやラベル、テキストリンクなどの横並び。

inline-blockなので、ウィンドウサイズが狭いとカラム落ちすることがある。

blockにしたり、親要素に対して均等なボタンにしたい場合は別のコンポーネントとして定義する。