From 1f9a3c01fba61ecc7ce559bea74ab86b78046cd0 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Mon, 28 Mar 2016 17:22:50 -0400
Subject: [PATCH] Info at the bottom of single products

---
 css/app.css                    |  66 ++++++++++++++-------
 scss/plugins/_woocommerce.scss | 104 +++++++++++++++++++++++----------
 2 files changed, 119 insertions(+), 51 deletions(-)

diff --git a/css/app.css b/css/app.css
index 77af339..7eeb311 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6588,14 +6588,12 @@ main {
   .woocommerce ul.products, .woocommerce .products ol, .woocommerce .products dl {
     list-style-type: none; }
   .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce .woocommerce-noreviews, .woocommerce p.no-comments {
-    border-left: 0.618em solid rgba(0, 0, 0, 0.15);
+    border-left: 0.618em solid transparent;
     clear: both;
-    color: white;
     margin-bottom: 20px;
     margin-left: 0px;
     font-family: arial, sans-serif;
     font-weight: bold;
-    background-color: #af8f46;
     min-height: 55px;
     padding-top: 7px;
     line-height: 1.2; }
@@ -6631,10 +6629,6 @@ main {
   .woocommerce .product.type-product {
     color: black;
     display: block; }
-    .woocommerce .product.type-product a {
-      display: block;
-      color: #008752;
-      font-weight: bold; }
     .woocommerce .product.type-product a.button {
       padding: 5px;
       border-radius: 3px; }
@@ -6645,24 +6639,56 @@ main {
       border-radius: 5px; }
     .woocommerce .product.type-product .tab-description {
       display: inline-block; }
+    .woocommerce .product.type-product .woocommerce-tabs ul.tabs li::before {
+      box-shadow: 2px 2px 0 #0f789f;
+      border-width: 0 1px 1px 0; }
+    .woocommerce .product.type-product .woocommerce-tabs ul.tabs li::after, .woocommerce .product.type-product .woocommerce-tabs ul.tabs li::before {
+      border-color: #0f789f; }
+    .woocommerce .product.type-product .woocommerce-tabs ul.tabs li::after {
+      box-shadow: -2px 2px 0 #0f789f; }
+    .woocommerce .product.type-product .woocommerce-tabs ul.tabs li::after, .woocommerce .product.type-product .woocommerce-tabs ul.tabs li::before {
+      border-color: #0f789f; }
     .woocommerce .product.type-product .woocommerce-tabs {
       width: 100%;
       clear: both;
       /*        display: table;*/ }
-      .woocommerce .product.type-product .woocommerce-tabs .tabs li {
+      .woocommerce .product.type-product .woocommerce-tabs .wc-tab {
+        padding: 10px;
+        border: 1px solid #0f789f; }
+      .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs:before {
+        border-bottom-color: #0f789f; }
+      .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li {
+        background-color: white;
+        color: #ed7023;
+        border: 1px solid #0f789f;
+        border-bottom: 0;
         display: inline-block;
-        display: none;
-        width: 32%;
-        background-color: #000000;
-        border: 1px solid #008752; }
-        .woocommerce .product.type-product .woocommerce-tabs .tabs li:hover {
-          background-color: #17c6c6; }
-        .woocommerce .product.type-product .woocommerce-tabs .tabs li.active {
-          background-color: #C5DCE2;
-          border-width: 2px;
-          border-bottom: 1px solid #C5DCE2; }
-        .woocommerce .product.type-product .woocommerce-tabs .tabs li a {
+        color: #0f789f; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li:before {
+          border-bottom-color: #0f789f;
+          box-shadow: 0; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li:after {
+          border-bottom-color: #0f789f; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li:hover {
+          background: transparent url("../assets/repeating-pattern.jpg") repeat scroll 0 0; }
+          .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li:hover a {
+            color: white; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li a {
           display: block; }
+      .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li.active {
+        border-bottom-color: #0f789f;
+        background-color: #0f789f;
+        border-width: 2px;
+        color: white; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li.active:before {
+          box-shadow: 0;
+          box-shadow: 1px 1px 0 #0f789f; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li.active:after {
+          box-shadow: -2px 2px 0 #0f789f; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li.active:hover {
+          background: #0f789f; }
+        .woocommerce .product.type-product .woocommerce-tabs ul.wc-tabs li.active a:hover {
+          color: white; }
       .woocommerce .product.type-product .woocommerce-tabs .tabs .reviews_tab, .woocommerce .product.type-product .woocommerce-tabs .tabs .additional_information_tab {
         display: none; }
       .woocommerce .product.type-product .woocommerce-tabs > div.panel {
@@ -7036,8 +7062,6 @@ main {
     margin: 0 auto;
     text-align: left;
     width: 80%; }
-  .woocommerce #content .product.type-product .woocommerce-tabs {
-    display: none; }
   .woocommerce .main.woo-single-product #content .type-product .images {
     width: 40%; }
     .woocommerce .main.woo-single-product #content .type-product .images img {
diff --git a/scss/plugins/_woocommerce.scss b/scss/plugins/_woocommerce.scss
index 946ea40..7c571c8 100644
--- a/scss/plugins/_woocommerce.scss
+++ b/scss/plugins/_woocommerce.scss
@@ -72,14 +72,12 @@
     .woocommerce-message, 
     .woocommerce-noreviews, 
     p.no-comments {
-        border-left: 0.618em solid rgba(0, 0, 0, 0.15);
+        border-left: 0.618em solid rgba(0, 0, 0, 0);
         clear:both;
-        color: white;
         margin-bottom: 20px;
         margin-left: 0px;
         font-family: arial, sans-serif;
         font-weight: bold;
-        background-color: #af8f46;
         min-height: 55px;
         padding-top: 7px;
         line-height: 1.2;
@@ -126,11 +124,6 @@
     .product.type-product {
         color: black;
         display: block;
-        a {
-            display: block;
-            color: $green;
-            font-weight: bold;
-        }
         a.button {
             padding: 5px;
             border-radius: 3px;
@@ -145,32 +138,86 @@
         .tab-description {
             display: inline-block;
         }
+        .woocommerce-tabs ul.tabs li.active::before {
+            
+        }
+        .woocommerce-tabs ul.tabs li::before {
+            box-shadow: 2px 2px 0 $blue;
+            border-width: 0 1px 1px 0;
+        }
+        .woocommerce-tabs ul.tabs li::after, .woocommerce-tabs ul.tabs li::before {
+            border-color: $blue;
+        }
+        .woocommerce-tabs ul.tabs li::after {
+            box-shadow: -2px 2px 0 $blue;
+        }
+        .woocommerce-tabs ul.tabs li::after, .woocommerce-tabs ul.tabs li::before {
+            border-color: $blue;
+        }
         .woocommerce-tabs {
             width: 100%;
             clear:both;
     /*        display: table;*/
-            .tabs li {
-                display: inline-block;
-                display: none;
-                width: 32%;
-                background-color: $black;
-                border: 1px solid $green;
-                &:hover {
-                    background-color: #17c6c6;
-                }
-                &.active {
-                  background-color: #C5DCE2;
-                  border-width: 2px;
-                  border-bottom: 1px solid #C5DCE2;
+            .wc-tab {
+                padding: 10px;
+                border: 1px solid $blue;
+            }
+            ul.wc-tabs {
+                &:before {
+                    border-bottom-color: $blue;
                 }
-                a {
-                    display: block;
+                &:after {
+                    
                 }
-                @media #{$large-up} {
-    /*                margin-left: -35px;*/
+                li {
+                    background-color: white;
+                    color: $orange;
+                    border: 1px solid $blue;
+                    border-bottom: 0;
+                    display: inline-block;
+                    color: $blue;
+                    &:before {
+                        border-bottom-color: $blue;
+                        box-shadow: 0;
+                    }
+                    &:after {
+                        border-bottom-color: $blue;
+                    }
+                    &:hover {
+                        background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
+                        a {
+                            color: white
+                        }
+                    }
+                    a {
+                        display: block;
+                    }
+                    @media #{$large-up} {
+        /*                margin-left: -35px;*/
+                    }
+                    @media #{$medium-only} {
+        /*                margin-left: -23px;*/
+                    }
                 }
-                @media #{$medium-only} {
-    /*                margin-left: -23px;*/
+                
+                li.active {
+                    border-bottom-color: $blue;
+                    background-color: $blue;
+                    border-width: 2px;
+                    color: white;
+                    &:before {
+                        box-shadow: 0;
+                        box-shadow: 1px 1px 0 $blue;
+                    }
+                    &:after {
+                        box-shadow: -2px 2px 0 $blue;
+                    }
+                    &:hover {
+                        background: $blue;
+                    }
+                    a:hover {
+                        color: white;
+                    }
                 }
             }
             .tabs .reviews_tab,
@@ -702,9 +749,6 @@
             text-align: left;
             width: 80%;
         }
-        .woocommerce-tabs {
-            display: none;
-        }
     }
     /* End General CSS */
 
-- 
2.17.1