From 33233cd2e29666e1615c5a020e6dde629e2f4998 Mon Sep 17 00:00:00 2001 From: fatimarafiqui Date: Sun, 2 Oct 2016 23:20:13 +0530 Subject: [PATCH] Added Kelvin filter --- site/filters.json | 2 +- source/scss/cssgram.scss | 3 ++- source/scss/kelvin.scss | 43 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 source/scss/kelvin.scss diff --git a/site/filters.json b/site/filters.json index f9aab7e..e6f51a8 100644 --- a/site/filters.json +++ b/site/filters.json @@ -92,7 +92,7 @@ }, { "name": "Kelvin", - "is_done": false, + "is_done": true, "usage": "kelvin" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index d05975e..46904ea 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 'kelvin'; \ No newline at end of file diff --git a/source/scss/kelvin.scss b/source/scss/kelvin.scss new file mode 100644 index 0000000..cebab31 --- /dev/null +++ b/source/scss/kelvin.scss @@ -0,0 +1,43 @@ +/* + * + * Kelvin + * + */ + +@import 'shared'; + +// mixin to extend kelvin filter +// @mixin kelvin +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include kelvin; +// } +// or +// img { +// @include kelvin(blur(2px)); +// } +// or +// img +// @include kelvin(blur(2px)) { +// /*...*/ +// }; +// } +@mixin kelvin($filters...) { + @extend %filter-base; + filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1); + -webkit-filter: sepia(0.4) saturate(2.4) brightness(1.3) contrast(1); + + &::after { + background: linear-gradient(to right, rgba(66, 10, 14, .2), transparent); + mix-blend-mode: darken; + } + + @content; +} + +// kelvin Instagram filter +%kelvin, +.kelvin { + @include kelvin; +}