purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 13:03:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

simple theming

Browse Source 
+ 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.module.ts
View File

@ -19,10 +19,6 @@ import { UIModule } from './main/content/ui/ui.module';
import { ComponentsModule } from './main/content/components/components.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
const appRoutes: Routes = [
{
path : 'apps/mail',
@ -68,7 +64,7 @@ const appRoutes: Routes = [
InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 125}),
PerfectScrollbarModule.forRoot(PERFECT_SCROLLBAR_CONFIG),
PerfectScrollbarModule.forRoot(),
FuseMainModule,

52
src/app/core/scss/partials/_colors.scss
View File

@ -105,6 +105,50 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
}
}
@mixin generateMaterialElementColors($contrastColor) {
// If the contrast color is white...
$foreground: $mat-dark-theme-foreground;
// If the contrast color is black...
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
$foreground: $mat-light-theme-foreground;
}
// Input
.mat-input-placeholder {
color: mat-color($foreground, hint-text);
}
.mat-input-underline {
background-color: mat-color($foreground, divider);
}
// Select
.mat-select-trigger,
.mat-select-arrow {
color: mat-color($foreground, hint-text);
}
.mat-select-underline {
background-color: mat-color($foreground, divider);
}
.mat-select-disabled .mat-select-value,
.mat-select-arrow,
.mat-select-trigger {
color: mat-color($foreground, hint-text);
}
.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
}
.mat-select-value {
color: mat-color($foreground, text);
}
}
// Color classes generator mixin
@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
@ -119,6 +163,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// Generate text color levels
// based on current contrast color
@include generateTextColorLevels($contrastColor);
// Generate material element colors
// based on current contrast color
@include generateMaterialElementColors($contrastColor);
}
.#{$colorName}#{$hue}-fg {
@ -127,6 +175,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
// Generate text color levels
// based on current contrast color
@include generateTextColorLevels($color);
// Generate material element colors
// based on current contrast color
@include generateMaterialElementColors($color);
}
.#{$colorName}#{$hue}-border {

27
src/app/core/scss/partials/_scrollbars.scss
View File

@ -1,19 +1,20 @@
::-webkit-scrollbar {
width: 8px;
height: 8px;
width: 12px;
height: 12px;
background-color: rgba(0, 0, 0, 0);
opacity: 0;
border-radius: 100px;
&:hover {
background-color: #EEE;
opacity: 0.9;
}
}
::-webkit-scrollbar:hover {
background-color: rgba(0, 0, 0, 0.12);
}
::-webkit-scrollbar-thumb {
background-color: #AAA;
border-radius: 100px;
&:active {
background: #999;
}
border: 2px solid transparent;
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.37);
border-radius: 24px;
}
::-webkit-scrollbar-thumb:active {
box-shadow: inset 0 0 0 24px rgba(0, 0, 0, 0.54);
border-radius: 24px;
}

5
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
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>

1
src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.scss
View File

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

5
src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
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>

1
src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.scss
View File

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

19
src/app/main/main.component.scss
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;