taiga-front/app/styles/components/buttons.scss

73 lines
1.4 KiB
SCSS
Executable File

// Buttons components
.trans-button {
@extend %large;
font-family: 'ostrichSans';
&:hover {
@include transition (color .3s linear);
color: $green-taiga;
}
.icon {
margin-right: .3rem;
}
}
%button {
@extend %large;
display: inline-block;
font-family: 'ostrichSans';
padding: 8px 40px;
.icon {
margin-right: .3rem;
}
}
.button-green {
@extend %button;
@include transition (background .3s linear);
background: $green-taiga;
span {
color: $white;
position: relative;
top: 2px;
}
&:hover {
@include transition (background .3s linear);
background: $fresh-taiga;
}
}
.button-gray {
@extend %button;
@include transition (background .3s linear);
background: $button-gray;
span {
color: $white;
position: relative;
top: 2px;
}
&:hover {
@include transition (background .3s linear);
background: $button-gray-hover;
color: $white;
}
}
.button-bulk {
@extend %button;
background: $green-taiga;
font-size: 22px;
margin-left: 2px;
padding: 5px;
vertical-align: middle;
span {
color: $white;
}
.icon {
margin-right: 0;
}
&:hover {
@include transition (background .3s linear);
background: $fresh-taiga;
}
}