bourbon 2.0.0.rc1 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. data/_config.yml +42 -0
  2. data/_includes/animation.html +20 -0
  3. data/_includes/appearance.html +8 -0
  4. data/_includes/background-image.html +36 -0
  5. data/_includes/background-size.html +12 -0
  6. data/_includes/border-image.html +11 -0
  7. data/_includes/border-radius.html +26 -0
  8. data/_includes/box-shadow.html +20 -0
  9. data/_includes/box-sizing.html +8 -0
  10. data/_includes/buttons.html +52 -0
  11. data/_includes/clearfix.html +11 -0
  12. data/_includes/columns.html +9 -0
  13. data/_includes/compact.html +9 -0
  14. data/_includes/complete-list.html +115 -0
  15. data/_includes/flex-box.html +23 -0
  16. data/_includes/flex-grid.html +28 -0
  17. data/_includes/font-family.html +21 -0
  18. data/_includes/footer.html +37 -0
  19. data/_includes/golden-ratio.html +16 -0
  20. data/_includes/grid-width.html +15 -0
  21. data/_includes/hide-text.html +12 -0
  22. data/_includes/html5-input-types.html +22 -0
  23. data/_includes/inline-block.html +8 -0
  24. data/_includes/intro.html +5 -0
  25. data/_includes/linear-gradient-function.html +21 -0
  26. data/_includes/linear-gradient.html +24 -0
  27. data/_includes/modular-scale.html +20 -0
  28. data/_includes/navigation.html +43 -0
  29. data/_includes/position.html +18 -0
  30. data/_includes/radial-gradient-function.html +24 -0
  31. data/_includes/radial-gradient.html +26 -0
  32. data/_includes/timing-functions.html +47 -0
  33. data/_includes/tint-shade.html +13 -0
  34. data/_includes/transform-origin.html +8 -0
  35. data/_includes/transform.html +10 -0
  36. data/_includes/transitions.html +9 -0
  37. data/_includes/user-select.html +8 -0
  38. data/_site/images/border.png +0 -0
  39. data/_site/images/bourbon-logo.png +0 -0
  40. data/_site/index.html +890 -0
  41. data/_site/stylesheets/style.css +1226 -0
  42. data/app/assets/stylesheets/_bourbon.scss +4 -0
  43. data/app/assets/stylesheets/addons/_button.scss +11 -7
  44. data/app/assets/stylesheets/addons/_font-face.scss +12 -0
  45. data/app/assets/stylesheets/addons/_position.scss +42 -0
  46. data/app/assets/stylesheets/css3/_animation.scss +9 -27
  47. data/app/assets/stylesheets/css3/_appearance.scss +1 -5
  48. data/app/assets/stylesheets/css3/_background-size.scss +1 -5
  49. data/app/assets/stylesheets/css3/_border-radius.scss +8 -19
  50. data/app/assets/stylesheets/css3/_box-shadow.scss +1 -3
  51. data/app/assets/stylesheets/css3/_box-sizing.scss +1 -3
  52. data/app/assets/stylesheets/css3/_columns.scss +10 -30
  53. data/app/assets/stylesheets/css3/_flex-box.scss +11 -26
  54. data/app/assets/stylesheets/css3/_prefixer.scss +12 -0
  55. data/app/assets/stylesheets/css3/_transform.scss +2 -10
  56. data/app/assets/stylesheets/css3/_transition.scss +9 -25
  57. data/app/assets/stylesheets/css3/_user-select.scss +1 -4
  58. data/app/assets/stylesheets/functions/_transition-property-name.scss +22 -0
  59. data/doc/README.md +36 -0
  60. data/images/border.png +0 -0
  61. data/images/bourbon-logo.png +0 -0
  62. data/index.html +80 -0
  63. data/lib/bourbon/sass_extensions/functions/compact.rb +3 -2
  64. data/lib/bourbon/version.rb +1 -1
  65. data/readme.md +8 -8
  66. data/stylesheets/sass/_animation-keyframes.scss +31 -0
  67. data/stylesheets/sass/_base.scss +304 -0
  68. data/stylesheets/sass/_demos.scss +198 -0
  69. data/stylesheets/sass/_mixins.scss +21 -0
  70. data/stylesheets/sass/_normalize.scss +264 -0
  71. data/stylesheets/sass/_pygments-theme-dark.scss +38 -0
  72. data/stylesheets/sass/_pygments-theme-light.scss +37 -0
  73. data/stylesheets/sass/style.scss +10 -0
  74. data/stylesheets/style.css +1226 -0
  75. metadata +69 -11
data/_site/index.html ADDED
@@ -0,0 +1,890 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Bourbon Sass Mixins Library</title>
6
+ <link rel="stylesheet" href="stylesheets/style.css">
7
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
8
+ </head>
9
+ <body>
10
+ <div class="main-content">
11
+ <nav class="fixed-nav">
12
+ <ul>
13
+ <!-- <input type="search" placeholder="Search..."></input> -->
14
+ <li><a href="https://github.com/thoughtbot/bourbon">Github / Install</a></li>
15
+ <li class="title"><a href="#mixins"><h3>Mixins</h3></a></li>
16
+ <li><a href="#animations">Animations</a></li>
17
+ <li><a href="#appearance">Appearance</a></li>
18
+ <li><a href="#background-image">Background-image</a></li>
19
+ <li><a href="#background-size">Background-size</a></li>
20
+ <li><a href="#border-image">Border-image</a></li>
21
+ <li><a href="#border-radius">Border-radius</a></li>
22
+ <li><a href="#box-shadow">Box-shadow</a></li>
23
+ <li><a href="#box-sizing">Box-sizing</a></li>
24
+ <li><a href="#columns">Columns</a></li>
25
+ <li><a href="#flex-box">Flex Box</a></li>
26
+ <li><a href="#inline-block">Inline-block</a></li>
27
+ <li><a href="#linear-gradient">Linear-gradient</a></li>
28
+ <li><a href="#radial-gradient">Radial-gradient</a></li>
29
+ <li><a href="#transform">Transform</a></li>
30
+ <li><a href="#transitions">Transitions</a></li>
31
+ <li><a href="#user-select">User Select</a></li>
32
+
33
+ <li class="title"><a href="#functions"><h3>Functions</h3></a><li>
34
+ <li><a href="#compact">Compact</a></li>
35
+ <li><a href="#flex-grid">Flex Grid</a></li>
36
+ <li><a href="#golden-ratio">Golden Ratio</a></li>
37
+ <li><a href="#grid-width">Grid Width</a></li>
38
+ <li><a href="#linear-gradient-function">Linear-gradient</a></li>
39
+ <li><a href="#modular-scale">Modular Scale</a></li>
40
+ <li><a href="#radial-gradient-function">Radial-gradient</a></li>
41
+ <li><a href="#tint-shade">Tint &amp; Shade</a></li>
42
+
43
+ <li class="title"><a href="#add-ons"><h3>Add-ons</h3></a><li>
44
+ <li><a href="#buttons">Buttons</a></li>
45
+ <li><a href="#clearfix">Clearfix</a></li>
46
+ <li><a href="#font-family">Font Family</a></li>
47
+ <li><a href="#hide-text">Hide Text</a></li>
48
+ <li><a href="#html5-input-types">HTML5 Input Types</a></li>
49
+ <li><a href="#timing-functions">Timing Functions</a></li>
50
+
51
+ <li class="title complete-list"><a href="#complete-list"><h3>Complete List</h3></a><li>
52
+ </ul>
53
+ </nav>
54
+
55
+
56
+ <div class="main-inner">
57
+ <section class="intro-wrapper">
58
+ <h1 class="logo">Bourbon &ndash; Sass Mixin Library</h1>
59
+ <h2 class="tagline">A simple and lightweight mixin library for Sass.</h2>
60
+
61
+ <section id="intro">
62
+ <p>Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required.<br> The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.</p>
63
+ <p>The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.</p>
64
+ <p><a href="http://github.com/thoughtbot/bourbon#readme">Install Bourbon</a><a href="http://github.com/thoughtbot/bourbon">View on Github</a></p>
65
+ </section>
66
+
67
+ </section>
68
+
69
+ <section class="mixins">
70
+ <h1 id="mixins">Mixins</h1>
71
+ <section id="animations">
72
+ <h2>Animations <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_animation.scss">View source</a></h2>
73
+ <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>
74
+
75
+ <div class="highlight"><pre><code class="scss"><span class="nt">box</span><span class="nd">:hover</span> <span class="p">{</span>
76
+ <span class="k">@include</span><span class="nd"> animation-name</span><span class="p">(</span><span class="n">scale</span><span class="o">,</span> <span class="n">slide</span><span class="p">);</span>
77
+ <span class="k">@include</span><span class="nd"> animation-duration</span><span class="p">(</span><span class="mi">2</span><span class="kt">s</span><span class="p">);</span>
78
+ <span class="k">@include</span><span class="nd"> animation-timing-function</span><span class="p">(</span><span class="n">ease</span><span class="p">);</span>
79
+ <span class="k">@include</span><span class="nd"> animation-iteration-count</span><span class="p">(</span><span class="n">infinite</span><span class="p">);</span>
80
+
81
+ <span class="c1">// Animation shorthand works the same as the CSS3 animation shorthand</span>
82
+ <span class="k">@include</span><span class="nd"> animation</span><span class="p">(</span><span class="n">scale</span> <span class="mi">1</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span><span class="o">,</span> <span class="n">slide</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease</span><span class="p">);</span>
83
+ <span class="p">}</span>
84
+ </code></pre>
85
+ </div>
86
+
87
+ <h3>Demo</h3>
88
+ <section class="demo">
89
+ <div id="run-demo" class="box"></div>
90
+ </section>
91
+ </section>
92
+
93
+ <section id="appearance">
94
+ <h2>Appearance <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_appearance.scss">View source</a></h2>
95
+ <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>
96
+
97
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> appearance</span><span class="p">(</span><span class="no">none</span><span class="p">);</span>
98
+ </code></pre>
99
+ </div>
100
+
101
+ </section>
102
+
103
+ <section id="background-image">
104
+ <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>
105
+ <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>
106
+ <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>.
107
+
108
+ <div class="highlight"><pre><code class="scss"><span class="c1">// Multiple image assets</span>
109
+ <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span><span class="o">,</span> <span class="sx">url(&quot;images/b.png&quot;)</span><span class="p">);</span>
110
+
111
+ <span class="c1">// Image asset with a linear-gradient</span>
112
+ <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span><span class="o">,</span> <span class="nf">linear-gradient</span><span class="p">(</span><span class="nb">white</span> <span class="mi">0</span><span class="o">,</span> <span class="nb">yellow</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">));</span>
113
+
114
+ <span class="c1">// Multiple linear-gradients - Demo</span>
115
+ <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="nf">linear-gradient</span><span class="p">(</span><span class="nf">hsla</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.25</span><span class="p">)</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="nf">hsla</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.08</span><span class="p">)</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">)</span><span class="o">,</span>
116
+ <span class="nf">linear-gradient</span><span class="p">(</span><span class="mh">#4e7ba3</span><span class="o">,</span> <span class="nf">darken</span><span class="p">(</span><span class="mh">#4e7ba4</span><span class="o">,</span> <span class="mi">10</span><span class="kt">%</span><span class="p">)));</span>
117
+
118
+ <span class="c1">// NOT SUPPORTED - Multiple image assets with shorthand notation</span>
119
+ <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span> <span class="no">center</span> <span class="no">no-repeat</span><span class="o">,</span> <span class="sx">url(&quot;images/b.png&quot;)</span> <span class="no">left</span> <span class="no">repeat</span><span class="p">);</span>
120
+ </code></pre>
121
+ </div>
122
+
123
+
124
+ <h3>Demo</h3>
125
+ <section class="demo">
126
+ </section>
127
+
128
+ <h3>Note about shorthand notation</h3>
129
+
130
+ <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>
131
+
132
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="sx">url(&quot;/images/a.png&quot;)</span><span class="o">,</span> <span class="sx">url(&quot;images/b.png&quot;)</span><span class="p">);</span>
133
+ <span class="na">background-position</span><span class="o">:</span> <span class="no">center</span> <span class="no">top</span><span class="o">,</span> <span class="no">center</span><span class="p">;</span>
134
+ <span class="na">background-repeat</span><span class="o">:</span> <span class="no">no-repeat</span><span class="o">,</span> <span class="no">repeat-x</span><span class="p">;</span>
135
+ </code></pre>
136
+ </div>
137
+
138
+
139
+ </section>
140
+
141
+
142
+ <section id="background-size">
143
+ <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>
144
+ <p>The background-size mixin supports multiple background-sizes for use with multiple background-images via comma delimitation.</p>
145
+
146
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-size</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span> <span class="c1">// Single</span>
147
+ <span class="k">@include</span><span class="nd"> background-size</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="o">,</span> <span class="mi">75</span><span class="kt">%</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span> <span class="c1">// Multiple</span>
148
+ </code></pre>
149
+ </div>
150
+
151
+ </section>
152
+
153
+
154
+
155
+
156
+ <section id="border-image">
157
+ <h2>Border Image<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-image.scss">View source</a></h2>
158
+ <p>Border-image supports short-hand notation.</p>
159
+
160
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-image</span><span class="p">(</span><span class="sx">url(/images/border.png)</span> <span class="mi">27</span> <span class="no">repeat</span><span class="p">);</span>
161
+ </code></pre>
162
+ </div>
163
+
164
+ <h3>Demo</h3>
165
+ <section class="demo">
166
+ </section>
167
+ </section>
168
+
169
+ <section id="border-radius">
170
+ <h2>Border Radius <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-radius.scss">View source</a></h2>
171
+
172
+ <p>The border-radius mixin can take short-hand notation or the full radius expression.</p>
173
+
174
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">10</span><span class="kt">px</span><span class="p">);</span>
175
+ <span class="k">@include</span><span class="nd"> border-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span> <span class="mi">2</span><span class="kt">px</span><span class="p">);</span>
176
+ </code></pre>
177
+ </div>
178
+
179
+
180
+ <p>You can also specify individual corners.</p>
181
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-top-left-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
182
+ <span class="k">@include</span><span class="nd"> border-top-right-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
183
+ <span class="k">@include</span><span class="nd"> border-bottom-right-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
184
+ <span class="k">@include</span><span class="nd"> border-bottom-left-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
185
+ </code></pre>
186
+ </div>
187
+
188
+
189
+ <p>Individual sides are supported as well.</p>
190
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> border-top-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
191
+ <span class="k">@include</span><span class="nd"> border-bottom-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
192
+ <span class="k">@include</span><span class="nd"> border-left-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
193
+ <span class="k">@include</span><span class="nd"> border-right-radius</span><span class="p">(</span><span class="mi">5</span><span class="kt">px</span><span class="p">);</span>
194
+ </code></pre>
195
+ </div>
196
+
197
+ </section>
198
+
199
+ <section id="box-shadow">
200
+ <h2>Box Shadow<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-shadow.scss">View source</a></h2>
201
+ <p>Box-shadow supports single or multiple arguments.</p>
202
+
203
+ <h3>Single Box Shadow</h3>
204
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="mi">0</span> <span class="mi">0</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">3</span><span class="kt">px</span> <span class="nf">hsla</span><span class="p">(</span><span class="mi">0</span><span class="o">,</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mi">0</span><span class="mf">.65</span><span class="p">));</span>
205
+ </code></pre>
206
+ </div>
207
+
208
+ <section class="demo">
209
+ <div class="example single"></div>
210
+ </section>
211
+
212
+ <h3>Multiple Box Shadows</h3>
213
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> box-shadow</span><span class="p">(</span><span class="mi">1</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="nb">green</span><span class="o">,</span> <span class="mi">-1</span><span class="kt">px</span> <span class="mi">-1</span><span class="kt">px</span> <span class="mi">5</span><span class="kt">px</span> <span class="mi">1</span><span class="kt">px</span> <span class="nb">blue</span><span class="p">);</span>
214
+ </code></pre>
215
+ </div>
216
+
217
+ <section class="demo">
218
+ <div class="example double"></div>
219
+ </section>
220
+ </section>
221
+
222
+ <section id="box-sizing">
223
+ <h2>Box Sizing<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_box-sizing.scss">View source</a></h2>
224
+ <p>Box-sizing will change the box-model of the element it is applied to.</p>
225
+
226
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> box-sizing</span><span class="p">(</span><span class="no">border</span><span class="o">-</span><span class="n">box</span><span class="p">);</span>
227
+ </code></pre>
228
+ </div>
229
+
230
+ </section>
231
+
232
+ <section id="columns">
233
+ <h2>Columns <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_columns.scss">View source</a></h2>
234
+ <p>All current CSS3 column properties are supported. See the <a href="#complete-list-mixins">complete list of mixins</a> for more info.</p>
235
+
236
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> columns</span><span class="p">(</span><span class="mi">12</span> <span class="mi">8</span><span class="kt">em</span><span class="p">);</span>
237
+ <span class="k">@include</span><span class="nd"> column-rule</span><span class="p">(</span><span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nb">green</span><span class="p">);</span>
238
+ </code></pre>
239
+ </div>
240
+
241
+ </section>
242
+
243
+ <section id="flex-box">
244
+ <h2>Flex Box <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss">View source</a></h2>
245
+ <p>The flex-box mixin is based on the 2009 w3c spec. <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">More info</a></p>
246
+
247
+ <div class="highlight"><pre><code class="scss"><span class="nt">div</span><span class="nc">.parent</span> <span class="p">{</span>
248
+ <span class="k">@include</span><span class="nd"> display-box</span><span class="p">;</span>
249
+ <span class="k">@include</span><span class="nd"> box-align</span><span class="p">(</span><span class="n">start</span><span class="p">);</span>
250
+ <span class="k">@include</span><span class="nd"> box-orient</span><span class="p">(</span><span class="n">horizontal</span><span class="p">);</span>
251
+ <span class="k">@include</span><span class="nd"> box-pack</span><span class="p">(</span><span class="n">start</span><span class="p">);</span>
252
+ <span class="p">}</span>
253
+
254
+ <span class="nt">div</span><span class="nc">.parent</span> <span class="o">&gt;</span> <span class="nt">div</span><span class="nc">.child</span> <span class="p">{</span>
255
+ <span class="k">@include</span><span class="nd"> box-flex</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
256
+ <span class="p">}</span>
257
+
258
+ <span class="c1">// Alternative custom shorthand mixin.</span>
259
+ <span class="nt">div</span><span class="nc">.parent</span> <span class="p">{</span>
260
+ <span class="k">@include</span><span class="nd"> box</span><span class="p">(</span><span class="nv">$orient</span><span class="o">:</span> <span class="n">horizontal</span><span class="o">,</span> <span class="nv">$pack</span><span class="o">:</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$align</span><span class="o">:</span> <span class="n">stretch</span><span class="p">);</span> <span class="c1">// defaults</span>
261
+ <span class="k">@include</span><span class="nd"> box</span><span class="p">(</span><span class="n">vertical</span><span class="o">,</span> <span class="n">start</span><span class="o">,</span> <span class="n">stretch</span><span class="p">);</span>
262
+ <span class="p">}</span>
263
+ </code></pre>
264
+ </div>
265
+
266
+ </section>
267
+
268
+ <section id="inline-block">
269
+ <h2>Inline Block <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_inline-block.scss">View source</a></h2>
270
+ <p>The inline-block mixin provides support for the inline-block property in IE6 and IE7.</p>
271
+
272
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> inline-block</span><span class="p">;</span>
273
+ </code></pre>
274
+ </div>
275
+
276
+ </section>
277
+
278
+ <section id="linear-gradient">
279
+ <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_linear-gradient.scss">View source</a></h2>
280
+ <p>Gradient Position is optional, default is <code>top</code>. Position can be a degree (<code>90deg</code>). Mixin supports up to 10 color-stops.</p>
281
+ <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>
282
+
283
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#2989d8</span><span class="p">);</span>
284
+ <span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="no">top</span><span class="o">,</span> <span class="mh">#8fdce5</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">);</span>
285
+ <span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="no">top</span><span class="o">,</span> <span class="mh">#8fdce5</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$fallback</span><span class="o">:</span> <span class="nb">red</span><span class="p">);</span>
286
+ <span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">deg</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">0</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#2989d8</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#207cca</span> <span class="mi">51</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#7db9e8</span> <span class="mi">100</span><span class="kt">%</span><span class="p">);</span>
287
+ </code></pre>
288
+ </div>
289
+
290
+
291
+ <br>
292
+ <p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
293
+ <br>
294
+ <code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
295
+
296
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="p">);</span>
297
+ </code></pre>
298
+ </div>
299
+
300
+
301
+ <h3>Demo</h3>
302
+ <section class="demo"></section>
303
+ </section>
304
+
305
+ <section id="radial-gradient">
306
+ <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_radial-gradient.scss">View source</a></h2>
307
+ <p>Takes up to 10 gradients. See also the <a href="#background-image">background-image mixin</a>.</p>
308
+ <p>This mixin will output a fallback <code>background-color: #first-color;</code> declaration. A <code>$fallback</code> argument can be passed to change the fallback color.</p>
309
+
310
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">);</span>
311
+ <span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="p">);</span>
312
+ <span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="o">,</span> <span class="nv">$fallback</span><span class="o">:</span> <span class="nb">red</span><span class="p">);</span>
313
+ </code></pre>
314
+ </div>
315
+
316
+
317
+ <br>
318
+ <p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
319
+ <br>
320
+ <code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
321
+
322
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span>
323
+ <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="o">,</span>
324
+ <span class="nv">$deprecated-radius1</span><span class="o">:</span> <span class="mi">50</span><span class="o">,</span> <span class="nv">$deprecated-radius2</span><span class="o">:</span> <span class="mi">360</span><span class="p">);</span>
325
+ </code></pre>
326
+ </div>
327
+
328
+
329
+ <h3>Demo</h3>
330
+ <section class="demo">
331
+ </section>
332
+ </section>
333
+
334
+ <section id="transform">
335
+ <h2>Transform &amp; Transform-origin <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_transform.scss">View source</a></h2>
336
+
337
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transform</span><span class="p">(</span><span class="nf">translateY</span><span class="p">(</span><span class="mi">50</span><span class="kt">px</span><span class="p">));</span>
338
+
339
+ <span class="k">@include</span><span class="nd"> transform-origin</span><span class="p">(</span><span class="no">center</span> <span class="no">top</span><span class="p">);</span>
340
+ </code></pre>
341
+ </div>
342
+
343
+
344
+ </section>
345
+
346
+ <section id="transitions">
347
+ <h2>Transitions <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_transition.scss">View source</a></h2>
348
+ <p>Shorthand mixin: Supports multiple parentheses-delimited values for each variable.</p>
349
+
350
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="n">all</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in-out</span><span class="p">);</span>
351
+ <span class="k">@include</span><span class="nd"> transition</span> <span class="p">(</span><span class="no">opacity</span> <span class="mi">1</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span> <span class="mi">0</span><span class="kt">s</span><span class="o">,</span> <span class="no">width</span> <span class="mi">2</span><span class="mf">.0</span><span class="kt">s</span> <span class="n">ease-in</span> <span class="mi">2</span><span class="kt">s</span><span class="p">);</span>
352
+ </code></pre>
353
+ </div>
354
+
355
+ </section>
356
+
357
+ <section id="user-select">
358
+ <h2>User-select <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_user-select.scss">View source</a></h2>
359
+ <p>Controls the appearance (only) of selection. This does not have any affect on actual selection operation.</p>
360
+
361
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> user-select</span><span class="p">(</span><span class="no">none</span><span class="p">);</span>
362
+ </code></pre>
363
+ </div>
364
+
365
+ </section>
366
+
367
+ </section>
368
+
369
+ <section ckass="functions">
370
+ <h1 id="functions">Functions</h1>
371
+ <section id="compact">
372
+ <h2>Compact <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/lib/bourbon/sass_extensions/functions/compact.rb">View Source</a></h2>
373
+ <p>The compact function will strip out any value from a list that is <code>false</code>. Takes up to 10 arguments.
374
+
375
+ <div class="highlight"><pre><code class="scss"><span class="nv">$full</span><span class="o">:</span> <span class="nf">compact</span><span class="p">(</span><span class="nv">$name-1</span><span class="o">,</span> <span class="nv">$name-2</span><span class="o">,</span> <span class="nv">$name-3</span><span class="o">,</span> <span class="nv">$name-4</span><span class="o">,</span> <span class="nv">$name-5</span><span class="o">,</span> <span class="nv">$name-6</span><span class="o">,</span> <span class="nv">$name-7</span><span class="o">,</span> <span class="nv">$name-8</span><span class="o">,</span> <span class="nv">$name-9</span><span class="o">,</span> <span class="nv">$name-10</span><span class="p">);</span>
376
+ </code></pre>
377
+ </div>
378
+
379
+
380
+ </section>
381
+
382
+ <section id="flex-grid">
383
+ <h2>Flex Grid <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss">View source</a></h2>
384
+ <p>Use this mixin to easily create a flexible-grid layout.</p>
385
+ <p>The <code>$fg-column</code>, <code>$fg-gutter</code> and <code>$fg-max-columns</code> variables must be defined in your base stylesheet to properly use the flex-grid function.</p>
386
+ <p>This function takes the fluid grid equation (target / context = result) and uses columns to help define each.</p>
387
+
388
+ <div class="highlight"><pre><code class="scss"><span class="na">$fg-column</span><span class="o">:</span> <span class="mi">60</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Column Width</span>
389
+ <span class="na">$fg-gutter</span><span class="o">:</span> <span class="mi">25</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Gutter Width</span>
390
+ <span class="na">$fg-max-columns</span><span class="o">:</span> <span class="mi">12</span><span class="p">;</span> <span class="c1">// Total Columns For Main Container</span>
391
+
392
+ <span class="nt">div</span> <span class="p">{</span>
393
+ <span class="na">width</span><span class="o">:</span> <span class="nf">flex-grid</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (315px / 1020px) = 30.882353%;</span>
394
+ <span class="na">margin-left</span><span class="o">:</span> <span class="nf">flex-gutter</span><span class="p">();</span> <span class="c1">// returns (25px / 1020px) = 2.45098%;</span>
395
+
396
+ <span class="nt">p</span> <span class="p">{</span>
397
+ <span class="na">width</span><span class="o">:</span> <span class="nf">flex-grid</span><span class="p">(</span><span class="mi">2</span><span class="o">,</span> <span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (145px / 315px) = 46.031746%;</span>
398
+ <span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
399
+ <span class="na">margin</span><span class="o">:</span> <span class="nf">flex-gutter</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (25px / 315px) = 7.936508%;</span>
400
+ <span class="p">}</span>
401
+
402
+ <span class="nt">blockquote</span> <span class="p">{</span>
403
+ <span class="na">float</span><span class="o">:</span> <span class="no">left</span><span class="p">;</span>
404
+ <span class="na">width</span><span class="o">:</span> <span class="nf">flex-grid</span><span class="p">(</span><span class="mi">2</span><span class="o">,</span> <span class="mi">4</span><span class="p">);</span> <span class="c1">// returns (145px / 315px) = 46.031746%;</span>
405
+ <span class="p">}</span>
406
+ <span class="p">}</span>
407
+ </code></pre>
408
+ </div>
409
+
410
+ </section>
411
+
412
+ <section id="golden-ratio">
413
+ <h2>Golden Ratio <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_modular-scale.scss">View Source</a></h2>
414
+ <p>Returns the golden ratio of a given number. Must provide a pixel or em value for the first argument. Also takes a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3...</p>
415
+ <p>Note: The golden-ratio function can be wrapped in sass's <code>abs()</code>, <code>floor()</code>, or <code>ceil()</code> functions to get the absolute value, round down, or round up respectively.</p>
416
+
417
+ <div class="highlight"><pre><code class="scss"><span class="c1">// Positive number will increment up the golden-ratio</span>
418
+ <span class="na">font-size</span><span class="o">:</span> <span class="nf">golden-ratio</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="p">);</span>
419
+ <span class="c1">// returns: 22.652px</span>
420
+
421
+ <span class="c1">// Negative number will increment down the golden-ratio</span>
422
+ <span class="na">font-size</span><span class="o">:</span> <span class="nf">golden-ratio</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">-1</span><span class="p">);</span>
423
+ <span class="c1">// returns: 8.653px</span>
424
+ </code></pre>
425
+ </div>
426
+
427
+ <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
428
+ </section>
429
+
430
+ <section id="grid-width">
431
+ <h2>Grid Width <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_grid-width.scss">View source</a></h2>
432
+ <p>Easily setup and follow a grid based design. Check out <a href="http://gridulator.com/">gridulator.com</a></p>
433
+ <p>The <code>$gw-column</code> and <code>$gw-gutter</code> variables must be defined in your base stylesheet to properly use the grid-width function.</p>
434
+
435
+ <div class="highlight"><pre><code class="scss"><span class="na">$gw-column</span><span class="o">:</span> <span class="mi">100</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Column Width</span>
436
+ <span class="na">$gw-gutter</span><span class="o">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span> <span class="c1">// Gutter Width</span>
437
+
438
+ <span class="nt">div</span> <span class="p">{</span>
439
+ <span class="na">width</span><span class="o">:</span> <span class="nf">grid-width</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span> <span class="c1">// returns 520px;</span>
440
+ <span class="na">margin-left</span><span class="o">:</span> <span class="nv">$gw-gutter</span><span class="p">;</span> <span class="c1">// returns 40px;</span>
441
+ <span class="p">}</span>
442
+ </code></pre>
443
+ </div>
444
+
445
+ </section>
446
+
447
+ <section id="linear-gradient-function">
448
+ <h2>Linear Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_linear-gradient.scss">View source</a></h2>
449
+ <p>Outputs a linear-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#linear-gradient">linear-gradient mixin</a>.</p>
450
+
451
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span><span class="nf">linear-gradient</span><span class="p">(</span><span class="nb">white</span> <span class="mi">0</span><span class="o">,</span> <span class="nb">yellow</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">transparent</span> <span class="mi">50</span><span class="kt">%</span><span class="p">));</span>
452
+ </code></pre>
453
+ </div>
454
+
455
+
456
+ <br>
457
+ <p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
458
+ <br>
459
+ <code>$deprecated-pos1</code>, <code>$deprecated-pos2</code></p>
460
+
461
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> linear-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span> <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="p">);</span>
462
+ </code></pre>
463
+ </div>
464
+
465
+
466
+ <h3>Demo</h3>
467
+ <section class="demo">
468
+ </section>
469
+ </section>
470
+
471
+ <section id="modular-scale">
472
+ <h2>Modular Scale <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_modular-scale.scss">View Source</a></h2>
473
+ <p>Returns the modular scale of a given number. Must provide a number value for the first argument. The second argument is a required integer for an increment value: ...-3, -2, -1, 0, 1, 2, 3... The third value is the ratio number.</p>
474
+ <p>Note: The function can be wrapped in sass's <code>abs()</code>, <code>floor()</code>, or <code>ceil()</code> functions to get the absolute value, round down, or round up respectively.</p>
475
+
476
+ <div class="highlight"><pre><code class="scss"><span class="nt">div</span> <span class="p">{</span>
477
+ <span class="c1">// Increment Up GR with positive value</span>
478
+ <span class="na">font-size</span><span class="o">:</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">);</span> <span class="c1">// returns: 22.652px</span>
479
+
480
+ <span class="c1">// Increment Down GR with negative value</span>
481
+ <span class="na">font-size</span><span class="o">:</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">-1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">);</span> <span class="c1">// returns: 8.653px</span>
482
+
483
+ <span class="c1">// Can be used with ceil(round up) or floor(round down)</span>
484
+ <span class="na">font-size</span><span class="o">:</span> <span class="nf">floor</span><span class="p">(</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">)</span> <span class="p">);</span> <span class="c1">// returns: 22px</span>
485
+ <span class="na">font-size</span><span class="o">:</span> <span class="nf">ceil</span><span class="p">(</span> <span class="nf">modular-scale</span><span class="p">(</span><span class="mi">14</span><span class="kt">px</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="mf">.618</span><span class="p">)</span> <span class="p">);</span> <span class="c1">// returns: 23px</span>
486
+ <span class="p">}</span>
487
+ </code></pre>
488
+ </div>
489
+
490
+ <p>Resources: <a href="http://modularscale.com/">modularscale.com</a> & <a href="http://goldenratiocalculator.com/">goldenrationcalculator.com</a></p>
491
+ </section>
492
+
493
+ <section id="radial-gradient-function">
494
+ <h2>Radial Gradient <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_radial-gradient.scss">View source</a></h2>
495
+ <p>Outputs a radial-gradient. Use in conjunction with the <a href="#background-image">background-image mixin.</a> The function takes the same arguments as the <a href="#radial-gradient">radial-gradient mixin</a>.</p>
496
+
497
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> backgorund-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
498
+ <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="p">)</span> <span class="p">);</span>
499
+ <span class="k">@include</span><span class="nd"> background-image</span><span class="p">(</span> <span class="nf">radial-gradient</span><span class="p">(</span><span class="mi">50</span><span class="kt">%</span> <span class="mi">50</span><span class="kt">%</span><span class="o">,</span> <span class="no">circle</span> <span class="n">cover</span><span class="o">,</span> <span class="mh">#eee</span> <span class="mi">10</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#1e5799</span> <span class="mi">30</span><span class="kt">%</span><span class="o">,</span> <span class="mh">#efefef</span><span class="p">)</span> <span class="p">);</span>
500
+ </code></pre>
501
+ </div>
502
+
503
+
504
+ <br>
505
+ <p>Optional variables can be passed to control the deprecated <code>-webkit-gradient()</code> function (iOS 4):
506
+ <br>
507
+ <code>$deprecated-pos1</code>, <code>$deprecated-pos2</code>, <code>$deprecated-radius1</code>, <code>$deprecated-radius2</code></p>
508
+
509
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> radial-gradient</span><span class="p">(</span><span class="mh">#1e5799</span><span class="o">,</span> <span class="mh">#3dc3d1</span><span class="o">,</span>
510
+ <span class="nv">$deprecated-pos1</span><span class="o">:</span> <span class="no">left</span> <span class="no">center</span><span class="o">,</span> <span class="nv">$deprecated-pos2</span><span class="o">:</span> <span class="no">left</span> <span class="no">top</span><span class="o">,</span>
511
+ <span class="nv">$deprecated-radius1</span><span class="o">:</span> <span class="mi">50</span><span class="o">,</span> <span class="nv">$deprecated-radius2</span><span class="o">:</span> <span class="mi">360</span><span class="p">);</span>
512
+ </code></pre>
513
+ </div>
514
+
515
+ <h3>Demo</h3>
516
+ <section class="demo">
517
+ </section>
518
+ </section>
519
+
520
+ <section id="tint-shade">
521
+ <h2>Tint &amp; Shade <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_tint-shade.scss">View source</a></h2>
522
+ <p>Tint and Shade are different from <code>lighten()</code> and <code>darken()</code> functions that are built into sass.</p>
523
+ <p>Tint is a mix of color with white.<br>
524
+ Shade is a mix of color with black.<br>
525
+ Both take a color and a percent argument.</p>
526
+
527
+ <div class="highlight"><pre><code class="scss"><span class="na">background</span><span class="o">:</span> <span class="nf">tint</span><span class="p">(</span><span class="nb">red</span><span class="o">,</span> <span class="mi">40</span><span class="kt">%</span><span class="p">);</span>
528
+ <span class="na">background</span><span class="o">:</span> <span class="nf">shade</span><span class="p">(</span><span class="nb">blue</span><span class="o">,</span> <span class="mi">60</span><span class="kt">%</span><span class="p">);</span>
529
+ </code></pre>
530
+ </div>
531
+
532
+
533
+ </section>
534
+
535
+ </section>
536
+
537
+ <section class="addons">
538
+ <h1 id="add-ons">Add-ons</h1>
539
+ <section id="buttons">
540
+ <h2>Buttons <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_button.scss">View source</a></h2>
541
+ <p>The button add-on provides well-designed buttons with a single line in your CSS.</p>
542
+ <p>The mixin supports a style parameter and an optional color argument. The available button styles are:</p>
543
+ <ul>
544
+ <li>
545
+ <code>simple</code> (default)
546
+ </li>
547
+ <li>
548
+ <code>shiny</code>
549
+ </li>
550
+ <li>
551
+ <code>pill</code>
552
+ </li>
553
+ </ul>
554
+
555
+ <section class="demo">
556
+ <div class="wrapper">
557
+ <h3>Simple Button Style</h3>
558
+ <p>The mixin can be called with no arguments, which will render a blue button with the <code>simple</code> style.</p>
559
+ <div class="highlight"><pre><code class="scss"><span class="nt">button</span> <span class="p">{</span>
560
+ <span class="k">@include</span><span class="nd"> button</span><span class="p">;</span>
561
+ <span class="p">}</span>
562
+ </code></pre>
563
+ </div>
564
+
565
+ <button class="example-1">Simple button</button>
566
+ </div>
567
+
568
+ <div class="wrapper">
569
+ <h3>Pill Button Style</h3>
570
+ <div class="highlight"><pre><code class="scss"><span class="nt">button</span> <span class="p">{</span>
571
+ <span class="k">@include</span><span class="nd"> button</span><span class="p">(</span><span class="n">pill</span><span class="p">);</span>
572
+ <span class="p">}</span>
573
+ </code></pre>
574
+ </div>
575
+
576
+ <button class="example-2">Pill Button</button>
577
+ </div>
578
+
579
+ <div class="wrapper">
580
+ <h3>Shiny Button Style</h3>
581
+ <p>Create beautiful buttons by defining a style and color argument; using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.</p>
582
+
583
+ <div class="highlight"><pre><code class="scss"><span class="nt">button</span> <span class="p">{</span>
584
+ <span class="k">@include</span><span class="nd"> button</span><span class="p">(</span><span class="n">shiny</span><span class="o">,</span> <span class="mh">#ff0000</span><span class="p">);</span>
585
+ <span class="p">}</span>
586
+ </code></pre>
587
+ </div>
588
+
589
+ <button class="example-3">Shiny Button</button>
590
+ </div>
591
+ </section>
592
+
593
+ </section>
594
+
595
+ <section id="clearfix">
596
+ <h2>Clearfix <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix.scss">View source</a></h2>
597
+ <p>This mixin will output a clearfix to the selector where the mixin is declared.</p>
598
+ <p>This clearfix uses Nicolas Gallagher's <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix</a>.</p>
599
+
600
+ <div class="highlight"><pre><code class="scss"><span class="nt">div</span> <span class="p">{</span>
601
+ <span class="k">@include</span><span class="nd"> clearfix</span><span class="p">;</span>
602
+ <span class="p">}</span>
603
+ </code></pre>
604
+ </div>
605
+
606
+ </section>
607
+
608
+ <section id="font-family">
609
+ <h2>Font-Family <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-family.scss">View source</a></h2>
610
+ <p>Bourbon defines four default font-families as variables for the sake of convenience:</p>
611
+
612
+ <div class="highlight"><pre><code class="scss"><span class="na">font-family</span><span class="o">:</span> <span class="nv">$helvetica</span><span class="p">;</span>
613
+ <span class="na">font-family</span><span class="o">:</span> <span class="nv">$georgia</span><span class="p">;</span>
614
+ <span class="na">font-family</span><span class="o">:</span> <span class="nv">$lucida-grande</span><span class="p">;</span>
615
+ <span class="na">font-family</span><span class="o">:</span> <span class="nv">$monospace</span><span class="p">;</span>
616
+ <span class="na">font-family</span><span class="o">:</span> <span class="nv">$verdana</span><span class="p">;</span>
617
+ </code></pre>
618
+ </div>
619
+
620
+
621
+ <h3>CSS Output</h3>
622
+ <div class="highlight"><pre><code class="scss"><span class="na">font-family</span><span class="o">:</span> <span class="s2">&quot;Helvetica Neue&quot;</span><span class="o">,</span> <span class="n">Helvetica</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
623
+ <span class="na">font-family</span><span class="o">:</span> <span class="n">Georgia</span><span class="o">,</span> <span class="n">Cambria</span><span class="o">,</span> <span class="s2">&quot;Times New Roman&quot;</span><span class="o">,</span> <span class="n">Times</span><span class="o">,</span> <span class="no">serif</span><span class="p">;</span>
624
+ <span class="na">font-family</span><span class="o">:</span> <span class="s2">&quot;Lucida Grande&quot;</span><span class="o">,</span> <span class="n">Tahoma</span><span class="o">,</span> <span class="n">Verdana</span><span class="o">,</span> <span class="n">Arial</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
625
+ <span class="na">font-family</span><span class="o">:</span> <span class="s2">&quot;Bitstream Vera Sans Mono&quot;</span><span class="o">,</span> <span class="n">Consolas</span><span class="o">,</span> <span class="n">Courier</span><span class="o">,</span> <span class="no">monospace</span><span class="p">;</span>
626
+ <span class="na">font-family</span><span class="o">:</span> <span class="n">Verdana</span><span class="o">,</span> <span class="n">Geneva</span><span class="o">,</span> <span class="no">sans-serif</span><span class="p">;</span>
627
+ </code></pre>
628
+ </div>
629
+
630
+ </section>
631
+
632
+ <section id="hide-text">
633
+ <h2>Hide Text<a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_hide-text.scss">View Source</a></h2>
634
+ <p>Hide-text is an image replacement mixin. It is based off the <a href="https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7">HTML5-Boilerplate image-replacement</a>.</p>
635
+ <p>This image replacement technique is an alternative to the text-indent technique, which has <a href="http://nicolasgallagher.com/another-css-image-replacement-technique/">performance and other benefits</a>.</p>
636
+
637
+ <div class="highlight"><pre><code class="scss"><span class="nt">div</span> <span class="p">{</span>
638
+ <span class="k">@include</span><span class="nd"> hide-text</span><span class="p">;</span>
639
+ <span class="na">background-image</span><span class="o">:</span> <span class="sx">url(logo.png)</span><span class="p">;</span>
640
+ <span class="p">}</span>
641
+ </code></pre>
642
+ </div>
643
+
644
+ </section>
645
+
646
+ <section id="html5-input-types">
647
+ <h2>HTML5 Input Types <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a></h2>
648
+ <p>This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p>
649
+ <p>Note: You must use interpolation with the variable&mdash;<code>#{}</code>.</p>
650
+
651
+ <div class="highlight"><pre><code class="scss"><span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">all-text-inputs</span><span class="p">}</span> <span class="p">{</span>
652
+ <span class="na">border</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nb">green</span><span class="p">;</span>
653
+ <span class="p">}</span>
654
+ </code></pre>
655
+ </div>
656
+
657
+
658
+ <h3>CSS Output</h3>
659
+ <div class="highlight"><pre><code class="scss"><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;email&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;number&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;password&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;search&quot;</span><span class="o">],</span>
660
+ <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;tel&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;url&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;color&quot;</span><span class="o">],</span>
661
+ <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;date&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;datetime&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;datetime-local&quot;</span><span class="o">],</span>
662
+ <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;month&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;time&quot;</span><span class="o">],</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&quot;week&quot;</span><span class="o">]</span> <span class="p">{</span>
663
+ <span class="na">border</span><span class="o">:</span> <span class="mi">1</span><span class="kt">px</span> <span class="no">solid</span> <span class="nb">green</span><span class="p">;</span>
664
+ <span class="p">}</span>
665
+ </code></pre>
666
+ </div>
667
+
668
+
669
+ </section>
670
+
671
+ <section id="timing-functions">
672
+ <h2>Timing Functions <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_timing-functions.scss">View source</a></h2>
673
+ <p>These CSS cubic-bezier timing functions are variables that can be used with CSS3 animations and transitions. The provided timing functions are the same as the jQuery UI demo: <a href="http://jqueryui.com/demos/effect/easing.html">easing functions</a>.</p>
674
+
675
+ <div class="highlight"><pre><code class="scss"><span class="k">@include</span><span class="nd"> transition</span><span class="p">(</span><span class="n">all</span><span class="o">,</span> <span class="mi">5</span><span class="kt">s</span><span class="o">,</span> <span class="nv">$ease-in-circ</span><span class="p">);</span>
676
+ </code></pre>
677
+ </div>
678
+
679
+
680
+
681
+ <h3>Demo</h3>
682
+ <p>Many of the timing functions below may look the same in this demo, but in complex animations, they are intricately different.</p>
683
+ <section class="demo">
684
+ <ul>
685
+ <li><code>$ease-in-quad</code><div class="box ease-in-quad"></div></li>
686
+ <li><code>$ease-out-quad</code><div class="box ease-in-quad"></div></li>
687
+ <li><code>$ease-in-out-quad</code><div class="box ease-in-quad"></div></li>
688
+
689
+ <li><code>$ease-in-cubic</code><div class="box ease-in-cubic"></div></li>
690
+ <li><code>$ease-out-cubic</code><div class="box ease-in-cubic"></div></li>
691
+ <li><code>$ease-in-out-cubic</code><div class="box ease-in-cubic"></div></li>
692
+
693
+ <li><code>$ease-in-quart</code><div class="box ease-in-quart"></div></li>
694
+ <li><code>$ease-out-quart</code><div class="box ease-in-quart"></div></li>
695
+ <li><code>$ease-in-out-quart</code><div class="box ease-in-quart"></div></li>
696
+
697
+ <li><code>$ease-in-quint</code><div class="box ease-in-quint"></div></li>
698
+ <li><code>$ease-out-quint</code><div class="box ease-in-quint"></div></li>
699
+ <li><code>$ease-in-out-quint</code><div class="box ease-in-quint"></div></li>
700
+
701
+ <li><code>$ease-in-sine</code><div class="box ease-in-sine"></div></li>
702
+ <li><code>$ease-out-sine</code><div class="box ease-in-sine"></div></li>
703
+ <li><code>$ease-in-out-sine</code><div class="box ease-in-sine"></div></li>
704
+
705
+ <li><code>$ease-in-expo</code><div class="box ease-in-expo"></div></li>
706
+ <li><code>$ease-out-expo</code><div class="box ease-in-expo"></div></li>
707
+ <li><code>$ease-in-out-expo</code><div class="box ease-in-expo"></div></li>
708
+
709
+ <li><code>$ease-in-circ</code><div class="box ease-in-circ"></div></li>
710
+ <li><code>$ease-out-circ</code><div class="box ease-in-circ"></div></li>
711
+ <li><code>$ease-in-out-circ</code><div class="box ease-in-circ"></div></li>
712
+
713
+ <li><code>$ease-in-back</code><div class="box ease-in-back"></div></li>
714
+ <li><code>$ease-out-back</code><div class="box ease-out-back"></div></li>
715
+ <li><code>$ease-in-out-back</code><div class="box ease-in-out-back"></div></li>
716
+ <ul>
717
+ </section>
718
+ </section>
719
+
720
+ </section>
721
+
722
+ <section class="complete-list">
723
+ <h1 id="complete-list">Complete List</h1>
724
+ <section id="complete-list">
725
+ <h2>All Supported Functions, Mixins, and Addons</h2>
726
+ <p><code>@</code> denotes a mixin and must be prefaced with <code>@include</code>.</p>
727
+
728
+ <h3 id="complete-list-mixins">Mixins</h3>
729
+ <div class="highlight"><pre><code class="scss"><span class="nt">animation</span>
730
+ <span class="o">@</span> <span class="nt">animation</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
731
+ <span class="o">@</span> <span class="nt">animation-delay</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
732
+ <span class="o">@</span> <span class="nt">animation-direction</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
733
+ <span class="o">@</span> <span class="nt">animation-duration</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
734
+ <span class="o">@</span> <span class="nt">animation-fill-mode</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
735
+ <span class="o">@</span> <span class="nt">animation-iteration-count</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
736
+ <span class="o">@</span> <span class="nt">animation-name</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
737
+ <span class="o">@</span> <span class="nt">animation-play-state</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
738
+ <span class="o">@</span> <span class="nt">animation-timing-function</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
739
+
740
+ <span class="o">@</span> <span class="nt">appearance</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
741
+ <span class="o">@</span> <span class="nt">background-image</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
742
+ <span class="o">@</span> <span class="nt">background-size</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
743
+ <span class="o">@</span> <span class="nt">border-image</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
744
+
745
+ <span class="nt">border-radius</span>
746
+ <span class="o">@</span> <span class="nt">border-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
747
+ <span class="o">@</span> <span class="nt">border-top-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
748
+ <span class="o">@</span> <span class="nt">border-top-left-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
749
+ <span class="o">@</span> <span class="nt">border-top-right-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
750
+ <span class="o">@</span> <span class="nt">border-bottom-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
751
+ <span class="o">@</span> <span class="nt">border-bottom-left-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
752
+ <span class="o">@</span> <span class="nt">border-bottom-right-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
753
+ <span class="o">@</span> <span class="nt">border-left-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
754
+ <span class="o">@</span> <span class="nt">border-right-radius</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
755
+
756
+ <span class="o">@</span> <span class="nt">box-shadow</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
757
+ <span class="o">@</span> <span class="nt">box-sizing</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
758
+
759
+ <span class="nt">columns</span>
760
+ <span class="o">@</span><span class="nt">columns</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
761
+ <span class="o">@</span><span class="nt">column-count</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
762
+ <span class="o">@</span><span class="nt">column-fill</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
763
+ <span class="o">@</span><span class="nt">column-gap</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
764
+ <span class="o">@</span><span class="nt">column-rule</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
765
+ <span class="o">@</span><span class="nt">column-rule-color</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
766
+ <span class="o">@</span><span class="nt">column-rule-style</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
767
+ <span class="o">@</span><span class="nt">column-rule-width</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
768
+ <span class="o">@</span><span class="nt">column-span</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
769
+ <span class="o">@</span><span class="nt">column-width</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
770
+
771
+ <span class="nt">flex-box</span>
772
+ <span class="o">@</span> <span class="nt">box</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
773
+ <span class="o">@</span> <span class="nt">box-align</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
774
+ <span class="o">@</span> <span class="nt">box-direction</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
775
+ <span class="o">@</span> <span class="nt">box-flex</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
776
+ <span class="o">@</span> <span class="nt">box-flex-group</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
777
+ <span class="o">@</span> <span class="nt">box-lines</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
778
+ <span class="o">@</span> <span class="nt">box-ordinal-group</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
779
+ <span class="o">@</span> <span class="nt">box-orient</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
780
+ <span class="o">@</span> <span class="nt">box-pack</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
781
+ <span class="o">@</span> <span class="nt">display-box</span>
782
+
783
+ <span class="o">@</span> <span class="nt">inline-block</span>
784
+ <span class="o">@</span> <span class="nt">linear-gradient</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
785
+ <span class="o">@</span> <span class="nt">radial-gradient</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
786
+
787
+ <span class="nt">transform</span>
788
+ <span class="o">@</span> <span class="nt">transform</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
789
+ <span class="o">@</span> <span class="nt">transform-origin</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
790
+
791
+ <span class="nt">transition</span>
792
+ <span class="o">@</span> <span class="nt">transition</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
793
+ <span class="o">@</span> <span class="nt">transition-delay</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
794
+ <span class="o">@</span> <span class="nt">transition-duration</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
795
+ <span class="o">@</span> <span class="nt">transition-property</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
796
+ <span class="o">@</span> <span class="nt">transition-timing-function</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
797
+
798
+ <span class="o">@</span> <span class="nt">user-select</span>
799
+ </code></pre>
800
+ </div>
801
+
802
+
803
+ <h3 id="complete-list-functions">Functions</h3>
804
+ <div class="highlight"><pre><code class="scss"><span class="nt">compact</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
805
+ <span class="nt">flex-grid</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
806
+ <span class="nt">golden-ratio</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
807
+ <span class="nt">grid-width</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
808
+ <span class="nt">linear-gradient</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
809
+ <span class="nt">modular-scale</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
810
+ <span class="nt">radial-gradient</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
811
+ <span class="nt">shade</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
812
+ <span class="nt">tint</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
813
+ </code></pre>
814
+ </div>
815
+
816
+
817
+ <h3 id="complete-list-addons">Addons</h3>
818
+ <div class="highlight"><pre><code class="scss"><span class="o">@</span> <span class="nt">button</span><span class="o">(*</span><span class="nt">args</span><span class="o">)</span>
819
+ <span class="o">@</span> <span class="nt">clearfix</span>
820
+ <span class="o">@</span> <span class="nt">hide-text</span>
821
+
822
+ <span class="nt">HTML5</span> <span class="nt">Inputs</span>
823
+ <span class="nn">#</span><span class="p">{</span><span class="err">$</span><span class="nt">all-text-inputs</span><span class="p">}</span>
824
+
825
+ <span class="nt">font-family</span>
826
+ <span class="err">$</span><span class="nt">georgia</span>
827
+ <span class="err">$</span><span class="nt">helvetica</span>
828
+ <span class="err">$</span><span class="nt">lucida-grande</span>
829
+ <span class="err">$</span><span class="nt">monospace</span>
830
+ <span class="err">$</span><span class="nt">verdana</span>
831
+
832
+ <span class="nt">timing-functions</span>
833
+ <span class="err">$</span><span class="nt">ease-in-</span><span class="o">*</span>
834
+ <span class="err">$</span><span class="nt">ease-out-</span><span class="o">*</span>
835
+ <span class="err">$</span><span class="nt">ease-in-out-</span><span class="o">*</span>
836
+ <span class="o">*</span> <span class="o">=</span> <span class="nt">quad</span><span class="o">,</span> <span class="nt">cubic</span><span class="o">,</span> <span class="nt">quart</span><span class="o">,</span> <span class="nt">quint</span><span class="o">,</span> <span class="nt">sine</span><span class="o">,</span> <span class="nt">expo</span><span class="o">,</span> <span class="nt">circ</span><span class="o">,</span> <span class="nt">back</span>
837
+ </code></pre>
838
+ </div>
839
+
840
+
841
+ </section>
842
+
843
+ </section>
844
+
845
+ <section class="footer">
846
+ <h1 id="footer"></h1>
847
+ <section id="browser-support">
848
+ <h2>Browser Support &amp; Pull Requests</h2>
849
+ <p>Bourbon aims to provide support for CSS3 properties that are not yet fully supported in modern stable browsers.</p>
850
+ <p>A general rule when submitting a pull request for a new mixin, ask yourself the following: Do the following browsers <em>only</em> support the CSS3 properties using vendor specific prefixes?</p>
851
+ <p>If the answer is yes, there is a high chance the mixin will be accepted via a pull request. </p>
852
+ <ul>
853
+ <li>Firefox 3.6+</li>
854
+ <li>Safari 4.0+</li>
855
+ <li>Chrome 4.0+</li>
856
+ <li>Opera 10+</li>
857
+ <li>IE 9+</li>
858
+ </ul>
859
+
860
+ <p><strong>Bourbon does not intend to support IE filters.</strong></p>
861
+
862
+ <p>Resources for checking browser support:</p>
863
+ <ul>
864
+ <li><a href="https://developer.mozilla.org/en-US/">MDN - Moz Dev Network</a></li>
865
+ <li><a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a></li>
866
+ <li><a href="http://css-infos.net/properties/webkit.php">Webkit CSS Properties</a></li>
867
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms531207(v=VS.85).aspx">MSDN - Microsoft Dev Network</a></p></li>
868
+ </ul>
869
+ </section>
870
+
871
+ <section id="credits">
872
+ <a href="http://thoughtbot.com"><img src="http://thoughtbot.com/images/tm/logo.png"/></a>
873
+
874
+ <h3>Got questions? Need help?</h3>
875
+ <p>Tweet at <a href="http://twitter.com/phillapier">Phil LaPier</a> on twiiter.</p>
876
+
877
+ <h3>Credits</h3>
878
+ <p>Bourbon is maintained and funded by <a href="http://thoughtbot.com/community">thoughtbot</a>.</p>
879
+ <p>The names and logos for thoughtbot are trademarks of thoughtbot, inc.</p>
880
+
881
+ <h3>License</h3>
882
+ <p>Bourbon is Copyright © 2011 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.</p>
883
+ </section>
884
+
885
+ </section>
886
+
887
+ </div>
888
+ </div>
889
+ </body>
890
+ </html>