test/styles/website/_buttons.scss
2018-12-13 14:35:49 +01:00

66 lines
No EOL
1.4 KiB
SCSS

// # Buttons
// Defines syling for buttons
// *******************************************************
// ## Variables
// *******************************************************
// Styling for buttons
$button-map : (
padding: $spacing-unit $spacing-unit/2,
background: $color-gray-light,
color: $color-gray-dark
) !default;
// Styling for buttons on hover
$button-hover-map : ( color: $color-gray-darker ) !default;
// *******************************************************
// ## Wrapper for multiple buttons
// *******************************************************
.buttons
{
&:before,
&:after
{
content: " ";
display: table;
}
&:after
{
clear: both;
}
}
// *******************************************************
// ## Single button
// *******************************************************
.button
{
border: 0;
background-color: transparent;
width: 100%;
text-align: center;
float: left;
line-height: $line-height-base;
@include print( $button-map );
}
.button:hover
{
@include print( $button-hover-map );
}
.button:focus,
.button:hover
{
outline: none;
}
.button.size-2 { width: 50%; }
.button.size-3 { width: 33%; }