zurb-foundation 4.3.1 → 4.3.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (117) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +4 -0
  3. data/Gemfile.lock +31 -2
  4. data/Gruntfile.js +54 -10
  5. data/LICENSE +2 -2
  6. data/README.md +11 -2
  7. data/Rakefile +9 -0
  8. data/docs/CHANGELOG.md +9 -0
  9. data/docs/Procfile +2 -2
  10. data/docs/components/abide.html.erb +30 -6
  11. data/docs/components/alert-boxes.html.erb +35 -10
  12. data/docs/components/block-grid.html.erb +1 -1
  13. data/docs/components/breadcrumbs.html.erb +4 -4
  14. data/docs/components/button-groups.html.erb +2 -2
  15. data/docs/components/buttons.html.erb +10 -10
  16. data/docs/components/clearing.html.erb +28 -2
  17. data/docs/components/custom-forms.html.erb +9 -1
  18. data/docs/components/dropdown-buttons.html.erb +36 -11
  19. data/docs/components/dropdown.html.erb +44 -13
  20. data/docs/components/flex-video.html.erb +3 -3
  21. data/docs/components/forms.html.erb +10 -10
  22. data/docs/components/global.html.erb +15 -20
  23. data/docs/components/grid.html.erb +24 -23
  24. data/docs/components/inline-lists.html.erb +3 -3
  25. data/docs/components/interchange.html.erb +28 -2
  26. data/docs/components/joyride.html.erb +34 -10
  27. data/docs/components/keystrokes.html.erb +3 -3
  28. data/docs/components/kitchen-sink.html.erb +1 -1
  29. data/docs/components/labels.html.erb +3 -3
  30. data/docs/components/magellan.html.erb +25 -2
  31. data/docs/components/orbit.html.erb +39 -9
  32. data/docs/components/pagination.html.erb +7 -7
  33. data/docs/components/panels.html.erb +3 -3
  34. data/docs/components/pricing-tables.html.erb +11 -11
  35. data/docs/components/progress-bars.html.erb +5 -5
  36. data/docs/components/reveal.html.erb +31 -8
  37. data/docs/components/section.html.erb +61 -37
  38. data/docs/components/side-nav.html.erb +4 -4
  39. data/docs/components/split-buttons.html.erb +37 -15
  40. data/docs/components/sub-nav.html.erb +10 -6
  41. data/docs/components/switch.html.erb +2 -2
  42. data/docs/components/tables.html.erb +7 -7
  43. data/docs/components/tooltips.html.erb +30 -6
  44. data/docs/components/top-bar.html.erb +101 -13
  45. data/docs/components/type.html.erb +16 -16
  46. data/docs/config.ru +18 -1
  47. data/docs/controller.rb +1 -1
  48. data/docs/css/_coderay.scss +2 -2
  49. data/docs/css/_footer.scss +7 -7
  50. data/docs/css/_offcanvas.scss +16 -16
  51. data/docs/css/docs.scss +1 -3
  52. data/docs/index.html.erb +29 -29
  53. data/docs/layout.html.erb +5 -5
  54. data/docs/media-queries.html.erb +3 -3
  55. data/docs/rails.html.erb +2 -1
  56. data/docs/sass.html.erb +188 -146
  57. data/docs/support.html.erb +2 -2
  58. data/foundation.gemspec +1 -0
  59. data/js/foundation/foundation.abide.js +5 -5
  60. data/js/foundation/foundation.alerts.js +9 -4
  61. data/js/foundation/foundation.clearing.js +2 -2
  62. data/js/foundation/foundation.dropdown.js +11 -5
  63. data/js/foundation/foundation.forms.js +51 -28
  64. data/js/foundation/foundation.joyride.js +7 -5
  65. data/js/foundation/foundation.js +25 -1
  66. data/js/foundation/foundation.magellan.js +3 -2
  67. data/js/foundation/foundation.orbit.js +78 -58
  68. data/js/foundation/foundation.placeholder.js +424 -177
  69. data/js/foundation/foundation.reveal.js +39 -16
  70. data/js/foundation/foundation.section.js +62 -32
  71. data/js/foundation/foundation.tooltips.js +3 -2
  72. data/js/foundation/foundation.topbar.js +139 -69
  73. data/lib/foundation/generators/templates/application.html.erb +2 -1
  74. data/lib/foundation/version.rb +1 -1
  75. data/lib/zurb-foundation.rb +12 -0
  76. data/package.json +4 -3
  77. data/scss/foundation/_variables.scss +183 -159
  78. data/scss/foundation/components/_alert-boxes.scss +8 -8
  79. data/scss/foundation/components/_block-grid.scss +1 -1
  80. data/scss/foundation/components/_breadcrumbs.scss +3 -3
  81. data/scss/foundation/components/_button-groups.scss +2 -2
  82. data/scss/foundation/components/_buttons.scss +20 -20
  83. data/scss/foundation/components/_custom-forms.scss +19 -14
  84. data/scss/foundation/components/_dropdown-buttons.scss +8 -8
  85. data/scss/foundation/components/_dropdown.scss +4 -4
  86. data/scss/foundation/components/_flex-video.scss +2 -2
  87. data/scss/foundation/components/_forms.scss +28 -18
  88. data/scss/foundation/components/_global.scss +43 -18
  89. data/scss/foundation/components/_grid-5.scss +4 -4
  90. data/scss/foundation/components/_grid.scss +6 -4
  91. data/scss/foundation/components/_inline-lists.scss +3 -3
  92. data/scss/foundation/components/_joyride.scss +10 -10
  93. data/scss/foundation/components/_keystrokes.scss +2 -2
  94. data/scss/foundation/components/_labels.scss +2 -2
  95. data/scss/foundation/components/_orbit.scss +58 -44
  96. data/scss/foundation/components/_pagination.scss +6 -6
  97. data/scss/foundation/components/_panels.scss +7 -4
  98. data/scss/foundation/components/_pricing-tables.scss +10 -10
  99. data/scss/foundation/components/_progress-bars.scss +3 -3
  100. data/scss/foundation/components/_reveal.scss +5 -5
  101. data/scss/foundation/components/_section.scss +21 -21
  102. data/scss/foundation/components/_side-nav.scss +3 -3
  103. data/scss/foundation/components/_split-buttons.scss +7 -7
  104. data/scss/foundation/components/_sub-nav.scss +26 -10
  105. data/scss/foundation/components/_switch.scss +15 -11
  106. data/scss/foundation/components/_tables.scss +6 -6
  107. data/scss/foundation/components/_thumbs.scss +2 -4
  108. data/scss/foundation/components/_tooltips.scss +4 -4
  109. data/scss/foundation/components/_top-bar.scss +77 -39
  110. data/scss/foundation/components/_type.scss +25 -23
  111. data/scss/foundation/components/_visibility.scss +28 -28
  112. data/scss/normalize.scss +22 -14
  113. data/spec/js/SectionSpec.js +39 -0
  114. data/spec/js/helpers/SectionSpecHelper.js +22 -0
  115. data/spec/js/helpers/SpecHelper.js +19 -0
  116. metadata +32 -25
  117. data/.rbenv-version +0 -1
@@ -3,7 +3,8 @@
3
3
  <!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
4
4
  <!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
5
5
  <!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
6
- <!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
6
+ <!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]-->
7
+ <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
7
8
  <head>
8
9
  <meta charset="utf-8" />
9
10
 
@@ -1,3 +1,3 @@
1
1
  module Foundation
2
- VERSION = "4.3.1"
2
+ VERSION = "4.3.2"
3
3
  end
@@ -6,6 +6,18 @@ if defined?(Rails::Generators::Base)
6
6
  end
7
7
 
8
8
  module Foundation
9
+ def self.root
10
+ File.join(File.dirname(__FILE__), "..")
11
+ end
12
+
13
+ def self.js_path
14
+ File.join(File.dirname(__FILE__), "..", "js")
15
+ end
16
+
17
+ def self.scss_path
18
+ File.join(File.dirname(__FILE__), "..", "scss")
19
+ end
20
+
9
21
  if defined?(Rails::Engine)
10
22
  require "foundation/engine"
11
23
  elsif defined?(Sprockets)
@@ -2,9 +2,10 @@
2
2
  "name": "zurb-foundation",
3
3
  "version": "4.0.0-wip",
4
4
  "devDependencies": {
5
- "grunt": "~0.4.0",
6
- "grunt-contrib-watch": "~0.1.0",
7
- "grunt-contrib-qunit": "~0.1.1"
5
+ "grunt": "~0.4.1",
6
+ "grunt-contrib-watch": "~0.5.3",
7
+ "grunt-contrib-jasmine": "~0.5.1",
8
+ "grunt-contrib-sass": "~0.5.0"
8
9
  },
9
10
  "licenses": [
10
11
  {
@@ -14,7 +14,7 @@ $base-font-size: 100% !default;
14
14
  // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
15
15
  // If you want your base font-size to be a different size and not have it effect grid size too,
16
16
  // set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
17
- $em-base: 16 !default;
17
+ $em-base: 16px !default;
18
18
 
19
19
  // It strips the unit of measure and returns it
20
20
  @function strip-unit($num) {
@@ -22,28 +22,40 @@ $em-base: 16 !default;
22
22
  }
23
23
 
24
24
  // Converts "px" to "em" using the ($)em-base
25
- @function convert-to-em($value) {
26
- $value: strip-unit($value) / strip-unit($em-base) * 1em;
25
+ @function convert-to-em($value, $base-value: $em-base) {
26
+ $value: strip-unit($value) / strip-unit($base-value) * 1em;
27
27
  @if ($value == 0em) { $value: 0; } // Turn 0em into 0
28
28
  @return $value;
29
29
  }
30
30
 
31
- // Working in ems is annoying. Think in pixels by using this handy function, emCalc(#)
31
+ // Working in ems is annoying. Think in pixels by using this handy function, em-calc(#)
32
32
  // Just enter the number, no need to mention "px"
33
- @function emCalc($values...) {
33
+ @function em-calc($values, $base-value: $em-base) {
34
34
  $max: length($values); // Get the total number of parameters passed
35
35
 
36
36
  // If there is only 1 parameter, then return it as an integer.
37
37
  // This is done because a list can't be multiplied or divided even if it contains a single value
38
- @if $max == 1 { @return convert-to-em(nth($values, 1)); }
38
+ @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }
39
39
 
40
40
  $emValues: (); // This will eventually store the converted $values in a list
41
41
  @for $i from 1 through $max {
42
- $emValues: append($emValues, convert-to-em(nth($values, $i)));
42
+ $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
43
43
  }
44
44
  @return $emValues;
45
45
  }
46
46
 
47
+ //Retaining this for backward compatability
48
+
49
+ @function emCalc($pxWidth) {
50
+ @return $pxWidth / $em-base * 1em;
51
+ }
52
+
53
+ // Maybe you want to create rems with pixels
54
+ // $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
55
+ // @function rem-calc($pxWidth) {
56
+ // @return $pxWidth / $rem-base * 1rem;
57
+ // }
58
+
47
59
  // Change whether or not you include browser prefixes
48
60
  // $experimental: true;
49
61
 
@@ -137,8 +149,8 @@ $default-float: left;
137
149
  // Grid Variables
138
150
  //
139
151
 
140
- // $row-width: emCalc(1000);
141
- // $column-gutter: emCalc(30);
152
+ // $row-width: em-calc(1000);
153
+ // $column-gutter: em-calc(30);
142
154
  // $total-columns: 12;
143
155
 
144
156
  //
@@ -148,7 +160,7 @@ $default-float: left;
148
160
  // We use this to control the maximum number of block grid elements per row
149
161
 
150
162
  // $block-grid-elements: 12;
151
- // $block-grid-default-spacing: emCalc(20);
163
+ // $block-grid-default-spacing: em-calc(20);
152
164
 
153
165
  // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
154
166
 
@@ -171,11 +183,11 @@ $default-float: left;
171
183
 
172
184
  // Control header font sizes
173
185
 
174
- // $h1-font-size: emCalc(44);
175
- // $h2-font-size: emCalc(37);
176
- // $h3-font-size: emCalc(27);
177
- // $h4-font-size: emCalc(23);
178
- // $h5-font-size: emCalc(18);
186
+ // $h1-font-size: em-calc(44);
187
+ // $h2-font-size: em-calc(37);
188
+ // $h3-font-size: em-calc(27);
189
+ // $h4-font-size: em-calc(23);
190
+ // $h5-font-size: em-calc(18);
179
191
  // $h6-font-size: 1em;
180
192
 
181
193
  // Control how subheaders are styled.
@@ -197,8 +209,8 @@ $default-float: left;
197
209
  // $paragraph-font-weight: normal;
198
210
  // $paragraph-font-size: 1em;
199
211
  // $paragraph-line-height: 1.6;
200
- // $paragraph-margin-bottom: emCalc(20);
201
- // $paragraph-aside-font-size: emCalc(14);
212
+ // $paragraph-margin-bottom: em-calc(20);
213
+ // $paragraph-aside-font-size: em-calc(14);
202
214
  // $paragraph-aside-line-height: 1.35;
203
215
  // $paragraph-aside-font-style: italic;
204
216
  // $paragraph-text-rendering: optimizeLegibility;
@@ -220,23 +232,23 @@ $default-float: left;
220
232
  // $hr-border-width: 1px;
221
233
  // $hr-border-style: solid;
222
234
  // $hr-border-color: #ddd;
223
- // $hr-margin: emCalc(20);
235
+ // $hr-margin: em-calc(20);
224
236
 
225
237
  // Style lists
226
238
 
227
239
  // $list-style-position: outside;
228
240
  // $list-side-margin: 0;
229
- // $list-nested-margin: emCalc(20);
241
+ // $list-nested-margin: em-calc(20);
230
242
  // $definition-list-header-weight: bold;
231
243
  // $definition-list-header-margin-bottom: .3em;
232
- // $definition-list-margin-bottom: emCalc(12);
244
+ // $definition-list-margin-bottom: em-calc(12);
233
245
 
234
246
  // Style blockquotes
235
247
 
236
248
  // $blockquote-font-color: lighten($header-font-color, 30%);
237
- // $blockquote-padding: emCalc(9, 20, 0, 19);
249
+ // $blockquote-padding: em-calc(9, 20, 0, 19);
238
250
  // $blockquote-border: 1px solid #ddd;
239
- // $blockquote-cite-font-size: emCalc(13);
251
+ // $blockquote-cite-font-size: em-calc(13);
240
252
  // $blockquote-cite-font-color: lighten($header-font-color, 20%);
241
253
  // $blockquote-cite-link-color: $blockquote-cite-font-color;
242
254
 
@@ -246,8 +258,8 @@ $default-float: left;
246
258
 
247
259
  // Control padding and margin
248
260
 
249
- // $microformat-padding: emCalc(10, 12);
250
- // $microformat-margin: emCalc(0, 0, 20, 0);
261
+ // $microformat-padding: em-calc(10 12);
262
+ // $microformat-margin: em-calc(0 0 20 0);
251
263
 
252
264
  // Control the border styles
253
265
 
@@ -258,14 +270,14 @@ $default-float: left;
258
270
  // Control full name font styles
259
271
 
260
272
  // $microformat-fullname-font-weight: bold;
261
- // $microformat-fullname-font-size: emCalc(15);
273
+ // $microformat-fullname-font-size: em-calc(15);
262
274
 
263
275
  // Control the summary font styles
264
276
 
265
277
  // $microformat-summary-font-weight: bold;
266
278
 
267
279
  // Control abbr padding
268
- // $microformat-abbr-padding: emCalc(0, 1);
280
+ // $microformat-abbr-padding: em-calc(0 1);
269
281
 
270
282
  // Control abbr font styles
271
283
 
@@ -278,18 +290,18 @@ $default-float: left;
278
290
 
279
291
  // We use this to set the base for lots of form spacing and positioning styles
280
292
 
281
- // $form-spacing: emCalc(16);
293
+ // $form-spacing: em-calc(16);
282
294
 
283
295
  // We use these to style the labels in different ways
284
296
 
285
297
  // $form-label-pointer: pointer;
286
- // $form-label-font-size: emCalc(14);
298
+ // $form-label-font-size: em-calc(14);
287
299
  // $form-label-font-weight: 500;
288
300
  // $form-label-font-color: lighten(#000, 30%);
289
- // $form-label-bottom-margin: emCalc(3);
301
+ // $form-label-bottom-margin: em-calc(3);
290
302
  // $input-font-family: inherit;
291
303
  // $input-font-color: rgba(0,0,0,0.75);
292
- // $input-font-size: emCalc(14);
304
+ // $input-font-size: em-calc(14);
293
305
  // $input-bg-color: #fff;
294
306
  // $input-focus-bg-color: darken(#fff, 2%);
295
307
  // $input-border-color: darken(#fff, 20%);
@@ -305,14 +317,14 @@ $default-float: left;
305
317
  // $fieldset-border-style: solid;
306
318
  // $fieldset-border-width: 1px;
307
319
  // $fieldset-border-color: #ddd;
308
- // $fieldset-padding: emCalc(20);
309
- // $fieldset-margin: emCalc(18, 0);
320
+ // $fieldset-padding: em-calc(20);
321
+ // $fieldset-margin: em-calc(18 0);
310
322
 
311
323
  // We use these to style the legends when you use them
312
324
 
313
325
  // $legend-bg: #fff;
314
326
  // $legend-font-weight: bold;
315
- // $legend-padding: emCalc(0, 3);
327
+ // $legend-padding: em-calc(0 3);
316
328
 
317
329
  // We use these to style the prefix and postfix input elements
318
330
 
@@ -326,9 +338,9 @@ $default-float: left;
326
338
 
327
339
  // We use these to style the error states for inputs and labels
328
340
 
329
- // $input-error-message-padding: emCalc(6, 4);
341
+ // $input-error-message-padding: em-calc(6 4);
330
342
  // $input-error-message-top: 0;
331
- // $input-error-message-font-size: emCalc(12);
343
+ // $input-error-message-font-size: em-calc(12);
332
344
  // $input-error-message-font-weight: bold;
333
345
  // $input-error-message-font-color: #fff;
334
346
  // $input-error-message-font-color-alt: #333;
@@ -344,25 +356,25 @@ $default-float: left;
344
356
 
345
357
  // We use these to build padding for buttons.
346
358
 
347
- // $button-med: emCalc(12);
348
- // $button-tny: emCalc(7);
349
- // $button-sml: emCalc(9);
350
- // $button-lrg: emCalc(16);
359
+ // $button-med: em-calc(12);
360
+ // $button-tny: em-calc(7);
361
+ // $button-sml: em-calc(9);
362
+ // $button-lrg: em-calc(16);
351
363
 
352
364
  // We use this to control the display property.
353
365
 
354
366
  // $button-display: inline-block;
355
- // $button-margin-bottom: emCalc(20);
367
+ // $button-margin-bottom: em-calc(20);
356
368
 
357
369
  // We use these to control button text styles.
358
370
 
359
371
  // $button-font-family: inherit;
360
372
  // $button-font-color: #fff;
361
373
  // $button-font-color-alt: #333;
362
- // $button-font-med: emCalc(16);
363
- // $button-font-tny: emCalc(11);
364
- // $button-font-sml: emCalc(13);
365
- // $button-font-lrg: emCalc(20);
374
+ // $button-font-med: em-calc(16);
375
+ // $button-font-tny: em-calc(11);
376
+ // $button-font-sml: em-calc(13);
377
+ // $button-font-lrg: em-calc(20);
366
378
  // $button-font-weight: bold;
367
379
  // $button-font-align: center;
368
380
 
@@ -390,7 +402,7 @@ $default-float: left;
390
402
 
391
403
  // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
392
404
 
393
- // $button-bar-margin-opposite: emCalc(10);
405
+ // $button-bar-margin-opposite: em-calc(10);
394
406
 
395
407
  //
396
408
  // Dropdown Button Variables
@@ -406,28 +418,28 @@ $default-float: left;
406
418
  // $dropdown-button-padding-tny: $button-tny * 5;
407
419
  // $dropdown-button-pip-size-tny: $button-tny;
408
420
  // $dropdown-button-pip-opposite-tny: $button-tny * 2;
409
- // $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1);
421
+ // $dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(1);
410
422
 
411
423
  // We use these to style small dropdown buttons
412
424
 
413
425
  // $dropdown-button-padding-sml: $button-sml * 5;
414
426
  // $dropdown-button-pip-size-sml: $button-sml;
415
427
  // $dropdown-button-pip-opposite-sml: $button-sml * 2;
416
- // $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1);
428
+ // $dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1);
417
429
 
418
430
  // We use these to style medium dropdown buttons
419
431
 
420
- // $dropdown-button-padding-med: $button-med * 4 + emCalc(3);
421
- // $dropdown-button-pip-size-med: $button-med - emCalc(3);
432
+ // $dropdown-button-padding-med: $button-med * 4 + em-calc(3);
433
+ // $dropdown-button-pip-size-med: $button-med - em-calc(3);
422
434
  // $dropdown-button-pip-opposite-med: $button-med * 2;
423
- // $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2);
435
+ // $dropdown-button-pip-top-med: -$button-med / 2 + em-calc(2);
424
436
 
425
437
  // We use these to style large dropdown buttons
426
438
 
427
439
  // $dropdown-button-padding-lrg: $button-lrg * 4;
428
- // $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6);
429
- // $dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12);
430
- // $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3);
440
+ // $dropdown-button-pip-size-lrg: $button-lrg - em-calc(6);
441
+ // $dropdown-button-pip-opposite-lrg: $button-lrg + em-calc(12);
442
+ // $dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3);
431
443
 
432
444
  //
433
445
  // Split Button Variables
@@ -446,7 +458,7 @@ $default-float: left;
446
458
  // $split-button-span-width-tny: $button-tny * 6.5;
447
459
  // $split-button-pip-size-tny: $button-tny;
448
460
  // $split-button-pip-top-tny: $button-tny * 2;
449
- // $split-button-pip-default-float-tny: emCalc(-5);
461
+ // $split-button-pip-default-float-tny: em-calc(-5);
450
462
 
451
463
  // We use these to control small split buttons
452
464
 
@@ -454,23 +466,23 @@ $default-float: left;
454
466
  // $split-button-span-width-sml: $button-sml * 5;
455
467
  // $split-button-pip-size-sml: $button-sml;
456
468
  // $split-button-pip-top-sml: $button-sml * 1.5;
457
- // $split-button-pip-default-float-sml: emCalc(-9);
469
+ // $split-button-pip-default-float-sml: em-calc(-9);
458
470
 
459
471
  // We use these to control medium split buttons
460
472
 
461
473
  // $split-button-padding-med: $button-med * 6.4;
462
474
  // $split-button-span-width-med: $button-med * 4;
463
- // $split-button-pip-size-med: $button-med - emCalc(3);
475
+ // $split-button-pip-size-med: $button-med - em-calc(3);
464
476
  // $split-button-pip-top-med: $button-med * 1.5;
465
- // $split-button-pip-default-float-med: emCalc(-9);
477
+ // $split-button-pip-default-float-med: em-calc(-9);
466
478
 
467
479
  // We use these to control large split buttons
468
480
 
469
481
  // $split-button-padding-lrg: $button-lrg * 6;
470
482
  // $split-button-span-width-lrg: $button-lrg * 3.75;
471
- // $split-button-pip-size-lrg: $button-lrg - emCalc(6);
472
- // $split-button-pip-top-lrg: $button-lrg + emCalc(5);
473
- // $split-button-pip-default-float-lrg: emCalc(-9);
483
+ // $split-button-pip-size-lrg: $button-lrg - em-calc(6);
484
+ // $split-button-pip-top-lrg: $button-lrg + em-calc(5);
485
+ // $split-button-pip-default-float-lrg: em-calc(-9);
474
486
 
475
487
  //
476
488
  // Alert Box Variables
@@ -478,15 +490,15 @@ $default-float: left;
478
490
 
479
491
  // We use this to control alert padding.
480
492
 
481
- // $alert-padding-top: emCalc(11);
493
+ // $alert-padding-top: em-calc(11);
482
494
  // $alert-padding-default-float: $alert-padding-top;
483
- // $alert-padding-opposite-direction: $alert-padding-top + emCalc(10);
484
- // $alert-padding-bottom: $alert-padding-top + emCalc(1);
495
+ // $alert-padding-opposite-direction: $alert-padding-top + em-calc(10);
496
+ // $alert-padding-bottom: $alert-padding-top + em-calc(1);
485
497
 
486
498
  // We use these to control text style.
487
499
 
488
500
  // $alert-font-weight: bold;
489
- // $alert-font-size: emCalc(14);
501
+ // $alert-font-size: em-calc(14);
490
502
  // $alert-font-color: #fff;
491
503
  // $alert-font-color-alt: darken($secondary-color, 60%);
492
504
 
@@ -499,13 +511,13 @@ $default-float: left;
499
511
  // $alert-border-style: solid;
500
512
  // $alert-border-width: 1px;
501
513
  // $alert-border-color: darken($primary-color, $alert-function-factor);
502
- // $alert-bottom-margin: emCalc(20);
514
+ // $alert-bottom-margin: em-calc(20);
503
515
 
504
516
  // We use these to style the close buttons
505
517
 
506
518
  // $alert-close-color: #333;
507
- // $alert-close-position: emCalc(5);
508
- // $alert-close-font-size: emCalc(22);
519
+ // $alert-close-position: em-calc(5);
520
+ // $alert-close-font-size: em-calc(22);
509
521
  // $alert-close-opacity: 0.3;
510
522
  // $alert-close-opacity-hover: 0.5;
511
523
  // $alert-close-padding: 5px 4px 4px;
@@ -525,8 +537,8 @@ $default-float: left;
525
537
 
526
538
  // We use these to set the padding around the breadcrumbs.
527
539
 
528
- // $crumb-padding: emCalc(9, 14, 9);
529
- // $crumb-side-padding: emCalc(12);
540
+ // $crumb-padding: em-calc(9 14 9);
541
+ // $crumb-side-padding: em-calc(12);
530
542
 
531
543
  // We use these to control border styles.
532
544
 
@@ -538,7 +550,7 @@ $default-float: left;
538
550
 
539
551
  // We use these to set various text styles for breadcrumbs.
540
552
 
541
- // $crumb-font-size: emCalc(11);
553
+ // $crumb-font-size: em-calc(11);
542
554
  // $crumb-font-color: $primary-color;
543
555
  // $crumb-font-color-current: #333;
544
556
  // $crumb-font-color-unavailable: #999;
@@ -597,7 +609,7 @@ $default-float: left;
597
609
  // $custom-form-check-color: #222;
598
610
  // $custom-form-check-size: 16px;
599
611
  // $custom-form-radio-size: 8px;
600
- // $custom-form-checkbox-radius: 0px;
612
+ // $custom-form-checkbox-radius: 0;
601
613
 
602
614
  // We use these to style the custom select form element.
603
615
 
@@ -606,8 +618,8 @@ $default-float: left;
606
618
  // $custom-select-border-color: #ddd;
607
619
  // $custom-select-triangle-color: #aaa;
608
620
  // $custom-select-triangle-color-open: #222;
609
- // $custom-select-height: emCalc(13) + ($form-spacing * 1.5);
610
- // $custom-select-margin-bottom: emCalc(20);
621
+ // $custom-select-height: em-calc(13) + ($form-spacing * 1.5);
622
+ // $custom-select-margin-bottom: em-calc(20);
611
623
  // $custom-select-font-color-selected: #141414;
612
624
  // $custom-select-disabled-color: #888;
613
625
 
@@ -619,15 +631,15 @@ $default-float: left;
619
631
  // $custom-dropdown-border-width: 1px;
620
632
  // $custom-dropdown-border-style: solid;
621
633
  // $custom-dropdown-font-color: #555;
622
- // $custom-dropdown-font-size: emCalc(14);
634
+ // $custom-dropdown-font-size: em-calc(14);
623
635
  // $custom-dropdown-color-selected: #eeeeee;
624
636
  // $custom-dropdown-font-color-selected: #000;
625
- // $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
637
+ // $custom-dropdown-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
626
638
  // $custom-dropdown-offset-top: auto;
627
- // $custom-dropdown-list-padding: emCalc(4);
628
- // $custom-dropdown-default-float-padding: emCalc(6);
629
- // $custom-dropdown-opposite-padding: emCalc(38);
630
- // $custom-dropdown-list-item-min-height: emCalc(24);
639
+ // $custom-dropdown-list-padding: em-calc(4);
640
+ // $custom-dropdown-default-float-padding: em-calc(6);
641
+ // $custom-dropdown-opposite-padding: em-calc(38);
642
+ // $custom-dropdown-list-item-min-height: em-calc(24);
631
643
  // $custom-dropdown-width-small: 134px;
632
644
  // $custom-dropdown-width-medium: 254px;
633
645
  // $custom-dropdown-width-large: 434px;
@@ -663,15 +675,15 @@ $default-float: left;
663
675
 
664
676
  // $f-dropdown-list-style: none;
665
677
  // $f-dropdown-font-color: #555;
666
- // $f-dropdown-font-size: emCalc(14);
667
- // $f-dropdown-list-padding: emCalc(5, 10);
668
- // $f-dropdown-line-height: emCalc(18);
678
+ // $f-dropdown-font-size: em-calc(14);
679
+ // $f-dropdown-list-padding: em-calc(5 10);
680
+ // $f-dropdown-line-height: em-calc(18);
669
681
  // $f-dropdown-list-hover-bg: #eeeeee;
670
682
  // $dropdown-mobile-default-float: 0;
671
683
 
672
684
  // We use this to control the styles for when the dropdown has custom content.
673
685
 
674
- // $f-dropdown-content-padding: emCalc(20);
686
+ // $f-dropdown-content-padding: em-calc(20);
675
687
 
676
688
  //
677
689
  // Flex Video Variables
@@ -679,9 +691,9 @@ $default-float: left;
679
691
 
680
692
  // We use these to control video container padding and margins
681
693
 
682
- // $flex-video-padding-top: emCalc(25);
694
+ // $flex-video-padding-top: em-calc(25);
683
695
  // $flex-video-padding-bottom: 67.5%;
684
- // $flex-video-margin-bottom: emCalc(16);
696
+ // $flex-video-margin-bottom: em-calc(16);
685
697
 
686
698
  // We use this to control widescreen bottom padding
687
699
 
@@ -695,8 +707,8 @@ $default-float: left;
695
707
 
696
708
  // $inline-list-top-margin: 0;
697
709
  // $inline-list-opposite-margin: 0;
698
- // $inline-list-bottom-margin: emCalc(17);
699
- // $inline-list-default-float-margin: emCalc(-22);
710
+ // $inline-list-bottom-margin: em-calc(17);
711
+ // $inline-list-default-float-margin: em-calc(-22);
700
712
 
701
713
  // $inline-list-padding: 0;
702
714
 
@@ -720,7 +732,7 @@ $default-float: left;
720
732
 
721
733
  // $joyride-tip-bg: rgb(0,0,0);
722
734
  // $joyride-tip-default-width: 300px;
723
- // $joyride-tip-padding: emCalc(18, 20, 24);
735
+ // $joyride-tip-padding: em-calc(18 20 24);
724
736
  // $joyride-tip-border: solid 1px #555;
725
737
  // $joyride-tip-radius: 4px;
726
738
  // $joyride-tip-position-offset: 22px;
@@ -728,7 +740,7 @@ $default-float: left;
728
740
  // Here, we're setting the tip dont styles
729
741
 
730
742
  // $joyride-tip-font-color: #fff;
731
- // $joyride-tip-font-size: emCalc(14);
743
+ // $joyride-tip-font-size: em-calc(14);
732
744
  // $joyride-tip-header-weight: bold;
733
745
 
734
746
  // This changes the nub size
@@ -758,14 +770,14 @@ $default-float: left;
758
770
  // We use these to control text styles.
759
771
 
760
772
  // $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
761
- // $keystroke-font-size: emCalc(14);
773
+ // $keystroke-font-size: em-calc(14);
762
774
  // $keystroke-font-color: #222;
763
775
  // $keystroke-font-color-alt: #fff;
764
776
  // $keystroke-function-factor: 7%;
765
777
 
766
778
  // We use this to control keystroke padding.
767
779
 
768
- // $keystroke-padding: emCalc(2, 4, 0);
780
+ // $keystroke-padding: em-calc(2 4 0);
769
781
 
770
782
  // We use these to control background and border styles.
771
783
 
@@ -781,12 +793,12 @@ $default-float: left;
781
793
 
782
794
  // We use these to style the labels
783
795
 
784
- // $label-padding: emCalc(3, 10, 4);
796
+ // $label-padding: em-calc(3 10 4);
785
797
  // $label-radius: $global-radius;
786
798
 
787
799
  // We use these to style the label text
788
800
 
789
- // $label-font-sizing: emCalc(14);
801
+ // $label-font-sizing: em-calc(14);
790
802
  // $label-font-weight: bold;
791
803
  // $label-font-color: #333;
792
804
  // $label-font-color-alt: #fff;
@@ -805,30 +817,36 @@ $default-float: left;
805
817
  // We use these to control the caption styles
806
818
 
807
819
  // $orbit-container-bg: #f5f5f5;
808
- // $orbit-caption-bg-old: rgb(0,0,0);
809
820
  // $orbit-caption-bg: rgba(0,0,0,0.6);
810
821
  // $orbit-caption-font-color: #fff;
822
+ // $orbit-caption-font-size: emCalc(14);
823
+ // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
824
+ // $orbit-caption-padding: emCalc(10,14);
825
+ // $orbit-caption-height: auto;
811
826
 
812
827
  // We use these to control the left/right nav styles
813
828
 
814
- // $orbit-nav-bg-old: rgb(0,0,0);
815
829
  // $orbit-nav-bg: rgba(0,0,0,0.6);
830
+ // $orbit-nav-bg-hover: rgba(0,0,0,0.6);
831
+ // $orbit-nav-arrow-color: #fff;
832
+ // $orbit-nav-arrow-color-hover: #ccc;
816
833
 
817
834
  // We use these to control the timer styles
818
835
 
819
- // $orbit-timer-bg-old: rgb(0,0,0);
820
836
  // $orbit-timer-bg: rgba(0,0,0,0.6);
837
+ // $orbit-timer-show-progress-bar: true;
821
838
 
822
839
  // We use these to control the bullet nav styles
823
840
 
824
841
  // $orbit-bullet-nav-color: #999;
825
842
  // $orbit-bullet-nav-color-active: #555;
843
+ // $orbit-bullet-radius: emCalc(18);
826
844
 
827
- // We use thes to controls the style of slide numbers
845
+ // We use these to controls the style of slide numbers
828
846
 
829
847
  // $orbit-slide-number-bg: rgba(0,0,0,0);
830
848
  // $orbit-slide-number-font-color: #fff;
831
- // $orbit-slide-number-padding: emCalc(5px);
849
+ // $orbit-slide-number-padding: em-calc(5);
832
850
 
833
851
  // Graceful Loading Wrapper and preloader
834
852
 
@@ -841,20 +859,20 @@ $default-float: left;
841
859
 
842
860
  // We use these to control the pagination container
843
861
 
844
- // $pagination-height: emCalc(24);
845
- // $pagination-margin: emCalc(-5);
862
+ // $pagination-height: em-calc(24);
863
+ // $pagination-margin: em-calc(-5);
846
864
 
847
865
  // We use these to set the list-item properties
848
866
 
849
867
  // $pagination-li-float: $default-float;
850
- // $pagination-li-height: emCalc(24);
868
+ // $pagination-li-height: em-calc(24);
851
869
  // $pagination-li-font-color: #222;
852
- // $pagination-li-font-size: emCalc(14);
853
- // $pagination-li-margin: emCalc(5);
870
+ // $pagination-li-font-size: em-calc(14);
871
+ // $pagination-li-margin: em-calc(5);
854
872
 
855
873
  // We use these for the pagination anchor links
856
874
 
857
- // $pagination-link-pad: emCalc(1, 7, 1);
875
+ // $pagination-link-pad: em-calc(1 7 1);
858
876
  // $pagination-link-font-color: #999;
859
877
  // $pagination-link-active-bg: darken(#fff, 10%);
860
878
 
@@ -889,8 +907,8 @@ $default-float: left;
889
907
 
890
908
  // We use these to set default inner padding and bottom margin
891
909
 
892
- // $panel-margin-bottom: emCalc(20);
893
- // $panel-padding: emCalc(20);
910
+ // $panel-margin-bottom: em-calc(20);
911
+ // $panel-padding: em-calc(20);
894
912
 
895
913
  // We use these to set default font colors
896
914
 
@@ -909,33 +927,33 @@ $default-float: left;
909
927
 
910
928
  // We use this to control the bottom margin of the pricing table
911
929
 
912
- // $price-table-margin-bottom: emCalc(20);
930
+ // $price-table-margin-bottom: em-calc(20);
913
931
 
914
932
  // We use these to control the title styles
915
933
 
916
934
  // $price-title-bg: #ddd;
917
- // $price-title-padding: emCalc(15, 20);
935
+ // $price-title-padding: em-calc(15 20);
918
936
  // $price-title-align: center;
919
937
  // $price-title-color: #333;
920
938
  // $price-title-weight: bold;
921
- // $price-title-size: emCalc(16);
939
+ // $price-title-size: em-calc(16);
922
940
 
923
941
  // We use these to control the price styles
924
942
 
925
943
  // $price-money-bg: #eee;
926
- // $price-money-padding: emCalc(15, 20);
944
+ // $price-money-padding: em-calc(15, 20);
927
945
  // $price-money-align: center;
928
946
  // $price-money-color: #333;
929
947
  // $price-money-weight: normal;
930
- // $price-money-size: emCalc(20);
948
+ // $price-money-size: em-calc(20);
931
949
 
932
950
  // We use these to control the description styles
933
951
 
934
952
  // $price-bg: #fff;
935
953
  // $price-desc-color: #777;
936
- // $price-desc-padding: emCalc(15);
954
+ // $price-desc-padding: em-calc(15);
937
955
  // $price-desc-align: center;
938
- // $price-desc-font-size: emCalc(12);
956
+ // $price-desc-font-size: em-calc(12);
939
957
  // $price-desc-weight: normal;
940
958
  // $price-desc-line-height: 1.4;
941
959
  // $price-desc-bottom-border: dotted 1px #ddd;
@@ -943,9 +961,9 @@ $default-float: left;
943
961
  // We use these to control the list item styles
944
962
 
945
963
  // $price-item-color: #333;
946
- // $price-item-padding: emCalc(15);
964
+ // $price-item-padding: em-calc(15);
947
965
  // $price-item-align: center;
948
- // $price-item-font-size: emCalc(14);
966
+ // $price-item-font-size: em-calc(14);
949
967
  // $price-item-weight: normal;
950
968
  // $price-item-bottom-border: dotted 1px #ddd;
951
969
 
@@ -953,7 +971,7 @@ $default-float: left;
953
971
 
954
972
  // $price-cta-bg: #f5f5f5;
955
973
  // $price-cta-align: center;
956
- // $price-cta-padding: emCalc(20, 20, 0);
974
+ // $price-cta-padding: em-calc(20 20 0);
957
975
 
958
976
  //
959
977
  // Progress Bar Variables
@@ -961,7 +979,7 @@ $default-float: left;
961
979
 
962
980
  // We use this to se the prog bar height
963
981
 
964
- // $progress-bar-height: emCalc(25);
982
+ // $progress-bar-height: em-calc(25);
965
983
  // $progress-bar-color: transparent;
966
984
 
967
985
  // We use these to control the border styles
@@ -973,8 +991,8 @@ $default-float: left;
973
991
 
974
992
  // We use these to control the margin & padding
975
993
 
976
- // $progress-bar-pad: emCalc(2);
977
- // $progress-bar-margin-bottom: emCalc(10);
994
+ // $progress-bar-pad: em-calc(2);
995
+ // $progress-bar-margin-bottom: em-calc(10);
978
996
 
979
997
  // We use these to set the meter colors
980
998
 
@@ -997,14 +1015,14 @@ $default-float: left;
997
1015
  // $reveal-modal-bg: #fff;
998
1016
  // $reveal-position-top: 50px;
999
1017
  // $reveal-default-width: 80%;
1000
- // $reveal-modal-padding: emCalc(20);
1018
+ // $reveal-modal-padding: em-calc(20);
1001
1019
  // $reveal-box-shadow: 0 0 10px rgba(#000,.4);
1002
1020
 
1003
1021
  // We use these to style the reveal close button
1004
1022
 
1005
- // $reveal-close-font-size: emCalc(22);
1006
- // $reveal-close-top: emCalc(8);
1007
- // $reveal-close-side: emCalc(11);
1023
+ // $reveal-close-font-size: em-calc(22);
1024
+ // $reveal-close-top: em-calc(8);
1025
+ // $reveal-close-side: em-calc(11);
1008
1026
  // $reveal-close-color: #aaa;
1009
1027
  // $reveal-close-weight: bold;
1010
1028
 
@@ -1023,8 +1041,8 @@ $default-float: left;
1023
1041
 
1024
1042
  // We use these to set padding and hover factor
1025
1043
 
1026
- // $section-title-padding: emCalc(15);
1027
- // $section-content-padding: emCalc(15);
1044
+ // $section-title-padding: em-calc(15);
1045
+ // $section-content-padding: em-calc(15);
1028
1046
  // $section-function-factor: 10%;
1029
1047
 
1030
1048
  // These style the titles
@@ -1044,14 +1062,14 @@ $default-float: left;
1044
1062
 
1045
1063
  // Font controls
1046
1064
 
1047
- // $section-font-size: emCalc(14);
1065
+ // $section-font-size: em-calc(14);
1048
1066
 
1049
1067
  // Control the color of the background and some size options
1050
1068
 
1051
1069
  // $section-content-bg: #fff;
1052
- // $section-vertical-nav-min-width: emCalc(200);
1053
- // $section-vertical-tabs-title-width: emCalc(200);
1054
- // $section-bottom-margin: emCalc(20);
1070
+ // $section-vertical-nav-min-width: em-calc(200);
1071
+ // $section-vertical-tabs-title-width: em-calc(200);
1072
+ // $section-bottom-margin: em-calc(20);
1055
1073
 
1056
1074
  // $title-selector: ".title";
1057
1075
  // $content-selector: ".content";
@@ -1063,19 +1081,19 @@ $default-float: left;
1063
1081
 
1064
1082
  // We use this to control padding.
1065
1083
 
1066
- // $side-nav-padding: emCalc(14, 0);
1084
+ // $side-nav-padding: em-calc(14 0);
1067
1085
 
1068
1086
  // We use these to control list styles.
1069
1087
 
1070
1088
  // $side-nav-list-type: none;
1071
1089
  // $side-nav-list-position: inside;
1072
- // $side-nav-list-margin: emCalc(0, 0, 7, 0);
1090
+ // $side-nav-list-margin: em-calc(0 0 7 0);
1073
1091
 
1074
1092
  // We use these to control link styles.
1075
1093
 
1076
1094
  // $side-nav-link-color: $primary-color;
1077
1095
  // $side-nav-link-color-active: lighten(#000, 30%);
1078
- // $side-nav-font-size: emCalc(14);
1096
+ // $side-nav-font-size: em-calc(14);
1079
1097
  // $side-nav-font-weight: bold;
1080
1098
 
1081
1099
  // We use these to control border styles
@@ -1090,12 +1108,12 @@ $default-float: left;
1090
1108
 
1091
1109
  // We use these to control margin and padding
1092
1110
 
1093
- // $sub-nav-list-margin: emCalc(-4, 0, 18);
1094
- // $sub-nav-list-padding-top: emCalc(4);
1111
+ // $sub-nav-list-margin: em-calc(-4 0 18);
1112
+ // $sub-nav-list-padding-top: em-calc(4);
1095
1113
 
1096
1114
  // We use this to control the definition
1097
1115
 
1098
- // $sub-nav-font-size: emCalc(14);
1116
+ // $sub-nav-font-size: em-calc(14);
1099
1117
  // $sub-nav-font-color: #999;
1100
1118
  // $sub-nav-font-weight: normal;
1101
1119
  // $sub-nav-text-decoration: none;
@@ -1106,9 +1124,12 @@ $default-float: left;
1106
1124
  // $sub-nav-active-font-weight: bold;
1107
1125
  // $sub-nav-active-bg: $primary-color;
1108
1126
  // $sub-nav-active-color: #fff;
1109
- // $sub-nav-active-padding: emCalc(3, 9);
1127
+ // $sub-nav-active-padding: em-calc(3 9);
1110
1128
  // $sub-nav-active-cursor: default;
1111
1129
 
1130
+ // $sub-nav-item-divider: "" !default;
1131
+ // $sub-nav-item-divider-margin: emCalc(12) !default;
1132
+
1112
1133
  //
1113
1134
  // Switch Variables
1114
1135
  //
@@ -1126,7 +1147,7 @@ $default-float: left;
1126
1147
  // $switch-height-sml: 28px;
1127
1148
  // $switch-height-med: 36px;
1128
1149
  // $switch-height-lrg: 44px;
1129
- // $switch-bottom-margin: emCalc(20);
1150
+ // $switch-bottom-margin: em-calc(20);
1130
1151
 
1131
1152
  // We use these to control default font sizes for our classes.
1132
1153
 
@@ -1170,22 +1191,22 @@ $default-float: left;
1170
1191
  // These control the table head styles
1171
1192
 
1172
1193
  // $table-head-bg: #f5f5f5;
1173
- // $table-head-font-size: emCalc(14);
1194
+ // $table-head-font-size: em-calc(14);
1174
1195
  // $table-head-font-color: #222;
1175
1196
  // $table-head-font-weight: bold;
1176
- // $table-head-padding: emCalc(8, 10, 10);
1197
+ // $table-head-padding: em-calc(8 10 10);
1177
1198
 
1178
1199
  // These control the row padding and font styles
1179
1200
 
1180
- // $table-row-padding: emCalc(9, 10);
1181
- // $table-row-font-size: emCalc(14);
1201
+ // $table-row-padding: em-calc(9 10);
1202
+ // $table-row-font-size: em-calc(14);
1182
1203
  // $table-row-font-color: #222;
1183
- // $table-line-height: emCalc(18);
1204
+ // $table-line-height: em-calc(18);
1184
1205
 
1185
1206
  // These are for controlling the display and margin of tables
1186
1207
 
1187
1208
  // $table-display: table-cell;
1188
- // $table-margin-bottom: emCalc(20);
1209
+ // $table-margin-bottom: em-calc(20);
1189
1210
 
1190
1211
  //
1191
1212
  // Image Thumbnail Variables
@@ -1215,16 +1236,16 @@ $default-float: left;
1215
1236
  // $has-tip-font-color-hover: $primary-color;
1216
1237
  // $has-tip-cursor-type: help;
1217
1238
 
1218
- // $tooltip-padding: emCalc(8);
1239
+ // $tooltip-padding: em-calc(8);
1219
1240
  // $tooltip-bg: #000;
1220
- // $tooltip-font-size: emCalc(15);
1241
+ // $tooltip-font-size: em-calc(15);
1221
1242
  // $tooltip-font-weight: bold;
1222
1243
  // $tooltip-font-color: #fff;
1223
1244
  // $tooltip-line-height: 1.3;
1224
- // $tooltip-close-font-size: emCalc(10);
1245
+ // $tooltip-close-font-size: em-calc(10);
1225
1246
  // $tooltip-close-font-weight: normal;
1226
1247
  // $tooltip-close-font-color: #888;
1227
- // $tooltip-font-size-sml: emCalc(14);
1248
+ // $tooltip-font-size-sml: em-calc(14);
1228
1249
  // $tooltip-radius: $global-radius;
1229
1250
  // $tooltip-pip-size: 5px;
1230
1251
 
@@ -1234,12 +1255,13 @@ $default-float: left;
1234
1255
 
1235
1256
  // Background color for the top bar
1236
1257
 
1237
- // $topbar-bg: #111;
1258
+ // $topbar-bg-color: #111;
1259
+ // $topbar-bg: $topbar-bg-color;
1238
1260
 
1239
1261
  // Height and margin
1240
1262
 
1241
1263
  // $topbar-height: 45px;
1242
- // $topbar-margin-bottom: emCalc(30);
1264
+ // $topbar-margin-bottom: 0;
1243
1265
 
1244
1266
  // Control Input height for top bar
1245
1267
 
@@ -1248,13 +1270,13 @@ $default-float: left;
1248
1270
  // Controlling the styles for the title in the top bar
1249
1271
 
1250
1272
  // $topbar-title-weight: bold;
1251
- // $topbar-title-font-size: emCalc(17);
1273
+ // $topbar-title-font-size: em-calc(17);
1252
1274
 
1253
1275
  // Style the top bar dropdown elements
1254
1276
 
1255
1277
  // $topbar-dropdown-bg: #222;
1256
1278
  // $topbar-dropdown-link-color: #fff;
1257
- // $topbar-dropdown-link-bg: lighten($topbar-bg, 5%);
1279
+ // // $topbar-dropdown-link-bg: lighten($topbar-bg-color, 5%);
1258
1280
  // $topbar-dropdown-toggle-size: 5px;
1259
1281
  // $topbar-dropdown-toggle-color: #fff;
1260
1282
  // $topbar-dropdown-toggle-alpha: 0.5;
@@ -1265,20 +1287,21 @@ $default-float: left;
1265
1287
  // $topbar-link-color-hover: #fff;
1266
1288
  // $topbar-link-color-active: #fff;
1267
1289
  // $topbar-link-weight: bold;
1268
- // $topbar-link-font-size: emCalc(13);
1290
+ // $topbar-link-font-size: em-calc(13);
1269
1291
  // $topbar-link-hover-lightness: -30%; // Darken by 30%
1270
- // $topbar-link-bg-hover: darken($topbar-bg, 3%);
1271
- // $topbar-link-bg-active: darken($topbar-bg, 3%);
1292
+ // $topbar-link-bg-hover: darken($topbar-bg-color, 3%);
1293
+ // $topbar-link-bg-active: darken($topbar-bg-color, 3%);
1272
1294
 
1273
1295
  // $topbar-dropdown-label-color: #555;
1274
1296
  // $topbar-dropdown-label-text-transform: uppercase;
1275
1297
  // $topbar-dropdown-label-font-weight: bold;
1276
- // $topbar-dropdown-label-font-size: emCalc(10);
1298
+ // $topbar-dropdown-label-font-size: em-calc(10);
1299
+ // $topbar-dropdown-label-bg: lighten($topbar-bg-color, 5%);
1277
1300
 
1278
1301
  // Top menu icon styles
1279
1302
 
1280
1303
  // $topbar-menu-link-transform: uppercase;
1281
- // $topbar-menu-link-font-size: emCalc(13);
1304
+ // $topbar-menu-link-font-size: em-calc(13);
1282
1305
  // $topbar-menu-link-weight: bold;
1283
1306
  // $topbar-menu-link-color: #fff;
1284
1307
  // $topbar-menu-icon-color: #fff;
@@ -1288,14 +1311,15 @@ $default-float: left;
1288
1311
  // Transitions and breakpoint styles
1289
1312
 
1290
1313
  // $topbar-transition-speed: 300ms;
1291
- // $topbar-breakpoint: emCalc(940); // Change to 9999px for always mobile layout
1314
+ // $topbar-breakpoint: 940 !default; // Change to 9999px for always mobile layout
1292
1315
  // $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
1293
1316
 
1294
1317
  // Divider Styles
1295
1318
 
1296
- // $topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
1297
- // $topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
1319
+ // $topbar-divider-border-bottom: solid 1px lighten($topbar-bg-color, 10%);
1320
+ // $topbar-divider-border-top: solid 1px darken($topbar-bg-color, 10%);
1298
1321
 
1299
1322
  // Sticky Class
1300
1323
 
1301
1324
  // $topbar-sticky-class: ".sticky";
1325
+ // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item