Finished index of all variables in README.md and added missing variables

rbouma · Aug 8, 2018 · 3fa60a5 · 3fa60a5
1 parent 9817467
commit 3fa60a5
Show file tree

Hide file tree

Showing 10 changed files with 726 additions and 147 deletions.
diff --git a/README.md b/README.md
diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss
@@ -12,4 +12,6 @@
 @import 'boilerplate/inputs';
 @import 'boilerplate/forms';
 @import 'boilerplate/menu';
-@import 'boilerplate/product';
+@import 'boilerplate/header';
+@import 'boilerplate/product';
+@import 'boilerplate/footer';
diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss
@@ -56,4 +56,42 @@ button {
   }
 }
 
+.action {
+  &.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;
+    }
+
+    &.tocart {
+      font-size: $button-primary-font-size;
+    }
+
+    &#product-addtocart-button {
+      font-size: $button-primary-font-size;
+    }
+
+  }
+
+  &.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
@@ -69,6 +69,13 @@ html, body {
     color: $font-default-link-color;
     text-decoration: $font-default-link-text-decoration;
 
+    &:visited {
+      font-size: $font-default-font-size;
+      font-weight: $font-default-link-font-weight;
+      color: $font-default-link-color;
+      text-decoration: $font-default-link-text-decoration;
+    }
+
     &:hover {
       font-weight: $font-default-link-hover-font-weight;
       color: $font-default-link-hover-color;
@@ -108,4 +115,19 @@ html, body {
       color: $font-filter-options-title-color;
     }
   }
+
+  .product-item-name {
+    > a {
+      color: $font-product-item-name-color;
+      font-size: $font-product-item-name-font-size;
+      font-weight: $font-product-item-name-font-weight;
+      line-height: $font-product-item-name-line-height;
+      margin: $font-product-item-name-margin;
+
+
+      &:visited {
+        color: $font-product-item-name-color;
+      }
+    }
+  }
 }
diff --git a/src/scss/boilerplate/_footer.scss b/src/scss/boilerplate/_footer.scss
@@ -0,0 +1,25 @@
+.page-footer {
+  background: $footer-background;
+
+  .footer {
+    a {
+      color: $font-footer-link-color;
+      text-decoration: $font-footer-link-text-decoration;
+      font-weight: $font-footer-link-font-weight;
+
+      &:hover {
+        color: $font-footer-link-hover-color;
+        font-weight: $font-footer-link-hover-font-weight;
+        text-decoration: $font-footer-link-hover-text-decoration;
+      }
+    }
+
+    &.content {
+      margin: $footer-content-margin;
+      padding: $footer-content-padding;
+      color: $footer-content-color;
+      border-color: $footer-line-color;
+    }
+  }
+
+}
diff --git a/src/scss/boilerplate/_header.scss b/src/scss/boilerplate/_header.scss
@@ -0,0 +1,52 @@
+.page-header {
+  background: $header-background-color;
+  color: $header-text-color;
+
+  .panel {
+    &.wrapper {
+      border-color: $header-panel-bottom-border-color;
+      background: $header-panel-background-color;
+    }
+  }
+  .header {
+    a {
+      color: $font-header-link-color;
+      text-decoration: $font-header-link-text-decoration;
+      font-weight: $font-header-link-font-weight;
+
+      &:hover {
+        color: $font-header-link-hover-color;
+        font-weight: $font-header-link-hover-font-weight;
+        text-decoration: $font-header-link-hover-text-decoration;
+      }
+    }
+
+    &.content {
+      background: $header-background-color;
+      color: $header-text-color;
+      padding: $header-padding;
+    }
+
+    &.panel {
+      background: $header-panel-background-color;
+      color: $header-panel-text-color;
+      padding: $header-panel-padding;
+    }
+
+    .links {
+      li {
+        a {
+          color: $font-header-link-color;
+          text-decoration: $font-header-link-text-decoration;
+          font-weight: $font-header-link-font-weight;
+
+          &:hover {
+            color: $font-header-link-hover-color;
+            font-weight: $font-header-link-hover-font-weight;
+            text-decoration: $font-header-link-hover-text-decoration;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss
@@ -116,12 +116,48 @@ select {
 }
 
 textarea {
-  height: $input-textarea-default-height;
-  resize: $input-textarea-default-resize;
+  resize: $input-textarea-resize;
+  background-color: $input-textarea-background-color;
+  border-color: $input-textarea-border-color;
+  border: $input-textarea-border;
+  border-radius: $input-textarea-border-radius;
+  height: $input-textarea-height;
+  min-height: $input-textarea-min-height;
+  width: $input-textarea-width;
+  margin: $input-textarea-margin;
+  padding: $input-textarea-padding;
+  vertical-align: $input-textarea-vertical-align;
+  font-size: $input-textarea-font-size;
+  color: $input-textarea-color;
+  font-family: $input-textarea-font-family;
+  font-weight: $input-textarea-font-weight;
+  font-style: $input-textarea-font-style;
+  line-height: $input-textarea-line-height;
+
+  &:focus {
+    background-color: $input-textarea-focus-background-color;
+    border: $input-textarea-focus-border;
+    color: $input-textarea-focus-color;
+    font-style: $input-textarea-focus-font-style;
+  }
+
+  &:disabled {
+    background-color: $input-textarea-disabled-background-color;
+    border: $input-textarea-disabled-border;
+    opacity: $input-textarea-disabled-opacity;
+    color: $input-textarea-disabled-color;
+    font-style: $input-textarea-disabled-font-style;
+  }
+
+  &::placeholder {
+    opacity: 1;
+    color: $input-select-placeholder-color !important;
+    font-style: $input-select-placeholder-font-style;
+  }
 }
 
 input[type="checkbox"] {
-  width: $input-choice-default-width;
+  width: $input-choice-width;
 }
 
 .limiter-options {
@@ -139,6 +175,21 @@ input[type="checkbox"] {
   font-weight: $input-limiter-font-weight;
   font-style: $input-limiter-font-style;
   line-height: $input-limiter-line-height;
+
+  &:focus {
+    background-color: $input-limiter-focus-background-color;
+    border: $input-limiter-focus-border;
+    color: $input-limiter-focus-color;
+    font-style: $input-limiter-focus-font-style;
+  }
+
+  &:disabled {
+    background-color: $input-limiter-disabled-background-color;
+    border: $input-limiter-disabled-border;
+    opacity: $input-limiter-disabled-opacity;
+    color: $input-limiter-disabled-color;
+    font-style: $input-limiter-disabled-font-style;
+  }
 }
 
 .sorter-options {
@@ -173,4 +224,9 @@ input[type="checkbox"] {
     color: #2e2e2e;
     height: 45px;
   }
+}
+
+/* Search input icon */
+.block-search .action.search {
+  height: $input-default-height;
 }
diff --git a/src/scss/boilerplate/_menu.scss b/src/scss/boilerplate/_menu.scss
@@ -9,6 +9,7 @@
       a {
         font-size: $menu-bar-menu-item-font-size;
         font-weight: $menu-bar-menu-item-font-weight;
+        font-family: $menu-bar-menu-item-font-family;
         color: $menu-bar-menu-item-color;
 
         &:hover {

diff --git a/src/scss/boilerplate/_swatches.scss b/src/scss/boilerplate/_swatches.scss
@@ -1,6 +1,7 @@
 .swatch-option {
   background: $swatch-default-background;
   border: $swatch-default-border;
+  border-radius: $swatch-default-border-radius;
   color: $swatch-default-color;
   font-size: $swatch-default-font-size;
   font-weight: $swatch-default-font-weight;
@@ -48,6 +49,7 @@
     .swatch-option {
       background: $swatch-default-background;
       border: $swatch-default-border;
+      border-radius: $swatch-default-border-radius;
       color: $swatch-default-color;
       font-size: $swatch-default-font-size;
       font-weight: $swatch-default-font-weight;