Alert
#Table of Contents
#Detail
アラート装飾を作るエレメント CSS。
#Basic
| Selector | Description |
|---|
.alert | アラート装飾の起点として使うセレクター。 |
#Role
.is-(role) 形式のモディファイアを .alert に付与することで、各役割毎のカラーリングに変化します。
WordPressプラグインの設定へようこそ！
WordPressプラグインの設定へようこそ！
プラグインに関するチュートリアルはこちら。
プラグインの設定は自動的に保存されました。
プラグインはアクティベートされていません。
プラグインは削除されました。
<div class="alert">
<i aria-hidden="true" class="fas fa-thumbs-up is-fit is-margin-right-xxs"></i>
<span class="text">WordPressプラグインの設定へようこそ！</span>
</div>
<div class="alert is-primary">
<i aria-hidden="true" class="fas fa-thumbs-up is-primary is-fit is-margin-right-xxs"></i>
<span class="text is-primary">WordPressプラグインの設定へようこそ！</span>
</div>
<div class="alert is-info">
<i aria-hidden="true" class="fas fa-info-circle is-info is-fit is-margin-right-xxs"></i>
<span class="text is-info">プラグインに関するチュートリアルはこちら。</span>
</div>
<div class="alert is-success">
<i aria-hidden="true" class="fas fa-check is-success is-fit is-margin-right-xxs"></i>
<span class="text is-success">プラグインの設定は自動的に保存されました。</span>
</div>
<div class="alert is-warning">
<i aria-hidden="true" class="fas fa-exclamation-triangle is-warning is-fit is-margin-right-xxs"></i>
<span class="text is-warning">プラグインはアクティベートされていません。</span>
</div>
<div class="alert is-danger">
<i aria-hidden="true" class="fas fa-times is-danger is-fit is-margin-right-xxs"></i>
<span class="text is-danger">プラグインは削除されました。</span>
</div>
| Primary | Info | Success | Warning | Danger |
|---|
.is-primary | .is-info | .is-success | .is-warning | .is-danger |
#Tail
Option の $option-add-style-alert-tail を true にすると、吹き出しのような方向を指し示すスタイルを追加できるようになります。表示できる場所は全 12 種類です。
WordPressプラグインの設定へようこそ！
WordPressプラグインの設定へようこそ！
プラグインに関するチュートリアルはこちら。
プラグインの設定は自動的に保存されました。
プラグインはアクティベートされていません。
プラグインは削除されました。
<div class="alert is-tail-top-left">
<i aria-hidden="true" class="fas fa-thumbs-up is-fit is-margin-right-xxs"></i>
<span class="text">WordPressプラグインの設定へようこそ！</span>
</div>
<div class="alert is-primary is-tail-top-left">
<i aria-hidden="true" class="fas fa-thumbs-up is-primary is-fit is-margin-right-xxs"></i>
<span class="text is-primary">WordPressプラグインの設定へようこそ！</span>
</div>
<div class="alert is-info is-tail-top-left">
<i aria-hidden="true" class="fas fa-info-circle is-info is-fit is-margin-right-xxs"></i>
<span class="text is-info">プラグインに関するチュートリアルはこちら。</span>
</div>
<div class="alert is-success is-tail-top-left">
<i aria-hidden="true" class="fas fa-check is-success is-fit is-margin-right-xxs"></i>
<span class="text is-success">プラグインの設定は自動的に保存されました。</span>
</div>
<div class="alert is-warning is-tail-top-left">
<i aria-hidden="true" class="fas fa-exclamation-triangle is-warning is-fit is-margin-right-xxs"></i>
<span class="text is-warning">プラグインはアクティベートされていません。</span>
</div>
<div class="alert is-danger is-tail-top-left">
<i aria-hidden="true" class="fas fa-times is-danger is-fit is-margin-right-xxs"></i>
<span class="text is-danger">プラグインは削除されました。</span>
</div>
| Top Left | Top Center | Top Right |
|---|
.is-tail-top-left | .is-tail-top-center | .is-tail-top-right |
| Right Top | Right Middle | Right Bottom |
|---|
.is-tail-right-top | .is-tail-right-middle | .is-tail-right-bottom |
| Bottom Right | Bottom Center | Bottom Left |
|---|
.is-tail-bottom-right | .is-tail-bottom-center | .is-tail-bottom-left |
| Left Bottom | Left Middle | Left Top |
|---|
.is-tail-left-bottom | .is-tail-left-middle | .is-tail-left-top |
#Variables
- Name
$selector-alert
- Default Value
.alert
- Compiled Value
.alert
- Name
$modifier-alert-primary
- Default Value
.is-primary
- Compiled Value
.is-primary
- Name
$modifier-alert-info
- Default Value
.is-info
- Compiled Value
.is-info
- Name
$modifier-alert-success
- Default Value
.is-success
- Compiled Value
.is-success
- Name
$modifier-alert-warning
- Default Value
.is-warning
- Compiled Value
.is-warning
- Name
$modifier-alert-danger
- Default Value
.is-danger
- Compiled Value
.is-danger
- Name
$modifier-alert-tail
- Default Value
[class*="is-tail-"]
- Compiled Value
[class*="is-tail-"]
- Name
$modifier-alert-tail-top
- Default Value
[class*="is-tail-top-"]
- Compiled Value
[class*="is-tail-top-"]
- Name
$modifier-alert-tail-right
- Default Value
[class*="is-tail-right-"]
- Compiled Value
[class*="is-tail-right-"]
- Name
$modifier-alert-tail-bottom
- Default Value
[class*="is-tail-bottom-"]
- Compiled Value
[class*="is-tail-bottom-"]
- Name
$modifier-alert-tail-left
- Default Value
[class*="is-tail-left-"]
- Compiled Value
[class*="is-tail-left-"]
- Name
$modifier-alert-tail-top-right
- Default Value
.is-tail-top-right
- Compiled Value
.is-tail-top-right
- Name
$modifier-alert-tail-top-center
- Default Value
.is-tail-top-center
- Compiled Value
.is-tail-top-center
- Name
$modifier-alert-tail-top-left
- Default Value
.is-tail-top-left
- Compiled Value
.is-tail-top-left
- Name
$modifier-alert-tail-right-top
- Default Value
.is-tail-right-top
- Compiled Value
.is-tail-right-top
- Name
$modifier-alert-tail-right-middle
- Default Value
.is-tail-right-middle
- Compiled Value
.is-tail-right-middle
- Name
$modifier-alert-tail-right-bottom
- Default Value
.is-tail-right-bottom
- Compiled Value
.is-tail-right-bottom
- Name
$modifier-alert-tail-bottom-right
- Default Value
.is-tail-bottom-right
- Compiled Value
.is-tail-bottom-right
- Name
$modifier-alert-tail-bottom-center
- Default Value
.is-tail-bottom-center
- Compiled Value
.is-tail-bottom-center
- Name
$modifier-alert-tail-bottom-left
- Default Value
.is-tail-bottom-left
- Compiled Value
.is-tail-bottom-left
- Name
$modifier-alert-tail-left-top
- Default Value
.is-tail-left-top
- Compiled Value
.is-tail-left-top
- Name
$modifier-alert-tail-left-middle
- Default Value
.is-tail-left-middle
- Compiled Value
.is-tail-left-middle
- Name
$modifier-alert-tail-left-bottom
- Default Value
.is-tail-left-bottom
- Compiled Value
.is-tail-left-bottom
- Name
$alert-padding
- Default Value
0.675em 0.875em
- Compiled Value
0.675em 0.875em
- Name
$alert-background-color
- Default Value
$convert-background-2
- Compiled Value
whitesmoke
- Name
$alert-border-width
- Default Value
$global-border-width
- Compiled Value
1px
- Name
$alert-border-color
- Default Value
$convert-border
- Compiled Value
#d1d8dc
- Name
$alert-border-radius
- Default Value
$radius-xs
- Compiled Value
2px
- Name
$alert-primary-background-color
- Default Value
$convert-alert-primary-background-color
- Compiled Value
#ebf8f9
- Name
$alert-primary-border-color
- Default Value
$convert-alert-primary-border-color
- Compiled Value
#9cdbe2
- Name
$alert-info-background-color
- Default Value
$convert-alert-info-background-color
- Compiled Value
#eaf3fa
- Name
$alert-info-border-color
- Default Value
$convert-alert-info-border-color
- Compiled Value
#abd0ed
- Name
$alert-success-background-color
- Default Value
$convert-alert-success-background-color
- Compiled Value
#e7f9e7
- Name
$alert-success-border-color
- Default Value
$convert-alert-success-border-color
- Compiled Value
#8ae08a
- Name
$alert-warning-background-color
- Default Value
$convert-alert-warning-background-color
- Compiled Value
#fdf0e3
- Name
$alert-warning-border-color
- Default Value
$convert-alert-warning-border-color
- Compiled Value
#f5bf84
- Name
$alert-danger-background-color
- Default Value
$convert-alert-danger-background-color
- Compiled Value
#fbeeee
- Name
$alert-danger-border-color
- Default Value
$convert-alert-danger-border-color
- Compiled Value
#f0b7b7
- Name
$alert-tail-size
- Default Value
0.5em
- Compiled Value
0.5em
- Name
$alert-tail-position-end
- Default Value
10%
- Compiled Value
10%
#Mixins
musubii-style-alert()
musubii-style-alert-primary()
musubii-style-alert-info()
musubii-style-alert-success()
musubii-style-alert-warning()
musubii-style-alert-danger()
musubii-style-alert-tail()
musubii-style-alert-tail-top()
musubii-style-alert-tail-top-right()
musubii-style-alert-tail-top-center()
musubii-style-alert-tail-top-left()
musubii-style-alert-tail-right()
musubii-style-alert-tail-right-top()
musubii-style-alert-tail-right-middle()
musubii-style-alert-tail-right-bottom()
musubii-style-alert-tail-bottom()
musubii-style-alert-tail-bottom-right()
musubii-style-alert-tail-bottom-center()
musubii-style-alert-tail-bottom-left()
musubii-style-alert-tail-left()
musubii-style-alert-tail-left-top()
musubii-style-alert-tail-left-middle()
musubii-style-alert-tail-left-bottom()
musubii-style-alert-tail-top-primary()
musubii-style-alert-tail-top-info()
musubii-style-alert-tail-top-success()
musubii-style-alert-tail-top-warning()
musubii-style-alert-tail-top-danger()
musubii-style-alert-tail-right-primary()
musubii-style-alert-tail-right-info()
musubii-style-alert-tail-right-success()
musubii-style-alert-tail-right-warning()
musubii-style-alert-tail-right-danger()
musubii-style-alert-tail-bottom-primary()
musubii-style-alert-tail-bottom-info()
musubii-style-alert-tail-bottom-success()
musubii-style-alert-tail-bottom-warning()
musubii-style-alert-tail-bottom-danger()
musubii-style-alert-tail-left-primary()
musubii-style-alert-tail-left-info()
musubii-style-alert-tail-left-success()
musubii-style-alert-tail-left-warning()
musubii-style-alert-tail-left-danger()
#Sources