From d4299dec71227404f890dda8d796494fd06f2013 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Thu, 25 Jul 2019 15:06:41 +0200
Subject: [PATCH] feat(button): reduce to minimal css

---
 packages/button/src/LionButton.js | 35 ++++++++++++-------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 623bb334f..614be5087 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -48,22 +48,20 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
           display: inline-block;
           padding-top: 2px;
           padding-bottom: 2px;
-          height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
+          min-height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
           outline: 0;
           background-color: transparent;
           box-sizing: border-box;
         }
 
         .btn {
-          height: 24px;
+          min-height: 24px;
           display: flex;
           align-items: center;
           position: relative;
-          border: 1px solid black;
-          border-radius: 8px;
-          background: whitesmoke;
-          color: black;
+          background: #eee; /* minimal styling to make it recognizable as btn */
           padding: 7px 15px;
+          outline: none; /* focus style handled below, else it follows boundaries of click-area */
         }
 
         :host .btn ::slotted(button) {
@@ -81,27 +79,20 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
           padding: 0;
         }
 
-        :host(:focus) {
-          outline: none;
-        }
-
         :host(:focus) .btn {
-          border-color: lightblue;
-          box-shadow: 0 0 8px lightblue, 0 0 0 1px lightblue;
+          /* if you extend, please overwrite */
+          outline: 2px solid #bde4ff;
         }
 
         :host(:hover) .btn {
-          background: black;
-          color: whitesmoke;
-        }
-
-        :host(:hover) .btn ::slotted(lion-icon) {
-          fill: whitesmoke;
+          /* if you extend, please overwrite */
+          background: #f4f6f7;
         }
 
         :host(:active) .btn,
         .btn[active] {
-          background: grey;
+          /* if you extend, please overwrite */
+          background: gray;
         }
 
         :host([disabled]) {
@@ -109,10 +100,10 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
         }
 
         :host([disabled]) .btn {
+          /* if you extend, please overwrite */
           background: lightgray;
-          color: gray;
-          fill: gray;
-          border-color: gray;
+          color: #adadad;
+          fill: #adadad;
         }
       `,
     ];