/
buttons.styl
executable file
·166 lines (142 loc) · 3.28 KB
/
buttons.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
@import 'nib'
@import 'variables'
.btn-back
display inline-block
position relative
width 110px
z-index 1
font-family $font-family
font-weight 600
color $gray
text-shadow: 0 1px 1px rgba(255,255,255,0.4)
padding 0 10px 0 25px
line-height 40px
text-decoration none
cursor default
&:hover:before
&:hover:after
background linear-gradient(#f5f5f5,#f1f1f1)
border-color #bbb
box-shadow 1px 1px 2px rgba(0,0,0,0.1)
cursor default
&:active:before
&:active:after
box-shadow inset 0 2px 4px -2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important
&:before
content ''
position absolute
box-sizing border-box
left 19px
height 30px
right 34px
border: 1px solid #dcdcdc
margin-top 5px
z-index -1
border-left-width 0
background #f5f5f5
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
border-radius 2px
&:after
content ''
position absolute
box-sizing border-box
left 9px
height 22px
border: 1px solid #dcdcdc
width 22px
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
top 9px
z-index -2
background #f5f5f5
border-top 0 transparent
border-right 0 transparent
border-radius 2px 4px
transform rotate(45deg)
// Our Basic Button. Thanks Bootstrap Dudes.
.btn
font-family $font-family
font-weight 600
border: 1px solid #dcdcdc
background #f5f5f5
box-shadow: 1px 1px 2px rgba(0,0,0,0.05)
background-repeat: repeat-x
border-radius 2px
margin 3px
color $gray
text-decoration none
padding 5px 11px
background-size auto 40px
text-shadow: 0 1px 1px rgba(255,255,255,0.4)
// Button Sizes
&.huge
font-family: $bold-font-family
font-size: 20px
background-size auto 60px !important
font-weight: 600
&.large
font-size 13px
line-height 18px
padding 6px 13px
background-size auto 50px !important
&.small
font-size 11px
font-family $font-family
&.wide
width 100%
// Button States
&:active
box-shadow inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05) !important
outline 0
background-image none
&:hover
background linear-gradient(#f5f5f5,#f1f1f1)
border 1px solid #bbb
box-shadow 1px 1px 2px rgba(0,0,0,0.1)
cursor default
// Button Colours
.btn-green
.btn-blue
.btn-pink
text-shadow: 0 1px 1px rgba(0,0,0,0.3)
color $white
border-color: rgb(168, 168, 168)
border-bottom-color: rgb(126, 126, 126)
.btn-blue
background $blue
border: 1px solid #888
border-bottom: 1px solid #555
&:hover
background linear-gradient($blue, rgb(0, 163, 224))
border: 1px solid #555
border-bottom: 1px solid #222
box-shadow 1px 1px 2px rgba(0,0,0,0.1)
.btn-pink
background $pink
.btn-green
background $green
&:hover
background linear-gradient($green, rgb(190, 192, 73))
border 1px solid #777
border-bottom 1px solid #444
box-shadow 1px 1px 2px rgba(0,0,0,0.1)
// Close button
button.close
float right
font-size 20px
font-weight bold
text-shadow 0 1px 0 white
line-height 20px
color black
opacity 0.2
padding 0
cursor pointer
background transparent
border 0
-webkit-appearance none
&:hover
opacity 0.5
.combined .btn
border-top-left-radius 0
border-bottom-left-radius 0
input[type=submit]
border-radius 2px