bourbon 0.1.5 → 0.1.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.
@@ -61,52 +61,47 @@
|
|
61
61
|
}
|
62
62
|
|
63
63
|
@mixin shiny($base-color) {
|
64
|
-
$second-stop: adjust-color($base-color, $
|
65
|
-
$third-stop: adjust-color($base-color, $
|
66
|
-
$fourth-stop: adjust-color($base-color, $
|
67
|
-
$border
|
68
|
-
$border-
|
69
|
-
$border-bottom: adjust-color($base-color, $saturation: 0%, $lightness: -35%);
|
64
|
+
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
65
|
+
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
66
|
+
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
67
|
+
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
68
|
+
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
70
69
|
$color: hsl(0, 0, 100%);
|
71
|
-
$inset-shadow: adjust-color($base-color, $
|
72
|
-
$text-shadow: adjust-color($base-color, $
|
70
|
+
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
71
|
+
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
73
72
|
|
74
73
|
@if lightness($base-color) > 70% {
|
75
74
|
$color: hsl(0, 0, 20%);
|
76
75
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
77
76
|
}
|
78
77
|
|
79
|
-
@include linear-gradient
|
80
|
-
border: 1px solid $border
|
81
|
-
border-
|
82
|
-
@include border-radius
|
83
|
-
@include box-shadow(inset 0 0
|
78
|
+
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
79
|
+
border: 1px solid $border;
|
80
|
+
border-bottom: 1px solid $border-bottom;
|
81
|
+
@include border-radius(5px);
|
82
|
+
@include box-shadow(inset 0 1px 0 0 $inset-shadow);
|
84
83
|
color: $color;
|
85
84
|
display: inline;
|
86
|
-
font: bold
|
87
|
-
padding: 7px
|
85
|
+
font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
|
86
|
+
padding: 7px 20px 8px;
|
87
|
+
text-decoration: none;
|
88
|
+
text-align: center;
|
88
89
|
text-shadow: 0 -1px 1px $text-shadow;
|
89
|
-
-webkit-background-clip: padding-box;
|
90
90
|
|
91
91
|
&:hover {
|
92
|
-
$first-stop-hover: adjust-color($base-color, $
|
93
|
-
$second-stop-hover: adjust-color($base-color, $
|
94
|
-
$third-stop-hover: adjust-color($base-color, $
|
95
|
-
$fourth-stop-hover: adjust-color($base-color, $
|
92
|
+
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
93
|
+
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
94
|
+
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
95
|
+
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
96
96
|
|
97
|
-
@include linear-gradient
|
97
|
+
@include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
|
98
98
|
cursor: pointer;
|
99
99
|
}
|
100
100
|
|
101
101
|
&:active {
|
102
|
-
$
|
103
|
-
|
104
|
-
|
105
|
-
$inset-shadow-active: adjust-color($base-color, $saturation: -1%, $lightness: -33%);
|
106
|
-
|
107
|
-
border: 1px solid $border-top-active;
|
108
|
-
border-color: $border-top-active $border-sides-active $border-bottom-active;
|
109
|
-
@include box-shadow(inset 0 0 5px 2px $inset-shadow-active, 0 1px 0 #eee);
|
102
|
+
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
103
|
+
|
104
|
+
@include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
|
110
105
|
}
|
111
106
|
}
|
112
107
|
|
@@ -4,7 +4,7 @@
|
|
4
4
|
// EASE IN
|
5
5
|
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
|
6
6
|
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
7
|
-
$ease-in-quart: cubic-bezier(
|
7
|
+
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
|
8
8
|
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
9
9
|
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
10
10
|
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
|
data/readme.md
CHANGED
@@ -14,17 +14,27 @@ Update your Gemfile
|
|
14
14
|
bundle install
|
15
15
|
|
16
16
|
##Rails 3.1.x
|
17
|
-
|
18
|
-
Comment-out the following sprocket directive in /application.css.scss (Remove the =)
|
17
|
+
Rename application.css to application.css.scss
|
19
18
|
|
20
|
-
|
19
|
+
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
|
21
20
|
|
22
|
-
|
21
|
+
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.
|
22
|
+
Delete the following sprocket directive in application.css.scss
|
23
|
+
|
24
|
+
*= require_tree .
|
25
|
+
|
26
|
+
Import bourbon at the beginning of application.css.scss
|
27
|
+
|
28
|
+
@import "bourbon";
|
29
|
+
|
30
|
+
Import all additional stylesheets from your app/assets/stylsheets directory underneath the bourbon import
|
23
31
|
|
24
|
-
@import
|
32
|
+
@import "bourbon";
|
33
|
+
@import "home";
|
34
|
+
@import "users";
|
25
35
|
|
26
36
|
##Rails 3.0.9 and below
|
27
|
-
For Rails < 3.1 you must run the installation rake task. Please note, you should run this task everytime a new version of Bourbon is released.
|
37
|
+
For Rails < 3.1 you must run the installation rake task. Please note, you should run this task everytime a new version of Bourbon is released.
|
28
38
|
This will copy the Sass files into your project's public/stylesheets/sass directory.
|
29
39
|
|
30
40
|
rake bourbon:install
|
@@ -35,7 +45,7 @@ Import the mixins at the beginning of your stylesheet
|
|
35
45
|
|
36
46
|
|
37
47
|
#Install without Rails
|
38
|
-
The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.
|
48
|
+
The following script will generate a *bourbon* directory and convert all .css.scss to .scss extensions. The *bourbon* directory is for 'sass --watch' use outside of rails.
|
39
49
|
Preliminary step: clone this repo and cd into the directory.
|
40
50
|
|
41
51
|
**Step 1:** Make script executable by changing file permission
|
@@ -48,7 +58,7 @@ Preliminary step: clone this repo and cd into the directory.
|
|
48
58
|
|
49
59
|
**Step 3:** Move the new *bourbon* directory into your project's sass directory. *e.g. stylesheets/sass/*
|
50
60
|
|
51
|
-
**Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:
|
61
|
+
**Step 4:** Bourbon requires an additional sass extension to output properly. You must watch your sass files with the following flag appended:
|
52
62
|
*-r ./bourbon/lib/bourbon.rb*
|
53
63
|
|
54
64
|
# Example (project root directory)
|
@@ -56,7 +66,7 @@ Preliminary step: clone this repo and cd into the directory.
|
|
56
66
|
|
57
67
|
|
58
68
|
#Browser support
|
59
|
-
Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
|
69
|
+
Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.
|
60
70
|
**Pull requests:** A general rule when considering a new mixin: Do the following browsers *only* support the CSS3 property using vendor specific prefixes? If the answer is yes, there is a high chance the mixin will be accepted via a pull request.
|
61
71
|
|
62
72
|
* Firefox 3.6+
|
@@ -256,7 +266,7 @@ Easily setup and follow a grid based design. Need help gridding? Check out [grid
|
|
256
266
|
|
257
267
|
###Tint & Shade
|
258
268
|
|
259
|
-
Tint & shade are different from lighten() and darken() functions built into sass.
|
269
|
+
Tint & shade are different from lighten() and darken() functions built into sass.
|
260
270
|
Tint is a mix of a color with white. Tint takes a color and a percent argument.
|
261
271
|
|
262
272
|
div {
|
@@ -274,21 +284,20 @@ Shade is a mix of a color with black. Shade takes a color and a percent argument
|
|
274
284
|
|
275
285
|
###Animation-Keyframes
|
276
286
|
|
277
|
-
Animation-keyframes
|
287
|
+
Animation-keyframes can be called using the *animation-name* mixin; alternatively the *animation-basic* mixin can be used. Supports Webkit browsers and Mozilla 5.0+.
|
278
288
|
|
279
|
-
|
280
|
-
@include animation-name(
|
289
|
+
.spinner {
|
290
|
+
@include animation-name(spin);
|
281
291
|
}
|
282
292
|
|
283
|
-
|
284
|
-
@include animation-basic(
|
285
|
-
opacity: 0;
|
293
|
+
.spinner {
|
294
|
+
@include animation-basic(spin, 2.0s, ease-in);
|
286
295
|
}
|
287
296
|
|
288
297
|
|
289
298
|
###Buttons
|
290
299
|
|
291
|
-
The button add-on provides well-designed buttons with a single line in your CSS.
|
300
|
+
The button add-on provides well-designed buttons with a single line in your CSS.
|
292
301
|
The mixin supports a style parameter and an optional color argument. The available styles are **"simple"** (default), **"shiny"**, and **"pill"**.
|
293
302
|
|
294
303
|
# The mixin can be called with no arguments, which will render a blue button with the "simple" style.
|
@@ -310,7 +319,7 @@ Create beautiful buttons by defining a style and color argument; using a single
|
|
310
319
|
|
311
320
|
|
312
321
|
###Timing functions
|
313
|
-
These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).
|
322
|
+
These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations. The provided timing functions are the same as the jQuery UI demo: [easing functions](http://jqueryui.com/demos/effect/easing.html).
|
314
323
|
|
315
324
|
Variables supported: $ease-in-*, $ease-out-*, $ease-in-out-*
|
316
325
|
* = [quad, cubic, quart, quint, sine, expo, circ]
|
@@ -377,15 +386,14 @@ These CSS cubic-bezier timing functions are variables that can be used with CSS3
|
|
377
386
|
|
378
387
|
#Addons
|
379
388
|
--------------------------------
|
380
|
-
animation-keyframes (fade-in, fade-out)
|
381
389
|
@ button(*args)
|
382
390
|
@ position(*args)
|
383
|
-
timing-functions ($
|
391
|
+
timing-functions ($ease-in-*, $ease-out-*, $ease-in-out-*)
|
384
392
|
|
385
393
|
|
386
394
|
##Help Out
|
387
395
|
|
388
|
-
Currently the project is a work in progress. Feel free to help out.
|
396
|
+
Currently the project is a work in progress. Feel free to help out.
|
389
397
|
**Pull requests:** See *Browser Support* in this readme for more info
|
390
398
|
|
391
399
|
Credits
|
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: 0.1.
|
4
|
+
version: 0.1.6
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -11,11 +11,11 @@ authors:
|
|
11
11
|
autorequire:
|
12
12
|
bindir: bin
|
13
13
|
cert_chain: []
|
14
|
-
date: 2011-
|
14
|
+
date: 2011-09-06 00:00:00.000000000Z
|
15
15
|
dependencies:
|
16
16
|
- !ruby/object:Gem::Dependency
|
17
17
|
name: sass
|
18
|
-
requirement: &
|
18
|
+
requirement: &70262541198540 !ruby/object:Gem::Requirement
|
19
19
|
none: false
|
20
20
|
requirements:
|
21
21
|
- - ! '>='
|
@@ -23,7 +23,7 @@ dependencies:
|
|
23
23
|
version: '3.1'
|
24
24
|
type: :runtime
|
25
25
|
prerelease: false
|
26
|
-
version_requirements: *
|
26
|
+
version_requirements: *70262541198540
|
27
27
|
description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
|
28
28
|
framework of
|
29
29
|
|
@@ -50,7 +50,6 @@ files:
|
|
50
50
|
- LICENSE
|
51
51
|
- Rakefile
|
52
52
|
- app/assets/stylesheets/_bourbon.scss
|
53
|
-
- app/assets/stylesheets/addons/_animation-keyframes.scss
|
54
53
|
- app/assets/stylesheets/addons/_button.scss
|
55
54
|
- app/assets/stylesheets/addons/_position.scss
|
56
55
|
- app/assets/stylesheets/addons/_timing-functions.scss
|
@@ -1,28 +0,0 @@
|
|
1
|
-
// Keyframes for Animations
|
2
|
-
|
3
|
-
// Fade-In animation
|
4
|
-
@mixin fade-in {
|
5
|
-
0% {
|
6
|
-
opacity: 0;
|
7
|
-
}
|
8
|
-
100% {
|
9
|
-
opacity: 1;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
@-webkit-keyframes fade-in { @include fade-in; }
|
13
|
-
@-moz-keyframes fade-in { @include fade-in; }
|
14
|
-
@keyframes fade-in { @include fade-in; }
|
15
|
-
|
16
|
-
|
17
|
-
// Fade-out animation
|
18
|
-
@mixin fade-out {
|
19
|
-
0% {
|
20
|
-
opacity: 1;
|
21
|
-
}
|
22
|
-
100% {
|
23
|
-
opacity: 0;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
@-webkit-keyframes fade-out { @include fade-out; }
|
27
|
-
@-moz-keyframes fade-out { @include fade-out; }
|
28
|
-
@keyframes fade-out { @include fade-out; }
|