update marketing page

assets/script/RowExpand.js

@@ -0,0 +1,44 @@
+
+const RowExpand = (function (){
+
+    const $status_expand_all = $("#js-row-expand-all");
+
+    let track_open_rows = [];
+
+    function open_child_row(child_class_name){
+        const $children = $(`.${child_class_name}`);
+
+        if(!track_open_rows.includes(child_class_name)) {
+            $children.css('display', 'table-row');
+            track_open_rows.push(child_class_name);
+        }else{
+            $children.css('display', 'none');
+            track_open_rows = [...Util.removeItemFromArray(track_open_rows, child_class_name)];
+        }
+    }
+
+    function open_all_row(){
+        if(!track_open_rows.includes('expand_all')) {
+            $(".row").css('display', 'table-row');
+            track_open_rows.push('expand_all');
+
+            $status_expand_all.html("[-]");
+
+        }else{
+            // collapse all
+            $(".row").css('display', 'none');
+            // open only first parent
+            $(".parent_0").css('display', 'table-row');
+
+            track_open_rows = [];
+
+            $status_expand_all.html("[+]");
+        }
+    }
+
+    return {
+        open_child: open_child_row,
+        open_all: open_all_row
+    }
+
+})();

assets/script/pc_style.css

@@ -807,13 +807,13 @@ input[type=radio]:focus:before {
 .order-page-table .icons {
   width: 30px;
   height: 30px;
-  border: 1px solid #ECECEC;
-  background-color: #F9F9F9;
+  border: 1px solid #ececec;
+  background-color: #f9f9f9;
   border-radius: 5px;
 }
 .order-page-table .icon-edit {
-  border: 1px solid #0041E8;
-  background-color: #F5F7FF;
+  border: 1px solid #0041e8;
+  background-color: #f5f7ff;
   background-position: -108px -82px;
   margin-right: 6px;
 }
@@ -897,4 +897,28 @@ input[type=radio]:focus:before {
 .table-brand td {
   padding: 7px 6px;
   border: 1px solid #ececec;
+}
+
+.autocomplete-suggestions .item {
+  padding: 12px 0;
+  border-bottom: 1px solid #ededed;
+}
+.autocomplete-suggestions .item .info {
+  width: calc(100% - 108px);
+  margin-right: 48px;
+}
+.autocomplete-suggestions .item img {
+  width: 60px;
+  display: block;
+}
+.autocomplete-suggestions .item .name {
+  font-weight: 600;
+  line-height: 20px;
+}
+.autocomplete-suggestions .item .price {
+  font-weight: 600;
+  color: #fb4e4e;
+  line-height: 20px;
+  display: block;
+  margin-top: 5px;
 }/*# sourceMappingURL=pc_style.css.map */

assets/script/pc_style.scss

@@ -60,7 +60,7 @@ img {
     max-width: 100%;
     height: auto;
 }
-table{
+table {
     width: 100%;
 }
 a {
@@ -316,13 +316,14 @@ a {
         align-items: center;
         transition: 0.3s all;
         position: relative;
-        &:hover, &.current{
+        &:hover,
+        &.current {
             background: #81b5e4;
             .icons {
                 filter: brightness(100);
             }
         }
-        &:hover {            
+        &:hover {
             .sub-menu {
                 left: calc(100% + 8px);
                 opacity: 1;
@@ -826,13 +827,13 @@ input[type="radio"] {
     .icons {
         width: 30px;
         height: 30px;
-        border: 1px solid #ECECEC;
-        background-color: #F9F9F9;
+        border: 1px solid #ececec;
+        background-color: #f9f9f9;
         border-radius: 5px;
     }
     .icon-edit {
-        border: 1px solid #0041E8;
-        background-color: #F5F7FF;
+        border: 1px solid #0041e8;
+        background-color: #f5f7ff;
         background-position: -108px -82px;
         margin-right: 6px;
     }
@@ -921,3 +922,29 @@ input[type="radio"] {
         border: 1px solid #ececec;
     }
 }
+
+.autocomplete-suggestions {
+    .item {
+        padding: 12px 0;
+        border-bottom: 1px solid #ededed;
+        .info {
+            width: calc(100% - 108px);
+            margin-right: 48px;
+        }
+        img {
+            width: 60px;
+            display: block;
+        }
+        .name {
+            font-weight: 600;
+            line-height: 20px;
+        }
+        .price {
+            font-weight: 600;
+            color: #fb4e4e;
+            line-height: 20px;
+            display: block;
+            margin-top: 5px;
+        }
+    }
+}