viniBaxter-desk_front 24.0.0 → 31.0.0

data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_sidebar-and-main-panel.scss

@@ -16,7 +16,7 @@
 }
 .sidebar,
 .off-canvas-sidebar {
-  @include linear-gradient($primary-states, $primary);
+  // @include linear-gradient($primary-states, $primary);
   height: calc(100vh - 90px);
   width: 230px;
   position: fixed;
@@ -126,141 +126,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%;
-        }
-      }
-
-      &.active > a[data-toggle='collapse'] {
-        background: transparent;
-        box-shadow: none;
-        color: $white;
+  @include nav-setup($white, 'normal');
 
-        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 {
@@ -365,24 +234,47 @@
     &:before {
       border-bottom-color: $info;
     }
+    &:not(.sidebar-dashboard-light) {
+      &:before {
+        @include caret-color($info);
+      }
+    }
   }
   &[data='green'] {
     @include linear-gradient($success-states, $success);
     &:before {
       border-bottom-color: $success;
     }
+    &:not(.sidebar-dashboard-light) {
+      &:before {
+        @include caret-color($success);
+      }
+    }
   }
   &[data='orange'] {
     @include linear-gradient($warning-states, $warning);
     &:before {
       border-bottom-color: $warning;
     }
+    &:not(.sidebar-dashboard-light) {
+      &:before {
+        @include caret-color($warning);
+      }
+    }
   }
   &[data='red'] {
     @include linear-gradient($danger-states, $danger);
     &:before {
       border-bottom-color: $danger;
     }
+    &:not(.sidebar-dashboard-light) {
+      &:before {
+        @include caret-color($danger);
+      }
+    }
+  }
+  &[data='light'] {
+    // background-color: #fff !important;
   }
 
   .user {
@@ -445,17 +337,6 @@
       }
     }
   }
-
-  &: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 {
@@ -484,28 +365,46 @@
   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 {
@@ -520,6 +419,46 @@
   .header {
     margin-bottom: 50px;
   }
+
+  &.main-panel-dashboard-light {
+    &[data='light'] {
+      border-top: 2px solid $nft-dark;
+      .fixed-top {
+        border-top: 2px solid $nft-dark;
+      }
+    }
+    > .content {
+      padding: 80px 0px 30px 230px;
+      min-height: calc(100vh - 70px);
+      @include media-breakpoint-up(xl) {
+        .main-content-light {
+          border-radius: 30px 0px 0px 30px;
+          box-shadow: $material-shadow4;
+          height: calc(100vh - 15vh) !important;
+          // position: fixed;
+          // width: 90%;
+          overflow-y: auto;
+          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/topography5.svg');
+          background-repeat: repeat;
+          background-size: contain;
+          // padding: 20px;
+          &: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 {
@@ -667,6 +606,11 @@
     .content {
       padding-left: 30px;
     }
+    &.main-panel-dashboard-light {
+      .content {
+        padding-left: 0px;
+      }
+    }
   }
 }
 
@@ -733,7 +677,7 @@
       }
     }
 
-    .sidebar:hover {
+    .sidebar:hover:not(.sidebar-dashboard-light) {
       width: $sidebar-width;
 
       .logo {
@@ -774,6 +718,15 @@
       > .content {
         padding-left: 130px;
       }
+
+      &.main-panel-dashboard-light {
+        > .content {
+          padding-left: 80px;
+          position: absolute;
+          // z-index: 9999999;
+          width: 100%;
+        }
+      }
     }
 
     footer {
@@ -781,12 +734,25 @@
     }
   }
 
-  .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;
+          }
+        }
       }
     }
   }

data/lib/viniBaxter/sass/desk_front/beckyBaxter/new_nav/_white-content.scss

@@ -1,28 +1,34 @@
 .white-content {
   background: $light-bg;
 
-  .navbar.navbar-transparent .navbar-brand {
+  .navbar.navbar-transparent .navbar-brand,
+  .navbar.bg-white .navbar-brand {
     color: $black-states;
   }
 
-  .navbar.navbar-transparent .navbar-toggler-bar {
+  .navbar.navbar-transparent .navbar-toggler-bar,
+  .navbar.bg-white .navbar-toggler-bar {
     background: $black-states;
   }
-  .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) {
+  .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item),
+  .navbar.bg-white .navbar-nav li a:not(.dropdown-item) {
     color: $black-states;
     & i {
       color: $black-states;
     }
   }
 
-  .navbar.navbar-transparent .navbar-minimize button i {
+  .navbar.navbar-transparent .navbar-minimize button i,
+  .navbar.bg-white .navbar-minimize button i {
     color: $black-states;
   }
 
-  .navbar.navbar-transparent .search-bar.input-group i {
+  .navbar.navbar-transparent .search-bar.input-group i,
+  .navbar.bg-white .search-bar.input-group i {
     color: $black-states;
   }
-  .navbar.navbar-transparent .search-bar.input-group .form-control {
+  .navbar.navbar-transparent .search-bar.input-group .form-control,
+  .navbar.bg-white .search-bar.input-group .form-control {
     color: $default;
     &::placeholder {
       color: $dark-gray;
@@ -32,9 +38,29 @@
   .sidebar {
     box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.1),
       0 4px 20px 0 rgba(0, 0, 0, 0.15);
+
     p {
       color: $opacity-8;
     }
+
+    &.sidebar-dashboard-light {
+      box-shadow: none !important;
+      margin-left: 0px !important;
+
+      ul > li {
+        p,
+        i {
+          color: $nft-grey;
+        }
+        .sidebar-normal,
+        .sidebar-mini-icon {
+          color: $nft-grey !important;
+        }
+        > a {
+          color: $nft-grey !important;
+        }
+      }
+    }
   }
 
   .main-panel {

data/lib/viniBaxter/sass/desk_front/bootstrap/_buttons.scss

@@ -55,6 +55,10 @@
       }
     }
   }
+
+  &.long {
+    padding: $btn-padding-y $btn-padding-x * 2;
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
@@ -73,6 +77,13 @@ fieldset:disabled a.btn {
   }
 }
 
+@each $color, $value in $theme-colors {
+  .btn-rounded-#{$color} {
+    border-radius: 30px !important;
+    border: 1px solid $value !important;
+  }
+}
+
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value);
@@ -80,16 +91,31 @@ fieldset:disabled a.btn {
 }
 
 // Gradient
+@mixin local_mixin_for_gradient_active($color) {
+  @include set-gradient-button($color);
+  color: $light;
+  // background-size: 300% 100%;
+  transition: all 0.4s ease-in-out;
+  border: 0px solid transparent !important;
+  &:hover {
+    background-position: 100% 0;
+    transition: all 0.4s ease-in-out;
+    color: $light;
+  }
+}
+
 @each $color, $value in $theme-gradient-colors {
   .btn-gradient-#{$color} {
-    @include set-gradient-button($color);
-    color: $light;
-    // background-size: 300% 100%;
-    transition: all 0.4s ease-in-out;
-    &:hover {
-      background-position: 100% 0;
-      transition: all 0.4s ease-in-out;
-      color: $light;
+    @include local_mixin_for_gradient_active($color);
+    &[aria-selected='true'] {
+      border: 1px solid #fff !important;
+    }
+    &[aria-selected='false'] {
+      // display: none !important;
+      // @include button-outline-variant($value);
+      background: #fff !important;
+      border: 1px solid #454545 !important;
+      color: #454545 !important;
     }
   }
 }