forked from chriseppstein/sass-recipes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_css-arrow.sass
71 lines (60 loc) · 1.99 KB
/
_css-arrow.sass
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// Based on [Nicolas Gallagher's Pure CSS speech bubbles][1]
// I've only implemented a simple triangle with border that you can mix in and position.
// Definitely can do with some optimization.
// Works only on elements with relative positioning and overflow not hidden.
//
// [1]: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
//
//
= arrow( $direction, $bg-color, $border-color, $border-width, $top, $left, $width = 10px )
position: relative
&:before
content: "\00a0"
// reduce the damage in FF3.0:
display: block
position: absolute
width: 0
height: 0
top: $top
left: $left
bottom: auto
border-width: floor($width / 2)
border-style: solid
@if $direction == 'south'
border-color: $border-color transparent transparent transparent
@if $direction == 'north'
border-color: transparent transparent $border-color transparent
@if $direction == 'east'
border-color: transparent transparent transparent $border-color
@if $direction == 'west'
border-color: transparent $border-color transparent transparent
// creates the smaller triangle
&:after
content: "\00a0"
display: block
position: absolute
width: 0
height: 0
@if $direction == 'south'
top: $top - $border-width
@else if $direction == 'north'
top: $top + $border-width
@else
top: $top
@if $direction == 'east'
left: $left - $border-width
@else if $direction == 'west'
left: $left + $border-width
@else
left: $left
bottom: auto
border-width: floor($width / 2)
border-style: solid
@if $direction == 'south'
border-color: $bg-color transparent transparent transparent
@if $direction == 'north'
border-color: transparent transparent $bg-color transparent
@if $direction == 'east'
border-color: transparent transparent transparent $bg-color
@if $direction == 'west'
border-color: transparent $bg-color transparent transparent