[add] layoutコンポーネントのサイズバリエーションを増やす

[manabuyasuda]

dl要素で使うような、blockからinlineになるときに使えるサイズバリエーション。

@include _responsive('.c-layout--col2and10') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(2 / 12);
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(10 / 12);
  }
}

@include _responsive('.c-layout--col3and9') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(3 / 12);
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(9 / 12);
  }
}

@include _responsive('.c-layout--col4and8') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(4 / 12);
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(8 / 12);
  }
}

@include _responsive('.c-layout--col5and7') {
  > .c-layout__item:nth-child(odd) {
    width: percentage(5 / 12);
  }
  > .c-layout__item:nth-child(even) {
    width: percentage(7 / 12);
  }
}

@include _responsive('.c-layout--col6and6') {
  > .c-layout__item:nth-child(odd),
  > .c-layout__item:nth-child(even) {
    width: percentage(6 / 12);
  }
}