bourbon-compass 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/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss +6 -1
- data/stylesheets/bourbon/_bourbon.scss +6 -1
- data/stylesheets/bourbon/addons/_prefixer.scss +19 -6
- data/stylesheets/bourbon/addons/_retina-image.scss +27 -0
- data/stylesheets/bourbon/addons/_size.scss +44 -0
- data/stylesheets/bourbon/addons/_triangle.scss +45 -0
- data/stylesheets/bourbon/css3/_font-face.scss +2 -0
- data/stylesheets/bourbon/css3/_keyframes.scss +51 -0
- data/stylesheets/bourbon/css3/_placeholder.scss +18 -0
- data/stylesheets/bourbon/functions/_flex-grid.scss +7 -3
- data/stylesheets/bourbon/functions/_px-to-em.scss +8 -0
- metadata +8 -3
- data/stylesheets/bourbon/css3/_box-shadow.scss +0 -3
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
//************************************************************************//
|
|
2
|
-
// These mixins/functions
|
|
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
|
-
|
|
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
|
+
}
|
|
@@ -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 /
|
|
23
|
-
// margin-left: flex-gutter(); // returns (25px /
|
|
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
|
+
// }
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bourbon-compass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.0
|
|
4
|
+
version: 3.1.0
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2013-02-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: compass
|
|
@@ -59,7 +59,10 @@ files:
|
|
|
59
59
|
- stylesheets/bourbon/addons/_html5-input-types.scss
|
|
60
60
|
- stylesheets/bourbon/addons/_position.scss
|
|
61
61
|
- stylesheets/bourbon/addons/_prefixer.scss
|
|
62
|
+
- stylesheets/bourbon/addons/_retina-image.scss
|
|
63
|
+
- stylesheets/bourbon/addons/_size.scss
|
|
62
64
|
- stylesheets/bourbon/addons/_timing-functions.scss
|
|
65
|
+
- stylesheets/bourbon/addons/_triangle.scss
|
|
63
66
|
- stylesheets/bourbon/css3/_animation.scss
|
|
64
67
|
- stylesheets/bourbon/css3/_appearance.scss
|
|
65
68
|
- stylesheets/bourbon/css3/_background-image.scss
|
|
@@ -67,7 +70,6 @@ files:
|
|
|
67
70
|
- stylesheets/bourbon/css3/_background.scss
|
|
68
71
|
- stylesheets/bourbon/css3/_border-image.scss
|
|
69
72
|
- stylesheets/bourbon/css3/_border-radius.scss
|
|
70
|
-
- stylesheets/bourbon/css3/_box-shadow.scss
|
|
71
73
|
- stylesheets/bourbon/css3/_box-sizing.scss
|
|
72
74
|
- stylesheets/bourbon/css3/_columns.scss
|
|
73
75
|
- stylesheets/bourbon/css3/_flex-box.scss
|
|
@@ -75,8 +77,10 @@ files:
|
|
|
75
77
|
- stylesheets/bourbon/css3/_hidpi-media-query.scss
|
|
76
78
|
- stylesheets/bourbon/css3/_image-rendering.scss
|
|
77
79
|
- stylesheets/bourbon/css3/_inline-block.scss
|
|
80
|
+
- stylesheets/bourbon/css3/_keyframes.scss
|
|
78
81
|
- stylesheets/bourbon/css3/_linear-gradient.scss
|
|
79
82
|
- stylesheets/bourbon/css3/_perspective.scss
|
|
83
|
+
- stylesheets/bourbon/css3/_placeholder.scss
|
|
80
84
|
- stylesheets/bourbon/css3/_radial-gradient.scss
|
|
81
85
|
- stylesheets/bourbon/css3/_transform.scss
|
|
82
86
|
- stylesheets/bourbon/css3/_transition.scss
|
|
@@ -87,6 +91,7 @@ files:
|
|
|
87
91
|
- stylesheets/bourbon/functions/_grid-width.scss
|
|
88
92
|
- stylesheets/bourbon/functions/_linear-gradient.scss
|
|
89
93
|
- stylesheets/bourbon/functions/_modular-scale.scss
|
|
94
|
+
- stylesheets/bourbon/functions/_px-to-em.scss
|
|
90
95
|
- stylesheets/bourbon/functions/_radial-gradient.scss
|
|
91
96
|
- stylesheets/bourbon/functions/_render-gradients.scss
|
|
92
97
|
- stylesheets/bourbon/functions/_tint-shade.scss
|