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,47 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file. This
4
- project adheres to [Semantic Versioning](http://semver.org).
5
-
6
- ## 4.3.4 - 2017-04-01
7
-
8
- ### Changed
9
-
10
- - Updated deprecation warning message for `strip-units`. ([#1016])
11
-
12
- [#1016]: https://github.com/thoughtbot/bourbon/pull/1016
13
-
14
- ## 4.3.3 - 2017-02-23
15
-
16
- ### Fixed
17
-
18
- - Internal Bourbon deprecation warnings for `is-size` and `is-length` will no
19
- longer be thrown when using the `size` mixin.
20
-
21
- ## 4.3.2 - 2017-02-10
22
-
23
- ### Fixed
24
-
25
- - Internal Bourbon deprecation warnings for `unpack` and `is-length` will no
26
- longer be thrown when using the `position` mixin. ([#1004])
27
-
28
- [#1004]: https://github.com/thoughtbot/bourbon/pull/1004
29
-
30
- ## 4.3.1 - 2017-02-07
31
-
32
- ### Fixed
33
-
34
- - Internal Bourbon deprecation warnings will no longer be thrown. ([#1002])
35
-
36
- [#1002]: https://github.com/thoughtbot/bourbon/pull/1002
37
-
38
- ## 4.3.0 - 2017-02-03
39
-
40
- ### Added
41
-
42
- - Added deprecation warnings for features that will be removed in 5.0.0. Please
43
- reference our [change log], which includes a list of these changes and
44
- removals. ([#891])
45
-
46
- [change log]: https://github.com/thoughtbot/bourbon/blob/master/CHANGELOG.md
47
- [#891]: https://github.com/thoughtbot/bourbon/pull/891
@@ -1,19 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Throws Sass warnings to announce library deprecations. You can disable them
4
- /// by setting the `$output-bourbon-deprecation-warnings` variable to `false`.
5
- ///
6
- /// @access private
7
-
8
- @mixin _bourbon-deprecate($feature, $message: null) {
9
- @if $output-bourbon-deprecation-warnings == true {
10
- @warn "[Bourbon] [Deprecation] `#{$feature}` is deprecated and will be " +
11
- "removed in 5.0.0. #{$message}";
12
- @content;
13
- }
14
- }
15
-
16
- @mixin _bourbon-deprecate-for-prefixing($feature) {
17
- @include _bourbon-deprecate($feature, "We suggest using an automated " +
18
- "prefixing tool, like Autoprefixer.");
19
- }
@@ -1,425 +0,0 @@
1
- // The following features have been deprecated and will be removed in the next MAJOR version release
2
-
3
- @mixin inline-block {
4
- @include _bourbon-deprecate("inline-block");
5
-
6
- display: inline-block;
7
- }
8
-
9
- @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
10
- @include _bourbon-deprecate("button");
11
-
12
- @if type-of($style) == string and type-of($base-color) == color {
13
- @include buttonstyle($style, $base-color, $text-size, $padding);
14
- }
15
-
16
- @if type-of($style) == string and type-of($base-color) == number {
17
- $padding: $text-size;
18
- $text-size: $base-color;
19
- $base-color: #4294f0;
20
-
21
- @if $padding == inherit {
22
- $padding: 7px 18px;
23
- }
24
-
25
- @include buttonstyle($style, $base-color, $text-size, $padding);
26
- }
27
-
28
- @if type-of($style) == color and type-of($base-color) == color {
29
- $base-color: $style;
30
- $style: simple;
31
- @include buttonstyle($style, $base-color, $text-size, $padding);
32
- }
33
-
34
- @if type-of($style) == color and type-of($base-color) == number {
35
- $padding: $text-size;
36
- $text-size: $base-color;
37
- $base-color: $style;
38
- $style: simple;
39
-
40
- @if $padding == inherit {
41
- $padding: 7px 18px;
42
- }
43
-
44
- @include buttonstyle($style, $base-color, $text-size, $padding);
45
- }
46
-
47
- @if type-of($style) == number {
48
- $padding: $base-color;
49
- $text-size: $style;
50
- $base-color: #4294f0;
51
- $style: simple;
52
-
53
- @if $padding == #4294f0 {
54
- $padding: 7px 18px;
55
- }
56
-
57
- @include buttonstyle($style, $base-color, $text-size, $padding);
58
- }
59
-
60
- &:disabled {
61
- cursor: not-allowed;
62
- opacity: 0.5;
63
- }
64
- }
65
-
66
- // Selector Style Button
67
- @mixin buttonstyle($type, $b-color, $t-size, $pad) {
68
- // Grayscale button
69
- @if $type == simple and $b-color == grayscale($b-color) {
70
- @include simple($b-color, true, $t-size, $pad);
71
- }
72
-
73
- @if $type == shiny and $b-color == grayscale($b-color) {
74
- @include shiny($b-color, true, $t-size, $pad);
75
- }
76
-
77
- @if $type == pill and $b-color == grayscale($b-color) {
78
- @include pill($b-color, true, $t-size, $pad);
79
- }
80
-
81
- @if $type == flat and $b-color == grayscale($b-color) {
82
- @include flat($b-color, true, $t-size, $pad);
83
- }
84
-
85
- // Colored button
86
- @if $type == simple {
87
- @include simple($b-color, false, $t-size, $pad);
88
- }
89
-
90
- @else if $type == shiny {
91
- @include shiny($b-color, false, $t-size, $pad);
92
- }
93
-
94
- @else if $type == pill {
95
- @include pill($b-color, false, $t-size, $pad);
96
- }
97
-
98
- @else if $type == flat {
99
- @include flat($b-color, false, $t-size, $pad);
100
- }
101
- }
102
-
103
- // Simple Button
104
- @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
105
- $color: hsl(0, 0, 100%);
106
- $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
107
- $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
108
- $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
109
- $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
110
-
111
- @if is-light($base-color) {
112
- $color: hsl(0, 0, 20%);
113
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
114
- }
115
-
116
- @if $grayscale == true {
117
- $border: grayscale($border);
118
- $inset-shadow: grayscale($inset-shadow);
119
- $stop-gradient: grayscale($stop-gradient);
120
- $text-shadow: grayscale($text-shadow);
121
- }
122
-
123
- border: 1px solid $border;
124
- border-radius: 3px;
125
- box-shadow: inset 0 1px 0 0 $inset-shadow;
126
- color: $color;
127
- display: inline-block;
128
- font-size: $textsize;
129
- font-weight: bold;
130
- @include linear-gradient ($base-color, $stop-gradient);
131
- padding: $padding;
132
- text-decoration: none;
133
- text-shadow: 0 1px 0 $text-shadow;
134
- background-clip: padding-box;
135
-
136
- &:hover:not(:disabled) {
137
- $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
138
- $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
139
- $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
140
-
141
- @if $grayscale == true {
142
- $base-color-hover: grayscale($base-color-hover);
143
- $inset-shadow-hover: grayscale($inset-shadow-hover);
144
- $stop-gradient-hover: grayscale($stop-gradient-hover);
145
- }
146
-
147
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
148
-
149
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
150
- cursor: pointer;
151
- }
152
-
153
- &:active:not(:disabled),
154
- &:focus:not(:disabled) {
155
- $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
156
- $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
157
-
158
- @if $grayscale == true {
159
- $border-active: grayscale($border-active);
160
- $inset-shadow-active: grayscale($inset-shadow-active);
161
- }
162
-
163
- border: 1px solid $border-active;
164
- box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
165
- }
166
- }
167
-
168
- // Shiny Button
169
- @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
170
- $color: hsl(0, 0, 100%);
171
- $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
172
- $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
173
- $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
174
- $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
175
- $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
176
- $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
177
- $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
178
-
179
- @if is-light($base-color) {
180
- $color: hsl(0, 0, 20%);
181
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
182
- }
183
-
184
- @if $grayscale == true {
185
- $border: grayscale($border);
186
- $border-bottom: grayscale($border-bottom);
187
- $fourth-stop: grayscale($fourth-stop);
188
- $inset-shadow: grayscale($inset-shadow);
189
- $second-stop: grayscale($second-stop);
190
- $text-shadow: grayscale($text-shadow);
191
- $third-stop: grayscale($third-stop);
192
- }
193
-
194
- @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
195
-
196
- border: 1px solid $border;
197
- border-bottom: 1px solid $border-bottom;
198
- border-radius: 5px;
199
- box-shadow: inset 0 1px 0 0 $inset-shadow;
200
- color: $color;
201
- display: inline-block;
202
- font-size: $textsize;
203
- font-weight: bold;
204
- padding: $padding;
205
- text-align: center;
206
- text-decoration: none;
207
- text-shadow: 0 -1px 1px $text-shadow;
208
-
209
- &:hover:not(:disabled) {
210
- $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
211
- $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
212
- $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
213
- $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
214
-
215
- @if $grayscale == true {
216
- $first-stop-hover: grayscale($first-stop-hover);
217
- $second-stop-hover: grayscale($second-stop-hover);
218
- $third-stop-hover: grayscale($third-stop-hover);
219
- $fourth-stop-hover: grayscale($fourth-stop-hover);
220
- }
221
-
222
- @include linear-gradient(top, $first-stop-hover 0%,
223
- $second-stop-hover 50%,
224
- $third-stop-hover 50%,
225
- $fourth-stop-hover 100%);
226
- cursor: pointer;
227
- }
228
-
229
- &:active:not(:disabled),
230
- &:focus:not(:disabled) {
231
- $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
232
-
233
- @if $grayscale == true {
234
- $inset-shadow-active: grayscale($inset-shadow-active);
235
- }
236
-
237
- box-shadow: inset 0 0 20px 0 $inset-shadow-active;
238
- }
239
- }
240
-
241
- // Pill Button
242
- @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
243
- $color: hsl(0, 0, 100%);
244
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
245
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
246
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
247
- $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
248
- $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
249
- $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
250
-
251
- @if is-light($base-color) {
252
- $color: hsl(0, 0, 20%);
253
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
254
- }
255
-
256
- @if $grayscale == true {
257
- $border-bottom: grayscale($border-bottom);
258
- $border-sides: grayscale($border-sides);
259
- $border-top: grayscale($border-top);
260
- $inset-shadow: grayscale($inset-shadow);
261
- $stop-gradient: grayscale($stop-gradient);
262
- $text-shadow: grayscale($text-shadow);
263
- }
264
-
265
- border: 1px solid $border-top;
266
- border-color: $border-top $border-sides $border-bottom;
267
- border-radius: 16px;
268
- box-shadow: inset 0 1px 0 0 $inset-shadow;
269
- color: $color;
270
- display: inline-block;
271
- font-size: $textsize;
272
- font-weight: normal;
273
- line-height: 1;
274
- @include linear-gradient ($base-color, $stop-gradient);
275
- padding: $padding;
276
- text-align: center;
277
- text-decoration: none;
278
- text-shadow: 0 -1px 1px $text-shadow;
279
- background-clip: padding-box;
280
-
281
- &:hover:not(:disabled) {
282
- $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
283
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
284
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
285
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
286
- $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
287
- $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
288
- $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
289
-
290
- @if $grayscale == true {
291
- $base-color-hover: grayscale($base-color-hover);
292
- $border-bottom: grayscale($border-bottom);
293
- $border-sides: grayscale($border-sides);
294
- $border-top: grayscale($border-top);
295
- $inset-shadow-hover: grayscale($inset-shadow-hover);
296
- $stop-gradient-hover: grayscale($stop-gradient-hover);
297
- $text-shadow-hover: grayscale($text-shadow-hover);
298
- }
299
-
300
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
301
-
302
- background-clip: padding-box;
303
- border: 1px solid $border-top;
304
- border-color: $border-top $border-sides $border-bottom;
305
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
306
- cursor: pointer;
307
- text-shadow: 0 -1px 1px $text-shadow-hover;
308
- }
309
-
310
- &:active:not(:disabled),
311
- &:focus:not(:disabled) {
312
- $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
313
- $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
314
- $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
315
- $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
316
- $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
317
-
318
- @if $grayscale == true {
319
- $active-color: grayscale($active-color);
320
- $border-active: grayscale($border-active);
321
- $border-bottom-active: grayscale($border-bottom-active);
322
- $inset-shadow-active: grayscale($inset-shadow-active);
323
- $text-shadow-active: grayscale($text-shadow-active);
324
- }
325
-
326
- background: $active-color;
327
- border: 1px solid $border-active;
328
- border-bottom: 1px solid $border-bottom-active;
329
- box-shadow: inset 0 0 6px 3px $inset-shadow-active;
330
- text-shadow: 0 -1px 1px $text-shadow-active;
331
- }
332
- }
333
-
334
- // Flat Button
335
- @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
336
- $color: hsl(0, 0, 100%);
337
-
338
- @if is-light($base-color) {
339
- $color: hsl(0, 0, 20%);
340
- }
341
-
342
- background-color: $base-color;
343
- border-radius: 3px;
344
- border: 0;
345
- color: $color;
346
- display: inline-block;
347
- font-size: $textsize;
348
- font-weight: bold;
349
- padding: $padding;
350
- text-decoration: none;
351
- background-clip: padding-box;
352
-
353
- &:hover:not(:disabled){
354
- $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
355
-
356
- @if $grayscale == true {
357
- $base-color-hover: grayscale($base-color-hover);
358
- }
359
-
360
- background-color: $base-color-hover;
361
- cursor: pointer;
362
- }
363
-
364
- &:active:not(:disabled),
365
- &:focus:not(:disabled) {
366
- $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
367
-
368
- @if $grayscale == true {
369
- $base-color-active: grayscale($base-color-active);
370
- }
371
-
372
- background-color: $base-color-active;
373
- cursor: pointer;
374
- }
375
- }
376
-
377
- // Flexible grid
378
- @function flex-grid($columns, $container-columns: $fg-max-columns) {
379
- @if $output-bourbon-deprecation-warnings == true {
380
- @warn "[Bourbon] [Deprecation] `flex-grid` is deprecated and will be " +
381
- "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
382
- "Neat.";
383
- }
384
-
385
- $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
386
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
387
- @return percentage($width / $container-width);
388
- }
389
-
390
- // Flexible gutter
391
- @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
392
- @if $output-bourbon-deprecation-warnings == true {
393
- @warn "[Bourbon] [Deprecation] `flex-gutter` is deprecated and will be " +
394
- "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
395
- "Neat.";
396
- }
397
-
398
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
399
- @return percentage($gutter / $container-width);
400
- }
401
-
402
- @function grid-width($n) {
403
- @if $output-bourbon-deprecation-warnings == true {
404
- @warn "[Bourbon] [Deprecation] `grid-width` is deprecated and will be " +
405
- "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
406
- "Neat.";
407
- }
408
-
409
- @return $n * $gw-column + ($n - 1) * $gw-gutter;
410
- }
411
-
412
- @function golden-ratio($value, $increment) {
413
- @if $output-bourbon-deprecation-warnings == true {
414
- @warn "[Bourbon] [Deprecation] `golden-ratio` is deprecated and will be " +
415
- "removed in 5.0.0. You can use the `modular-scale` function instead.";
416
- }
417
-
418
- @return modular-scale($increment, $value, $ratio: $golden);
419
- }
420
-
421
- @mixin box-sizing($box) {
422
- @include _bourbon-deprecate-for-prefixing("box-sizing");
423
-
424
- @include prefixer(box-sizing, $box, webkit moz spec);
425
- }