bourbon 2.1.0 → 2.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/app/assets/stylesheets/_bourbon.scss +1 -0
- data/app/assets/stylesheets/css3/_background.scss +107 -0
- data/app/assets/stylesheets/css3/_border-radius.scss +10 -8
- data/app/assets/stylesheets/css3/_box-shadow.scss +1 -1
- data/app/assets/stylesheets/css3/_transition.scss +1 -1
- data/lib/bourbon/version.rb +1 -1
- data/readme.md +1 -1
- metadata +9 -62
- data/_config.yml +0 -42
- data/_includes/animation.html +0 -20
- data/_includes/appearance.html +0 -8
- data/_includes/background-image.html +0 -36
- data/_includes/background-size.html +0 -12
- data/_includes/border-image.html +0 -11
- data/_includes/border-radius.html +0 -26
- data/_includes/box-shadow.html +0 -20
- data/_includes/box-sizing.html +0 -8
- data/_includes/buttons.html +0 -52
- data/_includes/clearfix.html +0 -11
- data/_includes/columns.html +0 -9
- data/_includes/compact.html +0 -9
- data/_includes/complete-list.html +0 -115
- data/_includes/flex-box.html +0 -23
- data/_includes/flex-grid.html +0 -28
- data/_includes/font-family.html +0 -21
- data/_includes/footer.html +0 -37
- data/_includes/golden-ratio.html +0 -16
- data/_includes/grid-width.html +0 -15
- data/_includes/hide-text.html +0 -12
- data/_includes/html5-input-types.html +0 -22
- data/_includes/inline-block.html +0 -8
- data/_includes/intro.html +0 -5
- data/_includes/linear-gradient-function.html +0 -21
- data/_includes/linear-gradient.html +0 -24
- data/_includes/modular-scale.html +0 -20
- data/_includes/navigation.html +0 -43
- data/_includes/position.html +0 -18
- data/_includes/radial-gradient-function.html +0 -24
- data/_includes/radial-gradient.html +0 -26
- data/_includes/timing-functions.html +0 -47
- data/_includes/tint-shade.html +0 -13
- data/_includes/transform-origin.html +0 -8
- data/_includes/transform.html +0 -10
- data/_includes/transitions.html +0 -9
- data/_includes/user-select.html +0 -8
- data/_site/images/border.png +0 -0
- data/_site/images/bourbon-logo.png +0 -0
- data/_site/index.html +0 -890
- data/_site/stylesheets/style.css +0 -1226
- data/doc/README.md +0 -36
- data/images/border.png +0 -0
- data/images/bourbon-logo.png +0 -0
- data/index.html +0 -80
- data/stylesheets/sass/_animation-keyframes.scss +0 -31
- data/stylesheets/sass/_base.scss +0 -304
- data/stylesheets/sass/_demos.scss +0 -198
- data/stylesheets/sass/_mixins.scss +0 -21
- data/stylesheets/sass/_normalize.scss +0 -264
- data/stylesheets/sass/_pygments-theme-dark.scss +0 -38
- data/stylesheets/sass/_pygments-theme-light.scss +0 -37
- data/stylesheets/sass/style.scss +0 -10
- data/stylesheets/style.css +0 -1226
@@ -0,0 +1,107 @@
|
|
1
|
+
//************************************************************************//
|
2
|
+
// Background property for adding multiple backgrounds using shorthand
|
3
|
+
// notation.
|
4
|
+
//************************************************************************//
|
5
|
+
|
6
|
+
@mixin background(
|
7
|
+
$background-1 , $background-2: false,
|
8
|
+
$background-3: false, $background-4: false,
|
9
|
+
$background-5: false, $background-6: false,
|
10
|
+
$background-7: false, $background-8: false,
|
11
|
+
$background-9: false, $background-10: false,
|
12
|
+
$fallback: false
|
13
|
+
) {
|
14
|
+
$backgrounds: compact($background-1, $background-2,
|
15
|
+
$background-3, $background-4,
|
16
|
+
$background-5, $background-6,
|
17
|
+
$background-7, $background-8,
|
18
|
+
$background-9, $background-10);
|
19
|
+
|
20
|
+
$fallback-color: false;
|
21
|
+
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
22
|
+
$fallback-color: $fallback;
|
23
|
+
}
|
24
|
+
@else {
|
25
|
+
$fallback-color: extract-background-color($backgrounds);
|
26
|
+
}
|
27
|
+
|
28
|
+
@if $fallback-color {
|
29
|
+
background-color: $fallback-color;
|
30
|
+
}
|
31
|
+
background: background-add-prefix($backgrounds, webkit);
|
32
|
+
background: background-add-prefix($backgrounds, moz);
|
33
|
+
background: background-add-prefix($backgrounds, ms);
|
34
|
+
background: background-add-prefix($backgrounds, o);
|
35
|
+
background: background-add-prefix($backgrounds);
|
36
|
+
}
|
37
|
+
|
38
|
+
@function extract-background-color($backgrounds) {
|
39
|
+
$final-bg-layer: nth($backgrounds, length($backgrounds));
|
40
|
+
@if type-of($final-bg-layer) == list {
|
41
|
+
@for $i from 1 through length($final-bg-layer) {
|
42
|
+
$value: nth($final-bg-layer, $i);
|
43
|
+
@if type-of($value) == color {
|
44
|
+
@return $value;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
@return false;
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
@function background-add-prefix($backgrounds, $vendor: false) {
|
53
|
+
$backgrounds-prefixed: ();
|
54
|
+
|
55
|
+
@for $i from 1 through length($backgrounds) {
|
56
|
+
$shorthand: nth($backgrounds, $i); // Get member for current index
|
57
|
+
$type: type-of($shorthand); // Get type of variable - List or String
|
58
|
+
|
59
|
+
// If shorthand is a list
|
60
|
+
@if $type == list {
|
61
|
+
$first-member: nth($shorthand, 1); // Get first member of shorthand
|
62
|
+
|
63
|
+
// Linear Gradient
|
64
|
+
@if index(linear radial, nth($first-member, 1)) {
|
65
|
+
$gradient-type: nth($first-member, 1); // linear || radial
|
66
|
+
|
67
|
+
// Get actual gradient (red, blue)
|
68
|
+
$gradient-args: false;
|
69
|
+
$shorthand-start: false;
|
70
|
+
// Linear gradient and positioning, repeat, etc. values
|
71
|
+
@if type-of($first-member) == list {
|
72
|
+
$gradient-args: nth($first-member, 2);
|
73
|
+
$shorthand-start: 2;
|
74
|
+
}
|
75
|
+
// Linear gradient only
|
76
|
+
@else {
|
77
|
+
$gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue)
|
78
|
+
$shorthand-start: 3;
|
79
|
+
}
|
80
|
+
|
81
|
+
$gradient: render-gradients($gradient-args, $gradient-type, $vendor);
|
82
|
+
@for $j from $shorthand-start through length($shorthand) {
|
83
|
+
$gradient: join($gradient, nth($shorthand, $j), space);
|
84
|
+
}
|
85
|
+
$backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
|
86
|
+
}
|
87
|
+
|
88
|
+
// Image with additional properties
|
89
|
+
@else {
|
90
|
+
$backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
|
91
|
+
}
|
92
|
+
|
93
|
+
}
|
94
|
+
|
95
|
+
// If shorthand is a simple string, color or image
|
96
|
+
@else if $type == string {
|
97
|
+
$backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
|
98
|
+
}
|
99
|
+
}
|
100
|
+
@return $backgrounds-prefixed;
|
101
|
+
}
|
102
|
+
|
103
|
+
//Examples:
|
104
|
+
//@include background(linear-gradient(top, orange, red));
|
105
|
+
//@include background(radial-gradient(50% 50%, cover circle, orange, red));
|
106
|
+
//@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
|
107
|
+
//@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
|
@@ -1,24 +1,26 @@
|
|
1
1
|
@mixin border-radius ($radii) {
|
2
|
-
@include prefixer(border-radius, $radii);
|
2
|
+
@include prefixer(border-radius, $radii, webkit, not moz);
|
3
|
+
@warn "border-radius mixin is deprecated and will be removed in the next major version release.";
|
3
4
|
}
|
4
5
|
|
5
6
|
@mixin border-top-left-radius($radii) {
|
6
|
-
-
|
7
|
-
@
|
7
|
+
@include prefixer(border-top-left-radius, $radii, webkit, not moz);
|
8
|
+
@warn "border-top-left-radius mixin is deprecated and will be removed in the next major version release.";
|
8
9
|
}
|
9
10
|
|
10
11
|
@mixin border-top-right-radius($radii) {
|
11
|
-
-
|
12
|
-
@
|
12
|
+
@include prefixer(border-top-right-radius, $radii, webkit, not moz);
|
13
|
+
@warn "border-top-right-radius mixin is deprecated and will be removed in the next major version release.";
|
13
14
|
}
|
14
15
|
|
15
16
|
@mixin border-bottom-left-radius($radii) {
|
16
|
-
-
|
17
|
-
@
|
17
|
+
@include prefixer(border-bottom-left-radius, $radii, webkit, not moz);
|
18
|
+
@warn "border-bottom-left-radius mixin is deprecated and will be removed in the next major version release.";
|
18
19
|
}
|
19
20
|
|
20
21
|
@mixin border-bottom-right-radius($radii) {
|
21
|
-
@include prefixer(border-bottom-right-radius, $radii);
|
22
|
+
@include prefixer(border-bottom-right-radius, $radii, webkit, not moz);
|
23
|
+
@warn "border-bottom-right-radius mixin is deprecated and will be removed in the next major version release.";
|
22
24
|
}
|
23
25
|
|
24
26
|
@mixin border-top-radius($radii) {
|
data/lib/bourbon/version.rb
CHANGED
data/readme.md
CHANGED
@@ -235,4 +235,4 @@ The names and logos for thoughtbot are trademarks of thoughtbot, inc.
|
|
235
235
|
License
|
236
236
|
-------
|
237
237
|
|
238
|
-
Bourbon is Copyright ©
|
238
|
+
Bourbon is Copyright © 2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bourbon
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.1.
|
4
|
+
version: 2.1.1
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -19,11 +19,11 @@ authors:
|
|
19
19
|
autorequire:
|
20
20
|
bindir: bin
|
21
21
|
cert_chain: []
|
22
|
-
date: 2012-
|
22
|
+
date: 2012-06-29 00:00:00.000000000 Z
|
23
23
|
dependencies:
|
24
24
|
- !ruby/object:Gem::Dependency
|
25
25
|
name: sass
|
26
|
-
requirement: &
|
26
|
+
requirement: &70123579816480 !ruby/object:Gem::Requirement
|
27
27
|
none: false
|
28
28
|
requirements:
|
29
29
|
- - ! '>='
|
@@ -31,10 +31,10 @@ dependencies:
|
|
31
31
|
version: '3.1'
|
32
32
|
type: :runtime
|
33
33
|
prerelease: false
|
34
|
-
version_requirements: *
|
34
|
+
version_requirements: *70123579816480
|
35
35
|
- !ruby/object:Gem::Dependency
|
36
36
|
name: aruba
|
37
|
-
requirement: &
|
37
|
+
requirement: &70123579815840 !ruby/object:Gem::Requirement
|
38
38
|
none: false
|
39
39
|
requirements:
|
40
40
|
- - ~>
|
@@ -42,10 +42,10 @@ dependencies:
|
|
42
42
|
version: '0.4'
|
43
43
|
type: :development
|
44
44
|
prerelease: false
|
45
|
-
version_requirements: *
|
45
|
+
version_requirements: *70123579815840
|
46
46
|
- !ruby/object:Gem::Dependency
|
47
47
|
name: rake
|
48
|
-
requirement: &
|
48
|
+
requirement: &70123579815040 !ruby/object:Gem::Requirement
|
49
49
|
none: false
|
50
50
|
requirements:
|
51
51
|
- - ! '>='
|
@@ -53,7 +53,7 @@ dependencies:
|
|
53
53
|
version: '0'
|
54
54
|
type: :development
|
55
55
|
prerelease: false
|
56
|
-
version_requirements: *
|
56
|
+
version_requirements: *70123579815040
|
57
57
|
description: ! 'The purpose of Bourbon Vanilla Sass Mixins is to provide a comprehensive
|
58
58
|
framework of
|
59
59
|
|
@@ -80,47 +80,6 @@ files:
|
|
80
80
|
- Gemfile.lock
|
81
81
|
- LICENSE
|
82
82
|
- Rakefile
|
83
|
-
- _config.yml
|
84
|
-
- _includes/animation.html
|
85
|
-
- _includes/appearance.html
|
86
|
-
- _includes/background-image.html
|
87
|
-
- _includes/background-size.html
|
88
|
-
- _includes/border-image.html
|
89
|
-
- _includes/border-radius.html
|
90
|
-
- _includes/box-shadow.html
|
91
|
-
- _includes/box-sizing.html
|
92
|
-
- _includes/buttons.html
|
93
|
-
- _includes/clearfix.html
|
94
|
-
- _includes/columns.html
|
95
|
-
- _includes/compact.html
|
96
|
-
- _includes/complete-list.html
|
97
|
-
- _includes/flex-box.html
|
98
|
-
- _includes/flex-grid.html
|
99
|
-
- _includes/font-family.html
|
100
|
-
- _includes/footer.html
|
101
|
-
- _includes/golden-ratio.html
|
102
|
-
- _includes/grid-width.html
|
103
|
-
- _includes/hide-text.html
|
104
|
-
- _includes/html5-input-types.html
|
105
|
-
- _includes/inline-block.html
|
106
|
-
- _includes/intro.html
|
107
|
-
- _includes/linear-gradient-function.html
|
108
|
-
- _includes/linear-gradient.html
|
109
|
-
- _includes/modular-scale.html
|
110
|
-
- _includes/navigation.html
|
111
|
-
- _includes/position.html
|
112
|
-
- _includes/radial-gradient-function.html
|
113
|
-
- _includes/radial-gradient.html
|
114
|
-
- _includes/timing-functions.html
|
115
|
-
- _includes/tint-shade.html
|
116
|
-
- _includes/transform-origin.html
|
117
|
-
- _includes/transform.html
|
118
|
-
- _includes/transitions.html
|
119
|
-
- _includes/user-select.html
|
120
|
-
- _site/images/border.png
|
121
|
-
- _site/images/bourbon-logo.png
|
122
|
-
- _site/index.html
|
123
|
-
- _site/stylesheets/style.css
|
124
83
|
- app/assets/stylesheets/_bourbon.scss
|
125
84
|
- app/assets/stylesheets/addons/_button.scss
|
126
85
|
- app/assets/stylesheets/addons/_clearfix.scss
|
@@ -134,6 +93,7 @@ files:
|
|
134
93
|
- app/assets/stylesheets/css3/_appearance.scss
|
135
94
|
- app/assets/stylesheets/css3/_background-image.scss
|
136
95
|
- app/assets/stylesheets/css3/_background-size.scss
|
96
|
+
- app/assets/stylesheets/css3/_background.scss
|
137
97
|
- app/assets/stylesheets/css3/_border-image.scss
|
138
98
|
- app/assets/stylesheets/css3/_border-radius.scss
|
139
99
|
- app/assets/stylesheets/css3/_box-shadow.scss
|
@@ -158,15 +118,11 @@ files:
|
|
158
118
|
- app/assets/stylesheets/functions/_transition-property-name.scss
|
159
119
|
- bin/bourbon
|
160
120
|
- bourbon.gemspec
|
161
|
-
- doc/README.md
|
162
121
|
- features/install.feature
|
163
122
|
- features/step_definitions/bourbon_steps.rb
|
164
123
|
- features/support/bourbon_support.rb
|
165
124
|
- features/support/env.rb
|
166
125
|
- features/update.feature
|
167
|
-
- images/border.png
|
168
|
-
- images/bourbon-logo.png
|
169
|
-
- index.html
|
170
126
|
- lib/bourbon.rb
|
171
127
|
- lib/bourbon/engine.rb
|
172
128
|
- lib/bourbon/generator.rb
|
@@ -176,15 +132,6 @@ files:
|
|
176
132
|
- lib/bourbon/version.rb
|
177
133
|
- lib/tasks/install.rake
|
178
134
|
- readme.md
|
179
|
-
- stylesheets/sass/_animation-keyframes.scss
|
180
|
-
- stylesheets/sass/_base.scss
|
181
|
-
- stylesheets/sass/_demos.scss
|
182
|
-
- stylesheets/sass/_mixins.scss
|
183
|
-
- stylesheets/sass/_normalize.scss
|
184
|
-
- stylesheets/sass/_pygments-theme-dark.scss
|
185
|
-
- stylesheets/sass/_pygments-theme-light.scss
|
186
|
-
- stylesheets/sass/style.scss
|
187
|
-
- stylesheets/style.css
|
188
135
|
homepage: https://github.com/thoughtbot/bourbon
|
189
136
|
licenses: []
|
190
137
|
post_install_message:
|
data/_config.yml
DELETED
@@ -1,42 +0,0 @@
|
|
1
|
-
safe: false
|
2
|
-
auto: true
|
3
|
-
server: false
|
4
|
-
server_port: 4000
|
5
|
-
base-url: /
|
6
|
-
|
7
|
-
source: .
|
8
|
-
destination: ./_site
|
9
|
-
plugins: ./_plugins
|
10
|
-
exclude: ./app, ./doc, ./bourbon, ./demo, ./lib, sass, ./bourbon.gemspec, ./Gemfile, ./Gemfile.lock, ./generate-bourbon.sh, ./LICENSE, ./Rakefile, ./readme.md, ./features
|
11
|
-
|
12
|
-
future: true
|
13
|
-
lsi: false
|
14
|
-
pygments: true
|
15
|
-
markdown: maruku
|
16
|
-
permalink: date
|
17
|
-
|
18
|
-
maruku:
|
19
|
-
use_tex: false
|
20
|
-
use_divs: false
|
21
|
-
png_engine: blahtex
|
22
|
-
png_dir: images/latex
|
23
|
-
png_url: /images/latex
|
24
|
-
|
25
|
-
rdiscount:
|
26
|
-
extensions: []
|
27
|
-
|
28
|
-
kramdown:
|
29
|
-
auto_ids: true,
|
30
|
-
footnote_nr: 1
|
31
|
-
entity_output: as_char
|
32
|
-
toc_levels: 1..6
|
33
|
-
use_coderay: false
|
34
|
-
|
35
|
-
coderay:
|
36
|
-
coderay_wrap: div
|
37
|
-
coderay_line_numbers: inline
|
38
|
-
coderay_line_numbers_start: 1
|
39
|
-
coderay_tab_width: 4
|
40
|
-
coderay_bold_every: 10
|
41
|
-
coderay_css: style
|
42
|
-
|
data/_includes/animation.html
DELETED
@@ -1,20 +0,0 @@
|
|
1
|
-
<section id="animations">
|
2
|
-
<h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
|
3
|
-
<p>The animation mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.</p>
|
4
|
-
|
5
|
-
{% highlight scss %}
|
6
|
-
box:hover {
|
7
|
-
@include animation-name(scale, slide);
|
8
|
-
@include animation-duration(2s);
|
9
|
-
@include animation-timing-function(ease);
|
10
|
-
@include animation-iteration-count(infinite);
|
11
|
-
|
12
|
-
// Animation shorthand works the same as the CSS3 animation shorthand
|
13
|
-
@include animation(scale 1.0s ease-in, slide 2.0s ease);
|
14
|
-
}
|
15
|
-
{% endhighlight %}
|
16
|
-
<h3>Demo</h3>
|
17
|
-
<section class="demo">
|
18
|
-
<div id="run-demo" class="box"></div>
|
19
|
-
</section>
|
20
|
-
</section>
|
data/_includes/appearance.html
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
<section id="appearance">
|
2
|
-
<h2>Appearance <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_appearance.scss">View source</a></h2>
|
3
|
-
<p>The <code>appearance</code> CSS property is used to display an element using a platform-native styling based on the operating system's theme.</p>
|
4
|
-
|
5
|
-
{% highlight scss %}
|
6
|
-
@include appearance(none);
|
7
|
-
{% endhighlight %}
|
8
|
-
</section>
|
@@ -1,36 +0,0 @@
|
|
1
|
-
<section id="background-image">
|
2
|
-
<h2>Background Image <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-image.scss">View source</a></h2>
|
3
|
-
<p>The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10 background-images.</p>
|
4
|
-
<p>Use in combination with the <a href="#linear-gradient-function">linear-gradient function</a> and the <a href="#radial-gradient-function">radial-gradient function</a>.
|
5
|
-
|
6
|
-
{% highlight scss %}
|
7
|
-
// Multiple image assets
|
8
|
-
@include background-image(url("/images/a.png"), url("images/b.png"));
|
9
|
-
|
10
|
-
// Image asset with a linear-gradient
|
11
|
-
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
|
12
|
-
|
13
|
-
// Multiple linear-gradients - Demo
|
14
|
-
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
|
15
|
-
linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));
|
16
|
-
|
17
|
-
// NOT SUPPORTED - Multiple image assets with shorthand notation
|
18
|
-
@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
|
19
|
-
{% endhighlight %}
|
20
|
-
|
21
|
-
<h3>Demo</h3>
|
22
|
-
<section class="demo">
|
23
|
-
</section>
|
24
|
-
|
25
|
-
<h3>Note about shorthand notation</h3>
|
26
|
-
|
27
|
-
<p>All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:</p>
|
28
|
-
|
29
|
-
{% highlight scss %}
|
30
|
-
@include background-image(url("/images/a.png"), url("images/b.png"));
|
31
|
-
background-position: center top, center;
|
32
|
-
background-repeat: no-repeat, repeat-x;
|
33
|
-
{% endhighlight %}
|
34
|
-
|
35
|
-
</section>
|
36
|
-
|
@@ -1,12 +0,0 @@
|
|
1
|
-
<section id="background-size">
|
2
|
-
<h2>Background Size<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-size.scss">View source</a></h2>
|
3
|
-
<p>The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.</p>
|
4
|
-
|
5
|
-
{% highlight scss %}
|
6
|
-
@include background-size(50% 100%); // Single
|
7
|
-
@include background-size(50% 100%, 75% 100%); // Multiple
|
8
|
-
{% endhighlight %}
|
9
|
-
</section>
|
10
|
-
|
11
|
-
|
12
|
-
|