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 +7 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +20 -0
- data/Rakefile +1 -0
- data/lib/sass-buttons/version.rb +5 -0
- data/lib/sass-buttons.rb +3 -0
- data/sache.json +5 -0
- data/sass-buttons.gemspec +25 -0
- data/stylesheets/_sass-buttons.scss +2 -0
- data/stylesheets/sass-buttons/_buttons.scss +497 -0
- data/stylesheets/sass-buttons/_danger.scss +42 -0
- data/stylesheets/sass-buttons/_glow.scss +61 -0
- data/stylesheets/sass-buttons/_options.scss +38 -0
- metadata +99 -0
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
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"
|
data/lib/sass-buttons.rb
ADDED
data/sache.json
ADDED
@@ -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,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: []
|