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

color.scss added white and black

Browse Source
This commit is contained in:
Sercan Yemen 2017-07-31 13:17:02 +03:00
parent 2225ace5be
commit aa0c1d7a87
3 changed files with 91 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,8 @@ $matColorsMap: (
brown: $mat-brown,
grey: $mat-grey,
blue-grey: $mat-blue-grey,
white: $mat-white,
black: $mat-black,
primary: $primary,
accent: $accent,
warn: $warn
@ -36,20 +38,50 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.md-#{$colorName}#{$hue}-bg {
background-color: $bgColor !important;
color: $fgColor;
color: $fgColor !important;
@if (rgba(black, 1) == rgba($fgColor, 1)) {
&.secondary-text,
.secondary-text,
&.mat-icon,
.mat-icon,
&.icon,
.icon {
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38) !important;
}
&.divider,
.divider {
color: rgba(0, 0, 0, 0.12) !important;
}
} @else {
&.secondary-text,
.secondary-text {
color: rgba($fgColor, .7);
color: rgba(255, 255, 255, 0.70) !important;
}
.hint-text {
color: rgba($fgColor, .3);
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(255, 255, 255, 0.50) !important;
}
.fade-text {
color: rgba($fgColor, .12);
&.divider,
.divider {
color: rgba(255, 255, 255, 0.12) !important;
}
}
}
.#{$colorName}#{$hue}-fg {
@ -85,6 +117,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
$bgColor: map-get($colorMap, $hue);
$fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
@if ($bgColor != null and $fgColor != null) {
@include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
// Run the generator one more time for default values (500)
@ -93,58 +127,4 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
}
}
}
// Black text
.black-fg,
.black-text {
color: rgba(0, 0, 0, 0.87) !important;
&.secondary-text,
.secondary-text,
&.mat-icon,
.mat-icon,
&.icon,
.icon {
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38) !important;
}
&.divider,
.divider,
&.faint-text,
.faint-text {
color: rgba(0, 0, 0, 0.12) !important;
}
}
// White text
.white-fg,
.white-text {
color: rgb(255, 255, 255) !important;
&.secondary-text,
.secondary-text {
color: rgba(255, 255, 255, 0.70) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(255, 255, 255, 0.50) !important;
}
&.divider,
.divider,
&.faint-text,
.faint-text {
color: rgba(255, 255, 255, 0.12) !important;
}
}

40
src/app/core/scss/variables/_theme.scss
View File

@ -1,20 +1,34 @@
@import '~@angular/material/theming';
$mat-white: (
500: white,
contrast: (
500: $black-87-opacity
)
);
$mat-black: (
500: black,
contrast: (
500: white,
)
);
$mat-fusedark: (
50: #ececee,
100: #c5c6cb,
200: #9ea1a9,
300: #7d818c,
400: #5c616f,
500: #3c4252,
600: #353a48,
700: #2d323e,
50: #ECECEE,
100: #C5C6CB,
200: #9EA1A9,
300: #7D818C,
400: #5C616F,
500: #3C4252,
600: #353A48,
700: #2D323E,
800: #262933,
900: #1e2129,
A100: #c5c6cb,
A200: #9ea1a9,
A400: #5c616f,
A700: #2d323e,
900: #1E2129,
A100: #C5C6CB,
A200: #9EA1A9,
A400: #5C616F,
A700: #2D323E,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,

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

@ -4,7 +4,7 @@
<div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="space-between center">
<h1 class="title">Colors</h1>
<a md-raised-button class="reference-button"
<a md-raised-button class="reference-button md-white-bg"
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
target="_blank">
<md-icon>link</md-icon>
@ -30,6 +30,12 @@
</ng-template>
</md-tab>
<md-tab *ngFor="let color of ['white', 'black']" label="{{color}}">
<ng-template md-tab-label>
<span class="text-capitalize">{{color}}</span>
</ng-template>
</md-tab>
</md-tab-group>
<div class="color-tabs-content p-24" fxLayout="column">
@ -54,8 +60,8 @@
<div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-bg'" fxFlex="30">
<div class="pb-4">.{{'md-'+selectedColor+'-bg'}}</div>
<div class="secondary-text pb-4">.secondary-text</div>
<div class="hint-text pb-4">.hint-text</div>
<div class="fade-text">.fade-text</div>
<div class="hint-text pb-4">.hint-text, .disabled-text</div>
<div class="divider">.divider</div>
</div>
<div fxFlex="30">
@ -67,7 +73,7 @@
</div>
</div>
<div class="color" fxLayout="column" fxFlex="1 0 auto">
<div class="color" fxLayout="column" fxFlex="1 0 auto" *ngIf="selectedColor != 'black' && selectedColor != 'white'">
<div class="colored-bg p-8"
*ngFor="let hue of ['50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700']"
@ -79,8 +85,8 @@
<div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex="30">
<div class="pb-4">.{{'md-'+selectedColor+'-'+hue+'-bg'}}</div>
<div class="secondary-text pb-4">.secondary-text</div>
<div class="hint-text pb-4">.hint-text</div>
<div class="fade-text">.fade-text</div>
<div class="hint-text pb-4">.hint-text, .disabled-text</div>
<div class="divider">.divider</div>
</div>
<div class="p-8" fxFlex="30" fxLayoutAlign="start center">.{{selectedColor+'-'+hue+'-bg'}}</div>
@ -90,6 +96,7 @@
.{{selectedColor+'-'+hue+'-fg'}}
</div>
</div>
</div>
</div>
</div>