dari laptop

public/kai/build/scss/layouts-style/_futuristic.scss

@@ -0,0 +1,265 @@
+.main-panel {
+  height: calc(100vh - 66px);
+  min-height: calc(100vh - 66px);
+  > .container {
+    min-height: calc(100% - 76px);
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+  .overlay {
+    min-height: 175px;
+  }
+}
+
+.topbar_open {
+  .main-panel {
+    transition-delay: 0.1s !important;
+  }
+  #menuIconHeader {
+    transform: translate3d(0, 63px, 0) !important;
+  }
+}
+
+.container-futuristic {
+  margin-top: -175px !important;
+}
+
+.page-wrapper {
+  border-radius: 5px !important;
+}
+
+.page-inner {
+  padding: 0 !important;
+  border-radius: 5px;
+  margin-bottom: 30px;
+  overflow: hidden;
+  &.page-inner-futuristic {
+    background: #fff;
+    padding: 1.5rem !important;
+    min-height: 100vh;
+  }
+}
+
+.navbar-header {
+  .more {
+    background: transparent;
+    border: 0;
+    font-size: 22px;
+    padding: 0;
+    color: #fff;
+  }
+  .navbar-nav .nav-item .nav-link {
+    color: #fff;
+  }
+  .page-navigation > .nav-item > .nav-link .menu-title {
+    color: #fff !important;
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 1200.5px) {
+  .page-sidebar {
+    right: -16px;
+    border-radius: 5px;
+  }
+
+  .pagesidebar_open .page-sidebar {
+    transform: translate3d(-16px, 0, 0) !important;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .btn-toggle {
+    display: none;
+  }
+  .topbar-toggler {
+    display: none;
+  }
+  .container {
+    &.container-futuristic {
+      padding-left: 15px !important;
+      padding-right: 15px !important;
+    }
+  }
+}
+
+@media screen and (max-width: 991.5px) {
+  .main-header {
+    min-height: 65px;
+    .navbar-header {
+      min-height: 65px;
+    }
+    .nav-controls {
+      position: relative;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  #menuHeader {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 1200;
+    left: 0 !important;
+    right: 0;
+    top: 0;
+    margin-top: 0px;
+    overflow-y: auto;
+    .body-overlay {
+      display: none;
+    }
+    .page-navigation {
+      min-height: 100vh;
+      width: 275px;
+      max-width: calc(100% - 40px);
+      padding-bottom: 60px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: block;
+      z-index: 2001;
+      position: relative;
+      -webkit-transform: translate3d(-275px, 0, 0);
+      -moz-transform: translate3d(-275px, 0, 0);
+      -o-transform: translate3d(-275px, 0, 0);
+      -ms-transform: translate3d(-275px, 0, 0);
+      transform: translate3d(-275px, 0, 0) !important;
+      transition: all 0.5s;
+      .title-menu {
+        font-size: 14px;
+        margin: 0;
+        color: #fff;
+        height: 56px;
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
+        position: relative;
+        font-weight: 300;
+        text-transform: uppercase;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        .close-menu {
+          color: #fff;
+          position: absolute;
+          top: 50%;
+          right: 15px;
+          transform: translateY(-50%);
+          cursor: pointer;
+          font-size: 18px;
+        }
+      }
+      > .nav-item {
+        width: 100%;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 0;
+        &:first-child > a {
+          margin-left: 0;
+        }
+        &.active {
+          &:before {
+            width: 100%;
+          }
+        }
+        > .nav-link {
+          width: 100%;
+          position: relative;
+          padding-left: 18px;
+          padding-right: 18px;
+          border-radius: 0;
+        }
+        .navbar-dropdown {
+          position: relative;
+          top: 0;
+          border: 0;
+          box-shadow: none;
+          ul {
+            padding: 15px 25px !important;
+          }
+        }
+        &.submenu {
+          > .nav-link {
+            &:after {
+              position: absolute;
+              right: 35px;
+              height: unset;
+            }
+          }
+        }
+        &.mega-menu {
+          .navbar-dropdown {
+            padding: 5px !important;
+          }
+        }
+        .category-heading {
+          padding-top: 0px;
+        }
+        &.show-submenu {
+          .navbar-dropdown {
+            display: block;
+          }
+        }
+        &:not(.show-submenu) {
+          > .nav-link {
+            &:after {
+              transform: rotate(0deg) !important;
+            }
+          }
+        }
+      }
+      &.page-navigation-style-2 {
+        > .nav-item {
+          flex-direction: column;
+          margin-bottom: 10px;
+          > .nav-link {
+          }
+          .navbar-dropdown {
+            width: 100%;
+            margin-top: 5px;
+          }
+        }
+      }
+    }
+    &.show {
+      .page-navigation {
+        -webkit-transform: translate3d(0px, 0, 0);
+        -moz-transform: translate3d(0px, 0, 0);
+        -o-transform: translate3d(0px, 0, 0);
+        -ms-transform: translate3d(0px, 0, 0);
+        transform: translate3d(0px, 0, 0) !important;
+      }
+      .body-overlay {
+        display: block;
+      }
+    }
+  }
+
+  #menuIconHeader {
+    position: absolute;
+    width: 100%;
+    z-index: 1001;
+    transition: all 0.5s ease 0s;
+    transform: translate3d(0px, -70px, 0px) !important;
+    min-height: 62px;
+    display: flex;
+  }
+
+  .navbar-header {
+    .nav-toggle {
+      display: block;
+      position: absolute;
+      left: 15px;
+    }
+    .more {
+      position: absolute;
+      right: 15px;
+    }
+    .navbar-brand {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+