jiro-ui/lib/components/callout/index.css

A Mithril.js UI library based from construct-ui

.cui-callout {
  padding: 12px;
  color: #37474f;
  background: #f2f4f5;
  border: solid 1px #c5cdd1;
  display: block;
  position: relative;
  width: 100%;
  border-radius: 3px; }
  .cui-callout .cui-callout-header {
    font-size: 14px; }
    .cui-callout .cui-callout-header:not(:only-child) {
      margin: 0 0 4px 0; }
  .cui-callout .cui-callout-content {
    font-size: 14px; }
  .cui-callout > .cui-icon {
    top: 14px; }
  .cui-callout .cui-callout-dismiss {
    right: 12px; }
  .cui-callout.cui-callout-icon .cui-callout-content,
  .cui-callout.cui-callout-icon .cui-callout-header {
    padding-left: 24px; }
  .cui-callout > .cui-icon {
    color: #37474f; }
  .cui-callout > .cui-icon, .cui-callout .cui-callout-dismiss {
    position: absolute; }
  .cui-callout .cui-callout-header {
    font-weight: bold; }
  .cui-callout.cui-fluid {
    display: block;
    width: 100%; }
  .cui-callout.cui-xs {
    padding: 10px; }
    .cui-callout.cui-xs .cui-callout-header {
      font-size: 12px; }
      .cui-callout.cui-xs .cui-callout-header:not(:only-child) {
        margin: 0 0 4px 0; }
    .cui-callout.cui-xs .cui-callout-content {
      font-size: 12px; }
    .cui-callout.cui-xs > .cui-icon {
      top: 12px; }
    .cui-callout.cui-xs .cui-callout-dismiss {
      right: 10px; }
    .cui-callout.cui-xs.cui-callout-icon .cui-callout-content,
    .cui-callout.cui-xs.cui-callout-icon .cui-callout-header {
      padding-left: 20px; }
  .cui-callout.cui-sm {
    padding: 11px; }
    .cui-callout.cui-sm .cui-callout-header {
      font-size: 13px; }
      .cui-callout.cui-sm .cui-callout-header:not(:only-child) {
        margin: 0 0 4px 0; }
    .cui-callout.cui-sm .cui-callout-content {
      font-size: 13px; }
    .cui-callout.cui-sm > .cui-icon {
      top: 13px; }
    .cui-callout.cui-sm .cui-callout-dismiss {
      right: 11px; }
    .cui-callout.cui-sm.cui-callout-icon .cui-callout-content,
    .cui-callout.cui-sm.cui-callout-icon .cui-callout-header {
      padding-left: 22px; }
  .cui-callout.cui-lg {
    padding: 14px; }
    .cui-callout.cui-lg .cui-callout-header {
      font-size: 16px; }
      .cui-callout.cui-lg .cui-callout-header:not(:only-child) {
        margin: 0 0 5px 0; }
    .cui-callout.cui-lg .cui-callout-content {
      font-size: 16px; }
    .cui-callout.cui-lg > .cui-icon {
      top: 16px; }
    .cui-callout.cui-lg .cui-callout-dismiss {
      right: 14px; }
    .cui-callout.cui-lg.cui-callout-icon .cui-callout-content,
    .cui-callout.cui-lg.cui-callout-icon .cui-callout-header {
      padding-left: 28px; }
  .cui-callout.cui-xl {
    padding: 16px; }
    .cui-callout.cui-xl .cui-callout-header {
      font-size: 18px; }
      .cui-callout.cui-xl .cui-callout-header:not(:only-child) {
        margin: 0 0 6px 0; }
    .cui-callout.cui-xl .cui-callout-content {
      font-size: 18px; }
    .cui-callout.cui-xl > .cui-icon {
      top: 19px; }
    .cui-callout.cui-xl .cui-callout-dismiss {
      right: 16px; }
    .cui-callout.cui-xl.cui-callout-icon .cui-callout-content,
    .cui-callout.cui-xl.cui-callout-icon .cui-callout-header {
      padding-left: 32px; }
  .cui-callout.cui-primary {
    color: #303f9f;
    background: #e8eaf6;
    border: solid 1px #5360ad; }
    .cui-callout.cui-primary > .cui-icon {
      color: #303f9f; }
  .cui-callout.cui-positive {
    color: #388e3c;
    background: #e8f5e9;
    border: solid 1px #3d8c40; }
    .cui-callout.cui-positive > .cui-icon {
      color: #388e3c; }
  .cui-callout.cui-negative {
    color: #d32f2f;
    background: #ffebee;
    border: solid 1px #dc3c31; }
    .cui-callout.cui-negative > .cui-icon {
      color: #d32f2f; }
  .cui-callout.cui-warning {
    color: #f57c00;
    background: #fff3e0;
    border: solid 1px #dd7000; }
    .cui-callout.cui-warning > .cui-icon {
      color: #f57c00; }