From dc618a8dbc778c273015540e438cf81e1933175f Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Mon, 17 Aug 2020 18:42:20 +0530
Subject: Add new style guide to global button style

- Updated new style guide for Primary, Secondary and Link button variants
- Changed box-shadow style from outer to inside on focus and active state
- Updated font weight from bold to regular for normal buttons and font
weight bold for link button.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I38ca94baa9daec3fd03b830fc7b6d676fcce15b0
---
 src/assets/styles/bmc/custom/_buttons.scss | 61 ++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 12 deletions(-)

(limited to 'src/assets/styles/bmc/custom/_buttons.scss')

diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 3f111302..e927d244 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,5 +1,4 @@
 .btn {
-  font-weight: $headings-font-weight;
   padding-top: $spacer / 2;
   padding-right: $spacer;
   padding-bottom: $spacer / 2;
@@ -10,34 +9,72 @@
   svg + span {
     margin-left: $spacer / 4;
   }
+  &:disabled {
+    color: gray("600");
+    fill: currentColor;
+    box-shadow: none !important;
+    &:not(.btn-link) {
+      border-color: gray("400");
+      background-color: gray("400");
+    }
+  }
 }
 
 .btn-primary {
   fill: currentColor;
+  &:focus,
+  &:not(:disabled):not(.disabled):active:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+  }
 }
 
 .btn-secondary {
   fill: currentColor;
+  &:focus,
+  &:not(:disabled):not(.disabled):active:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+  }
 }
 
+// Global style for all button link
 .btn-link {
+  font-weight: $headings-font-weight;
   fill: theme-color("primary");
   text-decoration: none !important;
-
+  &:hover {
+    background-color: gray("200");
+    color: theme-color("primary");
+  }
+  &:active {
+    background-color: gray("300");
+  }
   &:focus {
-    box-shadow: $btn-focus-box-shadow;
+    box-shadow: inset 0 0 0 2px theme-color("primary");
+    color: theme-color("primary");
+    outline: none;
   }
-  &:hover {
-    fill: darken(theme-color("primary"), 15%);
+  &:disabled {
+    box-shadow: $btn-focus-box-shadow;
   }
 }
 
-.btn:disabled {
-  color: gray("600");
-  fill: currentColor;
-
-  &:not(.btn-link) {
-    border-color: gray("400");
-    background-color: gray("400");
+// Datepicker and Password toggle buttons
+.input-action {
+  position: absolute;
+  right: 0;
+}
+.input-action .btn-link,
+.input-action-btn {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  z-index: $zindex-dropdown + 1;
+  padding: 0;
+  width: 36px;
+  height: 35.8px;
+  svg {
+    vertical-align: sub;
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3