@agilemotion/oui-react-js 1.2.7 → 1.2.8

package/dist/assets/scss/black-dashboard-react/custom/_sidebar-and-main-panel.scss

@@ -0,0 +1,763 @@
+.wrapper{
+  position: relative;
+  top: 0;
+  height: 100vh;
+
+  &.wrapper-full-page{
+    min-height: 100vh;
+    height: auto;
+  }
+}
+
+.sidebar-wrapper ul li div.collapse ul li div.collapse ul li a,
+.sidebar-wrapper ul li div.collapse ul li div.collapsing ul li a,
+.sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a{
+
+  font-weight: inherit;
+  color: inherit;
+
+}
+.sidebar,
+.off-canvas-sidebar{
+  @include linear-gradient($primary-states, $primary);
+  height: calc(100vh - 90px);
+  width: 308px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  background-size: cover;
+  background-position: center center;
+  display: block;
+  box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.6);
+  margin-top: 80px;
+  margin-left: 20px;
+  border-radius: 5px;
+
+  .sidebar-wrapper{
+    width: $full-width;
+    min-height: 100%;
+    max-height: calc(100vh - 705px);
+    z-index: 4;
+    position: relative;
+    overflow: auto;
+
+    .dropdown .dropdown-backdrop{
+      display: none !important;
+    }
+
+    .navbar-form{
+      border: none;
+    }
+
+    > .nav,
+    .user .info{
+      [data-toggle="collapse"] ~ div > ul > li > a{
+        span{
+          display: inline-block;
+          // @extend .animation-transition-general;
+        }
+
+        .sidebar-normal{
+          margin: 0;
+          position: relative;
+          transform: translateX(0px);
+          opacity: 1;
+          display: block;
+          line-height: 23px;
+          z-index: 1;
+          color: inherit;
+          /*margin-left: 40px;*/
+          /*padding-left: 4px;*/
+        }
+
+        .sidebar-mini-icon{
+          text-transform: none;
+          margin-right: 10px;
+          margin-left: 0;
+          text-align: center;
+          position: relative;
+          float: left;
+          z-index: 1;
+          display: inherit;
+          line-height: 24px;
+          color: $black;
+          font-size: 0.85rem;
+        }
+
+        i{
+          font-size: 17px;
+          line-height: 20px;
+          width: 26px;
+        }
+      }
+    }
+
+    [data-toggle="collapse"] ~ div > ul > li:hover > a{
+      .sidebar-mini-icon, .sidebar-normal{
+        color: inherit;
+        font-weight: inherit;
+      }
+
+    }
+
+    .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{
+      opacity: 0;
+    }
+
+
+  }
+
+  .navbar-minimize{
+    position: absolute;
+    right: 20px;
+    top: 2px;
+    opacity: 1;
+
+    // @extend .animation-transition-general;
+  }
+  .logo-tim{
+    border-radius: 50%;
+    border: 1px solid #333;
+    display: block;
+    height: 61px;
+    width: 61px;
+    float: left;
+    overflow: hidden;
+
+    img{
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  .nav{
+    margin-top: 20px;
+    display: block;
+    max-height: 60vh;
+    overflow: auto;
+
+    .caret{
+      top: 14px;
+      position: absolute;
+      left: -16px;
+      color: $gray-600;
+      transform: rotate(-90deg);
+    }
+
+    li{
+      > a + div .nav{
+        margin-top: 5px;
+        li > a{
+          margin-top: 0px;
+          padding: 4px 4px;
+        }
+      }
+/*MENU ITEM*/
+      > a{
+        /*margin: 0 15px 0 0;*/
+        border-radius: $btn-round-radius;
+        color: $black;
+        letter-spacing: 0.02857em;
+        display: block;
+        text-decoration: none;
+        position: relative;
+        text-transform: none;
+        cursor: pointer;
+        font-size: 0.85rem;
+        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+        padding: 4px 8px;
+        line-height: $line-height-lg;
+        font-weight: $font-weight-normal;
+        opacity: .8;
+      }
+
+     /* &:first-child > a{
+        margin: 0 15px 0 32px;
+
+      }*/
+
+      &:hover:not(.active) > a,
+      &:focus:not(.active) > a{
+        p,i{
+          color: $black;
+        }
+      }
+
+      &:hover:not(.active) > a i,
+      &:focus:not(.active) > a i{
+        color: $black;
+      }
+
+      &.active > a:not([data-toggle="collapse"]){
+        background: transparent;
+
+        i,p{
+          color: $black;
+        }
+
+        &:before{
+          content: " ";
+          position: absolute;
+          height: 6px;
+          width: 6px;
+          top: 22px;
+          left: -4px;
+          background: $white;
+          border-radius: 50%;
+        }
+      }
+
+      &.active > a[data-toggle="collapse"]{
+        background: transparent;
+        box-shadow: none;
+        color: $black;
+
+        i{
+          color: $black;
+        }
+
+        & + div .nav .active a{
+
+          box-shadow: none;
+          .sidebar-mini-icon, .sidebar-normal{
+            color: $black;
+            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%;
+        }
+      }
+    }
+
+    i{
+      font-size: 20px;
+      float: left;
+      margin-right: 12px;
+      line-height: 24px;
+      text-align: center;
+      color: $gray-600;
+      position: relative;
+    }
+  }
+
+  .logo{
+    position: relative;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    z-index: 4;
+
+    .agility{
+      align-items: center;
+    }
+
+    a.logo-mini,
+    a.logo-normal{
+      @extend .animation-transition-general;
+    }
+
+    a.logo-mini{
+      opacity: 1;
+      float: left;
+      text-align: center;
+      margin-left: 12px;
+      margin-right: 12px;
+      img {
+        border-radius: 50%;
+        width: 30px;
+      }
+    }
+
+    a.logo-normal{
+      display: block;
+      opacity: 1;
+      align-items: center;
+      @include transform-translate-x(0px);
+    }
+
+    &:after{
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 15px;
+      height: 1px;
+      width: calc(100% - 30px);
+      background: $gray-400;
+
+    }
+
+    .simple-text, p{
+      text-transform: none;
+      padding: $padding-base-vertical 0;
+      display: block;
+      white-space: nowrap;
+      // font-size: $font-size-base;
+      color: $black;
+      text-decoration: none;
+      font-weight: $font-weight-normal;
+      line-height: 24px;
+      overflow: hidden;
+      font-size: 0.85rem;
+    }
+  }
+
+  .logo-tim{
+    border-radius: 50%;
+    border: 1px solid #333;
+    display: block;
+    height: 61px;
+    width: 61px;
+    float: left;
+    overflow: hidden;
+
+    img{
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  &[data="agility"]{
+    @include linear-gradient($agility-states, $agility-states);
+  }
+
+  &[data="blue"]{
+    @include linear-gradient($info-states, $info);
+  }
+  &[data="green"]{
+    @include linear-gradient($success-states, $success);
+  }
+
+  .user{
+    padding-bottom: 20px;
+    margin:20px auto 0;
+    position: relative;
+
+    &:after{
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 15px;
+      height: 1px;
+      width: calc(100% - 30px);
+      background: $opacity-5;
+    }
+
+    .photo{
+      width: 34px;
+      height: 34px;
+      overflow: hidden;
+      float: left;
+      z-index: 5;
+      margin-right: 10px;
+      border-radius: 50%;
+      margin-left: 23px;
+      box-shadow: $box-shadow-raised;
+      @extend .animation-transition-general;
+
+      img{
+        width: $full-width;
+      }
+    }
+
+    a{
+      color: $black;
+      text-decoration: none;
+      padding: $padding-base-vertical 15px;
+      white-space: nowrap;
+      @extend .animation-transition-general;
+    }
+
+    .info{
+      > a{
+        display: block;
+        line-height: 18px;
+
+        > span{
+          @extend .animation-transition-general;
+          display: block;
+          position: relative;
+          opacity: 1;
+        }
+      }
+
+      .caret{
+        position: absolute;
+        top: 8px;
+        right: 18px;
+      }
+    }
+  }
+
+  transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+
+}
+
+
+.visible-on-sidebar-regular{
+  display: inline-block !important;
+}
+.visible-on-sidebar-mini{
+  display: none !important;
+}
+
+.off-canvas-sidebar{
+  .nav {
+    > li > a,
+    > li > a:hover{
+      color: $black;
+    }
+
+    > li > a:focus{
+      background: rgba(200, 200, 200, 0.2);
+    }
+  }
+}
+
+
+.main-panel {
+  position: relative;
+  float: right;
+  width: $full-width;
+  min-height: 100vh;
+  border-top: 2px solid $agility-secondary-states;
+  background: linear-gradient($background-black, $background-states-black);
+
+  @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+  &[data="blue"]{
+    border-top: 2px solid $info;
+  }
+
+  &[data="green"]{
+    border-top: 2px solid $success;
+  }
+
+  &[data="primary"]{
+    border-top: 2px solid $primary;
+  }
+
+  &[data="agility"]{
+    border-top: 2px solid $agility-secondary-states;
+  }
+
+  > .content {
+    padding: 78px 16px 30px 344px;
+    min-height: 100vh;
+  }
+
+  > .navbar {
+    margin-bottom: 0;
+  }
+
+
+  .header {
+    margin-bottom: 50px;
+  }
+}
+
+
+.perfect-scrollbar-on{
+  .main-panel{
+    height: 100%;
+    max-height: 100%;
+  }
+}
+
+.sidebar,
+.main-panel,
+.sidebar-wrapper{
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 991px) {
+  .sidebar,
+  .main-panel,
+  .sidebar-wrapper{
+    -webkit-transition-property: top,bottom,width;
+    transition-property: top,bottom, width;
+    -webkit-transition-duration: .2s,.2s, .35s;
+    transition-duration: .2s,.2s, .35s;
+    -webkit-transition-timing-function: linear,linear,ease;
+    transition-timing-function: linear,linear,ease;
+  }
+
+  .sidebar-mini{
+    .visible-on-sidebar-regular{
+      display: none !important;
+    }
+    .visible-on-sidebar-mini{
+      display: inline-block !important;
+    }
+
+    .sidebar{
+      width: 80px;
+
+      .sidebar-wrapper{
+        width: 100% !important;
+      }
+    }
+
+
+    .sidebar{
+      display: block;
+      z-index: 1030;
+      box-shadow: $sidebar-box-shadow;
+
+      .logo{
+        a.logo-normal{
+          opacity: 0;
+          @include transform-translate-x(-25px);
+        }
+      }
+
+      .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{
+          @include transform-translate-x(-25px);
+          opacity: 0;
+        }
+      }
+
+      .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{
+        opacity: 1;
+      }
+    }
+
+    .sidebar:hover {
+      width: 260px;
+
+      .logo {
+        a.logo-normal {
+          opacity: 1;
+          @include transform-translate-x(0);
+        }
+
+      }
+
+      .navbar-minimize{
+        opacity: 1;
+      }
+      .sidebar-wrapper{
+        width: 260px;
+
+        > .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;
+      }
+
+
+
+    }
+
+    .main-panel{
+      > .content{
+        padding-left: 130px;
+      }
+    }
+
+    footer{
+      padding-left: 130px;
+    }
+  }
+
+  .navbar-minimize{
+    button {
+      margin-left: 10px;
+      i{
+        color: $black;
+        font-size: 20px;
+      }
+    }
+  }
+
+}
+
+.panel-header {
+  height: 260px;
+  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: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
+  position: relative;
+  overflow: hidden;
+
+  .header{
+    .title{
+      color: $black;
+    }
+    .category{
+      max-width: 600px;
+      color: $opacity-5;
+      margin: 0 auto;
+      font-size: 13px;
+
+      a{
+        color: $black;
+      }
+    }
+  }
+}
+
+.horizontal {
+  content: '';
+  position: absolute;
+  bottom: 150px;
+  right: 15px;
+  height: 1px;
+  width: calc(100% - 30px);
+  background: $opacity-5;
+
+}
+
+.sidebar-app-logo {
+  content: '';
+  height: 1px;
+  margin: 8px;
+  width: calc(100% - 16px);
+  border-top: 1px solid $gray-400;
+}
+
+.panel-header-sm{
+  height: 135px;
+}
+
+.panel-header-lg{
+  height: 380px
+}
+
+@media screen and (max-width: 991px){
+  .sidebar{
+    position: fixed;
+    display: block;
+    top: 0;
+    height: 100%;
+    width: 260px;
+    right: auto;
+    left: 0;
+    margin: 0;
+    border-radius: 0;
+    z-index: 1032;
+    visibility: visible;
+    overflow-y: visible;
+    padding: 0;
+    @include transition(0.5s cubic-bezier(0.685, 0.0473, 0.346, 1));
+    @include transform-translate-x(-260px);
+  }
+
+  .wrapper{
+    @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+
+  .main-panel {
+    width: 100%;
+    .content {
+      padding-left: 20px;
+    }
+  }
+
+  .nav-open{
+    .main-panel{
+      right: 0;
+      @include transform-translate-x(260px);
+    }
+
+    .sidebar{
+
+      @include transition(0.5s cubic-bezier(0.685, 0.0473, 0.346, 1));
+      @include transform-translate-x(0px);
+      &:before{
+        content: unset;
+      }
+    }
+
+    body{
+      position: relative;
+      overflow-x: hidden;
+    }
+
+    .menu-on-right{
+
+      .main-panel{
+        @include transform-translate-x(-260px);
+      }
+
+      .navbar-collapse,
+      .sidebar{
+        @include transform-translate-x(0px);
+      }
+
+      #bodyClick{
+        right: 260px;
+        left: auto;
+      }
+    }
+    .fixed-plugin {
+      display: none;
+    }
+  }
+
+  .menu-on-right{
+    .sidebar{
+      left: auto;
+      right: 0;
+      @include transform-translate-x(260px);
+    }
+  }
+
+  #bodyClick{
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    opacity: 1;
+    top: 0;
+    right: 0;
+    left: 260px;
+    content: "";
+    z-index: 9999;
+    overflow-x: hidden;
+    background-color: transparent;
+    @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+  }
+  .navbar .dropdown-menu{
+    position: static !important;
+  }
+
+}
+
+@media screen and (max-width: 768px){
+
+  .main-panel .content {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+}