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

66 lines
1.1 KiB
SCSS
Raw Normal View History

@charset "UTF-8";
@mixin btnTheme($color) {
2019-10-16 21:33:49 +02:00
background-color: $color;
color: $white;
&.btn--outline {
background-color: transparent;
border-color: $color;
color: $font-color;
2019-08-12 15:13:05 +02:00
}
2019-10-16 21:33:49 +02:00
&:focus,
&:hover,
&:active {
background-color: rgba($color, .8);
2019-10-16 21:33:49 +02:00
&.btn--outline {
background-color: rgba($color, .2);
}
2019-08-12 21:54:40 +02:00
}
2019-10-16 21:33:49 +02:00
}
.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);
2019-09-06 18:28:57 +02:00
}
2019-12-29 18:35:15 +01:00
&--black-text {
color:black;
}
&--purple {
background-color:$pale-purple;
}
2019-10-16 21:33:49 +02:00
&--alert {
@include btnTheme($red);
}
2019-10-16 21:33:49 +02:00
&--small {
padding: .75rem 1.25rem;
2019-08-12 21:54:40 +02:00
}
2019-10-16 21:33:49 +02:00
&--full {
display: block;
min-width: 100%;
2019-08-12 21:54:40 +02:00
}
2019-10-16 21:33:49 +02:00
&--mini {
background-color: $mini-button-color;
}
&--link {
min-width: 219.3px;
margin: 0 auto;
display: block;
}
}