accounts-frontend/packages/app/components/ui/buttons.scss
2019-12-09 09:47:51 +02:00

104 lines
1.7 KiB
SCSS

@import './colors.scss';
@import './fonts.scss';
@mixin button-theme($themeName, $backgroundColor) {
.#{$themeName} {
composes: button;
background-color: $backgroundColor;
&:hover {
background-color: lighter($backgroundColor);
}
&:active {
background-color: darker($backgroundColor);
}
}
}
.button {
display: inline-block;
box-sizing: border-box;
height: 50px;
padding: 0 15px;
border: none;
border-radius: 0;
font-family: $font-family-title;
color: $defaultButtonTextColor;
font-size: 18px;
line-height: 50px;
text-decoration: none;
cursor: pointer;
transition: 0.25s;
&:hover {
color: $defaultButtonTextColor;
}
&:focus {
outline: none;
}
}
.smallButton {
composes: button;
height: 30px;
padding: 0 15px;
font-size: 14px;
line-height: 30px;
}
.white {
composes: button;
background-color: #fff;
color: #444;
&:hover {
color: #262626;
background-color: $whiteButtonLight;
}
&:active {
background-color: $whiteButtonDark;
}
}
@include button-theme('black', $black);
@include button-theme('blue', $blue);
@include button-theme('green', $green);
@include button-theme('orange', $orange);
@include button-theme('darkBlue', $dark_blue);
@include button-theme('lightViolet', $light_violet);
@include button-theme('violet', $violet);
@include button-theme('red', $red);
.block {
display: block;
width: 100%;
}
.loading {
background: url('./form/images/loader_button.gif') #95a5a6 center center !important;
cursor: default;
color: #fff;
transition: 0.25s;
outline: none;
pointer-events: none;
}
.black.disabled {
background: #95a5a6;
cursor: default;
}
.disabled {
cursor: default;
pointer-events: none;
}