Alert

アラートの装飾を作るエレメント CSS。

Table of Contents

Basic

  • .alert がベースとなります
  • .alert には文字色などは付与されていません
アラート
<div class="alert">アラート</div>

Color

  • .is-{color} でアラートに色を付けます
  • {color} は primary secondary info success warning danger の 6 種類
  • 内部コンテンツの色付けは別途 text や icon で行います
重要かもしれないアラート
重要かもしれないアラート
情報を表すアラート
成功したことを表すアラート
警告を表すアラート
禁止やエラーを表すアラート
<div class="alert is-primary">...</div>
<div class="alert is-secondary">...</div>
<div class="alert is-info">...</div>
<div class="alert is-success">...</div>
<div class="alert is-warning">...</div>
<div class="alert is-danger">...</div>

Tail

  • .is-tail-{way}-{position} 形式で吹き出しになります
  • {way} は top right bottom left の 4 種類
  • {way} が top bottom の場合 {position} は left center right の 3 種類
  • {way} が right left の場合 {position} は top middle bottom の 3 種類
  • 吹き出しの色は Color を引き継ぎます

tail-top

アラート
アラート
アラート
<div class="alert is-tail-top-left">アラート</div>
<div class="alert is-tail-top-center">アラート</div>
<div class="alert is-tail-top-right">アラート</div>

tail-right

アラート
アラート
アラート
<div class="alert is-tail-right-top">アラート</div>
<div class="alert is-tail-right-middle">アラート</div>
<div class="alert is-tail-right-bottom">アラート</div>

tail-bottom

アラート
アラート
アラート
<div class="alert is-tail-bottom-left">アラート</div>
<div class="alert is-tail-bottom-center">アラート</div>
<div class="alert is-tail-bottom-right">アラート</div>

tail-left

アラート
アラート
アラート
<div class="alert is-tail-left-top">アラート</div>
<div class="alert is-tail-left-middle">アラート</div>
<div class="alert is-tail-left-bottom">アラート</div>

Variables

上書きできる変数は以下の通りです。

.alert {
  --alert-padding: 0.675em 1.125em;
  --alert-bg: var(--theme-bg-2);
  --alert-border-width: 1px;
  --alert-border-color: var(--theme-bd-2);
  --alert-border-radius: 6px;
  --alert-tail-width: 1em;
  --alert-tail-height: 0.5em;
  --alert-tail-position: 10%;
}

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/elements/alert/main.css";

v7 を再現する場合は legacy.css を追加で読み込んでください。

@import "musubii/src/layouts/alert/legacy.css";