diff --git a/AJAX_Full_Project_GULP/css/style.css b/AJAX_Full_Project_GULP/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/AJAX_Full_Project_GULP/css/style.css
+++ b/AJAX_Full_Project_GULP/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/AJAX_Full_Project_GULP/scss/core/navigation/_sidebar.scss b/AJAX_Full_Project_GULP/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/AJAX_Full_Project_GULP/scss/core/navigation/_sidebar.scss
+++ b/AJAX_Full_Project_GULP/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/AJAX_Starter_GULP/css/style.css b/AJAX_Starter_GULP/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/AJAX_Starter_GULP/css/style.css
+++ b/AJAX_Starter_GULP/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/AJAX_Starter_GULP/scss/core/navigation/_sidebar.scss b/AJAX_Starter_GULP/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/AJAX_Starter_GULP/scss/core/navigation/_sidebar.scss
+++ b/AJAX_Starter_GULP/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/Angular2_CLI_Full_Project/src/assets/css/style.css b/Angular2_CLI_Full_Project/src/assets/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/Angular2_CLI_Full_Project/src/assets/css/style.css
+++ b/Angular2_CLI_Full_Project/src/assets/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/Angular2_CLI_Full_Project/src/scss/core/navigation/_sidebar.scss b/Angular2_CLI_Full_Project/src/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/Angular2_CLI_Full_Project/src/scss/core/navigation/_sidebar.scss
+++ b/Angular2_CLI_Full_Project/src/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/Angular2_CLI_Starter/src/assets/css/style.css b/Angular2_CLI_Starter/src/assets/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/Angular2_CLI_Starter/src/assets/css/style.css
+++ b/Angular2_CLI_Starter/src/assets/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/Angular2_CLI_Starter/src/scss/core/navigation/_sidebar.scss b/Angular2_CLI_Starter/src/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/Angular2_CLI_Starter/src/scss/core/navigation/_sidebar.scss
+++ b/Angular2_CLI_Starter/src/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/Angular_Full_Project_GULP/css/style.css b/Angular_Full_Project_GULP/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/Angular_Full_Project_GULP/css/style.css
+++ b/Angular_Full_Project_GULP/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/Angular_Full_Project_GULP/scss/core/navigation/_sidebar.scss b/Angular_Full_Project_GULP/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/Angular_Full_Project_GULP/scss/core/navigation/_sidebar.scss
+++ b/Angular_Full_Project_GULP/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/Angular_Starter_GULP/css/style.css b/Angular_Starter_GULP/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/Angular_Starter_GULP/css/style.css
+++ b/Angular_Starter_GULP/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/Angular_Starter_GULP/scss/core/navigation/_sidebar.scss b/Angular_Starter_GULP/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/Angular_Starter_GULP/scss/core/navigation/_sidebar.scss
+++ b/Angular_Starter_GULP/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/Static_Full_Project_GULP/css/style.css b/Static_Full_Project_GULP/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/Static_Full_Project_GULP/css/style.css
+++ b/Static_Full_Project_GULP/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/Static_Full_Project_GULP/scss/core/navigation/_sidebar.scss b/Static_Full_Project_GULP/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/Static_Full_Project_GULP/scss/core/navigation/_sidebar.scss
+++ b/Static_Full_Project_GULP/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}
diff --git a/Static_Starter_GULP/css/style.css b/Static_Starter_GULP/css/style.css
index 5ff48ab42b982ec2ab90f25c304dcd0828208bdf..929baf32245adf252f6fe1cd8a26a638ec253e2c 100644
--- a/Static_Starter_GULP/css/style.css
+++ b/Static_Starter_GULP/css/style.css
@@ -5460,20 +5460,20 @@ body:not(.top-nav) .sidebar {
body.sidebar-nav.compact-nav .sidebar {
z-index: 1029;
width: 50px; }
- body.sidebar-nav.compact-nav .sidebar .sidebar-items {
+ body.sidebar-nav.compact-nav .sidebar .sidebar-nav {
overflow: visible; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-title, body.sidebar-nav.compact-nav .sidebar ul.nav li.divider {
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item {
- border-left: 0 !important; }
+ border-left: 0 !important;
+ overflow: hidden;
+ width: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item ul {
background: #263238; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link {
position: relative;
- width: 50px;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
line-height: 50px;
white-space: nowrap;
border-left: 0 !important; }
@@ -5490,7 +5490,7 @@ body:not(.top-nav) .sidebar {
line-height: 50px; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link .tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none; }
body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item a.nav-link:hover {
@@ -5510,16 +5510,29 @@ body:not(.top-nav) .sidebar {
position: absolute;
top: 0;
left: 100%; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
- display: none; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
- width: 250px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
- display: inline; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol a.nav-link {
- width: 200px; }
- body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
- display: inline; } }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open {
+ background: #304047; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > a.nav-link i {
+ color: #20a8d8; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item.nav-dropdown.open > ol {
+ display: none; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover {
+ width: 250px;
+ overflow: visible;
+ background: #20a8d8;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > a.nav-link {
+ width: 250px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol {
+ max-height: 10000px;
+ display: inline;
+ transition: 0s; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ul li a.nav-link, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover > ol li a.nav-link {
+ width: 200px; }
+ body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ul, body.sidebar-nav.compact-nav .sidebar ul.nav li.nav-item:hover.nav-dropdown.open > ol {
+ display: inline; } }
nav.top-nav {
position: absolute;
diff --git a/Static_Starter_GULP/scss/core/navigation/_sidebar.scss b/Static_Starter_GULP/scss/core/navigation/_sidebar.scss
index 16f1365c45308710e6b347e941d96bc237b1a269..45c3080333768b292e6c098999a612f1467f21b3 100644
--- a/Static_Starter_GULP/scss/core/navigation/_sidebar.scss
+++ b/Static_Starter_GULP/scss/core/navigation/_sidebar.scss
@@ -258,8 +258,7 @@ body:not(.top-nav) {
.sidebar {
z-index: $zindex-navbar-fixed - 1;
width: $sidebar-compact-width;
-
- .sidebar-items {
+ .sidebar-nav {
overflow: visible;
}
@@ -271,6 +270,8 @@ body:not(.top-nav) {
li.nav-item {
border-left: 0 !important;
+ overflow: hidden;
+ width: $sidebar-compact-width;
ul {
background: $sidebar-bg;
@@ -278,10 +279,9 @@ body:not(.top-nav) {
a.nav-link {
position: relative;
- width: $sidebar-compact-width;
padding: 0 15px 0 0;
margin: 0;
- overflow: hidden;
+
line-height: $sidebar-compact-height;
white-space: nowrap;
border-left: 0 !important;
@@ -306,7 +306,7 @@ body:not(.top-nav) {
.tag {
position: absolute;
- top: 6px;
+ top: 14px;
right: 15px;
display: none;
}
@@ -343,6 +343,10 @@ body:not(.top-nav) {
&.nav-dropdown {
&.open {
+ background: $sidebar-nav-link-active-bg;
+ > a.nav-link i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
> ul, > ol {
display: none;
}
@@ -350,22 +354,25 @@ body:not(.top-nav) {
}
&:hover {
+ width: $sidebar-width + $sidebar-compact-width;
+ overflow: visible;
+ background: $sidebar-nav-link-hover-bg;
+ transition: 0s;
+
> a.nav-link {
- @if $sidebar-width < 249 {
- width: $sidebar-width + $sidebar-compact-width;
- } @else {
- width: $sidebar-width;
- }
+ width: $sidebar-width + $sidebar-compact-width;
}
> ul, > ol {
+ max-height: 10000px;
display: inline;
+ transition: 0s;
- a.nav-link {
- @if $sidebar-width < 249 {
+ li {
+ width: $sidebar-width;
+
+ a.nav-link {
width: $sidebar-width;
- } @else {
- width: $sidebar-width - $sidebar-compact-width;
}
}
}