Added more form styling

rbouma · Jul 18, 2018 · 31bfb0b · 31bfb0b
1 parent 53bff5f
commit 31bfb0b
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 54 deletions.
diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss
@@ -9,4 +9,5 @@
 @import 'boilerplate/fonts';
 @import 'boilerplate/buttons';
 @import 'boilerplate/inputs';
-@import 'boilerplate/forms';
+@import 'boilerplate/forms';
+@import 'boilerplate/product';
diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss
@@ -30,6 +30,15 @@ button {
         border: $button-primary-hover-border;
         color: $button-primary-hover-color;
       }
+
+      &.tocart {
+        font-size: $button-primary-font-size;
+      }
+
+      &#product-addtocart-button {
+        font-size: $button-primary-font-size;
+      }
+
     }
 
     &.secondary {
@@ -47,3 +56,4 @@ button {
   }
 }
 
+
diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss
@@ -35,6 +35,7 @@ html, body {
     font-size: $font-default-font-size;
     font-weight: $font-default-font-weight;
     color: $font-default-color;
+    line-height: $font-default-font-line-height;
   }
 
   a {

diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss
@@ -1,4 +1,4 @@
-input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
+input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
   background-color: $input-default-background-color;
   border: $input-default-border;
   border-radius: $input-default-border-radius;
@@ -46,72 +46,79 @@ input[type="checkbox"] {
   width: $input-choice-default-width;
 }
 
-/****
-** Form
-****/
-
-.form {
-
   /****
   ** Fieldset
   ****/
 
-  .fieldset {
-    border: $form-fieldset-border;
-    margin: $form-fieldset-margin;
-    padding: $form-fieldset-padding;
-
-    > legend.legend {
-      color: $form-fieldset-legend-color;
-      font-size: $form-fieldset-legend-font-size;
-      font-family: $form-fieldset-legend-font-family;
-      font-weight: $form-fieldset-legend-font-weight;
-      font-style: $form-fieldset-legend-font-style;
-      line-height: $form-fieldset-legend-line-height;
-      margin: $form-fieldset-legend-margin;
-      padding: $form-fieldset-legend-padding;
-      width: $form-fieldset-legend-width;
+.fieldset {
+  border: $form-fieldset-border;
+  margin: $form-fieldset-margin;
+  padding: $form-fieldset-padding;
+
+  > legend.legend {
+    color: $form-fieldset-legend-color;
+    font-size: $form-fieldset-legend-font-size;
+    font-family: $form-fieldset-legend-font-family;
+    font-weight: $form-fieldset-legend-font-weight;
+    font-style: $form-fieldset-legend-font-style;
+    line-height: $form-fieldset-legend-line-height;
+    margin: $form-fieldset-legend-margin;
+    padding: $form-fieldset-legend-padding;
+    width: $form-fieldset-legend-width;
+  }
+
+  > div.field {
+    margin: $form-fieldset-field-margin;
+    box-sizing: $form-fieldset-field-box-sizing;
+
+    &:not(.choice) {
+      > label.label {
+        padding: $form-fieldset-field-label-padding;
+        text-align: $form-fieldset-field-label-text-align;
+        width: $form-fieldset-field-label-width;
+        float: $form-fieldset-field-label-float;
+        font-weight: $form-fieldset-field-label-font-weight;
+      }
+
+      > legend.label {
+        padding: $form-fieldset-field-label-padding;
+        text-align: $form-fieldset-field-label-text-align;
+        width: $form-fieldset-field-label-width;
+        float: $form-fieldset-field-label-float;
+        font-weight: $form-fieldset-field-label-font-weight;
+      }
+
+      > div.control {
+        width: $form-fieldset-field-control-width;
+        float: $form-fieldset-field-control-float;
+      }
     }
 
-    > div.field {
-      margin: $form-fieldset-field-margin;
-      box-sizing: $form-fieldset-field-box-sizing;
-
-      &:not(.choice) {
-        > label.label {
-          padding: $form-fieldset-field-label-padding;
-          text-align: $form-fieldset-field-label-text-align;
-          width: $form-fieldset-field-label-width;
-          float: $form-fieldset-field-label-float;
-          font-weight: $form-fieldset-field-label-font-weight;
-        }
-        > div.control {
-          width: $form-fieldset-field-control-width;
-          float: $form-fieldset-field-control-float;
-        }
+    &.choice {
+      &:before {
+        width: $form-fieldset-field-choice-before-width;
+        padding: $form-fieldset-field-choice-before-padding;
+        height: $form-fieldset-field-choice-before-height;
+        float: $form-fieldset-field-choice-before-float;
       }
 
-      &.choice {
-        &:before {
-          width: $form-fieldset-field-choice-before-width;
-          padding: $form-fieldset-field-choice-before-padding;
-          height: $form-fieldset-field-choice-before-height;
-          float: $form-fieldset-field-choice-before-float;
-        }
-
-        label.label {
-          margin: $form-fieldset-field-choice-label-margin;
-        }
+      label.label {
+        margin: $form-fieldset-field-choice-label-margin;
       }
     }
   }
+}
 
+/****
+** Form
+****/
+
+form {
   div.actions-toolbar {
-    margin-left: $form-action-toolbar-margin !important;
+    margin: $form-action-toolbar-margin;
   }
 }
 
-
 /****
 ** Sidebar input
 ****/

diff --git a/src/scss/boilerplate/_product.scss b/src/scss/boilerplate/_product.scss
@@ -0,0 +1,8 @@
+.price-wrapper {
+  span.price {
+    font-size: $font-default-font-size;
+    font-weight: $font-default-font-weight;
+    line-height: $font-default-font-line-height;
+    color: $font-default-color;
+  }
+}
diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
@@ -24,13 +24,15 @@ $font-default-font-family-primary: 'Montserrat';
 $font-default-font-family-secondary: 'Open Sans';
 $font-default-font-size: 12px;
 $font-default-font-weight: 400;
+$font-default-font-line-height: 18px;
 $font-default-color: black;
 $font-default-heading-color: $primary-color;
 
 $font-family: $font-default-font-family-primary;
 $font-family-headings: $font-default-font-family-secondary;
 $font-family-headings-color: blue;
 $font-family-headings-weight: 600;
+$font-family-heading-line-height: 1.2;
 
 $font-default-link-color: red;
 $font-default-link-hover-color: red;
@@ -103,7 +105,7 @@ $input-default-font-size: $font-default-font-size;
 $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-font-style: normal;
 $input-default-line-height: 36px;
 
 /* Placeholder */
@@ -174,4 +176,7 @@ $form-fieldset-field-control-width: auto;
 $form-fieldset-field-control-float: none;
 
 /* Action toolbar */
-$form-action-toolbar-margin: 0;
+$form-action-toolbar-margin: 20px 0;
+$form-action-toolbar-padding: 0;
+
+