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

A Mithril.js UI library based from construct-ui

.cui-toaster {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 20px; }
  .cui-toaster.cui-toaster-inline {
    position: absolute; }
  .cui-toaster.cui-toaster-top-start, .cui-toaster.cui-toaster-bottom-start {
    align-items: flex-start; }
  .cui-toaster.cui-toaster-top, .cui-toaster.cui-toaster-bottom {
    align-items: center; }
  .cui-toaster.cui-toaster-top-end, .cui-toaster.cui-toaster-bottom-end {
    align-items: flex-end; }
  .cui-toaster.cui-toaster-top, .cui-toaster.cui-toaster-top-start, .cui-toaster.cui-toaster-top-end {
    top: 0;
    bottom: auto; }
  .cui-toaster.cui-toaster-bottom, .cui-toaster.cui-toaster-bottom-start, .cui-toaster.cui-toaster-bottom-end {
    top: auto;
    bottom: 0; }

.cui-toast {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 300px;
  max-width: 500px;
  pointer-events: all;
  margin-bottom: 10px;
  border-radius: 3px;
  outline: none;
  transition: color 0.3s ease-in;
  padding: 12px;
  color: #607d8b;
  background: #ffffff;
  border: solid 1px #c5cdd1;
  box-shadow: 0px 8px 10px -4px rgba(67, 90, 111, 0.3); }
  .cui-toast .cui-toast-message {
    padding-right: 12px;
    font-size: 14px; }
  .cui-toast > .cui-icon:first-child {
    margin-right: 12px; }
  .cui-toast.cui-primary > .cui-icon, .cui-toast.cui-positive > .cui-icon, .cui-toast.cui-negative > .cui-icon, .cui-toast.cui-warning > .cui-icon {
    color: #ffffff; }
  .cui-toast.cui-primary > .cui-icon-x, .cui-toast.cui-positive > .cui-icon-x, .cui-toast.cui-negative > .cui-icon-x, .cui-toast.cui-warning > .cui-icon-x {
    color: #eceff1; }
  .cui-toast.cui-primary > .cui-icon-x:hover, .cui-toast.cui-positive > .cui-icon-x:hover, .cui-toast.cui-negative > .cui-icon-x:hover, .cui-toast.cui-warning > .cui-icon-x:hover {
    color: #ffffff; }
  .cui-toast .cui-toast-message {
    flex: 1 1 auto; }
  .cui-toast.cui-xs {
    padding: 10px; }
    .cui-toast.cui-xs .cui-toast-message {
      padding-right: 10px;
      font-size: 12px; }
    .cui-toast.cui-xs > .cui-icon:first-child {
      margin-right: 10px; }
  .cui-toast.cui-sm {
    padding: 11px; }
    .cui-toast.cui-sm .cui-toast-message {
      padding-right: 11px;
      font-size: 13px; }
    .cui-toast.cui-sm > .cui-icon:first-child {
      margin-right: 11px; }
  .cui-toast.cui-lg {
    padding: 14px; }
    .cui-toast.cui-lg .cui-toast-message {
      padding-right: 14px;
      font-size: 16px; }
    .cui-toast.cui-lg > .cui-icon:first-child {
      margin-right: 14px; }
  .cui-toast.cui-xl {
    padding: 16px; }
    .cui-toast.cui-xl .cui-toast-message {
      padding-right: 16px;
      font-size: 18px; }
    .cui-toast.cui-xl > .cui-icon:first-child {
      margin-right: 16px; }
  .cui-toast.cui-primary {
    color: #ffffff;
    background: #5c6bc0;
    border: solid 1px #5360ad;
    box-shadow: 0px 8px 10px -4px rgba(67, 90, 111, 0.3); }
  .cui-toast.cui-positive {
    color: #ffffff;
    background: #4caf50;
    border: solid 1px #3d8c40;
    box-shadow: 0px 8px 10px -4px rgba(67, 90, 111, 0.3); }
  .cui-toast.cui-negative {
    color: #ffffff;
    background: #f44336;
    border: solid 1px #dc3c31;
    box-shadow: 0px 8px 10px -4px rgba(67, 90, 111, 0.3); }
  .cui-toast.cui-warning {
    color: #ffffff;
    background: #f57c00;
    border: solid 1px #dd7000;
    box-shadow: 0px 8px 10px -4px rgba(67, 90, 111, 0.3); }