funky-framadate-front/src/assets/scss/atoms/_buttons.scss

66 lines
1.1 KiB
SCSS

@charset "UTF-8";
@mixin btnTheme($color) {
background-color: $color;
color: $white;
&.btn--outline {
background-color: transparent;
border-color: $color;
color: $font-color;
}
&:focus,
&:hover,
&:active {
background-color: rgba($color, .8);
&.btn--outline {
background-color: rgba($color, .2);
}
}
}
.btn {
margin: .5rem 0;
padding: 1rem 1.5rem;
font-size: 1.6rem;
line-height: normal;
border: .2rem solid transparent;
border-radius: .3rem;
font-weight: normal;
&--primary {
@include btnTheme($primary_color);
}
&--black-text {
color:black;
}
&--purple {
background-color:$pale-purple;
}
&--alert {
@include btnTheme($red);
}
&--small {
padding: .75rem 1.25rem;
}
&--full {
display: block;
min-width: 100%;
}
&--mini {
background-color: $mini-button-color;
}
&--link {
min-width: 219.3px;
margin: 0 auto;
display: block;
}
}