bourbon 4.1.1 → 4.2.0.beta

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +4 -3
  3. data/.hound.yml +4 -0
  4. data/.npmignore +5 -2
  5. data/.scss-lint.yml +175 -0
  6. data/README.md +7 -12
  7. data/Rakefile +6 -4
  8. data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss +16 -7
  9. data/app/assets/stylesheets/_bourbon.scss +27 -26
  10. data/app/assets/stylesheets/addons/_border-color.scss +26 -0
  11. data/app/assets/stylesheets/addons/_border-radius.scss +48 -0
  12. data/app/assets/stylesheets/addons/_border-style.scss +25 -0
  13. data/app/assets/stylesheets/addons/_border-width.scss +25 -0
  14. data/app/assets/stylesheets/addons/_buttons.scss +64 -0
  15. data/app/assets/stylesheets/addons/_clearfix.scss +17 -10
  16. data/app/assets/stylesheets/addons/_ellipsis.scss +22 -0
  17. data/app/assets/stylesheets/addons/{_font-family.scss → _font-stacks.scss} +26 -0
  18. data/app/assets/stylesheets/addons/_hide-text.scss +23 -8
  19. data/app/assets/stylesheets/addons/_margin.scss +26 -0
  20. data/app/assets/stylesheets/addons/_padding.scss +26 -0
  21. data/app/assets/stylesheets/addons/_position.scss +24 -2
  22. data/app/assets/stylesheets/addons/_prefixer.scss +36 -15
  23. data/app/assets/stylesheets/addons/_size.scss +30 -1
  24. data/app/assets/stylesheets/addons/_text-inputs.scss +112 -0
  25. data/app/assets/stylesheets/addons/_timing-functions.scss +7 -5
  26. data/app/assets/stylesheets/addons/_triangle.scss +11 -11
  27. data/app/assets/stylesheets/addons/_word-wrap.scss +19 -0
  28. data/app/assets/stylesheets/css3/_animation.scss +14 -23
  29. data/app/assets/stylesheets/css3/_appearance.scss +1 -1
  30. data/app/assets/stylesheets/css3/_backface-visibility.scss +0 -3
  31. data/app/assets/stylesheets/css3/_background-image.scss +1 -1
  32. data/app/assets/stylesheets/css3/_background.scss +3 -3
  33. data/app/assets/stylesheets/css3/_border-image.scss +3 -3
  34. data/app/assets/stylesheets/css3/_calc.scss +1 -1
  35. data/app/assets/stylesheets/css3/_columns.scss +8 -8
  36. data/app/assets/stylesheets/css3/_filter.scss +0 -1
  37. data/app/assets/stylesheets/css3/_flex-box.scss +16 -47
  38. data/app/assets/stylesheets/css3/_font-feature-settings.scss +1 -7
  39. data/app/assets/stylesheets/css3/_hyphens.scss +2 -2
  40. data/app/assets/stylesheets/css3/_image-rendering.scss +6 -6
  41. data/app/assets/stylesheets/css3/_keyframes.scss +1 -0
  42. data/app/assets/stylesheets/css3/_linear-gradient.scss +11 -11
  43. data/app/assets/stylesheets/css3/_radial-gradient.scss +14 -14
  44. data/app/assets/stylesheets/css3/_selection.scss +39 -11
  45. data/app/assets/stylesheets/css3/_transform.scss +5 -5
  46. data/app/assets/stylesheets/css3/_transition.scss +17 -23
  47. data/app/assets/stylesheets/css3/_user-select.scss +2 -2
  48. data/app/assets/stylesheets/functions/{_assign.scss → _assign-inputs.scss} +2 -2
  49. data/app/assets/stylesheets/functions/_contains-falsy.scss +20 -0
  50. data/app/assets/stylesheets/functions/_contains.scss +16 -2
  51. data/app/assets/stylesheets/functions/_is-length.scss +5 -1
  52. data/app/assets/stylesheets/functions/_is-light.scss +21 -0
  53. data/app/assets/stylesheets/functions/_is-number.scss +11 -0
  54. data/app/assets/stylesheets/functions/_is-size.scss +8 -1
  55. data/app/assets/stylesheets/functions/_px-to-em.scss +2 -2
  56. data/app/assets/stylesheets/functions/_px-to-rem.scss +2 -2
  57. data/app/assets/stylesheets/functions/_shade.scss +24 -0
  58. data/app/assets/stylesheets/functions/_strip-units.scss +15 -3
  59. data/app/assets/stylesheets/functions/_tint.scss +24 -0
  60. data/app/assets/stylesheets/functions/_transition-property-name.scss +14 -14
  61. data/app/assets/stylesheets/functions/_unpack.scss +18 -8
  62. data/app/assets/stylesheets/helpers/_convert-units.scss +2 -2
  63. data/app/assets/stylesheets/helpers/_directional-values.scss +96 -0
  64. data/app/assets/stylesheets/helpers/_font-source-declaration.scss +2 -1
  65. data/app/assets/stylesheets/helpers/_linear-gradient-parser.scss +1 -1
  66. data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +1 -1
  67. data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +10 -10
  68. data/app/assets/stylesheets/helpers/_radial-gradient-parser.scss +4 -4
  69. data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +2 -2
  70. data/app/assets/stylesheets/helpers/_str-to-num.scss +3 -3
  71. data/app/assets/stylesheets/settings/_asset-pipeline.scss +6 -0
  72. data/app/assets/stylesheets/settings/_prefixer.scss +5 -2
  73. data/bourbon.gemspec +4 -2
  74. data/bower.json +8 -6
  75. data/lib/bourbon/version.rb +1 -1
  76. data/package.json +1 -1
  77. data/spec/bourbon/functions/assign_inputs_spec.rb +50 -0
  78. data/spec/bourbon/functions/contains_spec.rb +27 -0
  79. data/spec/bourbon/functions/is_length_spec.rb +49 -0
  80. data/spec/bourbon/functions/is_light_spec.rb +37 -0
  81. data/spec/bourbon/functions/is_number_spec.rb +43 -0
  82. data/spec/bourbon/functions/is_size_spec.rb +43 -0
  83. data/spec/bourbon/functions/modular_scale_spec.rb +43 -0
  84. data/spec/bourbon/functions/px_to_em_spec.rb +31 -0
  85. data/spec/fixtures/_setup.scss +1 -0
  86. data/spec/fixtures/functions/assign-inputs.scss +19 -0
  87. data/spec/fixtures/functions/contains.scss +28 -0
  88. data/spec/fixtures/functions/is-length.scss +35 -0
  89. data/spec/fixtures/functions/is-light.scss +29 -0
  90. data/spec/fixtures/functions/is-number.scss +31 -0
  91. data/spec/fixtures/functions/is-size.scss +31 -0
  92. data/spec/fixtures/functions/modular-scale.scss +29 -0
  93. data/spec/fixtures/functions/px-to-em.scss +17 -0
  94. data/spec/spec_helper.rb +22 -0
  95. data/spec/support/matchers/be_contained_in.rb +10 -0
  96. data/spec/support/matchers/have_rule.rb +35 -0
  97. data/spec/support/matchers/have_value.rb +15 -0
  98. data/spec/support/parser_support.rb +16 -0
  99. data/spec/support/sass_support.rb +10 -0
  100. metadata +102 -19
  101. data/app/assets/stylesheets/addons/_directional-values.scss +0 -111
  102. data/app/assets/stylesheets/addons/_html5-input-types.scss +0 -90
  103. data/app/assets/stylesheets/css3/_border-radius.scss +0 -22
  104. data/app/assets/stylesheets/css3/_box-sizing.scss +0 -4
  105. data/app/assets/stylesheets/functions/_color-lightness.scss +0 -13
  106. data/app/assets/stylesheets/functions/_tint-shade.scss +0 -9
  107. data/app/assets/stylesheets/helpers/_is-num.scss +0 -5
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include border-color(#a60b55 #76cd9c null #e8ae1a);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// border-left-color: #e8ae1a;
16
+ /// border-right-color: #76cd9c;
17
+ /// border-top-color: #a60b55;
18
+ /// }
19
+ ///
20
+ /// @require {mixin} directional-property
21
+ ///
22
+ /// @output `border-color`
23
+
24
+ @mixin border-color($vals...) {
25
+ @include directional-property(border, color, $vals...);
26
+ }
@@ -0,0 +1,48 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
4
+ ///
5
+ /// @param {Number} $radii
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element-one {
10
+ /// @include border-top-radius(5px);
11
+ /// }
12
+ ///
13
+ /// .element-two {
14
+ /// @include border-left-radius(3px);
15
+ /// }
16
+ ///
17
+ /// @example css - CSS Output
18
+ /// .element-one {
19
+ /// border-top-left-radius: 5px;
20
+ /// border-top-right-radius: 5px;
21
+ /// }
22
+ ///
23
+ /// .element-two {
24
+ /// border-bottom-left-radius: 3px;
25
+ /// border-top-left-radius: 3px;
26
+ /// }
27
+ ///
28
+ /// @output `border-radius`
29
+
30
+ @mixin border-top-radius($radii) {
31
+ border-top-left-radius: $radii;
32
+ border-top-right-radius: $radii;
33
+ }
34
+
35
+ @mixin border-right-radius($radii) {
36
+ border-bottom-right-radius: $radii;
37
+ border-top-right-radius: $radii;
38
+ }
39
+
40
+ @mixin border-bottom-radius($radii) {
41
+ border-bottom-left-radius: $radii;
42
+ border-bottom-right-radius: $radii;
43
+ }
44
+
45
+ @mixin border-left-radius($radii) {
46
+ border-bottom-left-radius: $radii;
47
+ border-top-left-radius: $radii;
48
+ }
@@ -0,0 +1,25 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include border-style(dashed null solid);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// border-bottom-style: solid;
16
+ /// border-top-style: dashed;
17
+ /// }
18
+ ///
19
+ /// @require {mixin} directional-property
20
+ ///
21
+ /// @output `border-style`
22
+
23
+ @mixin border-style($vals...) {
24
+ @include directional-property(border, style, $vals...);
25
+ }
@@ -0,0 +1,25 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include border-width(1em null 20px);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// border-bottom-width: 20px;
16
+ /// border-top-width: 1em;
17
+ /// }
18
+ ///
19
+ /// @require {mixin} directional-property
20
+ ///
21
+ /// @output `border-width`
22
+
23
+ @mixin border-width($vals...) {
24
+ @include directional-property(border, width, $vals...);
25
+ }
@@ -0,0 +1,64 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
4
+ ///
5
+ /// @example scss - Usage
6
+ /// #{$all-buttons} {
7
+ /// background-color: #f00;
8
+ /// }
9
+ ///
10
+ /// #{$all-buttons-focus},
11
+ /// #{$all-buttons-hover} {
12
+ /// background-color: #0f0;
13
+ /// }
14
+ ///
15
+ /// #{$all-buttons-active} {
16
+ /// background-color: #00f;
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// button,
21
+ /// input[type="button"],
22
+ /// input[type="reset"],
23
+ /// input[type="submit"] {
24
+ /// background-color: #f00;
25
+ /// }
26
+ ///
27
+ /// button:focus,
28
+ /// input[type="button"]:focus,
29
+ /// input[type="reset"]:focus,
30
+ /// input[type="submit"]:focus,
31
+ /// button:hover,
32
+ /// input[type="button"]:hover,
33
+ /// input[type="reset"]:hover,
34
+ /// input[type="submit"]:hover {
35
+ /// background-color: #0f0;
36
+ /// }
37
+ ///
38
+ /// button:active,
39
+ /// input[type="button"]:active,
40
+ /// input[type="reset"]:active,
41
+ /// input[type="submit"]:active {
42
+ /// background-color: #00f;
43
+ /// }
44
+ ///
45
+ /// @require assign-inputs
46
+ ///
47
+ /// @type List
48
+ ///
49
+ /// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
50
+
51
+ $buttons-list: 'button',
52
+ 'input[type="button"]',
53
+ 'input[type="reset"]',
54
+ 'input[type="submit"]';
55
+
56
+ $all-buttons: assign-inputs($buttons-list);
57
+ $all-buttons-active: assign-inputs($buttons-list, active);
58
+ $all-buttons-focus: assign-inputs($buttons-list, focus);
59
+ $all-buttons-hover: assign-inputs($buttons-list, hover);
60
+
61
+ $all-button-inputs: $all-buttons;
62
+ $all-button-inputs-active: $all-buttons-active;
63
+ $all-button-inputs-focus: $all-buttons-focus;
64
+ $all-button-inputs-hover: $all-buttons-hover;
@@ -1,9 +1,20 @@
1
- // The clearfix mixin provides an easy way to contain floats
2
- //
3
- // Example usage:
4
- // .wrapper {
5
- // @include clearfix;
6
- // }
1
+ @charset "UTF-8";
2
+
3
+ /// Provides an easy way to include a clearfix for containing floats.
4
+ ///
5
+ /// @link http://cssmojo.com/latest_new_clearfix_so_far/
6
+ ///
7
+ /// @example scss - Usage
8
+ /// .element {
9
+ /// @include clearfix;
10
+ /// }
11
+ ///
12
+ /// @example css - CSS Output
13
+ /// .element::after {
14
+ /// clear: both;
15
+ /// content: "";
16
+ /// display: table;
17
+ /// }
7
18
 
8
19
  @mixin clearfix {
9
20
  &::after {
@@ -12,7 +23,3 @@
12
23
  display: table;
13
24
  }
14
25
  }
15
-
16
- // Acknowledgements:
17
- // Thierry Koblentz, cssmojo
18
- // http://goo.gl/AQWvyH
@@ -1,3 +1,25 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Truncates text and adds an ellipsis to represent overflow.
4
+ ///
5
+ /// @param {Number} $width [100%]
6
+ /// Max-width for the string to respect before being truncated
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include ellipsis;
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// display: inline-block;
16
+ /// max-width: 100%;
17
+ /// overflow: hidden;
18
+ /// text-overflow: ellipsis;
19
+ /// white-space: nowrap;
20
+ /// word-wrap: normal;
21
+ /// }
22
+
1
23
  @mixin ellipsis($width: 100%) {
2
24
  display: inline-block;
3
25
  max-width: $width;
@@ -1,5 +1,31 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Georgia font stack.
4
+ ///
5
+ /// @type List
6
+
1
7
  $georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
8
+
9
+ /// Helvetica font stack.
10
+ ///
11
+ /// @type List
12
+
2
13
  $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
14
+
15
+ /// Lucida Grande font stack.
16
+ ///
17
+ /// @type List
18
+
3
19
  $lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
20
+
21
+ /// Monospace font stack.
22
+ ///
23
+ /// @type List
24
+
4
25
  $monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
26
+
27
+ /// Verdana font stack.
28
+ ///
29
+ /// @type List
30
+
5
31
  $verdana: "Verdana", "Geneva", sans-serif;
@@ -1,12 +1,27 @@
1
- @mixin hide-text($height: 1em) {
2
- height: $height;
3
- line-height: 1.5;
1
+ /// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
2
+ ///
3
+ /// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
4
+ ///
5
+ /// @example scss - Usage
6
+ /// .element {
7
+ /// @include hide-text;
8
+ /// }
9
+ ///
10
+ /// @example css - CSS Output
11
+ /// .element {
12
+ /// overflow: hidden;
13
+ /// text-indent: 101%;
14
+ /// white-space: nowrap;
15
+ /// }
16
+ ///
17
+ /// @todo Remove height argument in v5.0.0
18
+
19
+ @mixin hide-text($height: null) {
4
20
  overflow: hidden;
21
+ text-indent: 101%;
22
+ white-space: nowrap;
5
23
 
6
- &::before {
7
- content: "";
8
- display: block;
9
- width: 0;
10
- height: 100%;
24
+ @if $height {
25
+ @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
11
26
  }
12
27
  }
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include margin(null 10px 3em 20vh);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// margin-bottom: 3em;
16
+ /// margin-left: 20vh;
17
+ /// margin-right: 10px;
18
+ /// }
19
+ ///
20
+ /// @require {mixin} directional-property
21
+ ///
22
+ /// @output `margin`
23
+
24
+ @mixin margin($vals...) {
25
+ @include directional-property(margin, false, $vals...);
26
+ }
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include padding(12vh null 10px 5%);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// padding-bottom: 10px;
16
+ /// padding-left: 5%;
17
+ /// padding-top: 12vh;
18
+ /// }
19
+ ///
20
+ /// @require {mixin} directional-property
21
+ ///
22
+ /// @output `padding`
23
+
24
+ @mixin padding($vals...) {
25
+ @include directional-property(padding, false, $vals...);
26
+ }
@@ -1,7 +1,29 @@
1
- // Set element positioning in a single statement
1
+ @charset "UTF-8";
2
2
 
3
- @mixin position($position: relative, $coordinates: null null null null) {
3
+ /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Position} $position [relative]
6
+ /// A CSS position value
7
+ ///
8
+ /// @param {Arglist} $coordinates [null null null null]
9
+ /// List of values that correspond to the 4-value syntax for the edges of a box
10
+ ///
11
+ /// @example scss - Usage
12
+ /// .element {
13
+ /// @include position(absolute, 0 null null 10em);
14
+ /// }
15
+ ///
16
+ /// @example css - CSS Output
17
+ /// .element {
18
+ /// left: 10em;
19
+ /// position: absolute;
20
+ /// top: 0;
21
+ /// }
22
+ ///
23
+ /// @require {function} is-length
24
+ /// @require {function} unpack
4
25
 
26
+ @mixin position($position: relative, $coordinates: null null null null) {
5
27
  @if type-of($position) == list {
6
28
  $coordinates: $position;
7
29
  $position: relative;
@@ -1,36 +1,57 @@
1
- //************************************************************************//
2
- // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3
- //************************************************************************//
4
- // Variables located in /settings/_prefixer.scss
1
+ @charset "UTF-8";
5
2
 
6
- @mixin prefixer ($property, $value, $prefixes) {
3
+ /// A mixin for generating vendor prefixes on non-standardized properties.
4
+ ///
5
+ /// @param {String} $property
6
+ /// Property to prefix
7
+ ///
8
+ /// @param {*} $value
9
+ /// Value to use
10
+ ///
11
+ /// @param {List} $prefixes
12
+ /// Prefixes to define
13
+ ///
14
+ /// @example scss - Usage
15
+ /// .element {
16
+ /// @include prefixer(border-radius, 10px, webkit ms spec);
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// .element {
21
+ /// -webkit-border-radius: 10px;
22
+ /// -moz-border-radius: 10px;
23
+ /// border-radius: 10px;
24
+ /// }
25
+ ///
26
+ /// @require {variable} $prefix-for-webkit
27
+ /// @require {variable} $prefix-for-mozilla
28
+ /// @require {variable} $prefix-for-microsoft
29
+ /// @require {variable} $prefix-for-opera
30
+ /// @require {variable} $prefix-for-spec
31
+
32
+ @mixin prefixer($property, $value, $prefixes) {
7
33
  @each $prefix in $prefixes {
8
34
  @if $prefix == webkit {
9
35
  @if $prefix-for-webkit {
10
36
  -webkit-#{$property}: $value;
11
37
  }
12
- }
13
- @else if $prefix == moz {
38
+ } @else if $prefix == moz {
14
39
  @if $prefix-for-mozilla {
15
40
  -moz-#{$property}: $value;
16
41
  }
17
- }
18
- @else if $prefix == ms {
42
+ } @else if $prefix == ms {
19
43
  @if $prefix-for-microsoft {
20
44
  -ms-#{$property}: $value;
21
45
  }
22
- }
23
- @else if $prefix == o {
46
+ } @else if $prefix == o {
24
47
  @if $prefix-for-opera {
25
48
  -o-#{$property}: $value;
26
49
  }
27
- }
28
- @else if $prefix == spec {
50
+ } @else if $prefix == spec {
29
51
  @if $prefix-for-spec {
30
52
  #{$property}: $value;
31
53
  }
32
- }
33
- @else {
54
+ } @else {
34
55
  @warn "Unrecognized prefix: #{$prefix}";
35
56
  }
36
57
  }