blob: 9fd2f49c52aa158d7e8f7a54961e6086d10feb50 (
plain)
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
/**
* This code is based on CSS gram:
* https://github.com/una/CSSgram/tree/master
*
* Due to the packaging options available, the source has been duplicated and adapted here
* to best fit our specific needs.
*/
/* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/_shared.scss */
@mixin pseudo-elem {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
}
@mixin filter-base {
position: relative;
img {
width: 100%;
z-index: 1;
}
&::before {
@include pseudo-elem;
z-index: 2;
}
&::after {
@include pseudo-elem;
z-index: 3;
}
}
/**
* 1977
* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/1977.scss
*/
@mixin _1977( $filters... ) {
@include filter-base;
filter: contrast( 1.1 ) brightness( 1.1 ) saturate( 1.3 ) $filters;
&::after {
background: rgba( 243, 106, 188, 0.3 );
mix-blend-mode: screen;
}
@content;
}
/*
* Clarendon
* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/clarendon.scss
*/
@mixin clarendon( $filters... ) {
@include filter-base;
filter: contrast( 1.2 ) saturate( 1.35 ) $filters;
&::before {
background: rgba( 127, 187, 227, 0.2 );
mix-blend-mode: overlay;
}
@content;
}
/**
* Gingham
* From https://github.com/una/CSSgram/blob/0.1.12/source/scss/gingham.scss
*/
@mixin gingham( $filters... ) {
@include filter-base;
filter: brightness( 1.05 ) hue-rotate( -10deg ) $filters;
&::after {
background: rgb( 230, 230, 250 );
mix-blend-mode: soft-light;
}
@content;
}
|
GitWeb