Added basic variables for buttons primary/secondary, headings, paragr…

…aphs, fonts and inputs
rbouma · Jun 19, 2018 · 841a309 · 841a309
1 parent a72b7b7
commit 841a309
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 5 deletions.
diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss
@@ -6,4 +6,6 @@
  */
 
 @import 'boilerplate/variables';
-@import 'boilerplate/buttons';
+@import 'boilerplate/fonts';
+@import 'boilerplate/buttons';
+@import 'boilerplate/forms';
diff --git a/src/scss/boilerplate/_base.scss b/src/scss/boilerplate/_base.scss
diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss
@@ -8,11 +8,42 @@
 button {
   background: $button-default-background-color;
   border: $button-default-border;
+  border-radius: $button-default-border-radius;
+  transition: $button-default-transition;
+  color: $button-default-color;
 
   &.action {
+    &:hover {
+      background: $button-default-hover-background-color;
+      border: $button-default-hover-border;
+    }
     &.primary {
       background: $button-primary-background-color;
       border: $button-primary-border;
+      color: $button-primary-color;
+      padding: $button-primary-padding;
+      font-size: $button-primary-font-size;
+      text-transform: $button-primary-text-transform;
+
+      &:hover {
+        background: $button-primary-hover-background-color;
+        border: $button-primary-hover-border;
+        color: $button-primary-hover-color;
+      }
+    }
+
+    &.secondary {
+      background: $button-secondary-background-color;
+      border: $button-secondary-border;
+      color: $button-secondary-color;
+      font-size: $button-secondary-font-size;
+
+      &:hover {
+        background: $button-secondary-hover-background-color;
+        border: $button-secondary-hover-border;
+        color: $button-secondary-hover-color;
+      }
     }
   }
-}
+}
+
diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss
@@ -0,0 +1,51 @@
+html, body {
+  font-family: $font-family;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $font-family-headings;
+    color: $font-family-headings-color;
+    font-weight: $font-family-headings-weight;
+  }
+
+  h1 {
+    font-size: 36px;
+  }
+
+  h2 {
+    font-size: 28px;
+  }
+
+  h3 {
+    font-size: 24px;
+  }
+
+  h4 {
+    font-size: 18px;
+  }
+
+  h5 {
+    font-size: 16px;
+  }
+
+  h6 {
+    font-size: 14px;
+  }
+
+  p {
+    font-size: $font-default-font-size;
+    font-weight: $font-default-font-weight;
+    color: $font-default-color;
+  }
+
+  a {
+    font-size: $font-default-font-size;
+    font-weight: $font-default-link-font-weight;
+    color: $font-default-link-color;
+    text-decoration: $font-default-link-decoration;
+
+    &:hover {
+      font-weight: $font-default-link-hover-font-weight;
+      color: $font-default-link-hover-color;
+    }
+  }
+}
diff --git a/src/scss/boilerplate/_forms.scss b/src/scss/boilerplate/_forms.scss
@@ -0,0 +1,10 @@
+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: $input-default-color;
+  height: $input-default-height;
+}
diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
@@ -5,11 +5,93 @@
  * License: MIT
  */
 
+/**
+* Color pallete
+*/
+
+$primary-color: red;
+$secondary-color: orange;
+$alt-primary-color: blue;
+$alt-secondary-color: magenta;
+
+$color-primary-gradient-color: linear-gradient(red, orange);
+$color-secondary-gradient-color: linear-gradient(magenta, blue);
+
+/**
+* Fonts
+*/
+$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-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-default-link-color: red;
+$font-default-link-hover-color: red;
+$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: blue;
-$button-default-border: 1px solid yellow;
+$button-default-background-color: $primary-color;
+$button-default-border: 1px solid $secondary-color;
+$button-default-border-radius: 2px;
+$button-default-color: $alt-primary-color;
+$button-default-font-size: 12px;
+$button-default-font-weight: 400;
+$button-default-transition: all .34s ease-in-out;
+$button-default-padding: 10px 20px;
+$button-default-text-transform: uppercase;
+
+/* Button default states */
+$button-default-hover-background-color: $alt-primary-color;
+$button-default-hover-border: 1px solid $alt-secondary-color;
+$button-default-hover-color: white;
 
+/* Button primary */
 $button-primary-background-color: $button-default-background-color;
-$button-primary-border: $button-default-border;
+$button-primary-border: $button-default-border;
+$button-primary-color: $font-default-color;
+$button-primary-font-weight: 600;
+$button-primary-font-size: $button-default-font-size;
+$button-primary-transition: $button-default-transition;
+$button-primary-padding: $button-default-padding;
+$button-primary-text-transform: $button-default-text-transform;
+
+/* Button primary hover states */
+$button-primary-hover-background-color: $button-default-hover-background-color;
+$button-primary-hover-border: $button-default-hover-border;
+$button-primary-hover-color: $button-default-hover-color;
+
+/* Button secondary */
+$button-secondary-background-color: white;
+$button-secondary-border: 1px solid blue;
+$button-secondary-font-size: $button-default-font-size;
+$button-secondary-padding: 20px;
+$button-secondary-transition: $button-default-transition;
+$button-secondary-color: $alt-secondary-color;
+$button-secondary-text-transform: $button-default-text-transform;
+
+/* Button secondary hover states */
+$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;
+$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-font-weight: $font-default-font-weight;
+