diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 6a270a08..bb3a7050 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -1,80 +1,98 @@ -// Buttons components -.trans-button { - @extend %large; +.button, +%button { + @extend %medium; @extend %title; + background: transparent; + border: 0; + color: $white; + display: inline-block; + padding: .4rem 2.5rem; text-transform: uppercase; - &:hover, - &.active { - color: $green-taiga; - transition: color .3s linear; + transition: all .3s linear; + vertical-align: middle; + &:hover { + color: $white; + transition: all .3s linear; + } + &.loading { + span { + animation: loading .5s linear; + } + } + span { + color: $white; } .icon { + color: $white; margin-right: .3rem; } } -.button { +.trans-button { + @extend %large; + @extend %title; @extend %button; + span, + .icon { + color: $blackish; + transition: color .2s linear; + } + &:hover, + &.active { + span, + .icon { + color: $green-taiga; + } + } } -button { - @extend %button; -} .submit-button { width: 100%; } .button-green { + @extend %button; background: $green-taiga; - border: 0; - color: $white; - vertical-align: middle; &:hover, &.active { background: $fresh-taiga; } - span { - color: $white; - } } -.button-gray, -a.button-gray { +.button-gray { + @extend %button; background: $gray; - &:hover { + &:hover, + &.active { background: $fresh-taiga; color: $white; } - span { - color: $white; - } } -a.button-blackish { +.button-blackish { + @extend %button; background: $blackish; color: $whitish; &:hover { background: $blackish; color: $white; } - span { - color: $white; - } } -a.button-red { +.button-red { + @extend %button; background: $red-light; &:hover { background: $red; color: $white; } - span { + .icon { color: $white; } } -a.button-block { +.button-block { background: $white; color: $red; &:hover { @@ -83,35 +101,29 @@ a.button-block { } } -a.button-bulk { +.button-bulk { @extend %button; background: $green-taiga; - font-size: 22px; - margin-left: 2px; - padding: .3rem .5rem; - vertical-align: middle; + padding: .35rem .5rem; .icon { - @extend %medium; - color: $white; margin-right: 0; } &:hover { background: $fresh-taiga; - transition: background .3s linear; } } + + .button-auth { @extend %button; background: $grayer; - vertical-align: middle; - .icon, img { + .icon, + img { @extend %large; color: $white; margin-right: .5rem; - vertical-align: text-bottom; } &:hover { background: $black; - transition: background .3s linear; } } diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index b259563d..9440bf64 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -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 %triangled-bg { background: url('/images/bg.png') no-repeat center center; @@ -105,3 +80,7 @@ max-width: 1rem; transform-origin: 32 32; } + +.loading-spinner { + @extend %loading-spinner; +}