Added swatches, fixed small issue with the loading of css overwrites …

…of blank theme and added product related variables/overwrites
rbouma · Jul 19, 2018 · 6474a60 · 6474a60
1 parent 31bfb0b
commit 6474a60
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 7 deletions.
diff --git a/Magento_Theme/layout/default_head_blocks.xml b/Magento_Theme/layout/default_head_blocks.xml
@@ -7,7 +7,7 @@
 -->
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
-        <css src="css/style.css"/>
+        <css src="css/style.css" media="all"/>
         <meta name="format-detection" content="telephone=no"/>
     </head>
 </page>
diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss
@@ -8,6 +8,7 @@
 @import 'boilerplate/variables';
 @import 'boilerplate/fonts';
 @import 'boilerplate/buttons';
+@import 'boilerplate/swatches';
 @import 'boilerplate/inputs';
 @import 'boilerplate/forms';
 @import 'boilerplate/product';
diff --git a/src/scss/boilerplate/_product.scss b/src/scss/boilerplate/_product.scss
@@ -1,8 +1,50 @@
-.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;
+.product-info-main {
+  .price-box {
+    .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;
+      }
+    }
+  }
+}
+
+.product {
+  &.data {
+    &.items {
+      .item {
+        &.title {
+          > .switch {
+            background: $detail-tab-title-background;
+            color: $detail-tab-title-color;
+            border-color: $detail-tab-title-border-color;
+            font-weight: $detail-tab-title-font-weight;
+            text-decoration: $detail-tab-title-text-decoration;
+            padding: $detail-tab-title-padding;
+            font-size: $detail-tab-title-font-size;
+          }
+          &:not(.disabled) {
+            > .switch {
+              &:hover {
+                &:hover {
+                  background: $detail-tab-title-hover-background;
+                  color: $detail-tab-title-hover-color;
+                  border-color: $detail-tab-title-hover-border;
+                }
+              }
+            }
+          }
+          &.active {
+            > .switch {
+              background: $detail-tab-title-active-background;
+              color: $detail-tab-title-active-color;
+              border-color: $detail-tab-title-active-border;
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/scss/boilerplate/_swatches.scss b/src/scss/boilerplate/_swatches.scss
@@ -0,0 +1,86 @@
+.swatch-option {
+  background: $swatch-default-background;
+  border: $swatch-default-border;
+  color: $swatch-default-color;
+  font-size: $swatch-default-font-size;
+  font-weight: $swatch-default-font-weight;
+  line-height: $swatch-default-line-height;
+  text-align: $swatch-default-text-align;
+  margin: $swatch-default-margin;
+  padding: $swatch-default-padding;
+  height: $swatch-default-height;
+  width: $swatch-default-width;
+  min-width: $swatch-default-min-width;
+  max-width: $swatch-default-max-width;
+  overflow: $swatch-default-overflow;
+
+  &:hover {
+    border: $swatch-default-hover-border;
+    outline: $swatch-default-hover-outline;
+    color: $swatch-default-hover-color;
+  }
+
+  &.text {
+    background: $swatch-option-text-background;
+    border: $swatch-option-text-border;
+    color: $swatch-option-text-color;
+    padding: $swatch-option-text-padding;
+    min-width: $swatch-option-text-min-width;
+    margin: $swatch-option-text-margin;
+
+    &:hover {
+      border: $swatch-option-text-hover-border;
+      outline: $swatch-option-text-hover-outline;
+      color: $swatch-option-text-hover-color;
+    }
+  }
+
+  &.color {
+    border: $swatch-option-color-border;
+    padding: $swatch-option-color-padding;
+    min-width: $swatch-option-color-min-width;
+    margin: $swatch-option-color-margin;
+  }
+}
+
+.swatch-attribute {
+  &.size {
+    .swatch-option {
+      background: $swatch-default-background;
+      border: $swatch-default-border;
+      color: $swatch-default-color;
+      font-size: $swatch-default-font-size;
+      font-weight: $swatch-default-font-weight;
+      line-height: $swatch-default-line-height;
+      text-align: $swatch-default-text-align;
+      margin: $swatch-default-margin;
+      padding: $swatch-default-padding;
+      height: $swatch-default-height;
+      width: $swatch-default-width;
+      min-width: $swatch-default-min-width;
+      max-width: $swatch-default-max-width;
+      overflow: $swatch-default-overflow;
+
+      &:hover {
+        border: $swatch-default-hover-border;
+        outline: $swatch-default-hover-outline;
+        color: $swatch-default-hover-color;
+      }
+
+      &.text {
+        background: $swatch-option-text-background;
+        border: $swatch-option-text-border;
+        color: $swatch-option-text-color;
+        padding: $swatch-option-text-padding;
+        min-width: $swatch-option-text-min-width;
+        margin: $swatch-option-text-margin;
+
+        &:hover {
+          border: $swatch-option-text-hover-border;
+          outline: $swatch-option-text-hover-outline;
+          color: $swatch-option-text-hover-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
@@ -87,6 +87,48 @@ $button-secondary-hover-background-color: black;
 $button-secondary-hover-border: red;
 $button-secondary-hover-color: red;
 
+/*
+ * Swatches
+ */
+$swatch-default-background: black;
+$swatch-default-border: 1px solid rgb(218, 218, 218);
+$swatch-default-color: white;
+$swatch-default-font-size: $font-default-font-size;
+$swatch-default-font-weight: $font-default-font-weight;
+$swatch-default-line-height: $font-default-font-line-height;
+$swatch-default-text-align: center;
+$swatch-default-margin: 0 10px 5px;
+$swatch-default-padding: 1px 2px;
+$swatch-default-height: 20px;
+$swatch-default-width: 30px;
+$swatch-default-min-width: 30px;
+$swatch-default-max-width: 90px;
+$swatch-default-overflow: hidden;
+
+$swatch-default-hover-border: 1px solid white;
+$swatch-default-hover-outline: 1px solid #999;
+$swatch-default-hover-color: #999;
+
+$swatch-option-text-background: $swatch-default-background;
+$swatch-option-text-border: $swatch-default-border;
+$swatch-option-text-color: $swatch-default-color;
+$swatch-option-text-padding: 4px 8px;
+$swatch-option-text-min-width: 22px;
+$swatch-option-text-margin: 0px 7px 5px;
+$swatch-option-text-outline: $swatch-default-hover-outline;
+
+$swatch-option-text-hover-border: $swatch-default-hover-border;
+$swatch-option-text-hover-outline: $swatch-default-hover-outline;
+$swatch-option-text-hover-color: $swatch-default-hover-color;
+
+$swatch-option-color-border: $swatch-default-border;
+$swatch-option-color-padding: $swatch-default-padding;
+$swatch-option-color-margin: $swatch-default-margin;
+$swatch-option-color-height: $swatch-default-height;
+$swatch-option-color-width: $swatch-default-width;
+$swatch-option-color-hover-outline: $swatch-default-hover-outline;
+$swatch-option-color-min-width: $swatch-default-min-width;
+
 /*
  * Inputs & Forms
  */
@@ -179,4 +221,29 @@ $form-fieldset-field-control-float: none;
 $form-action-toolbar-margin: 20px 0;
 $form-action-toolbar-padding: 0;
 
+/*
+ * Tabs
+ */
+
+/* Detail tabs */
+
+$detail-tab-title-background: black;
+$detail-tab-title-border-color: gray;
+$detail-tab-title-color: white;
+$detail-tab-title-font-weight: 300;
+$detail-tab-title-text-decoration: none;
+$detail-tab-title-padding: 5px 25px;
+$detail-tab-title-height: 25px;
+$detail-tab-title-font-size: 1.5rem;
+
+$detail-tab-title-hover-background: orange;
+$detail-tab-title-hover-color: white;
+$detail-tab-title-hover-border: red;
+
+$detail-tab-title-active-background: orange;
+$detail-tab-title-active-color: white;
+$detail-tab-title-active-border: red;
+
+$detail-tab-content-background: black;
+