bourbon 4.3.4 → 5.0.0.alpha.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (164) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -1
  3. data/.npmignore +1 -0
  4. data/.scss-lint.yml +2 -143
  5. data/.travis.yml +8 -0
  6. data/LICENSE.md +1 -1
  7. data/README.md +5 -19
  8. data/bourbon.gemspec +2 -2
  9. data/bower.json +7 -6
  10. data/core/_bourbon.scss +47 -0
  11. data/core/bourbon/_bourbon-deprecated.scss +1 -0
  12. data/core/bourbon/addons/_border-color.scss +26 -0
  13. data/{app/assets/stylesheets → core/bourbon}/addons/_border-radius.scss +19 -18
  14. data/core/bourbon/addons/_border-style.scss +25 -0
  15. data/core/bourbon/addons/_border-width.scss +25 -0
  16. data/core/bourbon/addons/_buttons.scss +61 -0
  17. data/core/bourbon/addons/_clearfix.scss +25 -0
  18. data/core/bourbon/addons/_ellipsis.scss +30 -0
  19. data/core/bourbon/addons/_font-stacks.scss +19 -0
  20. data/core/bourbon/addons/_hide-text.scss +23 -0
  21. data/core/bourbon/addons/_margin.scss +26 -0
  22. data/core/bourbon/addons/_padding.scss +26 -0
  23. data/core/bourbon/addons/_position.scss +49 -0
  24. data/core/bourbon/addons/_prefixer.scss +33 -0
  25. data/core/bourbon/addons/_size.scss +43 -0
  26. data/core/bourbon/addons/_text-inputs.scss +123 -0
  27. data/{app/assets/stylesheets → core/bourbon}/addons/_timing-functions.scss +7 -3
  28. data/core/bourbon/addons/_word-wrap.scss +29 -0
  29. data/core/bourbon/css3/_font-face.scss +50 -0
  30. data/core/bourbon/functions/_assign-inputs.scss +25 -0
  31. data/core/bourbon/functions/_contains-falsy.scss +20 -0
  32. data/core/bourbon/functions/_contains.scss +23 -0
  33. data/{app/assets/stylesheets → core/bourbon}/functions/_is-length.scss +3 -6
  34. data/{app/assets/stylesheets → core/bourbon}/functions/_is-light.scss +5 -10
  35. data/{app/assets/stylesheets → core/bourbon}/functions/_is-number.scss +3 -6
  36. data/core/bourbon/functions/_is-size.scss +16 -0
  37. data/core/bourbon/functions/_modular-scale.scss +101 -0
  38. data/core/bourbon/functions/_shade.scss +24 -0
  39. data/core/bourbon/functions/_strip-unit.scss +17 -0
  40. data/core/bourbon/functions/_tint.scss +24 -0
  41. data/{app/assets/stylesheets → core/bourbon}/functions/_unpack.scss +11 -14
  42. data/{app/assets/stylesheets → core/bourbon}/helpers/_directional-values.scss +26 -36
  43. data/{app/assets/stylesheets → core/bourbon}/helpers/_font-source-declaration.scss +0 -10
  44. data/{app/assets/stylesheets → core/bourbon}/settings/_asset-pipeline.scss +1 -1
  45. data/core/bourbon/settings/_global-font-file-formats.scss +12 -0
  46. data/core/bourbon/settings/_modular-scale.scss +17 -0
  47. data/core/bourbon/settings/_scales.scss +27 -0
  48. data/features/step_definitions/bourbon_steps.rb +1 -1
  49. data/index.js +1 -1
  50. data/lib/bourbon/engine.rb +1 -1
  51. data/lib/bourbon/generator.rb +1 -1
  52. data/lib/bourbon/version.rb +1 -1
  53. data/package.json +1 -6
  54. data/spec/bourbon/addons/buttons_spec.rb +3 -3
  55. data/spec/bourbon/addons/font_stacks_spec.rb +21 -11
  56. data/spec/bourbon/addons/text_inputs_spec.rb +14 -14
  57. data/spec/bourbon/css3/font_face_spec_1.rb +18 -0
  58. data/spec/bourbon/css3/font_face_spec_2.rb +19 -0
  59. data/spec/bourbon/css3/font_face_spec_3.rb +18 -0
  60. data/spec/bourbon/css3/font_face_spec_4.rb +19 -0
  61. data/spec/bourbon/functions/assign_inputs_spec.rb +3 -3
  62. data/spec/bourbon/functions/{strip_units_spec.rb → strip_unit_spec.rb} +2 -2
  63. data/spec/fixtures/_setup.scss +1 -1
  64. data/spec/fixtures/addons/font-stacks.scss +24 -8
  65. data/spec/fixtures/addons/size.scss +2 -2
  66. data/spec/fixtures/css3/font-face-1.scss +3 -0
  67. data/spec/fixtures/css3/font-face-2.scss +3 -0
  68. data/spec/fixtures/css3/font-face-3.scss +3 -0
  69. data/spec/fixtures/css3/font-face-4.scss +3 -0
  70. data/spec/fixtures/functions/assign-inputs.scss +1 -1
  71. data/spec/fixtures/functions/strip-unit.scss +17 -0
  72. metadata +72 -129
  73. data/CHANGELOG.md +0 -47
  74. data/app/assets/stylesheets/_bourbon-deprecate.scss +0 -19
  75. data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss +0 -425
  76. data/app/assets/stylesheets/_bourbon.scss +0 -90
  77. data/app/assets/stylesheets/addons/_border-color.scss +0 -29
  78. data/app/assets/stylesheets/addons/_border-style.scss +0 -28
  79. data/app/assets/stylesheets/addons/_border-width.scss +0 -28
  80. data/app/assets/stylesheets/addons/_buttons.scss +0 -69
  81. data/app/assets/stylesheets/addons/_clearfix.scss +0 -25
  82. data/app/assets/stylesheets/addons/_ellipsis.scss +0 -30
  83. data/app/assets/stylesheets/addons/_font-stacks.scss +0 -31
  84. data/app/assets/stylesheets/addons/_hide-text.scss +0 -27
  85. data/app/assets/stylesheets/addons/_margin.scss +0 -29
  86. data/app/assets/stylesheets/addons/_padding.scss +0 -29
  87. data/app/assets/stylesheets/addons/_position.scss +0 -51
  88. data/app/assets/stylesheets/addons/_prefixer.scss +0 -66
  89. data/app/assets/stylesheets/addons/_retina-image.scss +0 -27
  90. data/app/assets/stylesheets/addons/_size.scss +0 -56
  91. data/app/assets/stylesheets/addons/_text-inputs.scss +0 -118
  92. data/app/assets/stylesheets/addons/_triangle.scss +0 -63
  93. data/app/assets/stylesheets/addons/_word-wrap.scss +0 -29
  94. data/app/assets/stylesheets/css3/_animation.scss +0 -61
  95. data/app/assets/stylesheets/css3/_appearance.scss +0 -5
  96. data/app/assets/stylesheets/css3/_backface-visibility.scss +0 -5
  97. data/app/assets/stylesheets/css3/_background-image.scss +0 -44
  98. data/app/assets/stylesheets/css3/_background.scss +0 -57
  99. data/app/assets/stylesheets/css3/_border-image.scss +0 -61
  100. data/app/assets/stylesheets/css3/_calc.scss +0 -6
  101. data/app/assets/stylesheets/css3/_columns.scss +0 -67
  102. data/app/assets/stylesheets/css3/_filter.scss +0 -6
  103. data/app/assets/stylesheets/css3/_flex-box.scss +0 -327
  104. data/app/assets/stylesheets/css3/_font-face.scss +0 -29
  105. data/app/assets/stylesheets/css3/_font-feature-settings.scss +0 -6
  106. data/app/assets/stylesheets/css3/_hidpi-media-query.scss +0 -12
  107. data/app/assets/stylesheets/css3/_hyphens.scss +0 -6
  108. data/app/assets/stylesheets/css3/_image-rendering.scss +0 -15
  109. data/app/assets/stylesheets/css3/_keyframes.scss +0 -38
  110. data/app/assets/stylesheets/css3/_linear-gradient.scss +0 -40
  111. data/app/assets/stylesheets/css3/_perspective.scss +0 -12
  112. data/app/assets/stylesheets/css3/_placeholder.scss +0 -10
  113. data/app/assets/stylesheets/css3/_radial-gradient.scss +0 -40
  114. data/app/assets/stylesheets/css3/_selection.scss +0 -44
  115. data/app/assets/stylesheets/css3/_text-decoration.scss +0 -27
  116. data/app/assets/stylesheets/css3/_transform.scss +0 -21
  117. data/app/assets/stylesheets/css3/_transition.scss +0 -81
  118. data/app/assets/stylesheets/css3/_user-select.scss +0 -5
  119. data/app/assets/stylesheets/functions/_assign-inputs.scss +0 -16
  120. data/app/assets/stylesheets/functions/_contains-falsy.scss +0 -25
  121. data/app/assets/stylesheets/functions/_contains.scss +0 -31
  122. data/app/assets/stylesheets/functions/_is-size.scss +0 -23
  123. data/app/assets/stylesheets/functions/_modular-scale.scss +0 -74
  124. data/app/assets/stylesheets/functions/_px-to-em.scss +0 -24
  125. data/app/assets/stylesheets/functions/_px-to-rem.scss +0 -26
  126. data/app/assets/stylesheets/functions/_shade.scss +0 -24
  127. data/app/assets/stylesheets/functions/_strip-units.scss +0 -22
  128. data/app/assets/stylesheets/functions/_tint.scss +0 -24
  129. data/app/assets/stylesheets/functions/_transition-property-name.scss +0 -37
  130. data/app/assets/stylesheets/helpers/_convert-units.scss +0 -26
  131. data/app/assets/stylesheets/helpers/_gradient-positions-parser.scss +0 -24
  132. data/app/assets/stylesheets/helpers/_linear-angle-parser.scss +0 -35
  133. data/app/assets/stylesheets/helpers/_linear-gradient-parser.scss +0 -51
  134. data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +0 -77
  135. data/app/assets/stylesheets/helpers/_linear-side-corner-parser.scss +0 -41
  136. data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +0 -74
  137. data/app/assets/stylesheets/helpers/_radial-gradient-parser.scss +0 -55
  138. data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +0 -28
  139. data/app/assets/stylesheets/helpers/_render-gradients.scss +0 -31
  140. data/app/assets/stylesheets/helpers/_shape-size-stripper.scss +0 -15
  141. data/app/assets/stylesheets/helpers/_str-to-num.scss +0 -55
  142. data/app/assets/stylesheets/settings/_deprecation-warnings.scss +0 -8
  143. data/app/assets/stylesheets/settings/_prefixer.scss +0 -9
  144. data/app/assets/stylesheets/settings/_px-to-em.scss +0 -1
  145. data/circle.yml +0 -10
  146. data/eyeglass-exports.js +0 -7
  147. data/sache.json +0 -5
  148. data/spec/bourbon/addons/retina_image_spec.rb +0 -57
  149. data/spec/bourbon/addons/triangle_spec.rb +0 -32
  150. data/spec/bourbon/css3/font_face_spec.rb +0 -45
  151. data/spec/bourbon/css3/hidpi_media_query_spec.rb +0 -23
  152. data/spec/bourbon/functions/px_to_em_spec.rb +0 -31
  153. data/spec/bourbon/functions/px_to_rem_spec.rb +0 -25
  154. data/spec/bourbon/helpers/convert_units_spec.rb +0 -31
  155. data/spec/bourbon/helpers/str_to_num_spec.rb +0 -25
  156. data/spec/fixtures/addons/retina-image.scss +0 -21
  157. data/spec/fixtures/addons/triangle.scss +0 -9
  158. data/spec/fixtures/css3/font-face.scss +0 -6
  159. data/spec/fixtures/css3/hidpi-media-query.scss +0 -13
  160. data/spec/fixtures/functions/px-to-em.scss +0 -17
  161. data/spec/fixtures/functions/px-to-rem.scss +0 -15
  162. data/spec/fixtures/functions/strip-units.scss +0 -17
  163. data/spec/fixtures/helpers/convert-units.scss +0 -17
  164. data/spec/fixtures/helpers/str-to-num.scss +0 -13
@@ -1,66 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// A mixin for generating vendor prefixes on non-standardized properties.
4
- ///
5
- /// @param {String} $property
6
- /// Property to prefix
7
- ///
8
- /// @param {*} $value
9
- /// Value to use
10
- ///
11
- /// @param {List} $prefixes
12
- /// Prefixes to define
13
- ///
14
- /// @example scss - Usage
15
- /// .element {
16
- /// @include prefixer(border-radius, 10px, webkit ms spec);
17
- /// }
18
- ///
19
- /// @example css - CSS Output
20
- /// .element {
21
- /// -webkit-border-radius: 10px;
22
- /// -moz-border-radius: 10px;
23
- /// border-radius: 10px;
24
- /// }
25
- ///
26
- /// @require {variable} $prefix-for-webkit
27
- /// @require {variable} $prefix-for-mozilla
28
- /// @require {variable} $prefix-for-microsoft
29
- /// @require {variable} $prefix-for-opera
30
- /// @require {variable} $prefix-for-spec
31
-
32
- @mixin prefixer($property, $value, $prefixes) {
33
- @each $prefix in $prefixes {
34
- @if $prefix == webkit {
35
- @if $prefix-for-webkit {
36
- -webkit-#{$property}: $value;
37
- }
38
- } @else if $prefix == moz {
39
- @if $prefix-for-mozilla {
40
- -moz-#{$property}: $value;
41
- }
42
- } @else if $prefix == ms {
43
- @if $prefix-for-microsoft {
44
- -ms-#{$property}: $value;
45
- }
46
- } @else if $prefix == o {
47
- @if $prefix-for-opera {
48
- -o-#{$property}: $value;
49
- }
50
- } @else if $prefix == spec {
51
- @if $prefix-for-spec {
52
- #{$property}: $value;
53
- }
54
- } @else {
55
- @warn "Unrecognized prefix: #{$prefix}";
56
- }
57
- }
58
- }
59
-
60
- @mixin disable-prefix-for-all() {
61
- $prefix-for-webkit: false !global;
62
- $prefix-for-mozilla: false !global;
63
- $prefix-for-microsoft: false !global;
64
- $prefix-for-opera: false !global;
65
- $prefix-for-spec: false !global;
66
- }
@@ -1,27 +0,0 @@
1
- @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
2
- @include _bourbon-deprecate("retina-image");
3
-
4
- @if $asset-pipeline {
5
- background-image: image-url("#{$filename}.#{$extension}");
6
- } @else {
7
- background-image: url("#{$filename}.#{$extension}");
8
- }
9
-
10
- @include hidpi {
11
- @if $asset-pipeline {
12
- @if $retina-filename {
13
- background-image: image-url("#{$retina-filename}.#{$extension}");
14
- } @else {
15
- background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
16
- }
17
- } @else {
18
- @if $retina-filename {
19
- background-image: url("#{$retina-filename}.#{$extension}");
20
- } @else {
21
- background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
22
- }
23
- }
24
-
25
- background-size: $background-size;
26
- }
27
- }
@@ -1,56 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Sets the `width` and `height` of the element.
4
- ///
5
- /// @param {List} $size
6
- /// A list of at most 2 size values.
7
- ///
8
- /// If there is only a single value in `$size` it is used for both width and height. All units are supported.
9
- ///
10
- /// @example scss - Usage
11
- /// .first-element {
12
- /// @include size(2em);
13
- /// }
14
- ///
15
- /// .second-element {
16
- /// @include size(auto 10em);
17
- /// }
18
- ///
19
- /// @example css - CSS Output
20
- /// .first-element {
21
- /// width: 2em;
22
- /// height: 2em;
23
- /// }
24
- ///
25
- /// .second-element {
26
- /// width: auto;
27
- /// height: 10em;
28
- /// }
29
- ///
30
- /// @todo Refactor in 5.0.0 to use a comma-separated argument
31
-
32
- @mixin size($value) {
33
- $width: nth($value, 1);
34
- $height: $width;
35
-
36
- @if length($value) > 1 {
37
- $height: nth($value, 2);
38
- }
39
-
40
- $user-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;
41
- $output-bourbon-deprecation-warnings: false !global;
42
-
43
- @if is-size($height) {
44
- height: $height;
45
- } @else {
46
- @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
47
- }
48
-
49
- @if is-size($width) {
50
- width: $width;
51
- } @else {
52
- @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
53
- }
54
-
55
- $output-bourbon-deprecation-warnings: $user-deprecation-warnings-setting !global;
56
- }
@@ -1,118 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
4
- ///
5
- /// @example scss - Usage
6
- /// #{$all-text-inputs} {
7
- /// border: 1px solid #f00;
8
- /// }
9
- ///
10
- /// #{$all-text-inputs-focus},
11
- /// #{$all-text-inputs-hover} {
12
- /// border: 1px solid #0f0;
13
- /// }
14
- ///
15
- /// #{$all-text-inputs-active} {
16
- /// border: 1px solid #00f;
17
- /// }
18
- ///
19
- /// @example css - CSS Output
20
- /// input[type="color"],
21
- /// input[type="date"],
22
- /// input[type="datetime"],
23
- /// input[type="datetime-local"],
24
- /// input[type="email"],
25
- /// input[type="month"],
26
- /// input[type="number"],
27
- /// input[type="password"],
28
- /// input[type="search"],
29
- /// input[type="tel"],
30
- /// input[type="text"],
31
- /// input[type="time"],
32
- /// input[type="url"],
33
- /// input[type="week"],
34
- /// textarea {
35
- /// border: 1px solid #f00;
36
- /// }
37
- ///
38
- /// input[type="color"]:focus,
39
- /// input[type="date"]:focus,
40
- /// input[type="datetime"]:focus,
41
- /// input[type="datetime-local"]:focus,
42
- /// input[type="email"]:focus,
43
- /// input[type="month"]:focus,
44
- /// input[type="number"]:focus,
45
- /// input[type="password"]:focus,
46
- /// input[type="search"]:focus,
47
- /// input[type="tel"]:focus,
48
- /// input[type="text"]:focus,
49
- /// input[type="time"]:focus,
50
- /// input[type="url"]:focus,
51
- /// input[type="week"]:focus,
52
- /// textarea:focus,
53
- /// input[type="color"]:hover,
54
- /// input[type="date"]:hover,
55
- /// input[type="datetime"]:hover,
56
- /// input[type="datetime-local"]:hover,
57
- /// input[type="email"]:hover,
58
- /// input[type="month"]:hover,
59
- /// input[type="number"]:hover,
60
- /// input[type="password"]:hover,
61
- /// input[type="search"]:hover,
62
- /// input[type="tel"]:hover,
63
- /// input[type="text"]:hover,
64
- /// input[type="time"]:hover,
65
- /// input[type="url"]:hover,
66
- /// input[type="week"]:hover,
67
- /// textarea:hover {
68
- /// border: 1px solid #0f0;
69
- /// }
70
- ///
71
- /// input[type="color"]:active,
72
- /// input[type="date"]:active,
73
- /// input[type="datetime"]:active,
74
- /// input[type="datetime-local"]:active,
75
- /// input[type="email"]:active,
76
- /// input[type="month"]:active,
77
- /// input[type="number"]:active,
78
- /// input[type="password"]:active,
79
- /// input[type="search"]:active,
80
- /// input[type="tel"]:active,
81
- /// input[type="text"]:active,
82
- /// input[type="time"]:active,
83
- /// input[type="url"]:active,
84
- /// input[type="week"]:active,
85
- /// textarea:active {
86
- /// border: 1px solid #00f;
87
- /// }
88
- ///
89
- /// @require assign-inputs
90
- ///
91
- /// @type List
92
-
93
- $text-inputs-list: 'input[type="color"]',
94
- 'input[type="date"]',
95
- 'input[type="datetime"]',
96
- 'input[type="datetime-local"]',
97
- 'input[type="email"]',
98
- 'input[type="month"]',
99
- 'input[type="number"]',
100
- 'input[type="password"]',
101
- 'input[type="search"]',
102
- 'input[type="tel"]',
103
- 'input[type="text"]',
104
- 'input[type="time"]',
105
- 'input[type="url"]',
106
- 'input[type="week"]',
107
- 'input:not([type])',
108
- 'textarea';
109
-
110
- $user-output-deprecation-warnings-setting: $output-bourbon-deprecation-warnings;
111
- $output-bourbon-deprecation-warnings: false;
112
-
113
- $all-text-inputs: assign-inputs($text-inputs-list);
114
- $all-text-inputs-active: assign-inputs($text-inputs-list, active);
115
- $all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
116
- $all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
117
-
118
- $output-bourbon-deprecation-warnings: $user-output-deprecation-warnings-setting;
@@ -1,63 +0,0 @@
1
- @mixin triangle($size, $color, $direction) {
2
- $width: nth($size, 1);
3
- $height: nth($size, length($size));
4
- $foreground-color: nth($color, 1);
5
- $background-color: if(length($color) == 2, nth($color, 2), transparent);
6
- height: 0;
7
- width: 0;
8
-
9
- @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
10
- $width: $width / 2;
11
- $height: if(length($size) > 1, $height, $height/2);
12
-
13
- @if $direction == up {
14
- border-bottom: $height solid $foreground-color;
15
- border-left: $width solid $background-color;
16
- border-right: $width solid $background-color;
17
- } @else if $direction == right {
18
- border-bottom: $width solid $background-color;
19
- border-left: $height solid $foreground-color;
20
- border-top: $width solid $background-color;
21
- } @else if $direction == down {
22
- border-left: $width solid $background-color;
23
- border-right: $width solid $background-color;
24
- border-top: $height solid $foreground-color;
25
- } @else if $direction == left {
26
- border-bottom: $width solid $background-color;
27
- border-right: $height solid $foreground-color;
28
- border-top: $width solid $background-color;
29
- }
30
- } @else if ($direction == up-right) or ($direction == up-left) {
31
- border-top: $height solid $foreground-color;
32
-
33
- @if $direction == up-right {
34
- border-left: $width solid $background-color;
35
- } @else if $direction == up-left {
36
- border-right: $width solid $background-color;
37
- }
38
- } @else if ($direction == down-right) or ($direction == down-left) {
39
- border-bottom: $height solid $foreground-color;
40
-
41
- @if $direction == down-right {
42
- border-left: $width solid $background-color;
43
- } @else if $direction == down-left {
44
- border-right: $width solid $background-color;
45
- }
46
- } @else if ($direction == inset-up) {
47
- border-color: $background-color $background-color $foreground-color;
48
- border-style: solid;
49
- border-width: $height $width;
50
- } @else if ($direction == inset-down) {
51
- border-color: $foreground-color $background-color $background-color;
52
- border-style: solid;
53
- border-width: $height $width;
54
- } @else if ($direction == inset-right) {
55
- border-color: $background-color $background-color $background-color $foreground-color;
56
- border-style: solid;
57
- border-width: $width $height;
58
- } @else if ($direction == inset-left) {
59
- border-color: $background-color $foreground-color $background-color $background-color;
60
- border-style: solid;
61
- border-width: $width $height;
62
- }
63
- }
@@ -1,29 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Provides an easy way to change the `word-wrap` property.
4
- ///
5
- /// @param {String} $wrap [break-word]
6
- /// Value for the `word-break` property.
7
- ///
8
- /// @example scss - Usage
9
- /// .wrapper {
10
- /// @include word-wrap(break-word);
11
- /// }
12
- ///
13
- /// @example css - CSS Output
14
- /// .wrapper {
15
- /// overflow-wrap: break-word;
16
- /// word-break: break-all;
17
- /// word-wrap: break-word;
18
- /// }
19
-
20
- @mixin word-wrap($wrap: break-word) {
21
- overflow-wrap: $wrap;
22
- word-wrap: $wrap;
23
-
24
- @if $wrap == break-word {
25
- word-break: break-all;
26
- } @else {
27
- word-break: $wrap;
28
- }
29
- }
@@ -1,61 +0,0 @@
1
- // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2
- // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3
-
4
- @mixin animation($animations...) {
5
- @include _bourbon-deprecate-for-prefixing("animation");
6
-
7
- @include prefixer(animation, $animations, webkit moz spec);
8
- }
9
-
10
- @mixin animation-name($names...) {
11
- @include _bourbon-deprecate-for-prefixing("animation-name");
12
-
13
- @include prefixer(animation-name, $names, webkit moz spec);
14
- }
15
-
16
- @mixin animation-duration($times...) {
17
- @include _bourbon-deprecate-for-prefixing("animation-duration");
18
-
19
- @include prefixer(animation-duration, $times, webkit moz spec);
20
- }
21
-
22
- @mixin animation-timing-function($motions...) {
23
- @include _bourbon-deprecate-for-prefixing("animation-timing-function");
24
-
25
- // ease | linear | ease-in | ease-out | ease-in-out
26
- @include prefixer(animation-timing-function, $motions, webkit moz spec);
27
- }
28
-
29
- @mixin animation-iteration-count($values...) {
30
- @include _bourbon-deprecate-for-prefixing("animation-iteration-count");
31
-
32
- // infinite | <number>
33
- @include prefixer(animation-iteration-count, $values, webkit moz spec);
34
- }
35
-
36
- @mixin animation-direction($directions...) {
37
- @include _bourbon-deprecate-for-prefixing("animation-direction");
38
-
39
- // normal | alternate
40
- @include prefixer(animation-direction, $directions, webkit moz spec);
41
- }
42
-
43
- @mixin animation-play-state($states...) {
44
- @include _bourbon-deprecate-for-prefixing("animation-play-state");
45
-
46
- // running | paused
47
- @include prefixer(animation-play-state, $states, webkit moz spec);
48
- }
49
-
50
- @mixin animation-delay($times...) {
51
- @include _bourbon-deprecate-for-prefixing("animation-delay");
52
-
53
- @include prefixer(animation-delay, $times, webkit moz spec);
54
- }
55
-
56
- @mixin animation-fill-mode($modes...) {
57
- @include _bourbon-deprecate-for-prefixing("animation-fill-mode");
58
-
59
- // none | forwards | backwards | both
60
- @include prefixer(animation-fill-mode, $modes, webkit moz spec);
61
- }
@@ -1,5 +0,0 @@
1
- @mixin appearance($value) {
2
- @include _bourbon-deprecate-for-prefixing("appearance");
3
-
4
- @include prefixer(appearance, $value, webkit moz ms o spec);
5
- }
@@ -1,5 +0,0 @@
1
- @mixin backface-visibility($visibility) {
2
- @include _bourbon-deprecate-for-prefixing("backface-visibility");
3
-
4
- @include prefixer(backface-visibility, $visibility, webkit spec);
5
- }
@@ -1,44 +0,0 @@
1
- //************************************************************************//
2
- // Background-image property for adding multiple background images with
3
- // gradients, or for stringing multiple gradients together.
4
- //************************************************************************//
5
-
6
- @mixin background-image($images...) {
7
- @include _bourbon-deprecate-for-prefixing("background-image");
8
-
9
- $webkit-images: ();
10
- $spec-images: ();
11
-
12
- @each $image in $images {
13
- $webkit-image: ();
14
- $spec-image: ();
15
-
16
- @if (type-of($image) == string) {
17
- $url-str: str-slice($image, 1, 3);
18
- $gradient-type: str-slice($image, 1, 6);
19
-
20
- @if $url-str == "url" {
21
- $webkit-image: $image;
22
- $spec-image: $image;
23
- }
24
-
25
- @else if $gradient-type == "linear" {
26
- $gradients: _linear-gradient-parser($image);
27
- $webkit-image: map-get($gradients, webkit-image);
28
- $spec-image: map-get($gradients, spec-image);
29
- }
30
-
31
- @else if $gradient-type == "radial" {
32
- $gradients: _radial-gradient-parser($image);
33
- $webkit-image: map-get($gradients, webkit-image);
34
- $spec-image: map-get($gradients, spec-image);
35
- }
36
- }
37
-
38
- $webkit-images: append($webkit-images, $webkit-image, comma);
39
- $spec-images: append($spec-images, $spec-image, comma);
40
- }
41
-
42
- background-image: $webkit-images;
43
- background-image: $spec-images;
44
- }