bourbon 1.3.5 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/app/assets/stylesheets/addons/_button.scss +152 -55
- data/app/assets/stylesheets/addons/_font-family.scss +1 -0
- data/lib/bourbon/version.rb +1 -1
- data/readme.md +2 -1
- metadata +6 -6
|
@@ -5,31 +5,59 @@
|
|
|
5
5
|
$style: simple;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
|
|
13
|
-
|
|
18
|
+
@else if $style == pill {
|
|
19
|
+
@include pill($base-color, $grayscale: true);
|
|
20
|
+
}
|
|
14
21
|
}
|
|
15
22
|
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
$
|
|
26
|
-
$
|
|
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:
|
|
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:
|
|
47
|
-
$
|
|
48
|
-
$
|
|
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:
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
$
|
|
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:
|
|
71
|
-
$inset-shadow:
|
|
72
|
-
$
|
|
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:
|
|
117
|
+
$color: hsl(0, 0, 20%);
|
|
76
118
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
|
77
119
|
}
|
|
78
120
|
|
|
79
|
-
@
|
|
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:
|
|
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:
|
|
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
|
-
@
|
|
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
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
$
|
|
115
|
-
$
|
|
116
|
-
$
|
|
117
|
-
$
|
|
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:
|
|
189
|
+
$color: hsl(0, 0, 20%);
|
|
121
190
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
|
122
191
|
}
|
|
123
192
|
|
|
124
|
-
@
|
|
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:
|
|
141
|
-
$
|
|
142
|
-
$border-
|
|
143
|
-
$border-
|
|
144
|
-
$
|
|
145
|
-
$
|
|
146
|
-
$text-shadow-hover:
|
|
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:
|
|
159
|
-
$border-active:
|
|
160
|
-
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:
|
|
161
|
-
$inset-shadow-active:
|
|
162
|
-
$text-shadow-active:
|
|
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
|
+
|
|
@@ -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
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.
|
|
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-
|
|
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: &
|
|
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: *
|
|
34
|
+
version_requirements: *70251317326880
|
|
35
35
|
- !ruby/object:Gem::Dependency
|
|
36
36
|
name: aruba
|
|
37
|
-
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: *
|
|
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
|
|