mirror of
				https://github.com/richard-loafle/fuse-angular.git
				synced 2025-11-04 14:03:33 +00:00 
			
		
		
		
	theming stufz
This commit is contained in:
		
							parent
							
								
									21cc769dd3
								
							
						
					
					
						commit
						156b859ecc
					
				@ -1,3 +1,3 @@
 | 
			
		||||
:host {
 | 
			
		||||
 | 
			
		||||
    z-index: 1;
 | 
			
		||||
}
 | 
			
		||||
@ -1,4 +1,4 @@
 | 
			
		||||
<md-toolbar>
 | 
			
		||||
<md-toolbar class="mat-elevation-z1 md-white-bg">
 | 
			
		||||
 | 
			
		||||
  <span>Footer</span>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,5 @@
 | 
			
		||||
:host {
 | 
			
		||||
    z-index: 3;
 | 
			
		||||
 | 
			
		||||
    &.above {
 | 
			
		||||
        position: relative;
 | 
			
		||||
 | 
			
		||||
@ -6,7 +6,7 @@
 | 
			
		||||
 | 
			
		||||
<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">
 | 
			
		||||
 | 
			
		||||
@ -26,7 +26,7 @@
 | 
			
		||||
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
    <fuse-navbar *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
 | 
			
		||||
    <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
 | 
			
		||||
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -20,7 +20,7 @@ fuse-navbar {
 | 
			
		||||
    background-color: #FFFFFF;
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
    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);
 | 
			
		||||
    transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
 | 
			
		||||
    transform: translateX(0);
 | 
			
		||||
 | 
			
		||||
@ -1,4 +1,5 @@
 | 
			
		||||
:host {
 | 
			
		||||
    z-index: 3;
 | 
			
		||||
 | 
			
		||||
    .loading-spinner {
 | 
			
		||||
        width: 32px;
 | 
			
		||||
 | 
			
		||||
@ -1 +1 @@
 | 
			
		||||
<span>{{ item.title }}</span>
 | 
			
		||||
<span class="hint-text">{{ item.title }}</span>
 | 
			
		||||
 | 
			
		||||
@ -8,7 +8,8 @@
 | 
			
		||||
            display: block;
 | 
			
		||||
            position: absolute;
 | 
			
		||||
            min-width: 1.6rem;
 | 
			
		||||
            border-top: 2px solid rgba(0, 0, 0, .12);
 | 
			
		||||
            border-top: 2px solid;
 | 
			
		||||
            opacity: 0.2;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        > span {
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,7 @@ import { FuseNavigationService } from './navigation.service';
 | 
			
		||||
})
 | 
			
		||||
export class FuseNavigationComponent
 | 
			
		||||
{
 | 
			
		||||
    navigation: object[];
 | 
			
		||||
    navigation: any[];
 | 
			
		||||
 | 
			
		||||
    constructor(private navigationService: FuseNavigationService)
 | 
			
		||||
    {
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .mat-ripple-element {
 | 
			
		||||
            background: rgba(0, 0, 0, 0.1);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
        // If the base text color is white...
 | 
			
		||||
    @else {
 | 
			
		||||
@ -83,6 +87,10 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 | 
			
		||||
        .divider {
 | 
			
		||||
            color: rgba(255, 255, 255, 0.12) !important;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .mat-ripple-element {
 | 
			
		||||
            background: rgba(255, 255, 255, 0.1);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -3,10 +3,11 @@
 | 
			
		||||
    .nav-subheader {
 | 
			
		||||
        display: flex;
 | 
			
		||||
        align-items: center;
 | 
			
		||||
        height: 56px;
 | 
			
		||||
        color: rgba(0, 0, 0, .54);
 | 
			
		||||
        height: 48px;
 | 
			
		||||
        font-weight: 500;
 | 
			
		||||
        padding-left: 24px;
 | 
			
		||||
        margin-top: 8px;
 | 
			
		||||
        font-size: 12px;
 | 
			
		||||
        white-space: nowrap;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -22,7 +23,7 @@
 | 
			
		||||
            overflow: hidden;
 | 
			
		||||
            cursor: pointer;
 | 
			
		||||
            user-select: none;
 | 
			
		||||
            color: rgba(0, 0, 0, .87);
 | 
			
		||||
            color: currentColor;
 | 
			
		||||
 | 
			
		||||
            > span {
 | 
			
		||||
                flex: 1;
 | 
			
		||||
@ -61,11 +62,11 @@
 | 
			
		||||
                min-width: 16px;
 | 
			
		||||
                min-height: 16px;
 | 
			
		||||
                line-height: 16px;
 | 
			
		||||
                color: map_get($mat-light-theme-foreground, icon);;
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        &.nav-collapse {
 | 
			
		||||
            display: block;
 | 
			
		||||
 | 
			
		||||
            > .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);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -67,7 +67,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
 | 
			
		||||
                    display: flex;
 | 
			
		||||
                    flex-direction: column;
 | 
			
		||||
                    flex: 1;
 | 
			
		||||
                    background: #FFFFFF;
 | 
			
		||||
                    background: mat-color($background, background);
 | 
			
		||||
                    overflow: hidden;
 | 
			
		||||
                    @include mat-elevation(7);
 | 
			
		||||
 | 
			
		||||
@ -84,7 +84,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
 | 
			
		||||
                    .content {
 | 
			
		||||
                        display: flex;
 | 
			
		||||
                        flex: 1;
 | 
			
		||||
                        background: #FFFFFF;
 | 
			
		||||
                        background: mat-color($background, background);
 | 
			
		||||
                        overflow: auto;
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
@ -167,7 +167,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
 | 
			
		||||
                            display: flex;
 | 
			
		||||
                            flex-direction: column;
 | 
			
		||||
                            flex: 1;
 | 
			
		||||
                            background: #FFFFFF;
 | 
			
		||||
                            background: mat-color($background, background);
 | 
			
		||||
                            overflow: hidden;
 | 
			
		||||
                            @include mat-elevation(7);
 | 
			
		||||
 | 
			
		||||
@ -191,7 +191,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
 | 
			
		||||
                            .content {
 | 
			
		||||
                                display: flex;
 | 
			
		||||
                                flex: 1;
 | 
			
		||||
                                background: #FFFFFF;
 | 
			
		||||
                                background: mat-color($background, background);
 | 
			
		||||
                                overflow: auto;
 | 
			
		||||
                            }
 | 
			
		||||
                        }
 | 
			
		||||
@ -318,7 +318,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
 | 
			
		||||
                        @include mat-elevation(7);
 | 
			
		||||
 | 
			
		||||
                        .content {
 | 
			
		||||
                            background: #FFFFFF;
 | 
			
		||||
                            background: mat-color($background, background);
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,6 @@
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    flex: 1;
 | 
			
		||||
    background: #FFFFFF;
 | 
			
		||||
    padding: 24px;
 | 
			
		||||
 | 
			
		||||
    .select-message-text {
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,6 @@
 | 
			
		||||
 | 
			
		||||
:host {
 | 
			
		||||
    flex-shrink: 0;
 | 
			
		||||
    background: #FAFAFA;
 | 
			
		||||
    position: relative;
 | 
			
		||||
    padding: 16px 24px;
 | 
			
		||||
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 | 
			
		||||
 | 
			
		||||
@ -1,7 +1,6 @@
 | 
			
		||||
:host{
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    background: #FAFAFA;
 | 
			
		||||
    position: relative;
 | 
			
		||||
    padding: 0;
 | 
			
		||||
    border-right: 1px solid rgba(0,0,0,.12);
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user