diff options
Diffstat (limited to 'app/assets/stylesheets/framework/awards.scss')
-rw-r--r-- | app/assets/stylesheets/framework/awards.scss | 43 |
1 files changed, 15 insertions, 28 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 662f7f52d61..412a1e8d6c9 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -122,12 +122,8 @@ } } -.award-control { +.gl-button.btn.award-control { margin: 4px 8px 4px 0; - outline: 0; - position: relative; - display: block; - float: left; &.disabled { cursor: default; @@ -145,15 +141,6 @@ &:hover, &:active, &.is-active { - background-color: $blue-50; - border-color: $blue-200; - box-shadow: none; - outline: 0; - - .award-control-icon svg { - fill: $blue-500; - } - .award-control-icon-neutral { opacity: 0; } @@ -164,6 +151,14 @@ } } + &.active, + &.is-active, + &:active { + background-color: $blue-50; + border-color: $blue-200; + box-shadow: inset 0 0 2px $blue-200; + } + &.is-active { .award-control-icon-positive { opacity: 0; @@ -192,10 +187,6 @@ &:focus { outline: 0; } - - .award-control-icon { - margin: 0; - } } &.is-loading { @@ -213,9 +204,7 @@ gl-emoji, .award-control-icon { vertical-align: middle; - margin-right: 0.15em; - font-size: 1.5em; - line-height: 1; + line-height: 0.5em; } .award-control-icon-loading { @@ -224,11 +213,8 @@ .award-control-icon { color: $border-gray-normal; - margin-top: 1px; - padding: 0 2px; svg { - margin-bottom: 1px; height: $default-icon-size; width: $default-icon-size; border-radius: 50%; @@ -239,10 +225,8 @@ .award-control-icon-positive, .award-control-icon-super-positive { @include transition(opacity, transform); - position: absolute; - left: 10px; - bottom: 6px; opacity: 0; + position: absolute; path { fill: $award-emoji-positive-add-lines; @@ -261,7 +245,6 @@ // migrated to Vue. .gl-button .award-emoji-block gl-emoji { - top: -1px; margin-top: -1px; margin-bottom: -1px; } @@ -363,3 +346,7 @@ } } } + +.awards .is-active { + box-shadow: inset 0 0 0 1px $blue-200; +} |