accounts-frontend/src/components/ui/buttons.scss

49 lines
979 B
SCSS
Raw Normal View History

@import './colors.scss';
@import './fonts.scss';
@mixin button-color($colorName, $backgroundColor, $textColor : $defaultButtonTextColor) {
.#{$colorName} {
composes: button;
@if ($textColor != $defaultButtonTextColor) {
color: $textColor;
}
background-color: $backgroundColor;
&:hover {
background-color: lighter($backgroundColor);
}
&:active {
background-color: darker($backgroundColor);
}
}
}
.button {
display: inline-block;
height: 50px;
padding: 0 15px;
font-family: $font-family-title;
color: $defaultButtonTextColor;
font-size: 18px;
line-height: 50px;
text-decoration: none;
transition: background-color 0.25s;
background-color: $black;
&:hover {
background-color: $black-button-light;
}
&:active {
background-color: $black-button-dark;
}
}
@include button-color('blue', $blue);