ボタンCSSの見直し

[qrac]

使用頻度の下がってきているFlatタイプの削除。

.btn.is-flat {
  border-bottom: 3px solid $dark-7;
  transition: none;
  &:hover {
    border-bottom-width: 2px;
    margin-top: 1px;
  }
  &:active {
    border-bottom: 1px solid transparent;
    margin-top: 2px;
  }
  &.is-disable,
  &.is-disable:hover,
  &.is-disable:active {
    border-bottom: 3px solid $dark-9;
    margin-top: 0;
  }
}

[qrac]

ボタン通しのスペーシングは、ボタンの大きさによって自動で相対的なスペースが生まれるように変更。

before

@for $i from 1 through 9 {
  .btns.is-space-#{$i} {
    margin-bottom: $i * -4px;
  }
  .btns.is-space-#{$i} > * {
    margin-right: $i * 4px;
    margin-bottom: $i * 4px;
  }
}

after

.btns {
  &:not(.is-bar) {
    margin-left: -0.5em;
    margin-bottom: -0.5em;
  }
  &:not(.is-bar) > * {
    margin-left: 0.5em;
    margin-bottom: 0.5em;
  }
}

[qrac]

.btnsのフレックスレイアウトをグリッドに合わせる。

before

.btns {
  &.is-left {
    justify-content: flex-start;
  }
  &.is-center {
    justify-content: center;
  }
  &.is-right {
    justify-content: flex-end;
  }
  &.is-middle {
    align-items: center;
  }
}

after

.btns {
  &.is-middle {
    align-items: center;
  }
  &.is-bottom {
    align-items: flex-end;
  }
  &.is-center {
    justify-content: center;
  }
  &.is-right {
    justify-content: flex-end;
  }
  &.is-between {
    justify-content: space-between;
  }
  &.is-around {
    justify-content: space-around;
  }
}

[qrac]

ボタンのフローティングバリュエーションを1パターンに変更。

before

$shadow-floating-1:
  0 1px 1.5px 0 rgba(0,0,0,.12),
  0 1px 1px 0 rgba(0,0,0,.24) !default;

$shadow-floating-2:
  0 2px 2px 0 rgba(0,0,0,.14),
  0 3px 1px -2px rgba(0,0,0,.2),
  0 1px 5px 0 rgba(0,0,0,.12) !default;

$shadow-floating-active:
  0 4px 5px 0 rgba(0,0,0,.14),
  0 1px 10px 0 rgba(0,0,0,.12),
  0 2px 4px -1px rgba(0,0,0,.2) !default;

$shadow-floating-3:
  0 1px 3px 0 rgba(0, 0, 0, 0.24) !default;

$shadow-floating-3-hover:
  0 4px 12px 0 rgba(0, 0, 0, 0.24) !default;

.btn.is-floating-1:not(.is-disable) {
  box-shadow: $shadow-floating-1;
  &:active {
    box-shadow: $shadow-floating-active;
  }
}

.btn.is-floating-2:not(.is-disable) {
  box-shadow: $shadow-floating-2;
  &:active {
    box-shadow: $shadow-floating-active;
  }
}

.btn.is-floating-3:not(.is-disable) {
  box-shadow: $shadow-floating-3;
  &:hover,
  &:active {
    box-shadow: $shadow-floating-3-hover;
  }
}

after

$shadow-btn-floating:
  0 1px 3px 0 rgba(0, 0, 0, 0.24) !default;

$shadow-btn-floating-hover:
  0 4px 12px 0 rgba(0, 0, 0, 0.24) !default;

.btn.is-floating:not(.is-disable) {
  box-shadow: $shadow-btn-floating;
  &:hover,
  &:active {
    box-shadow: $shadow-btn-floating-hover;
  }
}

[qrac]

transitionを0.2sから0.15sに変更。

[qrac]

不要なtext-align: center;を削除。

[qrac]

ボタンのレスポンシブ可変からtouch, landscape, portraitを削除。

@include touch {
  .btns > .btn.is-touch-0 {
    flex: 1 0 0%;
    max-width: 100%;
  }
  .btns > .btn.is-touch-full {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .btns > .btn.is-touch-auto {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

@include landscape {
  .btns > .btn.is-landscape-0 {
    flex: 1 0 0%;
    max-width: 100%;
  }
  .btns > .btn.is-landscape-full {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .btns > .btn.is-landscape-auto {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

@include portrait {
  .btns > .btn.is-portrait-0 {
    flex: 1 0 0%;
    max-width: 100%;
  }
  .btns > .btn.is-portrait-full {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .btns > .btn.is-portrait-auto {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

[qrac]

buttonやinputをflexboxで作るとiOSでjustify-content: center;が効かないので、inline-blockで作る。

before

.btn {
  &.is-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    border-radius: 9999em;
  }
}

after

.btn {
  &.is-circle {
    position: relative;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    border-radius: 999em;
  }
  &.is-circle > * {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

[qrac]

リセットCSSでbackgroundをオフにしていたいため、meltボタンの背景にtranspalentを指定する。

[qrac]

(ontouchstart="")を付与すればタッチデバイスでもアクティブが反応するが、ほぼ指で見えない。アプリ以外の制作ではリンクの場合が多いのでwebサイトでは解除する。

また、アクティブデザイン自体も削除。

[qrac]

フォームで[disabled]になったときにも.is-disableと同じ効果が出るようにする。

[qrac]

ボタンやフォームのFullサイズはflex: 0 0 100%だとマージン分はみ出すため、flex: 0 1 100%で縮める。calcを使うとIEで計算されない。

[qrac]

.is-circleのborder-radiusは999emよりも1.25em（または50%）の方がきれいに描画されているので、修正する。