taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Desfault button refactor

stable
Xavier Julián 2015-02-10 16:46:55 +01:00
parent 75f9bf96ca
commit 5466778017
2 changed files with 58 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
app/styles/components/buttons.scss
View File

@ -1,80 +1,98 @@
// Buttons components .button,
.trans-button { %button {
@extend %large; @extend %medium;
@extend %title; @extend %title;
background: transparent;
border: 0;
color: $white;
display: inline-block;
padding: .4rem 2.5rem;
text-transform: uppercase; text-transform: uppercase;
&:hover, transition: all .3s linear;
&.active { vertical-align: middle;
color: $green-taiga; &:hover {
transition: color .3s linear; color: $white;
transition: all .3s linear;
}
&.loading {
span {
animation: loading .5s linear;
}
}
span {
color: $white;
} }
.icon { .icon {
color: $white;
margin-right: .3rem; margin-right: .3rem;
} }
} }
.button { .trans-button {
@extend %large;
@extend %title;
@extend %button; @extend %button;
span,
.icon {
color: $blackish;
transition: color .2s linear;
}
&:hover,
&.active {
span,
.icon {
color: $green-taiga;
}
}
} }
button {
@extend %button;
}
.submit-button { .submit-button {
width: 100%; width: 100%;
} }
.button-green { .button-green {
@extend %button;
background: $green-taiga; background: $green-taiga;
border: 0;
color: $white;
vertical-align: middle;
&:hover, &:hover,
&.active { &.active {
background: $fresh-taiga; background: $fresh-taiga;
} }
span {
color: $white;
}
} }
.button-gray, .button-gray {
a.button-gray { @extend %button;
background: $gray; background: $gray;
&:hover { &:hover,
&.active {
background: $fresh-taiga; background: $fresh-taiga;
color: $white; color: $white;
} }
span {
color: $white;
}
} }
a.button-blackish { .button-blackish {
@extend %button;
background: $blackish; background: $blackish;
color: $whitish; color: $whitish;
&:hover { &:hover {
background: $blackish; background: $blackish;
color: $white; color: $white;
} }
span {
color: $white;
}
} }
a.button-red { .button-red {
@extend %button;
background: $red-light; background: $red-light;
&:hover { &:hover {
background: $red; background: $red;
color: $white; color: $white;
} }
span { .icon {
color: $white; color: $white;
} }
} }
a.button-block { .button-block {
background: $white; background: $white;
color: $red; color: $red;
&:hover { &:hover {
@ -83,35 +101,29 @@ a.button-block {
} }
} }
a.button-bulk { .button-bulk {
@extend %button; @extend %button;
background: $green-taiga; background: $green-taiga;
font-size: 22px; padding: .35rem .5rem;
margin-left: 2px;
padding: .3rem .5rem;
vertical-align: middle;
.icon { .icon {
@extend %medium;
color: $white;
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
background: $fresh-taiga; background: $fresh-taiga;
transition: background .3s linear;
} }
} }
.button-auth { .button-auth {
@extend %button; @extend %button;
background: $grayer; background: $grayer;
vertical-align: middle; .icon,
.icon, img { img {
@extend %large; @extend %large;
color: $white; color: $white;
margin-right: .5rem; margin-right: .5rem;
vertical-align: text-bottom;
} }
&:hover { &:hover {
background: $black; background: $black;
transition: background .3s linear;
} }
} }

29
app/styles/dependencies/helpers.scss
View File

@ -61,31 +61,6 @@
} }
} }
.loading-spinner {
@extend %loading-spinner;
}
%button {
@extend %medium;
@extend %title;
display: inline-block;
padding: 7px 40px 6px;
transition: background .3s linear;
text-transform: uppercase;
&:hover {
transition: background .3s linear;
}
&.loading {
span {
animation: loading .5s linear;
animation: spin 1s linear infinite;
}
}
.icon {
margin-right: .3rem;
}
}
// Background // Background
%triangled-bg { %triangled-bg {
background: url('/images/bg.png') no-repeat center center; background: url('/images/bg.png') no-repeat center center;
@ -105,3 +80,7 @@
max-width: 1rem; max-width: 1rem;
transform-origin: 32 32; transform-origin: 32 32;
} }
.loading-spinner {
@extend %loading-spinner;
}