bourbon 3.0.1 → 3.1.0

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/LICENSE CHANGED
@@ -2,7 +2,7 @@ LICENSE
2
2
 
3
3
  The MIT License
4
4
 
5
- Copyright (c) 2011-2012 thoughtbot, inc.
5
+ Copyright (c) 2011-2013 thoughtbot, inc.
6
6
 
7
7
  Permission is hereby granted, free of charge, to any person obtaining a copy
8
8
  of this software and associated documentation files (the "Software"), to deal
@@ -1,3 +1,8 @@
1
1
  //************************************************************************//
2
- // These mixins/functions will be deprecated in the next MAJOR version release
2
+ // These mixins/functions are deprecated
3
+ // They will be removed in the next MAJOR version release
3
4
  //************************************************************************//
5
+ @mixin box-shadow ($shadows...) {
6
+ @include prefixer(box-shadow, $shadows, spec);
7
+ @warn "box-shadow is deprecated and will be removed in the next major version release";
8
+ }
@@ -5,6 +5,7 @@
5
5
  @import "functions/grid-width";
6
6
  @import "functions/linear-gradient";
7
7
  @import "functions/modular-scale";
8
+ @import "functions/px-to-em";
8
9
  @import "functions/radial-gradient";
9
10
  @import "functions/render-gradients";
10
11
  @import "functions/tint-shade";
@@ -18,7 +19,6 @@
18
19
  @import "css3/background-size";
19
20
  @import "css3/border-image";
20
21
  @import "css3/border-radius";
21
- @import "css3/box-shadow";
22
22
  @import "css3/box-sizing";
23
23
  @import "css3/columns";
24
24
  @import "css3/flex-box";
@@ -26,12 +26,14 @@
26
26
  @import "css3/hidpi-media-query";
27
27
  @import "css3/image-rendering";
28
28
  @import "css3/inline-block";
29
+ @import "css3/keyframes";
29
30
  @import "css3/linear-gradient";
30
31
  @import "css3/perspective";
31
32
  @import "css3/radial-gradient";
32
33
  @import "css3/transform";
33
34
  @import "css3/transition";
34
35
  @import "css3/user-select";
36
+ @import "css3/placeholder";
35
37
 
36
38
  // Addons & other mixins
37
39
  @import "addons/button";
@@ -41,7 +43,10 @@
41
43
  @import "addons/html5-input-types";
42
44
  @import "addons/position";
43
45
  @import "addons/prefixer";
46
+ @import "addons/retina-image";
47
+ @import "addons/size";
44
48
  @import "addons/timing-functions";
49
+ @import "addons/triangle";
45
50
 
46
51
  // Soon to be deprecated Mixins
47
52
  @import "bourbon-deprecated-upcoming";
@@ -1,23 +1,28 @@
1
1
  //************************************************************************//
2
2
  // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3
3
  //************************************************************************//
4
- @mixin prefixer ($property, $value, $prefixes) {
4
+ $prefix-for-webkit: true !default;
5
+ $prefix-for-mozilla: true !default;
6
+ $prefix-for-microsoft: true !default;
7
+ $prefix-for-opera: true !default;
8
+ $prefix-for-spec: true !default; // required for keyframe mixin
5
9
 
10
+ @mixin prefixer ($property, $value, $prefixes) {
6
11
  @each $prefix in $prefixes {
7
12
 
8
- @if $prefix == webkit {
13
+ @if $prefix == webkit and $prefix-for-webkit == true {
9
14
  -webkit-#{$property}: $value;
10
15
  }
11
- @else if $prefix == moz {
16
+ @else if $prefix == moz and $prefix-for-mozilla == true {
12
17
  -moz-#{$property}: $value;
13
18
  }
14
- @else if $prefix == ms {
19
+ @else if $prefix == ms and $prefix-for-microsoft == true {
15
20
  -ms-#{$property}: $value;
16
21
  }
17
- @else if $prefix == o {
22
+ @else if $prefix == o and $prefix-for-opera == true {
18
23
  -o-#{$property}: $value;
19
24
  }
20
- @else if $prefix == spec {
25
+ @else if $prefix == spec and $prefix-for-spec == true {
21
26
  #{$property}: $value;
22
27
  }
23
28
  @else {
@@ -25,3 +30,11 @@
25
30
  }
26
31
  }
27
32
  }
33
+
34
+ @mixin disable-prefix-for-all() {
35
+ $prefix-for-webkit: false;
36
+ $prefix-for-mozilla: false;
37
+ $prefix-for-microsoft: false;
38
+ $prefix-for-opera: false;
39
+ $prefix-for-spec: false;
40
+ }
@@ -0,0 +1,27 @@
1
+ @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
2
+ background-image: url($filename + "." + $extension);
3
+
4
+ @include hidpi {
5
+
6
+ @if $asset-pipeline {
7
+ @if $retina-filename {
8
+ background-image: image_url($retina-filename + "." + $extension);
9
+ }
10
+ @else {
11
+ background-image: image_url($filename + "@2x" + "." + $extension);
12
+ }
13
+ }
14
+
15
+ @else {
16
+ @if $retina-filename {
17
+ background-image: url($retina-filename + "." + $extension);
18
+ }
19
+ @else {
20
+ background-image: url($filename + "@2x" + "." + $extension);
21
+ }
22
+ }
23
+
24
+ background-size: $background-size;
25
+
26
+ }
27
+ }
@@ -0,0 +1,44 @@
1
+ @mixin size($size) {
2
+ @if length($size) == 1 {
3
+ @if $size == auto {
4
+ width: $size;
5
+ height: $size;
6
+ }
7
+
8
+ @else if unitless($size) {
9
+ width: $size + px;
10
+ height: $size + px;
11
+ }
12
+
13
+ @else if not(unitless($size)) {
14
+ width: $size;
15
+ height: $size;
16
+ }
17
+ }
18
+
19
+ // Width x Height
20
+ @if length($size) == 2 {
21
+ $width: nth($size, 1);
22
+ $height: nth($size, 2);
23
+
24
+ @if $width == auto {
25
+ width: $width;
26
+ }
27
+ @else if not(unitless($width)) {
28
+ width: $width;
29
+ }
30
+ @else if unitless($width) {
31
+ width: $width + px;
32
+ }
33
+
34
+ @if $height == auto {
35
+ height: $height;
36
+ }
37
+ @else if not(unitless($height)) {
38
+ height: $height;
39
+ }
40
+ @else if unitless($height) {
41
+ height: $height + px;
42
+ }
43
+ }
44
+ }
@@ -0,0 +1,45 @@
1
+ @mixin triangle ($size, $color, $direction) {
2
+ height: 0;
3
+ width: 0;
4
+
5
+ @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
6
+ border-color: transparent;
7
+ border-style: solid;
8
+ border-width: $size / 2;
9
+
10
+ @if $direction == up {
11
+ border-bottom-color: $color;
12
+
13
+ } @else if $direction == right {
14
+ border-left-color: $color;
15
+
16
+ } @else if $direction == down {
17
+ border-top-color: $color;
18
+
19
+ } @else if $direction == left {
20
+ border-right-color: $color;
21
+ }
22
+ }
23
+
24
+ @else if ($direction == up-right) or ($direction == up-left) {
25
+ border-top: $size solid $color;
26
+
27
+ @if $direction == up-right {
28
+ border-left: $size solid transparent;
29
+
30
+ } @else if $direction == up-left {
31
+ border-right: $size solid transparent;
32
+ }
33
+ }
34
+
35
+ @else if ($direction == down-right) or ($direction == down-left) {
36
+ border-bottom: $size solid $color;
37
+
38
+ @if $direction == down-right {
39
+ border-left: $size solid transparent;
40
+
41
+ } @else if $direction == down-left {
42
+ border-right: $size solid transparent;
43
+ }
44
+ }
45
+ }
@@ -1,3 +1,5 @@
1
+ // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
2
+
1
3
  @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
2
4
  @font-face {
3
5
  font-family: $font-family;
@@ -0,0 +1,51 @@
1
+ // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
2
+ @mixin keyframes($name) {
3
+ $original-prefix-for-webkit: $prefix-for-webkit;
4
+ $original-prefix-for-mozilla: $prefix-for-mozilla;
5
+ $original-prefix-for-microsoft: $prefix-for-microsoft;
6
+ $original-prefix-for-opera: $prefix-for-opera;
7
+ $original-prefix-for-spec: $prefix-for-spec;
8
+
9
+ @if $original-prefix-for-webkit {
10
+ @include disable-prefix-for-all();
11
+ $prefix-for-webkit: true;
12
+ @-webkit-keyframes #{$name} {
13
+ @content;
14
+ }
15
+ }
16
+ @if $original-prefix-for-mozilla {
17
+ @include disable-prefix-for-all();
18
+ $prefix-for-mozilla: true;
19
+ @-moz-keyframes #{$name} {
20
+ @content;
21
+ }
22
+ }
23
+ @if $original-prefix-for-microsoft {
24
+ @include disable-prefix-for-all();
25
+ $prefix-for-microsoft: true;
26
+ @-ms-keyframes #{$name} {
27
+ @content;
28
+ }
29
+ }
30
+ @if $original-prefix-for-opera {
31
+ @include disable-prefix-for-all();
32
+ $prefix-for-opera: true;
33
+ @-o-keyframes #{$name} {
34
+ @content;
35
+ }
36
+ }
37
+ @if $original-prefix-for-spec {
38
+ $prefix-for-spec: true !default;
39
+ @include disable-prefix-for-all();
40
+ $prefix-for-spec: true;
41
+ @keyframes #{$name} {
42
+ @content;
43
+ }
44
+ }
45
+
46
+ $prefix-for-webkit: $original-prefix-for-webkit;
47
+ $prefix-for-mozilla: $original-prefix-for-mozilla;
48
+ $prefix-for-microsoft: $original-prefix-for-microsoft;
49
+ $prefix-for-opera: $original-prefix-for-opera;
50
+ $prefix-for-spec: $original-prefix-for-spec;
51
+ }
@@ -0,0 +1,18 @@
1
+ $placeholders: '-webkit-input-placeholder',
2
+ '-moz-placeholder',
3
+ '-ms-input-placeholder';
4
+
5
+ @mixin placeholder {
6
+ @each $placeholder in $placeholders {
7
+ @if $placeholder == "-webkit-input-placeholder" {
8
+ &::#{$placeholder} {
9
+ @content;
10
+ }
11
+ }
12
+ @else {
13
+ &:#{$placeholder} {
14
+ @content;
15
+ }
16
+ }
17
+ }
18
+ }
@@ -14,13 +14,17 @@
14
14
  // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
15
15
  // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16
16
  //
17
+ // The calculation presumes that your column structure will be missing the last gutter:
18
+ //
19
+ // -- column -- gutter -- column -- gutter -- column
20
+ //
17
21
  // $fg-column: 60px; // Column Width
18
22
  // $fg-gutter: 25px; // Gutter Width
19
23
  // $fg-max-columns: 12; // Total Columns For Main Container
20
24
  //
21
25
  // div {
22
- // width: flex-grid(4); // returns (315px / 1020px) = 30.882353%;
23
- // margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%;
26
+ // width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
27
+ // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
24
28
  //
25
29
  // p {
26
30
  // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
@@ -32,4 +36,4 @@
32
36
  // float: left;
33
37
  // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
34
38
  // }
35
- // }
39
+ // }
@@ -0,0 +1,8 @@
1
+ // Convert pixels to ems
2
+ // eg. for a relational value of 12px write em(12) when the parent is 16px
3
+ // if the parent is another value say 24px write em(12, 24)
4
+
5
+ @function em($pxval, $base: 16) {
6
+ @return ($pxval / $base) * 1em;
7
+ }
8
+
data/lib/bourbon.rb CHANGED
@@ -4,6 +4,10 @@ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
4
4
 
5
5
  require "bourbon/generator"
6
6
 
7
+ unless defined?(Sass)
8
+ require 'sass'
9
+ end
10
+
7
11
  module Bourbon
8
12
  if defined?(Rails) && defined?(Rails::Engine)
9
13
  class Engine < ::Rails::Engine
@@ -17,9 +21,7 @@ module Bourbon
17
21
  end
18
22
  end
19
23
  end
24
+ else
25
+ Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
20
26
  end
21
27
  end
22
-
23
- unless defined?(Sass)
24
- require 'sass'
25
- end
@@ -1,3 +1,3 @@
1
1
  module Bourbon
2
- VERSION = "3.0.1"
2
+ VERSION = "3.1.0"
3
3
  end
data/readme.md CHANGED
@@ -92,4 +92,4 @@ Got questions? Need help? Tweet at [@phillapier](http://twitter.com/phillapier).
92
92
  License
93
93
  -------
94
94
 
95
- Bourbon is Copyright © 2011-2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
95
+ Bourbon is Copyright © 2011-2013 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
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: 3.0.1
4
+ version: 3.1.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -20,11 +20,11 @@ authors:
20
20
  autorequire:
21
21
  bindir: bin
22
22
  cert_chain: []
23
- date: 2012-12-07 00:00:00.000000000 Z
23
+ date: 2013-02-08 00:00:00.000000000 Z
24
24
  dependencies:
25
25
  - !ruby/object:Gem::Dependency
26
26
  name: sass
27
- requirement: &70316178000920 !ruby/object:Gem::Requirement
27
+ requirement: &70359801408200 !ruby/object:Gem::Requirement
28
28
  none: false
29
29
  requirements:
30
30
  - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
32
32
  version: 3.2.0
33
33
  type: :runtime
34
34
  prerelease: false
35
- version_requirements: *70316178000920
35
+ version_requirements: *70359801408200
36
36
  - !ruby/object:Gem::Dependency
37
37
  name: thor
38
- requirement: &70316178000500 !ruby/object:Gem::Requirement
38
+ requirement: &70359801407740 !ruby/object:Gem::Requirement
39
39
  none: false
40
40
  requirements:
41
41
  - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
43
43
  version: '0'
44
44
  type: :runtime
45
45
  prerelease: false
46
- version_requirements: *70316178000500
46
+ version_requirements: *70359801407740
47
47
  - !ruby/object:Gem::Dependency
48
48
  name: aruba
49
- requirement: &70316177999960 !ruby/object:Gem::Requirement
49
+ requirement: &70359801407200 !ruby/object:Gem::Requirement
50
50
  none: false
51
51
  requirements:
52
52
  - - ~>
@@ -54,10 +54,10 @@ dependencies:
54
54
  version: '0.4'
55
55
  type: :development
56
56
  prerelease: false
57
- version_requirements: *70316177999960
57
+ version_requirements: *70359801407200
58
58
  - !ruby/object:Gem::Dependency
59
59
  name: rake
60
- requirement: &70316177999480 !ruby/object:Gem::Requirement
60
+ requirement: &70359801406780 !ruby/object:Gem::Requirement
61
61
  none: false
62
62
  requirements:
63
63
  - - ! '>='
@@ -65,7 +65,7 @@ dependencies:
65
65
  version: '0'
66
66
  type: :development
67
67
  prerelease: false
68
- version_requirements: *70316177999480
68
+ version_requirements: *70359801406780
69
69
  description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
70
70
  framework of
71
71
 
@@ -101,7 +101,10 @@ files:
101
101
  - app/assets/stylesheets/addons/_html5-input-types.scss
102
102
  - app/assets/stylesheets/addons/_position.scss
103
103
  - app/assets/stylesheets/addons/_prefixer.scss
104
+ - app/assets/stylesheets/addons/_retina-image.scss
105
+ - app/assets/stylesheets/addons/_size.scss
104
106
  - app/assets/stylesheets/addons/_timing-functions.scss
107
+ - app/assets/stylesheets/addons/_triangle.scss
105
108
  - app/assets/stylesheets/css3/_animation.scss
106
109
  - app/assets/stylesheets/css3/_appearance.scss
107
110
  - app/assets/stylesheets/css3/_background-image.scss
@@ -109,7 +112,6 @@ files:
109
112
  - app/assets/stylesheets/css3/_background.scss
110
113
  - app/assets/stylesheets/css3/_border-image.scss
111
114
  - app/assets/stylesheets/css3/_border-radius.scss
112
- - app/assets/stylesheets/css3/_box-shadow.scss
113
115
  - app/assets/stylesheets/css3/_box-sizing.scss
114
116
  - app/assets/stylesheets/css3/_columns.scss
115
117
  - app/assets/stylesheets/css3/_flex-box.scss
@@ -117,8 +119,10 @@ files:
117
119
  - app/assets/stylesheets/css3/_hidpi-media-query.scss
118
120
  - app/assets/stylesheets/css3/_image-rendering.scss
119
121
  - app/assets/stylesheets/css3/_inline-block.scss
122
+ - app/assets/stylesheets/css3/_keyframes.scss
120
123
  - app/assets/stylesheets/css3/_linear-gradient.scss
121
124
  - app/assets/stylesheets/css3/_perspective.scss
125
+ - app/assets/stylesheets/css3/_placeholder.scss
122
126
  - app/assets/stylesheets/css3/_radial-gradient.scss
123
127
  - app/assets/stylesheets/css3/_transform.scss
124
128
  - app/assets/stylesheets/css3/_transition.scss
@@ -129,6 +133,7 @@ files:
129
133
  - app/assets/stylesheets/functions/_grid-width.scss
130
134
  - app/assets/stylesheets/functions/_linear-gradient.scss
131
135
  - app/assets/stylesheets/functions/_modular-scale.scss
136
+ - app/assets/stylesheets/functions/_px-to-em.scss
132
137
  - app/assets/stylesheets/functions/_radial-gradient.scss
133
138
  - app/assets/stylesheets/functions/_render-gradients.scss
134
139
  - app/assets/stylesheets/functions/_tint-shade.scss
@@ -1,3 +0,0 @@
1
- @mixin box-shadow ($shadows...) {
2
- @include prefixer(box-shadow, $shadows, webkit spec);
3
- }