added header-bg image

This commit is contained in:
Sercan Yemen 2017-08-18 15:09:12 +03:00
parent 723d9e110f
commit 953f8cf44a
9 changed files with 18 additions and 19 deletions

View File

@ -10,6 +10,9 @@ $header-height-sm: 100px !default;
$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
// Top bg image
$top-bg-image: url('assets/images/backgrounds/header-bg.png');
.page-layout {
position: relative;
overflow-x: hidden;
@ -31,6 +34,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
right: 0;
left: 0;
height: $carded-header-height;
background-image: $top-bg-image;
@include media-breakpoint('sm') {
height: $carded-header-height-sm;
@ -269,13 +273,8 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
min-width: 100%;
// Top bg
.top-bg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
left: 0;
height: $header-height;
.header {
background-image: $top-bg-image;
}
// Fullwidth

View File

@ -1,5 +1,5 @@
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="header white-fg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon s-32 white-fg">mail</md-icon>
<span class="logo-text">Mailbox</span>

View File

@ -1,5 +1,5 @@
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="header white-fg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon s-32 white-fg">check_box</md-icon>
<span class="logo-text">To-do</span>

View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Fullwidth with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->

View File

@ -8,7 +8,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header white-fg p-24" fxLayout="row" fxLayoutAlign="start center">
<h2>Fullwidth with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

View File

@ -11,7 +11,7 @@
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24">
<div class="header white-fg p-24">
<h2>Left sidenav with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->

View File

@ -11,7 +11,7 @@
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -31,7 +31,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24">
<div class="header white-fg p-24">
<h2>Left sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

View File

@ -10,7 +10,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24">
<div class="header white-fg p-24">
<h2>Right sidenav with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -49,7 +49,7 @@
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

View File

@ -10,7 +10,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24">
<div class="header white-fg p-24">
<h2>Right sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->
@ -49,7 +49,7 @@
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24">
<div class="header p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->