bourbon 5.0.0.beta.5 → 5.0.0.beta.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/.ruby-version +1 -0
  3. data/CHANGELOG.md +9 -1
  4. data/CONTRIBUTING.md +1 -0
  5. data/RELEASING.md +7 -4
  6. data/bourbon.gemspec +6 -6
  7. data/bower.json +1 -1
  8. data/circle.yml +6 -0
  9. data/core/_bourbon.scss +7 -3
  10. data/core/bourbon/helpers/_buttons-list.scss +14 -0
  11. data/core/bourbon/helpers/_text-inputs-list.scss +26 -0
  12. data/core/bourbon/library/_border-radius.scss +55 -18
  13. data/core/bourbon/library/_buttons.scss +56 -32
  14. data/core/bourbon/library/_contrast-switch.scss +14 -3
  15. data/core/bourbon/library/_font-face.scss +21 -16
  16. data/core/bourbon/library/_hide-visually.scss +1 -1
  17. data/core/bourbon/library/_margin.scss +15 -6
  18. data/core/bourbon/library/_modular-scale.scss +3 -3
  19. data/core/bourbon/library/_padding.scss +13 -4
  20. data/core/bourbon/library/_prefixer.scss +1 -1
  21. data/core/bourbon/library/_shade.scss +6 -1
  22. data/core/bourbon/library/_size.scss +2 -2
  23. data/core/bourbon/library/_text-inputs.scss +91 -53
  24. data/core/bourbon/{helpers → library}/_timing-functions.scss +0 -0
  25. data/core/bourbon/library/_tint.scss +6 -1
  26. data/core/bourbon/library/_triangle.scss +3 -0
  27. data/core/bourbon/library/_value-prefixer.scss +38 -0
  28. data/core/bourbon/settings/_settings.scss +11 -1
  29. data/core/bourbon/utilities/{_bourbon-get-setting.scss → _retrieve-bourbon-setting.scss} +2 -2
  30. data/core/bourbon/validators/_is-color.scss +13 -0
  31. data/lib/bourbon/version.rb +1 -1
  32. data/package.json +1 -1
  33. data/spec/bourbon/library/prefixer_spec.rb +34 -0
  34. data/spec/bourbon/utilities/{bourbon_get_setting_spec.rb → retrieve_bourbon_setting_spec.rb} +2 -2
  35. data/spec/fixtures/library/prefixer.scss +13 -0
  36. data/spec/fixtures/utilities/assign-inputs.scss +4 -4
  37. data/spec/fixtures/utilities/{bourbon-get-setting.scss → retrieve-bourbon-setting.scss} +2 -2
  38. metadata +29 -20
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: bbcabb0de4099a8e82cae3ba0717c5067ef6d5bc
4
- data.tar.gz: 23332a525fafb6e5b2febf8272829d6dbbc95a13
3
+ metadata.gz: 66a37a1717f902865940e47fb7f18d3dace53752
4
+ data.tar.gz: 9f9328eecf80cd88f1f43c2ccacb417521e98e06
5
5
  SHA512:
6
- metadata.gz: f5ef886f1e4b3b503550a20ceeb3e2183c9c38c6351c32c304298e75d260de4dddfa3ec4b91ec02ec3f63cd984033982080bc063dbafcfaad29da5dfe4f0f751
7
- data.tar.gz: cf1b84c963502b0c8f5909890a3cd72facc7f82f3100666fa80fd23d9901e26932a6793d3127e203b0ac7f21a34e68adfc51ebf1b85ee7c3412da88eecec5787
6
+ metadata.gz: dbfef29091ce21e562eb7c1d5835ffe076169f06e5c05448fa8526503859c52147cf0e46cccb9a6e464b589dd112b1530387f5161384c2468bfc5fbb72b3a53e
7
+ data.tar.gz: 102cdd8732e2e3ede64014ce3dd6ae098d42e352d23d6e778489aae4dfe06a7a4434a1df9405d283a959f582b3bad14894f892f5097cb7677d10a593657f4233
@@ -0,0 +1 @@
1
+ 2.3.0
@@ -5,7 +5,15 @@ project adheres to [Semantic Versioning](http://semver.org).
5
5
 
6
6
  ## [Unreleased]
7
7
 
8
- [Unreleased]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.5...HEAD
8
+ [Unreleased]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.6...HEAD
9
+
10
+ ## [5.0.0-beta.6] - 2016-06-06
11
+
12
+ ### Added
13
+
14
+ - Added a `value-prefixer` mixin for generating vendor prefixes on values.
15
+
16
+ [5.0.0-beta.6]: https://github.com/thoughtbot/bourbon/compare/v5.0.0.beta.5...v5.0.0.beta.6
9
17
 
10
18
  ## [5.0.0-beta.5] - 2016-03-23
11
19
 
@@ -49,6 +49,7 @@ We use [SassDoc] to document Bourbon. [Annotations] should be ordered:
49
49
  - `@see`
50
50
  - `@type`
51
51
  - `@argument`
52
+ - `@content`
52
53
  - `@property`
53
54
  - `@return`
54
55
  - `@example`
@@ -17,14 +17,17 @@
17
17
  1. Run `npm publish`, which pushes the new version to npm’s registry (if
18
18
  releasing a pre-release, run `npm publish --tag beta`).
19
19
 
20
- 1. Add a [new GitHub release][github-release].
20
+ 1. Draft a [new GitHub release][github-release]. Upon publishing, a tweet will
21
+ _automatically be sent_ on the [@bourbonsass] Twitter account via [Zapier].
22
+ It will look like this:
23
+
24
+ > We’ve released {release_title}: {release_link}
21
25
 
22
26
  1. Re-generate and publish the [documentation website], using the available
23
27
  Rake tasks.
24
28
 
25
- 1. Announce the new release, making sure to say “thank you” to the contributors
26
- who helped shape this version!
27
-
28
29
  [Keep a CHANGELOG]: http://keepachangelog.com
29
30
  [github-release]: https://github.com/thoughtbot/bourbon/releases/new
30
31
  [documentation website]: https://github.com/thoughtbot/bourbon.io
32
+ [@bourbonsass]: https://twitter.com/bourbonsass
33
+ [Zapier]: https://zapier.com
@@ -3,12 +3,12 @@ require "bourbon/version"
3
3
 
4
4
  Gem::Specification.new do |s|
5
5
  s.add_development_dependency "aruba", "~> 0.6.2"
6
- s.add_development_dependency "css_parser", "~> 1.3"
7
- s.add_development_dependency "rake", "~> 10.4"
8
- s.add_development_dependency "rspec", "~> 3.3"
9
- s.add_development_dependency "scss_lint", "0.47"
10
- s.add_runtime_dependency "sass", "~> 3.4"
11
- s.add_runtime_dependency "thor", "~> 0.19"
6
+ s.add_development_dependency "css_parser", "~> 1.4.1"
7
+ s.add_development_dependency "rake", "~> 11.1.2"
8
+ s.add_development_dependency "rspec", "~> 3.4.0"
9
+ s.add_development_dependency "scss_lint", "0.48.0"
10
+ s.add_runtime_dependency "sass", "~> 3.4.22"
11
+ s.add_runtime_dependency "thor", "~> 0.19.1"
12
12
  s.authors = [
13
13
  "Christian Reuter",
14
14
  "Damian Galarza",
data/bower.json CHANGED
@@ -34,5 +34,5 @@
34
34
  "type": "git",
35
35
  "url": "https://github.com/thoughtbot/bourbon.git"
36
36
  },
37
- "version": "5.0.0-beta.5"
37
+ "version": "5.0.0-beta.6"
38
38
  }
data/circle.yml CHANGED
@@ -1,3 +1,7 @@
1
+ dependencies:
2
+ override:
3
+ - bundle install
4
+ - npm install -g sassdoc
1
5
  general:
2
6
  branches:
3
7
  ignore:
@@ -5,3 +9,5 @@ general:
5
9
  test:
6
10
  override:
7
11
  - bundle exec rake
12
+ post:
13
+ - sassdoc core/ --parse --verbose --strict
@@ -1,25 +1,27 @@
1
- // Bourbon 5.0.0-beta.5
1
+ // Bourbon 5.0.0-beta.6
2
2
  // http://bourbon.io
3
3
  // Copyright 2011 thoughtbot, inc.
4
4
  // MIT License
5
5
 
6
+ @import "bourbon/helpers/buttons-list";
6
7
  @import "bourbon/helpers/scales";
7
- @import "bourbon/helpers/timing-functions";
8
+ @import "bourbon/helpers/text-inputs-list";
8
9
 
9
10
  @import "bourbon/settings/settings";
10
11
 
11
12
  @import "bourbon/validators/contains";
12
13
  @import "bourbon/validators/contains-falsy";
14
+ @import "bourbon/validators/is-color";
13
15
  @import "bourbon/validators/is-length";
14
16
  @import "bourbon/validators/is-light";
15
17
  @import "bourbon/validators/is-number";
16
18
  @import "bourbon/validators/is-size";
17
19
 
18
20
  @import "bourbon/utilities/assign-inputs";
19
- @import "bourbon/utilities/bourbon-get-setting";
20
21
  @import "bourbon/utilities/collapse-directionals";
21
22
  @import "bourbon/utilities/directional-values";
22
23
  @import "bourbon/utilities/font-source-declaration";
24
+ @import "bourbon/utilities/retrieve-bourbon-setting";
23
25
  @import "bourbon/utilities/unpack";
24
26
 
25
27
  @import "bourbon/library/border-color";
@@ -43,6 +45,8 @@
43
45
  @import "bourbon/library/size";
44
46
  @import "bourbon/library/strip-unit";
45
47
  @import "bourbon/library/text-inputs";
48
+ @import "bourbon/library/timing-functions";
46
49
  @import "bourbon/library/tint";
47
50
  @import "bourbon/library/triangle";
51
+ @import "bourbon/library/value-prefixer";
48
52
  @import "bourbon/library/word-wrap";
@@ -0,0 +1,14 @@
1
+ @charset "UTF-8";
2
+
3
+ /// A list of all HTML button elements.
4
+ ///
5
+ /// @type list
6
+ ///
7
+ /// @access private
8
+
9
+ $_buttons-list: (
10
+ "button",
11
+ "[type='button']",
12
+ "[type='reset']",
13
+ "[type='submit']",
14
+ );
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// A list of all _text-based_ HTML inputs.
4
+ ///
5
+ /// @type list
6
+ ///
7
+ /// @access private
8
+
9
+ $_text-inputs-list: (
10
+ "[type='color']",
11
+ "[type='date']",
12
+ "[type='datetime']",
13
+ "[type='datetime-local']",
14
+ "[type='email']",
15
+ "[type='month']",
16
+ "[type='number']",
17
+ "[type='password']",
18
+ "[type='search']",
19
+ "[type='tel']",
20
+ "[type='text']",
21
+ "[type='time']",
22
+ "[type='url']",
23
+ "[type='week']",
24
+ "input:not([type])",
25
+ "textarea",
26
+ );
@@ -1,47 +1,84 @@
1
1
  @charset "UTF-8";
2
2
 
3
- /// Provides a quick method for targeting `border-radius` on both corners on the
4
- /// side of a box.
3
+ /// Provides a shorthand syntax to add `border-radius` to both the top-left and
4
+ /// top-right of an element.
5
5
  ///
6
- /// @argument {number} $radii
6
+ /// @argument {number (with unit)} $radii
7
7
  ///
8
8
  /// @example scss
9
- /// .element-one {
10
- /// @include border-top-radius(5px);
9
+ /// .element {
10
+ /// @include border-top-radius(4px);
11
11
  /// }
12
12
  ///
13
13
  /// @example css
14
- /// .element-one {
15
- /// border-top-left-radius: 5px;
16
- /// border-top-right-radius: 5px;
14
+ /// .element {
15
+ /// border-top-left-radius: 4px;
16
+ /// border-top-right-radius: 4px;
17
17
  /// }
18
+
19
+ @mixin border-top-radius($radii) {
20
+ border-top-left-radius: $radii;
21
+ border-top-right-radius: $radii;
22
+ }
23
+
24
+ /// Provides a shorthand syntax to add `border-radius` to both the top-right and
25
+ /// bottom-right of an element.
26
+ ///
27
+ /// @argument {number (with unit)} $radii
18
28
  ///
19
29
  /// @example scss
20
- /// .element-two {
21
- /// @include border-left-radius(3px);
30
+ /// .element {
31
+ /// @include border-right-radius(3px);
22
32
  /// }
23
33
  ///
24
34
  /// @example css
25
- /// .element-two {
26
- /// border-bottom-left-radius: 3px;
27
- /// border-top-left-radius: 3px;
35
+ /// .element {
36
+ /// border-bottom-right-radius: 3px;
37
+ /// border-top-right-radius: 3px;
28
38
  /// }
29
39
 
30
- @mixin border-top-radius($radii) {
31
- border-top-left-radius: $radii;
32
- border-top-right-radius: $radii;
33
- }
34
-
35
40
  @mixin border-right-radius($radii) {
36
41
  border-bottom-right-radius: $radii;
37
42
  border-top-right-radius: $radii;
38
43
  }
39
44
 
45
+ /// Provides a shorthand syntax to add `border-radius` to both the bottom-left
46
+ /// and bottom-right of an element.
47
+ ///
48
+ /// @argument {number (with unit)} $radii
49
+ ///
50
+ /// @example scss
51
+ /// .element {
52
+ /// @include border-bottom-radius(2px);
53
+ /// }
54
+ ///
55
+ /// @example css
56
+ /// .element {
57
+ /// border-bottom-left-radius: 2px;
58
+ /// border-bottom-right-radius: 2px;
59
+ /// }
60
+
40
61
  @mixin border-bottom-radius($radii) {
41
62
  border-bottom-left-radius: $radii;
42
63
  border-bottom-right-radius: $radii;
43
64
  }
44
65
 
66
+ /// Provides a shorthand syntax to add `border-radius` to both the top-left
67
+ /// and bottom-left of an element.
68
+ ///
69
+ /// @argument {number (with unit)} $radii
70
+ ///
71
+ /// @example scss
72
+ /// .element {
73
+ /// @include border-left-radius(1px);
74
+ /// }
75
+ ///
76
+ /// @example css
77
+ /// .element {
78
+ /// border-bottom-left-radius: 1px;
79
+ /// border-top-left-radius: 1px;
80
+ /// }
81
+
45
82
  @mixin border-left-radius($radii) {
46
83
  border-bottom-left-radius: $radii;
47
84
  border-top-left-radius: $radii;
@@ -1,60 +1,84 @@
1
1
  @charset "UTF-8";
2
2
 
3
- /// Generates variables for all buttons. Please note that you must use
4
- /// interpolation on the variable: `#{$all-buttons}`.
5
- ///
3
+ ////
6
4
  /// @type list
7
5
  ///
6
+ /// @require {function} _assign-inputs
7
+ ///
8
+ /// @require {variable} $_buttons-list
9
+ ////
10
+
11
+ /// A list of all HTML button elements. Please note that you must interpolate
12
+ /// the variable (`#{}`) to use it as a selector.
13
+ ///
8
14
  /// @example scss
9
15
  /// #{$all-buttons} {
10
16
  /// background-color: #f00;
11
17
  /// }
12
18
  ///
13
- /// #{$all-buttons-focus},
14
- /// #{$all-buttons-hover} {
15
- /// background-color: #0f0;
19
+ /// @example css
20
+ /// button,
21
+ /// [type='button'],
22
+ /// [type='reset'],
23
+ /// [type='submit'] {
24
+ /// background-color: #f00;
16
25
  /// }
26
+
27
+ $all-buttons: _assign-inputs($_buttons-list);
28
+
29
+ /// A list of all HTML button elements with the `:active` pseudo-class applied.
30
+ /// Please note that you must interpolate the variable (`#{}`) to use it as a
31
+ /// selector.
17
32
  ///
33
+ /// @example scss
18
34
  /// #{$all-buttons-active} {
19
35
  /// background-color: #00f;
20
36
  /// }
21
37
  ///
22
38
  /// @example css
23
- /// button,
24
- /// [type='button'],
25
- /// [type='reset'],
26
- /// [type='submit'] {
27
- /// background-color: #f00;
39
+ /// button:active,
40
+ /// [type='button']:active,
41
+ /// [type='reset']:active,
42
+ /// [type='submit']:active {
43
+ /// background-color: #00f;
28
44
  /// }
45
+
46
+ $all-buttons-active: _assign-inputs($_buttons-list, active);
47
+
48
+ /// A list of all HTML button elements with the `:focus` pseudo-class applied.
49
+ /// Please note that you must interpolate the variable (`#{}`) to use it as a
50
+ /// selector.
29
51
  ///
52
+ /// @example scss
53
+ /// #{$all-buttons-focus} {
54
+ /// background-color: #0f0;
55
+ /// }
56
+ ///
57
+ /// @example css
30
58
  /// button:focus,
31
59
  /// [type='button']:focus,
32
60
  /// [type='reset']:focus,
33
- /// [type='submit']:focus,
61
+ /// [type='submit']:focus {
62
+ /// background-color: #0f0;
63
+ /// }
64
+
65
+ $all-buttons-focus: _assign-inputs($_buttons-list, focus);
66
+
67
+ /// A list of all HTML button elements with the `:hover` pseudo-class applied.
68
+ /// Please note that you must interpolate the variable (`#{}`) to use it as a
69
+ /// selector.
70
+ ///
71
+ /// @example scss
72
+ /// #{$all-buttons-hover} {
73
+ /// background-color: #0f0;
74
+ /// }
75
+ ///
76
+ /// @example css
34
77
  /// button:hover,
35
78
  /// [type='button']:hover,
36
79
  /// [type='reset']:hover,
37
80
  /// [type='submit']:hover {
38
81
  /// background-color: #0f0;
39
82
  /// }
40
- ///
41
- /// button:active,
42
- /// [type='button']:active,
43
- /// [type='reset']:active,
44
- /// [type='submit']:active {
45
- /// background-color: #00f;
46
- /// }
47
- ///
48
- /// @require {function} _assign-inputs
49
83
 
50
- $buttons-list: (
51
- "button",
52
- "[type='button']",
53
- "[type='reset']",
54
- "[type='submit']",
55
- );
56
-
57
- $all-buttons: _assign-inputs($buttons-list);
58
- $all-buttons-active: _assign-inputs($buttons-list, active);
59
- $all-buttons-focus: _assign-inputs($buttons-list, focus);
60
- $all-buttons-hover: _assign-inputs($buttons-list, hover);
84
+ $all-buttons-hover: _assign-inputs($_buttons-list, hover);
@@ -41,9 +41,20 @@
41
41
 
42
42
  @function contrast-switch(
43
43
  $base-color,
44
- $dark-color: _bourbon-get-setting("contrast-switch-dark-color"),
45
- $light-color: _bourbon-get-setting("contrast-switch-light-color")
44
+ $dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
45
+ $light-color: _retrieve-bourbon-setting("contrast-switch-light-color")
46
46
  ) {
47
47
 
48
- @return if(_is-light($base-color), $dark-color, $light-color);
48
+ @if not _is-color($base-color) {
49
+ @error "`#{$base-color}` is not a valid color for the `$base-color` " +
50
+ "argument in the `contrast-switch` function.";
51
+ } @else if not _is-color($dark-color) {
52
+ @error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
53
+ "argument in the `contrast-switch` function.";
54
+ } @else if not _is-color($light-color) {
55
+ @error "`#{$light-color}` is not a valid color for the `$light-color` " +
56
+ "argument in the `contrast-switch` function.";
57
+ } @else {
58
+ @return if(_is-light($base-color), $dark-color, $light-color);
59
+ }
49
60
  }
@@ -4,9 +4,6 @@
4
4
  /// formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
5
5
  /// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
6
6
  /// which you can enable per use, or globally in the `$bourbon()` settings.
7
- /// Finally, any additional CSS properties that are included in the `@include`
8
- /// directive will be output within the `@font-face` declaration, e.g. you can
9
- /// pass in `font-weight`, `font-style` and/or `unicode-range`.
10
7
  ///
11
8
  /// @argument {string} $font-family
12
9
  ///
@@ -16,35 +13,43 @@
16
13
  /// Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
17
14
  /// in `app/assets/fonts/`).
18
15
  ///
19
- /// @argument {list} $file-formats [("ttf", "woff2", "woff")]
16
+ /// @argument {string | list} $file-formats [("ttf", "woff2", "woff")]
20
17
  /// Pass a list of file formats to support,
21
- /// for example ("eot", "ttf", "svg", "woff2", woff").
18
+ /// for example ("eot", "ttf", "svg", "woff2", "woff").
19
+ ///
20
+ /// @content
21
+ /// Any additional CSS properties that are included in the `@include`
22
+ /// directive will be output within the `@font-face` declaration, e.g. you can
23
+ /// pass in `font-weight`, `font-style` and/or `unicode-range`.
22
24
  ///
23
25
  /// @example scss
24
26
  /// @include font-face(
25
- /// "source-sans-pro",
26
- /// "fonts/source-sans-pro-regular",
27
- /// $file-formats: ("eot", "ttf")
28
- /// );
27
+ /// "source-sans-pro",
28
+ /// "fonts/source-sans-pro-regular",
29
+ /// ("woff2", "woff")
30
+ /// ) {
31
+ /// font-style: normal;
32
+ /// font-weight: 400;
33
+ /// }
29
34
  ///
30
35
  /// @example css
31
36
  /// @font-face {
32
37
  /// font-family: "source-sans-pro";
33
- /// src: url("fonts/source-sans-pro-regular.eot?#iefix")
34
- /// format("embedded-opentype"),
35
- /// url("fonts/source-sans-pro-regular.ttf")
36
- /// format("truetype");
38
+ /// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
39
+ /// url("fonts/source-sans-pro-regular.woff") format("woff");
40
+ /// font-style: normal;
41
+ /// font-weight: 400;
37
42
  /// }
38
43
  ///
39
44
  /// @require {function} _font-source-declaration
40
45
  ///
41
- /// @require {function} _bourbon-get-setting
46
+ /// @require {function} _retrieve-bourbon-setting
42
47
 
43
48
  @mixin font-face(
44
49
  $font-family,
45
50
  $file-path,
46
- $file-formats: _bourbon-get-setting("global-font-file-formats"),
47
- $asset-pipeline: _bourbon-get-setting("rails-asset-pipeline")
51
+ $file-formats: _retrieve-bourbon-setting("global-font-file-formats"),
52
+ $asset-pipeline: _retrieve-bourbon-setting("rails-asset-pipeline")
48
53
  ) {
49
54
 
50
55
  @font-face {