Page layout tweaks

Removed body color class
This commit is contained in:
Sercan Yemen 2018-06-12 12:09:00 +03:00
parent 5bf9fd177b
commit 20f80e3fe4
14 changed files with 23 additions and 19 deletions

View File

@ -58,7 +58,7 @@ fuse-sidebar {
bottom: 0;
left: 0;
right: 0;
z-index: 3;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;

View File

@ -9,4 +9,5 @@ body {
margin: 0;
padding: 0;
overflow: hidden;
background: #F5F5F5;
}

View File

@ -191,7 +191,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 4;
overflow: hidden;
@include mat-elevation(7);
@ -200,7 +199,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
box-shadow: none;
+ .center {
z-index: 5;
z-index: 1001;
}
&.left-positioned {
@ -439,7 +438,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
width: 240px;
min-width: 240px;
max-width: 240px;
z-index: 4;
overflow: hidden;
@include mat-elevation(7);
@ -448,7 +446,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
box-shadow: none;
+ .center {
z-index: 5;
z-index: 1001;
}
&.left-positioned {
@ -516,10 +514,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
> .content {
display: flex;
min-height: 0;
> .sidebar {
background: none;
box-shadow: none;
&.locked-open {
background: none;
box-shadow: none;
}
.content {
overflow: auto;

View File

@ -25,6 +25,7 @@ navbar {
&:not(.top-navbar) {
height: 100%;
overflow: hidden;
}
.navbar-vertical {
@ -63,7 +64,8 @@ navbar {
}
.navbar-content {
flex: 1;
flex: 1 1 auto;
overflow-y: auto;
}
}

View File

@ -35,7 +35,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Left sidenav with tabs and content scroll</h2>
<h2 class="m-0">Left sidebar with tabs and content scroll</h2>
</div>

View File

@ -35,7 +35,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Left sidenav with tabs and inner scroll</h2>
<h2 class="m-0">Left sidebar with tabs and inner scroll</h2>
</div>

View File

@ -35,7 +35,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Right sidenav with tabs and content scroll</h2>
<h2 class="m-0">Right sidebar with tabs and content scroll</h2>
</div>

View File

@ -35,7 +35,7 @@
<mat-icon>menu</mat-icon>
</button>
<h2 class="m-0">Right sidenav with tabs and inner scroll</h2>
<h2 class="m-0">Right sidebar with tabs and inner scroll</h2>
</div>

View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatIconModule, MatSidenavModule, MatTabsModule } from '@angular/material';
import { MatButtonModule, MatIconModule, MatTabsModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseDemoModule } from '@fuse/components/demo/demo.module';
@ -160,7 +160,6 @@ const routes: Routes = [
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatTabsModule,
FuseSidebarModule,

View File

@ -4,7 +4,7 @@
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-left-sidebar-4')">
(click)="toggleSidebar('simple-left-sidebar-3')">
<mat-icon>menu</mat-icon>
</button>

View File

@ -19,7 +19,7 @@
<div class="content">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-left-sidebar-3" position="left" lockedOpen="gt-md">
<fuse-sidebar class="sidebar" name="simple-left-sidebar-4" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>

View File

@ -4,7 +4,7 @@
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('simple-right-sidebar-4')">
(click)="toggleSidebar('simple-right-sidebar-3')">
<mat-icon>menu</mat-icon>
</button>

View File

@ -19,7 +19,7 @@
<div class="content">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="simple-right-sidebar-3" position="left" lockedOpen="gt-md">
<fuse-sidebar class="sidebar" name="simple-right-sidebar-4" position="left" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content p-24" fusePerfectScrollbar>

View File

@ -181,7 +181,7 @@
<!-- / FUSE Splash Screen CSS -->
</head>
<body class="mat-grey-100-bg">
<body>
<!-- FUSE Splash Screen -->
<fuse-splash-screen id="fuse-splash-screen">