codelation_assets 0.3.0 → 0.3.2

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 (87) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +3 -27
  3. data/app/assets/stylesheets/codelation/mixins/has_grid.scss +1 -0
  4. data/app/assets/stylesheets/codelation.scss +1 -1
  5. data/lib/codelation_assets/version.rb +1 -1
  6. data/lib/codelation_assets.rb +0 -1
  7. data/lib/tasks/compile.rake +20 -0
  8. data/{app/assets → vendor}/stylesheets/_normalize.scss +0 -0
  9. data/vendor/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss +411 -0
  10. data/vendor/stylesheets/bourbon/_bourbon.scss +87 -0
  11. data/vendor/stylesheets/bourbon/addons/_border-color.scss +26 -0
  12. data/vendor/stylesheets/bourbon/addons/_border-radius.scss +48 -0
  13. data/vendor/stylesheets/bourbon/addons/_border-style.scss +25 -0
  14. data/vendor/stylesheets/bourbon/addons/_border-width.scss +25 -0
  15. data/vendor/stylesheets/bourbon/addons/_buttons.scss +64 -0
  16. data/vendor/stylesheets/bourbon/addons/_clearfix.scss +25 -0
  17. data/vendor/stylesheets/bourbon/addons/_ellipsis.scss +30 -0
  18. data/vendor/stylesheets/bourbon/addons/_font-stacks.scss +31 -0
  19. data/vendor/stylesheets/bourbon/addons/_hide-text.scss +27 -0
  20. data/vendor/stylesheets/bourbon/addons/_margin.scss +26 -0
  21. data/vendor/stylesheets/bourbon/addons/_padding.scss +26 -0
  22. data/vendor/stylesheets/bourbon/addons/_position.scss +48 -0
  23. data/vendor/stylesheets/bourbon/addons/_prefixer.scss +66 -0
  24. data/vendor/stylesheets/bourbon/addons/_retina-image.scss +25 -0
  25. data/vendor/stylesheets/bourbon/addons/_size.scss +51 -0
  26. data/vendor/stylesheets/bourbon/addons/_text-inputs.scss +113 -0
  27. data/vendor/stylesheets/bourbon/addons/_timing-functions.scss +34 -0
  28. data/vendor/stylesheets/bourbon/addons/_triangle.scss +63 -0
  29. data/vendor/stylesheets/bourbon/addons/_word-wrap.scss +29 -0
  30. data/vendor/stylesheets/bourbon/css3/_animation.scss +43 -0
  31. data/vendor/stylesheets/bourbon/css3/_appearance.scss +3 -0
  32. data/vendor/stylesheets/bourbon/css3/_backface-visibility.scss +3 -0
  33. data/vendor/stylesheets/bourbon/css3/_background-image.scss +42 -0
  34. data/vendor/stylesheets/bourbon/css3/_background.scss +55 -0
  35. data/vendor/stylesheets/bourbon/css3/_border-image.scss +59 -0
  36. data/vendor/stylesheets/bourbon/css3/_calc.scss +4 -0
  37. data/vendor/stylesheets/bourbon/css3/_columns.scss +47 -0
  38. data/vendor/stylesheets/bourbon/css3/_filter.scss +4 -0
  39. data/vendor/stylesheets/bourbon/css3/_flex-box.scss +287 -0
  40. data/vendor/stylesheets/bourbon/css3/_font-face.scss +24 -0
  41. data/vendor/stylesheets/bourbon/css3/_font-feature-settings.scss +4 -0
  42. data/vendor/stylesheets/bourbon/css3/_hidpi-media-query.scss +10 -0
  43. data/vendor/stylesheets/bourbon/css3/_hyphens.scss +4 -0
  44. data/vendor/stylesheets/bourbon/css3/_image-rendering.scss +14 -0
  45. data/vendor/stylesheets/bourbon/css3/_keyframes.scss +36 -0
  46. data/vendor/stylesheets/bourbon/css3/_linear-gradient.scss +38 -0
  47. data/vendor/stylesheets/bourbon/css3/_perspective.scss +8 -0
  48. data/vendor/stylesheets/bourbon/css3/_placeholder.scss +8 -0
  49. data/vendor/stylesheets/bourbon/css3/_radial-gradient.scss +39 -0
  50. data/vendor/stylesheets/bourbon/css3/_selection.scss +42 -0
  51. data/vendor/stylesheets/bourbon/css3/_text-decoration.scss +19 -0
  52. data/vendor/stylesheets/bourbon/css3/_transform.scss +15 -0
  53. data/vendor/stylesheets/bourbon/css3/_transition.scss +71 -0
  54. data/vendor/stylesheets/bourbon/css3/_user-select.scss +3 -0
  55. data/vendor/stylesheets/bourbon/functions/_assign-inputs.scss +11 -0
  56. data/vendor/stylesheets/bourbon/functions/_contains-falsy.scss +20 -0
  57. data/vendor/stylesheets/bourbon/functions/_contains.scss +26 -0
  58. data/vendor/stylesheets/bourbon/functions/_is-length.scss +11 -0
  59. data/vendor/stylesheets/bourbon/functions/_is-light.scss +21 -0
  60. data/vendor/stylesheets/bourbon/functions/_is-number.scss +11 -0
  61. data/vendor/stylesheets/bourbon/functions/_is-size.scss +13 -0
  62. data/vendor/stylesheets/bourbon/functions/_modular-scale.scss +69 -0
  63. data/vendor/stylesheets/bourbon/functions/_px-to-em.scss +13 -0
  64. data/vendor/stylesheets/bourbon/functions/_px-to-rem.scss +15 -0
  65. data/vendor/stylesheets/bourbon/functions/_shade.scss +24 -0
  66. data/vendor/stylesheets/bourbon/functions/_strip-units.scss +17 -0
  67. data/vendor/stylesheets/bourbon/functions/_tint.scss +24 -0
  68. data/vendor/stylesheets/bourbon/functions/_transition-property-name.scss +22 -0
  69. data/vendor/stylesheets/bourbon/functions/_unpack.scss +27 -0
  70. data/vendor/stylesheets/bourbon/helpers/_convert-units.scss +21 -0
  71. data/vendor/stylesheets/bourbon/helpers/_directional-values.scss +96 -0
  72. data/vendor/stylesheets/bourbon/helpers/_font-source-declaration.scss +43 -0
  73. data/vendor/stylesheets/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  74. data/vendor/stylesheets/bourbon/helpers/_linear-angle-parser.scss +25 -0
  75. data/vendor/stylesheets/bourbon/helpers/_linear-gradient-parser.scss +41 -0
  76. data/vendor/stylesheets/bourbon/helpers/_linear-positions-parser.scss +61 -0
  77. data/vendor/stylesheets/bourbon/helpers/_linear-side-corner-parser.scss +31 -0
  78. data/vendor/stylesheets/bourbon/helpers/_radial-arg-parser.scss +69 -0
  79. data/vendor/stylesheets/bourbon/helpers/_radial-gradient-parser.scss +50 -0
  80. data/vendor/stylesheets/bourbon/helpers/_radial-positions-parser.scss +18 -0
  81. data/vendor/stylesheets/bourbon/helpers/_render-gradients.scss +26 -0
  82. data/vendor/stylesheets/bourbon/helpers/_shape-size-stripper.scss +10 -0
  83. data/vendor/stylesheets/bourbon/helpers/_str-to-num.scss +50 -0
  84. data/vendor/stylesheets/bourbon/settings/_asset-pipeline.scss +7 -0
  85. data/vendor/stylesheets/bourbon/settings/_prefixer.scss +9 -0
  86. data/vendor/stylesheets/bourbon/settings/_px-to-em.scss +1 -0
  87. metadata +96 -17
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 93b9982fe8dba044d6f5c8d98fdba106bae98808
4
- data.tar.gz: e7897b29408785550feaa738b9b35f0e12055f2e
3
+ metadata.gz: 06ab9d28053f1ab921421f57452524096148e967
4
+ data.tar.gz: 9f6927e0e0e43c98166a470ee48ae98aaf8ff2b4
5
5
  SHA512:
6
- metadata.gz: 6456d7aa5eee3f8cb9334cb5e7d186d9e293dc9c65aaf1cb46be47d7f00fc527257ba6da613e1315cc3011d99bf9d8c2dd004f885ece3529343cdebd90b489be
7
- data.tar.gz: 3948158982df39b3f5c9a46807e052e42976e31fd5e63048b651885da3184c0544cd4970dd77ad9269f8b7c7bc38d5e6aa6dfd92c4a5fbf6d1d9b4392d61df66
6
+ metadata.gz: ffbebef3c9b690030703a6288289ff73abe0ff01d08ae450878d997b4a6ea1fc147474274ba3755c88789f816215ca26367ce007a743c236152e207c8dd40117
7
+ data.tar.gz: 9896e6bd4ca80234a1033704ac2ac5fbfadde9a833a4defe3baf6ba9690adbf34180428eda90cf93b405a7946500250393d2762bd637e3d343eaee29d33f1e24
data/Rakefile CHANGED
@@ -4,31 +4,7 @@ rescue LoadError
4
4
  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
5
5
  end
6
6
 
7
- require "rdoc/task"
7
+ Bundler.require
8
+ Dir[File.join(File.dirname(__FILE__), "lib/tasks/**/*.rake")].each {|f| load f }
8
9
 
9
- RDoc::Task.new(:rdoc) do |rdoc|
10
- rdoc.rdoc_dir = "rdoc"
11
- rdoc.title = "Codelation Assets"
12
- rdoc.options << "--line-numbers"
13
- rdoc.rdoc_files.include("README.rdoc")
14
- rdoc.rdoc_files.include("lib/**/*.rb")
15
- end
16
-
17
- APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
18
- load "rails/tasks/engine.rake"
19
-
20
-
21
-
22
- Bundler::GemHelper.install_tasks
23
-
24
- require "rake/testtask"
25
-
26
- Rake::TestTask.new(:test) do |t|
27
- t.libs << "lib"
28
- t.libs << "test"
29
- t.pattern = "test/**/*_test.rb"
30
- t.verbose = false
31
- end
32
-
33
-
34
- task default: :test
10
+ task default: "compile"
@@ -56,6 +56,7 @@
56
56
  > * {
57
57
  margin-bottom: $gutter;
58
58
  margin-right: 0;
59
+ margin-top: 0;
59
60
  width: 100%;
60
61
 
61
62
  &:last-of-type {
@@ -2,7 +2,7 @@
2
2
  // https://codelation.com
3
3
  $mobile-breakpoint: 767px !default;
4
4
 
5
- @import "bourbon";
5
+ @import "bourbon/bourbon";
6
6
  @import "codelation/functions/**/*";
7
7
  @import "codelation/mixins/**/*";
8
8
  @import "normalize";
@@ -1,3 +1,3 @@
1
1
  module CodelationAssets
2
- VERSION = "0.3.0".freeze
2
+ VERSION = "0.3.2".freeze
3
3
  end
@@ -1,4 +1,3 @@
1
- require "bourbon"
2
1
  require "rails/engine"
3
2
 
4
3
  module CodelationAssets
@@ -0,0 +1,20 @@
1
+ require "sprockets"
2
+ require "uglifier"
3
+
4
+ desc "Compile the codelation.js file and save to /bower"
5
+ task :compile do
6
+ destination = File.expand_path("../../../bower", __FILE__)
7
+ file = "codelation"
8
+
9
+ # Initialize the sprockets environment
10
+ assets = Sprockets::Environment.new(File.expand_path("../../../", __FILE__))
11
+ assets.append_path("app/assets/javascripts")
12
+
13
+ # Compile bower/codelation.js
14
+ compiled_js = assets.find_asset(file).to_s
15
+ File.write(File.join(destination, "#{file}.js"), compiled_js)
16
+
17
+ # Compile bower/codelation.min.js
18
+ minified_js = Uglifier.compile(compiled_js)
19
+ File.write(File.join(destination, "#{file}.min.js"), minified_js)
20
+ end
File without changes
@@ -0,0 +1,411 @@
1
+ // The following features have been deprecated and will be removed in the next MAJOR version release
2
+
3
+ @mixin inline-block {
4
+ display: inline-block;
5
+
6
+ @warn "The inline-block mixin is deprecated and will be removed in the next major version release";
7
+ }
8
+
9
+ @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
10
+
11
+ @if type-of($style) == string and type-of($base-color) == color {
12
+ @include buttonstyle($style, $base-color, $text-size, $padding);
13
+ }
14
+
15
+ @if type-of($style) == string and type-of($base-color) == number {
16
+ $padding: $text-size;
17
+ $text-size: $base-color;
18
+ $base-color: #4294f0;
19
+
20
+ @if $padding == inherit {
21
+ $padding: 7px 18px;
22
+ }
23
+
24
+ @include buttonstyle($style, $base-color, $text-size, $padding);
25
+ }
26
+
27
+ @if type-of($style) == color and type-of($base-color) == color {
28
+ $base-color: $style;
29
+ $style: simple;
30
+ @include buttonstyle($style, $base-color, $text-size, $padding);
31
+ }
32
+
33
+ @if type-of($style) == color and type-of($base-color) == number {
34
+ $padding: $text-size;
35
+ $text-size: $base-color;
36
+ $base-color: $style;
37
+ $style: simple;
38
+
39
+ @if $padding == inherit {
40
+ $padding: 7px 18px;
41
+ }
42
+
43
+ @include buttonstyle($style, $base-color, $text-size, $padding);
44
+ }
45
+
46
+ @if type-of($style) == number {
47
+ $padding: $base-color;
48
+ $text-size: $style;
49
+ $base-color: #4294f0;
50
+ $style: simple;
51
+
52
+ @if $padding == #4294f0 {
53
+ $padding: 7px 18px;
54
+ }
55
+
56
+ @include buttonstyle($style, $base-color, $text-size, $padding);
57
+ }
58
+
59
+ &:disabled {
60
+ cursor: not-allowed;
61
+ opacity: 0.5;
62
+ }
63
+
64
+ @warn "The button mixin is deprecated and will be removed in the next major version release";
65
+ }
66
+
67
+ // Selector Style Button
68
+ @mixin buttonstyle($type, $b-color, $t-size, $pad) {
69
+ // Grayscale button
70
+ @if $type == simple and $b-color == grayscale($b-color) {
71
+ @include simple($b-color, true, $t-size, $pad);
72
+ }
73
+
74
+ @if $type == shiny and $b-color == grayscale($b-color) {
75
+ @include shiny($b-color, true, $t-size, $pad);
76
+ }
77
+
78
+ @if $type == pill and $b-color == grayscale($b-color) {
79
+ @include pill($b-color, true, $t-size, $pad);
80
+ }
81
+
82
+ @if $type == flat and $b-color == grayscale($b-color) {
83
+ @include flat($b-color, true, $t-size, $pad);
84
+ }
85
+
86
+ // Colored button
87
+ @if $type == simple {
88
+ @include simple($b-color, false, $t-size, $pad);
89
+ }
90
+
91
+ @else if $type == shiny {
92
+ @include shiny($b-color, false, $t-size, $pad);
93
+ }
94
+
95
+ @else if $type == pill {
96
+ @include pill($b-color, false, $t-size, $pad);
97
+ }
98
+
99
+ @else if $type == flat {
100
+ @include flat($b-color, false, $t-size, $pad);
101
+ }
102
+ }
103
+
104
+ // Simple Button
105
+ @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
106
+ $color: hsl(0, 0, 100%);
107
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
108
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
109
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
110
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
111
+
112
+ @if is-light($base-color) {
113
+ $color: hsl(0, 0, 20%);
114
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
115
+ }
116
+
117
+ @if $grayscale == true {
118
+ $border: grayscale($border);
119
+ $inset-shadow: grayscale($inset-shadow);
120
+ $stop-gradient: grayscale($stop-gradient);
121
+ $text-shadow: grayscale($text-shadow);
122
+ }
123
+
124
+ border: 1px solid $border;
125
+ border-radius: 3px;
126
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
127
+ color: $color;
128
+ display: inline-block;
129
+ font-size: $textsize;
130
+ font-weight: bold;
131
+ @include linear-gradient ($base-color, $stop-gradient);
132
+ padding: $padding;
133
+ text-decoration: none;
134
+ text-shadow: 0 1px 0 $text-shadow;
135
+ background-clip: padding-box;
136
+
137
+ &:hover:not(:disabled) {
138
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
139
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
140
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
141
+
142
+ @if $grayscale == true {
143
+ $base-color-hover: grayscale($base-color-hover);
144
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
145
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
146
+ }
147
+
148
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
149
+
150
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
151
+ cursor: pointer;
152
+ }
153
+
154
+ &:active:not(:disabled),
155
+ &:focus:not(:disabled) {
156
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
157
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
158
+
159
+ @if $grayscale == true {
160
+ $border-active: grayscale($border-active);
161
+ $inset-shadow-active: grayscale($inset-shadow-active);
162
+ }
163
+
164
+ border: 1px solid $border-active;
165
+ box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
166
+ }
167
+ }
168
+
169
+ // Shiny Button
170
+ @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
171
+ $color: hsl(0, 0, 100%);
172
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
173
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
174
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
175
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
176
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
177
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
178
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
179
+
180
+ @if is-light($base-color) {
181
+ $color: hsl(0, 0, 20%);
182
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
183
+ }
184
+
185
+ @if $grayscale == true {
186
+ $border: grayscale($border);
187
+ $border-bottom: grayscale($border-bottom);
188
+ $fourth-stop: grayscale($fourth-stop);
189
+ $inset-shadow: grayscale($inset-shadow);
190
+ $second-stop: grayscale($second-stop);
191
+ $text-shadow: grayscale($text-shadow);
192
+ $third-stop: grayscale($third-stop);
193
+ }
194
+
195
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
196
+
197
+ border: 1px solid $border;
198
+ border-bottom: 1px solid $border-bottom;
199
+ border-radius: 5px;
200
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
201
+ color: $color;
202
+ display: inline-block;
203
+ font-size: $textsize;
204
+ font-weight: bold;
205
+ padding: $padding;
206
+ text-align: center;
207
+ text-decoration: none;
208
+ text-shadow: 0 -1px 1px $text-shadow;
209
+
210
+ &:hover:not(:disabled) {
211
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
212
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
213
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
214
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
215
+
216
+ @if $grayscale == true {
217
+ $first-stop-hover: grayscale($first-stop-hover);
218
+ $second-stop-hover: grayscale($second-stop-hover);
219
+ $third-stop-hover: grayscale($third-stop-hover);
220
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
221
+ }
222
+
223
+ @include linear-gradient(top, $first-stop-hover 0%,
224
+ $second-stop-hover 50%,
225
+ $third-stop-hover 50%,
226
+ $fourth-stop-hover 100%);
227
+ cursor: pointer;
228
+ }
229
+
230
+ &:active:not(:disabled),
231
+ &:focus:not(:disabled) {
232
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
233
+
234
+ @if $grayscale == true {
235
+ $inset-shadow-active: grayscale($inset-shadow-active);
236
+ }
237
+
238
+ box-shadow: inset 0 0 20px 0 $inset-shadow-active;
239
+ }
240
+ }
241
+
242
+ // Pill Button
243
+ @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
244
+ $color: hsl(0, 0, 100%);
245
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
246
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
247
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
248
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
249
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
250
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
251
+
252
+ @if is-light($base-color) {
253
+ $color: hsl(0, 0, 20%);
254
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
255
+ }
256
+
257
+ @if $grayscale == true {
258
+ $border-bottom: grayscale($border-bottom);
259
+ $border-sides: grayscale($border-sides);
260
+ $border-top: grayscale($border-top);
261
+ $inset-shadow: grayscale($inset-shadow);
262
+ $stop-gradient: grayscale($stop-gradient);
263
+ $text-shadow: grayscale($text-shadow);
264
+ }
265
+
266
+ border: 1px solid $border-top;
267
+ border-color: $border-top $border-sides $border-bottom;
268
+ border-radius: 16px;
269
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
270
+ color: $color;
271
+ display: inline-block;
272
+ font-size: $textsize;
273
+ font-weight: normal;
274
+ line-height: 1;
275
+ @include linear-gradient ($base-color, $stop-gradient);
276
+ padding: $padding;
277
+ text-align: center;
278
+ text-decoration: none;
279
+ text-shadow: 0 -1px 1px $text-shadow;
280
+ background-clip: padding-box;
281
+
282
+ &:hover:not(:disabled) {
283
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
284
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
285
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
286
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
287
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
288
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
289
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
290
+
291
+ @if $grayscale == true {
292
+ $base-color-hover: grayscale($base-color-hover);
293
+ $border-bottom: grayscale($border-bottom);
294
+ $border-sides: grayscale($border-sides);
295
+ $border-top: grayscale($border-top);
296
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
297
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
298
+ $text-shadow-hover: grayscale($text-shadow-hover);
299
+ }
300
+
301
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
302
+
303
+ background-clip: padding-box;
304
+ border: 1px solid $border-top;
305
+ border-color: $border-top $border-sides $border-bottom;
306
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
307
+ cursor: pointer;
308
+ text-shadow: 0 -1px 1px $text-shadow-hover;
309
+ }
310
+
311
+ &:active:not(:disabled),
312
+ &:focus:not(:disabled) {
313
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
314
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
315
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
316
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
317
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
318
+
319
+ @if $grayscale == true {
320
+ $active-color: grayscale($active-color);
321
+ $border-active: grayscale($border-active);
322
+ $border-bottom-active: grayscale($border-bottom-active);
323
+ $inset-shadow-active: grayscale($inset-shadow-active);
324
+ $text-shadow-active: grayscale($text-shadow-active);
325
+ }
326
+
327
+ background: $active-color;
328
+ border: 1px solid $border-active;
329
+ border-bottom: 1px solid $border-bottom-active;
330
+ box-shadow: inset 0 0 6px 3px $inset-shadow-active;
331
+ text-shadow: 0 -1px 1px $text-shadow-active;
332
+ }
333
+ }
334
+
335
+ // Flat Button
336
+ @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
337
+ $color: hsl(0, 0, 100%);
338
+
339
+ @if is-light($base-color) {
340
+ $color: hsl(0, 0, 20%);
341
+ }
342
+
343
+ background-color: $base-color;
344
+ border-radius: 3px;
345
+ border: 0;
346
+ color: $color;
347
+ display: inline-block;
348
+ font-size: $textsize;
349
+ font-weight: bold;
350
+ padding: $padding;
351
+ text-decoration: none;
352
+ background-clip: padding-box;
353
+
354
+ &:hover:not(:disabled){
355
+ $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
356
+
357
+ @if $grayscale == true {
358
+ $base-color-hover: grayscale($base-color-hover);
359
+ }
360
+
361
+ background-color: $base-color-hover;
362
+ cursor: pointer;
363
+ }
364
+
365
+ &:active:not(:disabled),
366
+ &:focus:not(:disabled) {
367
+ $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
368
+
369
+ @if $grayscale == true {
370
+ $base-color-active: grayscale($base-color-active);
371
+ }
372
+
373
+ background-color: $base-color-active;
374
+ cursor: pointer;
375
+ }
376
+ }
377
+
378
+ // Flexible grid
379
+ @function flex-grid($columns, $container-columns: $fg-max-columns) {
380
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
381
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
382
+ @return percentage($width / $container-width);
383
+
384
+ @warn "The flex-grid function is deprecated and will be removed in the next major version release";
385
+ }
386
+
387
+ // Flexible gutter
388
+ @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
389
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
390
+ @return percentage($gutter / $container-width);
391
+
392
+ @warn "The flex-gutter function is deprecated and will be removed in the next major version release";
393
+ }
394
+
395
+ @function grid-width($n) {
396
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
397
+
398
+ @warn "The grid-width function is deprecated and will be removed in the next major version release";
399
+ }
400
+
401
+ @function golden-ratio($value, $increment) {
402
+ @return modular-scale($increment, $value, $ratio: $golden);
403
+
404
+ @warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
405
+ }
406
+
407
+ @mixin box-sizing($box) {
408
+ @include prefixer(box-sizing, $box, webkit moz spec);
409
+
410
+ @warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed.";
411
+ }
@@ -0,0 +1,87 @@
1
+ // Bourbon 4.2.6
2
+ // http://bourbon.io
3
+ // Copyright 2011-2015 thoughtbot, inc.
4
+ // MIT License
5
+
6
+ @import "settings/prefixer";
7
+ @import "settings/px-to-em";
8
+ @import "settings/asset-pipeline";
9
+
10
+ @import "functions/assign-inputs";
11
+ @import "functions/contains";
12
+ @import "functions/contains-falsy";
13
+ @import "functions/is-length";
14
+ @import "functions/is-light";
15
+ @import "functions/is-number";
16
+ @import "functions/is-size";
17
+ @import "functions/px-to-em";
18
+ @import "functions/px-to-rem";
19
+ @import "functions/shade";
20
+ @import "functions/strip-units";
21
+ @import "functions/tint";
22
+ @import "functions/transition-property-name";
23
+ @import "functions/unpack";
24
+ @import "functions/modular-scale";
25
+
26
+ @import "helpers/convert-units";
27
+ @import "helpers/directional-values";
28
+ @import "helpers/font-source-declaration";
29
+ @import "helpers/gradient-positions-parser";
30
+ @import "helpers/linear-angle-parser";
31
+ @import "helpers/linear-gradient-parser";
32
+ @import "helpers/linear-positions-parser";
33
+ @import "helpers/linear-side-corner-parser";
34
+ @import "helpers/radial-arg-parser";
35
+ @import "helpers/radial-positions-parser";
36
+ @import "helpers/radial-gradient-parser";
37
+ @import "helpers/render-gradients";
38
+ @import "helpers/shape-size-stripper";
39
+ @import "helpers/str-to-num";
40
+
41
+ @import "css3/animation";
42
+ @import "css3/appearance";
43
+ @import "css3/backface-visibility";
44
+ @import "css3/background";
45
+ @import "css3/background-image";
46
+ @import "css3/border-image";
47
+ @import "css3/calc";
48
+ @import "css3/columns";
49
+ @import "css3/filter";
50
+ @import "css3/flex-box";
51
+ @import "css3/font-face";
52
+ @import "css3/font-feature-settings";
53
+ @import "css3/hidpi-media-query";
54
+ @import "css3/hyphens";
55
+ @import "css3/image-rendering";
56
+ @import "css3/keyframes";
57
+ @import "css3/linear-gradient";
58
+ @import "css3/perspective";
59
+ @import "css3/placeholder";
60
+ @import "css3/radial-gradient";
61
+ @import "css3/selection";
62
+ @import "css3/text-decoration";
63
+ @import "css3/transform";
64
+ @import "css3/transition";
65
+ @import "css3/user-select";
66
+
67
+ @import "addons/border-color";
68
+ @import "addons/border-radius";
69
+ @import "addons/border-style";
70
+ @import "addons/border-width";
71
+ @import "addons/buttons";
72
+ @import "addons/clearfix";
73
+ @import "addons/ellipsis";
74
+ @import "addons/font-stacks";
75
+ @import "addons/hide-text";
76
+ @import "addons/margin";
77
+ @import "addons/padding";
78
+ @import "addons/position";
79
+ @import "addons/prefixer";
80
+ @import "addons/retina-image";
81
+ @import "addons/size";
82
+ @import "addons/text-inputs";
83
+ @import "addons/timing-functions";
84
+ @import "addons/triangle";
85
+ @import "addons/word-wrap";
86
+
87
+ @import "bourbon-deprecated-upcoming";
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include border-color(#a60b55 #76cd9c null #e8ae1a);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// border-left-color: #e8ae1a;
16
+ /// border-right-color: #76cd9c;
17
+ /// border-top-color: #a60b55;
18
+ /// }
19
+ ///
20
+ /// @require {mixin} directional-property
21
+ ///
22
+ /// @output `border-color`
23
+
24
+ @mixin border-color($vals...) {
25
+ @include directional-property(border, color, $vals...);
26
+ }
@@ -0,0 +1,48 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
4
+ ///
5
+ /// @param {Number} $radii
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element-one {
10
+ /// @include border-top-radius(5px);
11
+ /// }
12
+ ///
13
+ /// .element-two {
14
+ /// @include border-left-radius(3px);
15
+ /// }
16
+ ///
17
+ /// @example css - CSS Output
18
+ /// .element-one {
19
+ /// border-top-left-radius: 5px;
20
+ /// border-top-right-radius: 5px;
21
+ /// }
22
+ ///
23
+ /// .element-two {
24
+ /// border-bottom-left-radius: 3px;
25
+ /// border-top-left-radius: 3px;
26
+ /// }
27
+ ///
28
+ /// @output `border-radius`
29
+
30
+ @mixin border-top-radius($radii) {
31
+ border-top-left-radius: $radii;
32
+ border-top-right-radius: $radii;
33
+ }
34
+
35
+ @mixin border-right-radius($radii) {
36
+ border-bottom-right-radius: $radii;
37
+ border-top-right-radius: $radii;
38
+ }
39
+
40
+ @mixin border-bottom-radius($radii) {
41
+ border-bottom-left-radius: $radii;
42
+ border-bottom-right-radius: $radii;
43
+ }
44
+
45
+ @mixin border-left-radius($radii) {
46
+ border-bottom-left-radius: $radii;
47
+ border-top-left-radius: $radii;
48
+ }