66 lines
1.4 KiB
SCSS
66 lines
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%; }
|