purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

theming stufz

Browse Source
This commit is contained in:
Sercan Yemen 2017-07-31 18:51:47 +03:00
parent 21cc769dd3
commit 156b859ecc
15 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/layout/content/content.component.scss
View File

@ -1,3 +1,3 @@
:host { :host {
z-index: 1;
} }

2
src/app/core/components/layout/footer/footer.component.html
View File

@ -1,4 +1,4 @@
<md-toolbar> <md-toolbar class="mat-elevation-z1 md-white-bg">
<span>Footer</span> <span>Footer</span>

1
src/app/core/components/layout/footer/footer.component.scss
View File

@ -1,4 +1,5 @@
:host { :host {
z-index: 3;
&.above { &.above {
position: relative; position: relative;

4
src/app/core/components/layout/layout.component.html
View File

@ -6,7 +6,7 @@
<div id="wrapper"> <div id="wrapper">
<fuse-navbar *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar> <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
<div class="content-wrapper"> <div class="content-wrapper">
@ -26,7 +26,7 @@
</div> </div>
<fuse-navbar *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar> <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
</div> </div>

2
src/app/core/components/layout/navbar/navbar.component.scss
View File

@ -20,7 +20,7 @@ fuse-navbar {
background-color: #FFFFFF; background-color: #FFFFFF;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
z-index: 20; z-index: 2;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear; transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
transform: translateX(0); transform: translateX(0);

1
src/app/core/components/layout/toolbar/toolbar.component.scss
View File

@ -1,4 +1,5 @@
:host { :host {
z-index: 3;
.loading-spinner { .loading-spinner {
width: 32px; width: 32px;

2
src/app/core/components/navigation/nav-subheader/nav-subheader.component.html
View File

@ -1 +1 @@
<span>{{ item.title }}</span> <span class="hint-text">{{ item.title }}</span>

3
src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
View File

@ -8,7 +8,8 @@
display: block; display: block;
position: absolute; position: absolute;
min-width: 1.6rem; min-width: 1.6rem;
border-top: 2px solid rgba(0, 0, 0, .12); border-top: 2px solid;
opacity: 0.2;
} }
> span { > span {

2
src/app/core/components/navigation/navigation.component.ts
View File

@ -9,7 +9,7 @@ import { FuseNavigationService } from './navigation.service';
}) })
export class FuseNavigationComponent export class FuseNavigationComponent
{ {
navigation: object[]; navigation: any[];
constructor(private navigationService: FuseNavigationService) constructor(private navigationService: FuseNavigationService)
{ {

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

@ -56,6 +56,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
color: rgba(0, 0, 0, 0.12) !important; color: rgba(0, 0, 0, 0.12) !important;
} }
.mat-ripple-element {
background: rgba(0, 0, 0, 0.1);
}
} }
// If the base text color is white... // If the base text color is white...
@else { @else {
@ -83,6 +87,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.divider { .divider {
color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.12) !important;
} }
.mat-ripple-element {
background: rgba(255, 255, 255, 0.1);
}
} }
} }

22
src/app/core/scss/partials/_navigation.scss
View File

@ -3,10 +3,11 @@
.nav-subheader { .nav-subheader {
display: flex; display: flex;
align-items: center; align-items: center;
height: 56px; height: 48px;
color: rgba(0, 0, 0, .54);
font-weight: 500; font-weight: 500;
padding-left: 24px; padding-left: 24px;
margin-top: 8px;
font-size: 12px;
white-space: nowrap; white-space: nowrap;
} }
@ -22,7 +23,7 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
color: rgba(0, 0, 0, .87); color: currentColor;
> span { > span {
flex: 1; flex: 1;
@ -61,11 +62,11 @@
min-width: 16px; min-width: 16px;
min-height: 16px; min-height: 16px;
line-height: 16px; line-height: 16px;
color: map_get($mat-light-theme-foreground, icon);;
} }
} }
&.nav-collapse { &.nav-collapse {
display: block;
> .children { > .children {
@ -87,5 +88,18 @@
} }
} }
} }
}
> .nav-item {
&.nav-collapse {
background: transparent;
transition: background 200ms ease-in-out;
&.open {
background: rgba(0, 0, 0, 0.12);
}
}
} }
} }

10
src/app/core/scss/partials/_page-layouts.scss
View File

@ -67,7 +67,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
background: #FFFFFF; background: mat-color($background, background);
overflow: hidden; overflow: hidden;
@include mat-elevation(7); @include mat-elevation(7);
@ -84,7 +84,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
.content { .content {
display: flex; display: flex;
flex: 1; flex: 1;
background: #FFFFFF; background: mat-color($background, background);
overflow: auto; overflow: auto;
} }
} }
@ -167,7 +167,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
background: #FFFFFF; background: mat-color($background, background);
overflow: hidden; overflow: hidden;
@include mat-elevation(7); @include mat-elevation(7);
@ -191,7 +191,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
.content { .content {
display: flex; display: flex;
flex: 1; flex: 1;
background: #FFFFFF; background: mat-color($background, background);
overflow: auto; overflow: auto;
} }
} }
@ -318,7 +318,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
@include mat-elevation(7); @include mat-elevation(7);
.content { .content {
background: #FFFFFF; background: mat-color($background, background);
} }
} }
} }

1
src/app/main/apps/mail/mail-details/mail-details.component.scss
View File

@ -4,7 +4,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
background: #FFFFFF;
padding: 24px; padding: 24px;
.select-message-text { .select-message-text {

1
src/app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss
View File

@ -2,7 +2,6 @@
:host { :host {
flex-shrink: 0; flex-shrink: 0;
background: #FAFAFA;
position: relative; position: relative;
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);

1
src/app/main/apps/mail/mail-list/mail-list.component.scss
View File

@ -1,7 +1,6 @@
:host{ :host{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #FAFAFA;
position: relative; position: relative;
padding: 0; padding: 0;
border-right: 1px solid rgba(0,0,0,.12); border-right: 1px solid rgba(0,0,0,.12);