sass-site/source/assets/css/components/_callouts.scss
Natalie Weizenbaum 7fd5bd1c7a Tweak impl status styling
* Make the font smaller to make them less prominent and help visually
  associate the callout with the list.
* Decrease the top margin to more clearly associate them with their
  preceding header.
* Lighten the callout background when in another callout to make it
  more visible.
* Animate the expand button.
2019-03-08 16:45:43 -08:00

40 lines
702 B
SCSS

.sl-c-callout {
margin: 1.5rem 0;
padding: 1.5rem 1rem;
background: lighten($sl-color--pale-sky, 50%);
&--warning { background: lighten($sl-color--hopbush, 36%); }
&--fun-fact { background: lighten($sl-color--patina, 43%); }
&--function {
padding: {
top: 0;
bottom: .25rem;
};
.code-example { margin-top: -3rem; }
.signature {
margin: {
right: -1rem;
left: -1rem;
};
}
}
&--impl-status {
font-size: 0.8em;
margin-top: -1rem;
padding: 0.8rem;
.sl-c-callout & {
background: lighten($sl-color--pale-sky, 53%);
}
}
> *:first-child { margin-top: 0; }
> *:last-child { margin-bottom: 0; }
}