Skip to content

Commit

Permalink
Adds Kelvin filter (#210)
Browse files Browse the repository at this point in the history
  • Loading branch information
Praseetha-KR authored and una committed Oct 6, 2016
1 parent 4920e46 commit 6c3baaf
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 2 deletions.
2 changes: 1 addition & 1 deletion site/filters.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
},
{
"name": "Kelvin",
"is_done": false,
"is_done": true,
"usage": "kelvin"
},
{
Expand Down
3 changes: 2 additions & 1 deletion source/scss/cssgram.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,5 @@
@import 'rise';
@import 'slumber';
@import 'brannan';
@import 'valencia';
@import 'valencia';
@import 'kelvin';
48 changes: 48 additions & 0 deletions source/scss/kelvin.scss
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 6c3baaf

Please sign in to comment.