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

color.scss generator refactor

Browse Source
This commit is contained in:
Sercan Yemen 2017-07-31 12:24:41 +03:00
parent a55a4d8eb0
commit 2225ace5be
17 changed files with 106 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,83 @@
// Material colors map
$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
);
// Material color hues list
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
// Color classes generator mixin
@mixin generateColorClasses($colorName, $bgColor, $fgColor, $hue) {
.#{$colorName}#{$hue}-bg {
background-color: $bgColor !important;
}
.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 {
color: $bgColor !important;
}
.#{$colorName}#{$hue}-border {
border-color: $bgColor !important;
}
.#{$colorName}#{$hue}-border-top {
border-top-color: $bgColor !important;
}
.#{$colorName}#{$hue}-border-right {
border-right-color: $bgColor !important;
}
.#{$colorName}#{$hue}-border-bottom {
border-bottom-color: $bgColor !important;
}
.#{$colorName}#{$hue}-border-left {
border-left-color: $bgColor !important;
}
}
// Generate the color classes...
@each $colorName, $colorMap in $matColorsMap {
@each $hue in $matColorHues {
@ -32,99 +85,11 @@ $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);
.#{$colorName}-#{$hue}-bg {
background-color: $bgColor !important;
}
.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 {
color: $bgColor !important;
}
.#{$colorName}-#{$hue}-border {
border-color: $bgColor !important;
}
.#{$colorName}-#{$hue}-border-top {
border-top-color: $bgColor !important;
}
.#{$colorName}-#{$hue}-border-right {
border-right-color: $bgColor !important;
}
.#{$colorName}-#{$hue}-border-bottom {
border-bottom-color: $bgColor !important;
}
.#{$colorName}-#{$hue}-border-left {
border-left-color: $bgColor !important;
}
@include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
// Run the generator one more time for default values (500)
@if ($hue == 500) {
.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 {
background-color: $bgColor !important;
}
.#{$colorName}-fg {
color: $bgColor !important;
}
.#{$colorName}-border {
border-color: $bgColor !important;
}
.#{$colorName}-border-top {
border-top-color: $bgColor !important;
}
.#{$colorName}-border-right {
border-right-color: $bgColor !important;
}
.#{$colorName}-border-bottom {
border-bottom-color: $bgColor !important;
}
.#{$colorName}-border-left {
border-left-color: $bgColor !important;
}
@include generateColorClasses($colorName, $bgColor, $fgColor, '');
}
}
}
@ -147,7 +112,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(0, 0, 0, 0.26) !important;
color: rgba(0, 0, 0, 0.38) !important;
}
&.divider,
@ -164,11 +129,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
color: rgb(255, 255, 255) !important;
&.secondary-text,
.secondary-text,
&.mat-icon,
.mat-icon,
&.icon,
.icon {
.secondary-text {
color: rgba(255, 255, 255, 0.70) !important;
}
@ -176,7 +137,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(255, 255, 255, 0.30) !important;
color: rgba(255, 255, 255, 0.50) !important;
}
&.divider,
@ -186,9 +147,4 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
color: rgba(255, 255, 255, 0.12) !important;
}
// Angular material element color override
.mat-icon {
color: #FFFFFF;
}
}

4
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
View File

@ -1,7 +1,7 @@
<!-- SIDENAV HEADER -->
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon">mail</md-icon>
<md-icon class="logo-icon s-32 white-fg">mail</md-icon>
<span class="logo-text">Mailbox</span>
</div>

4
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html
View File

@ -1,7 +1,7 @@
<!-- SIDENAV HEADER -->
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-icon class="logo-icon">check_box</md-icon>
<md-icon class="logo-icon s-32 white-fg">check_box</md-icon>
<span class="logo-text">To-do</span>
</div>

2
src/app/main/apps/todo/todo.component.html
View File

@ -1,7 +1,7 @@
<div id="todo" class="page-layout carded left-sidenav">
<!-- TOP BACKGROUND -->
<div class="top-bg"></div>
<div class="top-bg md-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<md-sidenav-container>

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

@ -1,7 +1,7 @@
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
<!-- HEADER -->
<div class="header p-24" fxLayout="row" fxLayoutAlign="space-between center">
<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"

4
src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html
View File

@ -1,14 +1,14 @@
<div class="page-layout carded fullwidth single-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg"></div>
<div class="top-bg md-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Fullwidth with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->

1
src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html
View File

@ -10,7 +10,6 @@
<!-- CONTENT HEADER -->
<div class="header md-accent-bg p-24">
<h2>Fullwidth with content scroll</h2>
<button md-raised-button>test</button>
</div>
<!-- / CONTENT HEADER -->

6
src/app/main/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout carded left-sidenav single-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg"></div>
<div class="top-bg md-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<md-sidenav-container>
@ -11,7 +11,7 @@
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Left sidenav with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->

6
src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout carded left-sidenav">
<!-- TOP BACKGROUND -->
<div class="top-bg"></div>
<div class="top-bg md-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<md-sidenav-container>
@ -11,7 +11,7 @@
fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Left sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

4
src/app/main/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -11,7 +11,7 @@
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Right sidenav with page scroll</h2>
</div>
<!-- / CONTENT HEADER -->

6
src/app/main/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout carded right-sidenav">
<!-- TOP BACKGROUND -->
<div class="top-bg"></div>
<div class="top-bg md-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<md-sidenav-container>
@ -11,7 +11,7 @@
fuseMdSidenavHelper="carded-right-sidenav" md-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
@ -29,7 +29,7 @@
<div class="center">
<!-- CONTENT HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Right sidenav with content scroll</h2>
</div>
<!-- / CONTENT HEADER -->

2
src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Fullwidth</h2>
</div>
<!-- / HEADER -->

2
src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
View File

@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header p-24" fxLayout="row">
<div class="header md-accent-bg p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav-2"

2
src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
View File

@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header p-24" fxLayout="row">
<div class="header md-accent-bg p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-left-sidenav"

2
src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
View File

@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header p-24" fxLayout="row">
<div class="header md-accent-bg p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-right-sidenav-2"

2
src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
View File

@ -15,7 +15,7 @@
<div class="center" fxFlex perfect-scrollbar>
<!-- HEADER -->
<div class="header p-24" fxLayout="row">
<div class="header md-accent-bg p-24" fxLayout="row">
<button md-button class="mat-icon-button sidenav-toggle"
fuseMdSidenavToggler="simple-right-sidenav"

2
src/app/main/ui/page-layouts/simple/tabbed/tabbed.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout simple tabbed" fxLayout="column">
<!-- HEADER -->
<div class="header p-24">
<div class="header md-accent-bg p-24">
<h2>Tabbed</h2>
</div>
<!-- / HEADER -->