From d8101e09e1411292329b3f45de48b0b91e6504c7 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Tue, 22 Oct 2019 20:12:47 +0100
Subject: [PATCH] [design] improve form group styles

---
 src/css/form.css     |  67 +++++++++++--------------
 src/style-guide.html | 115 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 144 insertions(+), 38 deletions(-)
 create mode 100644 src/style-guide.html

diff --git a/src/css/form.css b/src/css/form.css
index 1dd6c52d..e57bc2cb 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1149,6 +1149,7 @@ input[type="range"]:disabled::-moz-range-progress {
   border-style: solid;
   border-color: transparent;
   border-radius: var(--theme-radius);
+  white-space: nowrap;
   transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
 }
 
@@ -1192,8 +1193,9 @@ input[type="range"]:disabled::-moz-range-progress {
   flex-basis: 50%;
 }
 
-.form-group button,
+.form-group .form-group-text,
 .form-group .button,
+.form-group>select,
 .form-group>input[type="email"],
 .form-group>input[type="number"],
 .form-group>input[type="password"],
@@ -1203,26 +1205,34 @@ input[type="range"]:disabled::-moz-range-progress {
 .form-group>input[type="color"] {
   margin: 0;
   border-radius: 0;
+  height: inherit;
+  min-height: 2.5em;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  z-index: 1;
 }
 
 .form-group .form-group-text {
-  margin-bottom: 0;
-  border-radius: 0;
-  z-index: 1;
-  position: relative;
+  flex-shrink: 0;
 }
 
-.form-group>input[type="email"],
-.form-group>input[type="number"],
-.form-group>input[type="password"],
-.form-group>input[type="search"],
-.form-group>input[type="tel"],
-.form-group>input[type="text"],
-.form-group>input[type="color"] {
+.form-group .form-group-text:focus,
+.form-group .button:focus,
+.form-group>select:focus,
+.form-group>input[type="email"]:focus,
+.form-group>input[type="number"]:focus,
+.form-group>input[type="password"]:focus,
+.form-group>input[type="search"]:focus,
+.form-group>input[type="tel"]:focus,
+.form-group>input[type="text"]:focus,
+.form-group>input[type="color"]:focus {
   z-index: 2;
 }
 
-.form-group>.form-group-text:hover,
+.form-group .form-group-text:hover,
+.form-group .button:hover,
+.form-group>select:hover,
 .form-group>input[type="email"]:hover,
 .form-group>input[type="number"]:hover,
 .form-group>input[type="password"]:hover,
@@ -1233,28 +1243,9 @@ input[type="range"]:disabled::-moz-range-progress {
   z-index: 3;
 }
 
-.form-group>.form-group-text:active,
-.form-group>.form-group-text:focus,
-.form-group>input[type="email"]:active,
-.form-group>input[type="email"]:focus,
-.form-group>input[type="number"]:active,
-.form-group>input[type="number"]:focus,
-.form-group>input[type="password"]:active,
-.form-group>input[type="password"]:focus,
-.form-group>input[type="search"]:active,
-.form-group>input[type="search"]:focus,
-.form-group>input[type="tel"]:active,
-.form-group>input[type="tel"]:focus,
-.form-group>input[type="text"]:active,
-.form-group>input[type="text"]:focus,
-.form-group>input[type="color"]:active,
-.form-group>input[type="color"]:focus {
-  z-index: 4;
-}
-
-.form-group>.form-group-text:first-child,
-.form-group>button:first-child,
-.form-group>.button:first-child,
+.form-group .form-group-text:first-child,
+.form-group .button:first-child,
+.form-group>select:first-child,
 .form-group>input[type="email"]:first-child,
 .form-group>input[type="number"]:first-child,
 .form-group>input[type="password"]:first-child,
@@ -1265,9 +1256,9 @@ input[type="range"]:disabled::-moz-range-progress {
   border-radius: var(--theme-radius) 0 0 var(--theme-radius);
 }
 
-.form-group>.form-group-text:last-child,
-.form-group>button:last-child,
-.form-group>.button:last-child,
+.form-group .form-group-text:last-child,
+.form-group .button:last-child,
+.form-group>select:last-child,
 .form-group>input[type="email"]:last-child,
 .form-group>input[type="number"]:last-child,
 .form-group>input[type="password"]:last-child,
diff --git a/src/style-guide.html b/src/style-guide.html
new file mode 100644
index 00000000..9d34e005
--- /dev/null
+++ b/src/style-guide.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en" style="background-color: rgb(38, 40, 49)" class="is-theme-style-dark">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="theme-color" content="#262831">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <title>Style Guide</title>
+  <!-- css-block -->
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/variables.css">
+  <link rel="stylesheet" href="css/utilities.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/layout.css">
+  <link rel="stylesheet" href="css/edge.css">
+  <link rel="stylesheet" href="css/animation.css">
+  <link rel="stylesheet" href="css/fonts.css">
+  <link rel="stylesheet" href="css/icons.css">
+  <link rel="stylesheet" href="css/state.css">
+  <link rel="stylesheet" href="css/typography.css">
+  <link rel="stylesheet" href="css/spacing.css">
+  <link rel="stylesheet" href="css/button.css">
+  <link rel="stylesheet" href="css/form.css">
+  <link rel="stylesheet" href="css/shade.css">
+  <link rel="stylesheet" href="css/modal.css">
+  <link rel="stylesheet" href="css/tip.css">
+  <link rel="stylesheet" href="css/menu.css">
+  <link rel="stylesheet" href="css/header.css">
+  <link rel="stylesheet" href="css/date.css">
+  <link rel="stylesheet" href="css/clock.css">
+  <link rel="stylesheet" href="css/greeting.css">
+  <link rel="stylesheet" href="css/transitional.css">
+  <link rel="stylesheet" href="css/search.css">
+  <link rel="stylesheet" href="css/background.css">
+  <link rel="stylesheet" href="css/group.css">
+  <link rel="stylesheet" href="css/link.css">
+  <link rel="stylesheet" href="css/auto-suggest.css">
+  <link rel="stylesheet" href="css/fontawesome.css">
+  <!-- end-css-block -->
+</head>
+
+<body>
+
+  <main class="layout my-5">
+    <p>Buttons</p>
+    <div class="button-wrap">
+      <button class="button button-small mb-0" tabindex="1">Small</button>
+    </div>
+    <div class="button-wrap">
+      <button class="button mb-0" tabindex="1">Medium</button>
+    </div>
+    <div class="button-wrap">
+      <button class="button button-large mb-0" tabindex="1">Large</button>
+    </div>
+    <hr>
+    <p>Form</p>
+    <div class="input-wrap">
+      <input id="style-guide-checkbox" type="checkbox" tabindex="1">
+      <label for="style-guide-checkbox">Checkbox</label>
+    </div>
+    <div class="input-wrap">
+      <input id="style-guide-radio-1" type="radio" name="style-guide-radio" tabindex="1">
+      <label for="style-guide-radio-1">Radio 1</label>
+    </div>
+    <div class="input-wrap">
+      <input id="style-guide-radio-2" type="radio" name="style-guide-radio" tabindex="1">
+      <label for="style-guide-radio-2">Radio 2</label>
+    </div>
+    <div class="input-wrap">
+      <input id="style-guide-radio-3" type="radio" name="style-guide-radio" tabindex="1">
+      <label for="style-guide-radio-3">Radio 3</label>
+    </div>
+    <div class="input-wrap">
+      <label for="input-text">Input Text</label>
+      <input id="input-text" class="mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="placeholder" tabindex="1">
+    </div>
+    <div class="input-wrap">
+      <label for="textarea">Textarea</label>
+      <textarea id="textarea" class="textarea mb-0" spellcheck="false" placeholder="placeholder" tabindex="1"></textarea>
+    </div>
+    <div class="input-wrap">
+      <label for="input-range">Input Range</label>
+      <input id="input-range" class="mb-0" type="range" min="1" max="100" value="1" tabindex="1">
+    </div>
+    <div class="input-wrap">
+      <label for="input-colour">Input Colour</label>
+      <input id="input-colour" class="mb-0" type="color" value="#000000" tabindex="1">
+    </div>
+    <div class="input-wrap">
+      <label for="select-1">Select</label>
+      <select id="select-1" class="mb-0" tabindex="1">
+        <option>Option 1</option>
+        <option>Option 2</option>
+        <option>Option 3</option>
+      </select>
+    </div>
+    <div class="input-wrap">
+      <label for="form-group-1">Form Group</label>
+      <div class="form-group mb-0">
+        <input id="form-group-1" class="form-group-item-half mb-0" type="text" placeholder="Placeholder" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+        <input id="form-group-3" class="form-group-item-half mb-0" type="color" value="#000000" tabindex="1">
+        <button class="button mb-0" tabindex="1">Button</button>
+        <select id="select-2" class="mb-0" tabindex="1">
+          <option>Option 1</option>
+          <option>Option 2</option>
+          <option>Option 3</option>
+        </select>
+        <div class="form-group-text" tabindex="1">Form Group Text</div>
+      </div>
+    </div>
+  </main>
+
+</body>
+
+</html>