@samitouri / QOS-React-2 / commits / b58b9d0b79

Update Bourbon files (4.0.2)

Paul O’Shannessy committed Aug 13, 2014 at 11:20 UTC b58b9d0b794a401c5ab75dae24963484f3af86df
56 files changed +1279 -535
docs/_css/bourbon/_bourbon-deprecated-upcoming.scss
+3 -8
@@ -2,12 +2,7 @@
2 // These mixins/functions are deprecated
3 // They will be removed in the next MAJOR version release
4 //************************************************************************//
5 -@mixin box-shadow ($shadows...) {
6 - @include prefixer(box-shadow, $shadows, spec);
7 - @warn "box-shadow is deprecated and will be removed in the next major version release";
8 -}
9 -
10 -@mixin background-size ($lengths...) {
11 - @include prefixer(background-size, $lengths, spec);
12 - @warn "background-size is deprecated and will be removed in the next major version release";
5 +@mixin inline-block {
6 + display: inline-block;
7 + @warn "inline-block mixin is deprecated and will be removed in the next major version release";
8 }
docs/_css/bourbon/_bourbon.scss
+25 -5
@@ -1,22 +1,36 @@
1 +// Settings
2 +@import "settings/prefixer";
3 +@import "settings/px-to-em";
4 +@import "settings/asset-pipeline";
5 +
6 // Custom Helpers
2 -@import "helpers/deprecated-webkit-gradient";
7 +@import "helpers/convert-units";
8 @import "helpers/gradient-positions-parser";
9 +@import "helpers/is-num";
10 +@import "helpers/linear-angle-parser";
11 +@import "helpers/linear-gradient-parser";
12 @import "helpers/linear-positions-parser";
13 +@import "helpers/linear-side-corner-parser";
14 @import "helpers/radial-arg-parser";
15 @import "helpers/radial-positions-parser";
16 +@import "helpers/radial-gradient-parser";
17 @import "helpers/render-gradients";
18 @import "helpers/shape-size-stripper";
19 +@import "helpers/str-to-num";
20
21 // Custom Functions
11 -@import "functions/compact";
22 +@import "functions/assign";
23 +@import "functions/color-lightness";
24 @import "functions/flex-grid";
25 +@import "functions/golden-ratio";
26 @import "functions/grid-width";
14 -@import "functions/linear-gradient";
27 @import "functions/modular-scale";
28 @import "functions/px-to-em";
17 -@import "functions/radial-gradient";
29 +@import "functions/px-to-rem";
30 +@import "functions/strip-units";
31 @import "functions/tint-shade";
32 @import "functions/transition-property-name";
33 +@import "functions/unpack";
34
35 // CSS3 Mixins
36 @import "css3/animation";
@@ -27,12 +41,15 @@
41 @import "css3/border-image";
42 @import "css3/border-radius";
43 @import "css3/box-sizing";
44 +@import "css3/calc";
45 @import "css3/columns";
46 +@import "css3/filter";
47 @import "css3/flex-box";
48 @import "css3/font-face";
49 +@import "css3/font-feature-settings";
50 +@import "css3/hyphens";
51 @import "css3/hidpi-media-query";
52 @import "css3/image-rendering";
35 -@import "css3/inline-block";
53 @import "css3/keyframes";
54 @import "css3/linear-gradient";
55 @import "css3/perspective";
@@ -45,6 +62,8 @@
62 // Addons & other mixins
63 @import "addons/button";
64 @import "addons/clearfix";
65 +@import "addons/directional-values";
66 +@import "addons/ellipsis";
67 @import "addons/font-family";
68 @import "addons/hide-text";
69 @import "addons/html5-input-types";
@@ -54,6 +73,7 @@
73 @import "addons/size";
74 @import "addons/timing-functions";
75 @import "addons/triangle";
76 +@import "addons/word-wrap";
77
78 // Soon to be deprecated Mixins
79 @import "bourbon-deprecated-upcoming";
docs/_css/bourbon/addons/_button.scss
+142 -41
@@ -1,38 +1,51 @@
1 -@mixin button ($style: simple, $base-color: #4294f0) {
1 +@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
2
3 - @if type-of($style) == color {
3 + @if type-of($style) == string and type-of($base-color) == color {
4 + @include buttonstyle($style, $base-color, $text-size, $padding);
5 + }
6 +
7 + @if type-of($style) == string and type-of($base-color) == number {
8 + $padding: $text-size;
9 + $text-size: $base-color;
10 + $base-color: #4294f0;
11 +
12 + @if $padding == inherit {
13 + $padding: 7px 18px;
14 + }
15 +
16 + @include buttonstyle($style, $base-color, $text-size, $padding);
17 + }
18 +
19 + @if type-of($style) == color and type-of($base-color) == color {
20 $base-color: $style;
21 $style: simple;
22 + @include buttonstyle($style, $base-color, $text-size, $padding);
23 }
24
8 - // Grayscale button
9 - @if $base-color == grayscale($base-color) {
10 - @if $style == simple {
11 - @include simple($base-color, $grayscale: true);
12 - }
25 + @if type-of($style) == color and type-of($base-color) == number {
26 + $padding: $text-size;
27 + $text-size: $base-color;
28 + $base-color: $style;
29 + $style: simple;
30
14 - @else if $style == shiny {
15 - @include shiny($base-color, $grayscale: true);
31 + @if $padding == inherit {
32 + $padding: 7px 18px;
33 }
34
18 - @else if $style == pill {
19 - @include pill($base-color, $grayscale: true);
20 - }
35 + @include buttonstyle($style, $base-color, $text-size, $padding);
36 }
37
23 - // Colored button
24 - @else {
25 - @if $style == simple {
26 - @include simple($base-color);
27 - }
38 + @if type-of($style) == number {
39 + $padding: $base-color;
40 + $text-size: $style;
41 + $base-color: #4294f0;
42 + $style: simple;
43
29 - @else if $style == shiny {
30 - @include shiny($base-color);
44 + @if $padding == #4294f0 {
45 + $padding: 7px 18px;
46 }
47
33 - @else if $style == pill {
34 - @include pill($base-color);
35 - }
48 + @include buttonstyle($style, $base-color, $text-size, $padding);
49 }
50
51 &:disabled {
@@ -42,16 +55,55 @@
55 }
56
57
58 +// Selector Style Button
59 +//************************************************************************//
60 +@mixin buttonstyle($type, $b-color, $t-size, $pad) {
61 + // Grayscale button
62 + @if $type == simple and $b-color == grayscale($b-color) {
63 + @include simple($b-color, true, $t-size, $pad);
64 + }
65 +
66 + @if $type == shiny and $b-color == grayscale($b-color) {
67 + @include shiny($b-color, true, $t-size, $pad);
68 + }
69 +
70 + @if $type == pill and $b-color == grayscale($b-color) {
71 + @include pill($b-color, true, $t-size, $pad);
72 + }
73 +
74 + @if $type == flat and $b-color == grayscale($b-color) {
75 + @include flat($b-color, true, $t-size, $pad);
76 + }
77 +
78 + // Colored button
79 + @if $type == simple {
80 + @include simple($b-color, false, $t-size, $pad);
81 + }
82 +
83 + @else if $type == shiny {
84 + @include shiny($b-color, false, $t-size, $pad);
85 + }
86 +
87 + @else if $type == pill {
88 + @include pill($b-color, false, $t-size, $pad);
89 + }
90 +
91 + @else if $type == flat {
92 + @include flat($b-color, false, $t-size, $pad);
93 + }
94 +}
95 +
96 +
97 // Simple Button
98 //************************************************************************//
47 -@mixin simple($base-color, $grayscale: false) {
99 +@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
100 $color: hsl(0, 0, 100%);
101 $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
102 $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
103 $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
104 $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
105
54 - @if lightness($base-color) > 70% {
106 + @if is-light($base-color) {
107 $color: hsl(0, 0, 20%);
108 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
109 }
@@ -68,10 +120,10 @@
120 box-shadow: inset 0 1px 0 0 $inset-shadow;
121 color: $color;
122 display: inline-block;
71 - font-size: 11px;
123 + font-size: $textsize;
124 font-weight: bold;
125 @include linear-gradient ($base-color, $stop-gradient);
74 - padding: 7px 18px;
126 + padding: $padding;
127 text-decoration: none;
128 text-shadow: 0 1px 0 $text-shadow;
129 background-clip: padding-box;
@@ -92,7 +144,8 @@
144 @include linear-gradient ($base-color-hover, $stop-gradient-hover);
145 }
146
95 - &:active:not(:disabled) {
147 + &:active:not(:disabled),
148 + &:focus:not(:disabled) {
149 $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
150 $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
151
@@ -102,14 +155,14 @@
155 }
156
157 border: 1px solid $border-active;
105 - box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
158 + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
159 }
160 }
161
162
163 // Shiny Button
164 //************************************************************************//
112 -@mixin shiny($base-color, $grayscale: false) {
165 +@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
166 $color: hsl(0, 0, 100%);
167 $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
168 $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
@@ -119,7 +172,7 @@
172 $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
173 $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
174
122 - @if lightness($base-color) > 70% {
175 + @if is-light($base-color) {
176 $color: hsl(0, 0, 20%);
177 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
178 }
@@ -140,10 +193,10 @@
193 box-shadow: inset 0 1px 0 0 $inset-shadow;
194 color: $color;
195 display: inline-block;
143 - font-size: 14px;
196 + font-size: $textsize;
197 font-weight: bold;
198 @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
146 - padding: 8px 20px;
199 + padding: $padding;
200 text-align: center;
201 text-decoration: none;
202 text-shadow: 0 -1px 1px $text-shadow;
@@ -168,21 +221,22 @@
221 $fourth-stop-hover 100%);
222 }
223
171 - &:active:not(:disabled) {
224 + &:active:not(:disabled),
225 + &:focus:not(:disabled) {
226 $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
227
228 @if $grayscale == true {
229 $inset-shadow-active: grayscale($inset-shadow-active);
230 }
231
178 - box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
232 + box-shadow: inset 0 0 20px 0 $inset-shadow-active;
233 }
234 }
235
236
237 // Pill Button
238 //************************************************************************//
185 -@mixin pill($base-color, $grayscale: false) {
239 +@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
240 $color: hsl(0, 0, 100%);
241 $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
242 $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
@@ -191,7 +245,7 @@
245 $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
246 $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
247
194 - @if lightness($base-color) > 70% {
248 + @if is-light($base-color) {
249 $color: hsl(0, 0, 20%);
250 $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
251 }
@@ -208,14 +262,14 @@
262 border: 1px solid $border-top;
263 border-color: $border-top $border-sides $border-bottom;
264 border-radius: 16px;
211 - box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
265 + box-shadow: inset 0 1px 0 0 $inset-shadow;
266 color: $color;
267 display: inline-block;
214 - font-size: 11px;
268 + font-size: $textsize;
269 font-weight: normal;
270 line-height: 1;
271 @include linear-gradient ($base-color, $stop-gradient);
218 - padding: 5px 16px;
272 + padding: $padding;
273 text-align: center;
274 text-decoration: none;
275 text-shadow: 0 -1px 1px $text-shadow;
@@ -249,7 +303,8 @@
303 background-clip: padding-box;
304 }
305
252 - &:active:not(:disabled) {
306 + &:active:not(:disabled),
307 + &:focus:not(:disabled) {
308 $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
309 $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
310 $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
@@ -267,7 +322,53 @@
322 background: $active-color;
323 border: 1px solid $border-active;
324 border-bottom: 1px solid $border-bottom-active;
270 - box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
325 + box-shadow: inset 0 0 6px 3px $inset-shadow-active;
326 text-shadow: 0 -1px 1px $text-shadow-active;
327 }
328 }
329 +
330 +
331 +
332 +// Flat Button
333 +//************************************************************************//
334 +@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
335 + $color: hsl(0, 0, 100%);
336 +
337 + @if is-light($base-color) {
338 + $color: hsl(0, 0, 20%);
339 + }
340 +
341 + background-color: $base-color;
342 + border-radius: 3px;
343 + border: none;
344 + color: $color;
345 + display: inline-block;
346 + font-size: inherit;
347 + font-weight: bold;
348 + padding: 7px 18px;
349 + text-decoration: none;
350 + background-clip: padding-box;
351 +
352 + &:hover:not(:disabled){
353 + $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
354 +
355 + @if $grayscale == true {
356 + $base-color-hover: grayscale($base-color-hover);
357 + }
358 +
359 + background-color: $base-color-hover;
360 + cursor: pointer;
361 + }
362 +
363 + &:active:not(:disabled),
364 + &:focus:not(:disabled) {
365 + $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
366 +
367 + @if $grayscale == true {
368 + $base-color-active: grayscale($base-color-active);
369 + }
370 +
371 + background-color: $base-color-active;
372 + cursor: pointer;
373 + }
374 +}
docs/_css/bourbon/addons/_clearfix.scss
+5 -11
@@ -1,4 +1,4 @@
1 -// Micro clearfix provides an easy way to contain floats without adding additional markup
1 +// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
2 //
3 // Example usage:
4 //
@@ -12,18 +12,12 @@
12 // }
13
14 @mixin clearfix {
15 - *zoom: 1;
16 -
17 - &:before,
18 - &:after {
19 - content: " ";
20 - display: table;
21 - }
22 -
15 &:after {
24 - clear: both;
16 + content:"";
17 + display:table;
18 + clear:both;
19 }
20 }
21
22 // Acknowledgements
29 -// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
23 +// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
docs/_css/bourbon/addons/_directional-values.scss new
+111
@@ -0,0 +1,111 @@
1 +// directional-property mixins are shorthands
2 +// for writing properties like the following
3 +//
4 +// @include margin(null 0 10px);
5 +// ------
6 +// margin-right: 0;
7 +// margin-bottom: 10px;
8 +// margin-left: 0;
9 +//
10 +// - or -
11 +//
12 +// @include border-style(dotted null);
13 +// ------
14 +// border-top-style: dotted;
15 +// border-bottom-style: dotted;
16 +//
17 +// ------
18 +//
19 +// Note: You can also use false instead of null
20 +
21 +@function collapse-directionals($vals) {
22 + $output: null;
23 +
24 + $A: nth( $vals, 1 );
25 + $B: if( length($vals) < 2, $A, nth($vals, 2));
26 + $C: if( length($vals) < 3, $A, nth($vals, 3));
27 + $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
28 +
29 + @if $A == 0 { $A: 0 }
30 + @if $B == 0 { $B: 0 }
31 + @if $C == 0 { $C: 0 }
32 + @if $D == 0 { $D: 0 }
33 +
34 + @if $A == $B and $A == $C and $A == $D { $output: $A }
35 + @else if $A == $C and $B == $D { $output: $A $B }
36 + @else if $B == $D { $output: $A $B $C }
37 + @else { $output: $A $B $C $D }
38 +
39 + @return $output;
40 +}
41 +
42 +@function contains-falsy($list) {
43 + @each $item in $list {
44 + @if not $item {
45 + @return true;
46 + }
47 + }
48 +
49 + @return false;
50 +}
51 +
52 +@mixin directional-property($pre, $suf, $vals) {
53 + // Property Names
54 + $top: $pre + "-top" + if($suf, "-#{$suf}", "");
55 + $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
56 + $left: $pre + "-left" + if($suf, "-#{$suf}", "");
57 + $right: $pre + "-right" + if($suf, "-#{$suf}", "");
58 + $all: $pre + if($suf, "-#{$suf}", "");
59 +
60 + $vals: collapse-directionals($vals);
61 +
62 + @if contains-falsy($vals) {
63 + @if nth($vals, 1) { #{$top}: nth($vals, 1); }
64 +
65 + @if length($vals) == 1 {
66 + @if nth($vals, 1) { #{$right}: nth($vals, 1); }
67 + } @else {
68 + @if nth($vals, 2) { #{$right}: nth($vals, 2); }
69 + }
70 +
71 + // prop: top/bottom right/left
72 + @if length($vals) == 2 {
73 + @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
74 + @if nth($vals, 2) { #{$left}: nth($vals, 2); }
75 +
76 + // prop: top right/left bottom
77 + } @else if length($vals) == 3 {
78 + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
79 + @if nth($vals, 2) { #{$left}: nth($vals, 2); }
80 +
81 + // prop: top right bottom left
82 + } @else if length($vals) == 4 {
83 + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
84 + @if nth($vals, 4) { #{$left}: nth($vals, 4); }
85 + }
86 +
87 + // prop: top/right/bottom/left
88 + } @else {
89 + #{$all}: $vals;
90 + }
91 +}
92 +
93 +@mixin margin($vals...) {
94 + @include directional-property(margin, false, $vals...);
95 +}
96 +
97 +@mixin padding($vals...) {
98 + @include directional-property(padding, false, $vals...);
99 +}
100 +
101 +@mixin border-style($vals...) {
102 + @include directional-property(border, style, $vals...);
103 +}
104 +
105 +@mixin border-color($vals...) {
106 + @include directional-property(border, color, $vals...);
107 +}
108 +
109 +@mixin border-width($vals...) {
110 + @include directional-property(border, width, $vals...);
111 +}
docs/_css/bourbon/addons/_ellipsis.scss new
+7
@@ -0,0 +1,7 @@
1 +@mixin ellipsis($width: 100%) {
2 + display: inline-block;
3 + max-width: $width;
4 + overflow: hidden;
5 + text-overflow: ellipsis;
6 + white-space: nowrap;
7 +}
docs/_css/bourbon/addons/_font-family.scss
+1 -1
@@ -1,5 +1,5 @@
1 $georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2 -$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
2 +$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
3 $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4 $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5 $verdana: Verdana, Geneva, sans-serif;
docs/_css/bourbon/addons/_hide-text.scss
+8 -3
@@ -1,5 +1,10 @@
1 @mixin hide-text {
2 - color: transparent;
3 - font: 0/0 a;
4 - text-shadow: none;
2 + overflow: hidden;
3 +
4 + &:before {
5 + content: "";
6 + display: block;
7 + width: 0;
8 + height: 100%;
9 + }
10 }
docs/_css/bourbon/addons/_html5-input-types.scss
+47 -17
@@ -20,29 +20,19 @@ $inputs-list: 'input[type="email"]',
20 'input[type="time"]',
21 'input[type="week"]';
22
23 -$unquoted-inputs-list: ();
24 -@each $input-type in $inputs-list {
25 - $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
26 -}
27 -
28 -$all-text-inputs: $unquoted-inputs-list;
29 -
23 +// Bare inputs
24 +//************************************************************************//
25 +$all-text-inputs: assign-inputs($inputs-list);
26
27 // Hover Pseudo-class
28 //************************************************************************//
33 -$all-text-inputs-hover: ();
34 -@each $input-type in $unquoted-inputs-list {
35 - $input-type-hover: $input-type + ":hover";
36 - $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
37 -}
29 +$all-text-inputs-hover: assign-inputs($inputs-list, hover);
30
31 // Focus Pseudo-class
32 //************************************************************************//
41 -$all-text-inputs-focus: ();
42 -@each $input-type in $unquoted-inputs-list {
43 - $input-type-focus: $input-type + ":focus";
44 - $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
45 -}
33 +$all-text-inputs-focus: assign-inputs($inputs-list, focus);
34 +
35 +
36
37 // You must use interpolation on the variable:
38 // #{$all-text-inputs}
@@ -54,3 +44,43 @@ $all-text-inputs-focus: ();
44 // #{$all-text-inputs}, textarea {
45 // border: 1px solid red;
46 // }
47 +
48 +
49 +
50 +//************************************************************************//
51 +// Generate a variable ($all-button-inputs) with a list of all html5
52 +// input types that have a button-based input, excluding button.
53 +//************************************************************************//
54 +$inputs-button-list: 'input[type="button"]',
55 + 'input[type="reset"]',
56 + 'input[type="submit"]';
57 +
58 +// Bare inputs
59 +//************************************************************************//
60 +$all-button-inputs: assign-inputs($inputs-button-list);
61 +
62 +// Hover Pseudo-class
63 +//************************************************************************//
64 +$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
65 +
66 +// Focus Pseudo-class
67 +//************************************************************************//
68 +$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
69 +
70 +// Active Pseudo-class
71 +//************************************************************************//
72 +$all-button-inputs-active: assign-inputs($inputs-button-list, active);
73 +
74 +
75 +
76 +// You must use interpolation on the variable:
77 +// #{$all-button-inputs}
78 +// #{$all-button-inputs-hover}
79 +// #{$all-button-inputs-focus}
80 +// #{$all-button-inputs-active}
81 +
82 +// Example
83 +//************************************************************************//
84 +// #{$all-button-inputs}, button {
85 +// border: 1px solid red;
86 +// }
docs/_css/bourbon/addons/_position.scss
+7 -17
@@ -1,10 +1,12 @@
1 -@mixin position ($position: relative, $coordinates: 0 0 0 0) {
1 +@mixin position ($position: relative, $coordinates: null null null null) {
2
3 @if type-of($position) == list {
4 $coordinates: $position;
5 $position: relative;
6 }
7
8 + $coordinates: unpack($coordinates);
9 +
10 $top: nth($coordinates, 1);
11 $right: nth($coordinates, 2);
12 $bottom: nth($coordinates, 3);
@@ -12,31 +14,19 @@
14
15 position: $position;
16
15 - @if $top == auto {
16 - top: $top;
17 - }
18 - @else if not(unitless($top)) {
17 + @if ($top and $top == auto) or (type-of($top) == number) {
18 top: $top;
19 }
20
22 - @if $right == auto {
23 - right: $right;
24 - }
25 - @else if not(unitless($right)) {
21 + @if ($right and $right == auto) or (type-of($right) == number) {
22 right: $right;
23 }
24
29 - @if $bottom == auto {
30 - bottom: $bottom;
31 - }
32 - @else if not(unitless($bottom)) {
25 + @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
26 bottom: $bottom;
27 }
28
36 - @if $left == auto {
37 - left: $left;
38 - }
39 - @else if not(unitless($left)) {
29 + @if ($left and $left == auto) or (type-of($left) == number) {
30 left: $left;
31 }
32 }
docs/_css/bourbon/addons/_prefixer.scss
+6 -10
@@ -1,11 +1,7 @@
1 //************************************************************************//
2 // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 //************************************************************************//
4 -$prefix-for-webkit: true !default;
5 -$prefix-for-mozilla: true !default;
6 -$prefix-for-microsoft: true !default;
7 -$prefix-for-opera: true !default;
8 -$prefix-for-spec: true !default; // required for keyframe mixin
4 +// Variables located in /settings/_prefixer.scss
5
6 @mixin prefixer ($property, $value, $prefixes) {
7 @each $prefix in $prefixes {
@@ -41,9 +37,9 @@ $prefix-for-spec: true !default; // required for keyframe mixin
37 }
38
39 @mixin disable-prefix-for-all() {
44 - $prefix-for-webkit: false;
45 - $prefix-for-mozilla: false;
46 - $prefix-for-microsoft: false;
47 - $prefix-for-opera: false;
48 - $prefix-for-spec: false;
40 + $prefix-for-webkit: false !global;
41 + $prefix-for-mozilla: false !global;
42 + $prefix-for-microsoft: false !global;
43 + $prefix-for-opera: false !global;
44 + $prefix-for-spec: false !global;
45 }
docs/_css/bourbon/addons/_retina-image.scss
+7 -8
@@ -1,28 +1,27 @@
1 -@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
1 +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
2 @if $asset-pipeline {
3 - background-image: image_url($filename + "." + $extension);
3 + background-image: image-url("#{$filename}.#{$extension}");
4 }
5 @else {
6 - background-image: url($filename + "." + $extension);
6 + background-image: url("#{$filename}.#{$extension}");
7 }
8
9 @include hidpi {
10 -
10 @if $asset-pipeline {
11 @if $retina-filename {
13 - background-image: image_url($retina-filename + "." + $extension);
12 + background-image: image-url("#{$retina-filename}.#{$extension}");
13 }
14 @else {
16 - background-image: image_url($filename + "@2x" + "." + $extension);
15 + background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
16 }
17 }
18
19 @else {
20 @if $retina-filename {
22 - background-image: url($retina-filename + "." + $extension);
21 + background-image: url("#{$retina-filename}.#{$extension}");
22 }
23 @else {
25 - background-image: url($filename + "@2x" + "." + $extension);
24 + background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
25 }
26 }
27
docs/_css/bourbon/addons/_size.scss
+9 -37
@@ -1,44 +1,16 @@
1 @mixin size($size) {
2 - @if length($size) == 1 {
3 - @if $size == auto {
4 - width: $size;
5 - height: $size;
6 - }
2 + $height: nth($size, 1);
3 + $width: $height;
4
8 - @else if unitless($size) {
9 - width: $size + px;
10 - height: $size + px;
11 - }
12 -
13 - @else if not(unitless($size)) {
14 - width: $size;
15 - height: $size;
16 - }
17 - }
18 -
19 - // Width x Height
20 - @if length($size) == 2 {
21 - $width: nth($size, 1);
5 + @if length($size) > 1 {
6 $height: nth($size, 2);
7 + }
8
24 - @if $width == auto {
25 - width: $width;
26 - }
27 - @else if not(unitless($width)) {
28 - width: $width;
29 - }
30 - @else if unitless($width) {
31 - width: $width + px;
32 - }
9 + @if $height == auto or (type-of($height) == number and not unitless($height)) {
10 + height: $height;
11 + }
12
34 - @if $height == auto {
35 - height: $height;
36 - }
37 - @else if not(unitless($height)) {
38 - height: $height;
39 - }
40 - @else if unitless($height) {
41 - height: $height + px;
42 - }
13 + @if $width == auto or (type-of($width) == number and not unitless($width)) {
14 + width: $width;
15 }
16 }
docs/_css/bourbon/addons/_timing-functions.scss
+1 -1
@@ -1,5 +1,5 @@
1 // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 -// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
2 +// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
3
4 // EASE IN
5 $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
docs/_css/bourbon/addons/_triangle.scss
+51 -13
@@ -2,44 +2,82 @@
2 height: 0;
3 width: 0;
4
5 + $width: nth($size, 1);
6 + $height: nth($size, length($size));
7 +
8 + $foreground-color: nth($color, 1);
9 + $background-color: if(length($color) == 2, nth($color, 2), transparent);
10 +
11 @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
6 - border-color: transparent;
7 - border-style: solid;
8 - border-width: $size / 2;
12 +
13 + $width: $width / 2;
14 + $height: if(length($size) > 1, $height, $height/2);
15
16 @if $direction == up {
11 - border-bottom-color: $color;
17 + border-left: $width solid $background-color;
18 + border-right: $width solid $background-color;
19 + border-bottom: $height solid $foreground-color;
20
21 } @else if $direction == right {
14 - border-left-color: $color;
22 + border-top: $width solid $background-color;
23 + border-bottom: $width solid $background-color;
24 + border-left: $height solid $foreground-color;
25
26 } @else if $direction == down {
17 - border-top-color: $color;
27 + border-left: $width solid $background-color;
28 + border-right: $width solid $background-color;
29 + border-top: $height solid $foreground-color;
30
31 } @else if $direction == left {
20 - border-right-color: $color;
32 + border-top: $width solid $background-color;
33 + border-bottom: $width solid $background-color;
34 + border-right: $height solid $foreground-color;
35 }
36 }
37
38 @else if ($direction == up-right) or ($direction == up-left) {
25 - border-top: $size solid $color;
39 + border-top: $height solid $foreground-color;
40
41 @if $direction == up-right {
28 - border-left: $size solid transparent;
42 + border-left: $width solid $background-color;
43
44 } @else if $direction == up-left {
31 - border-right: $size solid transparent;
45 + border-right: $width solid $background-color;
46 }
47 }
48
49 @else if ($direction == down-right) or ($direction == down-left) {
36 - border-bottom: $size solid $color;
50 + border-bottom: $height solid $foreground-color;
51
52 @if $direction == down-right {
39 - border-left: $size solid transparent;
53 + border-left: $width solid $background-color;
54
55 } @else if $direction == down-left {
42 - border-right: $size solid transparent;
56 + border-right: $width solid $background-color;
57 }
58 }
59 +
60 + @else if ($direction == inset-up) {
61 + border-width: $height $width;
62 + border-style: solid;
63 + border-color: $background-color $background-color $foreground-color;
64 + }
65 +
66 + @else if ($direction == inset-down) {
67 + border-width: $height $width;
68 + border-style: solid;
69 + border-color: $foreground-color $background-color $background-color;
70 + }
71 +
72 + @else if ($direction == inset-right) {
73 + border-width: $width $height;
74 + border-style: solid;
75 + border-color: $background-color $background-color $background-color $foreground-color;
76 + }
77 +
78 + @else if ($direction == inset-left) {
79 + border-width: $width $height;
80 + border-style: solid;
81 + border-color: $background-color $foreground-color $background-color $background-color;
82 + }
83 }
docs/_css/bourbon/addons/_word-wrap.scss new
+8
@@ -0,0 +1,8 @@
1 +@mixin word-wrap($wrap: break-word) {
2 + word-wrap: $wrap;
3 +
4 + @if $wrap == break-word {
5 + overflow-wrap: break-word;
6 + word-break: break-all;
7 + }
8 +}
docs/_css/bourbon/css3/_background-image.scss
+29 -35
@@ -4,45 +4,39 @@
4 //************************************************************************//
5
6 @mixin background-image($images...) {
7 - background-image: _add-prefix($images, webkit);
8 - background-image: _add-prefix($images);
9 -}
7 + $webkit-images: ();
8 + $spec-images: ();
9 +
10 + @each $image in $images {
11 + $webkit-image: ();
12 + $spec-image: ();
13 +
14 + @if (type-of($image) == string) {
15 + $url-str: str-slice($image, 0, 3);
16 + $gradient-type: str-slice($image, 0, 6);
17
11 -@function _add-prefix($images, $vendor: false) {
12 - $images-prefixed: ();
13 - $gradient-positions: false;
14 - @for $i from 1 through length($images) {
15 - $type: type-of(nth($images, $i)); // Get type of variable - List or String
16 -
17 - // If variable is a list - Gradient
18 - @if $type == list {
19 - $gradient-type: nth(nth($images, $i), 1); // linear or radial
20 - $gradient-pos: null;
21 - $gradient-args: null;
22 -
23 - @if ($gradient-type == linear) or ($gradient-type == radial) {
24 - $gradient-pos: nth(nth($images, $i), 2); // Get gradient position
25 - $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
18 + @if $url-str == "url" {
19 + $webkit-image: $image;
20 + $spec-image: $image;
21 }
27 - @else {
28 - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
22 +
23 + @else if $gradient-type == "linear" {
24 + $gradients: _linear-gradient-parser($image);
25 + $webkit-image: map-get($gradients, webkit-image);
26 + $spec-image: map-get($gradients, spec-image);
27 }
28
31 - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
32 - $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
33 - $images-prefixed: append($images-prefixed, $gradient, comma);
34 - }
35 - // If variable is a string - Image
36 - @else if $type == string {
37 - $images-prefixed: join($images-prefixed, nth($images, $i), comma);
29 + @else if $gradient-type == "radial" {
30 + $gradients: _radial-gradient-parser($image);
31 + $webkit-image: map-get($gradients, webkit-image);
32 + $spec-image: map-get($gradients, spec-image);
33 + }
34 }
35 +
36 + $webkit-images: append($webkit-images, $webkit-image, comma);
37 + $spec-images: append($spec-images, $spec-image, comma);
38 }
40 - @return $images-prefixed;
41 -}
39
43 -//Examples:
44 - //@include background-image(linear-gradient(top, orange, red));
45 - //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
46 - //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
47 - //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
48 - //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
40 + background-image: $webkit-images;
41 + background-image: $spec-images;
42 +}
docs/_css/bourbon/css3/_background.scss
+37 -85
@@ -3,101 +3,53 @@
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);
6 +@mixin background($backgrounds...) {
7 + $webkit-backgrounds: ();
8 + $spec-backgrounds: ();
9
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);
33 -}
34 -
35 -@function _extract-background-color($backgrounds) {
36 - $final-bg-layer: nth($backgrounds, length($backgrounds));
37 - @if type-of($final-bg-layer) == list {
38 - @for $i from 1 through length($final-bg-layer) {
39 - $value: nth($final-bg-layer, $i);
40 - @if type-of($value) == color {
41 - @return $value;
42 - }
43 - }
44 - }
45 - @return false;
46 -}
47 -
48 -@function _background-add-prefix($backgrounds, $vendor: false) {
49 - $backgrounds-prefixed: ();
10 + @each $background in $backgrounds {
11 + $webkit-background: ();
12 + $spec-background: ();
13 + $background-type: type-of($background);
14
51 - @for $i from 1 through length($backgrounds) {
52 - $shorthand: nth($backgrounds, $i); // Get member for current index
53 - $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
15 + @if $background-type == string or list {
16 + $background-str: if($background-type == list, nth($background, 1), $background);
17
55 - // If shorthand is a list (gradient)
56 - @if $type == list {
57 - $first-member: nth($shorthand, 1); // Get first member of shorthand
18 + $url-str: str-slice($background-str, 0, 3);
19 + $gradient-type: str-slice($background-str, 0, 6);
20
59 - // Linear Gradient
60 - @if index(linear radial, nth($first-member, 1)) {
61 - $gradient-type: nth($first-member, 1); // linear || radial
62 - $gradient-args: false;
63 - $gradient-positions: false;
64 - $shorthand-start: false;
65 - @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
66 - $gradient-positions: nth($first-member, 2);
67 - $gradient-args: nth($first-member, 3);
68 - $shorthand-start: 2;
69 - }
70 - @else { // Linear gradient only - lg(red,orange),...
71 - $gradient-positions: nth($shorthand, 2);
72 - $gradient-args: nth($shorthand, 3); // Get gradient (red, blue)
73 - }
21 + @if $url-str == "url" {
22 + $webkit-background: $background;
23 + $spec-background: $background;
24 + }
25
75 - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
76 - $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
26 + @else if $gradient-type == "linear" {
27 + $gradients: _linear-gradient-parser("#{$background}");
28 + $webkit-background: map-get($gradients, webkit-image);
29 + $spec-background: map-get($gradients, spec-image);
30 + }
31
78 - // Append any additional shorthand args to gradient
79 - @if $shorthand-start {
80 - @for $j from $shorthand-start through length($shorthand) {
81 - $gradient: join($gradient, nth($shorthand, $j), space);
82 - }
83 - }
84 - $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
32 + @else if $gradient-type == "radial" {
33 + $gradients: _radial-gradient-parser("#{$background}");
34 + $webkit-background: map-get($gradients, webkit-image);
35 + $spec-background: map-get($gradients, spec-image);
36 }
86 - // Image with additional properties
37 +
38 @else {
88 - $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
39 + $webkit-background: $background;
40 + $spec-background: $background;
41 }
42 }
91 - // If shorthand is a simple string (color or image)
92 - @else if $type == string {
93 - $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
43 +
44 + @else {
45 + $webkit-background: $background;
46 + $spec-background: $background;
47 }
48 +
49 + $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
50 + $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
51 }
96 - @return $backgrounds-prefixed;
97 -}
52
99 -//Examples:
100 - //@include background(linear-gradient(top, orange, red));
101 - //@include background(radial-gradient(circle at 40% 40%, orange, red));
102 - //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
103 - //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
53 + background: $webkit-backgrounds;
54 + background: $spec-backgrounds;
55 +}
docs/_css/bourbon/css3/_border-image.scss
+45 -41
@@ -1,48 +1,53 @@
1 -@mixin border-image($images) {
2 - -webkit-border-image: _border-add-prefix($images, webkit);
3 - -moz-border-image: _border-add-prefix($images, moz);
4 - -o-border-image: _border-add-prefix($images, o);
5 - border-image: _border-add-prefix($images);
6 -}
1 +@mixin border-image($borders...) {
2 + $webkit-borders: ();
3 + $spec-borders: ();
4 +
5 + @each $border in $borders {
6 + $webkit-border: ();
7 + $spec-border: ();
8 + $border-type: type-of($border);
9 +
10 + @if $border-type == string or list {
11 + $border-str: if($border-type == list, nth($border, 1), $border);
12 +
13 + $url-str: str-slice($border-str, 0, 3);
14 + $gradient-type: str-slice($border-str, 0, 6);
15 +
16 + @if $url-str == "url" {
17 + $webkit-border: $border;
18 + $spec-border: $border;
19 + }
20 +
21 + @else if $gradient-type == "linear" {
22 + $gradients: _linear-gradient-parser("#{$border}");
23 + $webkit-border: map-get($gradients, webkit-image);
24 + $spec-border: map-get($gradients, spec-image);
25 + }
26 +
27 + @else if $gradient-type == "radial" {
28 + $gradients: _radial-gradient-parser("#{$border}");
29 + $webkit-border: map-get($gradients, webkit-image);
30 + $spec-border: map-get($gradients, spec-image);
31 + }
32
8 -@function _border-add-prefix($images, $vendor: false) {
9 - $border-image: null;
10 - $images-type: type-of(nth($images, 1));
11 - $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
12 -
13 - // If input is a gradient
14 - @if $images-type == string {
15 - @if ($first-var == "linear") or ($first-var == "radial") {
16 - $gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
17 - $gradient-pos: nth($images, 2); // Get gradient position
18 - $gradient-args: nth($images, 3); // Get actual gradient (red, blue)
19 - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
20 - $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
33 + @else {
34 + $webkit-border: $border;
35 + $spec-border: $border;
36 + }
37 }
22 - // If input is a URL
38 +
39 @else {
24 - $border-image: $images;
25 - }
26 - }
27 - // If input is gradient or url + additional args
28 - @else if $images-type == list {
29 - $type: type-of(nth($images, 1)); // Get type of variable - List or String
30 -
31 - // If variable is a list - Gradient
32 - @if $type == list {
33 - $gradient: nth($images, 1);
34 - $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial)
35 - $gradient-pos: nth($gradient, 2); // Get gradient position
36 - $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue)
37 - $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
38 - $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
39 -
40 - @for $i from 2 through length($images) {
41 - $border-image: append($border-image, nth($images, $i));
42 - }
40 + $webkit-border: $border;
41 + $spec-border: $border;
42 }
43 +
44 + $webkit-borders: append($webkit-borders, $webkit-border, comma);
45 + $spec-borders: append($spec-borders, $spec-border, comma);
46 }
45 - @return $border-image;
47 +
48 + -webkit-border-image: $webkit-borders;
49 + border-image: $spec-borders;
50 + border-style: solid;
51 }
52
53 //Examples:
@@ -52,4 +57,3 @@
57 // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
58 // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
59 // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
55 -
docs/_css/bourbon/css3/_calc.scss new
+4
@@ -0,0 +1,4 @@
1 +@mixin calc($property, $value) {
2 + #{$property}: -webkit-calc(#{$value});
3 + #{$property}: calc(#{$value});
4 +}
docs/_css/bourbon/css3/_columns.scss
+1 -1
@@ -15,7 +15,7 @@
15
16 @mixin column-fill($arg: auto) {
17 // auto || length
18 - @include prefixer(columns-fill, $arg, webkit moz spec);
18 + @include prefixer(column-fill, $arg, webkit moz spec);
19 }
20
21 @mixin column-rule($arg) {
docs/_css/bourbon/css3/_filter.scss new
+5
@@ -0,0 +1,5 @@
1 +@mixin filter($function: none) {
2 + // <filter-function> [<filter-function]* | none
3 + @include prefixer(filter, $function, webkit spec);
4 +}
5 +
docs/_css/bourbon/css3/_flex-box.scss
+269
@@ -11,6 +11,7 @@
11 @mixin display-box {
12 display: -webkit-box;
13 display: -moz-box;
14 + display: -ms-flexbox; // IE 10
15 display: box;
16 }
17
@@ -22,16 +23,19 @@
23 @mixin box-pack($pack: start) {
24 // start|end|center|justify
25 @include prefixer(box-pack, $pack, webkit moz spec);
26 + -ms-flex-pack: $pack; // IE 10
27 }
28
29 @mixin box-align($align: stretch) {
30 // start|end|center|baseline|stretch
31 @include prefixer(box-align, $align, webkit moz spec);
32 + -ms-flex-align: $align; // IE 10
33 }
34
35 @mixin box-direction($direction: normal) {
36 // normal|reverse|inherit
37 @include prefixer(box-direction, $direction, webkit moz spec);
38 + -ms-flex-direction: $direction; // IE 10
39 }
40
41 @mixin box-lines($lines: single) {
@@ -41,12 +45,277 @@
45
46 @mixin box-ordinal-group($int: 1) {
47 @include prefixer(box-ordinal-group, $int, webkit moz spec);
48 + -ms-flex-order: $int; // IE 10
49 }
50
51 @mixin box-flex($value: 0.0) {
52 @include prefixer(box-flex, $value, webkit moz spec);
53 + -ms-flex: $value; // IE 10
54 }
55
56 @mixin box-flex-group($int: 1) {
57 @include prefixer(box-flex-group, $int, webkit moz spec);
58 }
59 +
60 +// CSS3 Flexible Box Model and property defaults
61 +// Unified attributes for 2009, 2011, and 2012 flavours.
62 +
63 +// 2009 - display (box | inline-box)
64 +// 2011 - display (flexbox | inline-flexbox)
65 +// 2012 - display (flex | inline-flex)
66 +@mixin display($value) {
67 +// flex | inline-flex
68 + @if $value == "flex" {
69 + // 2009
70 + display: -webkit-box;
71 + display: -moz-box;
72 + display: box;
73 +
74 + // 2012
75 + display: -webkit-flex;
76 + display: -moz-flex;
77 + display: -ms-flexbox; // 2011 (IE 10)
78 + display: flex;
79 + }
80 +
81 + @elseif $value == "inline-flex" {
82 + display: -webkit-inline-box;
83 + display: -moz-inline-box;
84 + display: inline-box;
85 +
86 + display: -webkit-inline-flex;
87 + display: -moz-inline-flex;
88 + display: -ms-inline-flexbox;
89 + display: inline-flex;
90 + }
91 +
92 + @else {
93 + display: $value;
94 + }
95 +}
96 +
97 +// 2009 - box-flex (integer)
98 +// 2011 - flex (decimal | width decimal)
99 +// 2012 - flex (integer integer width)
100 +@mixin flex($value) {
101 +
102 + // Grab flex-grow for older browsers.
103 + $flex-grow: nth($value, 1);
104 +
105 + // 2009
106 + @include prefixer(box-flex, $flex-grow, webkit moz spec);
107 +
108 + // 2011 (IE 10), 2012
109 + @include prefixer(flex, $value, webkit moz ms spec);
110 +}
111 +
112 +// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
113 +// - box-direction (normal | reverse)
114 +// 2011 - flex-direction (row | row-reverse | column | column-reverse)
115 +// 2012 - flex-direction (row | row-reverse | column | column-reverse)
116 +@mixin flex-direction($value: row) {
117 +
118 + // Alt values.
119 + $value-2009: $value;
120 + $value-2011: $value;
121 + $direction: "normal";
122 +
123 + @if $value == row {
124 + $value-2009: horizontal;
125 + }
126 +
127 + @elseif $value == "row-reverse" {
128 + $value-2009: horizontal;
129 + $direction: reverse;
130 + }
131 +
132 + @elseif $value == column {
133 + $value-2009: vertical;
134 + }
135 +
136 + @elseif $value == "column-reverse" {
137 + $value-2009: vertical;
138 + $direction: reverse;
139 + }
140 +
141 + // 2009
142 + @include prefixer(box-orient, $value-2009, webkit moz spec);
143 + @if $direction == "reverse" {
144 + @include prefixer(box-direction, $direction, webkit moz spec);
145 + }
146 +
147 + // 2012
148 + @include prefixer(flex-direction, $value, webkit moz spec);
149 +
150 + // 2011 (IE 10)
151 + -ms-flex-direction: $value;
152 +}
153 +
154 +// 2009 - box-lines (single | multiple)
155 +// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
156 +// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
157 +@mixin flex-wrap($value: nowrap) {
158 +
159 + // Alt values.
160 + $alt-value: $value;
161 + @if $value == nowrap {
162 + $alt-value: single;
163 + }
164 +
165 + @elseif $value == wrap {
166 + $alt-value: multiple;
167 + }
168 +
169 + @elseif $value == "wrap-reverse" {
170 + $alt-value: multiple;
171 + }
172 +
173 + @include prefixer(box-lines, $alt-value, webkit moz spec);
174 + @include prefixer(flex-wrap, $value, webkit moz ms spec);
175 +}
176 +
177 +// 2009 - TODO: parse values into flex-direction/flex-wrap
178 +// 2011 - TODO: parse values into flex-direction/flex-wrap
179 +// 2012 - flex-flow (flex-direction || flex-wrap)
180 +@mixin flex-flow($value) {
181 + @include prefixer(flex-flow, $value, webkit moz spec);
182 +}
183 +
184 +// 2009 - box-ordinal-group (integer)
185 +// 2011 - flex-order (integer)
186 +// 2012 - order (integer)
187 +@mixin order($int: 0) {
188 + // 2009
189 + @include prefixer(box-ordinal-group, $int, webkit moz spec);
190 +
191 + // 2012
192 + @include prefixer(order, $int, webkit moz spec);
193 +
194 + // 2011 (IE 10)
195 + -ms-flex-order: $int;
196 +}
197 +
198 +// 2012 - flex-grow (number)
199 +@mixin flex-grow($number: 0) {
200 + @include prefixer(flex-grow, $number, webkit moz spec);
201 + -ms-flex-positive: $number;
202 +}
203 +
204 +// 2012 - flex-shrink (number)
205 +@mixin flex-shrink($number: 1) {
206 + @include prefixer(flex-shrink, $number, webkit moz spec);
207 + -ms-flex-negative: $number;
208 +}
209 +
210 +// 2012 - flex-basis (number)
211 +@mixin flex-basis($width: auto) {
212 + @include prefixer(flex-basis, $width, webkit moz spec);
213 + -ms-flex-preferred-size: $width;
214 +}
215 +
216 +// 2009 - box-pack (start | end | center | justify)
217 +// 2011 - flex-pack (start | end | center | justify)
218 +// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
219 +@mixin justify-content ($value: flex-start) {
220 +
221 + // Alt values.
222 + $alt-value: $value;
223 + @if $value == "flex-start" {
224 + $alt-value: start;
225 + }
226 +
227 + @elseif $value == "flex-end" {
228 + $alt-value: end;
229 + }
230 +
231 + @elseif $value == "space-between" {
232 + $alt-value: justify;
233 + }
234 +
235 + @elseif $value == "space-around" {
236 + $alt-value: center;
237 + }
238 +
239 + // 2009
240 + @include prefixer(box-pack, $alt-value, webkit moz spec);
241 +
242 + // 2012
243 + @include prefixer(justify-content, $value, webkit moz ms o spec);
244 +
245 + // 2011 (IE 10)
246 + -ms-flex-pack: $alt-value;
247 +}
248 +
249 +// 2009 - box-align (start | end | center | baseline | stretch)
250 +// 2011 - flex-align (start | end | center | baseline | stretch)
251 +// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
252 +@mixin align-items($value: stretch) {
253 +
254 + $alt-value: $value;
255 +
256 + @if $value == "flex-start" {
257 + $alt-value: start;
258 + }
259 +
260 + @elseif $value == "flex-end" {
261 + $alt-value: end;
262 + }
263 +
264 + // 2009
265 + @include prefixer(box-align, $alt-value, webkit moz spec);
266 +
267 + // 2012
268 + @include prefixer(align-items, $value, webkit moz ms o spec);
269 +
270 + // 2011 (IE 10)
271 + -ms-flex-align: $alt-value;
272 +}
273 +
274 +// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
275 +// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
276 +@mixin align-self($value: auto) {
277 +
278 + $value-2011: $value;
279 + @if $value == "flex-start" {
280 + $value-2011: start;
281 + }
282 +
283 + @elseif $value == "flex-end" {
284 + $value-2011: end;
285 + }
286 +
287 + // 2012
288 + @include prefixer(align-self, $value, webkit moz spec);
289 +
290 + // 2011 (IE 10)
291 + -ms-flex-item-align: $value-2011;
292 +}
293 +
294 +// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
295 +// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
296 +@mixin align-content($value: stretch) {
297 +
298 + $value-2011: $value;
299 + @if $value == "flex-start" {
300 + $value-2011: start;
301 + }
302 +
303 + @elseif $value == "flex-end" {
304 + $value-2011: end;
305 + }
306 +
307 + @elseif $value == "space-between" {
308 + $value-2011: justify;
309 + }
310 +
311 + @elseif $value == "space-around" {
312 + $value-2011: distribute;
313 + }
314 +
315 + // 2012
316 + @include prefixer(align-content, $value, webkit moz spec);
317 +
318 + // 2011 (IE 10)
319 + -ms-flex-line-pack: $value-2011;
320 +}
321 +
docs/_css/bourbon/css3/_font-face.scss
+1 -1
@@ -1,6 +1,6 @@
1 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
2
3 -@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
3 +@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
4 @font-face {
5 font-family: $font-family;
6 font-weight: $weight;
docs/_css/bourbon/css3/_font-feature-settings.scss new
+10
@@ -0,0 +1,10 @@
1 +// Font feature settings mixin and property default.
2 +// Examples: @include font-feature-settings("liga");
3 +// @include font-feature-settings("lnum" false);
4 +// @include font-feature-settings("pnum" 1, "kern" 0);
5 +// @include font-feature-settings("ss01", "ss02");
6 +
7 +@mixin font-feature-settings($settings...) {
8 + @if length($settings) == 0 { $settings: none; }
9 + @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
10 +}
\ No newline at end of file
docs/_css/bourbon/css3/_hyphens.scss new
+4
@@ -0,0 +1,4 @@
1 +@mixin hyphens($hyphenation: none) {
2 +// none | manual | auto
3 + @include prefixer(hyphens, $hyphenation, webkit moz ms spec);
4 +}
\ No newline at end of file
docs/_css/bourbon/css3/_image-rendering.scss
+4 -3
@@ -1,10 +1,11 @@
1 -@mixin image-rendering ($mode:optimizeQuality) {
1 +@mixin image-rendering ($mode:auto) {
2
3 - @if ($mode == optimize-contrast) {
3 + @if ($mode == crisp-edges) {
4 + -ms-interpolation-mode: nearest-neighbor; // IE8+
5 image-rendering: -moz-crisp-edges;
6 image-rendering: -o-crisp-edges;
7 image-rendering: -webkit-optimize-contrast;
7 - image-rendering: optimize-contrast;
8 + image-rendering: crisp-edges;
9 }
10
11 @else {
docs/_css/bourbon/css3/_inline-block.scss deleted
-8
@@ -1,8 +0,0 @@
1 -// Legacy support for inline-block in IE7 (maybe IE6)
2 -@mixin inline-block {
3 - display: inline-block;
4 - vertical-align: baseline;
5 - zoom: 1;
6 - *display: inline;
7 - *vertical-align: auto;
8 -}
docs/_css/bourbon/css3/_keyframes.scss
+9 -17
@@ -8,36 +8,28 @@
8
9 @if $original-prefix-for-webkit {
10 @include disable-prefix-for-all();
11 - $prefix-for-webkit: true;
11 + $prefix-for-webkit: true !global;
12 @-webkit-keyframes #{$name} {
13 @content;
14 }
15 }
16 @if $original-prefix-for-mozilla {
17 @include disable-prefix-for-all();
18 - $prefix-for-mozilla: true;
18 + $prefix-for-mozilla: true !global;
19 @-moz-keyframes #{$name} {
20 @content;
21 }
22 }
23 - @if $original-prefix-for-opera {
24 - @include disable-prefix-for-all();
25 - $prefix-for-opera: true;
26 - @-o-keyframes #{$name} {
27 - @content;
28 - }
29 - }
23 +
24 + $prefix-for-webkit: $original-prefix-for-webkit !global;
25 + $prefix-for-mozilla: $original-prefix-for-mozilla !global;
26 + $prefix-for-microsoft: $original-prefix-for-microsoft !global;
27 + $prefix-for-opera: $original-prefix-for-opera !global;
28 + $prefix-for-spec: $original-prefix-for-spec !global;
29 +
30 @if $original-prefix-for-spec {
31 - @include disable-prefix-for-all();
32 - $prefix-for-spec: true;
31 @keyframes #{$name} {
32 @content;
33 }
34 }
37 -
38 - $prefix-for-webkit: $original-prefix-for-webkit;
39 - $prefix-for-mozilla: $original-prefix-for-mozilla;
40 - $prefix-for-microsoft: $original-prefix-for-microsoft;
41 - $prefix-for-opera: $original-prefix-for-opera;
42 - $prefix-for-spec: $original-prefix-for-spec;
35 }
docs/_css/bourbon/css3/_linear-gradient.scss
+7 -10
@@ -1,11 +1,9 @@
1 -@mixin linear-gradient($pos, $G1, $G2: false,
2 - $G3: false, $G4: false,
3 - $G5: false, $G6: false,
4 - $G7: false, $G8: false,
5 - $G9: false, $G10: false,
6 - $deprecated-pos1: left top,
7 - $deprecated-pos2: left bottom,
8 - $fallback: false) {
1 +@mixin linear-gradient($pos, $G1, $G2: null,
2 + $G3: null, $G4: null,
3 + $G5: null, $G6: null,
4 + $G7: null, $G8: null,
5 + $G9: null, $G10: null,
6 + $fallback: null) {
7 // Detect what type of value exists in $pos
8 $pos-type: type-of(nth($pos, 1));
9 $pos-spec: null;
@@ -24,7 +22,7 @@
22 $pos-spec: nth($positions, 2);
23 }
24
27 - $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
25 + $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
26
27 // Set $G1 as the default fallback color
28 $fallback-color: nth($G1, 1);
@@ -35,7 +33,6 @@
33 }
34
35 background-color: $fallback-color;
38 - background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
36 background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
37 background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
38 }
docs/_css/bourbon/css3/_placeholder.scss
+3 -24
@@ -1,29 +1,8 @@
1 -$placeholders: '-webkit-input-placeholder',
2 - '-moz-placeholder',
3 - '-ms-input-placeholder';
4 -
1 @mixin placeholder {
2 + $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
3 @each $placeholder in $placeholders {
7 - @if $placeholder == "-webkit-input-placeholder" {
8 - &::#{$placeholder} {
9 - @content;
10 - }
11 - }
12 - @else if $placeholder == "-moz-placeholder" {
13 - // FF 18-
14 - &:#{$placeholder} {
15 - @content;
16 - }
17 -
18 - // FF 19+
19 - &::#{$placeholder} {
20 - @content;
21 - }
22 - }
23 - @else {
24 - &:#{$placeholder} {
25 - @content;
26 - }
4 + &:#{$placeholder}-placeholder {
5 + @content;
6 }
7 }
8 }
docs/_css/bourbon/css3/_radial-gradient.scss
+6 -11
@@ -1,16 +1,12 @@
1 // Requires Sass 3.1+
2 @mixin radial-gradient($G1, $G2,
3 - $G3: false, $G4: false,
4 - $G5: false, $G6: false,
5 - $G7: false, $G8: false,
6 - $G9: false, $G10: false,
3 + $G3: null, $G4: null,
4 + $G5: null, $G6: null,
5 + $G7: null, $G8: null,
6 + $G9: null, $G10: null,
7 $pos: null,
8 $shape-size: null,
9 - $deprecated-pos1: center center,
10 - $deprecated-pos2: center center,
11 - $deprecated-radius1: 0,
12 - $deprecated-radius2: 460,
13 - $fallback: false) {
9 + $fallback: null) {
10
11 $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
12 $G1: nth($data, 1);
@@ -18,7 +14,7 @@
14 $pos: nth($data, 3);
15 $shape-size: nth($data, 4);
16
21 - $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
17 + $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
18
19 // Strip deprecated cover/contain for spec
20 $shape-size-spec: _shape-size-stripper($shape-size);
@@ -38,7 +34,6 @@
34 $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
35
36 background-color: $fallback-color;
41 - background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
37 background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
38 background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
39 }
docs/_css/bourbon/css3/_transition.scss
+50 -7
@@ -1,16 +1,59 @@
1 // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 -// Example: @include transition (all, 2.0s, ease-in-out);
3 -// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 -// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
2 +// Example: @include transition (all 2s ease-in-out);
3 +// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
4 +// @include transition-property (transform, opacity);
5
6 @mixin transition ($properties...) {
7 - @if length($properties) >= 1 {
8 - @include prefixer(transition, $properties, webkit moz spec);
7 + // Fix for vendor-prefix transform property
8 + $needs-prefixes: false;
9 + $webkit: ();
10 + $moz: ();
11 + $spec: ();
12 +
13 + // Create lists for vendor-prefixed transform
14 + @each $list in $properties {
15 + @if nth($list, 1) == "transform" {
16 + $needs-prefixes: true;
17 + $list1: -webkit-transform;
18 + $list2: -moz-transform;
19 + $list3: ();
20 +
21 + @each $var in $list {
22 + $list3: join($list3, $var);
23 +
24 + @if $var != "transform" {
25 + $list1: join($list1, $var);
26 + $list2: join($list2, $var);
27 + }
28 + }
29 +
30 + $webkit: append($webkit, $list1);
31 + $moz: append($moz, $list2);
32 + $spec: append($spec, $list3);
33 + }
34 +
35 + // Create lists for non-prefixed transition properties
36 + @else {
37 + $webkit: append($webkit, $list, comma);
38 + $moz: append($moz, $list, comma);
39 + $spec: append($spec, $list, comma);
40 + }
41 }
42
43 + @if $needs-prefixes {
44 + -webkit-transition: $webkit;
45 + -moz-transition: $moz;
46 + transition: $spec;
47 + }
48 @else {
12 - $properties: all 0.15s ease-out 0;
13 - @include prefixer(transition, $properties, webkit moz spec);
49 + @if length($properties) >= 1 {
50 + @include prefixer(transition, $properties, webkit moz spec);
51 + }
52 +
53 + @else {
54 + $properties: all 0.15s ease-out 0s;
55 + @include prefixer(transition, $properties, webkit moz spec);
56 + }
57 }
58 }
59
docs/_css/bourbon/functions/_assign.scss new
+11
@@ -0,0 +1,11 @@
1 +@function assign-inputs($inputs, $pseudo: null) {
2 + $list : ();
3 +
4 + @each $input in $inputs {
5 + $input: unquote($input);
6 + $input: if($pseudo, $input + ":" + $pseudo, $input);
7 + $list: append($list, $input, comma);
8 + }
9 +
10 + @return $list;
11 +}
\ No newline at end of file
docs/_css/bourbon/functions/_color-lightness.scss new
+13
@@ -0,0 +1,13 @@
1 +// Programatically determines whether a color is light or dark
2 +// Returns a boolean
3 +// More details here http://robots.thoughtbot.com/closer-look-color-lightness
4 +
5 +@function is-light($hex-color) {
6 + $-local-red: red(rgba($hex-color, 1.0));
7 + $-local-green: green(rgba($hex-color, 1.0));
8 + $-local-blue: blue(rgba($hex-color, 1.0));
9 +
10 + $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
11 +
12 + @return $-local-lightness > .6;
13 +}
docs/_css/bourbon/functions/_compact.scss deleted
-11
@@ -1,11 +0,0 @@
1 -// Remove `false` values from a list
2 -
3 -@function compact($vars...) {
4 - $list: ();
5 - @each $var in $vars {
6 - @if $var {
7 - $list: append($list, $var, comma);
8 - }
9 - }
10 - @return $list;
11 -}
docs/_css/bourbon/functions/_golden-ratio.scss new
+3
@@ -0,0 +1,3 @@
1 +@function golden-ratio($value, $increment) {
2 + @return modular-scale($value, $increment, $golden)
3 +}
docs/_css/bourbon/functions/_linear-gradient.scss deleted
-13
@@ -1,13 +0,0 @@
1 -@function linear-gradient($pos, $gradients...) {
2 - $type: linear;
3 - $pos-type: type-of(nth($pos, 1));
4 -
5 - // if $pos doesn't exist, fix $gradient
6 - @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
7 - $gradients: zip($pos $gradients);
8 - $pos: false;
9 - }
10 -
11 - $type-gradient: $type, $pos, $gradients;
12 - @return $type-gradient;
13 -}
docs/_css/bourbon/functions/_modular-scale.scss
+54 -28
@@ -1,40 +1,66 @@
1 +// Scaling Variables
2 +$golden: 1.618;
3 +$minor-second: 1.067;
4 +$major-second: 1.125;
5 +$minor-third: 1.2;
6 +$major-third: 1.25;
7 +$perfect-fourth: 1.333;
8 +$augmented-fourth: 1.414;
9 +$perfect-fifth: 1.5;
10 +$minor-sixth: 1.6;
11 +$major-sixth: 1.667;
12 +$minor-seventh: 1.778;
13 +$major-seventh: 1.875;
14 +$octave: 2;
15 +$major-tenth: 2.5;
16 +$major-eleventh: 2.667;
17 +$major-twelfth: 3;
18 +$double-octave: 4;
19 +
20 @function modular-scale($value, $increment, $ratio) {
21 + $v1: nth($value, 1);
22 + $v2: nth($value, length($value));
23 + $value: $v1;
24 +
25 + // scale $v2 to just above $v1
26 + @while $v2 > $v1 {
27 + $v2: ($v2 / $ratio); // will be off-by-1
28 + }
29 + @while $v2 < $v1 {
30 + $v2: ($v2 * $ratio); // will fix off-by-1
31 + }
32 +
33 + // check AFTER scaling $v2 to prevent double-counting corner-case
34 + $double-stranded: $v2 > $v1;
35 +
36 @if $increment > 0 {
37 @for $i from 1 through $increment {
4 - $value: ($value * $ratio);
38 + @if $double-stranded and ($v1 * $ratio) > $v2 {
39 + $value: $v2;
40 + $v2: ($v2 * $ratio);
41 + } @else {
42 + $v1: ($v1 * $ratio);
43 + $value: $v1;
44 + }
45 }
46 }
47
48 @if $increment < 0 {
9 - $increment: abs($increment);
10 - @for $i from 1 through $increment {
11 - $value: ($value / $ratio);
49 + // adjust $v2 to just below $v1
50 + @if $double-stranded {
51 + $v2: ($v2 / $ratio);
52 + }
53 +
54 + @for $i from $increment through -1 {
55 + @if $double-stranded and ($v1 / $ratio) < $v2 {
56 + $value: $v2;
57 + $v2: ($v2 / $ratio);
58 + } @else {
59 + $v1: ($v1 / $ratio);
60 + $value: $v1;
61 + }
62 }
63 }
64
65 @return $value;
66 }
17 -
18 -// div {
19 -// Increment Up GR with positive value
20 -// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
21 -//
22 -// Increment Down GR with negative value
23 -// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
24 -//
25 -// Can be used with ceil(round up) or floor(round down)
26 -// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
27 -// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
28 -// }
29 -//
30 -// modularscale.com
31 -
32 -@function golden-ratio($value, $increment) {
33 - @return modular-scale($value, $increment, 1.618)
34 -}
35 -
36 -// div {
37 -// font-size: golden-ratio(14px, 1); // returns: 22.652px
38 -// }
39 -//
40 -// goldenratiocalculator.com
docs/_css/bourbon/functions/_px-to-em.scss
+7 -2
@@ -2,7 +2,12 @@
2 // eg. for a relational value of 12px write em(12) when the parent is 16px
3 // if the parent is another value say 24px write em(12, 24)
4
5 -@function em($pxval, $base: 16) {
5 +@function em($pxval, $base: $em-base) {
6 + @if not unitless($pxval) {
7 + $pxval: strip-units($pxval);
8 + }
9 + @if not unitless($base) {
10 + $base: strip-units($base);
11 + }
12 @return ($pxval / $base) * 1em;
13 }
8 -
docs/_css/bourbon/functions/_px-to-rem.scss new
+15
@@ -0,0 +1,15 @@
1 +// Convert pixels to rems
2 +// eg. for a relational value of 12px write rem(12)
3 +// Assumes $em-base is the font-size of <html>
4 +
5 +@function rem($pxval) {
6 + @if not unitless($pxval) {
7 + $pxval: strip-units($pxval);
8 + }
9 +
10 + $base: $em-base;
11 + @if not unitless($base) {
12 + $base: strip-units($base);
13 + }
14 + @return ($pxval / $base) * 1rem;
15 +}
docs/_css/bourbon/functions/_radial-gradient.scss deleted
-23
@@ -1,23 +0,0 @@
1 -// This function is required and used by the background-image mixin.
2 -@function radial-gradient($G1, $G2,
3 - $G3: false, $G4: false,
4 - $G5: false, $G6: false,
5 - $G7: false, $G8: false,
6 - $G9: false, $G10: false,
7 - $pos: null,
8 - $shape-size: null) {
9 -
10 - $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
11 - $G1: nth($data, 1);
12 - $G2: nth($data, 2);
13 - $pos: nth($data, 3);
14 - $shape-size: nth($data, 4);
15 -
16 - $type: radial;
17 - $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
18 -
19 - $type-gradient: $type, $shape-size $pos, $gradient;
20 - @return $type-gradient;
21 -}
22 -
23 -
docs/_css/bourbon/functions/_strip-units.scss new
+5
@@ -0,0 +1,5 @@
1 +// Srtips the units from a value. e.g. 12px -> 12
2 +
3 +@function strip-units($val) {
4 + @return ($val / ($val * 0 + 1));
5 +}
docs/_css/bourbon/functions/_unpack.scss new
+17
@@ -0,0 +1,17 @@
1 +// Convert shorthand to the 4-value syntax
2 +
3 +@function unpack($shorthand) {
4 + @if length($shorthand) == 1 {
5 + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
6 + }
7 + @else if length($shorthand) == 2 {
8 + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
9 + }
10 + @else if length($shorthand) == 3 {
11 + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
12 + }
13 + @else {
14 + @return $shorthand;
15 + }
16 +}
17 +
docs/_css/bourbon/helpers/_convert-units.scss new
+15
@@ -0,0 +1,15 @@
1 +//************************************************************************//
2 +// Helper function for str-to-num fn.
3 +// Source: http://sassmeister.com/gist/9647408
4 +//************************************************************************//
5 +@function _convert-units($number, $unit) {
6 + $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
7 + $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
8 + $index: index($strings, $unit);
9 +
10 + @if not $index {
11 + @warn "Unknown unit `#{$unit}`.";
12 + @return false;
13 + }
14 + @return $number * nth($units, $index);
15 +}
docs/_css/bourbon/helpers/_deprecated-webkit-gradient.scss deleted
-39
@@ -1,39 +0,0 @@
1 -// Render Deprecated Webkit Gradient - Linear || Radial
2 -//************************************************************************//
3 -@function _deprecated-webkit-gradient($type,
4 - $deprecated-pos1, $deprecated-pos2,
5 - $full,
6 - $deprecated-radius1: false, $deprecated-radius2: false) {
7 - $gradient-list: ();
8 - $gradient: false;
9 - $full-length: length($full);
10 - $percentage: false;
11 - $gradient-type: $type;
12 -
13 - @for $i from 1 through $full-length {
14 - $gradient: nth($full, $i);
15 -
16 - @if length($gradient) == 2 {
17 - $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
18 - $gradient-list: join($gradient-list, $color-stop, comma);
19 - }
20 - @else if $gradient != null {
21 - @if $i == $full-length {
22 - $percentage: 100%;
23 - }
24 - @else {
25 - $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
26 - }
27 - $color-stop: color-stop(unquote($percentage), $gradient);
28 - $gradient-list: join($gradient-list, $color-stop, comma);
29 - }
30 - }
31 -
32 - @if $type == radial {
33 - $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
34 - }
35 - @else if $type == linear {
36 - $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
37 - }
38 - @return $gradient;
39 -}
docs/_css/bourbon/helpers/_is-num.scss new
+8
@@ -0,0 +1,8 @@
1 +//************************************************************************//
2 +// Helper for linear-gradient-parser
3 +//************************************************************************//
4 +@function _is-num($char) {
5 + $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9;
6 + $index: index($values, $char);
7 + @return if($index, true, false);
8 +}
docs/_css/bourbon/helpers/_linear-angle-parser.scss new
+25
@@ -0,0 +1,25 @@
1 +// Private function for linear-gradient-parser
2 +@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
3 + $offset: null;
4 + $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
5 + $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
6 +
7 + @if ($unit-long == "grad") or
8 + ($unit-long == "turn") {
9 + $offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
10 + }
11 +
12 + @else if ($unit-short == "deg") or
13 + ($unit-short == "rad") {
14 + $offset: if($unit-short == "deg", -90 * 3, 1.6rad);
15 + }
16 +
17 + @if $offset {
18 + $num: _str-to-num($first-val);
19 +
20 + @return (
21 + webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
22 + spec-image: $image
23 + );
24 + }
25 +}
docs/_css/bourbon/helpers/_linear-gradient-parser.scss new
+41
@@ -0,0 +1,41 @@
1 +@function _linear-gradient-parser($image) {
2 + $image: unquote($image);
3 + $gradients: ();
4 + $start: str-index($image, "(");
5 + $end: str-index($image, ",");
6 + $first-val: str-slice($image, $start + 1, $end - 1);
7 +
8 + $prefix: str-slice($image, 0, $start);
9 + $suffix: str-slice($image, $end, str-length($image));
10 +
11 + $has-multiple-vals: str-index($first-val, " ");
12 + $has-single-position: unquote(_position-flipper($first-val) + "");
13 + $has-angle: _is-num(str-slice($first-val, 0, 0));
14 +
15 + @if $has-multiple-vals {
16 + $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
17 + }
18 +
19 + @else if $has-single-position != "" {
20 + $pos: unquote($has-single-position + "");
21 +
22 + $gradients: (
23 + webkit-image: -webkit- + $image,
24 + spec-image: $prefix + "to " + $pos + $suffix
25 + );
26 + }
27 +
28 + @else if $has-angle {
29 + // Rotate degree for webkit
30 + $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
31 + }
32 +
33 + @else {
34 + $gradients: (
35 + webkit-image: -webkit- + $image,
36 + spec-image: $image
37 + );
38 + }
39 +
40 + @return $gradients;
41 +}
docs/_css/bourbon/helpers/_linear-side-corner-parser.scss new
+31
@@ -0,0 +1,31 @@
1 +// Private function for linear-gradient-parser
2 +@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
3 + $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
4 + $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
5 + $val-3: null;
6 + $has-val-3: str-index($val-2, " ");
7 +
8 + @if $has-val-3 {
9 + $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
10 + $val-2: str-slice($val-2, 0, $has-val-3 - 1);
11 + }
12 +
13 + $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
14 + $pos: unquote($pos + "");
15 +
16 + // Use old spec for webkit
17 + @if $val-1 == "to" {
18 + @return (
19 + webkit-image: -webkit- + $prefix + $pos + $suffix,
20 + spec-image: $image
21 + );
22 + }
23 +
24 + // Bring the code up to spec
25 + @else {
26 + @return (
27 + webkit-image: -webkit- + $image,
28 + spec-image: $prefix + "to " + $pos + $suffix
29 + );
30 + }
31 +}
docs/_css/bourbon/helpers/_radial-arg-parser.scss
+4 -4
@@ -22,7 +22,7 @@
22 $pos: $pos nth($value, $i);
23 }
24 }
25 - $G1: false;
25 + $G1: null;
26 }
27
28 // If not spec calculate correct values
@@ -38,7 +38,7 @@
38 $pos: $value;
39
40 @if $pos == $G1 {
41 - $G1: false;
41 + $G1: null;
42 }
43 }
44
@@ -55,11 +55,11 @@
55 $shape-size: $value;
56
57 @if $value == $G1 {
58 - $G1: false;
58 + $G1: null;
59 }
60
61 @else if $value == $G2 {
62 - $G2: false;
62 + $G2: null;
63 }
64 }
65 }
docs/_css/bourbon/helpers/_radial-gradient-parser.scss new
+50
@@ -0,0 +1,50 @@
1 +@function _radial-gradient-parser($image) {
2 + $image: unquote($image);
3 + $gradients: ();
4 + $start: str-index($image, "(");
5 + $end: str-index($image, ",");
6 + $first-val: str-slice($image, $start + 1, $end - 1);
7 +
8 + $prefix: str-slice($image, 0, $start);
9 + $suffix: str-slice($image, $end, str-length($image));
10 +
11 + $is-spec-syntax: str-index($first-val, "at");
12 +
13 + @if $is-spec-syntax and $is-spec-syntax > 1 {
14 + $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
15 + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
16 + $pos: append($pos, $keyword, comma);
17 +
18 + $gradients: (
19 + webkit-image: -webkit- + $prefix + $pos + $suffix,
20 + spec-image: $image
21 + )
22 + }
23 +
24 + @else if $is-spec-syntax == 1 {
25 + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
26 +
27 + $gradients: (
28 + webkit-image: -webkit- + $prefix + $pos + $suffix,
29 + spec-image: $image
30 + )
31 + }
32 +
33 + @else if str-index($image, "cover") or str-index($image, "contain") {
34 + @warn "Radial-gradient needs to be updated to conform to latest spec.";
35 +
36 + $gradients: (
37 + webkit-image: null,
38 + spec-image: $image
39 + )
40 + }
41 +
42 + @else {
43 + $gradients: (
44 + webkit-image: -webkit- + $image,
45 + spec-image: $image
46 + )
47 + }
48 +
49 + @return $gradients;
50 +}
docs/_css/bourbon/helpers/_str-to-num.scss new
+50
@@ -0,0 +1,50 @@
1 +//************************************************************************//
2 +// Helper function for linear/radial-gradient-parsers.
3 +// Source: http://sassmeister.com/gist/9647408
4 +//************************************************************************//
5 +@function _str-to-num($string) {
6 + // Matrices
7 + $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
8 + $numbers: 0 1 2 3 4 5 6 7 8 9;
9 +
10 + // Result
11 + $result: 0;
12 + $divider: 0;
13 + $minus: false;
14 +
15 + // Looping through all characters
16 + @for $i from 1 through str-length($string) {
17 + $character: str-slice($string, $i, $i);
18 + $index: index($strings, $character);
19 +
20 + @if $character == '-' {
21 + $minus: true;
22 + }
23 +
24 + @else if $character == '.' {
25 + $divider: 1;
26 + }
27 +
28 + @else {
29 + @if not $index {
30 + $result: if($minus, $result * -1, $result);
31 + @return _convert-units($result, str-slice($string, $i));
32 + }
33 +
34 + $number: nth($numbers, $index);
35 +
36 + @if $divider == 0 {
37 + $result: $result * 10;
38 + }
39 +
40 + @else {
41 + // Move the decimal dot to the left
42 + $divider: $divider * 10;
43 + $number: $number / $divider;
44 + }
45 +
46 + $result: $result + $number;
47 + }
48 + }
49 + @return if($minus, $result * -1, $result);
50 +}
docs/_css/bourbon/settings/_asset-pipeline.scss new
+1
@@ -0,0 +1 @@
1 +$asset-pipeline: false !default;
docs/_css/bourbon/settings/_prefixer.scss new
+6
@@ -0,0 +1,6 @@
1 +// Variable settings for /addons/prefixer.scss
2 +$prefix-for-webkit: true !default;
3 +$prefix-for-mozilla: true !default;
4 +$prefix-for-microsoft: true !default;
5 +$prefix-for-opera: true !default;
6 +$prefix-for-spec: true !default; // required for keyframe mixin
docs/_css/bourbon/settings/_px-to-em.scss new
+1
@@ -0,0 +1 @@
1 +$em-base: 16px !default;