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

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

@ -1,3 +1,4 @@
// Material colors map
$matColorsMap: (
red: $mat-red,
pink: $mat-pink,
@ -23,8 +24,60 @@ $matColorsMap: (
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 -->