1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | arrow(position, arrow, border = 0 white)
|
8 |
|
9 | $arrowSize = arrow[0]
|
10 | $arrowColor = arrow[1]
|
11 | $borderWidth = border[0]
|
12 | $borderColor = border[1]
|
13 |
|
14 | $oppositePosition = opposite-position(position)
|
15 |
|
16 |
|
17 | position: relative
|
18 | background: $arrowColor
|
19 |
|
20 |
|
21 | $selectors = "&:after"
|
22 | if $borderWidth > 0
|
23 | $selectors = $selectors + ", &:before"
|
24 |
|
25 |
|
26 | {$selectors}
|
27 | {$oppositePosition}: 100%
|
28 |
|
29 |
|
30 | if position in (top bottom)
|
31 | left: 50%
|
32 | else
|
33 | top: 50%
|
34 |
|
35 | border: solid transparent
|
36 | content: " "
|
37 | height: 0
|
38 | width: 0
|
39 | position: absolute
|
40 | pointer-events: none
|
41 |
|
42 |
|
43 | &:after
|
44 | border-color: rgba(white, 0) // transparent
|
45 | border-{$oppositePosition}-color: $arrowColor
|
46 | border-width: $arrowSize
|
47 |
|
48 | if position in (top bottom)
|
49 | margin-left: (- @border-width)
|
50 | else
|
51 | margin-top: (- @border-width)
|
52 |
|
53 |
|
54 | if $borderWidth > 0
|
55 | &:before
|
56 | border-color: rgba(white, 0) // transparent
|
57 | border-{$oppositePosition}-color: $borderColor
|
58 | border-width: $arrowSize + $borderWidth
|
59 |
|
60 | if position in (top bottom)
|
61 | margin-left: (- @border-width)
|
62 | else
|
63 | margin-top: (- @border-width)
|