Callout

お知らせ表示用のCSS

詳しい導入事例は導入方法を参照してください。

インライン要素
ブロック要素
内部HTML

default information success important warning error

This is an default message!

This is an information message!

This is an success message!

This is an important message!

This is an warning message!

This is an error message!

list 1
list 2

Class Copy

使い方

+-.callout-+単体での使用も可能。
{display}の設定は無いのでインライン・ブロックどちらの要素にも使用可能。

内部要素はゴリゴリのHTMLでも可能。多分。

ステータスの種類はこちら。それっぽい名称を使ってますが、色での使い分けで問題有りません。

[無] 灰色
[information / inf] 青
[success / suc] 緑
[important / imp] 紫
[warning / war] オレンジ
[error / err] 赤

.callout {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #90a4ae;
    background: #eceff1;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  .callout.ico-bef {padding-left: 44px;}
  .callout.ico-bef::before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 8px;
    left: 12px;
  }
  .callout.inf {
    border-color: var(--info-main);
    background: var(--info-bg);
    color: var(--info-contrast);
  }
  .callout.suc {
    border-color: var(--success-main);
    background: var(--success-bg);
    color: var(--success-contrast);
  }
  .callout.imp {
    border-color: var(--important-main);
    background: var(--important-bg);
    color: var(--important-contrast);
  }
  .callout.war {
    border-color: var(--warning-main);
    background: var(--warning-bg);
    color: var(--warning-contrast);
  }
  .callout.err {
    border-color: var(--error-main);
    background: var(--error-bg);
    color: var(--error-contrast);
  }
  .callout.light {border-color: #cfd8dc;}
  .callout.light::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .callout.inf.light {border-color: #bbdefb;}
  .callout.suc.light {border-color: #c8e6c9;}
  .callout.imp.light {border-color: #e1bee7;}
  .callout.war.light {border-color: #ffe0b2;}
  .callout.err.light {  border-color: #ffcdd2;}
  .callout.inf.ico-bef::before {
    content: "info";
    color: var(--info-main);
  }
  .callout.suc.ico-bef::before {
    content: "check_circle";
    color: var(--success-main);
  }
  .callout.imp.ico-bef::before {
    content: "label_important";
    color: var(--important-main);
  }
  .callout.war.ico-bef::before {
    content: "warning";
    color: var(--warning-main);
  }
  .callout.err.ico-bef::before {
    content: "dangerous";
    color: var(--error-main);
  }
  .callout.ico-bef[data-ico]::before {content: attr(data-ico);}

Light Color

Light Color

default light information light success light important light warning light error light

使い方

+-.light-+のクラス追加で薄めの色に変更。

Icon

Icon

default information success important warning error original

使い方

+-.ico-bef-+のクラス追加でアイコン表示可能。
デフォルト以外はクラス追加だけでも表示されますが、[data-ico]属性にマテリアルアイコンのコードを指定することで独自のアイコンに変更可能。
デフォルトステータスはアイコンを設定していないので[data-ico]で指定してください。