sass-site/source/assets/css/components/_buttons.scss
2018-12-27 16:31:28 -08:00

34 lines
777 B
SCSS

.sl-c-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
border: 0 {
radius: sl-px-to-rem(4px);
};
padding: sl-px-to-rem(12px) sl-px-to-rem(16px);
background: $sl-color--iron;
box-shadow: 0 2px 1px rgba($sl-color--midnight-blue, .125);
color: darken($sl-color--hopbush, 10%);
cursor: pointer;
&:hover,
&:focus { color: darken($sl-color--bouquet, 10%); }
&:active { color: darken($sl-color--venus, 10%); }
&--primary {
background-color: darken($sl-color--hopbush, 10%);
&,
&:hover,
&:focus,
&:active { color: $sl-color--white; }
&:hover,
&:focus { background-color: darken($sl-color--bouquet, 10%); }
&:active { background-color: darken($sl-color--venus, 10%); }
}
}