foundation-rails 5.3.3.0 → 5.4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. data/bower.json +2 -2
  2. data/lib/foundation/rails/version.rb +1 -1
  3. data/vendor/assets/_settings.scss +363 -258
  4. data/vendor/assets/javascripts/foundation/foundation.joyride.js +55 -27
  5. data/vendor/assets/javascripts/foundation/foundation.js +14 -2
  6. data/vendor/assets/javascripts/foundation/foundation.magellan.js +1 -1
  7. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +37 -6
  8. data/vendor/assets/javascripts/foundation/foundation.orbit.js +1 -1
  9. data/vendor/assets/javascripts/foundation/foundation.slider.js +1 -1
  10. data/vendor/assets/javascripts/foundation/foundation.topbar.js +19 -16
  11. data/vendor/assets/stylesheets/foundation/_settings.scss +363 -258
  12. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +3 -3
  13. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +2 -2
  14. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +8 -3
  15. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +89 -5
  16. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +2 -2
  17. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +5 -5
  18. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +4 -4
  19. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +7 -7
  20. data/vendor/assets/stylesheets/foundation/components/_forms.scss +18 -17
  21. data/vendor/assets/stylesheets/foundation/components/_global.scss +36 -9
  22. data/vendor/assets/stylesheets/foundation/components/_grid.scss +3 -1
  23. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +96 -33
  24. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +8 -8
  25. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +4 -4
  26. data/vendor/assets/stylesheets/foundation/components/_labels.scss +2 -2
  27. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +1 -1
  28. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +164 -12
  29. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +10 -10
  30. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +5 -5
  31. data/vendor/assets/stylesheets/foundation/components/_panels.scss +4 -4
  32. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +11 -11
  33. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +2 -2
  34. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +2 -2
  35. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +44 -38
  36. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +1 -1
  37. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +2 -2
  38. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +2 -2
  39. data/vendor/assets/stylesheets/foundation/components/_switches.scss +6 -2
  40. data/vendor/assets/stylesheets/foundation/components/_tables.scss +8 -6
  41. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +17 -6
  42. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +2 -2
  43. data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +4 -4
  44. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +6 -5
  45. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +29 -26
  46. data/vendor/assets/stylesheets/foundation/components/_type.scss +8 -8
  47. metadata +4 -4
@@ -11,6 +11,7 @@
11
11
  defaults : {
12
12
  expose : false, // turn on or off the expose feature
13
13
  modal : true, // Whether to cover page with modal during the tour
14
+ keyboard : true, // enable left, right and esc keystrokes
14
15
  tip_location : 'bottom', // 'top' or 'bottom' in relation to parent
15
16
  nub_position : 'auto', // override on a per tooltip bases
16
17
  scroll_speed : 1500, // Page scrolling speed in milliseconds, 0 = no scroll animation
@@ -63,6 +64,34 @@
63
64
  this.bindings(method, options)
64
65
  },
65
66
 
67
+ go_next : function() {
68
+ if (this.settings.$li.next().length < 1) {
69
+ this.end();
70
+ } else if (this.settings.timer > 0) {
71
+ clearTimeout(this.settings.automate);
72
+ this.hide();
73
+ this.show();
74
+ this.startTimer();
75
+ } else {
76
+ this.hide();
77
+ this.show();
78
+ }
79
+ },
80
+
81
+ go_prev : function() {
82
+ if (this.settings.$li.prev().length < 1) {
83
+ // Do nothing if there are no prev element
84
+ } else if (this.settings.timer > 0) {
85
+ clearTimeout(this.settings.automate);
86
+ this.hide();
87
+ this.show(null, true);
88
+ this.startTimer();
89
+ } else {
90
+ this.hide();
91
+ this.show(null, true);
92
+ }
93
+ },
94
+
66
95
  events : function () {
67
96
  var self = this;
68
97
 
@@ -70,46 +99,40 @@
70
99
  .off('.joyride')
71
100
  .on('click.fndtn.joyride', '.joyride-next-tip, .joyride-modal-bg', function (e) {
72
101
  e.preventDefault();
73
-
74
- if (this.settings.$li.next().length < 1) {
75
- this.end();
76
- } else if (this.settings.timer > 0) {
77
- clearTimeout(this.settings.automate);
78
- this.hide();
79
- this.show();
80
- this.startTimer();
81
- } else {
82
- this.hide();
83
- this.show();
84
- }
85
-
102
+ this.go_next()
86
103
  }.bind(this))
87
104
  .on('click.fndtn.joyride', '.joyride-prev-tip', function (e) {
88
105
  e.preventDefault();
89
-
90
- if (this.settings.$li.prev().length < 1) {
91
- // Do nothing if there are no prev element
92
- } else if (this.settings.timer > 0) {
93
- clearTimeout(this.settings.automate);
94
- this.hide();
95
- this.show(null, true);
96
- this.startTimer();
97
- } else {
98
- this.hide();
99
- this.show(null, true);
100
- }
101
-
106
+ this.go_prev();
102
107
  }.bind(this))
103
108
 
104
109
  .on('click.fndtn.joyride', '.joyride-close-tip', function (e) {
105
110
  e.preventDefault();
106
111
  this.end(this.settings.abort_on_close);
112
+ }.bind(this))
113
+
114
+ .on("keyup.joyride", function(e) {
115
+ if (!this.settings.keyboard) return;
116
+
117
+ switch (e.which) {
118
+ case 39: // right arrow
119
+ e.preventDefault();
120
+ this.go_next();
121
+ break;
122
+ case 37: // left arrow
123
+ e.preventDefault();
124
+ this.go_prev();
125
+ break;
126
+ case 27: // escape
127
+ e.preventDefault();
128
+ this.end(this.settings.abort_on_close);
129
+ }
107
130
  }.bind(this));
108
131
 
109
132
  $(window)
110
133
  .off('.joyride')
111
134
  .on('resize.fndtn.joyride', self.throttle(function () {
112
- if ($('[' + self.attr_name() + ']').length > 0 && self.settings.$next_tip) {
135
+ if ($('[' + self.attr_name() + ']').length > 0 && self.settings.$next_tip && self.settings.riding) {
113
136
  if (self.settings.exposed.length > 0) {
114
137
  var $els = $(self.settings.exposed);
115
138
 
@@ -148,6 +171,7 @@
148
171
  this.settings.$tip_content = this.settings.$content_el.find('> li');
149
172
  this.settings.paused = false;
150
173
  this.settings.attempts = 0;
174
+ this.settings.riding = true;
151
175
 
152
176
  // can we create cookies?
153
177
  if (typeof $.cookie !== 'function') {
@@ -860,7 +884,11 @@
860
884
  this.un_expose();
861
885
  }
862
886
 
887
+ // Unplug keystrokes listener
888
+ $(this.scope).off('keyup.joyride')
889
+
863
890
  this.settings.$next_tip.data('closed', true);
891
+ this.settings.riding = false;
864
892
 
865
893
  $('.joyride-modal-bg').hide();
866
894
  this.settings.$current_tip.hide();
@@ -116,7 +116,7 @@
116
116
  }
117
117
  });
118
118
  }
119
- // # Patch to fix #5043 to move this *after* the if/else clause in order for Backbone and similar frameworks to have improved control over event binding and data-options updating.
119
+ // # Patch to fix #5043 to move this *after* the if/else clause in order for Backbone and similar frameworks to have improved control over event binding and data-options updating.
120
120
  if (typeof method === 'string') {
121
121
  return this[method].call(this, options);
122
122
  }
@@ -278,7 +278,7 @@
278
278
  window.Foundation = {
279
279
  name : 'Foundation',
280
280
 
281
- version : '5.3.1',
281
+ version : '5.3.3',
282
282
 
283
283
  media_queries : {
284
284
  small : S('.foundation-mq-small').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''),
@@ -316,6 +316,18 @@
316
316
  }
317
317
  }
318
318
 
319
+ S(window).load(function(){
320
+ S(window)
321
+ .trigger('resize.fndtn.clearing')
322
+ .trigger('resize.fndtn.dropdown')
323
+ .trigger('resize.fndtn.equalizer')
324
+ .trigger('resize.fndtn.interchange')
325
+ .trigger('resize.fndtn.joyride')
326
+ .trigger('resize.fndtn.magellan')
327
+ .trigger('resize.fndtn.topbar')
328
+ .trigger('resize.fndtn.slider');
329
+ });
330
+
319
331
  return scope;
320
332
  },
321
333
 
@@ -111,7 +111,7 @@
111
111
  placeholder.attr(self.add_namespace('data-magellan-expedition-clone'),'');
112
112
  expedition.before(placeholder);
113
113
  }
114
- expedition.css({position:'fixed', top: settings.fixed_top});
114
+ expedition.css({position:'fixed', top: settings.fixed_top}).addClass('fixed');
115
115
  } else {
116
116
  expedition.prev('[' + self.add_namespace('data-magellan-expedition-clone') + ']').remove();
117
117
  expedition.attr('style',styles).css('position','').css('top','').removeClass('fixed');
@@ -26,6 +26,10 @@
26
26
  move_class = 'move-';
27
27
  right_postfix = 'right';
28
28
  left_postfix = 'left';
29
+ } else if (this.settings.open_method === 'overlap_single') {
30
+ move_class = 'offcanvas-overlap-';
31
+ right_postfix = 'right';
32
+ left_postfix = 'left';
29
33
  } else if (this.settings.open_method === 'overlap') {
30
34
  move_class = 'offcanvas-overlap';
31
35
  }
@@ -33,27 +37,54 @@
33
37
  S(this.scope).off('.offcanvas')
34
38
  .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
35
39
  self.click_toggle_class(e, move_class + right_postfix);
40
+ if (self.settings.open_method !== 'overlap'){
41
+ S(".left-submenu").removeClass(move_class + right_postfix);
42
+ }
36
43
  })
37
44
  .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
38
45
  var settings = self.get_settings(e);
39
- if (settings.close_on_click) {
46
+ var parent = S(this).parent();
47
+
48
+ if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
40
49
  self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
41
- }
50
+ parent.parent().removeClass(move_class + right_postfix);
51
+ }else if(S(this).parent().hasClass("has-submenu")){
52
+ e.preventDefault();
53
+ S(this).siblings(".left-submenu").toggleClass(move_class + right_postfix);
54
+ }else if(parent.hasClass("back")){
55
+ e.preventDefault();
56
+ parent.parent().removeClass(move_class + right_postfix);
57
+ }
42
58
  })
43
59
  .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
44
60
  self.click_toggle_class(e, move_class + left_postfix);
61
+ if (self.settings.open_method !== 'overlap'){
62
+ S(".right-submenu").removeClass(move_class + left_postfix);
63
+ }
45
64
  })
46
65
  .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
47
66
  var settings = self.get_settings(e);
48
- if (settings.close_on_click) {
67
+ var parent = S(this).parent();
68
+
69
+ if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
49
70
  self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
50
- }
71
+ parent.parent().removeClass(move_class + left_postfix);
72
+ }else if(S(this).parent().hasClass("has-submenu")){
73
+ e.preventDefault();
74
+ S(this).siblings(".right-submenu").toggleClass(move_class + left_postfix);
75
+ }else if(parent.hasClass("back")){
76
+ e.preventDefault();
77
+ parent.parent().removeClass(move_class + left_postfix);
78
+ }
51
79
  })
52
80
  .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
53
81
  self.click_remove_class(e, move_class + left_postfix);
54
- if (right_postfix) self.click_remove_class(e, move_class + right_postfix);
82
+ S(".right-submenu").removeClass(move_class + left_postfix);
83
+ if (right_postfix){
84
+ self.click_remove_class(e, move_class + right_postfix);
85
+ S(".left-submenu").removeClass(move_class + left_postfix);
86
+ }
55
87
  });
56
-
57
88
  },
58
89
 
59
90
  toggle: function(class_name, $off_canvas) {
@@ -402,7 +402,7 @@
402
402
  Foundation.libs.orbit = {
403
403
  name: 'orbit',
404
404
 
405
- version: '5.3.1',
405
+ version: '5.3.3',
406
406
 
407
407
  settings: {
408
408
  animation: 'slide',
@@ -141,7 +141,7 @@
141
141
  },
142
142
 
143
143
  normalized_percentage : function(val, start, end) {
144
- return (val - start)/(end - start);
144
+ return Math.min(1, (val - start)/(end - start));
145
145
  },
146
146
 
147
147
  normalized_value : function(val, start, end, step) {
@@ -16,7 +16,7 @@
16
16
  scrolltop : true, // jump to top when sticky nav menu toggle is clicked
17
17
  sticky_on : 'all'
18
18
  },
19
-
19
+
20
20
  init : function (section, method, options) {
21
21
  Foundation.inherit(this, 'add_custom_rule register_media throttle');
22
22
  var self = this;
@@ -28,7 +28,7 @@
28
28
  self.S('[' + this.attr_name() + ']', this.scope).each(function () {
29
29
  var topbar = $(this),
30
30
  settings = topbar.data(self.attr_name(true) + '-init'),
31
- section = self.S('section', this);
31
+ section = self.S('section, .top-bar-section', this);
32
32
  topbar.data('index', 0);
33
33
  var topbarContainer = topbar.parent();
34
34
  if (topbarContainer.hasClass('fixed') || self.is_sticky(topbar, topbarContainer, settings) ) {
@@ -67,7 +67,7 @@
67
67
  return true;
68
68
  } else if (sticky && this.small() && settings.sticky_on === 'small') {
69
69
  return (matchMedia(Foundation.media_queries.small).matches && !matchMedia(Foundation.media_queries.medium).matches &&
70
- !matchMedia(Foundation.media_queries.large).matches);
70
+ !matchMedia(Foundation.media_queries.large).matches);
71
71
  //return true;
72
72
  } else if (sticky && this.medium() && settings.sticky_on === 'medium') {
73
73
  return (matchMedia(Foundation.media_queries.small).matches && matchMedia(Foundation.media_queries.medium).matches &&
@@ -94,7 +94,7 @@
94
94
 
95
95
  var settings = topbar.data(this.attr_name(true) + '-init');
96
96
 
97
- var section = self.S('section, .section', topbar);
97
+ var section = self.S('section, .top-bar-section', topbar);
98
98
 
99
99
  if (self.breakpoint()) {
100
100
  if (!self.rtl) {
@@ -210,7 +210,7 @@
210
210
 
211
211
  var $this = S(this),
212
212
  topbar = $this.closest('[' + self.attr_name() + ']'),
213
- section = topbar.find('section, .section'),
213
+ section = topbar.find('section, .top-bar-section'),
214
214
  dropdownHeight = $this.next('.dropdown').outerHeight(),
215
215
  $selectedLi = $this.closest('li');
216
216
 
@@ -228,10 +228,13 @@
228
228
  topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
229
229
  }
230
230
  });
231
-
232
- S(window).off('.topbar').on('resize.fndtn.topbar', self.throttle(function () {
233
- self.resize.call(self);
234
- }, 50)).trigger('resize').trigger('resize.fndtn.topbar');
231
+
232
+ S(window).off(".topbar").on("resize.fndtn.topbar", self.throttle(function() {
233
+ self.resize.call(self);
234
+ }, 50)).trigger("resize").trigger("resize.fndtn.topbar").load(function(){
235
+ // Ensure that the offset is calculated after all of the pages resources have loaded
236
+ S(this).trigger("resize.fndtn.topbar");
237
+ });
235
238
 
236
239
  S('body').off('.topbar').on('click.fndtn.topbar', function (e) {
237
240
  var parent = S(e.target).closest('li').closest('li.hover');
@@ -249,7 +252,7 @@
249
252
 
250
253
  var $this = S(this),
251
254
  topbar = $this.closest('[' + self.attr_name() + ']'),
252
- section = topbar.find('section, .section'),
255
+ section = topbar.find('section, .top-bar-section'),
253
256
  settings = topbar.data(self.attr_name(true) + '-init'),
254
257
  $movedLi = $this.closest('li.moved'),
255
258
  $previousLevelUl = $movedLi.parent();
@@ -338,7 +341,7 @@
338
341
  assemble : function (topbar) {
339
342
  var self = this,
340
343
  settings = topbar.data(this.attr_name(true) + '-init'),
341
- section = self.S('section', topbar);
344
+ section = self.S('section, .top-bar-section', topbar);
342
345
 
343
346
  // Pull element out of the DOM for manipulation
344
347
  section.detach();
@@ -357,7 +360,7 @@
357
360
  } else {
358
361
  $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
359
362
  }
360
-
363
+
361
364
  // Copy link to subnav
362
365
  if (settings.custom_back_text == true) {
363
366
  $('h5>a', $titleLi).html(settings.back_text);
@@ -385,8 +388,8 @@
385
388
  var total = 0,
386
389
  self = this;
387
390
 
388
- $('> li', ul).each(function () {
389
- total += self.S(this).outerHeight(true);
391
+ $('> li', ul).each(function () {
392
+ total += self.S(this).outerHeight(true);
390
393
  });
391
394
 
392
395
  return total;
@@ -402,7 +405,7 @@
402
405
 
403
406
  update_sticky_positioning: function() {
404
407
  var klass = '.' + this.settings.sticky_class,
405
- $window = this.S(window),
408
+ $window = this.S(window),
406
409
  self = this;
407
410
 
408
411
  if (self.settings.sticky_topbar && self.is_sticky(this.settings.sticky_topbar,this.settings.sticky_topbar.parent(), this.settings)) {
@@ -430,4 +433,4 @@
430
433
 
431
434
  reflow : function () {}
432
435
  };
433
- }(jQuery, this, this.document));
436
+ }(jQuery, window, window.document));
@@ -3,8 +3,53 @@
3
3
  // Licensed under MIT Open Source
4
4
 
5
5
  //
6
- // FOUNDATION SETTINGS
6
+
7
+ // Table of Contents
8
+ // Foundation Settings
7
9
  //
10
+ // a. Base
11
+ // b. Grid
12
+ // c. Global
13
+ // d. Media Query Ranges
14
+ // e. Typography
15
+ // 01. Accordion
16
+ // 02. Alert Boxes
17
+ // 03. Block Grid
18
+ // 04. Breadcrumbs
19
+ // 05. Buttons
20
+ // 06. Button Groups
21
+ // 07. Clearing
22
+ // 08. Dropdown
23
+ // 09. Dropdown Buttons
24
+ // 10. Flex Video
25
+ // 11. Forms
26
+ // 12. Icon Bar
27
+ // 13. Inline Lists
28
+ // 14. Joyride
29
+ // 15. Keystrokes
30
+ // 16. Labels
31
+ // 17. Magellan
32
+ // 18. Off-canvas
33
+ // 19. Orbit
34
+ // 20. Pagination
35
+ // 21. Panels
36
+ // 22. Pricing Tables
37
+ // 23. Progress Bar
38
+ // 24. Range Slider
39
+ // 25. Reveal
40
+ // 26. Side Nav
41
+ // 27. Split Buttons
42
+ // 28. Sub Nav
43
+ // 29. Switch
44
+ // 30. Tables
45
+ // 31. Tabs
46
+ // 32. Thumbnails
47
+ // 33. Tooltips
48
+ // 34. Top Bar
49
+ // 36. Visibility Classes
50
+
51
+ // a. Base
52
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
8
53
 
9
54
  // This is the default html and body font-size for the base rem value.
10
55
  // $rem-base: 16px;
@@ -28,13 +73,22 @@ $include-html-classes: true;
28
73
  // $include-print-styles: true;
29
74
  $include-html-global-classes: $include-html-classes;
30
75
 
31
- // Grid
76
+ // b. Grid
77
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
32
78
 
33
79
  // $include-html-grid-classes: $include-html-classes;
34
80
  // $include-xl-html-grid-classes: false;
35
81
 
36
82
  // $row-width: rem-calc(1000);
37
83
  // $total-columns: 12;
84
+ // $column-gutter: rem-calc(30);
85
+
86
+ // c. Global
87
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
88
+
89
+ // We use these to define default font weights
90
+ // $font-weight-normal: normal !default;
91
+ // $font-weight-bold: bold !default;
38
92
 
39
93
  // Global
40
94
 
@@ -43,11 +97,11 @@ $include-html-global-classes: $include-html-classes;
43
97
  // $font-weight-bold: bold !default;
44
98
 
45
99
  // We use these to control various global styles
46
- // $body-bg: #fff;
47
- // $body-font-color: #222;
100
+ // $body-bg: $white;
101
+ // $body-font-color: $jet;
48
102
  // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
49
- $font-weight-normal:normal;
50
- $body-font-weight: $font-weight-normal;
103
+ // $font-weight-normal:normal;
104
+ // $body-font-weight: $font-weight-normal;
51
105
  // $body-font-style: normal;
52
106
 
53
107
  // We use this to control font-smoothing
@@ -57,27 +111,48 @@ $body-font-weight: $font-weight-normal;
57
111
  // $text-direction: ltr;
58
112
  // $opposite-direction: right;
59
113
  // $default-float: left;
114
+ // $last-child-float: $opposite-direction;
60
115
 
61
116
  // We use these as default colors throughout
62
- $primary-color: #008CBA;
117
+ // $primary-color: #008CBA;
63
118
  // $secondary-color: #e7e7e7;
64
119
  // $alert-color: #f04124;
65
120
  // $success-color: #43AC6A;
66
121
  // $warning-color: #f08a24;
67
122
  // $info-color: #a0d3e8;
68
123
 
124
+ // $white : #FFFFFF;
125
+ // $ghost : #FAFAFA;
126
+ // $snow : #F9F9F9;
127
+ // $vapor : #F6F6F6;
128
+ // $white-smoke : #F5F5F5;
129
+ // $silver : #EFEFEF;
130
+ // $smoke : #EEEEEE;
131
+ // $gainsboro : #DDDDDD;
132
+ // $iron : #CCCCCC;
133
+ // $base : #AAAAAA;
134
+ // $aluminum : #999999;
135
+ // $jumbo : #888888;
136
+ // $monsoon : #777777;
137
+ // $steel : #666666;
138
+ // $charcoal : #555555;
139
+ // $tuatara : #444444;
140
+ // $oil : #333333;
141
+ // $jet : #222222;
142
+ // $black : #000000;
143
+
69
144
  // We use these to make sure border radius matches unless we want it different.
70
145
  // $global-radius: 3px;
71
146
  // $global-rounded: 1000px;
72
147
 
73
148
  // We use these to control inset shadow shiny edges and depressions.
74
149
  // $shiny-edge-size: 0 1px 0;
75
- // $shiny-edge-color: rgba(#fff, .5);
76
- // $shiny-edge-active-color: rgba(#000, .2);
150
+ // $shiny-edge-color: rgba($white, .5);
151
+ // $shiny-edge-active-color: rgba($black, .2);
77
152
 
78
- // $column-gutter: rem-calc(30);
153
+ // d. Media Query Ranges
154
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
79
155
 
80
- // Media Query Ranges
81
156
  // $small-range: (0em, 40em);
82
157
  // $medium-range: (40.063em, 64em);
83
158
  // $large-range: (64.063em, 90em);
@@ -109,16 +184,15 @@ $primary-color: #008CBA;
109
184
  // $medium: $medium-up;
110
185
  // $large: $large-up;
111
186
 
112
- //We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
187
+ // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
113
188
  // $cursor-crosshair-value: crosshair;
114
189
  // $cursor-default-value: default;
115
190
  // $cursor-pointer-value: pointer;
116
191
  // $cursor-help-value: help;
117
192
  // $cursor-text-value: text;
118
193
 
119
- //
120
- // TYPOGRAPHY
121
- //
194
+ // e. Typography
195
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
122
196
 
123
197
  // $include-html-type-classes: $include-html-classes;
124
198
 
@@ -126,7 +200,7 @@ $primary-color: #008CBA;
126
200
  // $header-font-family: $body-font-family;
127
201
  // $header-font-weight: $font-weight-normal;
128
202
  // $header-font-style: normal;
129
- // $header-font-color: #222;
203
+ // $header-font-color: $jet;
130
204
  // $header-line-height: 1.4;
131
205
  // $header-top-margin: .2rem;
132
206
  // $header-bottom-margin: .5rem;
@@ -171,7 +245,7 @@ $primary-color: #008CBA;
171
245
  // $paragraph-text-rendering: optimizeLegibility;
172
246
 
173
247
  // We use these to style <code> tags
174
- // $code-color: #333;
248
+ // $code-color: $oil;
175
249
  // $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
176
250
  // $code-font-weight: $font-weight-normal;
177
251
  // $code-background-color: scale-color($secondary-color, $lightness: 70%);
@@ -189,7 +263,7 @@ $primary-color: #008CBA;
189
263
  // We use these to style the <hr> element
190
264
  // $hr-border-width: 1px;
191
265
  // $hr-border-style: solid;
192
- // $hr-border-color: #ddd;
266
+ // $hr-border-color: $gainsboro;
193
267
  // $hr-margin: rem-calc(20);
194
268
 
195
269
  // We use these to style lists
@@ -209,13 +283,13 @@ $primary-color: #008CBA;
209
283
  // We use these to style blockquotes
210
284
  // $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
211
285
  // $blockquote-padding: rem-calc(9 20 0 19);
212
- // $blockquote-border: 1px solid #ddd;
286
+ // $blockquote-border: 1px solid $gainsboro;
213
287
  // $blockquote-cite-font-size: rem-calc(13);
214
288
  // $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
215
289
  // $blockquote-cite-link-color: $blockquote-cite-font-color;
216
290
 
217
291
  // Acronym styles
218
- // $acronym-underline: 1px dotted #ddd;
292
+ // $acronym-underline: 1px dotted $gainsboro;
219
293
 
220
294
  // We use these to control padding and margin
221
295
  // $microformat-padding: rem-calc(10 12);
@@ -224,7 +298,7 @@ $primary-color: #008CBA;
224
298
  // We use these to control the border styles
225
299
  // $microformat-border-width: 1px;
226
300
  // $microformat-border-style: solid;
227
- // $microformat-border-color: #ddd;
301
+ // $microformat-border-color: $gainsboro;
228
302
 
229
303
  // We use these to control full name font styles
230
304
  // $microformat-fullname-font-weight: $font-weight-bold;
@@ -240,22 +314,25 @@ $primary-color: #008CBA;
240
314
  // $microformat-abbr-font-weight: $font-weight-bold;
241
315
  // $microformat-abbr-font-decoration: none;
242
316
 
243
- // Accordion
317
+
318
+ // 01. Accordion
319
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
244
320
 
245
321
  // $include-html-accordion-classes: $include-html-classes;
246
322
 
247
323
  // $accordion-navigation-padding: rem-calc(16);
248
- // $accordion-navigation-bg-color: #efefef ;
324
+ // $accordion-navigation-bg-color: $silver ;
249
325
  // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
250
326
  // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
251
- // $accordion-navigation-font-color: #222;
327
+ // $accordion-navigation-font-color: $jet;
252
328
  // $accordion-navigation-font-size: rem-calc(16);
253
329
  // $accordion-navigation-font-family: $body-font-family;
254
330
 
255
331
  // $accordion-content-padding: $column-gutter/2;
256
- // $accordion-content-active-bg-color: #fff;
332
+ // $accordion-content-active-bg-color: $white;
257
333
 
258
- // Alert Boxes
334
+ // 02. Alert Boxes
335
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
259
336
 
260
337
  // $include-html-alert-classes: $include-html-classes;
261
338
 
@@ -268,7 +345,7 @@ $primary-color: #008CBA;
268
345
  // We use these to control text style.
269
346
  // $alert-font-weight: $font-weight-normal;
270
347
  // $alert-font-size: rem-calc(13);
271
- // $alert-font-color: #fff;
348
+ // $alert-font-color: $white;
272
349
  // $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
273
350
 
274
351
  // We use this for close hover effect.
@@ -281,7 +358,7 @@ $primary-color: #008CBA;
281
358
  // $alert-bottom-margin: rem-calc(20);
282
359
 
283
360
  // We use these to style the close buttons
284
- // $alert-close-color: #333;
361
+ // $alert-close-color: $oil;
285
362
  // $alert-close-top: 50%;
286
363
  // $alert-close-position: rem-calc(4);
287
364
  // $alert-close-font-size: rem-calc(22);
@@ -296,7 +373,8 @@ $primary-color: #008CBA;
296
373
  // $alert-transition-speed: 300ms;
297
374
  // $alert-transition-ease: ease-out;
298
375
 
299
- // Block Grid
376
+ // 03. Block Grid
377
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
300
378
 
301
379
  // $include-html-block-grid-classes: $include-html-classes;
302
380
  // $include-xl-html-block-grid-classes: false;
@@ -310,7 +388,8 @@ $primary-color: #008CBA;
310
388
  // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
311
389
  // $block-grid-media-queries: true;
312
390
 
313
- // Breadcrumbs
391
+ // 04. Breadcrumbs
392
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
314
393
 
315
394
  // $include-html-nav-classes: $include-html-classes;
316
395
 
@@ -331,18 +410,17 @@ $primary-color: #008CBA;
331
410
  // We use these to set various text styles for breadcrumbs.
332
411
  // $crumb-font-size: rem-calc(11);
333
412
  // $crumb-font-color: $primary-color;
334
- // $crumb-font-color-current: #333;
335
- // $crumb-font-color-unavailable: #999;
413
+ // $crumb-font-color-current: $oil;
414
+ // $crumb-font-color-unavailable: $aluminum;
336
415
  // $crumb-font-transform: uppercase;
337
416
  // $crumb-link-decor: underline;
338
417
 
339
418
  // We use these to control the slash between breadcrumbs
340
- // $crumb-slash-color: #aaa;
419
+ // $crumb-slash-color: $base;
341
420
  // $crumb-slash: "/";
342
421
 
343
- //
344
- // BUTTONS
345
- //
422
+ // 05. Buttons
423
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
346
424
 
347
425
  // $include-html-button-classes: $include-html-classes;
348
426
 
@@ -358,8 +436,8 @@ $primary-color: #008CBA;
358
436
 
359
437
  // We use these to control button text styles.
360
438
  // $button-font-family: $body-font-family;
361
- // $button-font-color: #fff;
362
- // $button-font-color-alt: #333;
439
+ // $button-font-color: $white;
440
+ // $button-font-color-alt: $oil;
363
441
  // $button-font-tny: rem-calc(11);
364
442
  // $button-font-sml: rem-calc(13);
365
443
  // $button-font-med: rem-calc(16);
@@ -391,7 +469,8 @@ $primary-color: #008CBA;
391
469
  // $button-disabled-opacity: 0.7;
392
470
  // $button-disabled-cursor: $cursor-default-value;
393
471
 
394
- // Button Groups
472
+ // 06. Button Groups
473
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
395
474
 
396
475
  // $include-html-button-classes: $include-html-classes;
397
476
 
@@ -399,18 +478,19 @@ $primary-color: #008CBA;
399
478
  // $button-bar-margin-opposite: rem-calc(10);
400
479
  // $button-group-border-width: 1px;
401
480
 
402
- // Clearing
481
+ // 07. Clearing
482
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
403
483
 
404
484
  // $include-html-clearing-classes: $include-html-classes;
405
485
 
406
486
  // We use these to set the background colors for parts of Clearing.
407
- // $clearing-bg: #333;
487
+ // $clearing-bg: $oil;
408
488
  // $clearing-caption-bg: $clearing-bg;
409
489
  // $clearing-carousel-bg: rgba(51,51,51,0.8);
410
490
  // $clearing-img-bg: $clearing-bg;
411
491
 
412
492
  // We use these to style the close button
413
- // $clearing-close-color: #ccc;
493
+ // $clearing-close-color: $iron;
414
494
  // $clearing-close-size: 30px;
415
495
 
416
496
  // We use these to style the arrows
@@ -418,7 +498,7 @@ $primary-color: #008CBA;
418
498
  // $clearing-arrow-color: $clearing-close-color;
419
499
 
420
500
  // We use these to style captions
421
- // $clearing-caption-font-color: #ccc;
501
+ // $clearing-caption-font-color: $iron;
422
502
  // $clearing-caption-font-size: 0.875em;
423
503
  // $clearing-caption-padding: 10px 30px 20px;
424
504
 
@@ -428,7 +508,8 @@ $primary-color: #008CBA;
428
508
  // $clearing-carousel-thumb-width: 120px;
429
509
  // $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
430
510
 
431
- // Dropdown
511
+ // 08. Dropdown
512
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
432
513
 
433
514
  // $include-html-dropdown-classes: $include-html-classes;
434
515
 
@@ -450,37 +531,38 @@ $primary-color: #008CBA;
450
531
  // $f-dropdown-margin-bottom: $f-dropdown-margin-top;
451
532
 
452
533
  // We use this to control the background color
453
- // $f-dropdown-bg: #fff;
534
+ // $f-dropdown-bg: $white;
454
535
 
455
536
  // We use this to set the border styles for dropdowns.
456
537
  // $f-dropdown-border-style: solid;
457
538
  // $f-dropdown-border-width: 1px;
458
- // $f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
539
+ // $f-dropdown-border-color: scale-color($white, $lightness: -20%);
459
540
 
460
541
  // We use these to style the triangle pip.
461
542
  // $f-dropdown-triangle-size: 6px;
462
- // $f-dropdown-triangle-color: #fff;
543
+ // $f-dropdown-triangle-color: $white;
463
544
  // $f-dropdown-triangle-side-offset: 10px;
464
545
 
465
546
  // We use these to control styles for the list elements.
466
547
  // $f-dropdown-list-style: none;
467
- // $f-dropdown-font-color: #555;
548
+ // $f-dropdown-font-color: $charcoal;
468
549
  // $f-dropdown-font-size: rem-calc(14);
469
550
  // $f-dropdown-list-padding: rem-calc(5, 10);
470
551
  // $f-dropdown-line-height: rem-calc(18);
471
- // $f-dropdown-list-hover-bg: #eeeeee ;
552
+ // $f-dropdown-list-hover-bg: $smoke ;
472
553
  // $dropdown-mobile-default-float: 0;
473
554
 
474
555
  // We use this to control the styles for when the dropdown has custom content.
475
556
  // $f-dropdown-content-padding: rem-calc(20);
476
557
 
477
- // Dropdown Buttons
558
+ // 09. Dropdown Buttons
559
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
478
560
 
479
561
  // $include-html-button-classes: $include-html-classes;
480
562
 
481
563
  // We use these to set the color of the pip in dropdown buttons
482
- // $dropdown-button-pip-color: #fff;
483
- // $dropdown-button-pip-color-alt: #333;
564
+ // $dropdown-button-pip-color: $white;
565
+ // $dropdown-button-pip-color-alt: $oil;
484
566
 
485
567
  // $button-pip-tny: rem-calc(6);
486
568
  // $button-pip-sml: rem-calc(7);
@@ -511,7 +593,8 @@ $primary-color: #008CBA;
511
593
  // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
512
594
  // $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
513
595
 
514
- // Flex Video
596
+ // 10. Flex Video
597
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
515
598
 
516
599
  // $include-html-media-classes: $include-html-classes;
517
600
 
@@ -523,7 +606,8 @@ $primary-color: #008CBA;
523
606
  // We use this to control widescreen bottom padding
524
607
  // $flex-video-widescreen-padding-bottom: 56.34%;
525
608
 
526
- // Forms
609
+ // 11. Forms
610
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
527
611
 
528
612
  // $include-html-form-classes: $include-html-classes;
529
613
 
@@ -535,43 +619,43 @@ $primary-color: #008CBA;
535
619
  // $form-label-font-size: rem-calc(14);
536
620
  // $form-label-font-weight: $font-weight-normal;
537
621
  // $form-label-line-height: 1.5;
538
- // $form-label-font-color: scale-color(#000, $lightness: 30%);
622
+ // $form-label-font-color: scale-color($black, $lightness: 30%);
539
623
  // $form-label-small-transform: capitalize;
540
624
  // $form-label-bottom-margin: 0;
541
625
  // $input-font-family: inherit;
542
626
  // $input-font-color: rgba(0,0,0,0.75);
543
627
  // $input-font-size: rem-calc(14);
544
- // $input-bg-color: #fff;
545
- // $input-focus-bg-color: scale-color(#fff, $lightness: -2%);
546
- // $input-border-color: scale-color(#fff, $lightness: -20%);
547
- // $input-focus-border-color: scale-color(#fff, $lightness: -40%);
628
+ // $input-bg-color: $white;
629
+ // $input-focus-bg-color: scale-color($white, $lightness: -2%);
630
+ // $input-border-color: scale-color($white, $lightness: -20%);
631
+ // $input-focus-border-color: scale-color($white, $lightness: -40%);
548
632
  // $input-border-style: solid;
549
633
  // $input-border-width: 1px;
550
634
  // $input-border-radius: $global-radius;
551
- // $input-disabled-bg: #ddd;
635
+ // $input-disabled-bg: $gainsboro;
552
636
  // $input-disabled-cursor: $cursor-default-value;
553
637
  // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
554
638
 
555
639
  // We use these to style the fieldset border and spacing.
556
640
  // $fieldset-border-style: solid;
557
641
  // $fieldset-border-width: 1px;
558
- // $fieldset-border-color: #ddd;
642
+ // $fieldset-border-color: $gainsboro;
559
643
  // $fieldset-padding: rem-calc(20);
560
644
  // $fieldset-margin: rem-calc(18 0);
561
645
 
562
646
  // We use these to style the legends when you use them
563
- // $legend-bg: #fff;
647
+ // $legend-bg: $white;
564
648
  // $legend-font-weight: $font-weight-bold;
565
649
  // $legend-padding: rem-calc(0 3);
566
650
 
567
651
  // We use these to style the prefix and postfix input elements
568
- // $input-prefix-bg: scale-color(#fff, $lightness: -5%);
569
- // $input-prefix-border-color: scale-color(#fff, $lightness: -20%);
652
+ // $input-prefix-bg: scale-color($white, $lightness: -5%);
653
+ // $input-prefix-border-color: scale-color($white, $lightness: -20%);
570
654
  // $input-prefix-border-size: 1px;
571
655
  // $input-prefix-border-type: solid;
572
656
  // $input-prefix-overflow: hidden;
573
- // $input-prefix-font-color: #333;
574
- // $input-prefix-font-color-alt: #fff;
657
+ // $input-prefix-font-color: $oil;
658
+ // $input-prefix-font-color-alt: $white;
575
659
 
576
660
  // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
577
661
  // $input-number-spinners: true;
@@ -582,8 +666,8 @@ $primary-color: #008CBA;
582
666
  // $input-error-message-font-size: rem-calc(12);
583
667
  // $input-error-message-font-weight: $font-weight-normal;
584
668
  // $input-error-message-font-style: italic;
585
- // $input-error-message-font-color: #fff;
586
- // $input-error-message-font-color-alt: #333;
669
+ // $input-error-message-font-color: $white;
670
+ // $input-error-message-font-color-alt: $oil;
587
671
 
588
672
  // We use this to style the glowing effect of inputs when focused
589
673
  // $input-include-glowing-effect: true;
@@ -591,10 +675,28 @@ $primary-color: #008CBA;
591
675
  // $glowing-effect-color: $input-focus-border-color;
592
676
 
593
677
  // Select variables
594
- // $select-bg-color: #fafafa;
678
+ // $select-bg-color: $ghost;
595
679
  // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
596
680
 
597
- // Inline Lists
681
+
682
+ // 12. Icon Bar
683
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
684
+
685
+ // We use these to style the icon-bar and items
686
+ // $include-html-icon-bar-classes: $include-html-classes;
687
+ // $icon-bar-bg: $oil;
688
+ // $icon-bar-font-color: $white;
689
+ // $icon-bar-font-size: 1rem;
690
+ // $icon-bar-hover-color: $primary-color;
691
+ // $icon-bar-icon-color: $white;
692
+ // $icon-bar-icon-size: 1.875rem;
693
+ // $icon-bar-image-width: 1.875rem;
694
+ // $icon-bar-image-height: 1.875rem;
695
+ // $icon-bar-active-color: $primary-color;
696
+ // $icon-bar-item-padding: 1.25rem;
697
+
698
+ // 13. Inline Lists
699
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
598
700
 
599
701
  // $include-html-inline-list-classes: $include-html-classes;
600
702
 
@@ -616,20 +718,21 @@ $primary-color: #008CBA;
616
718
  // We use this to control any elments within list items
617
719
  // $inline-list-children-display: block;
618
720
 
619
- // Joyride
721
+ // 14. Joyride
722
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
620
723
 
621
724
  // $include-html-joyride-classes: $include-html-classes;
622
725
 
623
726
  // Controlling default Joyride styles
624
- // $joyride-tip-bg: #333;
727
+ // $joyride-tip-bg: $oil;
625
728
  // $joyride-tip-default-width: 300px;
626
729
  // $joyride-tip-padding: rem-calc(18 20 24);
627
- // $joyride-tip-border: solid 1px #555;
730
+ // $joyride-tip-border: solid 1px $charcoal;
628
731
  // $joyride-tip-radius: 4px;
629
732
  // $joyride-tip-position-offset: 22px;
630
733
 
631
734
  // Here, we're setting the tip dont styles
632
- // $joyride-tip-font-color: #fff;
735
+ // $joyride-tip-font-color: $white;
633
736
  // $joyride-tip-font-size: rem-calc(14);
634
737
  // $joyride-tip-header-weight: $font-weight-bold;
635
738
 
@@ -639,38 +742,40 @@ $primary-color: #008CBA;
639
742
  // This adjusts the styles for the timer when its enabled
640
743
  // $joyride-tip-timer-width: 50px;
641
744
  // $joyride-tip-timer-height: 3px;
642
- // $joyride-tip-timer-color: #666;
745
+ // $joyride-tip-timer-color: $steel;
643
746
 
644
747
  // This changes up the styles for the close button
645
- // $joyride-tip-close-color: #777;
748
+ // $joyride-tip-close-color: $monsoon;
646
749
  // $joyride-tip-close-size: 24px;
647
750
  // $joyride-tip-close-weight: $font-weight-normal;
648
751
 
649
752
  // When Joyride is filling the screen, we use this style for the bg
650
753
  // $joyride-screenfill: rgba(0,0,0,0.5);
651
754
 
652
- // Keystrokes
755
+ // 15. Keystrokes
756
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
653
757
 
654
758
  // $include-html-keystroke-classes: $include-html-classes;
655
759
 
656
760
  // We use these to control text styles.
657
761
  // $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
658
762
  // $keystroke-font-size: inherit;
659
- // $keystroke-font-color: #222;
660
- // $keystroke-font-color-alt: #fff;
763
+ // $keystroke-font-color: $jet;
764
+ // $keystroke-font-color-alt: $white;
661
765
  // $keystroke-function-factor: -7%;
662
766
 
663
767
  // We use this to control keystroke padding.
664
768
  // $keystroke-padding: rem-calc(2 4 0);
665
769
 
666
770
  // We use these to control background and border styles.
667
- // $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
771
+ // $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
668
772
  // $keystroke-border-style: solid;
669
773
  // $keystroke-border-width: 1px;
670
774
  // $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
671
775
  // $keystroke-radius: $global-radius;
672
776
 
673
- // Labels
777
+ // 16. Labels
778
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
674
779
 
675
780
  // $include-html-label-classes: $include-html-classes;
676
781
 
@@ -681,26 +786,30 @@ $primary-color: #008CBA;
681
786
  // We use these to style the label text
682
787
  // $label-font-sizing: rem-calc(11);
683
788
  // $label-font-weight: $font-weight-normal;
684
- // $label-font-color: #333;
685
- // $label-font-color-alt: #fff;
789
+ // $label-font-color: $oil;
790
+ // $label-font-color-alt: $white;
686
791
  // $label-font-family: $body-font-family;
687
792
 
688
- // Magellan
793
+ // 17. Magellan
794
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
689
795
 
690
796
  // $include-html-magellan-classes: $include-html-classes;
691
797
 
692
- // $magellan-bg: #fff;
693
- $magellan-padding: 0 !important;
798
+ // $magellan-bg: $white;
799
+ // $magellan-padding: 0 !important;
694
800
 
695
- // Off-canvas
801
+ // 18. Off-canvas
802
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
696
803
 
697
804
  // $include-html-off-canvas-classes: $include-html-classes;
698
805
 
699
- // $tabbar-bg: #333;
806
+ // $include-html-off-canvas-classes: $include-html-classes;
807
+
808
+ // $tabbar-bg: $oil;
700
809
  // $tabbar-height: rem-calc(45);
701
810
  // $tabbar-icon-width: $tabbar-height;
702
811
  // $tabbar-line-height: $tabbar-height;
703
- // $tabbar-color: #fff;
812
+ // $tabbar-color: $white;
704
813
  // $tabbar-middle-padding: 0 rem-calc(10);
705
814
 
706
815
  // Off Canvas Divider Styles
@@ -708,30 +817,37 @@ $magellan-padding: 0 !important;
708
817
  // $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
709
818
 
710
819
  // Off Canvas Tab Bar Headers
711
- // $tabbar-header-color: #fff;
820
+ // $tabbar-header-color: $white;
712
821
  // $tabbar-header-weight: $font-weight-bold;
713
822
  // $tabbar-header-line-height: $tabbar-height;
714
823
  // $tabbar-header-margin: 0;
715
824
 
716
825
  // Off Canvas Menu Variables
717
826
  // $off-canvas-width: rem-calc(250);
718
- // $off-canvas-bg: #333;
827
+ // $off-canvas-bg: $oil;
719
828
 
720
829
  // Off Canvas Menu List Variables
721
830
  // $off-canvas-label-padding: 0.3rem rem-calc(15);
722
- // $off-canvas-label-color: #999;
831
+ // $off-canvas-label-color: $aluminum;
723
832
  // $off-canvas-label-text-transform: uppercase;
833
+ // $off-canvas-label-font-size: rem-calc(12);
724
834
  // $off-canvas-label-font-weight: $font-weight-bold;
725
- // $off-canvas-label-bg: #444;
726
- // $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%);
835
+ // $off-canvas-label-bg: $tuatara;
836
+ // $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%);
727
837
  // $off-canvas-label-border-bottom: none;
728
838
  // $off-canvas-label-margin:0;
729
839
  // $off-canvas-link-padding: rem-calc(10, 15);
730
- // $off-canvas-link-color: rgba(#fff, 0.7);
840
+ // $off-canvas-link-color: rgba($white, 0.7);
731
841
  // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
842
+ // $off-canvas-back-bg: $tuatara;
843
+ // $off-canvas-back-border-top: $off-canvas-label-border-top;
844
+ // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
845
+ // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
846
+ // $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
847
+ // $off-canvas-back-hover-border-bottom: none;
732
848
 
733
849
  // Off Canvas Menu Icon Variables
734
- // $tabbar-menu-icon-color: #fff;
850
+ // $tabbar-menu-icon-color: $white;
735
851
  // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
736
852
 
737
853
  // $tabbar-menu-icon-text-indent: rem-calc(35);
@@ -748,21 +864,22 @@ $magellan-padding: 0 !important;
748
864
  // Off Canvas Back-Link Overlay
749
865
  // $off-canvas-overlay-transition: background 300ms ease;
750
866
  // $off-canvas-overlay-cursor: pointer;
751
- // $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5);
752
- // $off-canvas-overlay-background: rgba(#fff, 0.2);
753
- // $off-canvas-overlay-background-hover: rgba(#fff, 0.05);
867
+ // $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5);
868
+ // $off-canvas-overlay-background: rgba($white, 0.2);
869
+ // $off-canvas-overlay-background-hover: rgba($white, 0.05);
754
870
 
755
871
  // Transition Variables
756
872
  // $menu-slide: "transform 500ms ease";
757
873
 
758
- // Orbit
874
+ // 19. Orbit
875
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
759
876
 
760
877
  // $include-html-orbit-classes: $include-html-classes;
761
878
 
762
879
  // We use these to control the caption styles
763
880
  // $orbit-container-bg: none;
764
881
  // $orbit-caption-bg: rgba(51,51,51, 0.8);
765
- // $orbit-caption-font-color: #fff;
882
+ // $orbit-caption-font-color: $white;
766
883
  // $orbit-caption-font-size: rem-calc(14);
767
884
  // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
768
885
  // $orbit-caption-padding: rem-calc(10 14);
@@ -771,21 +888,21 @@ $magellan-padding: 0 !important;
771
888
  // We use these to control the left/right nav styles
772
889
  // $orbit-nav-bg: transparent;
773
890
  // $orbit-nav-bg-hover: rgba(0,0,0,0.3);
774
- // $orbit-nav-arrow-color: #fff;
775
- // $orbit-nav-arrow-color-hover: #fff;
891
+ // $orbit-nav-arrow-color: $white;
892
+ // $orbit-nav-arrow-color-hover: $white;
776
893
 
777
894
  // We use these to control the timer styles
778
895
  // $orbit-timer-bg: rgba(255,255,255,0.3);
779
896
  // $orbit-timer-show-progress-bar: true;
780
897
 
781
898
  // We use these to control the bullet nav styles
782
- // $orbit-bullet-nav-color: #ccc;
783
- // $orbit-bullet-nav-color-active: #999;
899
+ // $orbit-bullet-nav-color: $iron;
900
+ // $orbit-bullet-nav-color-active: $aluminum;
784
901
  // $orbit-bullet-radius: rem-calc(9);
785
902
 
786
903
  // We use these to controls the style of slide numbers
787
904
  // $orbit-slide-number-bg: rgba(0,0,0,0);
788
- // $orbit-slide-number-font-color: #fff;
905
+ // $orbit-slide-number-font-color: $white;
789
906
  // $orbit-slide-number-padding: rem-calc(5);
790
907
 
791
908
  // Hide controls on small
@@ -797,7 +914,8 @@ $magellan-padding: 0 !important;
797
914
  // $wrapper-class: "slideshow-wrapper";
798
915
  // $preloader-class: "preloader";
799
916
 
800
- // Pagination
917
+ // 20. Pagination
918
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
801
919
 
802
920
  // $include-pagination-classes: $include-html-classes;
803
921
 
@@ -808,33 +926,34 @@ $magellan-padding: 0 !important;
808
926
  // We use these to set the list-item properties
809
927
  // $pagination-li-float: $default-float;
810
928
  // $pagination-li-height: rem-calc(24);
811
- // $pagination-li-font-color: #222;
929
+ // $pagination-li-font-color: $jet;
812
930
  // $pagination-li-font-size: rem-calc(14);
813
931
  // $pagination-li-margin: rem-calc(5);
814
932
 
815
933
  // We use these for the pagination anchor links
816
934
  // $pagination-link-pad: rem-calc(1 10 1);
817
- // $pagination-link-font-color: #999;
818
- // $pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
935
+ // $pagination-link-font-color: $aluminum;
936
+ // $pagination-link-active-bg: scale-color($white, $lightness: -10%);
819
937
 
820
938
  // We use these for disabled anchor links
821
939
  // $pagination-link-unavailable-cursor: default;
822
- // $pagination-link-unavailable-font-color: #999;
940
+ // $pagination-link-unavailable-font-color: $aluminum;
823
941
  // $pagination-link-unavailable-bg-active: transparent;
824
942
 
825
943
  // We use these for currently selected anchor links
826
944
  // $pagination-link-current-background: $primary-color;
827
- // $pagination-link-current-font-color: #fff;
945
+ // $pagination-link-current-font-color: $white;
828
946
  // $pagination-link-current-font-weight: $font-weight-bold;
829
947
  // $pagination-link-current-cursor: default;
830
948
  // $pagination-link-current-active-bg: $primary-color;
831
949
 
832
- // Panels
950
+ // 21. Panels
951
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
833
952
 
834
953
  // $include-html-panel-classes: $include-html-classes;
835
954
 
836
955
  // We use these to control the background and border styles
837
- // $panel-bg: scale-color(#fff, $lightness: -5%);
956
+ // $panel-bg: scale-color($white, $lightness: -5%);
838
957
  // $panel-border-style: solid;
839
958
  // $panel-border-size: 1px;
840
959
 
@@ -847,74 +966,76 @@ $magellan-padding: 0 !important;
847
966
  // $panel-padding: rem-calc(20);
848
967
 
849
968
  // We use these to set default font colors
850
- // $panel-font-color: #333;
851
- // $panel-font-color-alt: #fff;
969
+ // $panel-font-color: $oil;
970
+ // $panel-font-color-alt: $white;
852
971
 
853
972
  // $panel-header-adjust: true;
854
973
  // $callout-panel-link-color: $primary-color;
855
974
 
856
- // Pricing Tables
975
+ // 22. Pricing Tables
976
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
857
977
 
858
978
  // $include-html-pricing-classes: $include-html-classes;
859
979
 
860
980
  // We use this to control the border color
861
- // $price-table-border: solid 1px #ddd;
981
+ // $price-table-border: solid 1px $gainsboro;
862
982
 
863
983
  // We use this to control the bottom margin of the pricing table
864
984
  // $price-table-margin-bottom: rem-calc(20);
865
985
 
866
986
  // We use these to control the title styles
867
- // $price-title-bg: #333;
987
+ // $price-title-bg: $oil;
868
988
  // $price-title-padding: rem-calc(15 20);
869
989
  // $price-title-align: center;
870
- // $price-title-color: #eee;
990
+ // $price-title-color: $smoke;
871
991
  // $price-title-weight: $font-weight-normal;
872
992
  // $price-title-size: rem-calc(16);
873
993
  // $price-title-font-family: $body-font-family;
874
994
 
875
995
  // We use these to control the price styles
876
- // $price-money-bg: #f6f6f6 ;
996
+ // $price-money-bg: $vapor ;
877
997
  // $price-money-padding: rem-calc(15 20);
878
998
  // $price-money-align: center;
879
- // $price-money-color: #333;
999
+ // $price-money-color: $oil;
880
1000
  // $price-money-weight: $font-weight-normal;
881
1001
  // $price-money-size: rem-calc(32);
882
1002
  // $price-money-font-family: $body-font-family;
883
1003
 
884
-
885
1004
  // We use these to control the description styles
886
- // $price-bg: #fff;
887
- // $price-desc-color: #777;
1005
+ // $price-bg: $white;
1006
+ // $price-desc-color: $monsoon;
888
1007
  // $price-desc-padding: rem-calc(15);
889
1008
  // $price-desc-align: center;
890
1009
  // $price-desc-font-size: rem-calc(12);
891
1010
  // $price-desc-weight: $font-weight-normal;
892
1011
  // $price-desc-line-height: 1.4;
893
- // $price-desc-bottom-border: dotted 1px #ddd;
1012
+ // $price-desc-bottom-border: dotted 1px $gainsboro;
894
1013
 
895
1014
  // We use these to control the list item styles
896
- // $price-item-color: #333;
1015
+ // $price-item-color: $oil;
897
1016
  // $price-item-padding: rem-calc(15);
898
1017
  // $price-item-align: center;
899
1018
  // $price-item-font-size: rem-calc(14);
900
1019
  // $price-item-weight: $font-weight-normal;
901
- // $price-item-bottom-border: dotted 1px #ddd;
1020
+ // $price-item-bottom-border: dotted 1px $gainsboro;
902
1021
 
903
1022
  // We use these to control the CTA area styles
904
- // $price-cta-bg: #fff;
1023
+ // $price-cta-bg: $white;
905
1024
  // $price-cta-align: center;
906
1025
  // $price-cta-padding: rem-calc(20 20 0);
907
1026
 
908
- // Progress Bar
1027
+
1028
+ // 23. Progress Bar
1029
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
909
1030
 
910
1031
  // $include-html-media-classes: $include-html-classes;
911
1032
 
912
1033
  // We use this to set the progress bar height
913
1034
  // $progress-bar-height: rem-calc(25);
914
- // $progress-bar-color: #f6f6f6 ;
1035
+ // $progress-bar-color: $vapor ;
915
1036
 
916
1037
  // We use these to control the border styles
917
- // $progress-bar-border-color: scale-color(#fff, $lightness: 20%);
1038
+ // $progress-bar-border-color: scale-color($white, $lightness: 20%);
918
1039
  // $progress-bar-border-size: 1px;
919
1040
  // $progress-bar-border-style: solid;
920
1041
  // $progress-bar-border-radius: $global-radius;
@@ -929,26 +1050,60 @@ $magellan-padding: 0 !important;
929
1050
  // $progress-meter-success-color: $success-color;
930
1051
  // $progress-meter-alert-color: $alert-color;
931
1052
 
932
- // Reveal
1053
+ // 24. Range Slider
1054
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1055
+
1056
+ // $include-html-range-slider-classes: $include-html-classes;
1057
+
1058
+ // These variabels define the slider bar styles
1059
+ // $range-slider-bar-width: 100%;
1060
+ // $range-slider-bar-height: rem-calc(16);
1061
+
1062
+ // $range-slider-bar-border-width: 1px;
1063
+ // $range-slider-bar-border-style: solid;
1064
+ // $range-slider-bar-border-color: $gainsboro;
1065
+ // $range-slider-radius: $global-radius;
1066
+ // $range-slider-round: $global-rounded;
1067
+ // $range-slider-bar-bg-color: $ghost;
1068
+
1069
+ // Vertical bar styles
1070
+ // $range-slider-vertical-bar-width: rem-calc(16);
1071
+ // $range-slider-vertical-bar-height: rem-calc(200);
1072
+
1073
+ // These variabels define the slider handle styles
1074
+ // $range-slider-handle-width: rem-calc(32);
1075
+ // $range-slider-handle-height: rem-calc(22);
1076
+ // $range-slider-handle-position-top: rem-calc(-5);
1077
+ // $range-slider-handle-bg-color: $primary-color;
1078
+ // $range-slider-handle-border-width: 1px;
1079
+ // $range-slider-handle-border-style: solid;
1080
+ // $range-slider-handle-border-color: none;
1081
+ // $range-slider-handle-radius: $global-radius;
1082
+ // $range-slider-handle-round: $global-rounded;
1083
+ // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
1084
+ // $range-slider-handle-cursor: pointer;
1085
+
1086
+ // 25. Reveal
1087
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
933
1088
 
934
1089
  // $include-html-reveal-classes: $include-html-classes;
935
1090
 
936
1091
  // We use these to control the style of the reveal overlay.
937
- // $reveal-overlay-bg: rgba(#000, .45);
938
- // $reveal-overlay-bg-old: #000;
1092
+ // $reveal-overlay-bg: rgba($black, .45);
1093
+ // $reveal-overlay-bg-old: $black;
939
1094
 
940
1095
  // We use these to control the style of the modal itself.
941
- // $reveal-modal-bg: #fff;
1096
+ // $reveal-modal-bg: $white;
942
1097
  // $reveal-position-top: rem-calc(100);
943
1098
  // $reveal-default-width: 80%;
944
1099
  // $reveal-modal-padding: rem-calc(20);
945
- // $reveal-box-shadow: 0 0 10px rgba(#000,.4);
1100
+ // $reveal-box-shadow: 0 0 10px rgba($black,.4);
946
1101
 
947
1102
  // We use these to style the reveal close button
948
1103
  // $reveal-close-font-size: rem-calc(40);
949
1104
  // $reveal-close-top: rem-calc(8);
950
1105
  // $reveal-close-side: rem-calc(11);
951
- // $reveal-close-color: #aaa;
1106
+ // $reveal-close-color: $base;
952
1107
  // $reveal-close-weight: $font-weight-bold;
953
1108
 
954
1109
  // We use this to set the default radius used throughout the core.
@@ -958,12 +1113,13 @@ $magellan-padding: 0 !important;
958
1113
  // We use these to control the modal border
959
1114
  // $reveal-border-style: solid;
960
1115
  // $reveal-border-width: 1px;
961
- // $reveal-border-color: #666;
1116
+ // $reveal-border-color: $steel;
962
1117
 
963
1118
  // $reveal-modal-class: "reveal-modal";
964
1119
  // $close-reveal-modal-class: "close-reveal-modal";
965
1120
 
966
- // Side Nav
1121
+ // 26. Side Nav
1122
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
967
1123
 
968
1124
  // $include-html-nav-classes: $include-html-classes;
969
1125
 
@@ -997,16 +1153,17 @@ $magellan-padding: 0 !important;
997
1153
  // We use these to control border styles
998
1154
  // $side-nav-divider-size: 1px;
999
1155
  // $side-nav-divider-style: solid;
1000
- // $side-nav-divider-color: scale-color(#fff, $lightness: 10%);
1156
+ // $side-nav-divider-color: scale-color($white, $lightness: 10%);
1001
1157
 
1002
- // Split Buttons
1158
+ // 27. Split Buttons
1159
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1003
1160
 
1004
1161
  // $include-html-button-classes: $include-html-classes;
1005
1162
 
1006
1163
  // We use these to control different shared styles for Split Buttons
1007
1164
  // $split-button-function-factor: 10%;
1008
- // $split-button-pip-color: #fff;
1009
- // $split-button-pip-color-alt: #333;
1165
+ // $split-button-pip-color: $white;
1166
+ // $split-button-pip-color-alt: $oil;
1010
1167
  // $split-button-active-bg-tint: rgba(0,0,0,0.1);
1011
1168
 
1012
1169
  // We use these to control tiny split buttons
@@ -1037,7 +1194,8 @@ $magellan-padding: 0 !important;
1037
1194
  // $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
1038
1195
  // $split-button-pip-default-float-lrg: rem-calc(-6);
1039
1196
 
1040
- // Sub Nav
1197
+ // 28. Sub Nav
1198
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1041
1199
 
1042
1200
  // $include-html-nav-classes: $include-html-classes;
1043
1201
 
@@ -1048,36 +1206,36 @@ $magellan-padding: 0 !important;
1048
1206
  // We use this to control the definition
1049
1207
  // $sub-nav-font-family: $body-font-family;
1050
1208
  // $sub-nav-font-size: rem-calc(14);
1051
- // $sub-nav-font-color: #999;
1209
+ // $sub-nav-font-color: $aluminum;
1052
1210
  // $sub-nav-font-weight: $font-weight-normal;
1053
1211
  // $sub-nav-text-decoration: none;
1054
- $sub-nav-padding: rem-calc(3 16);
1212
+ // $sub-nav-padding: rem-calc(3 16);
1055
1213
  // $sub-nav-border-radius: 3px;
1056
1214
  // $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
1057
1215
 
1058
1216
 
1059
1217
  // We use these to control the active item styles
1060
- $sub-nav-active-font-weight: $font-weight-normal;
1061
- $sub-nav-active-bg: $primary-color;
1062
- $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
1063
- $sub-nav-active-color: #fff;
1064
- $sub-nav-active-padding: $sub-nav-padding;
1065
- $sub-nav-active-cursor: default;
1218
+ // $sub-nav-active-font-weight: $font-weight-normal;
1219
+ // $sub-nav-active-bg: $primary-color;
1220
+ // $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
1221
+ // $sub-nav-active-color: $white;
1222
+ // $sub-nav-active-padding: $sub-nav-padding;
1223
+ // $sub-nav-active-cursor: default;
1066
1224
 
1067
1225
  // $sub-nav-item-divider: "";
1068
1226
  // $sub-nav-item-divider-margin: rem-calc(12);
1069
1227
 
1070
- //
1071
- // SWITCH
1072
- //
1228
+
1229
+ // 29. Switch
1230
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1073
1231
 
1074
1232
  // $include-html-form-classes: $include-html-classes;
1075
1233
 
1076
1234
  // Controlling border styles and background colors for the switch container
1077
- // $switch-border-color: scale-color(#fff, $lightness: -20%);
1235
+ // $switch-border-color: scale-color($white, $lightness: -20%);
1078
1236
  // $switch-border-style: solid;
1079
1237
  // $switch-border-width: 1px;
1080
- // $switch-bg: #fff;
1238
+ // $switch-bg: $white;
1081
1239
 
1082
1240
  // We use these to control the switch heights for our default classes
1083
1241
  // $switch-height-tny: rem-calc(22);
@@ -1094,7 +1252,7 @@ $sub-nav-active-cursor: default;
1094
1252
  // $switch-label-side-padding: 6px;
1095
1253
 
1096
1254
  // We use these to style the switch-paddle
1097
- // $switch-paddle-bg: #fff;
1255
+ // $switch-paddle-bg: $white;
1098
1256
  // $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
1099
1257
  // $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
1100
1258
  // $switch-paddle-border-width: 1px;
@@ -1102,52 +1260,52 @@ $sub-nav-active-cursor: default;
1102
1260
  // $switch-paddle-transition-speed: .1s;
1103
1261
  // $switch-paddle-transition-ease: ease-out;
1104
1262
  // $switch-positive-color: scale-color($success-color, $lightness: 94%);
1105
- // $switch-negative-color: #f5f5f5;
1263
+ // $switch-negative-color: $white-smoke;
1106
1264
 
1107
1265
  // Outline Style for tabbing through switches
1108
- // $switch-label-outline: 1px dotted #888;
1266
+ // $switch-label-outline: 1px dotted $jumbo;
1109
1267
 
1110
- // Tables
1268
+ // 30. Tables
1269
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1111
1270
 
1112
1271
  // $include-html-table-classes: $include-html-classes;
1113
1272
 
1114
1273
  // These control the background color for the table and even rows
1115
- // $table-bg: #fff;
1116
- // $table-even-row-bg: #f9f9f9 ;
1274
+ // $table-bg: $white;
1275
+ // $table-even-row-bg: $snow ;
1117
1276
 
1118
1277
  // These control the table cell border style
1119
1278
  // $table-border-style: solid;
1120
1279
  // $table-border-size: 1px;
1121
- // $table-border-color: #ddd;
1280
+ // $table-border-color: $gainsboro;
1122
1281
 
1123
1282
  // These control the table head styles
1124
- // $table-head-bg: #f5f5f5 ;
1283
+ // $table-head-bg: $white-smoke ;
1125
1284
  // $table-head-font-size: rem-calc(14);
1126
- // $table-head-font-color: #222;
1285
+ // $table-head-font-color: $jet;
1127
1286
  // $table-head-font-weight: $font-weight-bold;
1128
1287
  // $table-head-padding: rem-calc(8 10 10);
1129
1288
 
1130
1289
  // These control the row padding and font styles
1131
1290
  // $table-row-padding: rem-calc(9 10);
1132
1291
  // $table-row-font-size: rem-calc(14);
1133
- // $table-row-font-color: #222;
1292
+ // $table-row-font-color: $jet;
1134
1293
  // $table-line-height: rem-calc(18);
1135
1294
 
1136
1295
  // These are for controlling the display and margin of tables
1137
1296
  // $table-display: table-cell;
1138
1297
  // $table-margin-bottom: rem-calc(20);
1139
1298
 
1140
- //
1141
- // TABS
1142
- //
1299
+ // 31. Tabs
1300
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1143
1301
 
1144
1302
  // $include-html-tabs-classes: $include-html-classes;
1145
1303
 
1146
1304
  // $tabs-navigation-padding: rem-calc(16);
1147
- // $tabs-navigation-bg-color: #efefef ;
1148
- // $tabs-navigation-active-bg-color: #fff;
1305
+ // $tabs-navigation-bg-color: $silver ;
1306
+ // $tabs-navigation-active-bg-color: $white;
1149
1307
  // $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
1150
- // $tabs-navigation-font-color: #222;
1308
+ // $tabs-navigation-font-color: $jet;
1151
1309
  // $tabs-navigation-active-font-color: $tabs-navigation-font-color;
1152
1310
  // $tabs-navigation-font-size: rem-calc(16);
1153
1311
  // $tabs-navigation-font-family: $body-font-family;
@@ -1157,59 +1315,56 @@ $sub-nav-active-cursor: default;
1157
1315
 
1158
1316
  // $tabs-vertical-navigation-margin-bottom: 1.25rem;
1159
1317
 
1160
- //
1161
- // THUMBNAILS
1162
- //
1318
+ // 32. Thumbnails
1319
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1163
1320
 
1164
1321
  // $include-html-media-classes: $include-html-classes;
1165
1322
 
1166
1323
  // We use these to control border styles
1167
1324
  // $thumb-border-style: solid;
1168
1325
  // $thumb-border-width: 4px;
1169
- // $thumb-border-color: #fff;
1170
- // $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
1326
+ // $thumb-border-color: $white;
1327
+ // $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
1171
1328
  // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
1172
1329
 
1173
1330
  // Radius and transition speed for thumbs
1174
1331
  // $thumb-radius: $global-radius;
1175
1332
  // $thumb-transition-speed: 200ms;
1176
1333
 
1177
- //
1178
- // TOOLTIPS
1179
- //
1334
+ // 33. Tooltips
1335
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1180
1336
 
1181
1337
  // $include-html-tooltip-classes: $include-html-classes;
1182
1338
 
1183
- // $has-tip-border-bottom: dotted 1px #ccc;
1339
+ // $has-tip-border-bottom: dotted 1px $iron;
1184
1340
  // $has-tip-font-weight: $font-weight-bold;
1185
- // $has-tip-font-color: #333;
1341
+ // $has-tip-font-color: $oil;
1186
1342
  // $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
1187
1343
  // $has-tip-font-color-hover: $primary-color;
1188
1344
  // $has-tip-cursor-type: help;
1189
1345
 
1190
1346
  // $tooltip-padding: rem-calc(12);
1191
- // $tooltip-bg: #333;
1347
+ // $tooltip-bg: $oil;
1192
1348
  // $tooltip-font-size: rem-calc(14);
1193
1349
  // $tooltip-font-weight: $font-weight-normal;
1194
- // $tooltip-font-color: #fff;
1350
+ // $tooltip-font-color: $white;
1195
1351
  // $tooltip-line-height: 1.3;
1196
1352
  // $tooltip-close-font-size: rem-calc(10);
1197
1353
  // $tooltip-close-font-weight: $font-weight-normal;
1198
- // $tooltip-close-font-color: #777;
1354
+ // $tooltip-close-font-color: $monsoon;
1199
1355
  // $tooltip-font-size-sml: rem-calc(14);
1200
1356
  // $tooltip-radius: $global-radius;
1201
1357
  // $tooltip-rounded: $global-rounded;
1202
1358
  // $tooltip-pip-size: 5px;
1203
1359
  // $tooltip-max-width: 300px;
1204
1360
 
1205
- //
1206
- // TOP BAR
1207
- //
1361
+ // 34. Top Bar
1362
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1208
1363
 
1209
1364
  // $include-html-top-bar-classes: $include-html-classes;
1210
1365
 
1211
1366
  // Background color for the top bar
1212
- // $topbar-bg-color: #333;
1367
+ // $topbar-bg-color: $oil;
1213
1368
  // $topbar-bg: $topbar-bg-color;
1214
1369
 
1215
1370
  // Height and margin
@@ -1221,24 +1376,24 @@ $sub-nav-active-cursor: default;
1221
1376
  // $topbar-title-font-size: rem-calc(17);
1222
1377
 
1223
1378
  // Style the top bar dropdown elements
1224
- // $topbar-dropdown-bg: #333;
1225
- // $topbar-dropdown-link-color: #fff;
1226
- // $topbar-dropdown-link-bg: #333;
1379
+ // $topbar-dropdown-bg: $oil;
1380
+ // $topbar-dropdown-link-color: $white;
1381
+ // $topbar-dropdown-link-bg: $oil;
1227
1382
  // $topbar-dropdown-link-weight: $font-weight-normal;
1228
1383
  // $topbar-dropdown-toggle-size: 5px;
1229
- // $topbar-dropdown-toggle-color: #fff;
1384
+ // $topbar-dropdown-toggle-color: $white;
1230
1385
  // $topbar-dropdown-toggle-alpha: 0.4;
1231
1386
 
1232
1387
  // Set the link colors and styles for top-level nav
1233
- // $topbar-link-color: #fff;
1234
- // $topbar-link-color-hover: #fff;
1235
- // $topbar-link-color-active: #fff;
1236
- // $topbar-link-color-active-hover: #fff;
1388
+ // $topbar-link-color: $white;
1389
+ // $topbar-link-color-hover: $white;
1390
+ // $topbar-link-color-active: $white;
1391
+ // $topbar-link-color-active-hover: $white;
1237
1392
  // $topbar-link-weight: $font-weight-normal;
1238
1393
  // $topbar-link-font-size: rem-calc(13);
1239
1394
  // $topbar-link-hover-lightness: -10%; // Darken by 10%
1240
1395
  // $topbar-link-bg: $topbar-bg;
1241
- // $topbar-link-bg-color-hover: #555555;
1396
+ // $topbar-link-bg-color-hover: $charcoal;
1242
1397
  // $topbar-link-bg-hover: #272727;
1243
1398
  // $topbar-link-bg-active: $primary-color;
1244
1399
  // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
@@ -1249,20 +1404,20 @@ $sub-nav-active-cursor: default;
1249
1404
  // $topbar-button-font-size: 0.75rem;
1250
1405
  // $topbar-button-top: 7px;
1251
1406
 
1252
- // $topbar-dropdown-label-color: #777;
1407
+ // $topbar-dropdown-label-color: $monsoon;
1253
1408
  // $topbar-dropdown-label-text-transform: uppercase;
1254
1409
  // $topbar-dropdown-label-font-weight: $font-weight-bold;
1255
1410
  // $topbar-dropdown-label-font-size: rem-calc(10);
1256
- // $topbar-dropdown-label-bg: #333;
1411
+ // $topbar-dropdown-label-bg: $oil;
1257
1412
 
1258
1413
  // Top menu icon styles
1259
1414
  // $topbar-menu-link-transform: uppercase;
1260
1415
  // $topbar-menu-link-font-size: rem-calc(13);
1261
1416
  // $topbar-menu-link-weight: $font-weight-bold;
1262
- // $topbar-menu-link-color: #fff;
1263
- // $topbar-menu-icon-color: #fff;
1264
- // $topbar-menu-link-color-toggled: #888;
1265
- // $topbar-menu-icon-color-toggled: #888;
1417
+ // $topbar-menu-link-color: $white;
1418
+ // $topbar-menu-icon-color: $white;
1419
+ // $topbar-menu-link-color-toggled: $jumbo;
1420
+ // $topbar-menu-icon-color-toggled: $jumbo;
1266
1421
 
1267
1422
  // Transitions and breakpoint styles
1268
1423
  // $topbar-transition-speed: 300ms;
@@ -1278,60 +1433,10 @@ $sub-nav-active-cursor: default;
1278
1433
  // $topbar-sticky-class: ".sticky";
1279
1434
  // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
1280
1435
 
1281
- // ICON BAR
1282
-
1283
- // We use these to style the icon-bar and items
1284
- // $include-html-icon-bar-classes: $include-html-classes;
1285
- // $icon-bar-bg: #333;
1286
- // $icon-bar-font-color: #fff;
1287
- // $icon-bar-font-size: 1rem;
1288
- // $icon-bar-hover-color: $primary-color;
1289
- // $icon-bar-icon-color: #fff;
1290
- // $icon-bar-icon-size: 1.875rem;
1291
- // $icon-bar-image-width: 1.875rem;
1292
- // $icon-bar-image-height: 1.875rem;
1293
- // $icon-bar-active-color: $primary-color;
1294
- // $icon-bar-item-padding: 1.25rem;
1295
-
1296
- //
1297
- // VISIBILITY CLASSES
1298
- //
1436
+ // 36. Visibility Classes
1437
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
1299
1438
 
1300
1439
  // $include-html-visibility-classes: $include-html-classes;
1301
1440
  // $include-table-visibility-classes: true;
1302
1441
  // $include-legacy-visibility-classes: true;
1303
1442
  // $include-accessibility-classes: true;
1304
-
1305
- //
1306
- // RANGE SLIDER
1307
- //
1308
-
1309
- // $include-html-range-slider-classes: $include-html-classes;
1310
-
1311
- // These variabels define the slider bar styles
1312
- // $range-slider-bar-width: 100%;
1313
- // $range-slider-bar-height: rem-calc(16);
1314
-
1315
- // $range-slider-bar-border-width: 1px;
1316
- // $range-slider-bar-border-style: solid;
1317
- // $range-slider-bar-border-color: #ddd;
1318
- // $range-slider-radius: $global-radius;
1319
- // $range-slider-round: $global-rounded;
1320
- // $range-slider-bar-bg-color: #fafafa;
1321
-
1322
- // Vertical bar styles
1323
- // $range-slider-vertical-bar-width: rem-calc(16);
1324
- // $range-slider-vertical-bar-height: rem-calc(200);
1325
-
1326
- // These variabels define the slider handle styles
1327
- // $range-slider-handle-width: rem-calc(32);
1328
- // $range-slider-handle-height: rem-calc(22);
1329
- // $range-slider-handle-position-top: rem-calc(-5);
1330
- // $range-slider-handle-bg-color: $primary-color;
1331
- // $range-slider-handle-border-width: 1px;
1332
- // $range-slider-handle-border-style: solid;
1333
- // $range-slider-handle-border-color: none;
1334
- // $range-slider-handle-radius: $global-radius;
1335
- // $range-slider-handle-round: $global-rounded;
1336
- // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
1337
- // $range-slider-handle-cursor: pointer;