Panel Component

A CSS implementation of the Sprout panel component.

Related

Example

html
<div>
    <div class="spr-panel"> I am a panel. I'm literally just an empty container. Hi. </div>
</div>

Compiled CSS

Example

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

.spr-panel {
  box-sizing: border-box;
  border: 1px solid #e4e5e7;
  border-radius: 0.125rem;
  background-color: #fff;
}

@media only screen and (max-width: 37.49rem) {
  .spr-panel {
    padding: 0.6875rem 0.6875rem;
  }
}

@media only screen and (min-width: 37.5rem) and (max-width: 74.99rem) {
  .spr-panel {
    padding: 0.9375rem 0.9375rem;
  }
}

@media only screen and (min-width: 75rem) {
  .spr-panel {
    padding: 1.4375rem 1.4375rem;
  }
}