search

qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
150 stars 6 forks source link

Alert：吹き出し状に変化させられるオプションを追加 #130

Closed qrac closed 5 years ago

qrac commented 5 years ago

image

フォームの入力エラーなど、パーツを指定する場合には吹き出し状に変化したほうがいい。使う頻度としては、圧倒的に top danger なので、すべてを本体に組み込むかどうかは検討する。

.alert {
  position: relative;
  &.is-tail-top,
  &.is-tail-right,
  &.is-tail-bottom,
  &.is-tail-left {
    &:before,
    &:after {
      content: "";
      position: absolute;
      display: block;
      width: 0;
      height: 0;
    }
  }
  &.is-tail-top {
    &:before {
      left: 10%;
      top: -0.5em;
      border-left: 0.5em solid transparent;
      border-right: 0.5em solid transparent;
    }
    &:after {
      left: 10%;
      top: calc(-0.5em + 1px);
      border-left: 0.5em solid transparent;
      border-right: 0.5em solid transparent;
    }
    &.is-danger {
      &:before {
        border-bottom: 0.5em solid $alert-danger-border-color;
      }
      &:after {
        border-bottom: 0.5em solid $alert-danger-background-color;
      }
    }
  }
}
qrac commented 5 years ago

吹き出しのでっぱりは尻尾と言うらしい。

qrac commented 5 years ago

image

すべての位置を実装する場合、上記のようなパターンが考えられる。

.alert {
  &.is-tail-top-left,
  &.is-tail-top-center,
  &.is-tail-top-right,
  &.is-tail-right-top,
  &.is-tail-right-center, // or .is-tail-right-middle
  &.is-tail-right-bottom,
  &.is-tail-bottom-left,
  &.is-tail-bottom-center,
  &.is-tail-bottom-right,
  &.is-tail-left-top,
  &.is-tail-left-center, // or .is-tail-left-middle
  &.is-tail-left-bottom {
}
qrac commented 5 years ago

追加する場合、縦は middle を採用する。Flexのclassを考慮。

qrac commented 5 years ago

何案件か個別のCSSで導入してみて検討。

qrac commented 5 years ago

やはり、想定されるパターンが多すぎるので、プロジェクトごとに書き加える形にした方が良さそう。

qrac commented 5 years ago

SCSSの配列変数で増減させられそうなので、再度検討。

qrac commented 5 years ago

Alertは .box に統合できるかもしれない。 プロジェクトによっては擬似要素がバッティングするので .box とは分ける。

qrac commented 5 years ago

Alpha版にて反映。