Files
liquid/_sass/modules/_buttons.scss
2016-03-20 16:12:09 -04:00

73 lines
1.3 KiB
SCSS

.btn {
color: $color-white;
display: flex;
background: $color-blue-5;
align-items: center;
justify-content: center;
padding: $spacing-unit/4 $spacing-unit/2;
border-radius: 8px;
text-decoration: none;
text-align: center;
white-space: nowrap;
&:hover {
background: $color-blue-4;
cursor: pointer;
text-decoration: none;
}
&:first-child {
margin-bottom: $spacing-unit / 2;
}
@include phone-and-up {
justify-content: center;
&:first-child {
justify-content: flex-start;
margin-bottom: 0;
}
}
}
.btn:visited {
color: $color-white;
}
.btn-row {
display: flex;
justify-content: center;
flex-direction: column;
margin-bottom: 0;
@include phone-and-up {
flex-direction: row;
.btn:not(:first-child) {
margin-left: $spacing-unit / 2;
}
}
}
.icon {
vertical-align: middle;
margin-right: $spacing-unit / 4;
}
/*============================================================================
Menu button
==============================================================================*/
.menu-button {
display: inline-block;
background: none;
border: none;
margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
padding: $spacing-unit / 4;
color: $color-slate;
@include tablet-and-up {
display: none;
}
}