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

(Colors) Fixed: primary, accent and warn color classes don't obey the palettes' selected default hue value when used by themselves (without the -hue suffix)

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-27 20:55:36 +03:00
parent d8782a78d5
commit 09bd4b9fee
3 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/@fuse/scss/partials/_colors.scss
View File

@ -13,10 +13,10 @@
// If it's a light theme, use a darker background
// color other than the default #fafafa
@if ($is-dark == false) {
background: #F5F5F5;
} @else {
@if ($is-dark) {
background: map-get($background, background);
} @else {
background: #F5F5F5;
}
}
@ -300,7 +300,8 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
}
// Run the generator one more time for default values (500)
@if ($hue == 500) {
// if we are not working with primary, accent or warn palettes
@if ($hue == 500 and $paletteName != 'primary' and $paletteName != 'accent' and $paletteName != 'warn') {
// Generate color classes
@include generate-color-classes($paletteName, $color, $contrast, '');
@ -318,6 +319,33 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
}
}
}
// Run the generator again for the selected default hue values for
// primary, accent and warn palettes
//
// We are doing this because the default hue value can be changed
// by the user when the Material theme being generated.
@if ($paletteName == 'primary' or $paletteName == 'accent' or $paletteName == 'warn') {
// Get the color and the contrasting color for the selected
// default hue
$color: map-get($palette, 'default');
$contrast: map-get($palette, 'default-contrast');
// Generate color classes
@include generate-color-classes($paletteName, $color, $contrast, '');
// Add color to the correct list depending on the contrasting color
// If the contrast color is dark
@if (rgba(black, 1) == rgba($contrast, 1)) {
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
}
// if the contrast color is light
@else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
}
}
}
// Generate contrasting colors

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

@ -187,13 +187,13 @@ body.theme-default {
@include components-theme($theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
$palettes: (
primary: $default-primary-palette,
accent: $default-accent-palette,
warn: $default-warn-palette
);
@include fuse-color-classes($custom-palettes);
@include fuse-color-classes($palettes);
}
// -----------------------------------------------------------------------------------------------------
@ -222,13 +222,13 @@ body.theme-yellow-light {
@include components-theme($yellow-light-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
$palettes: (
primary: $yellow-light-theme-primary-palette,
accent: $yellow-light-theme-accent-palette,
warn: $yellow-light-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
@include fuse-color-classes($palettes);
}
// -----------------------------------------------------------------------------------------------------
@ -257,13 +257,13 @@ body.theme-blue-gray-dark {
@include components-theme($blue-gray-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
$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($custom-palettes);
@include fuse-color-classes($palettes);
}
// -----------------------------------------------------------------------------------------------------
@ -292,11 +292,11 @@ body.theme-pink-dark {
@include components-theme($pink-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
$palettes: (
primary: $pink-dark-theme-primary-palette,
accent: $pink-dark-theme-accent-palette,
warn: $pink-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
@include fuse-color-classes($palettes);
}

4
src/app/main/ui/colors/colors.component.html
View File

@ -67,7 +67,9 @@
<div class="colored-bg p-8" fxLayout="row" [ngClass]="selectedColor">
<div class="colored-bg p-8" fxFlex="30" fxLayoutAlign="start center">500</div>
<div class="colored-bg p-8" fxFlex="30" fxLayoutAlign="start center">
Default
</div>
<div class="colored-bg p-8" [ngClass]="selectedColor" fxFlex="30">
<div class="pb-4">.{{selectedColor}}</div>