@kabbage/sprout 0.13.2

Popover Component

A CSS implementation of the Sprout popover component.

Related

Sprout Popover documentation [external]

Example

html 
<div class="spr-popover-container">
    <div class="spr-popover"> I'm popover content! </div>
</div>

Compiled CSS

Example

scss 
@import 'components/popover';
css compiled 
@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-popover-container .spr-popover {
  width: 15rem;
  animation: openPopover 0.15s;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(24, 25, 27, 0.15);
}

.spr-popover-container .spr-popover.spr-popover-top {
  margin-bottom: 0.25rem;
}

.spr-popover-container .spr-popover.spr-popover-bottom {
  margin-top: 0.25rem;
}

.spr-popover-container .spr-popover.spr-popover-left {
  margin-right: 0.25rem;
}

.spr-popover-container .spr-popover.spr-popover-right {
  margin-left: 0.25rem;
}