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

A Mithril.js UI library based from construct-ui

.cui-popover {
  position: absolute;
  z-index: 20;
  left: -9999px; }
  .cui-popover.fade-enter .cui-popover {
    opacity: 0.01;
    transition: opacity 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }
  .fade-enter .cui-popover {
    opacity: 0.01;
    transition: opacity 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }
  .fade-enter-active .cui-popover {
    opacity: 1; }
  .fade-exit .cui-popover {
    opacity: 0.01;
    transition: opacity 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }
  .fade-exit-active .cui-popover {
    opacity: 0; }
  .cui-popover[x-out-of-boundaries] {
    opacity: 0;
    visibility: hidden; }
  .cui-popover[x-placement^="top"] > .cui-popover-arrow {
    bottom: -7px;
    border-bottom: 1px solid #bbc3c7;
    border-left: 1px solid #bbc3c7; }
  .cui-popover[x-placement^="bottom"] > .cui-popover-arrow {
    top: -7px;
    border-top: 1px solid #bbc3c7;
    border-right: 1px solid #bbc3c7; }
  .cui-popover[x-placement^="right"] > .cui-popover-arrow {
    left: -7px;
    border-top: 1px solid #bbc3c7;
    border-left: 1px solid #bbc3c7; }
  .cui-popover[x-placement^="left"] > .cui-popover-arrow {
    right: -7px;
    border-bottom: 1px solid #bbc3c7;
    border-right: 1px solid #bbc3c7; }

.cui-popover-content {
  display: inline-block;
  background: white;
  border-radius: 3px;
  padding: 15px;
  border: solid 1px #c5cdd1;
  box-shadow: 0px 16px 24px -8px rgba(67, 90, 111, 0.3); }

.cui-popover-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
  pointer-events: none;
  background: white; }

.cui-popover-backdrop {
  background: rgba(255, 255, 255, 0.65); }