_mixins.scss 654 Bytes
Newer Older
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
@mixin colourBg($bgcolor, $rotation) {
	position: relative;

	* {
		position: relative;
	}

	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		mix-blend-mode: multiply;
		background-color: $bgcolor;
		transform: rotate($rotation);
	}
}

@mixin colouredBar($color1, $color2) {
	margin-bottom: 50px;
	position: relative;
	display: inline-block;

	&:before, &:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 6px;
		bottom: -10px;
		left: 0;
		mix-blend-mode: multiply;
	}

	&:before {
		background: $color1;
	}

	&:after {
		transform: translate(4px,4px);
		background: $color2;
	}
}