diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
new file mode 100644
index 000000000..7eac55b11
--- /dev/null
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css
@@ -0,0 +1,29 @@
+.sidebar-footer {
+ width: 230px;
+ height: 40px;
+ margin: 5px 15px;
+ padding: 5px;
+ color: rgb(117, 117, 117);
+ background-color: #fafafa;
+ box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4);
+}
+
+.sidebar-footer .option {
+ margin: 0px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-right: 10px;
+ border-radius: 0px;
+}
+
+.sidebar-footer .vl {
+ border-right: 1px solid #d4d4d4;
+}
+
+.option .style-icon {
+ font-size: 15px;
+ margin: 0px;
+ width: 20px;
+ padding-top: 2px;
+ color: #2e75b6;
+}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
new file mode 100644
index 000000000..5b85a6887
--- /dev/null
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
@@ -0,0 +1,8 @@
+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts
new file mode 100644
index 000000000..3faf72650
--- /dev/null
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarFooterComponent } from './sidebar-footer.component';
+
+describe('SidebarFooterComponent', () => {
+ let component: SidebarFooterComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SidebarFooterComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SidebarFooterComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
new file mode 100644
index 000000000..7b94c4269
--- /dev/null
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-sidebar-footer',
+ templateUrl: './sidebar-footer.component.html',
+ styleUrls: ['./sidebar-footer.component.css']
+})
+export class SidebarFooterComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
index cced65c14..1e5fd15b6 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
@@ -1,23 +1,28 @@
.logo-img {
- width: 60px;
- display: block;
- max-height: none;
- margin-left: 100px;
+ width: 60px;
+ display: block;
+ max-height: none;
+ margin-left: 100px;
}
.logo-img img {
- width: 60px;
- top: 0px;
- position: inherit;
+ width: 60px;
+ top: 0px;
+ position: inherit;
}
.sidebarSubtitle p {
- margin-left: 20px;
- color: rgb(166, 166, 166);
+ margin-left: 20px;
+ color: rgb(166, 166, 166);
}
.nav hr {
- width: 230px;
- border-top: 2px solid #fff;
- border-bottom: 2px solid #e0e2e3;
+ width: 230px;
+ border-top: 1px solid #fff;
+ border-bottom: 2px solid #d4d4d4;
+}
+
+.sidebar-footer {
+ position: relative;
+ height: 48%;
}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index 86333828d..1d9146058 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -45,6 +45,7 @@
+
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
index 581100b4f..d7f6bbabe 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
@@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router';
import { CommonFormsModule } from '../../common/forms/common-forms.module';
import { CommonUiModule } from '../../common/ui/common-ui.module';
import { SidebarComponent } from './sidebar.component';
+import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
@NgModule({
imports: [
@@ -11,7 +12,8 @@ import { SidebarComponent } from './sidebar.component';
RouterModule
],
declarations: [
- SidebarComponent
+ SidebarComponent,
+ SidebarFooterComponent
],
entryComponents: [],
exports: [SidebarComponent]
diff --git a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
index c30a87f9c..0194352ca 100644
--- a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
+++ b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss
@@ -1,503 +1,495 @@
-.wrapper{
- position: relative;
- top: 0;
- height: 100vh;
+.wrapper {
+ position: relative;
+ top: 0;
+ height: 100vh;
}
.sidebar {
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 2;
- width: 260px;
- background: $white-color;
- @include shadow-big();
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 2;
+ width: 260px;
+ background: $white-color;
+ @include shadow-big();
- .caret{
- display: inline-block;
- width: 0;
- height: 0;
- margin-left: 2px;
- vertical-align: middle;
- border-top: 4px dashed;
- border-top: 4px solid\9;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
+ .caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: 2px;
+ vertical-align: middle;
+ border-top: 4px dashed;
+ border-top: 4px solid\9;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ }
+
+ &[data-background-color="black"] {
+ background-color: #191919;
+ }
+ .logo-img {
+ width: 35px;
+ display: block;
+ max-height: 30px;
+ margin-left: 13px;
+ margin-right: 15px;
+
+ img {
+ width: 35px;
+ top: 16px;
+ position: absolute;
}
-
- &[data-background-color="black"]{
- background-color: #191919;
- }
- .logo-img{
- width: 35px;
- display: block;
- max-height: 30px;
- margin-left: 13px;
- margin-right: 15px;
-
- img{
- width: 35px;
- top: 16px;
- position: absolute;
- }
- }
- .sidebar-wrapper{
- position: relative;
- height: calc(100vh - 75px);
- overflow: auto;
- width: 260px;
- z-index: 4;
-
- padding-bottom: 30px;
-
- .dropdown .dropdown-backdrop{
- display: none !important;
- }
-
- .navbar-form{
- border: none;
- box-shadow: none;
-
- .input-group {
- font-size: 1.7em;
- height: 36px;
- width: 78%;
- padding-left: 17px;
- }
- }
-
- > .nav,
- .user .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;
- white-space: nowrap;
- display: block;
-
- }
-
- .sidebar-mini{
- text-transform: uppercase;
- width: 30px;
- margin-right: 15px;
- text-align: center;
- letter-spacing: 1px;
- position: relative;
- float: left;
- display: inherit;
- }
-
- i{
- font-size: 17px;
- line-height: 20px;
- width: 26px;
- }
- }
- }
- }
-
- .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;
-
- .caret{
- margin-top: 13px;
- position: absolute;
- right: 6px;
- }
-
- li{
- > a{
- &:hover,
- &:focus{
- background-color: transparent;
- outline: none;
- }
- }
-
- &:first-child > a{
- margin: 0 15px;
- }
-
- &:hover > a,
- & .dropdown-menu a:hover,
- & .dropdown-menu a:focus,
- &.active > [data-toggle="collapse"]{
- background-color: rgba(200, 200, 200, 0.2);
- color: $black-color;
- box-shadow: none;
- }
-
- &.active > [data-toggle="collapse"]{
- i{
- color: #a9afbb;
- }
- }
-
- &.active > a,
- &.active > a i{
- color: $white-color;
- }
-
- &.separator{
- margin: 15px 0;
-
- &:after{
- width: calc(100% - 30px);
- content: "";
- position: absolute;
- height: 1px;
- left: 15px;
- background-color: rgba(180,180,180, .3);
- }
-
- & + li {
- margin-top: 31px;
- }
- }
- }
-
- p{
- margin: 0;
- line-height: 30px;
- font-size: 14px;
- position: relative;
- display: block;
- height: auto;
- white-space: nowrap;
- }
-
- i{
- font-size: 24px;
- float: left;
- margin-right: 15px;
- line-height: 30px;
- width: 30px;
- text-align: center;
- color: #a9afbb;
- }
- }
-
- .nav li a,
- .nav li .dropdown-menu a{
- margin: 10px 15px 0;
- border-radius: $border-radius-base;
- color: $black-color;
- padding-left: 10px;
- padding-right: 10px;
- text-transform: capitalize;
- font-size: $font-paragraph - 1;
- padding: 10px 15px;
- }
-
-
- .sidebar-background{
- position: absolute;
- z-index: 1;
- height: 100%;
- width: 100%;
- display: block;
- top: 0;
- left: 0;
- background-size: cover;
- background-position: center center;
-
- &:after{
- position: absolute;
- z-index: 3;
- width: 100%;
- height: 100%;
- content: "";
- display: block;
- background: #FFFFFF;
- opacity: .93;
- }
- }
-
- .logo{
- padding: 15px 0px;
- margin: 0;
- display: block;
- position: relative;
- z-index: 4;
-
- &:after{
- content: '';
- position: absolute;
- bottom: 0;
- right: 15px;
- height: 1px;
- width: calc(100% - 30px);
- background-color: rgba(180,180,180, .3);
-
- }
-
- p{
- float: left;
- font-size: 20px;
- margin: 10px 10px;
- color: $white-color;
- line-height: 20px;
- }
-
- .simple-text{
- text-transform: uppercase;
- padding: $padding-small-vertical $padding-zero;
- display: inline-block;
- font-size: 18px;
- color: $black-color;
- white-space: nowrap;
- font-weight: $font-weight-default;
- line-height: 30px;
- overflow: hidden;
- text-align: center;
- display: block;
- }
- }
-
- .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-background-color="black"]{
- @include sidebar-background-color($gray-base, $white-color);
-
- .nav li .dropdown-menu .dropdown-item{
- color: $white-color;
- }
- }
-
- &[data-color="purple"]{
- @include set-background-color-button($brand-primary);
- }
- &[data-color="azure"]{
- @include set-background-color-button($brand-info);
- }
- &[data-color="green"]{
- @include set-background-color-button($brand-success);
- }
- &[data-color="orange"]{
- @include set-background-color-button($brand-warning);
- }
- &[data-color="danger"]{
- @include set-background-color-button($brand-danger);
- }
- &[data-color="rose"]{
- @include set-background-color-button($brand-rose);
- }
-
- &[data-color="white"]{
- @include set-background-color-button($white-color);
- @include sidebar-active-color($black-color);
- }
-
- &[data-background-color="red"]{
- @include sidebar-background-color($brand-danger, $white-color);
-
- .user,
- .logo,
- .nav li.separator{
- &:after{
- background-color: rgba(255,255,255, .3);
- }
- }
-
- .nav{
- li:hover:not(.active) > a,
- li.active > [data-toggle="collapse"]{
- background-color: rgba(255, 255, 255, 0.1);
- }
- }
- }
-
- &[data-image]:after,
- &.has-image:after{
- opacity: .77;
- }
-}
-
-.off-canvas-sidebar .navbar-collapse{
- .nav {
- > li > a,
- > li > a:hover{
- color: $white-color;
- margin: 0 15px;
- }
-
- > li > a:focus,
- > li > a:hover{
- background: rgba(200, 200, 200, 0.2);
- }
- }
-}
-
-
-.main-panel{
+ }
+ .sidebar-wrapper {
position: relative;
- float: right;
- width: $sidebar-width;
- @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+ height: calc(100vh - 75px);
+ overflow: auto;
+ width: 260px;
+ z-index: 4;
- .main-content{
- margin-top: 70px;
- padding: 30px 15px;
- min-height: calc(100vh - 123px);
+ padding-bottom: 10px;
+
+ .dropdown .dropdown-backdrop {
+ display: none !important;
}
- .footer{
- border-top: 1px solid #e7e7e7;
+ .navbar-form {
+ border: none;
+ box-shadow: none;
+
+ .input-group {
+ font-size: 1.7em;
+ height: 36px;
+ width: 78%;
+ padding-left: 17px;
+ }
}
- .navbar{
- margin-bottom: 0;
- }
-
- .header{
- margin-bottom: 30px;
-
- .title{
- margin-top: 10px;
- margin-bottom: 10px;
- }
- }
-}
-
-.perfect-scrollbar-on{
- .sidebar,
- .main-panel{
- height: 100%;
- max-height: 100%;
- }
-}
-
-
-.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;
- -webkit-overflow-scrolling: touch;
-}
-
-.visible-on-sidebar-regular{
- display: inline-block !important;
-}
-.visible-on-sidebar-mini{
- display: none !important;
-}
-
-@media (min-width: 991px) {
- .sidebar-mini{
- .visible-on-sidebar-regular{
- display: none !important;
- }
- .visible-on-sidebar-mini{
- display: inline-block !important;
+ > .nav,
+ .user .user-info {
+ [data-toggle="collapse"] ~ div > ul > li > a {
+ span {
+ display: inline-block;
+ @extend .animation-transition-general;
}
- .sidebar,
- .sidebar .sidebar-wrapper{
- width: 80px;
+ .sidebar-normal {
+ margin: 0;
+ position: relative;
+ transform: translateX(0px);
+ opacity: 1;
+ white-space: nowrap;
+ display: block;
}
- .main-panel{
- width: $sidebar-mini-width;
+ .sidebar-mini {
+ text-transform: uppercase;
+ width: 30px;
+ margin-right: 15px;
+ text-align: center;
+ letter-spacing: 1px;
+ position: relative;
+ float: left;
+ display: inherit;
}
- .sidebar{
- display: block;
- font-weight: 200;
- z-index: 9999;
-
- .logo{
- a.logo-normal{
- opacity: 0;
- @include transform-translate-x(-25px);
- }
- }
-
- .sidebar-wrapper{
- > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
- .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
- .user .user-info > a > span,
- > .nav li > a p{
- @include transform-translate-x(-25px);
- opacity: 0;
- }
- }
- }
-
- .sidebar:hover{
- width: 260px;
-
- .logo{
- a.logo-normal{
- opacity: 1;
- @include transform-translate-x(0px);
- }
- }
-
- .sidebar-wrapper{
- width: 260px;
-
- > .nav li > a p,
- > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
- .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
- .user .user-info > a > span{
- @include transform-translate-x(0px);
- opacity: 1;
- }
- }
- }
- }
-
- .sidebar {
- .nav .nav-item {
- &.active-pro {
- position: absolute;
- width: 100%;
- bottom: 13px;
+ i {
+ font-size: 17px;
+ line-height: 20px;
+ width: 26px;
}
}
}
+ }
+
+ .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;
+
+ .caret {
+ margin-top: 13px;
+ position: absolute;
+ right: 6px;
+ }
+
+ li {
+ > a {
+ &:hover,
+ &:focus {
+ background-color: transparent;
+ outline: none;
+ }
+ }
+
+ &:first-child > a {
+ margin: 0 15px;
+ }
+
+ &:hover > a,
+ & .dropdown-menu a:hover,
+ & .dropdown-menu a:focus,
+ &.active > [data-toggle="collapse"] {
+ background-color: rgba(200, 200, 200, 0.2);
+ color: $black-color;
+ box-shadow: none;
+ }
+
+ &.active > [data-toggle="collapse"] {
+ i {
+ color: #a9afbb;
+ }
+ }
+
+ &.active > a,
+ &.active > a i {
+ color: $white-color;
+ }
+
+ &.separator {
+ margin: 15px 0;
+
+ &:after {
+ width: calc(100% - 30px);
+ content: "";
+ position: absolute;
+ height: 1px;
+ left: 15px;
+ background-color: rgba(180, 180, 180, 0.3);
+ }
+
+ & + li {
+ margin-top: 31px;
+ }
+ }
+ }
+
+ p {
+ margin: 0;
+ line-height: 30px;
+ font-size: 14px;
+ position: relative;
+ display: block;
+ height: auto;
+ white-space: nowrap;
+ }
+
+ i {
+ font-size: 24px;
+ float: left;
+ margin-right: 15px;
+ line-height: 30px;
+ width: 30px;
+ text-align: center;
+ color: #a9afbb;
+ }
+ }
+
+ .nav li a,
+ .nav li .dropdown-menu a {
+ margin: 10px 15px 0;
+ border-radius: $border-radius-base;
+ color: $black-color;
+ padding-left: 10px;
+ padding-right: 10px;
+ text-transform: capitalize;
+ font-size: $font-paragraph - 1;
+ padding: 10px 15px;
+ }
+
+ .sidebar-background {
+ position: absolute;
+ z-index: 1;
+ height: 100%;
+ width: 100%;
+ display: block;
+ top: 0;
+ left: 0;
+ background-size: cover;
+ background-position: center center;
+
+ &:after {
+ position: absolute;
+ z-index: 3;
+ width: 100%;
+ height: 100%;
+ content: "";
+ display: block;
+ background: #ffffff;
+ opacity: 0.93;
+ }
+ }
+
+ .logo {
+ padding: 15px 0px;
+ margin: 0;
+ display: block;
+ position: relative;
+ z-index: 4;
+
+ &:after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ right: 15px;
+ height: 1px;
+ width: calc(100% - 30px);
+ background-color: rgba(180, 180, 180, 0.3);
+ }
+
+ p {
+ float: left;
+ font-size: 20px;
+ margin: 10px 10px;
+ color: $white-color;
+ line-height: 20px;
+ }
+
+ .simple-text {
+ text-transform: uppercase;
+ padding: $padding-small-vertical $padding-zero;
+ display: inline-block;
+ font-size: 18px;
+ color: $black-color;
+ white-space: nowrap;
+ font-weight: $font-weight-default;
+ line-height: 30px;
+ overflow: hidden;
+ text-align: center;
+ display: block;
+ }
+ }
+
+ .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-background-color="black"] {
+ @include sidebar-background-color($gray-base, $white-color);
+
+ .nav li .dropdown-menu .dropdown-item {
+ color: $white-color;
+ }
+ }
+
+ &[data-color="purple"] {
+ @include set-background-color-button($brand-primary);
+ }
+ &[data-color="azure"] {
+ @include set-background-color-button($brand-info);
+ }
+ &[data-color="green"] {
+ @include set-background-color-button($brand-success);
+ }
+ &[data-color="orange"] {
+ @include set-background-color-button($brand-warning);
+ }
+ &[data-color="danger"] {
+ @include set-background-color-button($brand-danger);
+ }
+ &[data-color="rose"] {
+ @include set-background-color-button($brand-rose);
+ }
+
+ &[data-color="white"] {
+ @include set-background-color-button($white-color);
+ @include sidebar-active-color($black-color);
+ }
+
+ &[data-background-color="red"] {
+ @include sidebar-background-color($brand-danger, $white-color);
+
+ .user,
+ .logo,
+ .nav li.separator {
+ &:after {
+ background-color: rgba(255, 255, 255, 0.3);
+ }
+ }
+
+ .nav {
+ li:hover:not(.active) > a,
+ li.active > [data-toggle="collapse"] {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+
+ &[data-image]:after,
+ &.has-image:after {
+ opacity: 0.77;
+ }
+
+ .nav .nav-item {
+ &.active-pro {
+ position: absolute;
+ width: 100%;
+ bottom: 0px;
+ }
+ }
+}
+
+.off-canvas-sidebar .navbar-collapse {
+ .nav {
+ > li > a,
+ > li > a:hover {
+ color: $white-color;
+ margin: 0 15px;
+ }
+
+ > li > a:focus,
+ > li > a:hover {
+ background: rgba(200, 200, 200, 0.2);
+ }
+ }
+}
+
+.main-panel {
+ position: relative;
+ float: right;
+ width: $sidebar-width;
+ @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+ .main-content {
+ margin-top: 70px;
+ padding: 30px 15px;
+ min-height: calc(100vh - 123px);
+ }
+
+ .footer {
+ border-top: 1px solid #e7e7e7;
+ }
+
+ .navbar {
+ margin-bottom: 0;
+ }
+
+ .header {
+ margin-bottom: 30px;
+
+ .title {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ }
+}
+
+.perfect-scrollbar-on {
+ .sidebar,
+ .main-panel {
+ height: 100%;
+ max-height: 100%;
+ }
+}
+
+.sidebar,
+.main-panel,
+.sidebar-wrapper {
+ -webkit-transition-property: top, bottom, width;
+ transition-property: top, bottom, width;
+ -webkit-transition-duration: 0.2s, 0.2s, 0.35s;
+ transition-duration: 0.2s, 0.2s, 0.35s;
+ -webkit-transition-timing-function: linear, linear, ease;
+ transition-timing-function: linear, linear, ease;
+ -webkit-overflow-scrolling: touch;
+}
+
+.visible-on-sidebar-regular {
+ display: inline-block !important;
+}
+.visible-on-sidebar-mini {
+ display: none !important;
+}
+
+@media (min-width: 991px) {
+ .sidebar-mini {
+ .visible-on-sidebar-regular {
+ display: none !important;
+ }
+ .visible-on-sidebar-mini {
+ display: inline-block !important;
+ }
+
+ .sidebar,
+ .sidebar .sidebar-wrapper {
+ width: 80px;
+ }
+
+ .main-panel {
+ width: $sidebar-mini-width;
+ }
+
+ .sidebar {
+ display: block;
+ font-weight: 200;
+ z-index: 9999;
+
+ .logo {
+ a.logo-normal {
+ opacity: 0;
+ @include transform-translate-x(-25px);
+ }
+ }
+
+ .sidebar-wrapper {
+ > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
+ .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
+ .user .user-info > a > span,
+ > .nav li > a p {
+ @include transform-translate-x(-25px);
+ opacity: 0;
+ }
+ }
+ }
+
+ .sidebar:hover {
+ width: 260px;
+
+ .logo {
+ a.logo-normal {
+ opacity: 1;
+ @include transform-translate-x(0px);
+ }
+ }
+
+ .sidebar-wrapper {
+ width: 260px;
+
+ > .nav li > a p,
+ > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
+ .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
+ .user .user-info > a > span {
+ @include transform-translate-x(0px);
+ opacity: 1;
+ }
+ }
+ }
+ }
}