From 71f8163d276ae155b21fcdf0b430fb0189f6061a Mon Sep 17 00:00:00 2001 From: PrabhanshuAttri Date: Sat, 1 Oct 2016 01:40:50 +0530 Subject: [PATCH] Added hefe --- site/filters.json | 2 +- source/scss/cssgram.scss | 3 ++- source/scss/hefe.scss | 41 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 source/scss/hefe.scss diff --git a/site/filters.json b/site/filters.json index f9aab7e..c366007 100644 --- a/site/filters.json +++ b/site/filters.json @@ -67,7 +67,7 @@ }, { "name": "Hefe", - "is_done": false, + "is_done": true, "usage": "hefe" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index d05975e..01023a1 100644 --- a/source/scss/cssgram.scss +++ b/source/scss/cssgram.scss @@ -20,4 +20,5 @@ @import 'willow'; @import 'rise'; @import 'slumber'; -@import 'brannan' \ No newline at end of file +@import 'brannan'; +@import 'hefe'; diff --git a/source/scss/hefe.scss b/source/scss/hefe.scss new file mode 100644 index 0000000..61c3fe0 --- /dev/null +++ b/source/scss/hefe.scss @@ -0,0 +1,41 @@ +/* + * + * Hefe + * + */ +@import 'shared'; + +// mixin to extend hefe filter +// @mixin hefe +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include hefe; +// } +// or +// img { +// @include hefe(blur(2px)); +// } +// or +// img { +// @include hefe(blur(2px)) { +// /*...*/ +// }; +// } +@mixin hefe($filters...) { + @extend %filter-base; + filter: contrast(1.3) sepia(0.3) saturate(1.3) hue-rotate(-10deg) brightness(0.95); + + &::after { + background: rgba(243, 106, 188, 0); + mix-blend-mode: initial; + } + + @content; +} + +// hefe Instagram filter +%hefe, +.hefe { + @include hefe; +}