Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 272 lines (264 sloc) 7.731 kb
d7b5eff Samuel Cochran Added a SASS version of the stylesheet
authored
1 // ---------------------------------------------
2 // CSS3 GITHUB BUTTONS (Nicolas Gallagher)
3 // Licensed under Unlicense
4 // http://github.com/necolas/css3-github-buttons
5 // ---------------------------------------------
6
7 // (The next step would be to make compass sprite the icons)
8
9 @import compass
10
11 .button
12 position: relative
13 overflow: visible
14 +inline-block
15 padding: 0.5em 1em
16 border: 1px solid #d4d4d4
17 margin: 0
18 text-decoration: none
19 text-shadow: 1px 1px 0 #fff
20 font: 11px / normal sans-serif
21 color: #333
22 white-space: nowrap
23 cursor: pointer
24 outline: none
25 +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
26 +background-clip
27 +border-radius(0.2em)
28 &:hover, &:focus, &:active, &.active
29 border-color: #3072b3
30 border-bottom-color: #2a65a0
31 text-decoration: none
32 text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3)
33 color: #fff
34 +background(linear-gradient(color-stops(#599bdc, #3072b3)), #3c8dde)
35 &:active, &.active
36 border-color: #2a65a0
37 border-bottom-color: #3884CF
38 +background(linear-gradient(color-stops(#3072b3, #599bdc)), #3072b3)
39 &::-moz-focus-inner
40 padding: 0
41 border: 0
42 &.icon:before
43 content: ""
44 position: relative
45 top: 1px
46 float: left
47 width: 12px
48 height: 12px
49 margin: 0 0.75em 0 -0.25em
50 background: url(../images/gh-icons.png) 0 99px no-repeat
51 &.arrowup.icon
52 &:before
53 background-position: 0 0
54 &:hover:before, &:focus:before, &:active:before
55 background-position: -12px 0
56 &.arrowdown.icon
57 &:before
58 background-position: 0 -12px
59 &:hover:before, &:focus:before, &:active:before
60 background-position: -12px -12px
61 &.arrowleft.icon
62 &:before
63 background-position: 0 -24px
64 &:hover:before, &:focus:before, &:active:before
65 background-position: -12px -24px
66 &.arrowright.icon
67 &:before
68 float: right
69 margin: 0 -0.25em 0 0.5em
70 background-position: 0 -36px
71 &:hover:before, &:focus:before, &:active:before
72 background-position: -12px -36px
73 &.approve.icon
74 &:before
75 background-position: 0 -48px
76 &:hover:before, &:focus:before, &:active:before
77 background-position: -12px -48px
78 &.add.icon
79 &:before
80 background-position: 0 -288px
81 &:hover:before, &:focus:before, &:active:before
82 background-position: -12px -288px
83 &.remove.icon
84 &:before
85 background-position: 0 -60px
86 &:hover:before, &:focus:before, &:active:before
87 background-position: -12px -60px
88 &.log.icon
89 &:before
90 background-position: 0 -72px
91 &:hover:before, &:focus:before, &:active:before
92 background-position: -12px -72px
93 &.calendar.icon
94 &:before
95 background-position: 0 -84px
96 &:hover:before, &:focus:before, &:active:before
97 background-position: -12px -84px
98 &.chat.icon
99 &:before
100 background-position: 0 -96px
101 &:hover:before, &:focus:before, &:active:before
102 background-position: -12px -96px
103 &.clock.icon
104 &:before
105 background-position: 0 -108px
106 &:hover:before, &:focus:before, &:active:before
107 background-position: -12px -108px
108 &.settings.icon
109 &:before
110 background-position: 0 -120px
111 &:hover:before, &:focus:before, &:active:before
112 background-position: -12px -120px
113 &.comment.icon
114 &:before
115 background-position: 0 -132px
116 &:hover:before, &:focus:before, &:active:before
117 background-position: -12px -132px
118 &.fork.icon
119 &:before
120 background-position: 0 -144px
121 &:hover:before, &:focus:before, &:active:before
122 background-position: -12px -144px
123 &.like.icon
124 &:before
125 background-position: 0 -156px
126 &:hover:before, &:focus:before, &:active:before
127 background-position: -12px -156px
128 &.favorite.icon
129 &:before
130 background-position: 0 -348px
131 &:hover:before, &:focus:before, &:active:before
132 background-position: -12px -348px
133 &.home.icon
134 &:before
135 background-position: 0 -168px
136 &:hover:before, &:focus:before, &:active:before
137 background-position: -12px -168px
138 &.key.icon
139 &:before
140 background-position: 0 -180px
141 &:hover:before, &:focus:before, &:active:before
142 background-position: -12px -180px
143 &.lock.icon
144 &:before
145 background-position: 0 -192px
146 &:hover:before, &:focus:before, &:active:before
147 background-position: -12px -192px
148 &.unlock.icon
149 &:before
150 background-position: 0 -204px
151 &:hover:before, &:focus:before, &:active:before
152 background-position: -12px -204px
153 &.loop.icon
154 &:before
155 background-position: 0 -216px
156 &:hover:before, &:focus:before, &:active:before
157 background-position: -12px -216px
158 &.search.icon
159 &:before
160 background-position: 0 -228px
161 &:hover:before, &:focus:before, &:active:before
162 background-position: -12px -228px
163 &.mail.icon
164 &:before
165 background-position: 0 -240px
166 &:hover:before, &:focus:before, &:active:before
167 background-position: -12px -240px
168 &.move.icon
169 &:before
170 background-position: 0 -252px
171 &:hover:before, &:focus:before, &:active:before
172 background-position: -12px -252px
173 &.edit.icon
174 &:before
175 background-position: 0 -264px
176 &:hover:before, &:focus:before, &:active:before
177 background-position: -12px -264px
178 &.pin.icon
179 &:before
180 background-position: 0 -276px
181 &:hover:before, &:focus:before, &:active:before
182 background-position: -12px -276px
183 &.reload.icon
184 &:before
185 background-position: 0 -300px
186 &:hover:before, &:focus:before, &:active:before
187 background-position: -12px -300px
188 &.rss.icon
189 &:before
190 background-position: 0 -312px
191 &:hover:before, &:focus:before, &:active:before
192 background-position: -12px -312px
193 &.tag.icon
194 &:before
195 background-position: 0 -324px
196 &:hover:before, &:focus:before, &:active:before
197 background-position: -12px -324px
198 &.trash.icon
199 &:before
200 background-position: 0 -336px
201 &:hover:before, &:focus:before, &:active:before
202 background-position: -12px -336px
203 &.user.icon
204 &:before
205 background-position: 0 -360px
206 &:hover:before, &:focus:before, &:active:before
207 background-position: -12px -360px
208 &.primary
209 font-weight: bold
210 &.danger
211 color: #900
212 &:hover, &:focus
213 border-color: #b53f3a
214 border-bottom-color: #a0302a
215 color: #fff
216 +background(linear-gradient(color-stops(#dc5f59, #b33630)), #dc5f59)
217 &:active, &.active
218 color: #fff
219 border-color: #a0302a
220 border-bottom-color: #bf4843
221 +background(linear-gradient(color-stops(#b33630, #dc5f59)), #b33630)
222 &.pill
223 +border-radius(50em)
224 &.disable
225 opacity: 0.5
226 &.big
227 font-size: 14px
228 &.icon:before
229 top: 0
230
231 .button-group
232 +inline-block
233 list-style: none
234 padding: 0
235 margin: 0
236
237 .button-group
238 li
239 float: left
240 padding: 0
241 margin: 0
242 .button
243 float: left
244 margin-left: -1px
245 > .button:not(:first-child):not(:last-child), li:not(:first-child):not(:last-child) .button
246 +border-radius(0)
247 > .button:first-child, li:first-child .button
248 margin-left: 0
249 +border-right-radius(0)
250 > .button:last-child, li:last-child > .button
251 +border-left-radius(0)
252 &.minor-group .button
253 border: 1px solid #d4d4d4
254 text-shadow: none
255 background-image: none
256 background-color: #fff
257 &:hover, &:focus
258 background-color: #599bdc
259 &:active
260 background-color: #599bdc
261 background-color: #3072b3
262 &.active
263 background-color: #3072b3
264 &.icon:before
265 opacity: 0.8
266
267 // For mixing buttons and button groups, e.g., in a navigation bar
268 .button-container
269 .button, .button-group
270 vertical-align: top
271
Something went wrong with that request. Please try again.