Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

feat(styling): find way to add colors to SVGs used by the lib #557

Merged
merged 5 commits into from
Aug 12, 2020
Merged

feat(styling): find way to add colors to SVGs used by the lib #557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6c2f095
feat(styling): find way to add colors to SVGs used by the lib
ghiscoding-SE Aug 11, 2020
b133aa4
Update grid-tree-data-hierarchical.component.scss
ghiscoding Aug 12, 2020
b7c5bb2
Merge remote-tracking branch 'origin/master' into feat/svg-color
ghiscoding-SE Aug 12, 2020
4591506
refactor(styling): rename SASS mixin to recolor (original name)
ghiscoding-SE Aug 12, 2020
1fc7e0e
Merge branch 'feat/svg-color' of https://github.com/ghiscoding/Angula…
ghiscoding-SE Aug 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 28 additions & 5 deletions src/app/examples/grid-tree-data-hierarchical.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ $icon-width-mdi-plus: 14px;
$icon-width-mdi-arrow-collapse: 14px;
$icon-width-mdi-arrow-expand: 14px;
$icon-width-mdi-close-thick: 12px;
$icon-color-mdi-file-pdf-outline: #f14668;
$icon-color-mdi-file-music-outline: #3298dc;
$icon-color-mdi-file-excel-outline: #1E9F75;
$icon-color-mdi-folder: orange;
$icon-color-mdi-folder-open: orange;

/* You can change the SASS color via the associated variable, BUT it's better to use the recolor @mixing shown down below */
// $icon-color-mdi-file-pdf-outline: #f14668;
// $icon-color-mdi-file-music-outline: #3298dc;
// $icon-color-mdi-file-excel-outline: #1E9F75;
// $icon-color-mdi-folder: orange;
// $icon-color-mdi-folder-open: #ffa500;

/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss';
Expand All @@ -20,3 +22,24 @@ $icon-color-mdi-folder-open: orange;
height: 1.5rem;
width: 1.5rem;
}

.icon.mdi-file-pdf-outline {
/** 1. use `filter` color */
// filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%);

/** 2. or use the SASS @mixin (from Angular-Slickgrid "sass-utilities.scss") that will produce the `filter` color */
@include recolor(#f14668, 0.9);
}

.icon.mdi-folder, .icon.mdi-folder-open {
@include recolor(#ffa500, 0.9);
}
.icon.mdi-file-music-outline {
@include recolor(#3298dc, 0.9);
}
.icon.mdi-file-excel-outline {
@include recolor(#1E9F75, 0.9);
}
.icon.mdi-file-document-outline {
@include recolor(#686868, 0.9);
}
26 changes: 26 additions & 0 deletions src/app/modules/angular-slickgrid/styles/sass-utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,29 @@
$string: '%23' + $string;
@return $string;
}

@mixin recolor($color: #000, $opacity: 1) {
$r: red($color) / 255;
$g: green($color) / 255;
$b: blue($color) / 255;
$a: $opacity;

// grayscale fallback if SVG from data url is not supported
$lightness: lightness($color);
filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);

// color filter
$svg-filter-id: "recolor";
filter: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg">\
<filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
<feColorMatrix type="matrix" values="\
0 0 0 0 #{$r}\
0 0 0 0 #{$g}\
0 0 0 0 #{$b}\
0 0 0 #{$a} 0\
"/>\
</filter>\
</svg>\
##{$svg-filter-id}');
}