]>
Commit | Line | Data |
---|---|---|
c4685c84 TL |
1 | /** |
2 | * Shape/Symbol/Yin-yang | |
3 | * | |
4 | * @author Alexander Futekov | |
5 | * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx | |
6 | */ | |
7 | @mixin yin-yang($width: 10em, $color: #000, $color-alt: #fff) | |
8 | { | |
9 | width: $width*96/100; | |
10 | height: $width*48/100; | |
11 | background: $color-alt; | |
12 | border-color: $color; | |
13 | border-style: solid; | |
14 | $twopercente: $width*2/100; | |
15 | border-width: $twopercente $twopercente $width*5/10 $twopercente; | |
16 | position: relative; | |
17 | ||
18 | &, | |
19 | &:before, | |
20 | &:after | |
21 | { | |
22 | @include border-radius(100%); | |
23 | } | |
24 | ||
25 | &:before, | |
26 | &:after | |
27 | { | |
28 | content: ""; | |
29 | position: absolute; | |
30 | top: 50%; | |
31 | border: $width*18/100 solid; | |
32 | width: $width*12/100; | |
33 | height: $width*12/100; | |
34 | } | |
35 | ||
36 | &:before | |
37 | { | |
38 | left: 0; | |
39 | background: $color-alt; | |
40 | border-color: $color; | |
41 | } | |
42 | ||
43 | &:after | |
44 | { | |
45 | left: 50%; | |
46 | background: $color; | |
47 | border-color: $color-alt; | |
48 | } | |
49 | } |