CSSgram/source/scss/juno.scss at 60cfd3bf854b4ff1a06e6582fec217cebc64c947 · milacarrera/CSSgram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*
 * Juno
 *
 */
 @import 'shared';
 // mixin to extend juno filter
 // @mixin juno
 // @param $filters... {filter} - Zero to many css filters to be added
 // @example
 //   img {
 //     @include juno;
 //   }
 //   or
 //   img {
 //     @include juno(blur(2px));
 //   }
 //   or
 //   img {
 //     @include juno(blur(2px)) {
 //       /*...*/
 //     };
 //   }
@mixin juno($filters...) {
  @extend %filter-base;
  filter: contrast(1.2) saturate(0.8) $filters;
  &:before {
    background: linear-gradient(to bottom,rgba(255,255,255,0.2), rgba(74, 195, 111, 0.2), transparent);
    mix-blend-mode: overlay;
  }

  @content;
}

// juno Instagram filter
%juno,
.juno {
  @include juno;
}