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.
- checksums.yaml +4 -4
- data/.gitignore +4 -3
- data/.hound.yml +4 -0
- data/.npmignore +5 -2
- data/.scss-lint.yml +175 -0
- data/README.md +7 -12
- data/Rakefile +6 -4
- data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss +16 -7
- data/app/assets/stylesheets/_bourbon.scss +27 -26
- data/app/assets/stylesheets/addons/_border-color.scss +26 -0
- data/app/assets/stylesheets/addons/_border-radius.scss +48 -0
- data/app/assets/stylesheets/addons/_border-style.scss +25 -0
- data/app/assets/stylesheets/addons/_border-width.scss +25 -0
- data/app/assets/stylesheets/addons/_buttons.scss +64 -0
- data/app/assets/stylesheets/addons/_clearfix.scss +17 -10
- data/app/assets/stylesheets/addons/_ellipsis.scss +22 -0
- data/app/assets/stylesheets/addons/{_font-family.scss → _font-stacks.scss} +26 -0
- data/app/assets/stylesheets/addons/_hide-text.scss +23 -8
- data/app/assets/stylesheets/addons/_margin.scss +26 -0
- data/app/assets/stylesheets/addons/_padding.scss +26 -0
- data/app/assets/stylesheets/addons/_position.scss +24 -2
- data/app/assets/stylesheets/addons/_prefixer.scss +36 -15
- data/app/assets/stylesheets/addons/_size.scss +30 -1
- data/app/assets/stylesheets/addons/_text-inputs.scss +112 -0
- data/app/assets/stylesheets/addons/_timing-functions.scss +7 -5
- data/app/assets/stylesheets/addons/_triangle.scss +11 -11
- data/app/assets/stylesheets/addons/_word-wrap.scss +19 -0
- data/app/assets/stylesheets/css3/_animation.scss +14 -23
- data/app/assets/stylesheets/css3/_appearance.scss +1 -1
- data/app/assets/stylesheets/css3/_backface-visibility.scss +0 -3
- data/app/assets/stylesheets/css3/_background-image.scss +1 -1
- data/app/assets/stylesheets/css3/_background.scss +3 -3
- data/app/assets/stylesheets/css3/_border-image.scss +3 -3
- data/app/assets/stylesheets/css3/_calc.scss +1 -1
- data/app/assets/stylesheets/css3/_columns.scss +8 -8
- data/app/assets/stylesheets/css3/_filter.scss +0 -1
- data/app/assets/stylesheets/css3/_flex-box.scss +16 -47
- data/app/assets/stylesheets/css3/_font-feature-settings.scss +1 -7
- data/app/assets/stylesheets/css3/_hyphens.scss +2 -2
- data/app/assets/stylesheets/css3/_image-rendering.scss +6 -6
- data/app/assets/stylesheets/css3/_keyframes.scss +1 -0
- data/app/assets/stylesheets/css3/_linear-gradient.scss +11 -11
- data/app/assets/stylesheets/css3/_radial-gradient.scss +14 -14
- data/app/assets/stylesheets/css3/_selection.scss +39 -11
- data/app/assets/stylesheets/css3/_transform.scss +5 -5
- data/app/assets/stylesheets/css3/_transition.scss +17 -23
- data/app/assets/stylesheets/css3/_user-select.scss +2 -2
- data/app/assets/stylesheets/functions/{_assign.scss → _assign-inputs.scss} +2 -2
- data/app/assets/stylesheets/functions/_contains-falsy.scss +20 -0
- data/app/assets/stylesheets/functions/_contains.scss +16 -2
- data/app/assets/stylesheets/functions/_is-length.scss +5 -1
- data/app/assets/stylesheets/functions/_is-light.scss +21 -0
- data/app/assets/stylesheets/functions/_is-number.scss +11 -0
- data/app/assets/stylesheets/functions/_is-size.scss +8 -1
- data/app/assets/stylesheets/functions/_px-to-em.scss +2 -2
- data/app/assets/stylesheets/functions/_px-to-rem.scss +2 -2
- data/app/assets/stylesheets/functions/_shade.scss +24 -0
- data/app/assets/stylesheets/functions/_strip-units.scss +15 -3
- data/app/assets/stylesheets/functions/_tint.scss +24 -0
- data/app/assets/stylesheets/functions/_transition-property-name.scss +14 -14
- data/app/assets/stylesheets/functions/_unpack.scss +18 -8
- data/app/assets/stylesheets/helpers/_convert-units.scss +2 -2
- data/app/assets/stylesheets/helpers/_directional-values.scss +96 -0
- data/app/assets/stylesheets/helpers/_font-source-declaration.scss +2 -1
- data/app/assets/stylesheets/helpers/_linear-gradient-parser.scss +1 -1
- data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +1 -1
- data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +10 -10
- data/app/assets/stylesheets/helpers/_radial-gradient-parser.scss +4 -4
- data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +2 -2
- data/app/assets/stylesheets/helpers/_str-to-num.scss +3 -3
- data/app/assets/stylesheets/settings/_asset-pipeline.scss +6 -0
- data/app/assets/stylesheets/settings/_prefixer.scss +5 -2
- data/bourbon.gemspec +4 -2
- data/bower.json +8 -6
- data/lib/bourbon/version.rb +1 -1
- data/package.json +1 -1
- data/spec/bourbon/functions/assign_inputs_spec.rb +50 -0
- data/spec/bourbon/functions/contains_spec.rb +27 -0
- data/spec/bourbon/functions/is_length_spec.rb +49 -0
- data/spec/bourbon/functions/is_light_spec.rb +37 -0
- data/spec/bourbon/functions/is_number_spec.rb +43 -0
- data/spec/bourbon/functions/is_size_spec.rb +43 -0
- data/spec/bourbon/functions/modular_scale_spec.rb +43 -0
- data/spec/bourbon/functions/px_to_em_spec.rb +31 -0
- data/spec/fixtures/_setup.scss +1 -0
- data/spec/fixtures/functions/assign-inputs.scss +19 -0
- data/spec/fixtures/functions/contains.scss +28 -0
- data/spec/fixtures/functions/is-length.scss +35 -0
- data/spec/fixtures/functions/is-light.scss +29 -0
- data/spec/fixtures/functions/is-number.scss +31 -0
- data/spec/fixtures/functions/is-size.scss +31 -0
- data/spec/fixtures/functions/modular-scale.scss +29 -0
- data/spec/fixtures/functions/px-to-em.scss +17 -0
- data/spec/spec_helper.rb +22 -0
- data/spec/support/matchers/be_contained_in.rb +10 -0
- data/spec/support/matchers/have_rule.rb +35 -0
- data/spec/support/matchers/have_value.rb +15 -0
- data/spec/support/parser_support.rb +16 -0
- data/spec/support/sass_support.rb +10 -0
- metadata +102 -19
- data/app/assets/stylesheets/addons/_directional-values.scss +0 -111
- data/app/assets/stylesheets/addons/_html5-input-types.scss +0 -90
- data/app/assets/stylesheets/css3/_border-radius.scss +0 -22
- data/app/assets/stylesheets/css3/_box-sizing.scss +0 -4
- data/app/assets/stylesheets/functions/_color-lightness.scss +0 -13
- data/app/assets/stylesheets/functions/_tint-shade.scss +0 -9
- data/app/assets/stylesheets/helpers/_is-num.scss +0 -5
@@ -1,111 +0,0 @@
|
|
1
|
-
// directional-property mixins are shorthands
|
2
|
-
// for writing properties like the following
|
3
|
-
//
|
4
|
-
// @include margin(null 0 10px);
|
5
|
-
// ------
|
6
|
-
// margin-right: 0;
|
7
|
-
// margin-bottom: 10px;
|
8
|
-
// margin-left: 0;
|
9
|
-
//
|
10
|
-
// - or -
|
11
|
-
//
|
12
|
-
// @include border-style(dotted null);
|
13
|
-
// ------
|
14
|
-
// border-top-style: dotted;
|
15
|
-
// border-bottom-style: dotted;
|
16
|
-
//
|
17
|
-
// ------
|
18
|
-
//
|
19
|
-
// Note: You can also use false instead of null
|
20
|
-
|
21
|
-
@function collapse-directionals($vals) {
|
22
|
-
$output: null;
|
23
|
-
|
24
|
-
$A: nth( $vals, 1 );
|
25
|
-
$B: if( length($vals) < 2, $A, nth($vals, 2));
|
26
|
-
$C: if( length($vals) < 3, $A, nth($vals, 3));
|
27
|
-
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
|
28
|
-
|
29
|
-
@if $A == 0 { $A: 0 }
|
30
|
-
@if $B == 0 { $B: 0 }
|
31
|
-
@if $C == 0 { $C: 0 }
|
32
|
-
@if $D == 0 { $D: 0 }
|
33
|
-
|
34
|
-
@if $A == $B and $A == $C and $A == $D { $output: $A }
|
35
|
-
@else if $A == $C and $B == $D { $output: $A $B }
|
36
|
-
@else if $B == $D { $output: $A $B $C }
|
37
|
-
@else { $output: $A $B $C $D }
|
38
|
-
|
39
|
-
@return $output;
|
40
|
-
}
|
41
|
-
|
42
|
-
@function contains-falsy($list) {
|
43
|
-
@each $item in $list {
|
44
|
-
@if not $item {
|
45
|
-
@return true;
|
46
|
-
}
|
47
|
-
}
|
48
|
-
|
49
|
-
@return false;
|
50
|
-
}
|
51
|
-
|
52
|
-
@mixin directional-property($pre, $suf, $vals) {
|
53
|
-
// Property Names
|
54
|
-
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
|
55
|
-
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
|
56
|
-
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
|
57
|
-
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
58
|
-
$all: $pre + if($suf, "-#{$suf}", "");
|
59
|
-
|
60
|
-
$vals: collapse-directionals($vals);
|
61
|
-
|
62
|
-
@if contains-falsy($vals) {
|
63
|
-
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
|
64
|
-
|
65
|
-
@if length($vals) == 1 {
|
66
|
-
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
|
67
|
-
} @else {
|
68
|
-
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
|
69
|
-
}
|
70
|
-
|
71
|
-
// prop: top/bottom right/left
|
72
|
-
@if length($vals) == 2 {
|
73
|
-
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
|
74
|
-
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
75
|
-
|
76
|
-
// prop: top right/left bottom
|
77
|
-
} @else if length($vals) == 3 {
|
78
|
-
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
79
|
-
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
80
|
-
|
81
|
-
// prop: top right bottom left
|
82
|
-
} @else if length($vals) == 4 {
|
83
|
-
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
84
|
-
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
|
85
|
-
}
|
86
|
-
|
87
|
-
// prop: top/right/bottom/left
|
88
|
-
} @else {
|
89
|
-
#{$all}: $vals;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
@mixin margin($vals...) {
|
94
|
-
@include directional-property(margin, false, $vals...);
|
95
|
-
}
|
96
|
-
|
97
|
-
@mixin padding($vals...) {
|
98
|
-
@include directional-property(padding, false, $vals...);
|
99
|
-
}
|
100
|
-
|
101
|
-
@mixin border-style($vals...) {
|
102
|
-
@include directional-property(border, style, $vals...);
|
103
|
-
}
|
104
|
-
|
105
|
-
@mixin border-color($vals...) {
|
106
|
-
@include directional-property(border, color, $vals...);
|
107
|
-
}
|
108
|
-
|
109
|
-
@mixin border-width($vals...) {
|
110
|
-
@include directional-property(border, width, $vals...);
|
111
|
-
}
|
@@ -1,90 +0,0 @@
|
|
1
|
-
//************************************************************************//
|
2
|
-
// Generate a variable ($all-text-inputs) with a list of all html5
|
3
|
-
// input types that have a text-based input, excluding textarea.
|
4
|
-
// http://diveintohtml5.org/forms.html
|
5
|
-
//************************************************************************//
|
6
|
-
$inputs-list: 'input[type="email"]',
|
7
|
-
'input[type="number"]',
|
8
|
-
'input[type="password"]',
|
9
|
-
'input[type="search"]',
|
10
|
-
'input[type="tel"]',
|
11
|
-
'input[type="text"]',
|
12
|
-
'input[type="url"]',
|
13
|
-
|
14
|
-
// Webkit & Gecko may change the display of these in the future
|
15
|
-
'input[type="color"]',
|
16
|
-
'input[type="date"]',
|
17
|
-
'input[type="datetime"]',
|
18
|
-
'input[type="datetime-local"]',
|
19
|
-
'input[type="month"]',
|
20
|
-
'input[type="time"]',
|
21
|
-
'input[type="week"]';
|
22
|
-
|
23
|
-
// Bare inputs
|
24
|
-
//************************************************************************//
|
25
|
-
$all-text-inputs: assign-inputs($inputs-list);
|
26
|
-
|
27
|
-
// Hover Pseudo-class
|
28
|
-
//************************************************************************//
|
29
|
-
$all-text-inputs-hover: assign-inputs($inputs-list, hover);
|
30
|
-
|
31
|
-
// Focus Pseudo-class
|
32
|
-
//************************************************************************//
|
33
|
-
$all-text-inputs-focus: assign-inputs($inputs-list, focus);
|
34
|
-
|
35
|
-
// Active Pseudo-class
|
36
|
-
//************************************************************************//
|
37
|
-
$all-text-inputs-active: assign-inputs($inputs-list, active);
|
38
|
-
|
39
|
-
|
40
|
-
// You must use interpolation on the variable:
|
41
|
-
// #{$all-text-inputs}
|
42
|
-
// #{$all-text-inputs-hover}
|
43
|
-
// #{$all-text-inputs-focus}
|
44
|
-
// #{$all-text-inputs-active}
|
45
|
-
|
46
|
-
// Example
|
47
|
-
//************************************************************************//
|
48
|
-
// #{$all-text-inputs}, textarea {
|
49
|
-
// border: 1px solid red;
|
50
|
-
// }
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
//************************************************************************//
|
55
|
-
// Generate a variable ($all-button-inputs) with a list of all html5
|
56
|
-
// input types that have a button-based input, excluding button.
|
57
|
-
//************************************************************************//
|
58
|
-
$inputs-button-list: 'input[type="button"]',
|
59
|
-
'input[type="reset"]',
|
60
|
-
'input[type="submit"]';
|
61
|
-
|
62
|
-
// Bare inputs
|
63
|
-
//************************************************************************//
|
64
|
-
$all-button-inputs: assign-inputs($inputs-button-list);
|
65
|
-
|
66
|
-
// Hover Pseudo-class
|
67
|
-
//************************************************************************//
|
68
|
-
$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
|
69
|
-
|
70
|
-
// Focus Pseudo-class
|
71
|
-
//************************************************************************//
|
72
|
-
$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
|
73
|
-
|
74
|
-
// Active Pseudo-class
|
75
|
-
//************************************************************************//
|
76
|
-
$all-button-inputs-active: assign-inputs($inputs-button-list, active);
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
// You must use interpolation on the variable:
|
81
|
-
// #{$all-button-inputs}
|
82
|
-
// #{$all-button-inputs-hover}
|
83
|
-
// #{$all-button-inputs-focus}
|
84
|
-
// #{$all-button-inputs-active}
|
85
|
-
|
86
|
-
// Example
|
87
|
-
//************************************************************************//
|
88
|
-
// #{$all-button-inputs}, button {
|
89
|
-
// border: 1px solid red;
|
90
|
-
// }
|
@@ -1,22 +0,0 @@
|
|
1
|
-
// Border Radius (Shorthand)
|
2
|
-
// Provides a shorthand syntax to target and add border radii to both corners on one side of a box
|
3
|
-
|
4
|
-
@mixin border-top-radius($radii) {
|
5
|
-
border-top-left-radius: $radii;
|
6
|
-
border-top-right-radius: $radii;
|
7
|
-
}
|
8
|
-
|
9
|
-
@mixin border-right-radius($radii) {
|
10
|
-
border-bottom-right-radius: $radii;
|
11
|
-
border-top-right-radius: $radii;
|
12
|
-
}
|
13
|
-
|
14
|
-
@mixin border-bottom-radius($radii) {
|
15
|
-
border-bottom-left-radius: $radii;
|
16
|
-
border-bottom-right-radius: $radii;
|
17
|
-
}
|
18
|
-
|
19
|
-
@mixin border-left-radius($radii) {
|
20
|
-
border-bottom-left-radius: $radii;
|
21
|
-
border-top-left-radius: $radii;
|
22
|
-
}
|
@@ -1,13 +0,0 @@
|
|
1
|
-
// Programatically determines whether a color is light or dark
|
2
|
-
// Returns a boolean
|
3
|
-
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
|
4
|
-
|
5
|
-
@function is-light($hex-color) {
|
6
|
-
$-local-red: red(rgba($hex-color, 1.0));
|
7
|
-
$-local-green: green(rgba($hex-color, 1.0));
|
8
|
-
$-local-blue: blue(rgba($hex-color, 1.0));
|
9
|
-
|
10
|
-
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
|
11
|
-
|
12
|
-
@return $-local-lightness > .6;
|
13
|
-
}
|