bourbon 3.2.0.beta.2 → 3.2.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.
- checksums.yaml +4 -4
- data/.npmignore +9 -0
- data/Gemfile.lock +3 -3
- data/app/assets/stylesheets/_bourbon.scss +5 -3
- data/app/assets/stylesheets/addons/_button.scss +142 -41
- data/app/assets/stylesheets/addons/_directional-values.scss +5 -8
- data/app/assets/stylesheets/addons/_html5-input-types.scss +39 -15
- data/app/assets/stylesheets/addons/_prefixer.scss +5 -5
- data/app/assets/stylesheets/addons/_triangle.scss +51 -13
- data/app/assets/stylesheets/addons/_word-wrap.scss +8 -0
- data/app/assets/stylesheets/css3/_columns.scss +1 -1
- data/app/assets/stylesheets/css3/_filter.scss +5 -0
- data/app/assets/stylesheets/css3/_font-feature-settings.scss +10 -0
- data/app/assets/stylesheets/css3/_image-rendering.scss +1 -0
- data/app/assets/stylesheets/css3/_keyframes.scss +9 -10
- data/app/assets/stylesheets/css3/_transition.scss +47 -4
- data/app/assets/stylesheets/functions/_color-lightness.scss +13 -0
- data/app/assets/stylesheets/functions/_modular-scale.scss +1 -1
- data/app/assets/stylesheets/functions/_px-to-rem.scss +15 -0
- data/bourbon.gemspec +2 -2
- data/bower.json +1 -0
- data/dist/_bourbon.scss +5 -2
- data/dist/addons/_button.scss +142 -41
- data/dist/addons/_directional-values.scss +5 -8
- data/dist/addons/_html5-input-types.scss +3 -3
- data/dist/addons/_triangle.scss +51 -13
- data/dist/addons/_word-wrap.scss +8 -0
- data/dist/css3/_columns.scss +1 -1
- data/dist/css3/_filter.scss +5 -0
- data/dist/css3/_font-feature-settings.scss +10 -0
- data/dist/css3/_image-rendering.scss +1 -0
- data/dist/css3/_keyframes.scss +6 -7
- data/dist/css3/_placeholder.scss +3 -24
- data/dist/css3/_transition.scss +47 -4
- data/dist/functions/_color-lightness.scss +13 -0
- data/dist/functions/_modular-scale.scss +1 -1
- data/dist/functions/_px-to-rem.scss +15 -0
- data/lib/bourbon/version.rb +1 -1
- data/package.json +24 -0
- data/readme.md +20 -21
- metadata +30 -20
- data/app/assets/stylesheets/addons/_rem.scss +0 -33
- data/app/assets/stylesheets/functions/_assign.scss +0 -11
- data/dist/addons/_rem.scss +0 -33
@@ -57,9 +57,6 @@
|
|
57
57
|
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
58
58
|
$all: $pre + if($suf, "-#{$suf}", "");
|
59
59
|
|
60
|
-
// Get list inside $vals (is there a better way?)
|
61
|
-
@each $val in $vals { $vals: $val; }
|
62
|
-
|
63
60
|
$vals: collapse-directionals($vals);
|
64
61
|
|
65
62
|
@if contains-falsy($vals) {
|
@@ -94,21 +91,21 @@
|
|
94
91
|
}
|
95
92
|
|
96
93
|
@mixin margin($vals...) {
|
97
|
-
@include directional-property(margin, false, $vals);
|
94
|
+
@include directional-property(margin, false, $vals...);
|
98
95
|
}
|
99
96
|
|
100
97
|
@mixin padding($vals...) {
|
101
|
-
@include directional-property(padding, false, $vals);
|
98
|
+
@include directional-property(padding, false, $vals...);
|
102
99
|
}
|
103
100
|
|
104
101
|
@mixin border-style($vals...) {
|
105
|
-
@include directional-property(border, style, $vals);
|
102
|
+
@include directional-property(border, style, $vals...);
|
106
103
|
}
|
107
104
|
|
108
105
|
@mixin border-color($vals...) {
|
109
|
-
@include directional-property(border, color, $vals);
|
106
|
+
@include directional-property(border, color, $vals...);
|
110
107
|
}
|
111
108
|
|
112
109
|
@mixin border-width($vals...) {
|
113
|
-
@include directional-property(border, width, $vals);
|
110
|
+
@include directional-property(border, width, $vals...);
|
114
111
|
}
|
@@ -22,7 +22,7 @@ $inputs-list: 'input[type="email"]',
|
|
22
22
|
|
23
23
|
$unquoted-inputs-list: ();
|
24
24
|
@each $input-type in $inputs-list {
|
25
|
-
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma)
|
25
|
+
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
|
26
26
|
}
|
27
27
|
|
28
28
|
$all-text-inputs: $unquoted-inputs-list;
|
@@ -33,7 +33,7 @@ $all-text-inputs: $unquoted-inputs-list;
|
|
33
33
|
$all-text-inputs-hover: ();
|
34
34
|
@each $input-type in $unquoted-inputs-list {
|
35
35
|
$input-type-hover: $input-type + ":hover";
|
36
|
-
$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma)
|
36
|
+
$all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
|
37
37
|
}
|
38
38
|
|
39
39
|
// Focus Pseudo-class
|
@@ -41,7 +41,7 @@ $all-text-inputs-hover: ();
|
|
41
41
|
$all-text-inputs-focus: ();
|
42
42
|
@each $input-type in $unquoted-inputs-list {
|
43
43
|
$input-type-focus: $input-type + ":focus";
|
44
|
-
$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma)
|
44
|
+
$all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
|
45
45
|
}
|
46
46
|
|
47
47
|
// You must use interpolation on the variable:
|
data/dist/addons/_triangle.scss
CHANGED
@@ -2,44 +2,82 @@
|
|
2
2
|
height: 0;
|
3
3
|
width: 0;
|
4
4
|
|
5
|
+
$width: nth($size, 1);
|
6
|
+
$height: nth($size, length($size));
|
7
|
+
|
8
|
+
$foreground-color: nth($color, 1);
|
9
|
+
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
10
|
+
|
5
11
|
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
6
|
-
|
7
|
-
|
8
|
-
|
12
|
+
|
13
|
+
$width: $width / 2;
|
14
|
+
$height: if(length($size) > 1, $height, $height/2);
|
9
15
|
|
10
16
|
@if $direction == up {
|
11
|
-
border-
|
17
|
+
border-left: $width solid $background-color;
|
18
|
+
border-right: $width solid $background-color;
|
19
|
+
border-bottom: $height solid $foreground-color;
|
12
20
|
|
13
21
|
} @else if $direction == right {
|
14
|
-
border-
|
22
|
+
border-top: $width solid $background-color;
|
23
|
+
border-bottom: $width solid $background-color;
|
24
|
+
border-left: $height solid $foreground-color;
|
15
25
|
|
16
26
|
} @else if $direction == down {
|
17
|
-
border-
|
27
|
+
border-left: $width solid $background-color;
|
28
|
+
border-right: $width solid $background-color;
|
29
|
+
border-top: $height solid $foreground-color;
|
18
30
|
|
19
31
|
} @else if $direction == left {
|
20
|
-
border-
|
32
|
+
border-top: $width solid $background-color;
|
33
|
+
border-bottom: $width solid $background-color;
|
34
|
+
border-right: $height solid $foreground-color;
|
21
35
|
}
|
22
36
|
}
|
23
37
|
|
24
38
|
@else if ($direction == up-right) or ($direction == up-left) {
|
25
|
-
border-top: $
|
39
|
+
border-top: $height solid $foreground-color;
|
26
40
|
|
27
41
|
@if $direction == up-right {
|
28
|
-
border-left: $
|
42
|
+
border-left: $width solid $background-color;
|
29
43
|
|
30
44
|
} @else if $direction == up-left {
|
31
|
-
border-right: $
|
45
|
+
border-right: $width solid $background-color;
|
32
46
|
}
|
33
47
|
}
|
34
48
|
|
35
49
|
@else if ($direction == down-right) or ($direction == down-left) {
|
36
|
-
border-bottom: $
|
50
|
+
border-bottom: $height solid $foreground-color;
|
37
51
|
|
38
52
|
@if $direction == down-right {
|
39
|
-
border-left: $
|
53
|
+
border-left: $width solid $background-color;
|
40
54
|
|
41
55
|
} @else if $direction == down-left {
|
42
|
-
border-right: $
|
56
|
+
border-right: $width solid $background-color;
|
43
57
|
}
|
44
58
|
}
|
59
|
+
|
60
|
+
@else if ($direction == inset-up) {
|
61
|
+
border-width: $height $width;
|
62
|
+
border-style: solid;
|
63
|
+
border-color: $background-color $background-color $foreground-color;
|
64
|
+
}
|
65
|
+
|
66
|
+
@else if ($direction == inset-down) {
|
67
|
+
border-width: $height $width;
|
68
|
+
border-style: solid;
|
69
|
+
border-color: $foreground-color $background-color $background-color;
|
70
|
+
}
|
71
|
+
|
72
|
+
@else if ($direction == inset-right) {
|
73
|
+
border-width: $width $height;
|
74
|
+
border-style: solid;
|
75
|
+
border-color: $background-color $background-color $background-color $foreground-color;
|
76
|
+
}
|
77
|
+
|
78
|
+
@else if ($direction == inset-left) {
|
79
|
+
border-width: $width $height;
|
80
|
+
border-style: solid;
|
81
|
+
border-color: $background-color $foreground-color $background-color $background-color;
|
82
|
+
}
|
45
83
|
}
|
data/dist/css3/_columns.scss
CHANGED
@@ -0,0 +1,10 @@
|
|
1
|
+
// Font feature settings mixin and property default.
|
2
|
+
// Examples: @include font-feature-settings("liga");
|
3
|
+
// @include font-feature-settings("lnum" false);
|
4
|
+
// @include font-feature-settings("pnum" 1, "kern" 0);
|
5
|
+
// @include font-feature-settings("ss01", "ss02");
|
6
|
+
|
7
|
+
@mixin font-feature-settings($settings...) {
|
8
|
+
@if length($settings) == 0 { $settings: none; }
|
9
|
+
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
|
10
|
+
}
|
data/dist/css3/_keyframes.scss
CHANGED
@@ -20,17 +20,16 @@
|
|
20
20
|
@content;
|
21
21
|
}
|
22
22
|
}
|
23
|
-
@if $original-prefix-for-spec {
|
24
|
-
@include disable-prefix-for-all();
|
25
|
-
$prefix-for-spec: true;
|
26
|
-
@keyframes #{$name} {
|
27
|
-
@content;
|
28
|
-
}
|
29
|
-
}
|
30
23
|
|
31
24
|
$prefix-for-webkit: $original-prefix-for-webkit;
|
32
25
|
$prefix-for-mozilla: $original-prefix-for-mozilla;
|
33
26
|
$prefix-for-microsoft: $original-prefix-for-microsoft;
|
34
27
|
$prefix-for-opera: $original-prefix-for-opera;
|
35
28
|
$prefix-for-spec: $original-prefix-for-spec;
|
29
|
+
|
30
|
+
@if $original-prefix-for-spec {
|
31
|
+
@keyframes #{$name} {
|
32
|
+
@content;
|
33
|
+
}
|
34
|
+
}
|
36
35
|
}
|
data/dist/css3/_placeholder.scss
CHANGED
@@ -1,29 +1,8 @@
|
|
1
|
-
$placeholders: '-webkit-input-placeholder',
|
2
|
-
'-moz-placeholder',
|
3
|
-
'-ms-input-placeholder';
|
4
|
-
|
5
1
|
@mixin placeholder {
|
2
|
+
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
6
3
|
@each $placeholder in $placeholders {
|
7
|
-
|
8
|
-
|
9
|
-
@content;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
@else if $placeholder == "-moz-placeholder" {
|
13
|
-
// FF 18-
|
14
|
-
&:#{$placeholder} {
|
15
|
-
@content;
|
16
|
-
}
|
17
|
-
|
18
|
-
// FF 19+
|
19
|
-
&::#{$placeholder} {
|
20
|
-
@content;
|
21
|
-
}
|
22
|
-
}
|
23
|
-
@else {
|
24
|
-
&:#{$placeholder} {
|
25
|
-
@content;
|
26
|
-
}
|
4
|
+
&:#{$placeholder}-placeholder {
|
5
|
+
@content;
|
27
6
|
}
|
28
7
|
}
|
29
8
|
}
|
data/dist/css3/_transition.scss
CHANGED
@@ -4,13 +4,56 @@
|
|
4
4
|
// @include transition-property (transform, opacity);
|
5
5
|
|
6
6
|
@mixin transition ($properties...) {
|
7
|
-
|
8
|
-
|
7
|
+
// Fix for vendor-prefix transform property
|
8
|
+
$needs-prefixes: false;
|
9
|
+
$webkit: ();
|
10
|
+
$moz: ();
|
11
|
+
$spec: ();
|
12
|
+
|
13
|
+
// Create lists for vendor-prefixed transform
|
14
|
+
@each $list in $properties {
|
15
|
+
@if nth($list, 1) == "transform" {
|
16
|
+
$needs-prefixes: true;
|
17
|
+
$list1: -webkit-transform;
|
18
|
+
$list2: -moz-transform;
|
19
|
+
$list3: ();
|
20
|
+
|
21
|
+
@each $var in $list {
|
22
|
+
$list3: join($list3, $var);
|
23
|
+
|
24
|
+
@if $var != "transform" {
|
25
|
+
$list1: join($list1, $var);
|
26
|
+
$list2: join($list2, $var);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
$webkit: append($webkit, $list1);
|
31
|
+
$moz: append($moz, $list2);
|
32
|
+
$spec: append($spec, $list3);
|
33
|
+
}
|
34
|
+
|
35
|
+
// Create lists for non-prefixed transition properties
|
36
|
+
@else {
|
37
|
+
$webkit: append($webkit, $list, comma);
|
38
|
+
$moz: append($moz, $list, comma);
|
39
|
+
$spec: append($spec, $list, comma);
|
40
|
+
}
|
9
41
|
}
|
10
42
|
|
43
|
+
@if $needs-prefixes {
|
44
|
+
-webkit-transition: $webkit;
|
45
|
+
-moz-transition: $moz;
|
46
|
+
transition: $spec;
|
47
|
+
}
|
11
48
|
@else {
|
12
|
-
$properties
|
13
|
-
|
49
|
+
@if length($properties) >= 1 {
|
50
|
+
@include prefixer(transition, $properties, webkit moz spec);
|
51
|
+
}
|
52
|
+
|
53
|
+
@else {
|
54
|
+
$properties: all 0.15s ease-out 0s;
|
55
|
+
@include prefixer(transition, $properties, webkit moz spec);
|
56
|
+
}
|
14
57
|
}
|
15
58
|
}
|
16
59
|
|
@@ -0,0 +1,13 @@
|
|
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
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// Convert pixels to rems
|
2
|
+
// eg. for a relational value of 12px write rem(12)
|
3
|
+
// Assumes $em-base is the font-size of <html>
|
4
|
+
|
5
|
+
@function rem($pxval) {
|
6
|
+
@if not unitless($pxval) {
|
7
|
+
$pxval: strip-units($pxval);
|
8
|
+
}
|
9
|
+
|
10
|
+
$base: $em-base;
|
11
|
+
@if not unitless($base) {
|
12
|
+
$base: strip-units($base);
|
13
|
+
}
|
14
|
+
@return ($pxval / $base) * 1rem;
|
15
|
+
}
|
data/lib/bourbon/version.rb
CHANGED
data/package.json
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
{
|
2
|
+
"name": "bourbon",
|
3
|
+
"version": "3.2.0",
|
4
|
+
"description": "A simple and lightweight mixin library for Sass.",
|
5
|
+
"main": "dist/_bourbon.scss",
|
6
|
+
"scripts": {
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
8
|
+
},
|
9
|
+
"repository": {
|
10
|
+
"type": "git",
|
11
|
+
"url": "https://github.com/thoughtbot/bourbon"
|
12
|
+
},
|
13
|
+
"keywords": [
|
14
|
+
"scss",
|
15
|
+
"css",
|
16
|
+
"mixins"
|
17
|
+
],
|
18
|
+
"author": "Thoughtbot",
|
19
|
+
"license": "MIT",
|
20
|
+
"bugs": {
|
21
|
+
"url": "https://github.com/thoughtbot/bourbon/issues"
|
22
|
+
},
|
23
|
+
"homepage": "https://github.com/thoughtbot/bourbon"
|
24
|
+
}
|
data/readme.md
CHANGED
@@ -1,22 +1,24 @@
|
|
1
|
-
[](https://codeclimate.com/github/thoughtbot/bourbon)
|
2
|
-
|
3
1
|
[](http://bourbon.io)
|
2
|
+
<br>
|
3
|
+
<br>
|
4
|
+
[](http://badge.fury.io/rb/bourbon) [](https://codeclimate.com/github/thoughtbot/bourbon) [](https://gitter.im/thoughtbot/bourbon)
|
5
|
+
|
6
|
+
## A lightweight mixin library for Sass
|
7
|
+
Bourbon is a library of pure sass mixins that are designed to be simple
|
8
|
+
and easy to use. No configuration required.
|
4
9
|
|
5
|
-
# A simple and lightweight mixin library for Sass
|
6
|
-
Bourbon is a comprehensive library of sass mixins that are designed to be simple
|
7
|
-
and easy to use. No configuration required.
|
8
10
|
The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
|
9
11
|
|
10
12
|
The mixins contain vendor specific prefixes for all CSS3 properties for support
|
11
13
|
amongst modern browsers. The prefixes also ensure graceful degradation for older
|
12
14
|
browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.
|
13
15
|
|
14
|
-
|
16
|
+
### [Documentation & Demo](http://bourbon.io)
|
15
17
|
|
16
|
-
|
18
|
+
### Requirements
|
17
19
|
Sass 3.2+
|
18
20
|
|
19
|
-
|
21
|
+
### Install for Rails 3.1+
|
20
22
|
In your Gemfile:
|
21
23
|
|
22
24
|
gem 'bourbon'
|
@@ -44,11 +46,11 @@ Import Bourbon at the beginning of application.css.scss. All additional styleshe
|
|
44
46
|
|
45
47
|
##### [Rails 3.0.x Install Instructions](https://github.com/thoughtbot/bourbon/wiki/Rails-3.0.x-Install) | [Rails 2.3 Install Instructions](https://github.com/thoughtbot/bourbon/wiki/Bourbon-v2.x-or-Rails-2.3-Install)
|
46
48
|
|
47
|
-
|
49
|
+
### Non-Rails projects
|
48
50
|
Bourbon includes an easy way to generate a directory with all the necessary files.
|
49
51
|
For command line help: `$ bourbon help` or visit the [Command line tools wiki](https://github.com/thoughtbot/bourbon/wiki/Command-Line-Tools)
|
50
52
|
|
51
|
-
|
53
|
+
##### Install (Bourbon v3.0+)
|
52
54
|
|
53
55
|
gem install bourbon
|
54
56
|
|
@@ -62,7 +64,7 @@ You can specify a target directory using the `path` flag:
|
|
62
64
|
|
63
65
|
bourbon install --path my/custom/path/
|
64
66
|
|
65
|
-
|
67
|
+
##### Import
|
66
68
|
|
67
69
|
Lastly, import the mixins at the beginning of your stylesheet(s):
|
68
70
|
|
@@ -70,7 +72,7 @@ Lastly, import the mixins at the beginning of your stylesheet(s):
|
|
70
72
|
|
71
73
|
Note: Bourbon no longer requires a custom `sass --watch` command for Bourbon v3.0+
|
72
74
|
|
73
|
-
|
75
|
+
##### Other Commands
|
74
76
|
Visit the [Command line tools wiki](https://github.com/thoughtbot/bourbon/wiki/Command-Line-Tools) for a complete list
|
75
77
|
|
76
78
|
bourbon help
|
@@ -78,15 +80,14 @@ Visit the [Command line tools wiki](https://github.com/thoughtbot/bourbon/wiki/C
|
|
78
80
|
|
79
81
|
##### [Bourbon v2.x install instructions](https://github.com/thoughtbot/bourbon/wiki/Bourbon-v2.x-or-Rails-2.3-Install)
|
80
82
|
|
81
|
-
-------
|
82
|
-
# [Changelog](https://github.com/thoughtbot/bourbon/wiki)
|
83
83
|
|
84
|
-
|
85
|
-
|
84
|
+
- [Changelog](https://github.com/thoughtbot/bourbon/wiki)
|
85
|
+
- [Browser support](https://github.com/thoughtbot/bourbon/wiki/Browser-Support)
|
86
86
|
|
87
|
-
|
88
|
-
|
87
|
+
### Chat with us
|
88
|
+
[](https://gitter.im/thoughtbot/bourbon)
|
89
89
|
|
90
|
+
### Credits
|
90
91
|

|
91
92
|
|
92
93
|
Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community)
|
@@ -95,7 +96,5 @@ The names and logos for thoughtbot are trademarks of thoughtbot, inc.
|
|
95
96
|
|
96
97
|
Got questions? Need help? Tweet at [@phillapier](http://twitter.com/phillapier).
|
97
98
|
|
98
|
-
License
|
99
|
-
-------
|
100
|
-
|
99
|
+
### License
|
101
100
|
Bourbon is Copyright © 2011-2013 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
|