Panel Component
A CSS implementation of the Sprout panel component.
Related
Sprout Panel documentation [external]
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;
}
}