purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 20:43:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Color helper updated.

Browse Source
This commit is contained in:
mustafahlvc 2017-07-30 00:53:43 +03:00
parent 8fdca9f2ec
commit d79068a734
4 changed files with 81 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,26 @@
$matColorsMap: (
red: $mat-red,
pink:$mat-pink,
purple:$mat-purple,
deep-purple:$mat-deep-purple,
indigo:$mat-indigo,
blue:$mat-blue,
light-blue:$mat-light-blue,
cyan:$mat-cyan,
teal:$mat-teal,
green:$mat-green,
light-green:$mat-light-green,
lime:$mat-lime,
yellow:$mat-yellow,
amber:$mat-amber,
orange:$mat-orange,
deep-orange:$mat-deep-orange,
brown:$mat-brown,
grey:$mat-grey,
blue-grey:$mat-blue-grey,
primary:$primary,
accent: $accent,
warn: $warn
red: $mat-red,
pink:$mat-pink,
purple:$mat-purple,
deep-purple:$mat-deep-purple,
indigo:$mat-indigo,
blue:$mat-blue,
light-blue:$mat-light-blue,
cyan:$mat-cyan,
teal:$mat-teal,
green:$mat-green,
light-green:$mat-light-green,
lime:$mat-lime,
yellow:$mat-yellow,
amber:$mat-amber,
orange:$mat-orange,
deep-orange:$mat-deep-orange,
brown:$mat-brown,
grey:$mat-grey,
blue-grey:$mat-blue-grey,
primary:$primary,
accent: $accent,
warn: $warn
);
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
@ -39,6 +39,19 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.md-#{$colorName}-#{$hue}-bg {
background-color: $bgColor !important;
color: $fgColor;
.secondary-text {
color: rgba($fgColor, .7);
}
.hint-text {
color: rgba($fgColor, .3);
}
.fade-text {
color: rgba($fgColor, .12);
}
}
.#{$colorName}-#{$hue}-fg {
@ -70,6 +83,19 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.md-#{$colorName}-bg {
background-color: $bgColor !important;
color: $fgColor;
.secondary-text {
color: rgba($fgColor, .7);
}
.hint-text {
color: rgba($fgColor, .3);
}
.fade-text {
color: rgba($fgColor, .12);
}
}
.#{$colorName}-bg {
@ -103,11 +129,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
}
}
// Black text
.black-fg,
.black-text {

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

@ -2,11 +2,11 @@
<!-- HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
<h1 class="title">Material Colors</h1>
<h1 class="title">Colors</h1>
<a md-raised-button class="reference-button"
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
target="_blank">
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
target="_blank">
<md-icon>link</md-icon>
<span>Reference</span>
</a>
@ -18,6 +18,12 @@
<md-tab-group class="color-tabs" md-dynamic-height="true" (selectChange)="selectColor($event)">
<md-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}">
<ng-template md-tab-label>
<span class="text-capitalize">{{color}}</span>
</ng-template>
</md-tab>
<md-tab *ngFor="let color of (colors | keys)" label="{{color.key}}">
<ng-template md-tab-label>
<span class="text-capitalize">{{color.key}}</span>
@ -41,9 +47,21 @@
<div class="p-8">
<h3 class="text-capitalize">{{selectedColor}}</h3>
</div>
<div class="p-8" fxLayout="row" fxLayoutAlign="space-between center">
<div>500</div>
<div>
<div class="p-8" fxLayout="row">
<div fxFlex="30" fxLayoutAlign="start center">500</div>
<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>
<div fxFlex="30">
</div>
<div fxFlex="128px">
{{selectedColorDefaultValue}}
</div>
</div>
@ -56,16 +74,19 @@
fxFlex="1 0 auto" fxLayout="row" fxLayout.sm="column"
[ngClass]="selectedColor+'-'+hue+'-bg'">
<div class="p-8" fxFlex>{{hue}}</div>
<div class="p-8" fxFlex="30" fxLayoutAlign="start center">{{hue}}</div>
<div class="colored-bg p-8" [ngClass]="'md-'+selectedColor+'-'+hue+'-bg'" fxFlex>
.{{'md-'+selectedColor+'-'+hue+'-bg'}}
<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>
<div class="p-8" fxFlex>.{{selectedColor+'-'+hue+'-bg'}}</div>
<div class="p-8" fxFlex="30" fxLayoutAlign="start center">.{{selectedColor+'-'+hue+'-bg'}}</div>
<div class="fg-box mat-elevation-z2 p-8"
[ngClass]="selectedColor+'-'+hue+'-fg'">
[ngClass]="selectedColor+'-'+hue+'-fg'" fxFlex="128px" fxLayoutAlign="center center">
.{{selectedColor+'-'+hue+'-fg'}}
</div>
</div>

1
src/app/main/ui/colors/colors.component.scss
View File

@ -16,7 +16,6 @@
.fg-box {
background-color: white;
min-width: 128px;
}
}

2
src/app/main/ui/colors/colors.component.ts
View File

@ -16,7 +16,7 @@ export class ColorsComponent implements OnInit
constructor()
{
this.colors = MatColors.all;
this.updateSelectedColor('red');
this.updateSelectedColor('primary');
}
ngOnInit()