simple theming

+ modified the native webkit scrollbar styles a bit
+ todo & mail app sidenav header colors
+ added a way to disable perfect-scrollbars
This commit is contained in:
Sercan Yemen
2017-08-22 13:10:46 +03:00
parent 59b7c4a70b
commit c56f3dc35b
8 changed files with 94 additions and 22 deletions

View File

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

View File

@@ -14,6 +14,7 @@
.logo-text {
font-size: 24px;
line-height: 24px;
}
}

View File

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

View File

@@ -14,6 +14,7 @@
.logo-text {
font-size: 24px;
line-height: 24px;
}
}

View File

@@ -1,9 +1,24 @@
@import "src/app/core/scss/fuse";
fuse-main {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
&.disable-perfect-scrollbar {
.ps {
-webkit-overflow-scrolling: touch !important;
overflow: auto !important;
}
.ps__scrollbar-x-rail,
.ps__scrollbar-y-rail {
display: none !important;
}
}
> .mat-sidenav-container {
display: flex;
flex: 1;
@@ -14,6 +29,10 @@ fuse-main {
overflow: hidden;
height: 100vh;
@include media-breakpoint-down('sm') {
height: auto !important;
}
#fuse-main-content {
display: flex;
flex: 1;