From b834ecd2f6c3ce28e343f6c82b333a504ee125eb Mon Sep 17 00:00:00 2001
From: Chris Peressini <cperessini@gitlab.com>
Date: Mon, 28 Nov 2016 16:38:05 +0000
Subject: Add darker active state for outline buttons and new border colors.

---
 app/assets/stylesheets/framework/buttons.scss | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

(limited to 'app/assets/stylesheets/framework/buttons.scss')

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 4a9aa0f8717..2f52588dc18 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -15,7 +15,7 @@
   @include btn-default;
 }
 
-@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) {
+@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) {
   background-color: $background;
   color: $text;
   border-color: $border;
@@ -23,8 +23,14 @@
   &:hover,
   &:focus {
     background-color: $hover-background;
-    color: $hover-text;
     border-color: $hover-border;
+    color: $hover-text;
+  }
+
+  &:active {
+    background-color: $active-background;
+    border-color: $active-border;
+    color: $hover-text;
   }
 }
 
@@ -82,11 +88,11 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
+  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color);
 }
 
 @mixin btn-with-margin {
@@ -139,11 +145,11 @@
     &.btn-new,
     &.btn-create,
     &.btn-save {
-      @include btn-outline($white-light, $green-normal, $green-normal, $green-light, $white-light, $green-light);
+      @include btn-outline($white-light, $border-green-light, $border-green-light, $green-light, $white-light, $border-green-light, $green-normal, $border-green-normal);
     }
 
     &.btn-remove {
-      @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light);
+      @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
     }
   }
 
@@ -165,11 +171,11 @@
   }
 
   &.btn-close {
-    @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light);
+    @include btn-outline($white-light, $border-orange-light, $border-orange-light, $orange-light, $white-light, $border-orange-light, $orange-normal, $border-orange-normal);
   }
 
   &.btn-spam {
-    @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light);
+    @include btn-outline($white-light, $border-red-light, $border-red-light, $red-light, $white-light, $border-red-light, $red-normal, $border-red-normal);
   }
 
   &.btn-danger,
@@ -351,7 +357,7 @@
 
 .btn-inverted {
   &-secondary {
-    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
+    @include btn-outline($white-light, $border-blue-light, $border-blue-light, $blue-light, $white-light, $border-blue-light, $blue-normal, $border-blue-normal);
   }
 }
 
-- 
cgit v1.2.1