bourbon-compass 3.0.1 → 3.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|