bourbon 0.0.7 → 0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. data/LICENSE +23 -0
  2. data/app/assets/stylesheets/functions/_grid-width.css.scss +13 -0
  3. data/lib/bourbon/version.rb +1 -1
  4. data/readme.md +32 -4
  5. metadata +6 -7
  6. data/demo/index.html +0 -66
  7. data/demo/stylesheets/demo.css +0 -498
  8. data/demo/stylesheets/scss/demo.scss +0 -100
data/LICENSE ADDED
@@ -0,0 +1,23 @@
1
+ LICENSE
2
+
3
+ The MIT License
4
+
5
+ Copyright (c) 2011 thoughtbot, inc.
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ of this software and associated documentation files (the "Software"), to deal
9
+ in the Software without restriction, including without limitation the rights
10
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ copies of the Software, and to permit persons to whom the Software is
12
+ furnished to do so, subject to the following conditions:
13
+
14
+ The above copyright notice and this permission notice shall be included in
15
+ all copies or substantial portions of the Software.
16
+
17
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23
+ THE SOFTWARE.
data/app/assets/stylesheets/functions/_grid-width.css.scss ADDED
@@ -0,0 +1,13 @@
1
+ @function grid-width($n) {
2
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
3
+ }
4
+
5
+ // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
6
+ //
7
+ // $gw-column: 100px; // Column Width
8
+ // $gw-gutter: 40px; // Gutter Width
9
+ //
10
+ // div {
11
+ // width: grid-width(4); // returns 520px;
12
+ // margin-left: $gw-gutter; // returns 40px;
13
+ // }
data/lib/bourbon/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Bourbon
2
- VERSION = "0.0.7"
2
+ VERSION = "0.0.8"
3
3
  end
data/readme.md CHANGED
@@ -1,6 +1,6 @@
1
- #Bourbon Vanilla Sass Mixins
2
- The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive framework of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
3
-
1
+ #Bourbon Sass Mixins
2
+ The purpose of Bourbon Sass Mixins is to provide a comprehensive framework of sass mixins that are designed to be as vanilla as possible. Meaning they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.
3
+ Bourbon uses SCSS syntax.
4
4
 
5
5
  #Requirements
6
6
  Sass 3.1+
@@ -14,6 +14,7 @@ Update your Gemfile
14
14
  bundle install
15
15
 
16
16
  ##Rails 3.1.x
17
+ Bourbon needs the sass files to be imported in a specific order to function properly—therefore you will need to disabled the require_tree sprocket directive.
17
18
  Comment-out the following sprocket directive in /application.css.scss (Remove the =)
18
19
 
19
20
  * require_tree .
@@ -188,6 +189,20 @@ Returns the golden ratio of a given number. Must provide a Pixel or Em value for
188
189
  Resources: [modularscale.com](http://modularscale.com) & [goldenratiocalculator.com](http://goldenratiocalculator.com)
189
190
 
190
191
 
192
+ ###Grid-width
193
+
194
+ Easily setup and follow a grid based design. Need help gridding? Check out [gridulator.com](http://gridulator.com/)
195
+
196
+ # The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
197
+ $gw-column: 100px; // Column Width
198
+ $gw-gutter: 40px; // Gutter Width
199
+
200
+ div {
201
+ width: grid-width(4); // returns 520px;
202
+ margin-left: $gw-gutter; // returns 40px;
203
+ }
204
+
205
+
191
206
  ###Tint & Shade
192
207
 
193
208
  Tint & shade are different from lighten() and darken() functions built into sass.
@@ -227,7 +242,7 @@ The real power of the mixin is revealed when you pass in the optional color argu
227
242
 
228
243
  button,
229
244
  input[type="button"] {
230
- @include button(shiny, #ff000);
245
+ @include button(shiny, #ff0000);
231
246
  }
232
247
 
233
248
 
@@ -238,6 +253,7 @@ The real power of the mixin is revealed when you pass in the optional color argu
238
253
  --------------------------------
239
254
  compact(*args)
240
255
  golden-ratio(*args)
256
+ grid-width(*args)
241
257
  shade(*args)
242
258
  tint(*args)
243
259
 
@@ -288,7 +304,19 @@ The real power of the mixin is revealed when you pass in the optional color argu
288
304
 
289
305
 
290
306
  ##Help Out
307
+
291
308
  Currently the project is a work in progress. Feel free to help out.
292
309
 
310
+ Credits
311
+ -------
312
+
313
+ ![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
314
+
315
+ Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community)
316
+
317
+ The names and logos for thoughtbot are trademarks of thoughtbot, inc.
293
318
 
319
+ License
320
+ -------
294
321
 
322
+ Bourbon is Copyright © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bourbon
3
3
  version: !ruby/object:Gem::Version
4
- hash: 17
4
+ hash: 15
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
8
  - 0
9
- - 7
10
- version: 0.0.7
9
+ - 8
10
+ version: 0.0.8
11
11
  platform: ruby
12
12
  authors:
13
13
  - Phil LaPier
@@ -17,7 +17,7 @@ autorequire:
17
17
  bindir: bin
18
18
  cert_chain: []
19
19
 
20
- date: 2011-07-04 00:00:00 Z
20
+ date: 2011-07-11 00:00:00 Z
21
21
  dependencies:
22
22
  - !ruby/object:Gem::Dependency
23
23
  name: sass
@@ -53,6 +53,7 @@ extra_rdoc_files: []
53
53
  files:
54
54
  - .gitignore
55
55
  - Gemfile
56
+ - LICENSE
56
57
  - Rakefile
57
58
  - app/assets/stylesheets/_bourbon.css.scss
58
59
  - app/assets/stylesheets/addons/_button.css.scss
@@ -69,11 +70,9 @@ files:
69
70
  - app/assets/stylesheets/css3/_transition.css.scss
70
71
  - app/assets/stylesheets/functions/_compact.css.scss
71
72
  - app/assets/stylesheets/functions/_golden-ratio.css.scss
73
+ - app/assets/stylesheets/functions/_grid-width.css.scss
72
74
  - app/assets/stylesheets/functions/_tint-shade.css.scss
73
75
  - bourbon.gemspec
74
- - demo/index.html
75
- - demo/stylesheets/demo.css
76
- - demo/stylesheets/scss/demo.scss
77
76
  - generate-sass.sh
78
77
  - lib/bourbon.rb
79
78
  - lib/bourbon/engine.rb
data/demo/index.html DELETED
@@ -1,66 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="description" content="Examples of the sass mixins in use.">
6
- <title>Sass mixins demo page</title>
7
- <link rel="stylesheet" href="stylesheets/demo.css" type="text/css">
8
- </head>
9
-
10
- <body>
11
-
12
- <section id="buttons">
13
- <h2>Demo: button mixin</h2>
14
- <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
15
-
16
- <section class="button-set simple">
17
- <p>Simple</p>
18
-
19
- <section>
20
- <button class="default">Simple button</button>
21
- </section>
22
-
23
- <section>
24
- <button class="color-2">Simple button</button>
25
- </section>
26
-
27
- <section>
28
- <button class="color-3">Simple button</button>
29
- </section>
30
- </section>
31
-
32
- <section class="button-set shiny">
33
- <p>Shiny</p>
34
-
35
- <section>
36
- <button class="default">Shiny button</button>
37
- </section>
38
-
39
- <section>
40
- <button class="color-2">Shiny button</button>
41
- </section>
42
-
43
- <section>
44
- <button class="color-3">Shiny button</button>
45
- </section>
46
- </section>
47
-
48
- <section class="button-set pill">
49
- <p>Pill</p>
50
-
51
- <section>
52
- <button class="default">Pill button</button>
53
- </section>
54
-
55
- <section>
56
- <button class="color-2">Pill button</button>
57
- </section>
58
-
59
- <section>
60
- <button class="color-3">Pill button</button>
61
- </section>
62
- </section>
63
- </section>
64
-
65
- </body>
66
- </html>
data/demo/stylesheets/demo.css DELETED
@@ -1,498 +0,0 @@
1
- .clearfix:after, #buttons .button-set:after {
2
- clear: both;
3
- content: ' ';
4
- display: block;
5
- font-size: 0;
6
- line-height: 0;
7
- visibility: hidden;
8
- width: 0;
9
- height: 0; }
10
-
11
- body {
12
- color: #333; }
13
-
14
- #buttons {
15
- margin: 50px auto;
16
- width: 995px; }
17
- #buttons h2 {
18
- font: 300 22px "helvetica neue", sans-serif;
19
- margin: 0 0 4px 0; }
20
- #buttons p {
21
- color: #777;
22
- font: normal 14px "helvetica neue", sans-serif;
23
- margin: 0 0 24px 0; }
24
- #buttons .button-set {
25
- margin: 0 0 40px 0; }
26
- #buttons .button-set p {
27
- border-bottom: 1px solid #ddd;
28
- font: bold 14px "helvetica neue", sans-serif;
29
- padding: 0 0 4px 0; }
30
- #buttons .button-set section {
31
- float: left;
32
- margin-right: 25px;
33
- text-align: center;
34
- width: 315px; }
35
- #buttons .button-set section:last-child {
36
- margin-right: 0; }
37
-
38
- .simple button.default {
39
- border: 1px solid #076fe4;
40
- -webkit-border-radius: 3px;
41
- -moz-border-radius: 3px;
42
- -ms-border-radius: 3px;
43
- -o-border-radius: 3px;
44
- border-radius: 3px;
45
- -webkit-box-shadow: inset 0 1px 0 0 #8ebcf1;
46
- -moz-box-shadow: inset 0 1px 0 0 #8ebcf1;
47
- -ms-box-shadow: inset 0 1px 0 0 #8ebcf1;
48
- -o-box-shadow: inset 0 1px 0 0 #8ebcf1;
49
- box-shadow: inset 0 1px 0 0 #8ebcf1;
50
- color: white;
51
- display: inline;
52
- font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
53
- background-color: #4294f0;
54
- background-image: -webkit-gradient(linear, left top, left bottom, from(#4294f0), to(#0776f3));
55
- /* Saf4+, Chrome */
56
- background-image: -webkit-linear-gradient(top, #4294f0, #0776f3);
57
- background-image: -moz-linear-gradient(top, #4294f0, #0776f3);
58
- background-image: -ms-linear-gradient(top, #4294f0, #0776f3);
59
- background-image: -o-linear-gradient(top, #4294f0, #0776f3);
60
- background-image: linear-gradient(top, #4294f0, #0776f3);
61
- padding: 6px 18px 7px;
62
- text-shadow: 0 1px 0 #0065d6;
63
- -webkit-background-clip: padding-box; }
64
- .simple button.default:hover {
65
- -webkit-box-shadow: inset 0 1px 0 0 #60a2ec;
66
- -moz-box-shadow: inset 0 1px 0 0 #60a2ec;
67
- -ms-box-shadow: inset 0 1px 0 0 #60a2ec;
68
- -o-box-shadow: inset 0 1px 0 0 #60a2ec;
69
- box-shadow: inset 0 1px 0 0 #60a2ec;
70
- cursor: pointer;
71
- background-color: #2f87ea;
72
- background-image: -webkit-gradient(linear, left top, left bottom, from(#2f87ea), to(#086fe3));
73
- /* Saf4+, Chrome */
74
- background-image: -webkit-linear-gradient(top, #2f87ea, #086fe3);
75
- background-image: -moz-linear-gradient(top, #2f87ea, #086fe3);
76
- background-image: -ms-linear-gradient(top, #2f87ea, #086fe3);
77
- background-image: -o-linear-gradient(top, #2f87ea, #086fe3);
78
- background-image: linear-gradient(top, #2f87ea, #086fe3); }
79
- .simple button.default:active {
80
- border: 1px solid #076fe4;
81
- -webkit-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
82
- -moz-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
83
- -ms-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
84
- -o-box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee;
85
- box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3, 0 1px 1px 0 #eeeeee; }
86
- .simple button.color-2 {
87
- border: 1px solid #b80c00;
88
- -webkit-border-radius: 3px;
89
- -moz-border-radius: 3px;
90
- -ms-border-radius: 3px;
91
- -o-border-radius: 3px;
92
- border-radius: 3px;
93
- -webkit-box-shadow: inset 0 1px 0 0 #f85f54;
94
- -moz-box-shadow: inset 0 1px 0 0 #f85f54;
95
- -ms-box-shadow: inset 0 1px 0 0 #f85f54;
96
- -o-box-shadow: inset 0 1px 0 0 #f85f54;
97
- box-shadow: inset 0 1px 0 0 #f85f54;
98
- color: white;
99
- display: inline;
100
- font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
101
- background-color: #ff1100;
102
- background-image: -webkit-gradient(linear, left top, left bottom, from(#ff1100), to(#c70d00));
103
- /* Saf4+, Chrome */
104
- background-image: -webkit-linear-gradient(top, #ff1100, #c70d00);
105
- background-image: -moz-linear-gradient(top, #ff1100, #c70d00);
106
- background-image: -ms-linear-gradient(top, #ff1100, #c70d00);
107
- background-image: -o-linear-gradient(top, #ff1100, #c70d00);
108
- background-image: linear-gradient(top, #ff1100, #c70d00);
109
- padding: 6px 18px 7px;
110
- text-shadow: 0 1px 0 #a30b00;
111
- -webkit-background-clip: padding-box; }
112
- .simple button.color-2:hover {
113
- -webkit-box-shadow: inset 0 1px 0 0 #f73022;
114
- -moz-box-shadow: inset 0 1px 0 0 #f73022;
115
- -ms-box-shadow: inset 0 1px 0 0 #f73022;
116
- -o-box-shadow: inset 0 1px 0 0 #f73022;
117
- box-shadow: inset 0 1px 0 0 #f73022;
118
- cursor: pointer;
119
- background-color: #e11305;
120
- background-image: -webkit-gradient(linear, left top, left bottom, from(#e11305), to(#b80c00));
121
- /* Saf4+, Chrome */
122
- background-image: -webkit-linear-gradient(top, #e11305, #b80c00);
123
- background-image: -moz-linear-gradient(top, #e11305, #b80c00);
124
- background-image: -ms-linear-gradient(top, #e11305, #b80c00);
125
- background-image: -o-linear-gradient(top, #e11305, #b80c00);
126
- background-image: linear-gradient(top, #e11305, #b80c00); }
127
- .simple button.color-2:active {
128
- border: 1px solid #b80c00;
129
- -webkit-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
130
- -moz-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
131
- -ms-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
132
- -o-box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee;
133
- box-shadow: inset 0 0 8px 4px #a80b00, inset 0 0 8px 4px #a80b00, 0 1px 1px 0 #eeeeee; }
134
- .simple button.color-3 {
135
- border: 1px solid #158d23;
136
- -webkit-border-radius: 3px;
137
- -moz-border-radius: 3px;
138
- -ms-border-radius: 3px;
139
- -o-border-radius: 3px;
140
- border-radius: 3px;
141
- -webkit-box-shadow: inset 0 1px 0 0 #62d470;
142
- -moz-box-shadow: inset 0 1px 0 0 #62d470;
143
- -ms-box-shadow: inset 0 1px 0 0 #62d470;
144
- -o-box-shadow: inset 0 1px 0 0 #62d470;
145
- box-shadow: inset 0 1px 0 0 #62d470;
146
- color: white;
147
- display: inline;
148
- font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
149
- background-color: #29c13b;
150
- background-image: -webkit-gradient(linear, left top, left bottom, from(#29c13b), to(#179b27));
151
- /* Saf4+, Chrome */
152
- background-image: -webkit-linear-gradient(top, #29c13b, #179b27);
153
- background-image: -moz-linear-gradient(top, #29c13b, #179b27);
154
- background-image: -ms-linear-gradient(top, #29c13b, #179b27);
155
- background-image: -o-linear-gradient(top, #29c13b, #179b27);
156
- background-image: linear-gradient(top, #29c13b, #179b27);
157
- padding: 6px 18px 7px;
158
- text-shadow: 0 1px 0 #0e801c;
159
- -webkit-background-clip: padding-box; }
160
- .simple button.color-3:hover {
161
- -webkit-box-shadow: inset 0 1px 0 0 #39ca4a;
162
- -moz-box-shadow: inset 0 1px 0 0 #39ca4a;
163
- -ms-box-shadow: inset 0 1px 0 0 #39ca4a;
164
- -o-box-shadow: inset 0 1px 0 0 #39ca4a;
165
- box-shadow: inset 0 1px 0 0 #39ca4a;
166
- cursor: pointer;
167
- background-color: #29a838;
168
- background-image: -webkit-gradient(linear, left top, left bottom, from(#29a838), to(#168d24));
169
- /* Saf4+, Chrome */
170
- background-image: -webkit-linear-gradient(top, #29a838, #168d24);
171
- background-image: -moz-linear-gradient(top, #29a838, #168d24);
172
- background-image: -ms-linear-gradient(top, #29a838, #168d24);
173
- background-image: -o-linear-gradient(top, #29a838, #168d24);
174
- background-image: linear-gradient(top, #29a838, #168d24); }
175
- .simple button.color-3:active {
176
- border: 1px solid #158d23;
177
- -webkit-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
178
- -moz-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
179
- -ms-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
180
- -o-box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee;
181
- box-shadow: inset 0 0 8px 4px #157f21, inset 0 0 8px 4px #157f21, 0 1px 1px 0 #eeeeee; }
182
-
183
- .shiny button.default {
184
- background-color: #4294f0;
185
- background-image: -webkit-gradient(linear, left top, left bottom, from(#4294f0 0%), to(#116dd5 50%));
186
- /* Saf4+, Chrome */
187
- background-image: -webkit-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
188
- background-image: -moz-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
189
- background-image: -ms-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
190
- background-image: -o-linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
191
- background-image: linear-gradient(top, #4294f0 0%, #116dd5 50%, #095cb8 50%, #0f63c2 100%);
192
- border: 1px solid #0e5aaf;
193
- border-color: #0e5aaf #0c4b92 #093d76;
194
- -webkit-border-radius: 4px;
195
- -moz-border-radius: 4px;
196
- -ms-border-radius: 4px;
197
- -o-border-radius: 4px;
198
- border-radius: 4px;
199
- -webkit-box-shadow: inset 0 0 2px 0 #0a92ff;
200
- -moz-box-shadow: inset 0 0 2px 0 #0a92ff;
201
- -ms-box-shadow: inset 0 0 2px 0 #0a92ff;
202
- -o-box-shadow: inset 0 0 2px 0 #0a92ff;
203
- box-shadow: inset 0 0 2px 0 #0a92ff;
204
- color: white;
205
- display: inline;
206
- font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
207
- padding: 7px 18px;
208
- text-shadow: 0 -1px 1px #095ebe;
209
- -webkit-background-clip: padding-box; }
210
- .shiny button.default:hover {
211
- background-color: #2886f0;
212
- background-image: -webkit-gradient(linear, left top, left bottom, from(#2886f0 0%), to(#0e66c9 50%));
213
- /* Saf4+, Chrome */
214
- background-image: -webkit-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
215
- background-image: -moz-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
216
- background-image: -ms-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
217
- background-image: -o-linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
218
- background-image: linear-gradient(top, #2886f0 0%, #0e66c9 50%, #0052ad 50%, #0059bd 100%);
219
- cursor: pointer; }
220
- .shiny button.default:active {
221
- border: 1px solid #0e63c3;
222
- border-color: #0e63c3 #093f7c #07305f;
223
- -webkit-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
224
- -moz-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
225
- -ms-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
226
- -o-box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee;
227
- box-shadow: inset 0 0 5px 2px #0b427f, 0 1px 0 #eeeeee; }
228
- .shiny button.color-2 {
229
- background-color: #ff1100;
230
- background-image: -webkit-gradient(linear, left top, left bottom, from(#ff1100 0%), to(#b30c00 50%));
231
- /* Saf4+, Chrome */
232
- background-image: -webkit-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
233
- background-image: -moz-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
234
- background-image: -ms-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
235
- background-image: -o-linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
236
- background-image: linear-gradient(top, #ff1100 0%, #b30c00 50%, #8f0a00 50%, #9e0b00 100%);
237
- border: 1px solid #8a0900;
238
- border-color: #8a0900 #6b0700 #4d0500;
239
- -webkit-border-radius: 4px;
240
- -moz-border-radius: 4px;
241
- -ms-border-radius: 4px;
242
- -o-border-radius: 4px;
243
- border-radius: 4px;
244
- -webkit-box-shadow: inset 0 0 2px 0 #d60004;
245
- -moz-box-shadow: inset 0 0 2px 0 #d60004;
246
- -ms-box-shadow: inset 0 0 2px 0 #d60004;
247
- -o-box-shadow: inset 0 0 2px 0 #d60004;
248
- box-shadow: inset 0 0 2px 0 #d60004;
249
- color: white;
250
- display: inline;
251
- font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
252
- padding: 7px 18px;
253
- text-shadow: 0 -1px 1px #940a00;
254
- -webkit-background-clip: padding-box; }
255
- .shiny button.color-2:hover {
256
- background-color: #e60f00;
257
- background-image: -webkit-gradient(linear, left top, left bottom, from(#e60f00 0%), to(#a30b00 50%));
258
- /* Saf4+, Chrome */
259
- background-image: -webkit-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
260
- background-image: -moz-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
261
- background-image: -ms-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
262
- background-image: -o-linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
263
- background-image: linear-gradient(top, #e60f00 0%, #a30b00 50%, #7a0800 50%, #8a0900 100%);
264
- cursor: pointer; }
265
- .shiny button.color-2:active {
266
- border: 1px solid #9e0b00;
267
- border-color: #9e0b00 #520500 #330300;
268
- -webkit-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
269
- -moz-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
270
- -ms-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
271
- -o-box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee;
272
- box-shadow: inset 0 0 5px 2px #560600, 0 1px 0 #eeeeee; }
273
- .shiny button.color-3 {
274
- background-color: #29c13b;
275
- background-image: -webkit-gradient(linear, left top, left bottom, from(#29c13b 0%), to(#1c8228 50%));
276
- /* Saf4+, Chrome */
277
- background-image: -webkit-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
278
- background-image: -moz-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
279
- background-image: -ms-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
280
- background-image: -o-linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
281
- background-image: linear-gradient(top, #29c13b 0%, #1c8228 50%, #12681c 50%, #187123 100%);
282
- border: 1px solid #14601d;
283
- border-color: #14601d #0f4716 #0a2e0e;
284
- -webkit-border-radius: 4px;
285
- -moz-border-radius: 4px;
286
- -ms-border-radius: 4px;
287
- -o-border-radius: 4px;
288
- border-radius: 4px;
289
- -webkit-box-shadow: inset 0 0 2px 0 #0cb612;
290
- -moz-box-shadow: inset 0 0 2px 0 #0cb612;
291
- -ms-box-shadow: inset 0 0 2px 0 #0cb612;
292
- -o-box-shadow: inset 0 0 2px 0 #0cb612;
293
- box-shadow: inset 0 0 2px 0 #0cb612;
294
- color: white;
295
- display: inline;
296
- font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
297
- padding: 7px 18px;
298
- text-shadow: 0 -1px 1px #126c1d;
299
- -webkit-background-clip: padding-box; }
300
- .shiny button.color-3:hover {
301
- background-color: #22ae33;
302
- background-image: -webkit-gradient(linear, left top, left bottom, from(#22ae33 0%), to(#177723 50%));
303
- /* Saf4+, Chrome */
304
- background-image: -webkit-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
305
- background-image: -moz-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
306
- background-image: -ms-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
307
- background-image: -o-linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
308
- background-image: linear-gradient(top, #22ae33 0%, #177723 50%, #065f11 50%, #0b6a16 100%);
309
- cursor: pointer; }
310
- .shiny button.color-3:active {
311
- border: 1px solid #177222;
312
- border-color: #177222 #0a320f #051907;
313
- -webkit-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
314
- -moz-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
315
- -ms-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
316
- -o-box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee;
317
- box-shadow: inset 0 0 5px 2px #0c3611, 0 1px 0 #eeeeee; }
318
-
319
- .pill button.default {
320
- background-color: #4294f0;
321
- background-image: -webkit-gradient(linear, left top, left bottom, from(#4294f0), to(#0156fe));
322
- /* Saf4+, Chrome */
323
- background-image: -webkit-linear-gradient(top, #4294f0, #0156fe);
324
- background-image: -moz-linear-gradient(top, #4294f0, #0156fe);
325
- background-image: -ms-linear-gradient(top, #4294f0, #0156fe);
326
- background-image: -o-linear-gradient(top, #4294f0, #0156fe);
327
- background-image: linear-gradient(top, #4294f0, #0156fe);
328
- border: 1px solid #3371b2;
329
- border-color: #3371b2 #2457a3 #164297;
330
- -webkit-border-radius: 16px;
331
- -moz-border-radius: 16px;
332
- -ms-border-radius: 16px;
333
- -o-border-radius: 16px;
334
- border-radius: 16px;
335
- -webkit-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
336
- -moz-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
337
- -ms-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
338
- -o-box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
339
- box-shadow: inset 0 1px 0 0 #64a9f2, 0 1px 2px 0 #b3b3b3;
340
- color: white;
341
- display: inline;
342
- font-family: "lucida grande", sans-serif;
343
- font-size: 11px;
344
- font-weight: normal;
345
- line-height: 1;
346
- padding: 3px 16px 5px;
347
- text-align: center;
348
- text-shadow: 0 -1px 1px #2762bf;
349
- -webkit-background-clip: padding-box; }
350
- .pill button.default:hover {
351
- background-color: #2d88ee;
352
- background-image: -webkit-gradient(linear, left top, left bottom, from(#2d88ee), to(#1554ce));
353
- /* Saf4+, Chrome */
354
- background-image: -webkit-linear-gradient(top, #2d88ee, #1554ce);
355
- background-image: -moz-linear-gradient(top, #2d88ee, #1554ce);
356
- background-image: -ms-linear-gradient(top, #2d88ee, #1554ce);
357
- background-image: -o-linear-gradient(top, #2d88ee, #1554ce);
358
- background-image: linear-gradient(top, #2d88ee, #1554ce);
359
- border: 1px solid #2062a7;
360
- border-color: #2062a7 #0e479a #01318e;
361
- -webkit-box-shadow: inset 0 1px 0 0 #519cf0;
362
- -moz-box-shadow: inset 0 1px 0 0 #519cf0;
363
- -ms-box-shadow: inset 0 1px 0 0 #519cf0;
364
- -o-box-shadow: inset 0 1px 0 0 #519cf0;
365
- box-shadow: inset 0 1px 0 0 #519cf0;
366
- cursor: pointer;
367
- text-shadow: 0 -1px 1px #134faf;
368
- -webkit-background-clip: padding-box; }
369
- .pill button.default:active {
370
- background: #226edd;
371
- border: 1px solid #0d3c8c;
372
- border-bottom: 1px solid #062d8d;
373
- -webkit-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
374
- -moz-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
375
- -ms-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
376
- -o-box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
377
- box-shadow: inset 0 0 6px 3px #0c44b8, 0 1px 0 0 white;
378
- text-shadow: 0 -1px 1px #1a52aa; }
379
- .pill button.color-2 {
380
- background-color: #ff1100;
381
- background-image: -webkit-gradient(linear, left top, left bottom, from(#ff1100), to(#cc2900));
382
- /* Saf4+, Chrome */
383
- background-image: -webkit-linear-gradient(top, #ff1100, #cc2900);
384
- background-image: -moz-linear-gradient(top, #ff1100, #cc2900);
385
- background-image: -ms-linear-gradient(top, #ff1100, #cc2900);
386
- background-image: -o-linear-gradient(top, #ff1100, #cc2900);
387
- background-image: linear-gradient(top, #ff1100, #cc2900);
388
- border: 1px solid #98211b;
389
- border-color: #98211b #841f10 #741d07;
390
- -webkit-border-radius: 16px;
391
- -moz-border-radius: 16px;
392
- -ms-border-radius: 16px;
393
- -o-border-radius: 16px;
394
- border-radius: 16px;
395
- -webkit-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
396
- -moz-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
397
- -ms-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
398
- -o-box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
399
- box-shadow: inset 0 1px 0 0 #fe3025, 0 1px 2px 0 #b3b3b3;
400
- color: white;
401
- display: inline;
402
- font-family: "lucida grande", sans-serif;
403
- font-size: 11px;
404
- font-weight: normal;
405
- line-height: 1;
406
- padding: 3px 16px 5px;
407
- text-align: center;
408
- text-shadow: 0 -1px 1px #a22711;
409
- -webkit-background-clip: padding-box; }
410
- .pill button.color-2:hover {
411
- background-color: #e80f00;
412
- background-image: -webkit-gradient(linear, left top, left bottom, from(#e80f00), to(#ac2504));
413
- /* Saf4+, Chrome */
414
- background-image: -webkit-linear-gradient(top, #e80f00, #ac2504);
415
- background-image: -moz-linear-gradient(top, #e80f00, #ac2504);
416
- background-image: -ms-linear-gradient(top, #e80f00, #ac2504);
417
- background-image: -o-linear-gradient(top, #e80f00, #ac2504);
418
- background-image: linear-gradient(top, #e80f00, #ac2504);
419
- border: 1px solid #87130d;
420
- border-color: #87130d #741101 #5c1200;
421
- -webkit-box-shadow: inset 0 1px 0 0 #fe2010;
422
- -moz-box-shadow: inset 0 1px 0 0 #fe2010;
423
- -ms-box-shadow: inset 0 1px 0 0 #fe2010;
424
- -o-box-shadow: inset 0 1px 0 0 #fe2010;
425
- box-shadow: inset 0 1px 0 0 #fe2010;
426
- cursor: pointer;
427
- text-shadow: 0 -1px 1px #8b1804;
428
- -webkit-background-clip: padding-box; }
429
- .pill button.color-2:active {
430
- background: #c0240c;
431
- border: 1px solid #651201;
432
- border-bottom: 1px solid #611800;
433
- -webkit-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
434
- -moz-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
435
- -ms-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
436
- -o-box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
437
- box-shadow: inset 0 0 6px 3px #911f00, 0 1px 0 0 white;
438
- text-shadow: 0 -1px 1px #891c09; }
439
- .pill button.color-3 {
440
- background-color: #29c13b;
441
- background-image: -webkit-gradient(linear, left top, left bottom, from(#29c13b), to(#13a438));
442
- /* Saf4+, Chrome */
443
- background-image: -webkit-linear-gradient(top, #29c13b, #13a438);
444
- background-image: -moz-linear-gradient(top, #29c13b, #13a438);
445
- background-image: -ms-linear-gradient(top, #29c13b, #13a438);
446
- background-image: -o-linear-gradient(top, #29c13b, #13a438);
447
- background-image: linear-gradient(top, #29c13b, #13a438);
448
- border: 1px solid #336a39;
449
- border-color: #336a39 #245b2e #174e25;
450
- -webkit-border-radius: 16px;
451
- -moz-border-radius: 16px;
452
- -ms-border-radius: 16px;
453
- -o-border-radius: 16px;
454
- border-radius: 16px;
455
- -webkit-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
456
- -moz-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
457
- -ms-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
458
- -o-box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
459
- box-shadow: inset 0 1px 0 0 #3ad44a, 0 1px 2px 0 #b3b3b3;
460
- color: white;
461
- display: inline;
462
- font-family: "lucida grande", sans-serif;
463
- font-size: 11px;
464
- font-weight: normal;
465
- line-height: 1;
466
- padding: 3px 16px 5px;
467
- text-align: center;
468
- text-shadow: 0 -1px 1px #2b7339;
469
- -webkit-background-clip: padding-box; }
470
- .pill button.color-3:hover {
471
- background-color: #25ae35;
472
- background-image: -webkit-gradient(linear, left top, left bottom, from(#25ae35), to(#1e7d36));
473
- /* Saf4+, Chrome */
474
- background-image: -webkit-linear-gradient(top, #25ae35, #1e7d36);
475
- background-image: -moz-linear-gradient(top, #25ae35, #1e7d36);
476
- background-image: -ms-linear-gradient(top, #25ae35, #1e7d36);
477
- background-image: -o-linear-gradient(top, #25ae35, #1e7d36);
478
- background-image: linear-gradient(top, #25ae35, #1e7d36);
479
- border: 1px solid #215e27;
480
- border-color: #215e27 #124e1d #083f16;
481
- -webkit-box-shadow: inset 0 1px 0 0 #2dcc40;
482
- -moz-box-shadow: inset 0 1px 0 0 #2dcc40;
483
- -ms-box-shadow: inset 0 1px 0 0 #2dcc40;
484
- -o-box-shadow: inset 0 1px 0 0 #2dcc40;
485
- box-shadow: inset 0 1px 0 0 #2dcc40;
486
- cursor: pointer;
487
- text-shadow: 0 -1px 1px #186127;
488
- -webkit-background-clip: padding-box; }
489
- .pill button.color-3:active {
490
- background: #2b8c3d;
491
- border: 1px solid #0f421a;
492
- border-bottom: 1px solid #0b411b;
493
- -webkit-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
494
- -moz-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
495
- -ms-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
496
- -o-box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
497
- box-shadow: inset 0 0 6px 3px #15682b, 0 1px 0 0 white;
498
- text-shadow: 0 -1px 1px #1d5f2b; }
data/demo/stylesheets/scss/demo.scss DELETED
@@ -1,100 +0,0 @@
1
- @import "../app/assets/mixins";
2
-
3
- // Clear Floated Elements
4
- .clearfix:after {
5
- clear: both;
6
- content: ' ';
7
- display: block;
8
- font-size: 0;
9
- line-height: 0;
10
- visibility: hidden;
11
- width: 0;
12
- height: 0;
13
- }
14
-
15
- // This is just for the example page
16
- body {
17
- color: #333;
18
- }
19
-
20
- #buttons {
21
- margin: 50px auto;
22
- width: 995px;
23
-
24
- h2 {
25
- font: 300 22px "helvetica neue", sans-serif;
26
- margin: 0 0 4px 0;
27
- }
28
-
29
- p {
30
- color: #777;
31
- font: normal 14px "helvetica neue", sans-serif;
32
- margin: 0 0 24px 0;
33
- }
34
-
35
- .button-set {
36
- @extend .clearfix;
37
- margin: 0 0 40px 0;
38
-
39
- p {
40
- border-bottom: 1px solid #ddd;
41
- font: bold 14px "helvetica neue", sans-serif;
42
- padding: 0 0 4px 0;
43
- }
44
-
45
- section {
46
- float: left;
47
- margin-right: 25px;
48
- text-align: center;
49
- width: 315px;
50
-
51
- &:last-child {
52
- margin-right: 0;
53
- }
54
- }
55
- }
56
- }
57
-
58
- // Style the buttons
59
- .simple {
60
- button.default {
61
-
62
- @include button;
63
- }
64
-
65
- button.color-2 {
66
- @include button(#f10);
67
- }
68
-
69
- button.color-3 {
70
- @include button(#29c13b);
71
- }
72
- }
73
-
74
- .shiny {
75
- button.default {
76
- @include button(shiny);
77
- }
78
-
79
- button.color-2 {
80
- @include button(shiny,#f10);
81
- }
82
-
83
- button.color-3 {
84
- @include button(shiny, #29c13b);
85
- }
86
- }
87
-
88
- .pill {
89
- button.default {
90
- @include button(pill);
91
- }
92
-
93
- button.color-2 {
94
- @include button(pill, #f10);
95
- }
96
-
97
- button.color-3 {
98
- @include button(pill, #29c13b);
99
- }
100
- }