1 | @import "variables";
|
2 |
|
3 | @each $name, $value in $colors {
|
4 | .arrow\:r\:#{$name}::after {
|
5 | content: "";
|
6 | display: block;
|
7 | position: absolute;
|
8 | height: 0;
|
9 | width: 0;
|
10 | right: -10px;
|
11 | top: calc(50% - 7px);
|
12 | border-top: 10px solid transparent;
|
13 | border-bottom: 10px solid transparent;
|
14 | border-left: 10px solid $value;
|
15 | }
|
16 | .arrow\:t\:#{$name}::after {
|
17 | content: "";
|
18 | display: block;
|
19 | position: absolute;
|
20 | height: 0;
|
21 | width: 0;
|
22 | top: -10px;
|
23 | right: calc(50% - 10px);
|
24 | border-bottom: 10px solid $value;
|
25 | border-left: 10px solid transparent;
|
26 | border-right: 10px solid transparent;
|
27 | }
|
28 | .arrow\:l\:#{$name}::after {
|
29 | content: "";
|
30 | display: block;
|
31 | position: absolute;
|
32 | height: 0;
|
33 | width: 0;
|
34 | left: -10px;
|
35 | top: calc(50% - 10px);
|
36 | border-top: 10px solid transparent;
|
37 | border-bottom: 10px solid transparent;
|
38 | border-left: 0 solid transparent;
|
39 | border-right: 10px solid $value;
|
40 | }
|
41 | }
|