menu

assets/script/pc_style.css

@@ -238,12 +238,11 @@ a {
   /*width: calc(100% - 33px);*/
 }
 .admin-menu-container .sub-menu {
-  padding: 13px 13px 13px 45px;
   position: relative;
 }
 .admin-menu-container .sub-menu a {
   display: block;
-  margin-bottom: 15px;
+  padding: 10px 10px 10px 45px;
   position: relative;
 }
 .admin-menu-container .sub-menu a:hover {
@@ -252,6 +251,8 @@ a {
 .admin-menu-container .sub-menu a.current {
   font-weight: 700;
   text-decoration: none;
+  background: #22a2ff;
+  border-radius: 4px;
 }
 .admin-menu-container .sub-menu a:last-child {
   margin: 0;
@@ -1274,4 +1275,71 @@ input[type=radio]:focus:before {
 .order-detail-page .select2-container {
   width: 100% !important;
   margin-top: 10px;
+}
+
+#overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9;
+  display: none;
+}
+#overlay.active {
+  display: block;
+}
+
+.status-notificatiom {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  width: 550px;
+  height: 240px;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1019607843);
+  border-radius: 15px;
+  display: none;
+  z-index: 9999;
+}
+.status-notificatiom.active {
+  display: block;
+}
+.status-notificatiom .icon-close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 30px;
+  height: 30px;
+  background: #ececec;
+  line-height: 30px;
+  text-align: center;
+  border-radius: 50%;
+}
+.status-notificatiom .content {
+  height: 100%;
+}
+.status-notificatiom .fa-check {
+  width: 70px;
+  height: 70px;
+  background: #52c41a;
+  color: #fff;
+  font-size: 50px;
+  text-align: center;
+  line-height: 70px;
+  border-radius: 50%;
+}
+.status-notificatiom b {
+  font-size: 24px;
+  font-weight: 400;
+  margin-top: 5px;
+}
+.status-notificatiom p {
+  color: rgba(0, 0, 0, 0.4509803922);
+}
+.status-notificatiom .fa-triangle-exclamation {
+  font-size: 70px;
+  color: #ffc53d;
 }/*# sourceMappingURL=pc_style.css.map */

assets/script/pc_style.scss

@@ -220,11 +220,10 @@ a {
         /*width: calc(100% - 33px);*/
     }
     .sub-menu {
-        padding: 13px 13px 13px 45px;
         position: relative;
         a {
             display: block;
-            margin-bottom: 15px;
+            padding: 10px 10px 10px 45px;
             position: relative;
             &:hover {
                 text-decoration: underline;
@@ -232,6 +231,8 @@ a {
             &.current {
                 font-weight: 700;
                 text-decoration: none;
+                background: #22a2ff;
+                border-radius: 4px;
             }
             &:last-child {
                 margin: 0;
@@ -1318,3 +1319,70 @@ input[type="radio"] {
     width: 100% !important;
     margin-top: 10px;
 }
+
+#overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 9;
+    display: none;
+    &.active {
+        display: block;
+    }
+}
+
+.status-notificatiom {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    width: 550px;
+    height: 240px;
+    box-shadow: 0px 1px 1px 0px #0000001a;
+    border-radius: 15px;
+    display: none;
+    z-index: 9999;
+    &.active {
+        display: block;
+    }
+    .icon-close {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 30px;
+        height: 30px;
+        background: #ececec;
+        line-height: 30px;
+        text-align: center;
+        border-radius: 50%;
+    }
+    .content {
+        height: 100%;
+    }
+    .fa-check {
+        width: 70px;
+        height: 70px;
+        background: #52c41a;
+        color: #fff;
+        font-size: 50px;
+        text-align: center;
+        line-height: 70px;
+        border-radius: 50%;
+    }
+    b {
+        font-size: 24px;
+        font-weight: 400;
+        margin-top: 5px;
+    }
+    p {
+        color: #00000073;
+    }
+    .fa-triangle-exclamation {
+        font-size: 70px;
+        color: #ffc53d;
+    }
+}

template/theme.html

@@ -27,7 +27,6 @@
 
 <body>
 
-
     <div id="overlay"></div>
 
     <div class="admin-global-container">
@@ -78,8 +77,9 @@
 
                     <div class="sub-menu">
                         {% for _item in _menuArray %}
-                        <a href="{{ _item.url }}" {% if _item.view==global.view and _item.module==global.module %}
+                        <a href="{{ _item.url }}"
-                            class="current" {% endif %}> {{ _item.name }} </a>
+                            class="{% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
+                            {{_item.name }} </a>
                         {% endfor %}
                     </div>
                 </details>
@@ -317,7 +317,7 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
     <script src="{{ 'global.js' | asset_url }}?v=1"></script>
-    <!-- <script src="../dist/index.js"></script> -->
+
     {% include javascript/index %}
 
 </body>