/
elements.styl
100 lines (98 loc) · 2.96 KB
/
elements.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
.topbar
small()
width: 100%
height: 60px
position: fixed
top: 0
left: 0
border: 1px solid darken(lighter-color1, 20%)
background-image: linear-gradient(to bottom, lighter-color3, lighter-color2, lighter-color1)
color: lighter-color3
z-index: 15 !important
opacity(1.0)
box-shadow: 0 0 16px darken(lighter-color1, 60%)
.topbar-inner
grid(100%,grid-min-width)
overflow: visible
p
margin: 1.5em
button
.button
margin: 1.4em 1em
font-weight: bold
float: left
border: 0
small()
.pills
display: block
width: 100%
height: 50px
clear: both
margin: 0 0 0 0.5em
list-style-type: none
li
margin: 0
padding: 0
a
float: left
padding: 7px 8px 7px 9px
margin: 0.85em 0.20em
border-radius: 4px
outline: none
text-align: center
text-decoration: none
text-transform: capitalize
font-weight: bold
color: darker-color1
letter-spacing: 0.05em
text-shadow: 0px 1px 1px lighter-color3, 0px -1px 0px lighter-color1
background-image: linear-gradient(to bottom, lighter-color3, lighter-color2, lighter-color1)
border: 1px solid darken(lighter-color1, 20%)
box-shadow: 0 1px 1px darker-color2
&:hover
background-image: linear-gradient(to bottom, lighten(lighter-color1,10%), darken(lighter-color2,10%), lighten(lighter-color2,5%))
box-shadow: inset 0 1px 10px 0px lighten(darker-color3,30%), 0 0 1px lighter-color1
text-shadow: 0px 1px 1px lighten(lighter-color3,15%), 0px -1px 0px lighter-color1
border: 1px solid darken(lighter-color1, 40%)
color: darken(darker-color2, 20%)
&:active
.current
background-image: linear-gradient(to bottom, darker-color3, darker-color2, darker-color1)
background-color: darker-color1
box-shadow: inset 0 0 10px 1px darken(darker-color1, 40%)
color: white
text-shadow: 0px 0px 8px base-color, 0 0 1px base-color
.tabs
display: block
margin: auto 0
width: 100%
height: 50px
clear: both
list-style-type: none
li
margin: 0
a
float: left
padding: 8px
margin: 1.1em 0.30em 1.1em 0em
border-top-left-radius: (8px)
border-top-right-radius: (8px)
border: none
outline: none
text-align: center
text-decoration: none
color: black
font-weight: normal
letter-spacing: 0.06em
text-shadow: 0px 1px 0px lighter-color3
background-image: linear-gradient(to bottom, lighter-color3, lighter-color2, lighter-color1)
border: 1px solid darker-color1
box-shadow: inset 0 0 6px 0px darken(darker-color1, 20%)
&:hover
&.current
&:active
box-shadow: inset 0 0 10px 1px darken(darker-color1, 40%)
color: white
text-shadow: 0px 0px 8px base-color, 0 0 1px base-color
border: 1px solid base-color
background-image: linear-gradient(to bottom, lighter-color3, lighter-color2, lighter-color1)