From 9787865d594b53f9c35e5bdb05bcf2807ed87768 Mon Sep 17 00:00:00 2001 From: Praseetha-KR Date: Sat, 1 Oct 2016 12:30:27 +0530 Subject: [PATCH] Adds Valencia filter --- site/filters.json | 2 +- source/scss/cssgram.scss | 3 ++- source/scss/valencia.scss | 42 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 source/scss/valencia.scss diff --git a/site/filters.json b/site/filters.json index f9aab7e..de5138e 100644 --- a/site/filters.json +++ b/site/filters.json @@ -177,7 +177,7 @@ }, { "name": "Valencia", - "is_done": false, + "is_done": true, "usage": "valencia" }, { diff --git a/source/scss/cssgram.scss b/source/scss/cssgram.scss index d05975e..aee0b81 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 'valencia'; \ No newline at end of file diff --git a/source/scss/valencia.scss b/source/scss/valencia.scss new file mode 100644 index 0000000..c75cb13 --- /dev/null +++ b/source/scss/valencia.scss @@ -0,0 +1,42 @@ +/* + * + * Valencia + * + */ +@import 'shared'; + +// mixin to extend valencia filter +// @mixin valencia +// @param $filters... {filter} - Zero to many css filters to be added +// @example +// img { +// @include valencia; +// } +// or +// img { +// @include valencia(blur(2px)); +// } +// or +// img { +// @include valencia(blur(2px)) { +// /*...*/ +// }; +// } +@mixin valencia($filters...) { + @extend %filter-base; + filter: contrast(1.08) brightness(1.08) sepia(0.08) $filters; + + &::after { + background: rgb(58, 3, 57); + mix-blend-mode: exclusion; + opacity: .5; + } + + @content; +} + +// valencia Instagram filter +%valencia, +.valencia { + @include valencia; +}