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 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

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

@ -39,6 +39,19 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.md-#{$colorName}-#{$hue}-bg { .md-#{$colorName}-#{$hue}-bg {
background-color: $bgColor !important; background-color: $bgColor !important;
color: $fgColor; color: $fgColor;
.secondary-text {
color: rgba($fgColor, .7);
}
.hint-text {
color: rgba($fgColor, .3);
}
.fade-text {
color: rgba($fgColor, .12);
}
} }
.#{$colorName}-#{$hue}-fg { .#{$colorName}-#{$hue}-fg {
@ -70,6 +83,19 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.md-#{$colorName}-bg { .md-#{$colorName}-bg {
background-color: $bgColor !important; background-color: $bgColor !important;
color: $fgColor; color: $fgColor;
.secondary-text {
color: rgba($fgColor, .7);
}
.hint-text {
color: rgba($fgColor, .3);
}
.fade-text {
color: rgba($fgColor, .12);
}
} }
.#{$colorName}-bg { .#{$colorName}-bg {
@ -103,11 +129,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
} }
} }
// Black text // Black text
.black-fg, .black-fg,
.black-text { .black-text {

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

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

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

@ -16,7 +16,6 @@
.fg-box { .fg-box {
background-color: white; 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() constructor()
{ {
this.colors = MatColors.all; this.colors = MatColors.all;
this.updateSelectedColor('red'); this.updateSelectedColor('primary');
} }
ngOnInit() ngOnInit()