[#155003820] refactored styles for Checkout and Add Donation buttons …

…as requested in https://www.pivotaltracker.com/n/projects/2149077/stories/155003753/
systemseed · Apr 11, 2018 · 1392dac · 1392dac
1 parent 16e8f29
commit 1392dac
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/frontend-gifts/src/components/BasketWithGifts/index.js b/frontend-gifts/src/components/BasketWithGifts/index.js
@@ -56,7 +56,7 @@ const BasketWithGifts = ({ currentCurrency, products }) => {
                 currency={currentCurrency}
               />
 
-              <CheckoutButton className="btn btn-primary btn-block space-top-none">
+              <CheckoutButton className="btn btn-primary btn-block btn-checkout space-top-none">
                 Checkout
               </CheckoutButton>
             </Sticky>

diff --git a/frontend-gifts/src/styles/sass/_buttons.scss b/frontend-gifts/src/styles/sass/_buttons.scss
@@ -422,6 +422,12 @@ input[type="button"] {
   &:focus { color: $gray-dark; }
 }
 
+// Checkout Button
+.btn-checkout {
+  font-weight: bold;
+  text-transform: uppercase !important;
+}
+
 
 /*!
  * Waves v0.6.0

diff --git a/frontend-gifts/src/styles/sass/falcon/_buttons.scss b/frontend-gifts/src/styles/sass/falcon/_buttons.scss
@@ -29,6 +29,12 @@
     color: $brand-alternate;
     border-color: $brand-alternate;
   }
+
+  &:active, &:focus {
+    color: $btn-font-color-alt !important;
+    background-color: darken($btn-primary-bg, 10%) !important;
+    border-color: transparent; 
+  }
 }
 
 // Introduce new button type.
@@ -75,4 +81,4 @@
     line-height: 32px;
     font-size: 14px;
   }
-}
+}