-
Notifications
You must be signed in to change notification settings - Fork 0
/
_mixins.styl
121 lines (98 loc) · 3.16 KB
/
_mixins.styl
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* Stylus Mixins v1.0*/
// Objects
z = {
neg: -7,
lowest: 1,
low: 4,
mid: 5,
video: 7,
header: 8,
nav: 9,
modal: 10,
highest: 11
}
social = {
twitter: #00aced,
facebook: #3b5998,
google: #dd4b39,
youtube: #bb0000
}
// Material Shadows
shadow-level(l = 1)
if l == -1
box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
if l == 0
box-shadow: none;
if l == 1
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
if l == 2
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
if l == 3
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
if l == 4
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
if l == 5
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
// Common Transition
trans($sec = 0.3s)
transition: all $sec ease
/* Removes margin and padding and list style from lists */
noList()
padding: 0
margin: 0
li
padding: 0
margin: 0
list-style: none
/* Lightens background color on hover */
hovLight($color)
background: $color
&:hover
background: $color + 30
/* Darkens background color on hover */
hovDark($color)
background: $color
&:hover
background: $color - 30
/* A re-useable font mixin for whatever fonts you are using, allows for an optional color argument */
serif($size)
font-family: 'Libre Baskerville', serif
//
// TRIANGLE
// ========
// Creates a CSS triangle by passing a direction, size, and color
//
triangle($point = 'up', $size = 1em, $color = #777)
if $size is a 'unit' && $color is a 'color'
if $point == 'up'
_triangle-borders({top: '', right: transparent, bottom: solid, left: transparent}, $size, $color)
else if $point == 'right'
_triangle-borders({top: transparent, right: '', bottom: transparent, left: solid}, $size, $color)
else if $point == 'down'
_triangle-borders({top: solid, right: transparent, bottom: '', left: transparent}, $size, $color)
else if $point == 'left'
_triangle-borders({top: transparent, right: solid, bottom: transparent, left: ''}, $size, $color)
else if $point == 'up-left'
$size = ($size / 2)
_triangle-borders({top: solid, right: transparent, bottom: transparent, left: solid}, $size, $color)
else if $point == 'up-right'
$size = ($size / 2)
_triangle-borders({top: solid, right: solid, bottom: transparent, left: transparent}, $size, $color)
else if $point == 'down-right'
$size = ($size / 2)
_triangle-borders({top: transparent, right: solid, bottom: solid, left: transparent}, $size, $color)
else if $point == 'down-left'
$size = ($size / 2)
_triangle-borders({top: transparent, right: transparent, bottom: solid, left: solid}, $size, $color)
//
// TRIANGLE BORDERS
// This mixin should not be called directly
//
_triangle-borders($sides, $size, $color)
width 0
height 0
for $side, $style in $sides
if $style == solid
border-{$side} $size solid $color
else if $style == transparent
border-{$side} $size solid transparent