From 07028f28a88b34de5df97bedcbe950b4c6f76ea8 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Tue, 2 Jul 2019 12:02:51 -0600
Subject: [PATCH] Update styling for buttons and mobile

---
 src/main.scss                    | 19 +------------
 src/scss/_containers.scss        | 12 ++++++++
 src/scss/_elements.scss          | 48 +++++++++++++++++++++++---------
 src/scss/mobile/_containers.scss |  5 ++--
 src/scss/mobile/_structure.scss  | 18 ++++++++----
 5 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/src/main.scss b/src/main.scss
index e3e012c..85a56ac 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -18,21 +18,4 @@
 @import 'scss/themes/yellow';
 @import 'scss/themes/red';
 @import 'scss/themes/mint';
-@import 'scss/themes/grape';
-
-html, body {
-  margin: 0;
-  font-family: $font;
-  transition: all 0.2s ease-in;
-  
-  * {
-    transition: all 0.2s ease-in;
-    box-sizing: border-box;
-  }
-}
-
-input:not([type="checkbox"]),
-select,
-textarea {
-  font-size: 16px;
-}
\ No newline at end of file
+@import 'scss/themes/grape';
\ No newline at end of file
diff --git a/src/scss/_containers.scss b/src/scss/_containers.scss
index 9229b05..ce7b49e 100644
--- a/src/scss/_containers.scss
+++ b/src/scss/_containers.scss
@@ -1,3 +1,15 @@
+html, body {
+  margin: 0;
+  font-family: $font;
+  font-size: 13pt;
+  transition: all 0.2s ease-in;
+  
+  * {
+    transition: all 0.2s ease-in;
+    box-sizing: border-box;
+  }
+}
+
 header {
   display: block;
   padding: 5px $general-padding;
diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss
index 222c657..c2addc9 100644
--- a/src/scss/_elements.scss
+++ b/src/scss/_elements.scss
@@ -8,6 +8,12 @@ p, span {
   }
 }
 
+input:not([type="checkbox"]),
+select,
+textarea {
+  font-size: 12pt;
+}
+
 label {
   display: block;
   font-weight: bold;
@@ -24,7 +30,7 @@ label {
 
   input:not([type="checkbox"]):not([type="radio"]) {
     padding-bottom: 2px;
-    line-height: 130%;
+    line-height: 1.3;
   }
 
   input:not([type="checkbox"]):not([type="radio"]),
@@ -33,23 +39,27 @@ label {
     width: 100%;
   }
 
+  textarea {
+    min-height: 100px;
+  }
+
   .label-button {
     display: inline-block;
     padding: 3px 9px;
     border-radius: 3px;
-    line-height: 30px;
+    line-height: 1.5;
     cursor: pointer;
     user-select: none;
     font-size: 80%;
     font-weight: normal;
     float: right;
     cursor: pointer;
-    line-height: 80% !important;
+    line-height: 0.85 !important;
     padding: 3px 3px 5px;
 
     &.small {
       font-size: 80%;
-      line-height: 25px;
+      line-height: 0.8;
     }
   }
 
@@ -57,18 +67,18 @@ label {
     display: inline-block;
     padding: 3px 9px;
     border-radius: 3px;
-    line-height: 30px;
+    line-height: 1.5;
     cursor: pointer;
     user-select: none;
     font-size: 70%;
     font-weight: normal;
     cursor: pointer;
-    line-height: 70% !important;
+    line-height: 0.8 !important;
     padding: 2px 2px 4px;
 
     &.small {
       font-size: 80%;
-      line-height: 25px;
+      line-height: 0.8;
     }
   }
 }
@@ -81,11 +91,15 @@ ul {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 3px;
-  line-height: 30px;
+  line-height: 1.5;
 
   &.small {
     font-size: 80%;
-    line-height: 25px;
+    line-height: 1.3;
+  }
+
+  &+.tag {
+    margin-top: 5px;
   }
 }
 
@@ -95,24 +109,28 @@ span .tag {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 3px;
-  line-height: 30px;
+  line-height: 1.5;
 
   &.small {
     font-size: 80%;
-    line-height: 25px;
+    line-height: 1.3;
   }
   
   &+.tag {
     border-left: none;
     border-radius: 0 3px 3px 0;
   }
+
+  &+span .tag {
+    margin-top: 5px;
+  }
 }
 
 .button {
   display: inline-block;
   padding: 3px 9px;
   border-radius: 3px;
-  line-height: 30px;
+  line-height: 1.5;
   cursor: pointer;
   user-select: none;
   text-decoration: none;
@@ -120,7 +138,11 @@ span .tag {
 
   &.small {
     font-size: 80%;
-    line-height: 25px;
+    line-height: 1.3;
+  }
+
+  &+.button {
+    margin-top: 5px;
   }
 }
 
diff --git a/src/scss/mobile/_containers.scss b/src/scss/mobile/_containers.scss
index 3f58e92..a26bafb 100644
--- a/src/scss/mobile/_containers.scss
+++ b/src/scss/mobile/_containers.scss
@@ -1,8 +1,8 @@
 @media (max-width: 750px) {
 
 html, body {
-  font-size: 90%;
-  line-height: 90%;
+  font-size: 12pt;
+  line-height: 1;
 }
 
 header {
@@ -17,7 +17,6 @@ main {
   #sideColumn {
     display: block;
     width: 0;
-    height: block;
     margin: 0;
     overflow: visible;
   }
diff --git a/src/scss/mobile/_structure.scss b/src/scss/mobile/_structure.scss
index 465093f..5b6f7c5 100644
--- a/src/scss/mobile/_structure.scss
+++ b/src/scss/mobile/_structure.scss
@@ -2,7 +2,7 @@
   
 #top {
   #title {
-    font-size: 13pt;
+    width: 150px;
     margin-right: 10px;
   }
 
@@ -27,12 +27,13 @@
   }
 }
 
+$mobile-word-form-size: 32px;
 #mobileWordFormShow {
   position: fixed;
-  top: $header-height;
+  top: $header-height - ($mobile-word-form-size / 2);
   left: 0;
-  width: 32px;
-  height: 32px;
+  width: $mobile-word-form-size;
+  height: $mobile-word-form-size;
   display: block;
   border-radius: 0 3px 3px 0;
   font-size: 30px;
@@ -48,10 +49,15 @@
   display: none;
   width: 95%;
   max-width: unset;
-  top: $header-height + 32px;
+  max-height: 85%;
+  top: $header-height + ($mobile-word-form-size / 2);
   left: 0;
   right: 3%;
   z-index: 1;
+
+  label:not(:last-child) {
+    margin-bottom: 10px;
+  }
 }
 
 #detailsSection {
@@ -60,7 +66,9 @@
   }
 
   #detailsPanel {
+    width: 100%;
     max-height: 300px;
+    padding: 10px 5px;
   }
 }