Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-31 14:48:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(sidebar): fix #997

Browse source
This commit is contained in:
Alexander Zhukov 2017-04-20 13:28:56 +03:00
parent 4931da2d22
commit 2a5d9463b1
8 changed files with 186 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

203
src/app/theme/components/baSidebar/baSidebar.scss
View file

@ -1,11 +1,48 @@
@import '../../sass/conf/conf';
$sidebar-scroll-width: 4px;
$angle-left: "\f100";
$angle-right: "\f101";
$angle-left: '\f100';
$angle-right: '\f101';
:host /deep/{
@mixin default-sublist() {
padding: 0;
list-style: none;
position: relative;
display: none;
&.expanded {
display: block;
}
> ba-menu-item > li {
display: block;
float: none;
padding: 0;
border-bottom: none;
position: relative;
a {
display: block;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $sidebar-text;
padding-left: 52px;
height: auto;
line-height: 29px;
&:hover {
color: $primary;
}
}
&.selected:not(.with-sub-menu) > a {
border: none;
background-color: $primary;
&:hover {
color: $sidebar-text;
}
}
}
}
:host /deep/ {
.al-sidebar {
width: $sidebar-width;
top: $top-height;
@ -114,59 +151,11 @@ $angle-right: "\f101";
}
.slimScrollBar, .slimScrollRail {
border-radius: 0px !important;
border-radius: 0 !important;
width: $sidebar-scroll-width !important;
left: $sidebar-width - $sidebar-scroll-width;
}
@mixin layout-collapsed() {
.al-main {
margin-left: 50px;
}
.al-footer {
padding-left: 83px
}
}
@mixin default-sublist() {
padding: 0;
list-style: none;
position: relative;
display: none;
&.expanded {
display: block;
}
> ba-menu-item > li {
display: block;
float: none;
padding: 0;
border-bottom: none;
position: relative;
a {
display: block;
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $sidebar-text;
padding-left: 52px;
height: auto;
line-height: 29px;
&:hover {
color: $primary;
}
}
&.selected:not(.with-sub-menu) > a {
border: none;
background-color: $primary;
&:hover {
color: $sidebar-text;
}
}
}
}
.al-sidebar-sublist {
@include default-sublist();
}
@ -188,119 +177,9 @@ $angle-right: "\f101";
top: 94px;
}
@mixin sidebar-collapsed() {
.al-sidebar {
width: 52px;
.fa-angle-down, .fa-angle-up {
opacity: 0;
}
.al-sidebar-sublist {
position: absolute;
top: -1px;
left: 52px;
@include bg-translucent-dark(0.8);
width: 0;
display: block;
overflow: hidden;
transition: width 0.5s ease;
&.slide-right {
width: 135px;
}
&:before {
display: none;
}
li {
&:before {
display: none;
}
a {
padding-left: 18px;
padding-right: 18px;
min-width: 130px;
white-space: nowrap;
}
}
}
.sidebar-hover-elem, .sidebar-select-elem {
left: 48px;
}
}
}
@mixin sidebar-hidden() {
.al-sidebar {
width: 0;
}
.sidebar-hover-elem, .sidebar-select-elem {
display: none;
}
}
@mixin sidebar-overlap() {
.al-sidebar {
width: $sidebar-width;
@include bg-translucent-dark(0.75);
transition: width 0.5s ease;
.fa-angle-down, .fa-angle-up {
opacity: 1;
}
.al-sidebar-sublist {
@include default-sublist();
top: auto;
left: auto;
background: none;
width: auto;
overflow: visible;
transition: none;
}
.sidebar-hover-elem, .sidebar-select-elem {
left: $sidebar-width - 4;
transition: left 0.5s ease;
}
}
}
.menu-collapsed {
.slimScrollBar, .slimScrollRail {
display: none !important;
}
}
@media (min-width: 1200px) {
.menu-collapsed {
@include layout-collapsed();
}
}
@media (min-width: $resXS + 1) {
.menu-collapsed {
@include sidebar-collapsed();
}
}
@media (max-width: 1200px) and (min-width: $resXS) {
@include layout-collapsed();
}
@media (max-width: 1200px) {
@include sidebar-overlap();
}
@media (max-width: $resXS) {
.menu-collapsed {
@include sidebar-hidden();
}
.al-main {
margin-left: 0;
}
.al-footer {
padding-left: 0;
}
}
}

4
src/app/theme/initial.scss
View file

@ -1,4 +0,0 @@
@import 'sass/conf/conf';
@import 'sass/preloader';
@import 'sass/ionicons';
@import 'sass/fonts';

27
src/app/theme/theme.scss
View file

@ -1,12 +1,15 @@
@import "sass/conf/conf";
@import "sass/bootstrap-overrides/overrides";
@import "~animate.css/animate";
@import "sass/typography";
@import "sass/buttons";
@import "sass/icons";
@import "sass/layout";
@import "sass/socicon";
@import "sass/table";
@import "sass/form";
@import "sass/treeView";
@import "sass/modal";
@import 'sass/conf/conf';
@import 'sass/bootstrap-overrides/overrides';
@import '~animate.css/animate';
@import 'sass/typography';
@import 'sass/buttons';
@import 'sass/icons';
@import 'sass/layout';
@import 'sass/socicon';
@import 'sass/table';
@import 'sass/form';
@import 'sass/treeView';
@import 'sass/modal';
@import 'sass/preloader';
@import 'sass/ionicons';
@import 'sass/fonts';