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, $saturation: 0%, $lightness: -15%);
65
- $third-stop: adjust-color($base-color, $saturation: 5%, $lightness: -22%);
66
- $fourth-stop: adjust-color($base-color, $saturation: 0%, $lightness: -19%);
67
- $border-top: adjust-color($base-color, $saturation: 0%, $lightness: -23%);
68
- $border-sides: adjust-color($base-color, $saturation: 0%, $lightness: -29%);
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, $hue: -5, $saturation: 23%, $lightness:-8%);
72
- $text-shadow: adjust-color($base-color, $saturation: 6%, $lightness: -21%);
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 (top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
80
- border: 1px solid $border-top;
81
- border-color: $border-top $border-sides $border-bottom;
82
- @include border-radius (4px);
83
- @include box-shadow(inset 0 0 2px 0 $inset-shadow);
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 12px "helvetica neue", helvetica, arial, sans-serif;
87
- padding: 7px 18px;
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, $saturation: 2%, $lightness: -5%);
93
- $second-stop-hover: adjust-color($base-color, $saturation: 2%, $lightness: -18%);
94
- $third-stop-hover: adjust-color($base-color, $saturation: 23%, $lightness: -26%);
95
- $fourth-stop-hover: adjust-color($base-color, $saturation: 16%, $lightness: -23%);
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 (top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
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
- $border-top-active: adjust-color($base-color, $saturation: 1%, $lightness: -19%);
103
- $border-sides-active: adjust-color($base-color, $saturation: 1%, $lightness: -34%);
104
- $border-bottom-active: adjust-color($base-color, $saturation: 1%, $lightness: -40%);
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(1.895, 0.030, 0.685, 0.220);
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
- 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.
18
- Comment-out the following sprocket directive in /application.css.scss (Remove the =)
17
+ Rename application.css to application.css.scss
19
18
 
20
- * require_tree .
19
+ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.scss
21
20
 
22
- Import the mixins at the beginning of your stylesheet
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 'bourbon';
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 are provided for quick out-of-the-box animations. Two animation-keyframes are provided: fade-in, fade-out. These animations can be called using the *animation-name* mixin; alternatively the *animation-basic* mixin can be used. Supports Webkit browsers and Mozilla 5.0+.
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
- div.fade-in {
280
- @include animation-name(fade-in);
289
+ .spinner {
290
+ @include animation-name(spin);
281
291
  }
282
292
 
283
- div.fade-out {
284
- @include animation-basic(fade-out, 2.0s, ease-in);
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 ($fade-in-*, $fade-out-*, $fade-in-out-*)
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.5
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-08-19 00:00:00.000000000Z
14
+ date: 2011-09-06 00:00:00.000000000Z
15
15
  dependencies:
16
16
  - !ruby/object:Gem::Dependency
17
17
  name: sass
18
- requirement: &70215233728500 !ruby/object:Gem::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: *70215233728500
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; }