sass-buttons 0.1.1

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.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: c606f0919131828592fb0b5ea2926470ccb9c353
4
+ data.tar.gz: 1a9ba34995c45d023a6201e0706d7bfb90e2df71
5
+ SHA512:
6
+ metadata.gz: cd48da8de3b9abbb2069aad08b30902afd938441d203258375de6a5583e1f5ed16fa4641e9d362a0f430fe65fbc871f17b79890d67b27556eecadc4a2dfa04d0
7
+ data.tar.gz: 9cf5a625377fb2806042eaffabec59ae7c806234a154f3304b3a92a0e61b73cb1d2ed9702a34f3b360d97c634d461b16d084eb8fed3d34d42ec86cba47c51cf3
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in Sass-Buttons.gemspec
4
+ gemspec
data/LICENSE.txt ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2013 Jared Hardy
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,20 @@
1
+ Compass CSS Sass Buttons
2
+ =========================
3
+
4
+
5
+ Installation
6
+ ============
7
+
8
+
9
+ Installing Sass Buttons on Rails 4.0.x
10
+ -------------------------------------
11
+
12
+ Using Sass Buttons
13
+ ===================
14
+
15
+
16
+
17
+
18
+
19
+
20
+
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,5 @@
1
+ module Sass
2
+ module Buttons
3
+ VERSION = "0.1.1"
4
+ end
5
+ end
@@ -0,0 +1,3 @@
1
+ require 'compass'
2
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
+ Compass::Frameworks.register('sass-buttons', :path => extension_path)
data/sache.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "Sass Buttons",
3
+ "description": "Sass CSS buttons",
4
+ "tags": ["sass","buttons"]
5
+ }
@@ -0,0 +1,25 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'sass-buttons/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "sass-buttons"
8
+ spec.version = Sass::Buttons::VERSION
9
+ spec.authors = ["Lester Zhao"]
10
+ spec.email = ["zm.backer@gmail.com"]
11
+ spec.description = %q{Awesome CSS buttons using compass and sass }
12
+ spec.summary = %q{Easily create Awesome CSS buttons}
13
+ spec.homepage = "https://github.com/zmbacker/sass-buttons"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
18
+ spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
19
+ spec.require_paths = ["lib"]
20
+
21
+ spec.add_development_dependency "bundler", "~> 1.3"
22
+ spec.add_development_dependency "rake"
23
+
24
+ spec.add_dependency("compass", [">= 0.12.2"])
25
+ end
@@ -0,0 +1,2 @@
1
+ @import 'sass-buttons/buttons'
2
+
@@ -0,0 +1,497 @@
1
+ @import 'compass';
2
+ @import 'options'; // EDIT STYLES AND OPTIONS IN _options.scss
3
+ @import 'danger';
4
+ @import 'glow';
5
+
6
+
7
+ //////////////////////////////////////////////////////////
8
+ // "INHERIT-SAFE" FONT SIZES /////////////////////////////
9
+ //////////////////////////////////////////////////////////
10
+ // If user elects to use font-size: inherit in _options
11
+ // leave out calcs which result in inherit2 etc.
12
+ $unicorn-btn-smallfs: inherit;
13
+ $unicorn-btn-tinyfs: inherit;
14
+ $unicorn-btn-largefs: inherit;
15
+ @if $unicorn-btn-font-size != inherit {
16
+ $unicorn-btn-largefs: $unicorn-btn-font-size + 5;
17
+ $unicorn-btn-tinyfs: $unicorn-btn-font-size - 2;
18
+ $unicorn-btn-smallfs: $unicorn-btn-font-size + 1;
19
+ }
20
+
21
+ //////////////////////////////////////////////////////////
22
+ // BUTTON BASE STYLES ////////////////////////////////////
23
+ //////////////////////////////////////////////////////////
24
+ #{$unicorn-btn-namespace} {
25
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .15));
26
+ background-color: $unicorn-btn-bgcolor;
27
+ @include background(linear-gradient(top, lighten($unicorn-btn-bgcolor, 5%), darken($unicorn-btn-bgcolor, 5%)));
28
+ @include inline-block(middle);
29
+ border: 1px solid darken($unicorn-btn-bgcolor, 10%);
30
+ height: $unicorn-btn-height;
31
+ line-height: $unicorn-btn-height;
32
+ padding: 0px ($unicorn-btn-height * .8);
33
+ font-weight: $unicorn-btn-font-weight;
34
+ font-size: $unicorn-btn-font-size;
35
+ font-family: $unicorn-btn-font-family;
36
+ color: $unicorn-btn-font-color;
37
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
38
+ margin: 0;
39
+ text-decoration: none;
40
+ text-align: center;
41
+
42
+ &:hover {
43
+ background-color: $unicorn-btn-bgcolor;
44
+ @include background(linear-gradient(top, lighten($unicorn-btn-bgcolor, 10%), darken($unicorn-btn-bgcolor, 7%)));
45
+ }
46
+ &:active {
47
+ @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px rgba(255, 255, 255, 1));
48
+ text-shadow: 0px 1px 0px rgba(255, 255, 255, .4);
49
+ background: desaturate($unicorn-btn-bgcolor, 20%);
50
+ color: darken($unicorn-btn-bgcolor, 20%);
51
+ }
52
+ &:focus {
53
+ outline: none;
54
+ }
55
+ }
56
+
57
+ //HEIGHT NEEDED FOR FORM ELEMENTS
58
+ input#{$unicorn-btn-namespace}, button#{$unicorn-btn-namespace} {
59
+ height: $unicorn-btn-height + 2;
60
+ cursor: pointer;
61
+ -webkit-appearance: none;
62
+ }
63
+
64
+ // BLOCK BUTTON
65
+ #{$unicorn-btn-namespace}-block {
66
+ display: block;
67
+ }
68
+
69
+ // DISABLED STATE
70
+ #{$unicorn-btn-namespace}.disabled,
71
+ #{$unicorn-btn-namespace}.disabled:hover,
72
+ #{$unicorn-btn-namespace}.disabled:active,
73
+ input#{$unicorn-btn-namespace}:disabled,
74
+ button#{$unicorn-btn-namespace}:disabled {
75
+ @include box-shadow(0px 1px 2px rgba(0, 0, 0, .10));
76
+ @include opacity(.8);
77
+ background: #EEE;
78
+ border: 1px solid #DDD;
79
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
80
+ color: #CCC;
81
+ cursor: default;
82
+ -webkit-appearance: none;
83
+ }
84
+
85
+ // WRAPPER EFFECT
86
+ #{$unicorn-btn-namespace}-wrap {
87
+ @include background(linear-gradient(top, #e3e3e3, #f2f2f2));
88
+ @include border-radius(200px);
89
+ @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, 0.04));
90
+ padding: 10px;
91
+ display: inline-block;
92
+ }
93
+
94
+ // FLAT BUTTON BASE
95
+ @if $unicorn-btn-build-flat {
96
+ #{$unicorn-btn-namespace}-flat {
97
+ $unicorn-btn-background: $unicorn-btn-bgcolor;
98
+ @include box-shadow(none);
99
+ @include transition-property(background);
100
+ @include transition-duration(.3s);
101
+ background: $unicorn-btn-background;
102
+ border: none;
103
+ text-shadow: none;
104
+
105
+ &:hover {
106
+ background: lighten($unicorn-btn-background, 5%);
107
+ }
108
+ &:active {
109
+ @include transition-duration(0s);
110
+ background: desaturate($unicorn-btn-background, 20%);
111
+ color: darken($unicorn-btn-background, 20%);
112
+ }
113
+ &.disabled {
114
+ @include box-shadow(none);
115
+ -webkit-appearance: none;
116
+ }
117
+ }
118
+ }
119
+
120
+
121
+ // BORDER BUTTON BASE
122
+ @if $unicorn-btn-build-flat {
123
+ #{$unicorn-btn-namespace}-border {
124
+ @include box-shadow(none);
125
+ @include transition-property(all);
126
+ @include transition-duration(.3s);
127
+ color: $unicorn-btn-font-color;
128
+ border: 2px solid $unicorn-btn-font-color;
129
+ background: none;
130
+ text-shadow: none;
131
+
132
+ &:hover {
133
+ background: none;
134
+ color: lighten($unicorn-btn-font-color, 10%);
135
+ border: 2px solid lighten($unicorn-btn-font-color, 10%);
136
+ }
137
+ &:active {
138
+ @include transition-duration(0s);
139
+ background: none;
140
+ color: darken($unicorn-btn-font-color, 10%);
141
+ border: 2px solid darken($unicorn-btn-font-color, 10%);
142
+ }
143
+ &.disabled {
144
+ @include box-shadow(none);
145
+ -webkit-appearance: none;
146
+ }
147
+ }
148
+ }
149
+
150
+
151
+ // 3D BUTTON BASE
152
+ @if $unicorn-btn-build-3d {
153
+ #{$unicorn-btn-namespace}-3d {
154
+ @include transition-property(all);
155
+ @include transition-duration(.3s);
156
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-bgcolor, 20%), 0px 8px 3px rgba(0, 0, 0, .2));
157
+ @include background(linear-gradient(top, lighten($unicorn-btn-bgcolor, 2%), darken($unicorn-btn-bgcolor, 2%)));
158
+ background-color: $unicorn-btn-bgcolor;
159
+ color: $unicorn-btn-font-color;
160
+ border: 1px solid darken($unicorn-btn-bgcolor, 5%);
161
+ text-shadow: none;
162
+ position: relative;
163
+ top: 0px;
164
+
165
+ &:hover {
166
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-bgcolor, 20%), 0px 8px 3px rgba(0, 0, 0, .2));
167
+ @include background(linear-gradient(top, lighten($unicorn-btn-bgcolor, 8%), darken($unicorn-btn-bgcolor, 1%)));
168
+ background-color: lighten($unicorn-btn-bgcolor, 10%);
169
+ }
170
+ &:active {
171
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-bgcolor, 20%), 0px 3px 3px rgba(0, 0, 0, .2));
172
+ @include background(linear-gradient(top, darken($unicorn-btn-bgcolor, 2%), lighten($unicorn-btn-bgcolor, 2%)));
173
+ background-color: desaturate($unicorn-btn-bgcolor, 20%);
174
+ color: darken($unicorn-btn-bgcolor, 20%);
175
+ border: 1px solid darken($unicorn-btn-bgcolor, 5%);
176
+ top: 5px;
177
+ }
178
+ &.disabled {
179
+ @include box-shadow(none);
180
+ -webkit-appearance: none;
181
+ }
182
+ }
183
+ }
184
+
185
+
186
+ //////////////////////////////////////////////////////////
187
+ // SHAPES ////////////////////////////////////////////////
188
+ //////////////////////////////////////////////////////////
189
+ @each $unicorn-btn-style in $unicorn-btn-types {
190
+
191
+ // .button-rounded .button-pill button-circle
192
+ #{$unicorn-btn-namespace}-#{$unicorn-btn-style} {
193
+
194
+ @if $unicorn-btn-style == 'rounded' {
195
+ @include border-radius(3px);
196
+ }
197
+
198
+ @else if $unicorn-btn-style == 'pill' {
199
+ @include border-radius(50px);
200
+ }
201
+
202
+ @else if $unicorn-btn-style == 'circle' {
203
+ @include border-radius($unicorn-btn-circle-size * 2);
204
+ @include box-shadow(inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .20));
205
+ width: $unicorn-btn-circle-size;
206
+ line-height: $unicorn-btn-circle-size;
207
+ height: $unicorn-btn-circle-size;
208
+ padding: 0px;
209
+ border-width: 4px;
210
+ font-size: $unicorn-btn-largefs;
211
+ }
212
+ }
213
+ }
214
+
215
+
216
+ //////////////////////////////////////////////////////////
217
+ // ACTION STYLES /////////////////////////////////////////
218
+ //////////////////////////////////////////////////////////
219
+ @each $unicorn-btn-action in $unicorn-btn-actions {
220
+ //GET NAME & COLOR
221
+ $unicorn-btn-name: nth($unicorn-btn-action, 1);
222
+ $unicorn-btn-background: nth($unicorn-btn-action, 2);
223
+ $unicorn-btn-color: nth($unicorn-btn-action, 3);
224
+
225
+ // .button-primary .button-action etc.
226
+ #{$unicorn-btn-namespace}-#{$unicorn-btn-name} {
227
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
228
+ background-color: $unicorn-btn-background;
229
+ border-color: darken($unicorn-btn-background, 10%);
230
+ color: $unicorn-btn-color;
231
+ text-shadow: 0 -1px 1px rgba(darken($unicorn-btn-background, 30%), 0.35);
232
+
233
+ &:hover {
234
+ background-color: $unicorn-btn-background;
235
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 10%), darken($unicorn-btn-background, 5%)));
236
+ }
237
+ &:active {
238
+ background: desaturate($unicorn-btn-background, 20%);
239
+ color: darken($unicorn-btn-background, 20%);
240
+ }
241
+ }
242
+
243
+
244
+ /////////////////////////////
245
+ //3D BUTTON STYLES //////////
246
+ ////////////////////////////
247
+ @if $unicorn-btn-build-3d {
248
+
249
+ // .button-border-primary .button-border-action etc.
250
+ #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name} {
251
+ @include transition-property(all);
252
+ @include transition-duration(.3s);
253
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 10%), 0px 8px 3px rgba(0, 0, 0, .30));
254
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 2%), darken($unicorn-btn-background, 2%)));
255
+ background-color: $unicorn-btn-background;
256
+ color: $unicorn-btn-color;
257
+ border: 1px solid darken($unicorn-btn-background, 10%);
258
+ text-shadow: none;
259
+ position: relative;
260
+ top: 0px;
261
+
262
+ &:hover {
263
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 12%), 0px 8px 3px rgba(0, 0, 0, .30));
264
+ @include background(linear-gradient(top, lighten($unicorn-btn-background, 8%), darken($unicorn-btn-background, 1%)));
265
+ background-color: lighten($unicorn-btn-background, 10%);
266
+ }
267
+ &:active {
268
+ @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-background, 10%), 0px 3px 3px rgba(0, 0, 0, .30));
269
+ @include background(linear-gradient(top, darken($unicorn-btn-background, 2%), lighten($unicorn-btn-background, 2%)));
270
+ background-color: desaturate($unicorn-btn-background, 20%);
271
+ color: darken($unicorn-btn-background, 20%);
272
+ border: 1px solid darken($unicorn-btn-background, 5%);
273
+ top: 5px;
274
+ }
275
+ &.disabled {
276
+ @include box-shadow(none);
277
+ -webkit-appearance: none;
278
+ }
279
+ }
280
+ }
281
+
282
+
283
+ /////////////////////////////
284
+ //BORDER BUTTON STYLES //////
285
+ ////////////////////////////
286
+ @if $unicorn-btn-build-border {
287
+
288
+ // .button-border-primary .button-border-action etc.
289
+ #{$unicorn-btn-namespace}-border-#{$unicorn-btn-name} {
290
+ @include box-shadow(none);
291
+ @include transition-property(all);
292
+ @include transition-duration(.3s);
293
+ color: $unicorn-btn-background;
294
+ border: 2px solid $unicorn-btn-background;
295
+ background: none;
296
+ text-shadow: none;
297
+
298
+ &:hover {
299
+ background: none;
300
+ color: lighten($unicorn-btn-background, 10%);
301
+ border: 2px solid lighten($unicorn-btn-background, 10%);
302
+ }
303
+ &:active {
304
+ @include transition-duration(0s);
305
+ background: none;
306
+ color: darken($unicorn-btn-background, 10%);
307
+ border: 2px solid darken($unicorn-btn-background, 10%);
308
+ }
309
+ &.disabled {
310
+ @include box-shadow(none);
311
+ -webkit-appearance: none;
312
+ }
313
+ }
314
+ }
315
+
316
+ //////////////////////////
317
+ //FLAT BUTTON STYLES /////
318
+ //////////////////////////
319
+ @if $unicorn-btn-build-flat {
320
+ // .button-flat-primary .button-flat-action etc.
321
+ #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name} {
322
+ @include box-shadow(none);
323
+ @include transition-property(background);
324
+ @include transition-duration(.3s);
325
+ background: $unicorn-btn-background;
326
+ color: $unicorn-btn-color;
327
+ text-shadow: none;
328
+ border: none;
329
+
330
+ &:hover {
331
+ background: lighten($unicorn-btn-background, 5%);
332
+ }
333
+ &:active {
334
+ @include transition-duration(0s);
335
+ background: desaturate($unicorn-btn-background, 20%);
336
+ color: darken($unicorn-btn-background, 15%);
337
+ }
338
+ &.disabled {
339
+ @include box-shadow(none);
340
+ -webkit-appearance: none;
341
+ }
342
+ }
343
+ }
344
+ }
345
+
346
+
347
+
348
+
349
+
350
+
351
+ //////////////////////////////////////////////////////////
352
+ // SIZES /////////////////////////////////////////////////
353
+ //////////////////////////////////////////////////////////
354
+
355
+ @each $unicorn-btn-size in $unicorn-btn-sizes {
356
+
357
+ // .button-large .button-small .button-tiny
358
+ #{$unicorn-btn-namespace}-#{$unicorn-btn-size} {
359
+ @if $unicorn-btn-size == 'jumbo' {
360
+ font-size: $unicorn-btn-largefs + 5;
361
+ height: $unicorn-btn-height * 1.6;
362
+ line-height: $unicorn-btn-height * 1.6;
363
+ padding: 0px ($unicorn-btn-height * 1.6) * .8;
364
+ }
365
+
366
+ @if $unicorn-btn-size == 'large' {
367
+ font-size: $unicorn-btn-largefs;
368
+ height: $unicorn-btn-height * 1.2;
369
+ line-height: $unicorn-btn-height * 1.2;
370
+ padding: 0px ($unicorn-btn-height * 1.2) * .8;
371
+ }
372
+
373
+ @if $unicorn-btn-size == 'small' {
374
+ font-size: $unicorn-btn-smallfs;
375
+ height: $unicorn-btn-height * .8;
376
+ line-height: $unicorn-btn-height * .8;
377
+ padding: 0px ($unicorn-btn-height * .8) * .8;
378
+ }
379
+
380
+ @if $unicorn-btn-size == 'tiny' {
381
+ font-size: $unicorn-btn-tinyfs;
382
+ height: $unicorn-btn-height * .7;
383
+ line-height: $unicorn-btn-height * .7;
384
+ padding: 0px ($unicorn-btn-height * .7) * .8;
385
+ }
386
+ }
387
+
388
+ //HEIGHT NEEDED FOR FORM ELEMENTS +2px on height
389
+ input#{$unicorn-btn-namespace}-#{$unicorn-btn-size}, button#{$unicorn-btn-namespace}-#{$unicorn-btn-size} {
390
+ @if $unicorn-btn-size == 'large' {
391
+ height: ($unicorn-btn-height * 1.2) + 2;
392
+ }
393
+
394
+ @if $unicorn-btn-size == 'small' {
395
+ height: ($unicorn-btn-height * .8) + 2;
396
+ }
397
+
398
+ @if $unicorn-btn-size == 'tiny' {
399
+ height: ($unicorn-btn-height * .7) + 2;
400
+ }
401
+ }
402
+ }
403
+
404
+
405
+ //////////////////////////////////////////////////////////
406
+ // GLOWING BUTTON STYLES /////////////////////////////////
407
+ //////////////////////////////////////////////////////////
408
+ @if $unicorn-btn-build-glow {
409
+ #{$unicorn-btn-namespace} {
410
+ &#{$unicorn-btn-glow-namespace} {
411
+ @include glow;
412
+ }
413
+ &#{$unicorn-btn-glow-namespace}:active {
414
+ @include no_animation;
415
+ @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px rgba(255, 255, 255, 1));
416
+ }
417
+ }
418
+ }
419
+
420
+
421
+ //////////////////////////////////////////////////////////
422
+ // DROPDOWN //////////////////////////////////////////////
423
+ //////////////////////////////////////////////////////////
424
+ @if $unicorn-btn-build-dropdown {
425
+ #{$unicorn-btn-namespace}-dropdown {
426
+ position: relative;
427
+ overflow: visible;
428
+ display: inline-block;
429
+
430
+ //EXTRA STYLES FOR CARET
431
+ .button {
432
+ .icon-caret-down {
433
+ font-size: 90%;
434
+ margin: 0px 0px 0px 3px;
435
+ vertical-align: middle;
436
+ }
437
+ }
438
+
439
+ ul#{$unicorn-btn-namespace}-dropdown-menu-below {
440
+ top: 115%;
441
+ }
442
+ ul#{$unicorn-btn-namespace}-dropdown-menu-above {
443
+ bottom: 115%;
444
+ top: auto;
445
+ }
446
+
447
+ //DROPDOWN MENU STYLES
448
+ ul {
449
+ @include box-shadow(0px 3px 6px rgba(0, 0, 0, 0.6));
450
+ @include border-radius(3px);
451
+ display: none;
452
+ position: absolute;
453
+ background: $unicorn-btn-dropdown-background;
454
+ top: -2px;
455
+ left: -2px;
456
+ z-index: 1000;
457
+ padding: 0px;
458
+ margin: 0px;
459
+ list-style-type: none;
460
+ min-width: 102%;
461
+
462
+ li {
463
+ padding: 0px;
464
+ margin: 0px;
465
+ display: block;
466
+
467
+ &:first-child a {
468
+ @include border-top-radius(3px);
469
+ }
470
+ &:last-child a {
471
+ @include border-bottom-radius(3px);
472
+ }
473
+ }
474
+
475
+ //DROPDOWN MENU DIVIDER
476
+ #{$unicorn-btn-namespace}-dropdown-divider {
477
+ @include box-shadow(inset 0px 1px 0px #FFF);
478
+ border-top: 1px solid #e4e4e4;
479
+ }
480
+
481
+ a {
482
+ display: block;
483
+ padding: 0px 20px;
484
+ text-decoration: none;
485
+ font-size: $unicorn-btn-tinyfs;
486
+ color: $unicorn-btn-dropdown-link-color;
487
+ line-height: 30px;
488
+ white-space: nowrap;
489
+
490
+ &:hover {
491
+ background-color: $unicorn-btn-dropdown-link-hover-background;
492
+ color: $unicorn-btn-dropdown-link-hover;
493
+ }
494
+ }
495
+ }
496
+ }
497
+ }
@@ -0,0 +1,42 @@
1
+ //////////////////////////////////////////////////////////
2
+ // BUILD TYPES (don't edit this!) ///////////////////////
3
+ //////////////////////////////////////////////////////////
4
+ // Purpose of this file is to set global flags for which
5
+ // types we'll include in our final css build or not.
6
+ $unicorn-btn-build-glow: false;
7
+ $unicorn-btn-build-dropdown: false;
8
+ $unicorn-btn-build-rounded: false;
9
+ $unicorn-btn-build-pill: false;
10
+ $unicorn-btn-build-circle: false;
11
+ $unicorn-btn-build-flat: false;
12
+ $unicorn-btn-build-3d: false;
13
+ $unicorn-btn-build-border: false;
14
+
15
+ // For all types provided by user we mark true
16
+ @each $unicorn-btn-type in $unicorn-btn-types {
17
+ @if $unicorn-btn-type == 'glow' {
18
+ $unicorn-btn-build-glow: true;
19
+ }
20
+ @else if $unicorn-btn-type == 'dropdown' {
21
+ $unicorn-btn-build-dropdown: true;
22
+ }
23
+ @else if $unicorn-btn-type == 'rounded' {
24
+ $unicorn-btn-build-rounded: true;
25
+ }
26
+ @else if $unicorn-btn-type == 'pill' {
27
+ $unicorn-btn-build-pill: true;
28
+ }
29
+ @else if $unicorn-btn-type == 'circle' {
30
+ $unicorn-btn-build-circle: true;
31
+ }
32
+ @else if $unicorn-btn-type == 'flat' {
33
+ $unicorn-btn-build-flat: true;
34
+ }
35
+ @else if $unicorn-btn-type == 'border' {
36
+ $unicorn-btn-build-border: true;
37
+ }
38
+ @else if $unicorn-btn-type == '3d' {
39
+ $unicorn-btn-build-3d: true;
40
+ }
41
+ }
42
+ //@debug "$unicorn-btn-build-glow is #{$unicorn-btn-build-glow}";
@@ -0,0 +1,61 @@
1
+ @import 'options';
2
+
3
+ // Only include all this junk if $unicorn-btn-build-types list had 'glow'
4
+ // We looked in to conditional imports but no go in Sass today
5
+ @if $unicorn-btn-build-glow {
6
+ //////////////////////////////////////////////////////////
7
+ // GLOWING BUTTON STYLES ////////////////////////////////////////
8
+ //////////////////////////////////////////////////////////
9
+ @-webkit-keyframes glowing,
10
+ {
11
+ from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
12
+ 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
13
+ to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
14
+ }
15
+ @-moz-keyframes glowing,
16
+ {
17
+ from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
18
+ 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
19
+ to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
20
+ }
21
+ @-o-keyframes glowing,
22
+ {
23
+ from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
24
+ 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
25
+ to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
26
+ }
27
+ @keyframes glowing,
28
+ {
29
+ from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
30
+ 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
31
+ to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
32
+ }
33
+ }
34
+
35
+ @mixin glow {
36
+ -webkit-animation-duration: 3s;
37
+ -moz-animation-duration: 3s;
38
+ -ms-animation-duration: 3s;
39
+ -o-animation-duration: 3s;
40
+ animation-duration: 3s;
41
+ -webkit-animation-iteration-count: infinite;
42
+ -khtml-animation-iteration-count: infinite;
43
+ -moz-animation-iteration-count: infinite;
44
+ -ms-animation-iteration-count: infinite;
45
+ -o-animation-iteration-count: infinite;
46
+ animation-iteration-count: infinite;
47
+ -webkit-animation-name: glowing;
48
+ -khtml-animation-name: glowing;
49
+ -moz-animation-name: glowing;
50
+ -ms-animation-name: glowing;
51
+ -o-animation-name: glowing;
52
+ animation-name: glowing;
53
+ }
54
+
55
+ @mixin no_animation {
56
+ -webkit-animation-name: none;
57
+ -moz-animation-name: none;
58
+ -ms-animation-name: none;
59
+ -o-animation-name: none;
60
+ animation-name: none;
61
+ }
@@ -0,0 +1,38 @@
1
+
2
+ //////////////////////////////////////////////////////////
3
+ // BASE DEFAULTS /////////////////////////////////////////
4
+ //////////////////////////////////////////////////////////
5
+ $unicorn-btn-namespace: '.button'; //prefix for all classes
6
+ $unicorn-btn-glow-namespace: '.glow';
7
+ $unicorn-btn-glow-color: #2c9adb;
8
+ $unicorn-btn-bgcolor: #EEE;
9
+ $unicorn-btn-height: 32px;
10
+
11
+
12
+ //////////////////////////////////////////////////////////
13
+ // TYPOGRAPHY ////////////////////////////////////////////
14
+ //////////////////////////////////////////////////////////
15
+ $unicorn-btn-font-color: #666;
16
+ $unicorn-btn-font-size: 14px;
17
+ $unicorn-btn-font-weight: 300;
18
+ $unicorn-btn-font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
19
+
20
+ //////////////////////////////////////////////////////////
21
+ // BUTTON OPTIONS ////////////////////////////////////////
22
+ //////////////////////////////////////////////////////////
23
+
24
+ // (name background-color font-color) add as many as you like.
25
+ $unicorn-btn-actions: ('primary' #00A1CB #FFF) ('secondary' #FFF #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF)('caution' #E54028 #FFF) ('royal' #87318C #FFF);
26
+ // Remove any type to omit from final CSS build
27
+ $unicorn-btn-types: 'rounded' 'pill' 'circle' 'dropdown' 'glow' 'flat' 'border' '3d';
28
+ $unicorn-btn-sizes: 'jumbo' 'large' 'small' 'tiny';
29
+ $unicorn-btn-circle-size: 120px; //radius for circle buttons, circles only have one size
30
+
31
+
32
+ //////////////////////////////////////////////////////////
33
+ // DROPDOWN OPTIONS //////////////////////////////////////
34
+ //////////////////////////////////////////////////////////
35
+ $unicorn-btn-dropdown-background: #fcfcfc;
36
+ $unicorn-btn-dropdown-link-color: #333;
37
+ $unicorn-btn-dropdown-link-hover: #FFF;
38
+ $unicorn-btn-dropdown-link-hover-background: #3c6ab9;
metadata ADDED
@@ -0,0 +1,99 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: sass-buttons
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.1
5
+ platform: ruby
6
+ authors:
7
+ - Lester Zhao
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2014-02-16 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.3'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.3'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: compass
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ">="
46
+ - !ruby/object:Gem::Version
47
+ version: 0.12.2
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: 0.12.2
55
+ description: 'Awesome CSS buttons using compass and sass '
56
+ email:
57
+ - zm.backer@gmail.com
58
+ executables: []
59
+ extensions: []
60
+ extra_rdoc_files: []
61
+ files:
62
+ - Gemfile
63
+ - LICENSE.txt
64
+ - README.md
65
+ - Rakefile
66
+ - lib/sass-buttons.rb
67
+ - lib/sass-buttons/version.rb
68
+ - sache.json
69
+ - sass-buttons.gemspec
70
+ - stylesheets/_sass-buttons.scss
71
+ - stylesheets/sass-buttons/_buttons.scss
72
+ - stylesheets/sass-buttons/_danger.scss
73
+ - stylesheets/sass-buttons/_glow.scss
74
+ - stylesheets/sass-buttons/_options.scss
75
+ homepage: https://github.com/zmbacker/sass-buttons
76
+ licenses:
77
+ - MIT
78
+ metadata: {}
79
+ post_install_message:
80
+ rdoc_options: []
81
+ require_paths:
82
+ - lib
83
+ required_ruby_version: !ruby/object:Gem::Requirement
84
+ requirements:
85
+ - - ">="
86
+ - !ruby/object:Gem::Version
87
+ version: '0'
88
+ required_rubygems_version: !ruby/object:Gem::Requirement
89
+ requirements:
90
+ - - ">="
91
+ - !ruby/object:Gem::Version
92
+ version: '0'
93
+ requirements: []
94
+ rubyforge_project:
95
+ rubygems_version: 2.2.1
96
+ signing_key:
97
+ specification_version: 4
98
+ summary: Easily create Awesome CSS buttons
99
+ test_files: []