@agilemotion/oui-react-js 1.1.0 → 1.2.1

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

@@ -1,763 +0,0 @@
-.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;
-  }
-
-}