docs/theme/_sass/components/_example.scss
//
// Example (components/_example.scss)
//
// ----- General -----
.example {
background-color: $color-pre-border;
color: $color-white;
overflow: hidden;
padding: 0.625rem 0.625rem 0.625rem 1.4375rem;
&::before {
content: 'Example';
display: inline-block;
margin-bottom: 0.25rem;
margin-top: 0.25rem;
text-transform: uppercase;
}
a {
@include link-reset;
background-color: $color-white;
border-radius: 1.25rem;
color: $color-dark-green;
display: block;
float: right;
font-size: 0.875em;
padding: 0.25rem 1.25rem 0.3125rem 1.25rem;
transition: background-color 0.2s;
&:hover,
&:focus,
&:active {
background-color: $color-yellow;
}
&::after {
@extend .icon;
content: '\e922';
display: inline-block;
margin-left: 0.5rem;
position: relative;
top: 0.125rem;
}
}
}