express_admin 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bea22a03d6708c852369998fa42a459ea9d318bf
-  data.tar.gz: 66706337e91df3fb01b03513d0c44297fb99f001
+  metadata.gz: bb2a9cf8ada844b82e6985aa04ba62459fa55abe
+  data.tar.gz: a5daac5f4438d062802e21c33bc4d018e410d4f7
 SHA512:
-  metadata.gz: 0d2577e4883fa4b4e014eb1d26d635f71a275077a072b5660f65acf5a3bfd1e2b2298f681e6f48e9927a6db784bf57918fa70592484b443c618d402a383e1ab4
-  data.tar.gz: 9786da54b6d37ded2ee21dd892d759c30bc5bea648a01f6b896dbd83f60de2712465fa8686131b4d8fa75ba224253c1a26c6ca92076c860f2c92bdef2ca9492e
+  metadata.gz: 2defacf4587cae2d0009bfd4dc23213d5073fdc8e4ce2a898fa55106ee1747bfdcfe0fb5b58e0e9815ff75047fd7411dcfb0b25feaa3ff7d55ab8a0567ea0068
+  data.tar.gz: 8624c91cabbc239fb53399f17824f56ab4c48f4d7940fb047e18acbe4d5bedf4e1e47c939bf3be984611ef5d64715e9d4ebff9b044b4b7b6007eb90ad641dbb3

data/Rakefile

@@ -17,6 +17,8 @@ end
 APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
 load 'rails/tasks/engine.rake'
 
+
+
 Bundler::GemHelper.install_tasks
 
 require 'rake/testtask'
@@ -24,7 +26,7 @@ require 'rake/testtask'
 Rake::TestTask.new(:test) do |t|
   t.libs << 'lib'
   t.libs << 'test'
-  t.pattern = 'test/lib/**/*_test.rb'
+  t.pattern = 'test/**/*_test.rb'
   t.verbose = false
 end
 

data/app/assets/javascripts/express_admin.js

@@ -1,7 +1,4 @@
 //= require jquery
 //= require jquery_ujs
-//= require foundation/foundation
-//= require foundation
-//= require turbolinks
 //= require jquery.loadingdotdotdot
-//= require_tree .
+//= require_tree .

data/app/assets/javascripts/express_admin/admin.js

@@ -1,6 +1,4 @@
 $(function() {
-  $(document).foundation();
-
   // Table Row as links
   $('.table-hover tr[data-url]').on('click', function() {
     window.location.href = $(this).attr('data-url');

data/app/assets/javascripts/express_admin/scrollTableBody.js

@@ -0,0 +1,127 @@
+(function ($) {
+    var defaults = {
+        rowsToDisplay: 10
+    };
+    
+    var scrollBarWidth = 15, fixedTableWidth;
+    
+    $.fn.scrollTableBody = function(options) {
+        options = $.extend(defaults, options);
+        
+        var table = this;
+        
+        wrapTable(table, options);
+        alignColumns(table);
+
+        var resizeAlignFunction = function () { alignOnResize(table); };
+        var canDebounce = typeof _ == 'function' && typeof _.debounce == 'function';
+        if (canDebounce) resizeAlignFunction = _.debounce(resizeAlignFunction, 150);
+        $(window).resize(resizeAlignFunction);
+    };
+    
+    function wrapTable(table, options) {
+        var existingClasses = table.attr('class');
+        var existingMarginBottom = table.css('margin-bottom');
+        table.css('margin-bottom', 0);
+        var rowHeight = table.find('tbody tr:first').outerHeight();
+        var tableHeight = rowHeight * options.rowsToDisplay;
+        
+        var headerTable = $('<table style="table-layout:fixed;width:auto;margin-bottom:0;" class="jqstb-header-table ' + existingClasses + '"><thead><tr><td></td></tr></thead></table>'),
+            footerTable = $('<table style="table-layout:fixed;width:auto;margin-bottom:' + existingMarginBottom + ';" class="jqstb-footer-table ' + existingClasses + '"><tfoot><tr><td></td></tr></tfoot></table>'),
+            scrollDiv = '<div class="jqstb-scroll" style="height:' + tableHeight + 'px;overflow-y:auto"></div>';
+        
+        // Insert the table that will hold the fixed header and footer, and insert the div that will get scrolled
+        table.before(headerTable).before(scrollDiv).after(footerTable);
+    }
+    
+    function alignColumns(table) {
+        table.each(function (index) {
+            // To minimize "Flash of Unstyled Content" (FOUC), set the relevant variables before manipulating the DOM
+            var $dataTable = $(this);
+            var $headerTable = $('table.jqstb-header-table').eq(index);
+            var $footerTable = $('table.jqstb-footer-table').eq(index);
+            
+            // Place main table data inside of relevant scrollable div (using jQuery eq() and index)
+            var $scrollDiv = $('div.jqstb-scroll').eq(index);
+            $scrollDiv.prepend($dataTable);
+            var scrollEl = $scrollDiv[0];
+            
+            var hasHorizontalScroll = scrollEl.clientWidth < scrollEl.scrollWidth;
+            $scrollDiv.outerWidth(fixedTableWidth + scrollBarWidth + 2);
+            
+            if (hasHorizontalScroll) {
+                var dataTableWidth = $dataTable.outerWidth();
+                $headerTable.width(dataTableWidth);
+                $footerTable.width(dataTableWidth);
+                $scrollDiv.outerWidth(scrollEl.clientWidth);
+                var scrollDivWidth = $scrollDiv.outerWidth();
+                
+                var width = scrollDivWidth - scrollBarWidth;
+                
+                var $headerScrollDiv = $('<div style="overflow:hidden;width:' + width + 'px" class="jqstb-header-scroll"></div>');
+                $headerTable.wrap($headerScrollDiv);
+                
+                var $footerScrollDiv = $('<div style="overflow:hidden;width:' + width + 'px" class="jqstb-footer-scroll"></div>');
+                $footerTable.wrap($footerScrollDiv);
+                
+                $scrollDiv.on('scroll', function() {
+                    $('div.jqstb-header-scroll').scrollLeft($(this).scrollLeft());
+                    $('div.jqstb-footer-scroll').scrollLeft($(this).scrollLeft());
+                });
+            }
+
+            // Force column widths to be set for each header column
+            $dataTable.find('thead tr:first th, tbody tr:first td').each(function () {
+                $(this).outerWidth($(this).outerWidth());
+            });
+            
+            // Insert header data into fixed header table
+            $headerTable.find('thead').replaceWith($dataTable.children('caption, thead').clone());
+
+            // Force column widths to be set for each footer column
+            $dataTable.find('tfoot tr:first td').each(function () {
+                $(this).outerWidth($(this).outerWidth());
+            });
+            
+            // Insert footer data into fixed footer table
+            $footerTable.find('tfoot').replaceWith($dataTable.children('tfoot').clone());
+            
+            // Hide original caption, header, and footer
+            $dataTable.children('caption, thead, tfoot').hide();
+        });
+    }
+    
+    function alignOnResize(table) {
+        table.each(function (index) {
+            var $dataTable = $(this);
+            var $headerTable = $('table.jqstb-header-table').eq(index);
+            var $footerTable = $('table.jqstb-footer-table').eq(index);
+
+            // Temporarily show the inner table's header and footer since the dom calculates width based on them being visible
+            $dataTable.children('thead, tfoot').show();
+            
+            var scrollEl = $('div.jqstb-scroll')[0];
+            var hasHorizontalScroll = scrollEl.clientWidth < scrollEl.scrollWidth;
+            if (hasHorizontalScroll) {
+                var scrollDivWidth = $('div.jqstb-scroll').outerWidth();
+                $('div.jqstb-header-scroll').outerWidth(scrollDivWidth - scrollBarWidth);
+                $('div.jqstb-footer-scroll').outerWidth(scrollDivWidth - scrollBarWidth);
+            }
+            
+            // Force column widths to be set for each header column
+            var $headerColumns = $headerTable.find('thead tr:first th');
+            $dataTable.find('thead tr:first th').each(function (i) {
+                $headerColumns.eq(i).outerWidth($(this).outerWidth());
+            });
+
+            // Force column widths to be set for each footer column
+            var $footerColumns = $footerTable.find('tfoot tr:first td');
+            $dataTable.find('tfoot tr:first td').each(function (i) {
+                $footerColumns.eq(i).outerWidth($(this).outerWidth());
+            });
+            
+            // Hide the inner table's header and footer when we're done 
+            $dataTable.children('thead, tfoot').hide();
+        });
+    }
+})(jQuery);

data/app/assets/stylesheets/express_admin.css

@@ -6,4 +6,4 @@
 
 .hidden {
   display: none;
-}
+}

data/app/assets/stylesheets/express_admin/components/_main_menu.sass

@@ -0,0 +1,5 @@
+.main-menu, .secondary-menu
+  > .menu-items
+    @extend .menu-bar
+    @include menu-bar-icons($position: left)
+    @include menu-bar-style($dark-color, $autocolor: true)

data/app/assets/stylesheets/express_admin/components/_megadropdown.sass

@@ -48,11 +48,9 @@
               text-decoration: underline
 
   .main
-    @include grid-column(9)
 
 
   .extra
-    @include grid-column(3)
     ul
       li
         float: inherit
@@ -66,6 +64,3 @@
       li, a
         width: 100%
 
-@media #{$small-up}
-  .dropdown-wrapper
-    padding: 10px 0

data/app/assets/stylesheets/express_admin/components/_module_sidebar.sass

@@ -0,0 +1,9 @@
+.module-sidebar
+  @include grid-block($orientation: vertical)
+
+  .menu-items
+    @extend .menu-bar
+    @include menu-bar-layout($orientation: vertical)
+
+    > .title
+      @include title

data/app/assets/stylesheets/express_admin/components/_pane.sass

@@ -0,0 +1,9 @@
+.pane
+  @include grid_content
+  @include clearfix
+  border:
+    right: 1px solid $border-color
+
+  .status
+    @extend .label
+    @include label-style($background: $dark-blue)

data/app/assets/stylesheets/express_admin/components/_widget_box.sass

@@ -0,0 +1,10 @@
+.widget-box
+  @include grid_block($orientation: vertical)
+  border: 1px $border-color solid
+
+  > .title
+    @include grid_block($size: shrink)
+    @include title
+
+  > .widget-body
+    @include grid_content

data/app/assets/stylesheets/express_admin/globals/_foundation_overrides.sass

@@ -0,0 +1,612 @@
+//  FOUNDATION FOR APPS SETTINGS
+//  ----------------------------
+//
+//  Table of Contents:
+//
+//  1.  CSS Exports
+//  2.  Global Styles
+//  3.  Breakpoints
+//  4.  Typography
+//  5.  Grid
+//  6.  Button
+//  7.  Accordion
+//  8.  Action Sheet
+//  9.  Block List
+//  10. Button Group
+//  11. Card
+//  12. Extras
+//  13. Forms
+//  14. Iconic
+//  15. Label
+//  16. Menu Bar
+//  17. Modal
+//  18. Motion UI
+//  19. Notification
+//  20. Off-canvas
+//  21. Panel
+//  22. Popup
+//  23. Switch
+//  24. Tabs
+//  25. Title Bar
+
+// 1. CSS Exports
+// - - - - - - - - - - - - - - -
+
+// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
+
+// $include-css: (
+//   accordion: true,
+//   action-sheet: true,
+//   block-list: true,
+//   button: true,
+//   button-group: true,
+//   card: true,
+//   coloring: true,
+//   extras: true,
+//   forms: true,
+//   grid: true,
+//   iconic: true,
+//   label: true,
+//   badge: true,
+//   list: true,
+//   menu-bar: true,
+//   modal: true,
+//   motion: true,
+//   notification: true,
+//   off-canvas: true,
+//   panel: true,
+//   popup: true,
+//   switch: true,
+//   tabs: true,
+//   title-bar: true,
+//   typography: true,
+//   utilities: true,
+// ); 
+
+// 2. Global Styles
+// - - - - - - - - - - - - - - -
+
+// This sets 1rem to be 16px
+// $rem-base: 16px;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+// $base-font-size: 100%;
+
+// $base-line-height is 24px while $base-font-size is 16px
+// $base-line-height: 1.5;
+
+// Text selector helpers
+// $headers: "h1,h2,h3,h4,h5,h6";
+
+// We use these to define default font weights
+// $font-weight-normal: normal;
+// $font-weight-bold: bold;
+
+// We use these to control various global styles
+// $body-background: #fff;
+// $body-font-color: #222;
+// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-weight: $font-weight-normal;
+// $body-font-style: normal;
+// $body-antialiased: true;
+
+// Application Colors
+$primary-color: #477db0
+$secondary-color: #f9f9f9
+// $alert-color: #F04124;
+$info-color: rgba(#94bde1, .1)
+// $success-color: #43AC6A;
+// $warning-color: #F08A24;
+$dark-color: #444
+// $gray: #dfdfdf;
+// $gray-dark: darken($gray, 8);
+// $gray-light: lighten($gray, 8);
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 4px;
+// $global-rounded: 1000px;
+
+// We use this for default spacing
+// $global-padding: 1rem;
+// $global-spacing: rem-calc(15); 
+
+// 3. Breakpoints
+// - - - - - - - - - - - - - - -
+
+// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
+// $breakpoints: (
+//   small: rem-calc(0),
+//   medium: rem-calc(640),
+//   large: rem-calc(1200),
+//   xlarge: rem-calc(1440),
+//   xxlarge: rem-calc(1920),
+// );
+
+// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
+// $breakpoint-classes: (small medium large); 
+
+// 4. Typography
+// - - - - - - - - - - - - - - -
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: $font-weight-normal;
+// $header-font-style: $font-weight-normal;
+// $header-font-color: #222;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+// $header-bottom-margin: .5rem;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+// $h1-font-size: rem-calc(44);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// We use these to control header size reduction on small screens
+// $h1-font-reduction: rem-calc(10);
+// $h2-font-reduction: rem-calc(10);
+// $h3-font-reduction: rem-calc(5);
+// $h4-font-reduction: rem-calc(5);
+// $h5-font-reduction: 0;
+// $h6-font-reduction: 0;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: $font-weight-normal;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+// $small-font-size: 60%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: $font-weight-normal;
+// $paragraph-font-size: 1rem;
+// $paragraph-line-height: 1.6;
+// $paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: grayscale($primary-color);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: $font-weight-normal;
+// $code-background-color: scale-color($secondary-color, $lightness: 70%);
+// $code-border-size: 1px;
+// $code-border-style: solid;
+// $code-border-color: scale-color($code-background-color, $lightness: -10%);
+// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-text-decoration-hover: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: #ddd;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-font-family: $paragraph-font-family;
+// $list-font-size: $paragraph-font-size;
+// $list-line-height: $paragraph-line-height;
+// $list-margin-bottom: $paragraph-margin-bottom;
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: $font-weight-bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid #ddd;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted #ddd; 
+
+// 5. Grid
+// - - - - - - - - - - - - - - -
+
+// $container-width: rem-calc(900);
+// $block-padding: $global-padding;
+// $total-columns: 12;
+// $block-grid-max-size: 6; 
+
+// 6. Button
+// - - - - - - - - - - - - - - -
+
+// $button-padding: 0.85em 1em;
+// $button-margin: 0 $global-padding $global-padding 0;
+// $button-style: solid;
+// $button-background: $primary-color;
+// $button-background-hover: scale-color($button-background, $lightness: -15%);
+// $button-color: auto;
+// $button-radius: 0;
+// $button-sizes: (
+//   tiny: 0.7,
+//   small: 0.8,
+//   medium: 1,
+//   large: 1.3,
+// );
+// $button-font-size: 0.9rem;
+// $button-opacity-disabled: 0.5;
+// $button-tag-selector: false; 
+
+// 7. Accordion
+// - - - - - - - - - - - - - - -
+
+// $accordion-border: 1px solid $gray-dark;
+
+// $accordion-title-background: $gray-light;
+// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
+// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
+// $accordion-title-color: isitlight($accordion-title-background);
+// $accordion-title-color-active: isitlight($accordion-title-background);
+
+// $accordion-title-padding: $global-padding;
+// $accordion-content-padding: $global-padding; 
+
+// 8. Action Sheet
+// - - - - - - - - - - - - - - -
+
+// $actionsheet-background: white;
+// $actionsheet-border-color: #ccc;
+// $actionsheet-animate: transform opacity;
+// $actionsheet-animation-speed: 0.25s;
+// $actionsheet-width: 300px;
+// $actionsheet-radius: 4px;
+// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
+// $actionsheet-padding: $global-padding;
+// $actionsheet-tail-size: 10px;
+
+// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
+
+// $actionsheet-link-color: #000;
+// $actionsheet-link-background-hover: smartscale($actionsheet-background); 
+
+// 9. Block List
+// - - - - - - - - - - - - - - -
+
+// $blocklist-background: #fff;
+// $blocklist-fullbleed: true;
+// $blocklist-fontsize: 1rem;
+
+// $blocklist-item-padding: 0.8rem 1rem;
+// $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
+// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
+// $blocklist-item-color-disabled: #999;
+// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
+
+// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
+// $blocklist-item-icon-size: 0.8;
+
+// $blocklist-header-fontsize: 0.8em;
+// $blocklist-header-color: smartscale($blocklist-item-color, 40%);
+// $blocklist-header-uppercase: true;
+
+// $blocklist-check-icons: true; 
+
+// 10. Button Group
+// - - - - - - - - - - - - - - -
+
+// $btngroup-background: $primary-color;
+// $btngroup-color: #fff;
+// $btngroup-radius: $button-radius; 
+
+// 11. Card
+// - - - - - - - - - - - - - - -
+
+// $card-background: #fff;
+// $card-color: isitlight($card-background);
+// $card-border: 1px solid smartscale($card-background, 7%);
+// $card-radius: $global-radius;
+// $card-shadow: 0 1px 2px rgba(#000, 0.2);
+// $card-padding: $global-padding;
+// $card-margin: 0.5rem;
+
+// $card-divider-background: smartscale($card-background, 7%); 
+
+// 12. Extras
+// - - - - - - - - - - - - - - -
+
+// $closebutton-position: (top right);
+// $closebutton-size: 2em;
+// $closebutton-lineheight: 0.5;
+// $closebutton-color: #999;
+// $closebutton-color-hover: #333;
+
+// $thumbnail-padding: 0.5rem;
+// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); 
+
+// 13. Forms
+// - - - - - - - - - - - - - - -
+
+// Basic form variables
+// $form-fontsize: 1rem;
+// $form-padding: 0.5rem;
+
+// Text fields
+// $input-color: #000;
+// $input-color-hover: $input-color;
+// $input-color-focus: $input-color;
+// $input-background: #fff;
+// $input-background-hover: $input-background;
+// $input-background-focus: $input-background;
+// $input-background-disabled: smartscale($input-background);
+// $input-border: 1px solid #ccc;
+// $input-border-hover: 1px solid #bbb;
+// $input-border-focus: 1px solid #999;
+// $input-cursor-disabled: not-allowed;
+
+// Select menus
+// $select-color: #000;
+// $select-background: #fafafa;
+// $select-background-hover: smartscale($select-background, 4%);
+// $select-arrow: true;
+// $select-arrow-color: $select-color;
+
+// Labels
+// $form-label-fontsize: 0.9rem;
+// $form-label-margin: 0.5rem;
+// $form-label-color: #333;
+
+// Inline labels
+// $inlinelabel-color: #333;
+// $inlinelabel-background: #eee;
+// $inlinelabel-border: $input-border;
+
+// Range slider
+// $slider-background: #ddd;
+// $slider-height: 1rem;
+// $slider-radius: 0px;
+// $slider-thumb-height: 1.5rem;
+// $slider-thumb-color: $primary-color;
+// $slider-thumb-radius: 0px;
+
+// Progress and meter
+// $meter-height: 1.5rem;
+// $meter-background: #ccc;
+// $meter-fill: $primary-color;
+// $meter-fill-high: $success-color;
+// $meter-fill-medium: #e7cf00;
+// $meter-fill-low: $alert-color;
+// $meter-radius: 0; 
+
+// 14. Iconic
+// - - - - - - - - - - - - - - -
+
+// $iconic-primary-fill: $primary-color;
+// $iconic-primary-stroke: $primary-color;
+// $iconic-accent-fill: $iconic-primary-fill;
+// $iconic-accent-stroke: $iconic-accent-fill; 
+
+// 15. Label
+// - - - - - - - - - - - - - - -
+
+// $label-fontsize: 0.8rem;
+// $label-padding: ($global-padding / 3) ($global-padding / 2);
+// $label-radius: 0;
+// $label-background: $primary-color;
+// $label-color: isitlight($primary-color);
+
+// $badge-fontsize: 0.8em;
+// $badge-diameter: 1.5rem;
+// $badge-background: $primary-color;
+// $badge-color: #fff; 
+
+// 16. Menu Bar
+// - - - - - - - - - - - - - - -
+
+// $menubar-fontsize: 1rem;
+// $menubar-background: #fff;
+// $menubar-background-hover: smartscale($menubar-background, 7%);
+// $menubar-background-active: $menubar-background-hover;
+// $menubar-color: isitlight($menubar-background);
+// $menubar-color-hover: $menubar-color;
+// $menubar-color-active: $menubar-color-hover;
+
+// $menubar-item-padding: $global-padding;
+// $menubar-icon-size: 25px;
+// $menubar-icon-spacing: $menubar-item-padding; 
+
+// 17. Modal
+// - - - - - - - - - - - - - - -
+
+// $modal-background: #fff;
+// $modal-border: 0;
+// $modal-radius: 0px;
+// $modal-shadow: none;
+// $modal-zindex: 1000;
+// $modal-sizes: (
+//   tiny: 300px,
+//   small: 500px,
+//   medium: 600px,
+//   large: 800px,
+// );
+
+// $modal-overlay-class: 'modal-overlay';
+// $modal-overlay-background: rgba(#333, 0.7); 
+
+// 18. Motion UI
+// - - - - - - - - - - - - - - -
+
+// Classes to use when triggering in/out animations
+// $motion-class: (
+//   in: "ng-enter",
+//   out: "ng-leave",
+// );
+// $motion-class-active: (
+//   in: "ng-enter-active",
+//   out: "ng-leave-active",
+// );
+// $motion-class-stagger: (
+//   in: "ng-enter-stagger",
+//   out: "ng-leave-stagger",
+// );
+// $motion-class-showhide: (
+//   in: "ng-hide-remove",
+//   out: "ng-hide-add",
+// );
+// $motion-class-showhide-active: (
+//   in: "ng-hide-remove-active",
+//   out: "ng-hide-add-active",
+// );
+
+// Set if movement-based transitions should also fade the element in and out
+// $motion-slide-and-fade: false;
+// $motion-hinge-and-fade: true;
+// $motion-scale-and-fade: true;
+// $motion-spin-and-fade: true;
+
+// Default speed for transitions and animations
+// $motion-duration-default: 500ms;
+
+// Slow and fast modifiders
+// $motion-duration-slow: 750ms;
+// $motion-duration-fast: 250ms;
+// $motion-stagger-duration-default: 150ms;
+// $motion-stagger-duration-short: 50ms;
+// $motion-stagger-duration-long: 300ms;
+
+// Default timing function for transitions and animations
+// $motion-timing-default: ease;
+
+// Built-in and custom easing functions
+// Every item in this map becomes a CSS class
+// $motion-timings: (
+//   linear: linear,
+//   ease: ease,
+//   easeIn: ease-in,
+//   easeOut: ease-out,
+//   easeInOut: ease-in-out,
+//   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
+//   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+//   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
+// );
+
+// Default delay for all transitions and animations
+// $motion-delay-default: 0;
+// Short and long delay modifiers
+// $motion-delay-short: 300ms;
+// $motion-delay-long: 700ms; 
+
+// 19. Notification
+// - - - - - - - - - - - - - - -
+
+// $notification-default-position: right top;
+// $notification-width: rem-calc(400);
+// $notification-offset: $global-padding;
+
+// $notification-background: $primary-color;
+// $notification-color: white;
+// $notification-padding: $global-padding;
+// $notification-radius: 4px;
+
+// $notification-icon-size: 60px;
+// $notification-icon-margin: $global-padding;
+// $notification-icon-align: top;
+ 
+
+// 20. Off-canvas
+// - - - - - - - - - - - - - - -
+
+// $offcanvas-size-horizontal: 250px;
+// $offcanvas-size-vertical: 250px;
+
+// $offcanvas-background: #fff;
+// $offcanvas-color: isitlight($offcanvas-background);
+// $offcanvas-padding: 0;
+// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
+// $offcanvas-animation-speed: 0.25s;
+
+// $offcanvas-frame-selector: '.grid-frame'; 
+
+// 21. Panel
+// - - - - - - - - - - - - - - -
+
+// $panel-size-horizontal: 300px;
+// $panel-size-vertical: 300px;
+// $panel-padding: 0;
+
+// $panel-background: #fff;
+// $panel-shadow: 3px 0 10px rgba(black, 0.25);
+
+// DEPRECATED: these variables will be removed in a future version.
+// $panel-animation-speed: 0.25s; 
+
+// 22. Popup
+// - - - - - - - - - - - - - - -
+
+// $popup-width: rem-calc(300);
+// $popup-background: #fff;
+// $popup-border: 0;
+// $popup-radius: 0;
+// $popup-shadow: 0 0 10px rgba(#000, 0.25); 
+
+// 23. Switch
+// - - - - - - - - - - - - - - -
+
+// $switch-width: rem-calc(50);
+// $switch-height: rem-calc(32);
+// $switch-background: #ccc;
+// $switch-background-active: $primary-color;
+// $switch-border: 0;
+// $switch-radius: 9999px;
+// $switch-animation-speed: 0.15s;
+
+// $switch-paddle-color: white;
+// $switch-paddle-offset: 4px; 
+
+// 24. Tabs
+// - - - - - - - - - - - - - - -
+
+// $tabstrip-background: transparent;
+
+// $tab-title-background: $gray-light;
+// $tab-title-background-hover: smartscale($tab-title-background, 5%);
+// $tab-title-background-active: smartscale($tab-title-background, 3%);
+// $tab-title-color: isitlight($tab-title-background);
+// $tab-title-color-active: $tab-title-color;
+
+// $tab-title-padding: $global-padding;
+// $tab-content-padding: $global-padding; 
+
+// 25. Title Bar
+// - - - - - - - - - - - - - - -
+
+// $titlebar-center-width: 50%;
+// $titlebar-side-width: (100% - $titlebar-center-width) / 2;
+// $titlebar-background: #eee;
+// $titlebar-color: #000;
+// $titlebar-border: 1px solid #ccc;
+// $titlebar-padding: $global-padding;
+// $titlebar-item-classes: (
+//   center: 'center',
+//   left: 'left',
+//   right: 'right',
+//   title: 'title',
+// );