forked from jm3/sign-in-with-twitter-button
/
styles.sass
109 lines (98 loc) · 6.69 KB
/
styles.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
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
// Scalable, self-contained HTML5+CSS Twitter button.
// By @jm3
//
// Read More:
// http://blog.140proof.com/post/4164741501/scalable-sign-in-button-updated
//
// Fork on GitHub:
// https://github.com/jm3/sign-in-with-twitter-button
.scalable
display: inline-block
zoom: 1
vertical-align: top
a
background: #c1e6ea -webkit-gradient(linear, left bottom, left top, color-stop(0, #aed6dc), color-stop(0.9, #d3f5f6))
border-radius: 0.4em
border: 2px solid #B1D4DC
display: inline-block
font-family: 'Helvetica Neue', Arial, sans-serif
height: 52px
position: relative
text-decoration: none
text-shadow: 0 1px 0 rgba(255,255,255,.5)
&:hover
background: #c1f0f2 -webkit-gradient(linear, left bottom, left top, color-stop(0, #98c4d0), color-stop(0.9, #c1f0f2))
&:active
background: #b4d7d8 -webkit-gradient(linear, left bottom, left top, color-stop(0, #83a7ad), color-stop(0.81, #b4d7d8))
.label
display: inline-block
color: #222
font-size: 24px
line-height: 2.2em
padding: 0 1.5em 0 3.2em
// vertical divider line
b.divider
border-left: 2px solid #ADD1DD
border-right: 2px solid #C6E9ED
height: 100%
left: 3.4em
position: absolute
top: 0
width: 0px
z-index: 2
a:hover > b.divider
border-left: 2px solid #a3d0da
border-right: 2px solid #b8e6eb
a:active > b.divider
border-left: 2px solid #8fb3b8
border-right: 2px solid #add0d1
i
position: absolute
// you have three options for icon rendering:
i.raster // emedded png data-url
background-position: absolute
background-size: 88% auto
height: 100%
left: 0.9em
top: 0.5em
width: 2.3em
i.face // stylish round-crop
background-image: url(http://public.jm3.net/jm3-vector.png)
background-size: 100% auto
border-radius: 2.0em
height: 2.3em
left: 0.5em
top: 0.4em
width: 2.3em
i.svg // emedded svg
height: 2.0em
left: 0.9em
top: 0.75em
width: 2.0em
.scalable.dark a
background: #3ea8bb -moz-linear-gradient( center bottom, rgb(37,146,173) 0%, rgb(70,214,219) 81%)
background: #3ea8bb -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(37,146,173)), color-stop(0.81, rgb(70,214,219)))
border: 2px solid #1D7285
color: #fff
&:hover
background: #2ac8ce -webkit-gradient(linear, left bottom, left top, color-stop(0, #137898), color-stop(0.81, #2ac8ce))
&:active
background: #3ea8bb -webkit-gradient(linear, left bottom, left top, color-stop(0, #055b80), color-stop(0.81, #13b9c1))
b.divider
border-left: 2px solid #237C8F
border-right: 2px solid #46BFD2
.scalable.light a
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DEDEDE))
border: 2px solid #ccc
&:hover
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( #eee), to(#d0d0d0))
border: 2px solid #999
&:active
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( #d0d0d0), to(#d0d0d0))
border: 2px solid #777
b.divider
border-left: 2px solid #ccc
border-right: 2px solid #eee
i.raster
background: transparent url(data:image/png;base64,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) no-repeat 0 0
// end button code