inspec/www/source/stylesheets/_buttons.scss
2017-01-20 10:28:26 +01:00

73 lines
1.5 KiB
SCSS

// Normal Links
a {
@extend %transition;
color : $color_link;
font-family : $heading-font;
}
// All CTA's
.btn {
@extend %transition;
box-sizing : border-box;
padding : 0.6rem 1.25rem;
color : $color_purple;
border : 1px solid transparent;
border-right : 1px solid $color_link;
border-left : 1px solid $color_purple;
border-radius : 4px;
background : transparent;
background-image : linear-gradient(
to right,
$color_purple 0,
$color_link 100%
),
linear-gradient(
to right,
$color_purple 0,
$color_link 100%
);
background-repeat : no-repeat;
background-position : 0 0,
0 100%;
background-size : 100% 1px;
&:hover {
color : $color_white;
border-color : $color_purple;
background-image : initial;
background-color : $color_purple;
}
&.btn-inverse {
color : $color_purple;
&:hover {
color : $color_white;
background-color : $color_purple;
}
}
//mobile
@media only screen and (max-width: 40.063em) {
float: initial;
padding : 0.8rem 1.6rem;
margin : 0 auto;
text-align : center;
}
}
// Form Buttons
button {
@extend %transition;
padding : 0.6rem 1.25rem;
color : $color_white;
border : 2px $color-purple;
border-radius : 4px;
background : $color_purple;
}
button:hover {
opacity : 0.8;
}