continue implementation

button.scss

@@ -11,7 +11,7 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
     color: var(--text-on-background-color-2);
     padding: 0 1rem 0 1rem;
     flex-grow: 0;
-    height: 32px;
+    height: 30px;
     //border: none;
     border: 1px solid var(--box-border);
     box-shadow: none;

grid.scss

@@ -15,9 +15,15 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    flex-grow: 1;
 
     .row {
         flex: 1 1 auto;
+        flex-direction: column;
+    }
+
+    .col-xs-12 {
+        flex-basis: 0;
     }
 }
 
@@ -81,7 +87,6 @@
 .col-xs-11,
 .col-xs-12 {
     box-sizing: border-box;
-    flex: 0 0 auto;
     padding-right: 1rem;
 }
 
@@ -242,6 +247,7 @@
     order: 1;
 }
 
+// is >= sm
 @media only screen and (min-width: 48em) {
     .sm-hidden {
         display: block;
@@ -427,7 +433,18 @@
     }
 }
 
+// is >= md
 @media only screen and (min-width: 62em) {
+    .col-simple {
+        .row {
+            flex-direction: row;
+        }
+
+        .col-xs-12 {
+            flex-basis: 100%;
+        }
+    }
+
     .md-hidden {
         display: block;
     }
@@ -612,6 +629,7 @@
     }
 }
 
+// is >= lg
 @media only screen and (min-width: 75em) {
     .lg-hidden {
         display: block;

input.scss

@@ -87,7 +87,7 @@ input[type="email"],
 input[type="date"],
 input[type="number"],
 input[type="datetime-local"] {
-    height: 2rem;
+    height: 30px;
     padding-left: .5rem;
 }
 
@@ -318,7 +318,7 @@ textarea, .textarea {
     overflow: auto;
     resize: both;
     box-sizing: border-box;
-    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+    padding: .3rem .3rem .3rem .5rem;
 }
 
 label.radio, label.checkbox {
@@ -421,7 +421,7 @@ input[type="range"] {
         box-sizing: border-box;
         display: inline-block;
         background: var(--button-colored-background);
-        height: 2rem;
+        height: 30px;
         font-size: 1rem;
         min-width: 40px;
         border-left: solid 1px var(--input-border);
@@ -451,7 +451,6 @@ input[type="range"] {
 
     input {
         box-sizing: border-box;
-        font-size: 1rem;
 
         position: relative;
         vertical-align: middle;

layout.scss

@@ -44,7 +44,7 @@ div.sticky, section.sticky {
     flex-wrap: wrap;
 
     > *:not(label) {
-        flex: 1;
+        flex: 0 1 auto;
     }
 
     & + * {
@@ -52,6 +52,7 @@ div.sticky, section.sticky {
     }
 
     label {
+        font-size: .9rem;
         flex: 0 0 100%;
     }
 

tab.scss

@@ -37,6 +37,9 @@
     }
 
     .tab-content {
+        display: flex;
+        flex: 1;
+
         > input {
             display: none;
         }
@@ -46,7 +49,9 @@
         }
 
         > input:checked + div {
-            display: inherit;
+            display: flex;
+            flex: 1;
+            flex-direction: column;
         }
     }
 }
@@ -67,12 +72,6 @@
             background: var(--button-colored-background);
         }
 
-        /*
-        .active label {
-            border: 1px solid var(--box-border);
-        }
-        */
-
         li {
             margin: 0 5px 0 0;
         }
@@ -110,6 +109,10 @@
 }
 
 .tab-2 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
     .tab-links {
         label {
             padding: 5px 10px 5px 10px;