bbuttons 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.mkdn +4 -1
- data/stylesheets/_bbutton-styles.scss +240 -0
- data/stylesheets/_bbuttons.scss +173 -163
- data/stylesheets/_mixins.scss +100 -0
- data/templates/project/_bbuttons.scss +1 -1
- metadata +3 -1
data/README.mkdn
CHANGED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
@mixin bbutton(
|
|
2
|
+
$type: 'simple',
|
|
3
|
+
$color: $bbutton-color,
|
|
4
|
+
$font: $font-color,
|
|
5
|
+
$size: $default-font-size,
|
|
6
|
+
$shadow: $simple-shadow,
|
|
7
|
+
$radius: $bbutton-radius
|
|
8
|
+
) {
|
|
9
|
+
@if $type == 'simple' {
|
|
10
|
+
@include bsimple($color, $font, $size, $shadow, $radius);
|
|
11
|
+
}
|
|
12
|
+
@else if $type == 'bubbly' {
|
|
13
|
+
@include bbubbly($color, $font, $size, $shadow, $radius);
|
|
14
|
+
}
|
|
15
|
+
@else if $type == 'chunky' {
|
|
16
|
+
@include bchunky($color, $font, $size, $shadow, $radius);
|
|
17
|
+
}
|
|
18
|
+
@else if $type == 'simple-glass' {
|
|
19
|
+
@include bsimple($glass-color, $font, $size, $shadow, $radius);
|
|
20
|
+
@include bglass;
|
|
21
|
+
}
|
|
22
|
+
@else if $type == 'bubbly-glass' {
|
|
23
|
+
@include bbubbly($glass-color, $font, $size, $shadow, $radius);
|
|
24
|
+
@include bglass('bubbly');
|
|
25
|
+
}
|
|
26
|
+
@else if $type == 'chunky-glass' {
|
|
27
|
+
@include bchunky($glass-color, $font, $size, $shadow, $radius);
|
|
28
|
+
@include bglass('chunky');
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin bsimple(
|
|
33
|
+
$color: $bbutton-color,
|
|
34
|
+
$font: $font-color,
|
|
35
|
+
$font-size: $default-font-size,
|
|
36
|
+
$shadow: $simple-shadow,
|
|
37
|
+
$radius: $bbutton-radius
|
|
38
|
+
) {
|
|
39
|
+
background: $color;
|
|
40
|
+
border-radius: $bbutton-radius;
|
|
41
|
+
border: none;
|
|
42
|
+
padding: 8px 14px;
|
|
43
|
+
@include bbutton-font($bbutton-color, $font, $font-size, $shadow);
|
|
44
|
+
&:hover {
|
|
45
|
+
background: darken($color, 10%);
|
|
46
|
+
}
|
|
47
|
+
&:active {
|
|
48
|
+
box-shadow: $simple-box-shadow;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@mixin bbubbly(
|
|
53
|
+
$color: $bbutton-color,
|
|
54
|
+
$font: $font-color,
|
|
55
|
+
$font-size: $default-font-size,
|
|
56
|
+
$shadow: $simple-shadow,
|
|
57
|
+
$radius: $bbutton-radius
|
|
58
|
+
) {
|
|
59
|
+
background: $color;
|
|
60
|
+
background-image: linear-gradient(lighten($color, 10%), darken($color, 5%));
|
|
61
|
+
border: {
|
|
62
|
+
left: 1px solid rgba(0,0,0,0.2);
|
|
63
|
+
right: 1px solid rgba(0,0,0,0.2);
|
|
64
|
+
bottom: 1px solid rgba(0,0,0,0.2);
|
|
65
|
+
top: 1px solid rgba(0,0,0,0.01);
|
|
66
|
+
}
|
|
67
|
+
border-radius: $radius;
|
|
68
|
+
padding: 8px 14px;
|
|
69
|
+
@include bbutton-font($bbutton-color, $font, $font-size, $shadow);
|
|
70
|
+
&:hover {
|
|
71
|
+
background-image: linear-gradient(lighten($color, 5%), $color);
|
|
72
|
+
}
|
|
73
|
+
&:active {
|
|
74
|
+
background-image: linear-gradient(darken($color, 5%), lighten($color, 5%));
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@mixin bchunky(
|
|
79
|
+
$color: $bbutton-color,
|
|
80
|
+
$font: $font-color,
|
|
81
|
+
$font-size: $default-font-size,
|
|
82
|
+
$shadow: $simple-shadow,
|
|
83
|
+
$radius: $bbutton-radius
|
|
84
|
+
) {
|
|
85
|
+
background: $color;
|
|
86
|
+
background-image: linear-gradient(lighten($color, 10%), $color);
|
|
87
|
+
border: 1px solid darken($color, 5%);
|
|
88
|
+
border-radius: $radius;
|
|
89
|
+
padding: {
|
|
90
|
+
top: 6px;
|
|
91
|
+
left: 10px;
|
|
92
|
+
right: 10px;
|
|
93
|
+
bottom: 6px;
|
|
94
|
+
}
|
|
95
|
+
@include bbutton-font($bbutton-color, $font, $font-size, $shadow);
|
|
96
|
+
@include double-box-shadow;
|
|
97
|
+
&:hover {
|
|
98
|
+
background: darken($color, 7%);
|
|
99
|
+
@include double-box-shadow(false);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@mixin bgoogle(
|
|
104
|
+
$color: $google-gray,
|
|
105
|
+
$font: $google-font-color,
|
|
106
|
+
$radius: 2px
|
|
107
|
+
) {
|
|
108
|
+
background: $color;
|
|
109
|
+
border: 1px solid darken($color, 8%);
|
|
110
|
+
border-radius: $radius;
|
|
111
|
+
font-weight: bold;
|
|
112
|
+
padding: {
|
|
113
|
+
top: 5px;
|
|
114
|
+
bottom: 7px;
|
|
115
|
+
left: 10px;
|
|
116
|
+
right: 10px;
|
|
117
|
+
}
|
|
118
|
+
@include simple-font($font, $google-font-family, $google-font-size);
|
|
119
|
+
&:hover {
|
|
120
|
+
cursor: default;
|
|
121
|
+
background: darken($color, 5%);
|
|
122
|
+
border: 1px solid darken($color, 25%);
|
|
123
|
+
box-shadow: $google-shadow-hover;
|
|
124
|
+
}
|
|
125
|
+
&:active {
|
|
126
|
+
box-shadow: $google-shadow-active;
|
|
127
|
+
&.blue {
|
|
128
|
+
box-shadow: $google-blue-active;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@mixin bgithub(
|
|
134
|
+
$color: $github-gray,
|
|
135
|
+
$font: $github-font-color,
|
|
136
|
+
$invert: false,
|
|
137
|
+
$size: $github-font-size,
|
|
138
|
+
$radius: 3px
|
|
139
|
+
) {
|
|
140
|
+
background-color: $color;
|
|
141
|
+
background-image: linear-gradient(lighten($color, 10%), $color);
|
|
142
|
+
border: 1px solid darken($color, 15%);
|
|
143
|
+
border-bottom: 1px solid darken($color, 25%);
|
|
144
|
+
border-radius: $radius;
|
|
145
|
+
font-weight: bold;
|
|
146
|
+
padding: 4px 10px;
|
|
147
|
+
text-shadow: $github-text-shadow;
|
|
148
|
+
@include simple-font($font, $github-font-family, $size);
|
|
149
|
+
&:hover {
|
|
150
|
+
@if $invert {
|
|
151
|
+
background: $font;
|
|
152
|
+
background-image: linear-gradient(lighten($font, 10%), $font);
|
|
153
|
+
border: 1px solid darken($font, 2%);
|
|
154
|
+
border-top: 1px solid darken($font, 7%);
|
|
155
|
+
@include bbutton-font($font, $color, $size, darken($font, 2%), $github-font-family, true);
|
|
156
|
+
}
|
|
157
|
+
@else {
|
|
158
|
+
background-image: linear-gradient(rgb(240, 240, 240), rgb(220, 220, 220));
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
&:active {
|
|
162
|
+
box-shadow: 0 3px 5px rgba(0,0,0,0.2) inset;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@mixin bfacebook (
|
|
167
|
+
$color: $facebook-blue,
|
|
168
|
+
$font-color: white,
|
|
169
|
+
$border-color: #2c3789,
|
|
170
|
+
$font-family: $facebook-font-family
|
|
171
|
+
) {
|
|
172
|
+
background: $color;
|
|
173
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to($color),color-stop(0.07, $color));
|
|
174
|
+
border: 1px solid $border-color;
|
|
175
|
+
box-shadow: $facebook-box-shadow;
|
|
176
|
+
font-weight: bold;
|
|
177
|
+
padding: 5px 16px;
|
|
178
|
+
@include simple-font($font-color, $font-family, $facebook-font-size);
|
|
179
|
+
&.gray {
|
|
180
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to($color),color-stop(0.07, $color));
|
|
181
|
+
border: 1px solid $border-color;
|
|
182
|
+
}
|
|
183
|
+
&:active {
|
|
184
|
+
background: $color;
|
|
185
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.35) inset;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
@mixin bdelicious(
|
|
190
|
+
$color: $delicious-button-color,
|
|
191
|
+
$font-color: white,
|
|
192
|
+
$border-color: rgb(36, 88, 162),
|
|
193
|
+
$font-family: $delicious-font-family
|
|
194
|
+
) {
|
|
195
|
+
background: $color;
|
|
196
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to($color),color-stop(0.03, $color));
|
|
197
|
+
border: 1px solid $border-color;
|
|
198
|
+
font-weight: bold;
|
|
199
|
+
padding: 12px 18px;
|
|
200
|
+
text-shadow: 0 -1px rgba(0,0,0,0.25);
|
|
201
|
+
@include simple-font($font-color, $font-family, $delicious-font-size);
|
|
202
|
+
&:hover {
|
|
203
|
+
background: lighten($color, 7%);
|
|
204
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to(lighten($color, 7%)),color-stop(0.03, lighten($color, 7%)));
|
|
205
|
+
}
|
|
206
|
+
&:active {
|
|
207
|
+
background: darken($color, 2%);
|
|
208
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@mixin bglass(
|
|
213
|
+
$type: 'simple'
|
|
214
|
+
) {
|
|
215
|
+
@if $type == 'bubbly' {
|
|
216
|
+
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
217
|
+
border-top: 1px solid rgba(0, 0, 0, 0.01);
|
|
218
|
+
@include bbutton-gradient(top, rgba(255,255,255,0.07), rgba(255,255,255,0.2), rgba(255,255,255,0.07));
|
|
219
|
+
&:hover {
|
|
220
|
+
@include bbutton-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.1));
|
|
221
|
+
}
|
|
222
|
+
&:active {
|
|
223
|
+
@include bbutton-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0.07), rgba(255,255,255,0.15));
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
@else if $type == 'chunky' {
|
|
227
|
+
background: rgba(255,255,255,0.1);
|
|
228
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to($glass-color),color-stop(0.03, $glass-color));
|
|
229
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
230
|
+
&:hover {
|
|
231
|
+
background: rgba(255,255,255,0.1);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
@else if $type == 'simple' {
|
|
235
|
+
background: rgba(255,255,255,0.07);
|
|
236
|
+
&:hover {
|
|
237
|
+
background: rgba(255,255,255,0.08);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
data/stylesheets/_bbuttons.scss
CHANGED
|
@@ -1,213 +1,223 @@
|
|
|
1
|
-
// Bbuttons - A palpable lightweight button mixin
|
|
2
|
-
// Taylor Stackpole
|
|
3
|
-
// July 6, 2013
|
|
4
1
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
@
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
// Modules
|
|
3
|
+
// -------
|
|
4
|
+
@import "bbutton-styles";
|
|
5
|
+
@import "mixins";
|
|
6
|
+
|
|
7
|
+
// Compass modules
|
|
8
|
+
// ---------------
|
|
9
|
+
@import "compass/css3/border-radius";
|
|
10
|
+
@import "compass/css3/box-shadow";
|
|
11
|
+
@import "compass/css3/text-shadow";
|
|
12
|
+
@import "compass/css3/images";
|
|
13
|
+
@import "compass/css3/opacity";
|
|
14
|
+
@import "compass/css3/images";
|
|
18
15
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
// Variables
|
|
17
|
+
// ---------
|
|
18
|
+
$bbutton-color: #CCC;
|
|
19
|
+
$bbutton-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
20
|
+
$bbutton-radius: 3px;
|
|
21
|
+
$blue-bbutton: #545FDD;
|
|
22
|
+
$glass-color: rgba(0,0,0,0.0);
|
|
23
|
+
$glass-hover: rgba(0,0,0,0.2);
|
|
24
|
+
$default-font-size: 18px;
|
|
25
|
+
$delicious-button-color: rgb(50, 116, 209);
|
|
26
|
+
$delicious-font-family: 'Helvetica Neue', HelveticaNeue, 'Droid Sans', Roboto, Helvetica, sans-serif;
|
|
27
|
+
$delicious-font-size: 16px;
|
|
28
|
+
$experimental-support-for-svg: true;
|
|
29
|
+
$facebook-blue: rgb(91, 116, 168);
|
|
30
|
+
$facebook-box-shadow: 0 1px rgba(0,0,0,0.15);
|
|
31
|
+
$facebook-font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;;
|
|
32
|
+
$facebook-font-size: 11px;
|
|
33
|
+
$facebook-gray-button: rgb(238, 238, 238);
|
|
34
|
+
$facebook-gray-font-color: rgb(51, 51, 51);
|
|
35
|
+
$font-color: #333;
|
|
36
|
+
$github-box-shadow-active: 0 3px 5px rgba(0,0,0,0.2) inset;
|
|
37
|
+
$github-font-color: rgb(51, 51, 51);
|
|
38
|
+
$github-font-family: Helvetica, arial, freesans, clean, sans-serif;
|
|
39
|
+
$github-font-size: 12.8;
|
|
40
|
+
$github-gray: rgb(234, 234, 234);
|
|
41
|
+
$github-text-shadow: 0 1px rgba(255, 255, 255, 0.9);
|
|
42
|
+
$google-blue-active: 0 2px 2px rgba(0,0,0,0.2) inset;
|
|
43
|
+
$google-blue: rgb(77, 144, 254);
|
|
44
|
+
$google-font-color: rgb(68, 68, 68);
|
|
45
|
+
$google-font-family: arial, sans-serif;
|
|
46
|
+
$google-font-size: 12.909090995788574px;
|
|
47
|
+
$google-gray: #f8f8f8;
|
|
48
|
+
$google-shadow-active: 0 1px 2px rgba(0,0,0,0.1) inset;
|
|
49
|
+
$google-shadow-hover: 0 1px 1px rgba(0,0,0,0.1);
|
|
50
|
+
$green-bbutton: #339933;
|
|
51
|
+
$red-bbutton: #990000;
|
|
52
|
+
$simple-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2) inset;
|
|
53
|
+
$simple-shadow: rgba(255,255,255,0.25);
|
|
54
|
+
$teal-bbutton: #0FE5D4;
|
|
55
|
+
$yellow-bbutton: #E5D400;
|
|
56
|
+
|
|
57
|
+
// Modules
|
|
58
|
+
// -------
|
|
59
|
+
@import "bbuttons/button-styles";
|
|
60
|
+
@import "bbuttons/mixins";
|
|
61
|
+
|
|
62
|
+
.test {
|
|
63
|
+
@include test-div(teal);
|
|
64
|
+
button {
|
|
65
|
+
margin: 25px;
|
|
66
|
+
@include bbutton('bubbly-glass', $glass-color, white);
|
|
24
67
|
}
|
|
25
68
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
radius: 0;
|
|
69
|
+
.test2 {
|
|
70
|
+
@include test-div(#444);
|
|
71
|
+
button {
|
|
72
|
+
@include bbutton('bubbly-glass', $glass-color, white);
|
|
31
73
|
}
|
|
32
74
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
75
|
+
.test3 {
|
|
76
|
+
@include test-div;
|
|
77
|
+
@include bbutton-gradient(left, maroon, orange, navy);
|
|
78
|
+
button {
|
|
79
|
+
@include bbutton('bubbly-glass', $glass-color, white);
|
|
38
80
|
}
|
|
39
81
|
}
|
|
40
|
-
|
|
41
|
-
@
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
) {
|
|
46
|
-
background: $color;
|
|
47
|
-
background-repeat: repeat-x;
|
|
48
|
-
border: none;
|
|
49
|
-
border-radius: 3px;
|
|
50
|
-
// border: 1px solid rgba(0,0,0,0.1);
|
|
51
|
-
color: $font;
|
|
52
|
-
font: {
|
|
53
|
-
size: 24px;
|
|
54
|
-
family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
82
|
+
.test4 {
|
|
83
|
+
@include test-div(teal);
|
|
84
|
+
button {
|
|
85
|
+
margin: 25px;
|
|
86
|
+
@include bbutton('simple-glass', $glass-color, white);
|
|
55
87
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
@include
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
@include linear-gradient(darken($color, 5%), $color);
|
|
88
|
+
}
|
|
89
|
+
.test5 {
|
|
90
|
+
@include test-div(#444);
|
|
91
|
+
button {
|
|
92
|
+
@include bbutton('simple-glass', $glass-color, white);
|
|
62
93
|
}
|
|
63
94
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
background: $color;
|
|
70
|
-
border: none;
|
|
71
|
-
border-radius: 2px;
|
|
72
|
-
color: $font;
|
|
73
|
-
font: {
|
|
74
|
-
weight: normal;
|
|
95
|
+
.test6 {
|
|
96
|
+
@include test-div;
|
|
97
|
+
@include bbutton-gradient(left, maroon, orange, navy);
|
|
98
|
+
button {
|
|
99
|
+
@include bbutton('simple-glass', $glass-color, white);
|
|
75
100
|
}
|
|
76
|
-
padding: 3px 8px;
|
|
77
|
-
text-shadow: $shadow;
|
|
78
101
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
// $yellow-bbutton: #FFAF05;
|
|
82
|
-
$yellow-bbutton: #e5d400;
|
|
83
|
-
// $green-bbutton: #27D505;
|
|
84
|
-
$green-bbutton: #91df97;
|
|
85
|
-
$teal-bbutton: #0FE5D4;
|
|
86
|
-
// $red-bbutton: #FF4242;
|
|
87
|
-
$red-bbutton: #ee6868;
|
|
88
|
-
|
|
89
|
-
#bbuttons {
|
|
102
|
+
.top {
|
|
103
|
+
height: 20px;
|
|
90
104
|
}
|
|
105
|
+
|
|
106
|
+
// Default bsimple class
|
|
91
107
|
button.bsimple {
|
|
92
|
-
@include bsimple
|
|
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
|
-
&.red {
|
|
130
|
-
background: $red-bbutton;
|
|
131
|
-
color: white;
|
|
132
|
-
text-shadow: 0 0 2px darken($red-bbutton, 15%);
|
|
133
|
-
@include linear-gradient($red-bbutton, darken($red-bbutton, 20%));
|
|
134
|
-
&:active {
|
|
135
|
-
@include linear-gradient(darken($red-bbutton, 20%), $red-bbutton);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
&.small {
|
|
139
|
-
border-radius: 2px;
|
|
140
|
-
font: {
|
|
141
|
-
size: 16px;
|
|
142
|
-
weight: normal;
|
|
143
|
-
}
|
|
144
|
-
padding: 2px 10px;
|
|
108
|
+
@include bsimple;
|
|
109
|
+
}
|
|
110
|
+
button.bbubbly {
|
|
111
|
+
@include bbubbly;
|
|
112
|
+
}
|
|
113
|
+
button.bchunky {
|
|
114
|
+
@include bchunky;
|
|
115
|
+
}
|
|
116
|
+
button.bgoogle {
|
|
117
|
+
@include bgoogle;
|
|
118
|
+
}
|
|
119
|
+
button.bgoogle.blue {
|
|
120
|
+
@include bgoogle($google-blue, white);
|
|
121
|
+
}
|
|
122
|
+
button.bgithub {
|
|
123
|
+
@include bgithub;
|
|
124
|
+
}
|
|
125
|
+
button.bgithub.invert {
|
|
126
|
+
@include bgithub($github-gray, #b33630, true);
|
|
127
|
+
}
|
|
128
|
+
button.bfacebook {
|
|
129
|
+
@include bfacebook;
|
|
130
|
+
}
|
|
131
|
+
button.bfacebook.gray {
|
|
132
|
+
@include bfacebook($facebook-gray-button, $facebook-gray-font-color, rgb(136, 136, 136));
|
|
133
|
+
}
|
|
134
|
+
button.bdelicious {
|
|
135
|
+
@include bdelicious;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// Default size classes
|
|
139
|
+
.small {
|
|
140
|
+
border-radius: 2px;
|
|
141
|
+
font: {
|
|
142
|
+
size: 16px !important;
|
|
143
|
+
weight: normal;
|
|
145
144
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
145
|
+
padding: 2px 10px !important;
|
|
146
|
+
}
|
|
147
|
+
.large {
|
|
148
|
+
border-radius: 4px;
|
|
149
|
+
font-size: 32px !important;
|
|
150
|
+
padding: 12px 19px !important;
|
|
151
|
+
+ ul {
|
|
152
|
+
width: 200px !important;
|
|
153
153
|
}
|
|
154
|
-
|
|
155
|
-
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// Set of buttons
|
|
157
|
+
.button-group {
|
|
158
|
+
width: auto;
|
|
159
|
+
display: inline-block;
|
|
160
|
+
> button {
|
|
161
|
+
@include button-mid;
|
|
156
162
|
float: left;
|
|
157
163
|
}
|
|
158
|
-
|
|
159
|
-
@include
|
|
164
|
+
button:first-child {
|
|
165
|
+
@include button-left;
|
|
160
166
|
float: left;
|
|
161
167
|
}
|
|
162
|
-
|
|
163
|
-
@include
|
|
168
|
+
button:last-child {
|
|
169
|
+
@include button-right;
|
|
164
170
|
float: left;
|
|
165
171
|
}
|
|
166
172
|
}
|
|
167
173
|
|
|
168
|
-
// set of buttons
|
|
169
|
-
.button-set {
|
|
170
|
-
width: auto;
|
|
171
|
-
display: inline-block;
|
|
172
|
-
height: auto;
|
|
173
|
-
}
|
|
174
174
|
// Button dropdown
|
|
175
175
|
.button-drop {
|
|
176
176
|
display: inline-block;
|
|
177
177
|
ul {
|
|
178
|
-
|
|
179
|
-
display: none;
|
|
180
|
-
background: rgb(240, 240, 240);
|
|
178
|
+
background: rgb(255, 255, 255);
|
|
181
179
|
border-radius: 5px;
|
|
182
|
-
|
|
180
|
+
border: 1px solid rgba(0,0,0,0.3);
|
|
181
|
+
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
|
|
182
|
+
display: none;
|
|
183
183
|
list-style: none;
|
|
184
184
|
margin-left: 0;
|
|
185
185
|
margin-top: 3px;
|
|
186
|
+
padding-left: 0;
|
|
187
|
+
position: absolute;
|
|
186
188
|
width: 150px;
|
|
187
189
|
li {
|
|
188
|
-
|
|
189
|
-
font-size:
|
|
190
|
-
line-height:
|
|
190
|
+
cursor: pointer;
|
|
191
|
+
font-size: 12px;
|
|
192
|
+
line-height: 16px;
|
|
193
|
+
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
191
194
|
a {
|
|
195
|
+
display: block;
|
|
196
|
+
margin: 0;
|
|
197
|
+
padding: 8px 0px 8px 8px;
|
|
192
198
|
text-decoration: none;
|
|
199
|
+
width: 100%;
|
|
193
200
|
}
|
|
194
|
-
&.
|
|
195
|
-
background:
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
201
|
+
&.header {
|
|
202
|
+
background-image: linear-gradient(rgb(250, 250, 250), rgb(234, 234, 234));
|
|
203
|
+
border-bottom: 1px solid rgba(0,0,0,0.2);
|
|
204
|
+
font-weight: bold;
|
|
205
|
+
padding: 8px 0px 8px 8px;
|
|
206
|
+
text-shadow: 0 1px white;
|
|
207
|
+
&:hover {
|
|
208
|
+
background-image: linear-gradient(rgb(250, 250, 250), rgb(234, 234, 234)) !important;
|
|
200
209
|
}
|
|
201
|
-
box-shadow: 0 0px 3px 0px rgba(0,0,0,0.4);
|
|
202
210
|
}
|
|
203
211
|
&:hover {
|
|
204
|
-
background:
|
|
212
|
+
background: #364dfb;
|
|
213
|
+
a {color: white;}
|
|
205
214
|
}
|
|
206
215
|
&:first-child {
|
|
207
216
|
border-radius: 5px 5px 0 0;
|
|
208
217
|
}
|
|
209
218
|
&:last-child {
|
|
210
219
|
border-radius: 0 0 5px 5px;
|
|
220
|
+
border-bottom: none;
|
|
211
221
|
}
|
|
212
222
|
}
|
|
213
223
|
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@mixin blinear-gradient($start, $end) {
|
|
2
|
+
background-color: $end;
|
|
3
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end));
|
|
4
|
+
background-image: -webkit-linear-gradient(top, $start, $end);
|
|
5
|
+
background-image: -moz-linear-gradient(top, $start, $end);
|
|
6
|
+
background-image: -ms-linear-gradient(top, $start, $end);
|
|
7
|
+
background-image: -o-linear-gradient(top, $start, $end);
|
|
8
|
+
background-image: linear-gradient(top, $start, $end);
|
|
9
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$start', EndColorStr='$end');
|
|
10
|
+
}
|
|
11
|
+
@mixin bbutton-gradient($origin, $start, $mid, $end) {
|
|
12
|
+
@include background-image(linear-gradient($origin, $start, $mid, $end));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@mixin button-left($color: rgba(0,0,0,0.3)) {
|
|
16
|
+
border: {
|
|
17
|
+
right: 1px solid $color !important;
|
|
18
|
+
top-right-radius: 0 !important;
|
|
19
|
+
bottom-right-radius: 0 !important;
|
|
20
|
+
top-left-radius: $bbutton-radius !important;
|
|
21
|
+
bottom-left-radius: $bbutton-radius !important;
|
|
22
|
+
}
|
|
23
|
+
margin: 0;
|
|
24
|
+
}
|
|
25
|
+
@mixin button-mid($color: rgba(255, 255, 255, 0.4)) {
|
|
26
|
+
border: {
|
|
27
|
+
left: 1px solid lighten($color, 25%) !important;
|
|
28
|
+
right: 1px solid rgba(0,0,0,0.3) !important;
|
|
29
|
+
radius: 0 !important;
|
|
30
|
+
}
|
|
31
|
+
margin: 0;
|
|
32
|
+
&:active {
|
|
33
|
+
border-left: 1px solid rgba(0,0,0,0.3);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
@mixin button-right($color: rgba(255, 255, 255, 0.4)) {
|
|
37
|
+
border: {
|
|
38
|
+
left: 1px solid lighten($color, 25%) !important;
|
|
39
|
+
top-left-radius: 0 !important;
|
|
40
|
+
bottom-left-radius: 0 !important;
|
|
41
|
+
top-right-radius: $bbutton-radius !important;
|
|
42
|
+
bottom-right-radius: $bbutton-radius !important;
|
|
43
|
+
}
|
|
44
|
+
margin: 0;
|
|
45
|
+
&:active {
|
|
46
|
+
border-left: 1px solid rgba(0,0,0,0.3);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@mixin double-box-shadow(
|
|
51
|
+
$double: true
|
|
52
|
+
) {
|
|
53
|
+
@if $double {
|
|
54
|
+
box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.701961) 0px 3px 7px 0px;
|
|
55
|
+
-webkit-box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.701961) 0px 3px 7px 0px;
|
|
56
|
+
}
|
|
57
|
+
@else {
|
|
58
|
+
box-shadow: rgba(0, 0, 0, 0.201961) 0px 1px 2px 0px inset;
|
|
59
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.201961) 0px 1px 2px 0px inset;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin simple-font (
|
|
64
|
+
$color: $font-color,
|
|
65
|
+
$family: $bbutton-font,
|
|
66
|
+
$size: $default-font-size
|
|
67
|
+
) {
|
|
68
|
+
color: $color;
|
|
69
|
+
font-family: $family;
|
|
70
|
+
font-size: $size;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@mixin bbutton-font(
|
|
74
|
+
$color: $bbutton-color,
|
|
75
|
+
$font: $font-color,
|
|
76
|
+
$size: 24px,
|
|
77
|
+
$shadow: $simple-shadow,
|
|
78
|
+
$family: $bbutton-font,
|
|
79
|
+
$invert: false
|
|
80
|
+
) {
|
|
81
|
+
color: $font;
|
|
82
|
+
font: {
|
|
83
|
+
size: $size;
|
|
84
|
+
family: $family;
|
|
85
|
+
}
|
|
86
|
+
text-shadow: 0 1px $shadow;
|
|
87
|
+
@if $invert {
|
|
88
|
+
text-shadow: 0 -1px $shadow;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@mixin test-div($color: white) {
|
|
93
|
+
display: inline-block;
|
|
94
|
+
height: 100px;
|
|
95
|
+
width: 200px;
|
|
96
|
+
background: $color;
|
|
97
|
+
button {
|
|
98
|
+
margin: 25px;
|
|
99
|
+
}
|
|
100
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bbuttons
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.2
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -36,6 +36,8 @@ files:
|
|
|
36
36
|
- README.mkdn
|
|
37
37
|
- lib/bbuttons.rb
|
|
38
38
|
- stylesheets/_bbuttons.scss
|
|
39
|
+
- stylesheets/_bbutton-styles.scss
|
|
40
|
+
- stylesheets/_mixins.scss
|
|
39
41
|
- templates/project/_bbuttons.scss
|
|
40
42
|
- templates/project/manifest.rb
|
|
41
43
|
- templates/project/bbuttons.html
|