bourbon 1.3.5 → 1.3.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. data/app/assets/stylesheets/addons/_button.scss +152 -55
  2. data/app/assets/stylesheets/addons/_font-family.scss +1 -0
  3. data/lib/bourbon/version.rb +1 -1
  4. data/readme.md +2 -1
  5. metadata +6 -6
data/app/assets/stylesheets/addons/_button.scss CHANGED
@@ -5,31 +5,59 @@
5
5
  $style: simple;
6
6
  }
7
7
 
8
- @if $style == simple {
9
- @include simple($base-color);
10
- }
8
+ // Grayscale button
9
+ @if $base-color == grayscale($base-color) {
10
+ @if $style == simple {
11
+ @include simple($base-color, $grayscale: true);
12
+ }
13
+
14
+ @else if $style == shiny {
15
+ @include shiny($base-color, $grayscale: true);
16
+ }
11
17
 
12
- @else if $style == shiny {
13
- @include shiny($base-color);
18
+ @else if $style == pill {
19
+ @include pill($base-color, $grayscale: true);
20
+ }
14
21
  }
15
22
 
16
- @else if $style == pill {
17
- @include pill($base-color);
23
+ // Colored button
24
+ @else {
25
+ @if $style == simple {
26
+ @include simple($base-color);
27
+ }
28
+
29
+ @else if $style == shiny {
30
+ @include shiny($base-color);
31
+ }
32
+
33
+ @else if $style == pill {
34
+ @include pill($base-color);
35
+ }
18
36
  }
19
37
  }
20
38
 
21
- @mixin simple ($base-color) {
22
- $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
23
- $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
24
- $color: hsl(0, 0, 100%);
25
- $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
26
- $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
39
+
40
+ // Simple Button
41
+ //************************************************************************//
42
+ @mixin simple($base-color, $grayscale: false) {
43
+ $color: hsl(0, 0, 100%);
44
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
45
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
46
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
47
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
27
48
 
28
49
  @if lightness($base-color) > 70% {
29
- $color: hsl(0, 0, 20%);
50
+ $color: hsl(0, 0, 20%);
30
51
  $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
31
52
  }
32
53
 
54
+ @if $grayscale == true {
55
+ $border: grayscale($border);
56
+ $inset-shadow: grayscale($inset-shadow);
57
+ $stop-gradient: grayscale($stop-gradient);
58
+ $text-shadow: grayscale($text-shadow);
59
+ }
60
+
33
61
  border: 1px solid $border;
34
62
  @include border-radius (3px);
35
63
  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
@@ -43,9 +71,15 @@
43
71
  -webkit-background-clip: padding-box;
44
72
 
45
73
  &:hover {
46
- $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
47
- $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
48
- $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
74
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
75
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
76
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
77
+
78
+ @if $grayscale == true {
79
+ $base-color-hover: grayscale($base-color-hover);
80
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
81
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
82
+ }
49
83
 
50
84
  @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
51
85
  cursor: pointer;
@@ -53,30 +87,47 @@
53
87
  }
54
88
 
55
89
  &:active {
56
- $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
90
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
57
91
  $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
58
92
 
93
+ @if $grayscale == true {
94
+ $border-active: grayscale($border-active);
95
+ $inset-shadow-active: grayscale($inset-shadow-active);
96
+ }
97
+
59
98
  border: 1px solid $border-active;
60
99
  @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
61
100
  }
62
101
  }
63
102
 
64
- @mixin shiny($base-color) {
65
- $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
66
- $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
67
- $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
68
- $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
103
+
104
+ // Shiny Button
105
+ //************************************************************************//
106
+ @mixin shiny($base-color, $grayscale: false) {
107
+ $color: hsl(0, 0, 100%);
108
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
69
109
  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
70
- $color: hsl(0, 0, 100%);
71
- $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
72
- $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
110
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
111
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
112
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
113
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
114
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
73
115
 
74
116
  @if lightness($base-color) > 70% {
75
- $color: hsl(0, 0, 20%);
117
+ $color: hsl(0, 0, 20%);
76
118
  $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
77
119
  }
78
120
 
79
- @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
121
+ @if $grayscale == true {
122
+ $border: grayscale($border);
123
+ $border-bottom: grayscale($border-bottom);
124
+ $fourth-stop: grayscale($fourth-stop);
125
+ $inset-shadow: grayscale($inset-shadow);
126
+ $second-stop: grayscale($second-stop);
127
+ $text-shadow: grayscale($text-shadow);
128
+ $third-stop: grayscale($third-stop);
129
+ }
130
+
80
131
  border: 1px solid $border;
81
132
  border-bottom: 1px solid $border-bottom;
82
133
  @include border-radius(5px);
@@ -85,43 +136,69 @@
85
136
  display: inline;
86
137
  font-size: 14px;
87
138
  font-weight: bold;
139
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
88
140
  padding: 7px 20px 8px;
89
- text-decoration: none;
90
141
  text-align: center;
142
+ text-decoration: none;
91
143
  text-shadow: 0 -1px 1px $text-shadow;
92
144
 
93
145
  &:hover {
94
- $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
146
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
95
147
  $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
96
- $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
148
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
97
149
  $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
98
150
 
99
- @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
151
+ @if $grayscale == true {
152
+ $first-stop-hover: grayscale($first-stop-hover);
153
+ $second-stop-hover: grayscale($second-stop-hover);
154
+ $third-stop-hover: grayscale($third-stop-hover);
155
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
156
+ }
157
+
100
158
  cursor: pointer;
159
+ @include linear-gradient(top, $first-stop-hover 0%,
160
+ $second-stop-hover 50%,
161
+ $third-stop-hover 50%,
162
+ $fourth-stop-hover 100%);
101
163
  }
102
164
 
103
165
  &:active {
104
166
  $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
105
167
 
168
+ @if $grayscale == true {
169
+ $inset-shadow-active: grayscale($inset-shadow-active);
170
+ }
171
+
106
172
  @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
107
173
  }
108
174
  }
109
175
 
110
- @mixin pill($base-color) {
111
- $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
112
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
113
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
114
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
115
- $color: hsl(0, 0, 100%);
116
- $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
117
- $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
176
+
177
+ // Pill Button
178
+ //************************************************************************//
179
+ @mixin pill($base-color, $grayscale: false) {
180
+ $color: hsl(0, 0, 100%);
181
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
182
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
183
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
184
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
185
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
186
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
118
187
 
119
188
  @if lightness($base-color) > 70% {
120
- $color: hsl(0, 0, 20%);
189
+ $color: hsl(0, 0, 20%);
121
190
  $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
122
191
  }
123
192
 
124
- @include linear-gradient ($base-color, $stop-gradient);
193
+ @if $grayscale == true {
194
+ $border-bottom: grayscale($border-bottom);
195
+ $border-sides: grayscale($border-sides);
196
+ $border-top: grayscale($border-top);
197
+ $inset-shadow: grayscale($inset-shadow);
198
+ $stop-gradient: grayscale($stop-gradient);
199
+ $text-shadow: grayscale($text-shadow);
200
+ }
201
+
125
202
  border: 1px solid $border-top;
126
203
  border-color: $border-top $border-sides $border-bottom;
127
204
  @include border-radius(16px);
@@ -131,35 +208,54 @@
131
208
  font-size: 11px;
132
209
  font-weight: normal;
133
210
  line-height: 1;
211
+ @include linear-gradient ($base-color, $stop-gradient);
134
212
  padding: 3px 16px 5px;
135
213
  text-align: center;
136
214
  text-shadow: 0 -1px 1px $text-shadow;
137
215
  -webkit-background-clip: padding-box;
138
216
 
139
217
  &:hover {
140
- $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
141
- $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
142
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
143
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
144
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
145
- $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
146
- $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
218
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
219
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
220
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
221
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
222
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
223
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
224
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
225
+
226
+ @if $grayscale == true {
227
+ $base-color-hover: grayscale($base-color-hover);
228
+ $border-bottom: grayscale($border-bottom);
229
+ $border-sides: grayscale($border-sides);
230
+ $border-top: grayscale($border-top);
231
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
232
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
233
+ $text-shadow-hover: grayscale($text-shadow-hover);
234
+ }
147
235
 
148
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
149
236
  border: 1px solid $border-top;
150
237
  border-color: $border-top $border-sides $border-bottom;
151
238
  @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
152
239
  cursor: pointer;
240
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
153
241
  text-shadow: 0 -1px 1px $text-shadow-hover;
154
242
  -webkit-background-clip: padding-box;
155
243
  }
156
244
 
157
245
  &:active {
158
- $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
159
- $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
160
- $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
161
- $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
162
- $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
246
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
247
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
248
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
249
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
250
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
251
+
252
+ @if $grayscale == true {
253
+ $active-color: grayscale($active-color);
254
+ $border-active: grayscale($border-active);
255
+ $border-bottom-active: grayscale($border-bottom-active);
256
+ $inset-shadow-active: grayscale($inset-shadow-active);
257
+ $text-shadow-active: grayscale($text-shadow-active);
258
+ }
163
259
 
164
260
  background: $active-color;
165
261
  border: 1px solid $border-active;
@@ -168,3 +264,4 @@
168
264
  text-shadow: 0 -1px 1px $text-shadow-active;
169
265
  }
170
266
  }
267
+
data/app/assets/stylesheets/addons/_font-family.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2
2
  $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
3
3
  $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4
+ $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
4
5
  $verdana: Verdana, Geneva, sans-serif;
data/lib/bourbon/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Bourbon
2
- VERSION = "1.3.5"
2
+ VERSION = "1.3.6"
3
3
  end
data/readme.md CHANGED
@@ -56,7 +56,7 @@ Import the mixins at the beginning of your stylesheet
56
56
  rake bourbon:install[app/stylesheets]
57
57
 
58
58
  # Install in a non-rails project (static site, jekyll, wordpress, other...)
59
- Bourbon includes an easy way to generate a directory with all the necessary files.
59
+ Bourbon includes an easy way to generate a directory with all the necessary files.
60
60
  Install the bourbon gem:
61
61
 
62
62
  gem install bourbon
@@ -187,6 +187,7 @@ Bourbon aims to provide support for CSS3 properties that are not yet fully suppo
187
187
  $georgia
188
188
  $helvetica
189
189
  $lucida-grande
190
+ $monospace
190
191
  $verdana
191
192
 
192
193
  timing-functions
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bourbon
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.3.5
4
+ version: 1.3.6
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -19,11 +19,11 @@ authors:
19
19
  autorequire:
20
20
  bindir: bin
21
21
  cert_chain: []
22
- date: 2012-01-23 00:00:00.000000000 Z
22
+ date: 2012-01-27 00:00:00.000000000 Z
23
23
  dependencies:
24
24
  - !ruby/object:Gem::Dependency
25
25
  name: sass
26
- requirement: &70344736487880 !ruby/object:Gem::Requirement
26
+ requirement: &70251317326880 !ruby/object:Gem::Requirement
27
27
  none: false
28
28
  requirements:
29
29
  - - ! '>='
@@ -31,10 +31,10 @@ dependencies:
31
31
  version: '3.1'
32
32
  type: :runtime
33
33
  prerelease: false
34
- version_requirements: *70344736487880
34
+ version_requirements: *70251317326880
35
35
  - !ruby/object:Gem::Dependency
36
36
  name: aruba
37
- requirement: &70344736487380 !ruby/object:Gem::Requirement
37
+ requirement: &70251317326340 !ruby/object:Gem::Requirement
38
38
  none: false
39
39
  requirements:
40
40
  - - ~>
@@ -42,7 +42,7 @@ dependencies:
42
42
  version: '0.4'
43
43
  type: :development
44
44
  prerelease: false
45
- version_requirements: *70344736487380
45
+ version_requirements: *70251317326340
46
46
  description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
47
47
  framework of
48
48