UNPKG

1.69 kBtext/stylusView Raw
1/**
2 * An arrow mixin for Stylus, based on @shojberg's "cssarrowplease.com"
3 * @param {Position} position
4 * @param {size, color} arrow
5 * @param {size, color} border (optional)
6 */
7arrow(position, arrow, border = 0 white)
8 // Resolve arguments
9 $arrowSize = arrow[0]
10 $arrowColor = arrow[1]
11 $borderWidth = border[0]
12 $borderColor = border[1]
13
14 $oppositePosition = opposite-position(position)
15
16 // Base CSS
17 position: relative
18 background: $arrowColor
19
20 // Selector generation
21 $selectors = "&:after"
22 if $borderWidth > 0
23 $selectors = $selectors + ", &:before"
24
25 // Arrow position
26 {$selectors}
27 {$oppositePosition}: 100%
28
29 // Offset
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 // The arrow itself
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 // The border
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)