fixing file input alignment, distributing reset components

jamiewilson · Oct 5, 2015 · 11e5b8b · 11e5b8b
1 parent 7c447e8
commit 11e5b8b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 82 deletions.
diff --git a/_forms.scss b/_forms.scss
@@ -1,3 +1,24 @@
+input,
+select,
+textarea,
+fieldset,
+button {
+  font-family: inherit;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0;
+}
+
+label { vertical-align: middle; }
+
+select { -webkit-appearance: none; }
+
+textarea {
+  line-height: 1.75;
+  padding: .5rem .5rem;
+  vertical-align: top;
+}
+
 .input[type=button],
 .input[type=date],
 .input[type=datetime],
@@ -85,10 +106,11 @@
 }
 
 //====================================================
-//  Checkbox
+//  Checkbox/Radio
 //====================================================
 
-.input[type=checkbox] {
+.input[type=checkbox],
+.input[type=radio] {
   display: inline;
 }
 
@@ -181,6 +203,7 @@ input[type=color]::-webkit-color-swatch-wrapper {
 .input[type=file] {
   font-size: 0.75rem;
   background-color: $silver;
+  display: block;
 }
 
 //====================================================

diff --git a/_reset.scss b/_reset.scss
@@ -14,82 +14,3 @@
 body { margin: 0 }
 img  { width: 100% }
 svg  { max-height: 100% }
-
-input,
-select,
-textarea,
-fieldset,
-button {
-  font-family: inherit;
-  display: inherit;
-  font-size: 1rem;
-  border: none;
-  border-radius: 0;
-}
-
-label { vertical-align: middle; }
-
-select { -webkit-appearance: none; }
-
-textarea {
-  line-height: 1.75;
-  padding: .5rem .5rem;
-  vertical-align: top;
-}
-
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  max-width: 100%;
-  width: 100%;
-}
-
-th {
-  text-align: left;
-  font-weight: bold;
-}
-
-th,
-td {
-  padding: .25rem 1rem;
-  line-height: inherit;
-}
-
-th { vertical-align: bottom }
-td { vertical-align: top }
-
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 400;
-  margin-bottom: 1rem;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-li ul,
-li ol {
-  margin: 0 1rem;
-}
-
-ul {
-  list-style-type: disc;
-}
-
-ol {
-  list-style-type: decimal;
-}
-
-ol ol {
-  list-style: lower-alpha;
-}
-
-ol ol ol {
-  list-style: lower-roman;
-}
-
-ol ol ol ol {
-  list-style: lower-alpha;
-}
diff --git a/_typography.scss b/_typography.scss
@@ -20,6 +20,12 @@ $h6: $base-font-size !default;
   color: $accent;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  margin-bottom: 1rem;
+}
+
+
 h1, .h1 { font-size: $h1; line-height: 1.2; }
 h2, .h2 { font-size: $h2; line-height: 1.3; }
 h3, .h3 { font-size: $h3; line-height: 1.4; }
@@ -54,6 +60,22 @@ h3 a, .h3 a {
   text-decoration: underline;
 }
 
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+//====================================================
+//  Lists
+//====================================================
+
+li ul, li ol { margin: 0 1rem; }
+ul { list-style-type: disc; }
+ol { list-style-type: decimal; }
+ol ol { list-style: lower-alpha; }
+ol ol ol { list-style: lower-roman; }
+ol ol ol ol { list-style: lower-alpha; }
+
 //====================================================
 //  Code
 //====================================================

diff --git a/_variables.scss b/_variables.scss
@@ -11,7 +11,7 @@ $base-font-size: 1rem;
 $base-line-height: 1.6;
 
 $h1: $base-font-size * 2.25;
-$h2: $base-font-size * 1.75t;
+$h2: $base-font-size * 1.75;
 $h3: $base-font-size * 1.5;
 $h4: $base-font-size * 1.25;
 $h5: $base-font-size * 1.125;