Похожие товары в открытом продукте

alimuradov · Nov 14, 2016 · 843d4e2 · 843d4e2
1 parent 2f25ce9
commit 843d4e2
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 10 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/product.php b/product.php
@@ -114,6 +114,42 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="page-wrapper-open-products">
+                    <strong class="page-wrapper-open-products-head">Кухни</strong>
+                    <div class="page-wrapper-open-products-data">
+                        <div class="page-wrapper-open-products-data-item">
+                            <div class="page-wrapper-open-products-data-item-img" style="background-image: url('/public/img/product/5.jpg')"></div>
+                            <div class="page-wrapper-open-products-data-item-data">
+                                <strong>Коллекция Laravel 5.3</strong>
+                            </div>
+                        </div>
+                        <div class="page-wrapper-open-products-data-item">
+                            <div class="page-wrapper-open-products-data-item-img" style="background-image: url('/public/img/product/2.jpg')"></div>
+                            <div class="page-wrapper-open-products-data-item-data">
+                                <strong>Коллекция Laravel 5.3</strong>
+                            </div>
+                        </div>
+                        <div class="page-wrapper-open-products-data-item">
+                            <div class="page-wrapper-open-products-data-item-img" style="background-image: url('/public/img/product/4.jpg')"></div>
+                            <div class="page-wrapper-open-products-data-item-data">
+                                <strong>Коллекция Laravel 5.3</strong>
+                            </div>
+                        </div>
+                        <div class="page-wrapper-open-products-data-item">
+                            <div class="page-wrapper-open-products-data-item-img" style="background-image: url('/public/img/product/6.jpg')"></div>
+                            <div class="page-wrapper-open-products-data-item-data">
+                                <strong>Коллекция Laravel 5.3</strong>
+                            </div>
+                        </div>
+                        <div class="page-wrapper-open-products-data-item">
+                            <div class="page-wrapper-open-products-data-item-img" style="background-image: url('/public/img/product/1.jpg')"></div>
+                            <div class="page-wrapper-open-products-data-item-data">
+                                <strong>Коллекция Laravel 5.3</strong>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <footer>

diff --git a/public/css/style.css b/public/css/style.css
@@ -2194,3 +2194,65 @@ footer .footer-data .footer-data-febox .footer-content-de-febox > span {
 .page .page-wrapper .page-wrapper-open .page-wrapper-open-form .page-wrapper-open-form-data form .page-wrapper-open-form-data-right textarea:focus {
   border-color: #d09552;
 }
+.page .page-wrapper .page-wrapper-open-products {
+  border-top: 1px solid #eee;
+  padding: 20px 0;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-head {
+  font-size: 18px;
+  font-weight: bold;
+  font-family: 'Open Sans';
+  text-transform: uppercase;
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data {
+  padding: 20px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -ms-flex;
+  display: flex;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data .page-wrapper-open-products-data-item {
+  width: calc(20% - 16px);
+  margin-right: 20px;
+  cursor: pointer;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data .page-wrapper-open-products-data-item:last-child {
+  margin-right: 0;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data .page-wrapper-open-products-data-item:hover .page-wrapper-open-products-data-item-data strong {
+  color: #d09552;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data .page-wrapper-open-products-data-item .page-wrapper-open-products-data-item-img {
+  width: 100%;
+  height: 140px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: #eee;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data .page-wrapper-open-products-data-item .page-wrapper-open-products-data-item-data {
+  padding: 10px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.page .page-wrapper .page-wrapper-open-products .page-wrapper-open-products-data .page-wrapper-open-products-data-item .page-wrapper-open-products-data-item-data strong {
+  font-family: 'Open Sans';
+  font-size: 14px;
+  font-weight: bold;
+  display: block;
+  text-transform: uppercase;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  -ms-transition: all 0.2s ease;
+  -o-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
diff --git a/public/css/style.less b/public/css/style.less
@@ -2039,6 +2039,71 @@ footer {
         }
       }
     }
+
+    .page-wrapper-open-products {
+      border-top: 1px solid #eee;
+      padding: 20px 0;
+
+      .page-wrapper-open-products-head {
+        font-size: 18px;
+        font-weight: bold;
+        font-family: @head;
+        text-transform: uppercase;
+        display: block;
+        .box;
+      }
+
+      .page-wrapper-open-products-data {
+        padding: 20px 0;
+        .box;
+        .flex-display;
+
+        .page-wrapper-open-products-data-item {
+          width: ~"calc(20% - 16px)";
+          margin-right: 20px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            .page-wrapper-open-products-data-item-img {
+
+            }
+
+            .page-wrapper-open-products-data-item-data {
+              strong {
+                color: @yellow3;
+              }
+            }
+          }
+
+          .page-wrapper-open-products-data-item-img {
+            width: 100%;
+            height: 140px;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-color: #eee;
+          }
+
+          .page-wrapper-open-products-data-item-data {
+            padding: 10px 0;
+            .box;
+
+            strong {
+              font-family: @head;
+              font-size: 14px;
+              font-weight: bold;
+              display: block;
+              text-transform: uppercase;
+              .transition;
+            }
+          }
+        }
+      }
+    }
   }
 }