Styling tweaks. WIP #2591 @0:10

diff --git a/src/components/Forms.vue b/src/components/Forms.vue
index 196ff54d5a3a74ff051b7f20d3577c6a58087484..0bd2581fd0a704ea6d94f4377ee93e319946db92 100644 (file)
--- a/src/components/Forms.vue
+++ b/src/components/Forms.vue
@@ -369,7 +369,10 @@
         text-align: center; }
     .container__form--label {
         color: white;
-        font-size: 24px; }
+        font-size: 24px;
+        display: inline-block;
+        vertical-align: middle;
+    }
     .container__form--wrap {
         white-space: nowrap; }
     select::-ms-expand {
@@ -382,8 +385,13 @@
         color: #0099ff;
         padding-left: 5px;
         -webkit-appearance: none;
+        border-radius: 0;
         margin: 0 5px 0 5px;
         padding-right: 2.4em;
+        padding-left: 0.5em;
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 1em;
     }
     .container__form--arrow{
         width: 12px;
@@ -393,12 +401,14 @@
         pointer-events: none;
     }
     .container__form--btn {
-        width: 30px;
+        padding: 0 0.5em;
         height: 30px;
         background: transparent;
         border: 1px solid white;
         color: white;
-        display: inline-block; }
+        display: inline-block; 
+        vertical-align: middle;
+    }
     .container__form--info {
         font-size: 12px;
         color: white;
@@ -414,6 +424,14 @@
         max-width: 295px;
         margin: 4em auto 0;
     }
+    .btn {
+        cursor: pointer;
+        transition: 300ms all ease-in-out;
+        font-size: 1em;
+    }
+    .btn:hover {
+        background-color: rgba(0,0,0,0.1);
+    }
     .container__buttons--btn{
         width: 75px;
         height: 75px;
@@ -422,13 +440,6 @@
         color: white;
         font-size: 24px;
     }
-    .btn {
-        cursor: pointer;
-        transition: 300ms all ease-in-out;
-    }
-    .btn:hover {
-        background-color: rgba(0,0,0,0.1);
-    }
     .answer{
         display: flex;
         flex-direction: column;