Adds Kelvin filter (#210)

una · Oct 6, 2016 · 6c3baaf · 6c3baaf
1 parent 4920e46
commit 6c3baaf
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git 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
@@ -21,4 +21,5 @@
 @import 'rise';
 @import 'slumber';
 @import 'brannan';
-@import 'valencia';
+@import 'valencia';
+@import 'kelvin';
diff --git a/source/scss/kelvin.scss b/source/scss/kelvin.scss
@@ -0,0 +1,48 @@
+/*
+ * 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;
+
+  @if length($filters) > 0 {
+    filter: $filters;
+  }
+
+  &::after{
+    background: rgb(183, 125, 33);
+    mix-blend-mode: overlay;
+  }
+
+  &::before {
+    background: rgb(56, 44, 52);
+    mix-blend-mode: color-dodge;
+  }
+
+  @content;
+}
+
+// kelvin Instagram filter
+%kelvin,
+.kelvin {
+  @include kelvin;
+}