CSSgram/source/scss/vesper.scss at d8bb1f0ea5960b54c7b92aa594e3dfbfb202e218 · una/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
39
40
41
/*
 *
 * Vesper
 *
 */
 @import 'shared';

 // mixin to extend vesper filter
 // @mixin vesper
 // @param $filters... {filter} - Zero to many css filters to be added
 // @example
 //   img {
 //     @include vesper;
 //   }
 //   or
 //   img {
 //     @include vesper(blur(2px));
 //   }
 //   or
 //   img {
 //     @include vesper(blur(2px)) {
 //       /*...*/
 //     };
 //   }
 @mixin vesper($filters...) {
   @include filter-base;
   filter: hue-rotate(-10deg) contrast(.9) saturate(.9) brightness(1.3) sepia(0.1) $filters;

   &::after {
     background: rgba(220, 250, 40, .1);
     mix-blend-mode: darken;
   }

   @content;
 }

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