From 31d4ce22c48dde7cad0e7bafefd368107711919f Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves1.gatesoupe@orange.com>
Date: Mon, 8 Feb 2016 18:06:17 +0100
Subject: [PATCH] fix(component): buttons states styles

created specific scss file
buttons styled according to new brand
updated boostswatch page
---
 docs-orange/_includes/boostwatch/buttons.html |  61 ++--
 scss/_o-buttons.scss                          | 290 ++++++++++++++++++
 scss/_o-variables.scss                        |  43 ++-
 scss/_orange-css.scss                         |  98 ------
 scss/bootstrap.scss                           |   1 +
 5 files changed, 359 insertions(+), 134 deletions(-)
 create mode 100644 scss/_o-buttons.scss

diff --git a/docs-orange/_includes/boostwatch/buttons.html b/docs-orange/_includes/boostwatch/buttons.html
index 75730b29b0..772766700f 100644
--- a/docs-orange/_includes/boostwatch/buttons.html
+++ b/docs-orange/_includes/boostwatch/buttons.html
@@ -4,8 +4,8 @@
 <h2 id="buttons" class="">Buttons</h2>
 <h3>Default</h3>
 <p class="">
-    <button type="button" class="btn btn-secondary">Default</button>
     <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-secondary">Secondary</button>
     <button type="button" class="btn btn-success">Success</button>
     <button type="button" class="btn btn-info">Info</button>
     <button type="button" class="btn btn-warning">Warning</button>
@@ -15,19 +15,19 @@ <h3>Default</h3>
 
 <h3>Hover</h3>
 <p class="">
-    <button type="button" class="btn btn-secondary hover">Default</button>
-    <button type="button" class="btn btn-primary hover">Primary</button>
-    <button type="button" class="btn btn-success hover">Success</button>
-    <button type="button" class="btn btn-info hover">Info</button>
-    <button type="button" class="btn btn-warning hover">Warning</button>
-    <button type="button" class="btn btn-danger hover">Danger</button>
-    <button type="button" class="btn btn-link hover">Link</button>
+    <button type="button" class="btn btn-info" style="pointer-events: none;">Primary</button>
+    <button type="button" class="btn btn-info" style="pointer-events: none;">Secondary</button>
+    <button type="button" class="btn btn-info" style="pointer-events: none;">Success</button>
+    <button type="button" class="btn btn-secondary" style="pointer-events: none;">Info</button>
+    <button type="button" class="btn btn-info" style="pointer-events: none;">Warning</button>
+    <button type="button" class="btn btn-info" style="pointer-events: none;">Danger</button>
+    <button type="button" class="btn btn-info" style="pointer-events: none;">Link</button>
 </p>
 
 <h3>Pressed</h3>
 <p class="">
-    <button type="button" class="btn btn-secondary active">Default</button>
     <button type="button" class="btn btn-primary active">Primary</button>
+    <button type="button" class="btn btn-secondary active">Secondary</button>
     <button type="button" class="btn btn-success active">Success</button>
     <button type="button" class="btn btn-info active">Info</button>
     <button type="button" class="btn btn-warning active">Warning</button>
@@ -37,20 +37,22 @@ <h3>Pressed</h3>
 
 <h3>Disabled</h3>
 <p class="">
-    <button type="button" class="btn btn-secondary disabled">Default</button>
-    <button type="button" class="btn btn-primary disabled">Primary</button>
-    <button type="button" class="btn btn-success disabled">Success</button>
-    <button type="button" class="btn btn-info disabled">Info</button>
-    <button type="button" class="btn btn-warning disabled">Warning</button>
-    <button type="button" class="btn btn-danger disabled">Danger</button>
-    <button type="button" class="btn btn-link disabled">Link</button>
+    <button type="button" class="btn btn-primary" disabled>Primary</button>
+    <button type="button" class="btn btn-secondary" disabled>Secondary</button>
+    <button type="button" class="btn btn-success" disabled>Success</button>
+    <button type="button" class="btn btn-info" disabled>Info</button>
+    <button type="button" class="btn btn-warning" disabled>Warning</button>
+    <button type="button" class="btn btn-danger" disabled>Danger</button>
+    <button type="button" class="btn btn-link" disabled>Link</button>
 </p>
 
 <h3>Dropdowns</h3>
 <div class="btn-toolbar">
     <div class="btn-group">
-        <button type="button" class="btn btn-secondary">Default</button>
-        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span></button>
+        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+            Primary
+            <span class="sr-only">menu primary</span>
+        </button>
         <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -61,8 +63,9 @@ <h3>Dropdowns</h3>
     </div>
 
     <div class="btn-group">
-        <button type="button" class="btn btn-primary">Primary</button>
-        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span><span class="sr-only">menu primary</span></button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
+            Secondary
+        </button>
         <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -73,8 +76,10 @@ <h3>Dropdowns</h3>
     </div>
 
     <div class="btn-group">
-        <button type="button" class="btn btn-success">Success</button>
-        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span><span class="sr-only">menu success</span></button>
+        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
+            Success
+            <span class="sr-only">menu success</span>
+        </button>
         <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -85,8 +90,10 @@ <h3>Dropdowns</h3>
     </div>
 
     <div class="btn-group">
-        <button type="button" class="btn btn-info">Info</button>
-        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span><span class="sr-only">menu info</span></button>
+        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+            Info
+            <span class="sr-only">menu info</span>
+        </button>
         <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
@@ -97,8 +104,10 @@ <h3>Dropdowns</h3>
     </div>
 
     <div class="btn-group">
-        <button type="button" class="btn btn-warning">Warning</button>
-        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret" aria-hidden="true"></span><span class="sr-only">menu warning</span></button>
+        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
+            Warning
+            <span class="sr-only">menu warning</span>
+        </button>
         <ul class="dropdown-menu">
             <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
diff --git a/scss/_o-buttons.scss b/scss/_o-buttons.scss
new file mode 100644
index 0000000000..2908384971
--- /dev/null
+++ b/scss/_o-buttons.scss
@@ -0,0 +1,290 @@
+@mixin orange-button-variant($color, $background, $hover-color:$color, $hover-background:$background, $active-color:$color, $active-background:$background, $hover-border:$hover-background) {
+
+  color: $color;
+  background-color: $background;
+  border-color: $background;
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
+
+  @include hover {
+    color: $hover-color;
+    background-color: $hover-background;
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    color: $active-color;
+    background-color: $active-background;
+    border-color: $active-background;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $active-color;
+    background-color: $active-background;
+    background-image: none;
+    border-color: $active-background;
+    // Remove the gradient for the pressed/active state
+    @include box-shadow($btn-active-box-shadow);
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $active-color;
+      background-color: $active-background;
+      border-color: $active-background;
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $brand-orange-white;
+    background-color: $btn-link-disabled-color;
+    border-color: $btn-link-disabled-color;
+    &:focus,
+    &.focus {
+      color: $brand-orange-white;
+      background-color: $btn-link-disabled-color;
+      border-color: $btn-link-disabled-color;
+    }
+    @include hover {
+      color: $brand-orange-white;
+      background-color: $btn-link-disabled-color;
+      border-color: $btn-link-disabled-color;
+    }
+  }
+}
+
+@mixin orange-button-outline-variant($color) {
+  color: $color;
+  background-image: none;
+  background-color: transparent;
+  border-color: $color;
+
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
+
+  @include hover {
+    color: $brand-orange-white;
+    background-color: $brand-orange-black;
+    border-color: $brand-orange-black;
+  }
+
+  &:focus,
+  &.focus {
+    color: $brand-orange-white;
+    background-color: $brand-orange;
+    border-color: $brand-orange;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $brand-orange-white;
+    background-color: $brand-orange;
+    background-image: none;
+    border-color: $brand-orange;
+    // Remove the gradient for the pressed/active state
+    @include box-shadow($btn-active-box-shadow);
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $brand-orange-white;
+      background-color: $brand-orange;
+      border-color: $brand-orange;
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $btn-link-disabled-color;
+    background-color: transparent;
+    border-color: $btn-link-disabled-color;
+    &:focus,
+    &.focus {
+      color: $btn-link-disabled-color;
+      background-color: transparent;
+      border-color: $btn-link-disabled-color;
+    }
+    @include hover {
+      color: $btn-link-disabled-color;
+      background-color: transparent;
+      border-color: $btn-link-disabled-color;
+    }
+  }
+}
+
+//
+// Base styles
+//
+
+.btn {
+  display: inline-block;
+  font-weight: $btn-font-weight;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: $input-btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
+  @include transition(all .2s ease-in-out);
+
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      @include tab-focus();
+    }
+  }
+
+  @include hover-focus {
+    text-decoration: none;
+  }
+  &.focus {
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+    outline: 0;
+    @include box-shadow($btn-active-box-shadow);
+  }
+
+  &.disabled,
+  &:disabled {
+    cursor: $cursor-disabled;
+    opacity: 1;
+    @include box-shadow(none);
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset[disabled] a.btn {
+  pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+.btn-primary {
+  @include orange-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-hover-color, $btn-primary-hover-bg, $btn-primary-active-color, $btn-primary-active-bg);
+}
+.btn-secondary {
+  @include orange-button-outline-variant($btn-secondary-color);
+}
+.btn-info {
+  @include orange-button-variant($btn-info-color, $btn-info-bg, $btn-info-hover-color, $btn-info-hover-bg, $btn-info-active-color, $btn-info-active-bg, $brand-orange-black);
+}
+.btn-success {
+  @include orange-button-variant($btn-success-color, $btn-success-bg, $btn-success-hover-color, $btn-success-hover-bg, $btn-success-active-color, $btn-success-active-bg);
+}
+.btn-warning {
+  @include orange-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-hover-color, $btn-warning-hover-bg, $btn-warning-active-color, $btn-warning-active-bg);
+}
+.btn-danger {
+  @include orange-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-hover-color, $btn-danger-hover-bg, $btn-danger-active-color, $btn-danger-active-bg);
+}
+
+// Remove all backgrounds
+.btn-outline-primary {
+  @include orange-button-outline-variant($btn-primary-bg);
+}
+.btn-outline-secondary {
+  @include orange-button-outline-variant($btn-secondary-color);
+}
+.btn-outline-info {
+  @include orange-button-outline-variant($btn-info-bg);
+}
+.btn-outline-success {
+  @include orange-button-outline-variant($btn-success-bg);
+}
+.btn-outline-warning {
+  @include orange-button-outline-variant($btn-warning-bg);
+}
+.btn-outline-danger {
+  @include orange-button-outline-variant($btn-danger-bg);
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: normal;
+  color: $link-color;
+  border-radius: 0;
+
+  &,
+  &:active,
+  &.active,
+  &:disabled {
+    background-color: transparent;
+    @include box-shadow(none);
+  }
+  &,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  @include hover {
+    border-color: transparent;
+  }
+  @include hover-focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+    background-color: transparent;
+  }
+  &:disabled {
+    @include hover-focus {
+      color: $btn-link-disabled-color;
+      text-decoration: none;
+    }
+  }
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  // line-height: ensure even-numbered height of button next to large input
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+}
+.btn-sm {
+  // line-height: ensure proper height of button next to small input
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: $btn-block-spacing-y;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
diff --git a/scss/_o-variables.scss b/scss/_o-variables.scss
index 7e7adf4f8f..c2b01646b0 100644
--- a/scss/_o-variables.scss
+++ b/scss/_o-variables.scss
@@ -124,6 +124,9 @@ $border-radius: 0;
 $border-radius-lg: 0;
 $border-radius-sm: 0;
 
+$border-width: 2px;
+$input-btn-border-width: $border-width;
+
 // Global color for active items (e.g., navs or dropdowns).
 $component-active-color:    $brand-orange-white;
 // Global background color for active items (e.g., navs or dropdowns).
@@ -155,33 +158,53 @@ $table-border-color: $gray-light;
 // For each of Bootstrap's buttons, define text, background and border color.
 
 $btn-font-weight: $brand-font-weight-bold;
-$btn-default-color: $brand-orange-black;
-$btn-default-bg: $brand-orange-white;
-$btn-default-border: $btn-default-color;
+// $btn-default-color: $brand-orange-black;
+// $btn-default-bg: $brand-orange-white;
+// $btn-default-border: $btn-default-color;
 
 $btn-primary-color: $brand-orange-white;
 $btn-primary-bg: $brand-primary;
-$btn-primary-border: $btn-primary-bg;
+$btn-primary-hover-color: $btn-primary-color;
+$btn-primary-hover-bg: $brand-orange-black;
+$btn-primary-active-color: $btn-primary-color;
+$btn-primary-active-bg: $btn-primary-bg;
+
+$btn-secondary-color: $brand-orange-black;
+$btn-secondary-bg: $brand-orange-white;
+$btn-secondary-hover-color: $brand-orange-white;
+$btn-secondary-hover-bg: $brand-orange-black;
+$btn-secondary-active-color: $brand-orange-white;
+$btn-secondary-active-bg: $brand-orange;
 
 $btn-success-color: $brand-orange-black;
 $btn-success-bg: $brand-success;
-$btn-success-border: $btn-success-bg;
+$btn-success-hover-color: $brand-orange-white;
+$btn-success-hover-bg: $brand-orange-black;
+$btn-success-active-color: $brand-orange-white;
+$btn-success-active-bg: $brand-orange;
 
 $btn-info-color: $brand-orange-white;
 $btn-info-bg: $brand-orange-black;
-$btn-info-hover-bg: $gray;
+$btn-info-hover-color: $brand-orange-black;
+$btn-info-hover-bg: $brand-orange-white;
+$btn-info-active-color: $brand-orange-white;
 $btn-info-active-bg: $brand-orange;
-$btn-info-border: $btn-info-bg;
 
 $btn-warning-color: $btn-primary-color;
 $btn-warning-bg: $btn-primary-bg;
-$btn-warning-border: $btn-primary-border;
+$btn-warning-hover-color: $btn-primary-hover-color;
+$btn-warning-hover-bg: $btn-primary-hover-bg;
+$btn-warning-active-color: $btn-primary-active-color;
+$btn-warning-active-bg: $btn-primary-active-bg;
 
 $btn-danger-color: $brand-orange-white;
 $btn-danger-bg: $brand-danger;
-$btn-danger-border: $btn-danger-bg;
+$btn-danger-hover-color: $btn-primary-hover-color;
+$btn-danger-hover-bg: $btn-primary-hover-bg;
+$btn-danger-active-color: $btn-primary-active-color;
+$btn-danger-active-bg: $btn-primary-active-bg;
 
-$btn-link-disabled-color: $gray-before-light;
+$btn-link-disabled-color: $gray-light;
 
 $btn-padding-x: $padding-base-horizontal;
 $btn-padding-y: $padding-base-vertical;
diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
index 9748056ca1..889561d136 100644
--- a/scss/_orange-css.scss
+++ b/scss/_orange-css.scss
@@ -443,104 +443,6 @@ caption {
   font-weight: bold;
 }
 
-//
-// buttons orange specific variants
-//
-
-// Alternate buttons
-// --------------------------------------------------
-
-@mixin button-variant-orange($color, $background, $border, $hover-bg-color:darken($background, 10%), $active-bg-color:darken($background, 20%), $hover-color:$color, $active-color:$color) {
-  color: $color;
-  background-color: $background;
-  border-color: $border;
-
-  &:hover,
-  &.hover,
-  .open > .dropdown-toggle & {
-    color: $hover-color;
-    background-color: $hover-bg-color;
-    border-color: $hover-bg-color;
-  }
-
-  &:focus,
-  &.focus,
-  &:active,
-  &.active {
-    color: $active-color;
-    background-color: $active-bg-color;
-    border-color: $active-bg-color;
-  }
-
-  &:active,
-  &.active,
-  .open > .dropdown-toggle & {
-    background-image: none;
-  }
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &,
-    &:hover,
-    &:focus,
-    &.focus,
-    &:active,
-    &.active {
-      background-color: $background;
-      border-color: $border;
-    }
-  }
-
-  .badge {
-    color: $background;
-    background-color: $color;
-  }
-}
-
-.btn-default {
-  @include button-variant-orange($btn-default-color, $btn-default-bg, $btn-default-border, $btn-default-color, $btn-primary-bg, $btn-default-bg, $btn-default-bg);
-}
-
-.btn-primary {
-  @include button-variant-orange($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-}
-
-.btn-secondary {
-  @include button-variant-orange($btn-default-color, $btn-default-bg, $btn-default-border, $btn-default-color, $btn-primary-bg, $btn-default-bg, $btn-default-bg);
-}
-
-.btn-outline-secondary {
-  @include button-outline-variant($btn-info-bg);
-}
-
-// Success appears as green
-.btn-success {
-  @include button-variant-orange($btn-success-color, $btn-success-bg, $btn-success-border, darken($btn-success-bg, 10%), darken($btn-success-bg, 20%), $btn-success-color, $btn-default-color);
-}
-// Info appears as blue-green
-.btn-info {
-  @include button-variant-orange($btn-info-color, $btn-info-bg, $btn-info-border, $btn-info-hover-bg, $btn-info-active-bg);
-}
-// Warning appears as orange
-.btn-warning {
-  @include button-variant-orange($btn-warning-color, $btn-warning-bg, $btn-warning-border);
-}
-// Danger and error appear as red
-.btn-danger {
-  @include button-variant-orange($btn-danger-color, $btn-danger-bg, $btn-danger-border);
-}
-
-.btn {
-  border-width: 2px;
-
-  &.disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    opacity: .2;
-  }
-}
-
 .form-group {
   .form-control-label {
     font-weight: $brand-font-weight-bold;
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 1fd72f290c..9305eda6b3 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -55,6 +55,7 @@
 @import "utilities";
 
 // boosted mod
+@import "o-buttons";
 @import "o-iconOrange";
 @import "o-bullet_points";
 @import "o-step_bar";