viniBaxter-desk_front 26 → 34.0.0

data/lib/viniBaxter/sass/desk_front/{beckyBaxter → v2lrf-dashboard}/new_nav/_sidebar-and-main-panel.scss

@@ -2,6 +2,7 @@
   position: relative;
   top: 0;
   height: 100vh;
+  overflow-x: hidden;
 
   &.wrapper-full-page {
     min-height: 100vh;
@@ -14,9 +15,10 @@
 .sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a {
   margin-left: 25px;
 }
+
 .sidebar,
 .off-canvas-sidebar {
-  @include linear-gradient($primary-states, $primary);
+  // @include linear-gradient($primary-states, $primary);
   height: calc(100vh - 90px);
   width: 230px;
   position: fixed;
@@ -39,6 +41,10 @@
     position: relative;
     overflow: auto;
 
+    // &.sidebar-wrapper-light{
+    //   min-height: 100%;
+    // }
+
     .dropdown .dropdown-backdrop {
       display: none !important;
     }
@@ -47,9 +53,9 @@
       border: none;
     }
 
-    > .nav,
+    >.nav,
     .user .info {
-      [data-toggle='collapse'] ~ div > ul > li > a {
+      [data-toggle='collapse']~div>ul>li>a {
         span {
           display: inline-block;
           @extend .animation-transition-general;
@@ -92,14 +98,15 @@
       }
     }
 
-    [data-toggle='collapse'] ~ div > ul > li:hover > a {
+    [data-toggle='collapse']~div>ul>li:hover>a {
+
       .sidebar-mini-icon,
       .sidebar-normal {
         color: $white;
       }
     }
 
-    .nav [data-toggle='collapse'] ~ div > ul > li > a .sidebar-mini-icon {
+    .nav [data-toggle='collapse']~div>ul>li>a .sidebar-mini-icon {
       opacity: 0;
     }
   }
@@ -111,6 +118,7 @@
     opacity: 1;
     @extend .animation-transition-general;
   }
+
   .logo-tim {
     border-radius: 50%;
     border: 1px solid #333;
@@ -126,141 +134,10 @@
     }
   }
 
-  .nav {
-    // margin-top: 20px;
-    display: block;
-
-    .caret {
-      top: 14px;
-      position: absolute;
-      right: 10px;
-    }
-
-    li {
-      > a + div .nav {
-        margin-top: 5px;
-        li > a {
-          margin-top: 0px;
-          padding: 2px 8px;
-        }
-      }
-
-      > a {
-        margin: 2px 15px 0;
-        border-radius: $btn-round-radius;
-        color: $white;
-        display: block;
-        text-decoration: none;
-        position: relative;
-        text-transform: uppercase;
-        cursor: pointer;
-        font-size: $font-size-xs !important;
-        padding: 3px 8px;
-        line-height: $line-height-lg;
-      }
-
-      &:first-child > a {
-        margin: 0 15px;
-      }
-
-      &:last-child > a {
-        margin: 0 15px;
-      }
-
-      &:hover:not(.active) > a,
-      &:focus:not(.active) > a {
-        p,
-        i {
-          color: $white;
-        }
-      }
-
-      &:hover:not(.active) > a i,
-      &:focus:not(.active) > a i {
-        color: $white;
-      }
-
-      &.active > a:not([data-toggle='collapse']) {
-        background: transparent;
-
-        i,
-        p {
-          color: white;
-        }
-
-        &:before {
-          content: ' ';
-          position: absolute;
-          height: 6px;
-          width: 6px;
-          top: 11px;
-          left: -4px;
-          background: $white;
-          border-radius: 50%;
-        }
-      }
+  @include nav-setup($white, 'normal');
 
-      &.active > a[data-toggle='collapse'] {
-        background: transparent;
-        box-shadow: none;
-        color: $white;
-
-        i {
-          color: $white;
-        }
-
-        & + div .nav .active a {
-          box-shadow: none;
-          .sidebar-mini-icon,
-          .sidebar-normal {
-            color: $white;
-            font-weight: $font-weight-normal;
-          }
-
-          &:before {
-            content: ' ';
-            position: absolute;
-            height: 6px;
-            width: 6px;
-            top: 17px;
-            left: -4px;
-            background: $white;
-            border-radius: 50%;
-          }
-        }
-        &:before {
-          content: ' ';
-          position: absolute;
-          height: 6px;
-          width: 6px;
-          top: 22px;
-          left: -4px;
-          background: rgba($white, 0.6);
-          border-radius: 50%;
-        }
-      }
-    }
-
-    p {
-      margin: 0;
-      line-height: 30px;
-      position: relative;
-      display: block;
-      height: auto;
-      white-space: nowrap;
-      @extend .animation-transition-general;
-    }
-
-    i {
-      font-size: 20px;
-      float: left;
-      margin-right: 12px;
-      line-height: 30px;
-      width: 34px;
-      text-align: center;
-      color: $opacity-8;
-      position: relative;
-    }
+  &.sidebar-dashboard-light {
+    @include nav-setup($nft-dark, 'ntf');
   }
 
   .sidebar-background {
@@ -343,6 +220,10 @@
       line-height: 30px;
       overflow: hidden;
     }
+
+    &.hidden-if-dashboard-light {
+      display: none !important;
+    }
   }
 
   .logo-tim {
@@ -362,29 +243,64 @@
 
   &[data='blue'] {
     @include linear-gradient($info-states, $info);
+
     &:before {
       border-bottom-color: $info;
     }
+
+    &:not(.sidebar-dashboard-light):not(.sidebar-not-hoverable) {
+      &:before {
+        @include caret-color($info);
+      }
+    }
   }
+
   &[data='green'] {
     @include linear-gradient($success-states, $success);
+
     &:before {
       border-bottom-color: $success;
     }
+
+    &:not(.sidebar-dashboard-light):not(.sidebar-not-hoverable) {
+      &:before {
+        @include caret-color($success);
+      }
+    }
   }
+
   &[data='orange'] {
     @include linear-gradient($warning-states, $warning);
+
     &:before {
       border-bottom-color: $warning;
     }
+
+    &:not(.sidebar-dashboard-light):not(.sidebar-not-hoverable) {
+      &:before {
+        @include caret-color($warning);
+      }
+    }
   }
+
   &[data='red'] {
     @include linear-gradient($danger-states, $danger);
+
     &:before {
       border-bottom-color: $danger;
     }
+
+    &:not(.sidebar-dashboard-light):not(.sidebar-not-hoverable) {
+      &:before {
+        @include caret-color($danger);
+      }
+    }
   }
 
+  // &[data='light'] {
+  //   // background-color: #fff !important;
+  // }
+
   .user {
     padding-bottom: 20px;
     margin: 20px auto 0;
@@ -426,11 +342,11 @@
     }
 
     .info {
-      > a {
+      >a {
         display: block;
         line-height: 18px;
 
-        > span {
+        >span {
           @extend .animation-transition-general;
           display: block;
           position: relative;
@@ -445,34 +361,25 @@
       }
     }
   }
-
-  &:before {
-    content: '';
-    position: absolute;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid $primary;
-    top: -5px;
-    left: 40px;
-    transform: translate(-50%);
-  }
 }
 
 .visible-on-sidebar-regular {
   display: inline-block !important;
 }
+
 .visible-on-sidebar-mini {
   display: none !important;
 }
 
 .off-canvas-sidebar {
   .nav {
-    > li > a,
-    > li > a:hover {
+
+    >li>a,
+    >li>a:hover {
       color: $white;
     }
 
-    > li > a:focus {
+    >li>a:focus {
       background: rgba(200, 200, 200, 0.2);
     }
   }
@@ -484,45 +391,134 @@
   width: $full-width;
   min-height: 100vh;
   border-top: 2px solid $primary;
+
+  .fixed-top {
+    border-top: 2px solid $primary;
+  }
+
   background: linear-gradient($background-black, $background-states-black);
 
   @include transitions(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1));
 
   &[data='blue'] {
     border-top: 2px solid $info;
+
+    .fixed-top {
+      border-top: 2px solid $info;
+    }
   }
 
   &[data='green'] {
     border-top: 2px solid $success;
+
+    .fixed-top {
+      border-top: 2px solid $success;
+    }
   }
 
   &[data='orange'] {
     border-top: 2px solid $warning;
+
+    .fixed-top {
+      border-top: 2px solid $warning;
+    }
   }
 
   &[data='red'] {
     border-top: 2px solid $danger;
+
+    .fixed-top {
+      border-top: 2px solid $danger;
+    }
   }
 
   &[data='primary'] {
     border-top: 2px solid $primary;
+
+    .fixed-top {
+      border-top: 2px solid $primary;
+    }
   }
 
-  > .content {
+  >.content {
     padding: 80px 30px 30px 280px;
     min-height: calc(100vh - 70px);
   }
 
-  > .navbar {
+  >.navbar {
     margin-bottom: 0;
   }
 
   .header {
     margin-bottom: 50px;
   }
+
+  &.main-panel-dashboard-light {
+    &[data='light'] {
+      border-top: 2px solid $nft-dark;
+
+      .fixed-top {
+        border-top: 2px solid $nft-dark;
+      }
+
+      .v2lrf-by-nucleo {
+        color: $nft-dark !important
+      }
+    }
+
+    >.content {
+      padding: 60px 0px 30px 230px;
+
+      @include media-breakpoint-up(xl) {
+        padding: 80px 0px 30px 230px;
+        // min-height: calc(100vh - 70px);
+        min-height: 100vh;
+      }
+
+      .main-content-light {
+        background-color: $nft-withe;
+
+        @include media-breakpoint-up(xl) {
+          //   border-radius: 30px 0px 0px 30px;
+          //   box-shadow: $material-shadow4;
+          // min-height: calc(100vh - 15vh);
+          height: 80vh !important;
+          //   position: fixed;
+          //   // width: 90%;
+          overflow-y: scroll;
+          //   overflow-x: hidden;
+          //   // background-image: url('https://cdn.dribbble.com/users/59947/screenshots/15084962/media/a57deba0874f256ddefdc17d39155385.jpg');
+          //   // background-image: url('https://vbaxt-fixed-assets.ams3.cdn.digitaloceanspaces.com/FIXED_for_all/images/dashboard-spafolly.jpg');
+          background-image: url('https://vbaxt-fixed-assets.ams3.cdn.digitaloceanspaces.com/FIXED_for_all/patterns/topography8.svg');
+          background-repeat: repeat;
+          background-size: inherit;
+
+          padding: 20px;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          transition: all 0.3s linear;
+          box-shadow: 3px 3px 25px 0px #bbcfda21, -4px -4px 20px #ffffff, inset 4px 4px 20px #d1d9e659, inset -8px -8px 20px 0px #ffffff99;
+          border-radius: 30px 0 0 30px;
+          z-index: 1041;
+          position: relative;
+          box-shadow: 1px 0px 20px #292b3917, 0 0px 1px #292b391c;
+          //   &:before {
+          //     // content: '';
+          //     width: 100%;
+          //     height: 80%;
+          //     position: absolute;
+          //     opacity: 0.3;
+          //     border-radius: 30px 0px 0px 30px;
+          //     overflow: hidden;
+          //     background-image: url('https://cdn.dribbble.com/users/3060738/screenshots/12765413/media/bf83f45bf3c1d6679bc39ff62b5e0f20.jpg');
+          //   }
+        }
+      }
+    }
+  }
 }
 
 .perfect-scrollbar-on {
+
   .sidebar,
   .main-panel {
     height: 100%;
@@ -534,15 +530,14 @@
   height: $sidebar-width;
   padding-top: 80px;
   padding-bottom: 45px;
-  background: #141e30; /* fallback for old browsers */
-  background: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(#0c2646),
-    color-stop(60%, #204065),
-    to(#2a5788)
-  );
+  background: #141e30;
+  /* fallback for old browsers */
+  background: -webkit-gradient(linear,
+      left top,
+      right top,
+      from(#0c2646),
+      color-stop(60%, #204065),
+      to(#2a5788));
   background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
   position: relative;
   overflow: hidden;
@@ -551,6 +546,7 @@
     .title {
       color: $white;
     }
+
     .category {
       max-width: 600px;
       color: $opacity-5;
@@ -608,6 +604,7 @@
     .sidebar {
       @include transition($sidebar-transition);
       @include transform-translate-x(0px);
+
       &:before {
         content: unset;
       }
@@ -664,13 +661,21 @@
 
   .main-panel {
     width: 100%;
+
     .content {
       padding-left: 30px;
     }
+
+    &.main-panel-dashboard-light {
+      .content {
+        padding-left: 0px;
+      }
+    }
   }
 }
 
 @include media-breakpoint-up(lg) {
+
   .sidebar,
   .main-panel,
   .sidebar-wrapper {
@@ -687,6 +692,7 @@
     .visible-on-sidebar-regular {
       display: none !important;
     }
+
     .visible-on-sidebar-mini {
       display: inline-block !important;
     }
@@ -712,68 +718,70 @@
       }
 
       .sidebar-wrapper {
-        > .nav [data-toggle='collapse'] ~ div > ul > li > a .sidebar-normal,
-        .user
-          .info
-          [data-toggle='collapse']
-          ~ div
-          > ul
-          > li
-          > a
-          .sidebar-normal,
-        .user .info > a > span,
-        > .nav li > a p {
+
+        >.nav [data-toggle='collapse']~div>ul>li>a .sidebar-normal,
+        .user .info [data-toggle='collapse']~div>ul>li>a .sidebar-normal,
+        .user .info>a>span,
+        >.nav li>a p {
           @include transform-translate-x(-25px);
           opacity: 0;
         }
       }
 
-      .nav [data-toggle='collapse'] ~ div > ul > li > a .sidebar-mini-icon {
+      .nav [data-toggle='collapse']~div>ul>li>a .sidebar-mini-icon {
         opacity: 1;
       }
     }
 
-    .sidebar:hover {
-      width: $sidebar-width;
+    .sidebar:not(.sidebar-dashboard-light):not(.sidebar-not-hoverable) {
+      &:hover {
+        width: $sidebar-width;
+
+        .logo {
+          a.logo-normal {
+            opacity: 1;
+            @include transform-translate-x(0);
+          }
+        }
 
-      .logo {
-        a.logo-normal {
+        .navbar-minimize {
           opacity: 1;
-          @include transform-translate-x(0);
         }
-      }
 
-      .navbar-minimize {
-        opacity: 1;
-      }
-      .sidebar-wrapper {
-        width: $sidebar-width;
+        .sidebar-wrapper {
+          width: $sidebar-width;
 
-        > .nav li > a p,
-        > .nav [data-toggle='collapse'] ~ div > ul > li > a .sidebar-normal,
-        .user
-          .info
-          [data-toggle='collapse']
-          ~ div
-          > ul
-          > li
-          > a
-          .sidebar-normal,
-        .user .info > a > span {
-          @include transform-translate-x(0px);
-          opacity: 1;
+          >.nav li>a p,
+          >.nav [data-toggle='collapse']~div>ul>li>a .sidebar-normal,
+          .user .info [data-toggle='collapse']~div>ul>li>a .sidebar-normal,
+          .user .info>a>span {
+            @include transform-translate-x(0px);
+            opacity: 1;
+          }
         }
-      }
 
-      .nav [data-toggle='collapse'] ~ div > ul > li > a .sidebar-mini-icon {
-        opacity: 0;
+        .nav [data-toggle='collapse']~div>ul>li>a .sidebar-mini-icon {
+          opacity: 0;
+        }
       }
+
     }
 
+
     .main-panel {
-      > .content {
+      >.content {
         padding-left: 130px;
       }
+
+      &.main-panel-dashboard-light {
+        >.content {
+          background: $nft-soft-lighter;
+          padding-left: 80px;
+          position: absolute;
+          // z-index: 9999999;
+          width: 100%;
+        }
+      }
     }
 
     footer {
@@ -781,12 +789,28 @@
     }
   }
 
-  .navbar-minimize {
-    button {
-      margin-left: 10px;
-      i {
-        color: $white;
-        font-size: 20px;
+  .main-panel {
+    .navbar-minimize {
+      button {
+        margin-left: 10px;
+
+        i {
+          color: $white;
+          font-size: 20px;
+        }
+      }
+    }
+
+    &.main-panel-dashboard-light {
+      .navbar-minimize {
+        button {
+          margin-left: 10px;
+
+          i {
+            color: $nft-dark;
+            font-size: 20px;
+          }
+        }
       }
     }
   }
@@ -845,6 +869,7 @@
     .sidebar {
       @include transition($sidebar-transition);
       @include transform-translate-x(0px);
+
       &:before {
         content: unset;
       }
@@ -904,7 +929,7 @@
     transform: translate3d(0px, 0, 0);
   }
 
-  .sidebar-mini .sidebar .sidebar-wrapper > .nav li > a p {
+  .sidebar-mini .sidebar .sidebar-wrapper>.nav li>a p {
     opacity: 1;
   }
 
@@ -916,4 +941,4 @@
   .minimize-sidebar {
     display: none;
   }
-}
+}