Added input styling

rbouma · Jul 18, 2018 · e8d5c1e · e8d5c1e
1 parent 841a309
commit e8d5c1e
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 18 deletions.
diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss
@@ -8,4 +8,5 @@
 @import 'boilerplate/variables';
 @import 'boilerplate/fonts';
 @import 'boilerplate/buttons';
+@import 'boilerplate/inputs';
 @import 'boilerplate/forms';
diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss
@@ -1,10 +1,64 @@
-input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"], select {
+input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
+  background-color: $input-default-background-color;
   border: $input-default-border;
   border-radius: $input-default-border-radius;
+  height: $input-default-height;
+  width: $input-default-width;
+  margin: $input-default-margin;
   padding: $input-default-padding;
-  line-height: $input-default-line-height;
+  vertical-align: $input-default-vertical-align;
   font-size: $input-default-font-size;
-  font-weight: $input-default-font-weight;
   color: $input-default-color;
-  height: $input-default-height;
+  font-family: $input-default-font-family;
+  font-weight: $input-default-font-weight;
+  font-style: $input-default-font-style;
+  line-height: $input-default-line-height;
+
+  &:focus {
+    background-color: $input-default-focus-background-color;
+    border: $input-default-focus-border;
+    color: $input-default-focus-color;
+    font-style: $input-default-focus-font-style;
+  }
+
+  &:disabled {
+    background-color: $input-default-disabled-background-color;
+    border: $input-default-disabled-border;
+    opacity: $input-default-disabled-opacity;
+    color: $input-default-disabled-color;
+    font-style: $input-default-disabled-font-style;
+  }
+
+  &::placeholder {
+    opacity: 1;
+    color: $input-default-placeholder-color !important;
+    font-style: $input-default-placeholder-font-style;
+  }
+
+}
+
+textarea {
+  height: $input-textarea-default-height;
+  resize: $input-textarea-default-resize;
+}
+
+input[type="checkbox"] {
+  width: $input-choice-default-width;
+}
+
+/****
+** Sidebar input
+****/
+
+.sidebar {
+  input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"], select {
+    border: $input-default-border;
+    border-radius: $input-default-border-radius;
+    padding: $input-default-padding;
+    line-height: $input-default-line-height;
+    font-size: $input-default-font-size;
+    font-weight: $input-default-font-weight;
+    color: #2e2e2e;
+    height: 45px;
+  }
 }
diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss
diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
@@ -5,9 +5,9 @@
  * License: MIT
  */
 
-/**
-* Color pallete
-*/
+/*
+ * Color pallete
+ */
 
 $primary-color: red;
 $secondary-color: orange;
@@ -17,9 +17,9 @@ $alt-secondary-color: magenta;
 $color-primary-gradient-color: linear-gradient(red, orange);
 $color-secondary-gradient-color: linear-gradient(magenta, blue);
 
-/**
-* Fonts
-*/
+/*
+ * Fonts
+ */
 $font-default-font-family-primary: 'Montserrat';
 $font-default-font-family-secondary: 'Open Sans';
 $font-default-font-size: 12px;
@@ -38,7 +38,7 @@ $font-default-link-decoration: underline;
 $font-default-link-font-weight: $font-default-font-weight;
 $font-default-link-hover-font-weight: 600;
 
-/**
+/*
  * Buttons
  */
 $button-default-background-color: $primary-color;
@@ -85,13 +85,49 @@ $button-secondary-hover-background-color: black;
 $button-secondary-hover-border: red;
 $button-secondary-hover-color: red;
 
-/* Inputs & Forms */
-$input-default-padding: 15px 15px;
-$input-default-height: 40px;
-$input-default-line-height: 35px;
+/*
+ * Inputs & Forms
+ */
+
+/* [input-text|select|textarea|input-radio|input-checkbox] */
+$input-default-background-color: white;
+$input-default-border-color: gray;
+$input-default-border: 1px solid $input-default-border-color;
+$input-default-border-radius: 3px;
+$input-default-height: 36px;
+$input-default-width: 100%;
+$input-default-margin: 0;
+$input-default-padding: 0 9px;
+$input-default-vertical-align: middle;
 $input-default-font-size: $font-default-font-size;
-$input-default-border: 1px solid #000;
-$input-default-border-radius: 15px;
-$input-default-color: #2e2e2e;
+$input-default-color: black;
+$input-default-font-family: $font-default-font-family-secondary;
 $input-default-font-weight: $font-default-font-weight;
+$input-default-font-style: italic;
+$input-default-line-height: 36px;
+
+/* Placeholder */
+$input-default-placeholder-color: #84929F;
+$input-default-placeholder-font-style: $input-default-font-style;
+
+/* Disabled state */
+$input-default-disabled-background-color: $input-default-background-color;
+$input-default-disabled-border: $input-default-border;
+$input-default-disabled-opacity: .2;
+$input-default-disabled-color: $input-default-color;
+$input-default-disabled-font-style: $input-default-font-style;
+
+/* Focus state */
+$input-default-focus-background-color: $input-default-background-color;
+$input-default-focus-border: $input-default-border;
+$input-default-focus-color: $input-default-color;
+$input-default-focus-font-style: $input-default-font-style;
+
+/* Textarea */
+$input-textarea-default-height: auto;
+$input-textarea-default-resize: vertical;
+
+/* Checkbox / Radio */
+$input-choice-default-width: auto;
+