smock 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. data/Gemfile.lock +3 -3
  2. data/README.md +5 -0
  3. data/app/assets/stylesheets/includes/_colors.css.sass +16 -0
  4. data/app/assets/stylesheets/includes/_forms.css.sass +29 -0
  5. data/app/assets/stylesheets/includes/_grid.css.sass +13 -0
  6. data/app/assets/stylesheets/includes/_layouts.css.sass +28 -0
  7. data/app/assets/stylesheets/includes/_mixins.css.sass +66 -0
  8. data/app/assets/stylesheets/includes/_typography.css.sass +58 -0
  9. data/app/assets/stylesheets/includes/_typography_settings.sass +22 -0
  10. data/app/assets/stylesheets/includes/icons.css.sass +149 -0
  11. data/app/assets/stylesheets/modules/_asset_uploader.css.sass +54 -0
  12. data/app/assets/stylesheets/modules/_categories.css.sass +32 -0
  13. data/app/assets/stylesheets/modules/_footer.css.sass +100 -0
  14. data/app/assets/stylesheets/modules/_header.css.sass +32 -0
  15. data/app/assets/stylesheets/modules/_hero.css.sass +69 -0
  16. data/app/assets/stylesheets/modules/_nav.css.sass +19 -0
  17. data/app/assets/stylesheets/modules/_pagination.css.sass +5 -0
  18. data/app/assets/stylesheets/modules/_search_filters.css.sass +34 -0
  19. data/app/assets/stylesheets/modules/_service.css.sass +58 -0
  20. data/app/assets/stylesheets/modules/_styleguide.css.sass +73 -0
  21. data/app/assets/stylesheets/modules/_testimonials.css.sass +27 -0
  22. data/app/assets/stylesheets/modules/form/_credit_card.css.sass +15 -0
  23. data/app/assets/stylesheets/modules/form/_payment_method.css.sass +28 -0
  24. data/app/assets/stylesheets/modules/header/_categories.css.sass +40 -0
  25. data/app/assets/stylesheets/modules/header/_dropdown.css.sass +55 -0
  26. data/app/assets/stylesheets/modules/header/_nav.css.sass +58 -0
  27. data/app/assets/stylesheets/modules/header/_search.css.sass +32 -0
  28. data/app/assets/stylesheets/modules/service/_favorites.css.sass +82 -0
  29. data/app/assets/stylesheets/smock.sass +181 -0
  30. data/app/assets/stylesheets/thirdparty/bourbon/_bourbon-deprecated-upcoming.scss +13 -0
  31. data/app/assets/stylesheets/thirdparty/bourbon/_bourbon.scss +74 -0
  32. data/app/assets/stylesheets/thirdparty/bourbon/addons/_button.scss +374 -0
  33. data/app/assets/stylesheets/thirdparty/bourbon/addons/_clearfix.scss +23 -0
  34. data/app/assets/stylesheets/thirdparty/bourbon/addons/_directional-values.scss +111 -0
  35. data/app/assets/stylesheets/thirdparty/bourbon/addons/_ellipsis.scss +7 -0
  36. data/app/assets/stylesheets/thirdparty/bourbon/addons/_font-family.scss +5 -0
  37. data/app/assets/stylesheets/thirdparty/bourbon/addons/_hide-text.scss +10 -0
  38. data/app/assets/stylesheets/thirdparty/bourbon/addons/_html5-input-types.scss +110 -0
  39. data/app/assets/stylesheets/thirdparty/bourbon/addons/_position.scss +32 -0
  40. data/app/assets/stylesheets/thirdparty/bourbon/addons/_prefixer.scss +45 -0
  41. data/app/assets/stylesheets/thirdparty/bourbon/addons/_retina-image.scss +31 -0
  42. data/app/assets/stylesheets/thirdparty/bourbon/addons/_size.scss +44 -0
  43. data/app/assets/stylesheets/thirdparty/bourbon/addons/_timing-functions.scss +32 -0
  44. data/app/assets/stylesheets/thirdparty/bourbon/addons/_triangle.scss +86 -0
  45. data/app/assets/stylesheets/thirdparty/bourbon/addons/_word-wrap.scss +8 -0
  46. data/app/assets/stylesheets/thirdparty/bourbon/css3/_animation.scss +52 -0
  47. data/app/assets/stylesheets/thirdparty/bourbon/css3/_appearance.scss +3 -0
  48. data/app/assets/stylesheets/thirdparty/bourbon/css3/_backface-visibility.scss +6 -0
  49. data/app/assets/stylesheets/thirdparty/bourbon/css3/_background-image.scss +48 -0
  50. data/app/assets/stylesheets/thirdparty/bourbon/css3/_background.scss +103 -0
  51. data/app/assets/stylesheets/thirdparty/bourbon/css3/_border-image.scss +56 -0
  52. data/app/assets/stylesheets/thirdparty/bourbon/css3/_border-radius.scss +22 -0
  53. data/app/assets/stylesheets/thirdparty/bourbon/css3/_box-sizing.scss +4 -0
  54. data/app/assets/stylesheets/thirdparty/bourbon/css3/_calc.scss +4 -0
  55. data/app/assets/stylesheets/thirdparty/bourbon/css3/_columns.scss +47 -0
  56. data/app/assets/stylesheets/thirdparty/bourbon/css3/_filter.scss +5 -0
  57. data/app/assets/stylesheets/thirdparty/bourbon/css3/_flex-box.scss +321 -0
  58. data/app/assets/stylesheets/thirdparty/bourbon/css3/_font-face.scss +23 -0
  59. data/app/assets/stylesheets/thirdparty/bourbon/css3/_font-feature-settings.scss +10 -0
  60. data/app/assets/stylesheets/thirdparty/bourbon/css3/_hidpi-media-query.scss +10 -0
  61. data/app/assets/stylesheets/thirdparty/bourbon/css3/_hyphens.scss +4 -0
  62. data/app/assets/stylesheets/thirdparty/bourbon/css3/_image-rendering.scss +14 -0
  63. data/app/assets/stylesheets/thirdparty/bourbon/css3/_inline-block.scss +8 -0
  64. data/app/assets/stylesheets/thirdparty/bourbon/css3/_keyframes.scss +35 -0
  65. data/app/assets/stylesheets/thirdparty/bourbon/css3/_linear-gradient.scss +38 -0
  66. data/app/assets/stylesheets/thirdparty/bourbon/css3/_perspective.scss +8 -0
  67. data/app/assets/stylesheets/thirdparty/bourbon/css3/_placeholder.scss +8 -0
  68. data/app/assets/stylesheets/thirdparty/bourbon/css3/_radial-gradient.scss +39 -0
  69. data/app/assets/stylesheets/thirdparty/bourbon/css3/_transform.scss +15 -0
  70. data/app/assets/stylesheets/thirdparty/bourbon/css3/_transition.scss +77 -0
  71. data/app/assets/stylesheets/thirdparty/bourbon/css3/_user-select.scss +3 -0
  72. data/app/assets/stylesheets/thirdparty/bourbon/functions/_color-lightness.scss +13 -0
  73. data/app/assets/stylesheets/thirdparty/bourbon/functions/_flex-grid.scss +39 -0
  74. data/app/assets/stylesheets/thirdparty/bourbon/functions/_golden-ratio.scss +3 -0
  75. data/app/assets/stylesheets/thirdparty/bourbon/functions/_grid-width.scss +13 -0
  76. data/app/assets/stylesheets/thirdparty/bourbon/functions/_linear-gradient.scss +13 -0
  77. data/app/assets/stylesheets/thirdparty/bourbon/functions/_modular-scale.scss +66 -0
  78. data/app/assets/stylesheets/thirdparty/bourbon/functions/_px-to-em.scss +13 -0
  79. data/app/assets/stylesheets/thirdparty/bourbon/functions/_px-to-rem.scss +15 -0
  80. data/app/assets/stylesheets/thirdparty/bourbon/functions/_radial-gradient.scss +23 -0
  81. data/app/assets/stylesheets/thirdparty/bourbon/functions/_strip-units.scss +5 -0
  82. data/app/assets/stylesheets/thirdparty/bourbon/functions/_tint-shade.scss +9 -0
  83. data/app/assets/stylesheets/thirdparty/bourbon/functions/_transition-property-name.scss +22 -0
  84. data/app/assets/stylesheets/thirdparty/bourbon/functions/_unpack.scss +17 -0
  85. data/app/assets/stylesheets/thirdparty/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  86. data/app/assets/stylesheets/thirdparty/bourbon/helpers/_linear-positions-parser.scss +61 -0
  87. data/app/assets/stylesheets/thirdparty/bourbon/helpers/_radial-arg-parser.scss +69 -0
  88. data/app/assets/stylesheets/thirdparty/bourbon/helpers/_radial-positions-parser.scss +18 -0
  89. data/app/assets/stylesheets/thirdparty/bourbon/helpers/_render-gradients.scss +26 -0
  90. data/app/assets/stylesheets/thirdparty/bourbon/helpers/_shape-size-stripper.scss +10 -0
  91. data/app/assets/stylesheets/thirdparty/bourbon/settings/_asset-pipeline.scss +1 -0
  92. data/app/assets/stylesheets/thirdparty/bourbon/settings/_prefixer.scss +6 -0
  93. data/app/assets/stylesheets/thirdparty/bourbon/settings/_px-to-em.scss +1 -0
  94. data/app/assets/stylesheets/thirdparty/flexbox_mixins.scss +395 -0
  95. data/app/assets/stylesheets/thirdparty/jquery.fancybox.css.erb +274 -0
  96. data/app/assets/stylesheets/thirdparty/neat/_neat-helpers.scss +7 -0
  97. data/app/assets/stylesheets/thirdparty/neat/_neat.scss +21 -0
  98. data/app/assets/stylesheets/thirdparty/neat/functions/_new-breakpoint.scss +16 -0
  99. data/app/assets/stylesheets/thirdparty/neat/functions/_private.scss +125 -0
  100. data/app/assets/stylesheets/thirdparty/neat/grid/_fill-parent.scss +7 -0
  101. data/app/assets/stylesheets/thirdparty/neat/grid/_grid.scss +5 -0
  102. data/app/assets/stylesheets/thirdparty/neat/grid/_media.scss +38 -0
  103. data/app/assets/stylesheets/thirdparty/neat/grid/_omega.scss +61 -0
  104. data/app/assets/stylesheets/thirdparty/neat/grid/_outer-container.scss +8 -0
  105. data/app/assets/stylesheets/thirdparty/neat/grid/_pad.scss +8 -0
  106. data/app/assets/stylesheets/thirdparty/neat/grid/_private.scss +43 -0
  107. data/app/assets/stylesheets/thirdparty/neat/grid/_reset.scss +12 -0
  108. data/app/assets/stylesheets/thirdparty/neat/grid/_row.scss +17 -0
  109. data/app/assets/stylesheets/thirdparty/neat/grid/_shift.scss +16 -0
  110. data/app/assets/stylesheets/thirdparty/neat/grid/_span-columns.scss +43 -0
  111. data/app/assets/stylesheets/thirdparty/neat/grid/_to-deprecate.scss +57 -0
  112. data/app/assets/stylesheets/thirdparty/neat/grid/_visual-grid.scss +41 -0
  113. data/app/assets/stylesheets/thirdparty/neat/settings/_grid.scss +7 -0
  114. data/app/assets/stylesheets/thirdparty/neat/settings/_visual-grid.scss +5 -0
  115. data/app/assets/stylesheets/thirdparty/normalize.css +425 -0
  116. data/app/assets/stylesheets/thirdparty/nprogress.css +81 -0
  117. data/app/assets/stylesheets/thirdparty/typecsset.scss +352 -0
  118. data/app/assets/stylesheets/thirdparty/video-js.css +775 -0
  119. data/smock.gemspec +2 -2
  120. metadata +121 -5
@@ -0,0 +1,61 @@
1
+ @function _linear-positions-parser($pos) {
2
+ $type: type-of(nth($pos, 1));
3
+ $spec: null;
4
+ $degree: null;
5
+ $side: null;
6
+ $corner: null;
7
+ $length: length($pos);
8
+ // Parse Side and corner positions
9
+ @if ($length > 1) {
10
+ @if nth($pos, 1) == "to" { // Newer syntax
11
+ $side: nth($pos, 2);
12
+
13
+ @if $length == 2 { // eg. to top
14
+ // Swap for backwards compatability
15
+ $degree: _position-flipper(nth($pos, 2));
16
+ }
17
+ @else if $length == 3 { // eg. to top left
18
+ $corner: nth($pos, 3);
19
+ }
20
+ }
21
+ @else if $length == 2 { // Older syntax ("top left")
22
+ $side: _position-flipper(nth($pos, 1));
23
+ $corner: _position-flipper(nth($pos, 2));
24
+ }
25
+
26
+ @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
27
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
28
+ }
29
+ @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
30
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
31
+ }
32
+ @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
33
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
34
+ }
35
+ @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
36
+ $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
37
+ }
38
+ $spec: to $side $corner;
39
+ }
40
+ @else if $length == 1 {
41
+ // Swap for backwards compatability
42
+ @if $type == string {
43
+ $degree: $pos;
44
+ $spec: to _position-flipper($pos);
45
+ }
46
+ @else {
47
+ $degree: -270 - $pos; //rotate the gradient opposite from spec
48
+ $spec: $pos;
49
+ }
50
+ }
51
+ $degree: unquote($degree + ",");
52
+ $spec: unquote($spec + ",");
53
+ @return $degree $spec;
54
+ }
55
+
56
+ @function _position-flipper($pos) {
57
+ @return if($pos == left, right, null)
58
+ if($pos == right, left, null)
59
+ if($pos == top, bottom, null)
60
+ if($pos == bottom, top, null);
61
+ }
@@ -0,0 +1,69 @@
1
+ @function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
2
+ @each $value in $G1, $G2 {
3
+ $first-val: nth($value, 1);
4
+ $pos-type: type-of($first-val);
5
+ $spec-at-index: null;
6
+
7
+ // Determine if spec was passed to mixin
8
+ @if type-of($value) == list {
9
+ $spec-at-index: if(index($value, at), index($value, at), false);
10
+ }
11
+ @if $spec-at-index {
12
+ @if $spec-at-index > 1 {
13
+ @for $i from 1 through ($spec-at-index - 1) {
14
+ $shape-size: $shape-size nth($value, $i);
15
+ }
16
+ @for $i from ($spec-at-index + 1) through length($value) {
17
+ $pos: $pos nth($value, $i);
18
+ }
19
+ }
20
+ @else if $spec-at-index == 1 {
21
+ @for $i from ($spec-at-index + 1) through length($value) {
22
+ $pos: $pos nth($value, $i);
23
+ }
24
+ }
25
+ $G1: null;
26
+ }
27
+
28
+ // If not spec calculate correct values
29
+ @else {
30
+ @if ($pos-type != color) or ($first-val != "transparent") {
31
+ @if ($pos-type == number)
32
+ or ($first-val == "center")
33
+ or ($first-val == "top")
34
+ or ($first-val == "right")
35
+ or ($first-val == "bottom")
36
+ or ($first-val == "left") {
37
+
38
+ $pos: $value;
39
+
40
+ @if $pos == $G1 {
41
+ $G1: null;
42
+ }
43
+ }
44
+
45
+ @else if
46
+ ($first-val == "ellipse")
47
+ or ($first-val == "circle")
48
+ or ($first-val == "closest-side")
49
+ or ($first-val == "closest-corner")
50
+ or ($first-val == "farthest-side")
51
+ or ($first-val == "farthest-corner")
52
+ or ($first-val == "contain")
53
+ or ($first-val == "cover") {
54
+
55
+ $shape-size: $value;
56
+
57
+ @if $value == $G1 {
58
+ $G1: null;
59
+ }
60
+
61
+ @else if $value == $G2 {
62
+ $G2: null;
63
+ }
64
+ }
65
+ }
66
+ }
67
+ }
68
+ @return $G1, $G2, $pos, $shape-size;
69
+ }
@@ -0,0 +1,18 @@
1
+ @function _radial-positions-parser($gradient-pos) {
2
+ $shape-size: nth($gradient-pos, 1);
3
+ $pos: nth($gradient-pos, 2);
4
+ $shape-size-spec: _shape-size-stripper($shape-size);
5
+
6
+ $pre-spec: unquote(if($pos, "#{$pos}, ", null))
7
+ unquote(if($shape-size, "#{$shape-size},", null));
8
+ $pos-spec: if($pos, "at #{$pos}", null);
9
+
10
+ $spec: "#{$shape-size-spec} #{$pos-spec}";
11
+
12
+ // Add comma
13
+ @if ($spec != ' ') {
14
+ $spec: "#{$spec},"
15
+ }
16
+
17
+ @return $pre-spec $spec;
18
+ }
@@ -0,0 +1,26 @@
1
+ // User for linear and radial gradients within background-image or border-image properties
2
+
3
+ @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
4
+ $pre-spec: null;
5
+ $spec: null;
6
+ $vendor-gradients: null;
7
+ @if $gradient-type == linear {
8
+ @if $gradient-positions {
9
+ $pre-spec: nth($gradient-positions, 1);
10
+ $spec: nth($gradient-positions, 2);
11
+ }
12
+ }
13
+ @else if $gradient-type == radial {
14
+ $pre-spec: nth($gradient-positions, 1);
15
+ $spec: nth($gradient-positions, 2);
16
+ }
17
+
18
+ @if $vendor {
19
+ $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
20
+ }
21
+ @else if $vendor == false {
22
+ $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
23
+ $vendor-gradients: unquote($vendor-gradients);
24
+ }
25
+ @return $vendor-gradients;
26
+ }
@@ -0,0 +1,10 @@
1
+ @function _shape-size-stripper($shape-size) {
2
+ $shape-size-spec: null;
3
+ @each $value in $shape-size {
4
+ @if ($value == "cover") or ($value == "contain") {
5
+ $value: null;
6
+ }
7
+ $shape-size-spec: "#{$shape-size-spec} #{$value}";
8
+ }
9
+ @return $shape-size-spec;
10
+ }
@@ -0,0 +1 @@
1
+ $asset-pipeline: false !default;
@@ -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
@@ -0,0 +1 @@
1
+ $em-base: 16px !default;
@@ -0,0 +1,395 @@
1
+ // Flexbox Mixins
2
+ // http://philipwalton.github.io/solved-by-flexbox/
3
+ // https://github.com/philipwalton/solved-by-flexbox
4
+ //
5
+ // Copyright (c) 2013 Brian Franco
6
+ //
7
+ // Permission is hereby granted, free of charge, to any person obtaining a
8
+ // copy of this software and associated documentation files (the
9
+ // "Software"), to deal in the Software without restriction, including
10
+ // without limitation the rights to use, copy, modify, merge, publish,
11
+ // distribute, sublicense, and/or sell copies of the Software, and to
12
+ // permit persons to whom the Software is furnished to do so, subject to
13
+ // the following conditions:
14
+ // The above copyright notice and this permission notice shall be included
15
+ // in all copies or substantial portions of the Software.
16
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
17
+ // OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19
+ // IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20
+ // CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ // TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22
+ // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23
+ //
24
+ // This is a set of mixins for those who want to mess around with flexbox
25
+ // using the native support of current browsers. For full support table
26
+ // check: http://caniuse.com/flexbox
27
+ //
28
+ // Basically this will use:
29
+ //
30
+ // * Fallback, old syntax (IE10, Safari, mobile webkit browsers)
31
+ // * Prefixed standard syntax (Chrome)
32
+ // * Final standards syntax (FF, IE11, Opera 12.1)
33
+ //
34
+ // This was inspired by:
35
+ //
36
+ // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
37
+ //
38
+ // With help from:
39
+ //
40
+ // * http://w3.org/tr/css3-flexbox/
41
+ // * http://the-echoplex.net/flexyboxes/
42
+ // * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
43
+ // * http://css-tricks.com/using-flexbox/
44
+ // * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
45
+ // * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
46
+
47
+ //----------------------------------------------------------------------
48
+
49
+ // Flexbox Containers
50
+ //
51
+ // The 'flex' value causes an element to generate a block-level flex
52
+ // container box.
53
+ //
54
+ // The 'inline-flex' value causes an element to generate a inline-level
55
+ // flex container box.
56
+ //
57
+ // display: flex | inline-flex
58
+ //
59
+ // http://w3.org/tr/css3-flexbox/#flex-containers
60
+ //
61
+ // (Placeholder selectors for each type, for those who rather @extend)
62
+
63
+ @mixin flexbox {
64
+ display: -webkit-box;
65
+ display: -webkit-flex;
66
+ display: -moz-flex;
67
+ display: -ms-flexbox;
68
+ display: flex;
69
+ }
70
+
71
+ %flexbox { @include flexbox; }
72
+
73
+ //----------------------------------
74
+
75
+ @mixin inline-flex {
76
+ display: -webkit-inline-box;
77
+ display: -webkit-inline-flex;
78
+ display: -moz-inline-flex;
79
+ display: -ms-inline-flexbox;
80
+ display: inline-flex;
81
+ }
82
+
83
+ %inline-flex { @include inline-flex; }
84
+
85
+ //----------------------------------------------------------------------
86
+
87
+ // Flexbox Direction
88
+ //
89
+ // The 'flex-direction' property specifies how flex items are placed in
90
+ // the flex container, by setting the direction of the flex container's
91
+ // main axis. This determines the direction that flex items are laid out in.
92
+ //
93
+ // Values: row | row-reverse | column | column-reverse
94
+ // Default: row
95
+ //
96
+ // http://w3.org/tr/css3-flexbox/#flex-direction-property
97
+
98
+ @mixin flex-direction($value: row) {
99
+ @if $value == row-reverse {
100
+ -webkit-box-direction: reverse;
101
+ -webkit-box-orient: horizontal;
102
+ } @else if $value == column {
103
+ -webkit-box-direction: normal;
104
+ -webkit-box-orient: vertical;
105
+ } @else if $value == column-reverse {
106
+ -webkit-box-direction: reverse;
107
+ -webkit-box-orient: vertical;
108
+ } @else {
109
+ -webkit-box-direction: normal;
110
+ -webkit-box-orient: horizontal;
111
+ }
112
+ -webkit-flex-direction: $value;
113
+ -moz-flex-direction: $value;
114
+ -ms-flex-direction: $value;
115
+ flex-direction: $value;
116
+ }
117
+ // Shorter version:
118
+ @mixin flex-dir($value: false) { @include flex-direction($value); }
119
+
120
+ //----------------------------------------------------------------------
121
+
122
+ // Flexbox Wrap
123
+ //
124
+ // The 'flex-wrap' property controls whether the flex container is single-line
125
+ // or multi-line, and the direction of the cross-axis, which determines
126
+ // the direction new lines are stacked in.
127
+ //
128
+ // Values: nowrap | wrap | wrap-reverse
129
+ // Default: nowrap
130
+ //
131
+ // http://w3.org/tr/css3-flexbox/#flex-wrap-property
132
+
133
+ @mixin flex-wrap($value: nowrap) {
134
+ // No Webkit Box fallback.
135
+ -webkit-flex-wrap: $value;
136
+ -moz-flex-wrap: $value;
137
+ @if $value == nowrap {
138
+ -ms-flex-wrap: none;
139
+ } @else {
140
+ -ms-flex-wrap: $value;
141
+ }
142
+ flex-wrap: $value;
143
+ }
144
+
145
+ //----------------------------------------------------------------------
146
+
147
+ // Flexbox Flow (shorthand)
148
+ //
149
+ // The 'flex-flow' property is a shorthand for setting the 'flex-direction'
150
+ // and 'flex-wrap' properties, which together define the flex container's
151
+ // main and cross axes.
152
+ //
153
+ // Values: <flex-direction> | <flex-wrap>
154
+ // Default: row nowrap
155
+ //
156
+ // http://w3.org/tr/css3-flexbox/#flex-flow-property
157
+
158
+ @mixin flex-flow($values: (row nowrap)) {
159
+ // No Webkit Box fallback.
160
+ -webkit-flex-flow: $values;
161
+ -moz-flex-flow: $values;
162
+ -ms-flex-flow: $values;
163
+ flex-flow: $values;
164
+ }
165
+
166
+ //----------------------------------------------------------------------
167
+
168
+ // Flexbox Order
169
+ //
170
+ // The 'order' property controls the order in which flex items appear within
171
+ // their flex container, by assigning them to ordinal groups.
172
+ //
173
+ // Default: 0
174
+ //
175
+ // http://w3.org/tr/css3-flexbox/#order-property
176
+
177
+ @mixin order($int: 0) {
178
+ -webkit-box-ordinal-group: $int + 1;
179
+ -webkit-order: $int;
180
+ -moz-order: $int;
181
+ -ms-flex-order: $int;
182
+ order: $int;
183
+ }
184
+
185
+ //----------------------------------------------------------------------
186
+
187
+ // Flexbox Grow
188
+ //
189
+ // The 'flex-grow' property sets the flex grow factor. Negative numbers
190
+ // are invalid.
191
+ //
192
+ // Default: 0
193
+ //
194
+ // http://w3.org/tr/css3-flexbox/#flex-grow-property
195
+
196
+ @mixin flex-grow($int: 0) {
197
+ -webkit-box-flex: $int;
198
+ -webkit-flex-grow: $int;
199
+ -moz-flex-grow: $int;
200
+ -ms-flex-positive: $int;
201
+ flex-grow: $int;
202
+ }
203
+
204
+ //----------------------------------------------------------------------
205
+
206
+ // Flexbox Shrink
207
+ //
208
+ // The 'flex-shrink' property sets the flex shrink factor. Negative numbers
209
+ // are invalid.
210
+ //
211
+ // Default: 1
212
+ //
213
+ // http://w3.org/tr/css3-flexbox/#flex-shrink-property
214
+
215
+ @mixin flex-shrink($int: 1) {
216
+ -webkit-flex-shrink: $int;
217
+ -moz-flex-shrink: $int;
218
+ -ms-flex-negative: $int;
219
+ flex-shrink: $int;
220
+ }
221
+
222
+ //----------------------------------------------------------------------
223
+
224
+ // Flexbox Basis
225
+ //
226
+ // The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
227
+ //
228
+ // Values: Like "width"
229
+ // Default: auto
230
+ //
231
+ // http://www.w3.org/TR/css3-flexbox/#flex-basis-property
232
+
233
+ @mixin flex-basis($value: auto) {
234
+ -webkit-flex-basis: $value;
235
+ -moz-flex-basis: $value;
236
+ -ms-flex-preferred-size: $value;
237
+ flex-basis: $value;
238
+ }
239
+
240
+ //----------------------------------------------------------------------
241
+
242
+ // Flexbox "Flex" (shorthand)
243
+ //
244
+ // The 'flex' property specifies the components of a flexible length: the
245
+ // flex grow factor and flex shrink factor, and the flex basis. When an
246
+ // element is a flex item, 'flex' is consulted instead of the main size
247
+ // property to determine the main size of the element. If an element is
248
+ // not a flex item, 'flex' has no effect.
249
+ //
250
+ // Values: none | <flex-grow> <flex-shrink> || <flex-basis>
251
+ // Default: See individual properties (1 1 0).
252
+ //
253
+ // http://w3.org/tr/css3-flexbox/#flex-property
254
+
255
+ @mixin flex($fg: 1, $fs: null, $fb: null) {
256
+
257
+ // Set a variable to be used by box-flex properties
258
+ $fg-boxflex: $fg;
259
+
260
+ // Box-Flex only supports a flex-grow value so let's grab the
261
+ // first item in the list and just return that.
262
+ @if type-of($fg) == 'list' {
263
+ $fg-boxflex: nth($fg, 1);
264
+ }
265
+
266
+ -webkit-box-flex: $fg-boxflex;
267
+ -webkit-flex: $fg $fs $fb;
268
+ -moz-box-flex: $fg-boxflex;
269
+ -moz-flex: $fg $fs $fb;
270
+ -ms-flex: $fg $fs $fb;
271
+ flex: $fg $fs $fb;
272
+ }
273
+
274
+ //----------------------------------------------------------------------
275
+
276
+ // Flexbox Justify Content
277
+ //
278
+ // The 'justify-content' property aligns flex items along the main axis
279
+ // of the current line of the flex container. This is done after any flexible
280
+ // lengths and any auto margins have been resolved. Typically it helps distribute
281
+ // extra free space leftover when either all the flex items on a line are
282
+ // inflexible, or are flexible but have reached their maximum size. It also
283
+ // exerts some control over the alignment of items when they overflow the line.
284
+ //
285
+ // Note: 'space-*' values not supported in older syntaxes.
286
+ //
287
+ // Values: flex-start | flex-end | center | space-between | space-around
288
+ // Default: flex-start
289
+ //
290
+ // http://w3.org/tr/css3-flexbox/#justify-content-property
291
+
292
+ @mixin justify-content($value: flex-start) {
293
+ @if $value == flex-start {
294
+ -webkit-box-pack: start;
295
+ -ms-flex-pack: start;
296
+ } @else if $value == flex-end {
297
+ -webkit-box-pack: end;
298
+ -ms-flex-pack: end;
299
+ } @else if $value == space-between {
300
+ -webkit-box-pack: justify;
301
+ -ms-flex-pack: justify;
302
+ } @else if $value == space-around {
303
+ -ms-flex-pack: distribute;
304
+ } @else {
305
+ -webkit-box-pack: $value;
306
+ -ms-flex-pack: $value;
307
+ }
308
+ -webkit-justify-content: $value;
309
+ -moz-justify-content: $value;
310
+ justify-content: $value;
311
+ }
312
+ // Shorter version:
313
+ @mixin flex-just($value: flex-start) { @include justify-content($value); }
314
+
315
+ //----------------------------------------------------------------------
316
+
317
+ // Flexbox Align Items
318
+ //
319
+ // Flex items can be aligned in the cross axis of the current line of the
320
+ // flex container, similar to 'justify-content' but in the perpendicular
321
+ // direction. 'align-items' sets the default alignment for all of the flex
322
+ // container's items, including anonymous flex items. 'align-self' allows
323
+ // this default alignment to be overridden for individual flex items. (For
324
+ // anonymous flex items, 'align-self' always matches the value of 'align-items'
325
+ // on their associated flex container.)
326
+ //
327
+ // Values: flex-start | flex-end | center | baseline | stretch
328
+ // Default: stretch
329
+ //
330
+ // http://w3.org/tr/css3-flexbox/#align-items-property
331
+
332
+ @mixin align-items($value: stretch) {
333
+ @if $value == flex-start {
334
+ -webkit-box-align: start;
335
+ -ms-flex-align: start;
336
+ } @else if $value == flex-end {
337
+ -webkit-box-align: end;
338
+ -ms-flex-align: end;
339
+ } @else {
340
+ -webkit-box-align: $value;
341
+ -ms-flex-align: $value;
342
+ }
343
+ -webkit-align-items: $value;
344
+ -moz-align-items: $value;
345
+ align-items: $value;
346
+ }
347
+
348
+ //----------------------------------
349
+
350
+ // Flexbox Align Self
351
+ //
352
+ // Values: auto | flex-start | flex-end | center | baseline | stretch
353
+ // Default: auto
354
+
355
+ @mixin align-self($value: auto) {
356
+ // No Webkit Box Fallback.
357
+ -webkit-align-self: $value;
358
+ -moz-align-self: $value;
359
+ @if $value == flex-start {
360
+ -ms-flex-item-align: start;
361
+ } @else if $value == flex-end {
362
+ -ms-flex-item-align: end;
363
+ } @else {
364
+ -ms-flex-item-align: $value;
365
+ }
366
+ align-self: $value;
367
+ }
368
+
369
+ //----------------------------------------------------------------------
370
+
371
+ // Flexbox Align Content
372
+ //
373
+ // The 'align-content' property aligns a flex container's lines within the
374
+ // flex container when there is extra space in the cross-axis, similar to
375
+ // how 'justify-content' aligns individual items within the main-axis. Note,
376
+ // this property has no effect when the flexbox has only a single line.
377
+ //
378
+ // Values: flex-start | flex-end | center | space-between | space-around | stretch
379
+ // Default: stretch
380
+ //
381
+ // http://w3.org/tr/css3-flexbox/#align-content-property
382
+
383
+ @mixin align-content($value: stretch) {
384
+ // No Webkit Box Fallback.
385
+ -webkit-align-content: $value;
386
+ -moz-align-content: $value;
387
+ @if $value == flex-start {
388
+ -ms-flex-line-pack: start;
389
+ } @else if $value == flex-end {
390
+ -ms-flex-line-pack: end;
391
+ } @else {
392
+ -ms-flex-line-pack: $value;
393
+ }
394
+ align-content: $value;
395
+ }