Bootstrapのalertのようなものを作ってみる
要はこういう風なものです。
http://getbootstrap.com/components/#alerts
See the Pen Notification Bar Examples by Noriyo Akita (@noriyotcp) on CodePen.
使った技術など
バツボタンを右に寄せる
単純にfloat: right
でいいのかなあと思ったのですが、アラートの幅が狭くなった時にはみ出てしまいます。
そこで参考にしたのはこちら
CSS にて複数行(高さが可変)の要素に対して縦揃えを中央に配置する方法 | phiary
本文では
まずセンタリングしたい要素の親要素に対して, position:absolute; を指定します.
とありますが、多分position: relative
の間違いなのでは。
まず親要素をposition: relative
にします。今回の場合、.alert
です。
.alert { position: relative; ... }
子要素である.close
をこのように定義します。
.close { position: absolute; top: 50%; right: 1%; transform: translateY(-50%); ... }
position: absolute と top: 50% で親要素の中央にtop の座標を移動させて, 更に transform: translateY(-50%) することで自分自身のサイズの半分の値を上に戻しています.
こうすることで要素の高さが変更されても中央揃えになります.
ここではさらにright: 1%;
を追加し、右からの位置を調整しています。
リセットボタンについて
はじめは単純に.reset
クラスにスタイルを定義していきましたが、ボタンの基本的なスタイルを.btn
クラスに定義し、リセットボタン固有のスタイルは.reset
クラスに定義するということにしました。
$grey: #cccccc; . . . .reset { background-color: transparent; border: solid 3px $grey; color: $grey; transition: background-color 0.5s linear 0.1s; &:hover { background-color: $grey; color: white; } }
hoverした時の変化として、background-color
にtransition
をかけることにしました。
参考にしたのはこちら:
【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します
【CSS3】CSSで動きが出せるtransitionプロパティの解説、実践編
background-color用の変数と@eachを使った定義
なんといいますか、はじめはこのようにベタに定義していたのですが
.success { background-color: #2ecc71; } .warning { background-color: #e67e22; } .danger { background-color: #e74c34; }
せっかくSCSS使っていることだし、もう少し便利なやり方はないのかなと。
というわけで参考にしたのはこちら
sass - using hash with scss - Stack Overflow
@each in(with variable names)
という方法がありまして、真似してみたのがこちら
$success: #2ecc71; $warning: #e67e22; $danger: #e74c34; . . . @each $name, $color in( 'success': $success, 'warning': $warning, 'danger': $danger ) { .alert-#{$name} { background-color: $color; } }
Bootstrapみたいにalert-success
のような形で定義することにしました。
JS(jQuery)部分
こちらはなんてことないですが
$('.close').on('click', function() { $(this).parent('.alert').hide(); }); $('.reset').on('click', function() { $('.alert').show(); });
バツボタンをクリックした際にはアラート部分をhide()して、
リセットボタンをクリックするとアラートを全部show()しています。
でもあれですな、右下にCodepenの「RERUN」ボタンがあるので、わざわざリセットボタンを作る必要はなかったのでは・・・。