From ed0abfeea6df43f887cdad9f1dc1f013e5bc5034 Mon Sep 17 00:00:00 2001
From: Francisco Hodge <hello@franciscohodge.com>
Date: Thu, 6 Feb 2020 00:31:32 -0500
Subject: [PATCH] Assign theme styles to default theme

---
 src/lib/components/Keyboard.css | 119 +++++++++++++++-----------------
 1 file changed, 57 insertions(+), 62 deletions(-)

diff --git a/src/lib/components/Keyboard.css b/src/lib/components/Keyboard.css
index 9425ee9d..c266fd83 100644
--- a/src/lib/components/Keyboard.css
+++ b/src/lib/components/Keyboard.css
@@ -1,12 +1,8 @@
-body,
-html {
-  margin: 0;
-  padding: 0;
-}
-
-.simple-keyboard {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
-    Helvetica, Arial, "Lucida Grande", sans-serif;
+/**
+ * simple-keyboard
+ * Theme: hg-theme-default
+ */
+.hg-theme-default {
   width: 100%;
   user-select: none;
   box-sizing: border-box;
@@ -14,50 +10,56 @@ html {
   touch-action: manipulation;
 }
 
-.simple-keyboard .hg-row {
-  display: flex;
-}
-
-.simple-keyboard .hg-row:not(:last-child) {
-  margin-bottom: 5px;
-}
-
-.simple-keyboard .hg-row .hg-button:not(:last-child) {
-  margin-right: 5px;
-}
-
-.simple-keyboard .hg-row .hg-button-container {
-  margin-right: 5px;
-}
-
-.simple-keyboard .hg-row > div:last-child {
-  margin-right: 0;
-}
-
-.simple-keyboard .hg-row .hg-button-container {
-  display: flex;
-}
-
-.simple-keyboard .hg-button {
-  display: inline-block;
-  flex-grow: 1;
-  cursor: pointer;
-}
-
-.simple-keyboard .hg-button span {
+.hg-theme-default .hg-button span {
   pointer-events: none;
 }
 
-/**
- * hg-theme-default theme
- */
-.simple-keyboard.hg-theme-default {
+/* When using option "useButtonTag" */
+.hg-theme-default button.hg-button {
+  border-width: 0;
+  outline: 0;
+  font-size: inherit;
+}
+
+.hg-theme-default {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
+    Helvetica, Arial, "Lucida Grande", sans-serif;
   background-color: rgba(0, 0, 0, 0.1);
   padding: 5px;
   border-radius: 5px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button {
+.hg-theme-default .hg-button {
+  display: inline-block;
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.hg-theme-default .hg-row {
+  display: flex;
+}
+
+.hg-theme-default .hg-row:not(:last-child) {
+  margin-bottom: 5px;
+}
+
+.hg-theme-default .hg-row .hg-button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+  margin-right: 5px;
+}
+
+.hg-theme-default .hg-row > div:last-child {
+  margin-right: 0;
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+  display: flex;
+}
+
+.hg-theme-default .hg-button {
   box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
   height: 40px;
   border-radius: 5px;
@@ -72,18 +74,11 @@ html {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
+.hg-theme-default .hg-button.hg-activeButton {
   background: #efefef;
 }
 
-/* When using option "useButtonTag" */
-.simple-keyboard button.hg-button {
-  border-width: 0;
-  outline: 0;
-  font-size: inherit;
-}
-
-.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
+.hg-theme-default.hg-layout-numeric .hg-button {
   width: 33.3%;
   height: 60px;
   align-items: center;
@@ -91,35 +86,35 @@ html {
   justify-content: center;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
+.hg-theme-default .hg-button.hg-button-numpadadd {
   height: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {
+.hg-theme-default .hg-button.hg-button-numpadenter {
   height: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {
+.hg-theme-default .hg-button.hg-button-numpad0 {
   width: 105px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-com {
+.hg-theme-default .hg-button.hg-button-com {
   max-width: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
+.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
   max-width: 45px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
+.hg-theme-default .hg-button.hg-selectedButton {
   background: rgba(5, 25, 70, 0.53);
   color: white;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
   max-width: 82px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
   max-width: 60px;
 }