Add focus state for shop-button

Author: Emmanuel Garcia

src/shop-button.html

@@ -23,22 +23,53 @@
         box-sizing: border-box;
         border: 2px solid #000;
         background-color: #FFF;
-        font-weight: 500;
         font-size: 14px;
+        font-weight: 500;
         color: var(--app-primary-color);
+        margin: 0;
         padding: 8px 44px;
         text-align: center;
         text-decoration: none;
         text-transform: uppercase;
         border-radius: 0;
+        outline: none;
         -webkit-appearance: none;
       }
 
+      shop-button > *:focus {
+        background-color: #c5cad3;
+      }
+
       shop-button > *:active {
         background-color: #000;
         color: #FFF;
       }
 
+      @media (max-width: 767px) {
+
+        /* Responsive buttons are used in shop-detail, shop-cart and shop-checkout */
+        shop-button[responsive] {
+          @apply(--layout-fixed-bottom);
+          height: 64px;
+          z-index: 1;
+        }
+
+        shop-button[responsive] > * {
+          background-color: var(--app-accent-color);
+          border: none;
+          color: white;
+          padding: 20px;
+          width: 100%;
+          height: 100%;
+          font-size: 15px;
+        }
+
+        shop-button[responsive] > *:focus {
+          background-color: var(--app-accent-color);
+        }
+
+      }
+
     </style>
   </template>
 </dom-module>

src/shop-cart.html

@@ -66,7 +66,7 @@ <h1>Your Cart</h1>
         </div>
         <div class="checkout-box">
           Total: <span class="subtotal">[[_formatTotal(total)]]</span>
-          <shop-button class="action-btn">
+          <shop-button responsive>
             <a href="/checkout">Checkout</a>
           </shop-button>
         </div>

src/shop-checkout.html

@@ -370,7 +370,7 @@ <h2>Order Summary</h2>
                   <div class="flex">Total</div>
                   <div>[[_formatPrice(total)]]</div>
                 </div>
-                <shop-button class="action-btn" id="submitBox">
+                <shop-button responsive id="submitBox">
                   <input type="button" on-tap="_submit" value="Place Order">
                 </shop-button>
               </section>
@@ -382,7 +382,7 @@ <h2>Order Summary</h2>
         <header state="success">
           <h1>Thanks for your purchase!</h1>
           <p>[[response.successMessage]]</p>
-          <shop-button class="action-btn">
+          <shop-button responsive>
             <a href="/">Finish</a>
           </shop-button>
         </header>
@@ -391,7 +391,7 @@ <h1>Thanks for your purchase!</h1>
         <header state="error">
           <h1>We couldn&acute;t process your order</h1>
           <p id="errorMessage">[[response.errorMessage]]</p>
-          <shop-button class="action-btn">
+          <shop-button responsive>
             <a href="/checkout">Try again</a>
           </shop-button>
         </header>

src/shop-common-styles.html

@@ -34,7 +34,7 @@
         font-size: 12px;
       }
 
-      header > .action-btn {
+      header > kart-button[responsive] {
         margin-top: 20px;
       }
 
@@ -44,23 +44,6 @@
           font-size: 1.1em;
         }
 
-        /* Action Buttons are used in shop-detail, shop-cart and shop-checkout */
-        .action-btn {
-          @apply(--layout-fixed-bottom);
-          height: 64px;
-          z-index: 1;
-        }
-
-        .action-btn > * {
-          background-color: var(--app-accent-color);
-          border: none;
-          color: white;
-          padding: 20px;
-          width: 100%;
-          height: 100%;
-          font-size: 15px;
-        }
-
       }
 
     </style>

src/shop-detail.html

@@ -190,7 +190,7 @@ <h1>[[item.title]]</h1>
           <h4>Description</h4>
           <p id="desc"></p>
         </div>
-        <shop-button class="action-btn">
+        <shop-button responsive>
           <button on-tap="_addToCart" aria-label="Add this item to cart">Add to Cart</button>
         </shop-button>
       </div>