purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-04-18 14:22:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Navbar) Added classes to the navbar containing fuse-sidebar's to contain their custom styles

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-12 09:25:56 +03:00
parent 0cd5d613e0
commit 25a6ca2684
6 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -1,60 +1,63 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
fuse-sidebar { fuse-sidebar {
overflow: hidden;
&.folded:not(.unfolded) { &.navbar-fuse-sidebar {
overflow: hidden;
navbar { &.folded:not(.unfolded) {
navbar-vertical-style-1 { navbar {
.navbar-top { navbar-vertical-style-1 {
padding: 12px 0;
justify-content: center;
.buttons { .navbar-top {
display: none; padding: 12px 0;
} justify-content: center;
.logo { .buttons {
.logo-icon {
width: 32px;
height: 32px;
}
.logo-text {
display: none; display: none;
} }
.logo {
.logo-icon {
width: 32px;
height: 32px;
}
.logo-text {
display: none;
}
}
} }
}
.navbar-scroll-container { .navbar-scroll-container {
.user { .user {
padding: 12px 0; padding: 12px 0;
.avatar-container { .avatar-container {
position: relative; position: relative;
top: auto; top: auto;
padding: 0; padding: 0;
.avatar { .avatar {
width: 40px; width: 40px;
height: 40px; height: 40px;
}
}
.username,
.email {
display: none;
} }
} }
.username, .navbar-content {
.email { margin-top: 0;
display: none;
} }
} }
.navbar-content {
margin-top: 0;
}
} }
} }
} }

23
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -1,22 +1,25 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
fuse-sidebar { fuse-sidebar {
overflow: hidden;
&.folded:not(.unfolded) { &.navbar-fuse-sidebar {
overflow: hidden;
navbar { &.folded:not(.unfolded) {
navbar-vertical-style-2 { navbar {
.navbar-header { navbar-vertical-style-2 {
padding: 0 13px;
.logo { .navbar-header {
padding: 0 13px;
.logo-text { .logo {
opacity: 0;
transition: opacity 200ms ease; .logo-text {
opacity: 0;
transition: opacity 200ms ease;
}
} }
} }
} }

2
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -99,7 +99,7 @@
<!-- LEFT NAVBAR --> <!-- LEFT NAVBAR -->
<ng-template #leftNavbar> <ng-template #leftNavbar>
<fuse-sidebar name="navbar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <navbar [variant]="fuseConfig.layout.navbar.variant"

4
src/app/layout/vertical/layout-1/layout-1.component.html
View File

@ -101,7 +101,7 @@
<!-- LEFT NAVBAR --> <!-- LEFT NAVBAR -->
<ng-template #leftNavbar> <ng-template #leftNavbar>
<fuse-sidebar name="navbar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
@ -113,7 +113,7 @@
<!-- RIGHT NAVBAR --> <!-- RIGHT NAVBAR -->
<ng-template #rightNavbar> <ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right" <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">

4
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -101,7 +101,7 @@
<!-- LEFT NAVBAR --> <!-- LEFT NAVBAR -->
<ng-template #leftNavbar> <ng-template #leftNavbar>
<fuse-sidebar name="navbar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
@ -113,7 +113,7 @@
<!-- RIGHT NAVBAR --> <!-- RIGHT NAVBAR -->
<ng-template #rightNavbar> <ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right" <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">

4
src/app/layout/vertical/layout-3/layout-3.component.html
View File

@ -87,7 +87,7 @@
<!-- LEFT NAVBAR --> <!-- LEFT NAVBAR -->
<ng-template #leftNavbar> <ng-template #leftNavbar>
<fuse-sidebar name="navbar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
@ -99,7 +99,7 @@
<!-- RIGHT NAVBAR --> <!-- RIGHT NAVBAR -->
<ng-template #rightNavbar> <ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right" <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">