BootstrapのPopoverにテーマカラーを反映させるSASS設定
Bootstrapで吹き出しを作ることを想定した場合、既にBootstrapの中で設定されているpopoverのスタイルを継承して使用するのが手軽だと思います。
ポップオーバー iOSにあるようなBootstrapのポップオーバーをサイトのあらゆる要素に追加するためのドキュメントと例。
PopoverはJSと連携して、対象ボタンを押すと吹き出しが出力される仕様ですので、そのHTML部分を抜き出してみます。
Bootstrapのサンプルデータ
<div class="popover fade bs-popover-right show" role="tooltip" id="popover984867" x-placement="right" style="position: absolute; transform: translate3d(536px, 1869px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="arrow" style="top: 34px;"></div>
<h3 class="popover-header">Popover title</h3>
<div class="popover-body">And here's some amazing content. It's very engaging. Right?</div>
</div>この中から不要なプロパティを消していきます。
<div class="popover bs-popover-right">
<div class="arrow"></div>
<div class="popover-body">And here's some amazing content. It's very engaging. Right?</div>
</div>Popoverは位置情報を都度JSでStyleとして出力しているので、別途クラスを追加して補完します。
<div class="popover bs-popover-right position-relative">
<div class="arrow d-flex align-items-center m-0 h-100"></div>
<div class="popover-body">And here's some amazing content. It's very engaging. Right?</div>
</div>📝 ポイント
吹き出しの「矢印」の位置はdisplayをflex、垂直中心は水平中心はalign-items-center、justify-content-centerと設定して、親要素のちょうど中心に来るようにしています。
これで吹き出しは以下のように標準のBootstrapのスタイルだけで作成することができます。
まず、吹き出しの背景色のクラス（bg-primaryなど）はpopoverクラス要素に追加し、文字の色はpopover-bodyクラス要素に追加します。
<div class="popover bs-popover-right position-relative bg-primary">
<div class="arrow d-flex align-items-center m-0 h-100"></div>
<div class="popover-body text-white">And here's some amazing content. It's very engaging. Right?</div>
</div>ここから、「矢印」部分の配色はスタイルを追加する必要がありますが、個別に追加するのも面倒なのでSASSを使ってコンパイルすることにします。
最終的に得たいスタイルはこちらです。
.bs-popover-right.bg-primary .arrow::after {
border-right-color: #007bff !important;
}背景色と矢印の色を合わせるという設定です。
まず作成する@mixinは以下の通りです。
@mixin arrow-border-color($direction, $target, $color) {
.bs-popover-#{$direction}#{$target} {
border-#{$direction}-color: $color !important;
}
}引数に「$direction（方向）」「$target（ターゲット）」「$color（色）」を指定してスタイルを作成します。
次にこれをBootstrapで用意されている$theme-colors配列を@includeしてクラスを出力します。
@each $color, $value in $theme-colors {
@include arrow-border-color("right", ".bg-#{$color} .arrow::after", $value);
@include arrow-border-color("left", ".bg-#{$color} .arrow::after", $value);
@include arrow-border-color("top", ".bg-#{$color} .arrow::after", $value);
@include arrow-border-color("bottom", ".bg-#{$color} .arrow::after", $value);
}最終的にはこのようになります。
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
コメントをどうぞ