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

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-28 08:11:51 +03:00
parent bfa1dd9e84
commit 3d85b172c4
1 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/app/app.theme.scss
View File

@ -97,7 +97,8 @@ $default-warn-palette: mat-palette($mat-red);
// Create the Material theme object // Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette); $theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
// Add ".theme-default" class to the body to activate this theme // Add ".theme-default" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-default { body.theme-default {
// Create an Angular Material theme from the $theme map // Create an Angular Material theme from the $theme map
@ -110,51 +111,17 @@ body.theme-default {
@include components-theme($theme); @include components-theme($theme);
// Generate Fuse color classes for primary, accent and warn colors // Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: ( $palettes: (
primary: $default-primary-palette, primary: $default-primary-palette,
accent: $default-accent-palette, accent: $default-accent-palette,
warn: $default-warn-palette warn: $default-warn-palette
); );
@include fuse-color-classes($custom-palettes); @include fuse-color-classes($palettes);
} }
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// @ Define the default dark theme // @ Define a yellow light theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-dark-theme-primary-palette: mat-palette($mat-blue, 600, 400, 700);
$default-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$default-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$default-dark-theme: mat-dark-theme($default-dark-theme-primary-palette, $default-dark-theme-accent-palette, $default-dark-theme-warn-palette);
// Add ".theme-default-dark" class to the body to activate this theme
body.theme-default-dark {
// Generate the Angular Material theme
@include angular-material-theme($default-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($default-dark-theme);
// Apply the theme to the user components
@include components-theme($default-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $default-dark-theme-primary-palette,
accent: $default-dark-theme-accent-palette,
warn: $default-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the yellow light theme
// ----------------------------------------------------------------------------------------------------- // -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes // Define the primary, accent and warn palettes
@ -165,7 +132,8 @@ $yellow-light-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object // Create the Material theme object
$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette); $yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);
// Add ".theme-yellow-light" class to the body to activate this theme // Add ".theme-yellow-light" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-yellow-light { body.theme-yellow-light {
// Generate the Angular Material theme // Generate the Angular Material theme
@ -178,11 +146,81 @@ body.theme-yellow-light {
@include components-theme($yellow-light-theme); @include components-theme($yellow-light-theme);
// Generate Fuse color classes for primary, accent and warn colors // Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: ( $palettes: (
primary: $yellow-light-theme-primary-palette, primary: $yellow-light-theme-primary-palette,
accent: $yellow-light-theme-accent-palette, accent: $yellow-light-theme-accent-palette,
warn: $yellow-light-theme-warn-palette warn: $yellow-light-theme-warn-palette
); );
@include fuse-color-classes($custom-palettes); @include fuse-color-classes($palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define a blue-gray dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue);
$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
// Add ".theme-blue-gray-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-blue-gray-dark {
// Generate the Angular Material theme
@include angular-material-theme($blue-gray-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($blue-gray-dark-theme);
// Apply the theme to the user components
@include components-theme($blue-gray-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$palettes: (
primary: $blue-gray-dark-theme-primary-palette,
accent: $blue-gray-dark-theme-accent-palette,
warn: $blue-gray-dark-theme-warn-palette
);
@include fuse-color-classes($palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define a pink dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$pink-dark-theme-primary-palette: mat-palette($mat-pink);
$pink-dark-theme-accent-palette: mat-palette($mat-pink);
$pink-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$pink-dark-theme: mat-dark-theme($pink-dark-theme-primary-palette, $pink-dark-theme-accent-palette, $pink-dark-theme-warn-palette);
// Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-pink-dark {
// Generate the Angular Material theme
@include angular-material-theme($pink-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($pink-dark-theme);
// Apply the theme to the user components
@include components-theme($pink-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$palettes: (
primary: $pink-dark-theme-primary-palette,
accent: $pink-dark-theme-accent-palette,
warn: $pink-dark-theme-warn-palette
);
@include fuse-color-classes($palettes);
} }