diff --git a/app/assets/javascripts/supplier/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb
similarity index 73%
rename from app/assets/javascripts/supplier/application.js.erb
rename to app/assets/javascripts/supplier/foundation1/application.js.erb
index 9b13e5fb..11838b95 100644
--- a/app/assets/javascripts/supplier/application.js.erb
+++ b/app/assets/javascripts/supplier/foundation1/application.js.erb
@@ -1,22 +1,6 @@
//= require jquery
//= require jquery_ujs
-//= require jquery.ui.all
-//= require jquery.ui.datepicker-en
-//= require jquery.ui.datepicker-nl
-// require bootstrap-transition
-// require bootstrap-affix
-// require bootstrap-alert
-// require bootstrap-button
-// require bootstrap-carousel
-// require bootstrap-collapse
-// require bootstrap-dropdown
-// require bootstrap-modal
-// require bootstrap-scrollspy
-// require bootstrap-tab
-// require bootstrap-tooltip
-// require bootstrap-popover
-// require bootstrap-typeahead
-//= require bootstrap
+//= require jquery.ui.sortable
//= require js-routes
//= require translations
//= require qwaiter
@@ -25,6 +9,7 @@
//= require faye
//= require ./base
//= require qtip
+//= require pickdate
//= require_directory .
//= require_self
//= require moment
diff --git a/app/assets/javascripts/supplier/base.js.coffee b/app/assets/javascripts/supplier/foundation1/base.js.coffee
similarity index 100%
rename from app/assets/javascripts/supplier/base.js.coffee
rename to app/assets/javascripts/supplier/foundation1/base.js.coffee
diff --git a/app/assets/javascripts/supplier/initializer.js.coffee b/app/assets/javascripts/supplier/foundation1/initializer.js.coffee
similarity index 84%
rename from app/assets/javascripts/supplier/initializer.js.coffee
rename to app/assets/javascripts/supplier/foundation1/initializer.js.coffee
index f2845e55..baad98cc 100644
--- a/app/assets/javascripts/supplier/initializer.js.coffee
+++ b/app/assets/javascripts/supplier/foundation1/initializer.js.coffee
@@ -1,4 +1,4 @@
-$( ->
+$ ->
$('.week-day-toggle').each ->
select = $('#week-day-select-'+$(@).data('day'))
$(@).addClass('active') if select.val() == '1'
@@ -6,17 +6,19 @@ $( ->
$('#full_day-controller').each ->
control = $('#product_category_full_day')
- unless control.is(':checked')
- $(@).addClass('icon-white')
+ if control.is(':checked')
$('#sub-day-container').removeClass('hide')
+ $(@).removeClass 'active'
+ else
+ $(@).addClass('active')
$(@).click ->
if control.is(':checked')
control.prop 'checked', false
- $(@).addClass 'icon-white'
+ $(@).removeClass 'active'
$('#sub-day-container').removeClass('hide')
else
+ $(@).addClass 'active'
control.prop 'checked', true
- $(@).removeClass 'icon-white'
$('#sub-day-container').addClass('hide')
if Qstorage.getItem('message')
@@ -27,12 +29,10 @@ $( ->
container.show()
Qstorage.removeItem('message')
- $('.datepicker').datepicker(window.datepicker_options)
-
- setTranslations()
+ setupTranslations()
# GOOGLE LOCATION PICKER
- $("input.location_picker").each( (i)->
+ $("input.location_picker").each (i)->
#return if typeof(google) == 'undefined'
iconBase = 'https://maps.google.com/mapfiles/kml/'
location_input = $(this)
@@ -60,7 +60,7 @@ $( ->
panControl: false
scaleControl: false
streetViewControl: false
-
+
map = new google.maps.Map(map_div.get(0), mapOptions)
marker = new google.maps.Marker(
position: center
@@ -85,7 +85,7 @@ $( ->
map_div.before(search_field)
infowindow = new google.maps.InfoWindow()
search_marker = new google.maps.Marker({map: map, icon: iconBase + 'shapes/placemark_circle.png'})
- google.maps.event.addListener(autocomplete, 'place_changed', ->
+ google.maps.event.addListener autocomplete, 'place_changed', ->
infowindow.close()
search_marker.setVisible(false)
place = autocomplete.getPlace()
@@ -114,6 +114,14 @@ $( ->
].join(' ')
infowindow.setContent('' + place.name + '
' + address + '
')
infowindow.open(map, search_marker)
- )
- )
-)
+ # end google location map
+
+ $('.toggle-side-menu,.side-menu').click ->
+ menu = $('aside.side-menu')
+ toggle = $('.toggle-side-menu')
+ if menu.is(':visible')
+ menu.animate left: -255, -> $(@).hide()
+ toggle.animate left: 0, -> $(@).removeClass('open')
+ else
+ menu.show().animate left: 0
+ toggle.animate left: 222 - 30, -> $(@).addClass('open')
diff --git a/app/assets/javascripts/supplier/jquery.ui.touch-punch.min.js b/app/assets/javascripts/supplier/foundation1/jquery.ui.touch-punch.min.js
similarity index 100%
rename from app/assets/javascripts/supplier/jquery.ui.touch-punch.min.js
rename to app/assets/javascripts/supplier/foundation1/jquery.ui.touch-punch.min.js
diff --git a/app/assets/javascripts/supplier/list.js.coffee b/app/assets/javascripts/supplier/foundation1/list.js.coffee
similarity index 100%
rename from app/assets/javascripts/supplier/list.js.coffee
rename to app/assets/javascripts/supplier/foundation1/list.js.coffee
diff --git a/app/assets/javascripts/supplier/order.js.coffee b/app/assets/javascripts/supplier/foundation1/order.js.coffee
similarity index 100%
rename from app/assets/javascripts/supplier/order.js.coffee
rename to app/assets/javascripts/supplier/foundation1/order.js.coffee
diff --git a/app/assets/javascripts/supplier/qsupplier.js.coffee b/app/assets/javascripts/supplier/foundation1/qsupplier.js.coffee
similarity index 100%
rename from app/assets/javascripts/supplier/qsupplier.js.coffee
rename to app/assets/javascripts/supplier/foundation1/qsupplier.js.coffee
diff --git a/app/assets/javascripts/translations.js.coffee.erb b/app/assets/javascripts/translations.js.coffee.erb
index 5c11cd1c..cf316afa 100644
--- a/app/assets/javascripts/translations.js.coffee.erb
+++ b/app/assets/javascripts/translations.js.coffee.erb
@@ -56,10 +56,11 @@
@setTranslations = (selector) ->
#list = $("#top-navigation-list")
+ locale = Qstorage.getItem('locale') || 'en'
selector = $( selector || document)
selector.find(".locale-select").show()
- selector.find(".locale-select-" + $locale).hide()
- moment.lang $locale
+ selector.find(".locale-select-" + locale).hide()
+ moment.lang locale
if selector
selector.find("[data-t]").each ->
$(this).html t($(this).data("t"), $(this).data("tAttributes"))
@@ -74,8 +75,32 @@
$("*[data-time]").each ->
$(this).text moment($(this).data("time")).format($(this).data("timeFormat") or "dd D MMM HH:MM")
- $(".datepicker").datepicker "option", $.datepicker.regional[$locale]
+ $(".datepicker").datepicker "option", $.datepicker.regional[locale] if $.fn.datepicker
+ if $.fn.pickadate
+ datepicker_object = $('.datepicker')
+ datepicker_object.pickadate('stop') if datepicker_object.data('pickadate')
+ $.extend( $.fn.pickadate.defaults, $pickadate_translations[locale] )
+ $('.pickadate-display').remove()
+ window.pickadate_options ||= {}
+ datepicker_object.pickadate(window.pickadate_options)
+ datepicker_object.change()
+
+@setupTranslations = (options = {})->
+ locale = options.locale || Qstorage.getItem('locale') || 'en'
+ if $.fn.pickadate
+ $('.datepicker').change ->
+ input = $(@)
+ input.next().remove() if input.next().hasClass('pickadate-display')
+ display_format = $pickadate_translations[$locale].displayFormat
+ display_date = input.data('pickadate').get('select', display_format)
+ display_date = ' '+display_date # add space between the icon and the date
+ display_tag = $('').addClass('pickadate-display').append('').append($('').text(display_date))
+ #display_tag.click (e)->(e.preventDefault();input.click().focus();false )
+ display_tag.click (e)->(e.preventDefault();input.pickadate('open');false )
+ $(@).after(display_tag)
+ setLocale(locale)
+ $('.datepicker').change().hide()
$transformation_mappings =
downcase: "toLowerCase"
upcase: "toUpperCase"
diff --git a/app/assets/javascripts/user/application.js.erb b/app/assets/javascripts/user/application.js.erb
index 1118b1e3..68b34f00 100644
--- a/app/assets/javascripts/user/application.js.erb
+++ b/app/assets/javascripts/user/application.js.erb
@@ -196,22 +196,6 @@ $(function(){
Qstorage.removeItem('list_closed');
}
setTranslations();
- $('#toggle-side-menu').click(function(){
- var body = $('body');
- var menu = $('#side-menu-container');
- if(menu.is(':visible')){
- body.animate({paddingLeft: 0});
- menu.animate({width: 0}, function(){$(this).hide()});
-
- }else{
- body.animate({paddingLeft: '222px'});
- menu.show().animate({width: '222px'});
- }
- //if(body.css('margin-left') && body.css('margin-left') != '0px'){
- // body.animate('margin-left', '0')
- //}else{
- //}
- });
});
function setLocale(locale){
Qstorage.setItem('locale', locale);
diff --git a/app/assets/stylesheets/supplier/foundation1/application.css b/app/assets/stylesheets/supplier/foundation1/application.css
new file mode 100644
index 00000000..28915405
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/application.css
@@ -0,0 +1,9 @@
+/*
+*= require ./foundation_and_overrides
+*= require 'jquery-ui-1.8.23.custom.css'
+*= require qtip
+*= require_directory ../base1-shared
+*= require pickdate
+*= require_directory .
+*= require_self
+*/
diff --git a/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass b/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass
new file mode 100644
index 00000000..537ef495
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/foundation_and_overrides.css.sass
@@ -0,0 +1,1246 @@
+@mixin button-icon-only
+ padding: 2px 5px
+ margin: 0
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+//
+// FOUNDATION SETTINGS
+//
+
+// This is the default html and body font-size for the base rem value.
+// $rem-base: 16px;
+
+// Allows the use of rem-calc() or lower-bound() in your settings
+@import "foundation/functions"
+
+// $experimental: true;
+
+// 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%;
+
+// The $base-line-height is 100% while $base-font-size is 150%
+// $base-line-height: 150%;
+
+// We use this to control whether or not CSS classes come through in the gem files.
+// $include-html-classes: true;
+// $include-print-styles: true;
+// $include-html-global-classes: $include-html-classes;
+
+// Grid
+
+// $include-html-grid-classes: $include-html-classes;
+// $include-xl-html-grid-classes: false;
+
+// $row-width: rem-calc(1000);
+// $column-gutter: rem-calc(30);
+// $total-columns: 12;
+
+// We use these to control various global styles
+// $body-bg: #fff;
+// $body-font-color: #222;
+// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-weight: normal;
+// $body-font-style: normal;
+
+// We use this to control font-smoothing
+// $font-smoothing: antialiased;
+
+// We use these to control text direction settings
+// $text-direction: ltr;
+// $opposite-direction: right;
+// $default-float: left;
+
+// We use these as default colors throughout
+// $primary-color: #008CBA;
+$primary-color: green
+// $secondary-color: #e7e7e7;
+$secondary-color: #d7d7d7
+// $alert-color: #f04124;
+// $success-color: #43AC6A;
+// $warning-color: #f08a24;
+// $info-color: #a0d3e8;
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 3px;
+// $global-rounded: 1000px;
+
+// We use these to control inset shadow shiny edges and depressions.
+// $shiny-edge-size: 0 1px 0;
+// $shiny-edge-color: rgba(#fff, .5);
+// $shiny-edge-active-color: rgba(#000, .2);
+
+// Media Query Ranges
+// $small-range: (0em, 40em);
+// $medium-range: (40.063em, 64em);
+// $large-range: (64.063em, 90em);
+// $xlarge-range: (90.063em, 120em);
+// $xxlarge-range: (120.063em);
+
+// $screen: "only screen";
+
+// $landscape: "#{$screen} and (orientation: landscape)";
+// $portrait: "#{$screen} and (orientation: portrait)";
+
+// $small-up: $screen;
+// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
+
+// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
+// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
+
+// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
+// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
+
+// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
+// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
+
+// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
+// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+// Legacy
+// $small: $medium-up;
+// $medium: $medium-up;
+// $large: $large-up;
+
+//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+// $cursor-crosshair-value: crosshair;
+// $cursor-default-value: default;
+// $cursor-pointer-value: pointer;
+// $cursor-help-value: help;
+// $cursor-text-value: text;
+
+//
+// TYPOGRAPHY
+//
+
+// $include-html-type-classes: $include-html-classes;
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: normal;
+// $header-font-style: 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;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: 300;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general 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: 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 tags
+// $code-color: scale-color($alert-color, $lightness: -27%);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: bold;
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
+
+// We use these to style the
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-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: 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;
+
+// We use these to control padding and margin
+// $microformat-padding: rem-calc(10 12);
+// $microformat-margin: rem-calc(0 0 20 0);
+
+// We use these to control the border styles
+// $microformat-border-width: 1px;
+// $microformat-border-style: solid;
+// $microformat-border-color: #ddd;
+
+// We use these to control full name font styles
+// $microformat-fullname-font-weight: bold;
+// $microformat-fullname-font-size: rem-calc(15);
+
+// We use this to control the summary font styles
+// $microformat-summary-font-weight: bold;
+
+// We use this to control abbr padding
+// $microformat-abbr-padding: rem-calc(0 1);
+
+// We use this to control abbr font styles
+// $microformat-abbr-font-weight: bold;
+// $microformat-abbr-font-decoration: none;
+
+// Accordion
+
+// $include-html-accordion-classes: $include-html-classes;
+
+// $accordion-navigation-padding: rem-calc(16);
+// $accordion-navigation-bg-color: #efefef ;
+// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
+// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
+// $accordion-navigation-font-color: #222;
+// $accordion-navigation-font-size: rem-calc(16);
+// $accordion-navigation-font-family: $body-font-family;
+
+// $accordion-content-padding: $column-gutter/2;
+// $accordion-content-active-bg-color: #fff;
+
+// Alert Boxes
+
+// $include-html-alert-classes: $include-html-classes;
+
+// We use this to control alert padding.
+// $alert-padding-top: rem-calc(14);
+// $alert-padding-default-float: $alert-padding-top;
+// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
+// $alert-padding-bottom: $alert-padding-top;
+
+// We use these to control text style.
+// $alert-font-weight: normal;
+// $alert-font-size: rem-calc(13);
+// $alert-font-color: #fff;
+// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
+
+// We use this for close hover effect.
+// $alert-function-factor: -14%;
+
+// We use these to control border styles.
+// $alert-border-style: solid;
+// $alert-border-width: 1px;
+// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
+// $alert-bottom-margin: rem-calc(20);
+
+// We use these to style the close buttons
+// $alert-close-color: #333;
+// $alert-close-top: 50%;
+// $alert-close-position: rem-calc(5);
+// $alert-close-font-size: rem-calc(22);
+// $alert-close-opacity: 0.3;
+// $alert-close-opacity-hover: 0.5;
+// $alert-close-padding: 9px 6px 4px;
+
+// We use this to control border radius
+// $alert-radius: $global-radius;
+
+// Block Grid
+
+// $include-html-grid-classes: $include-html-classes;
+
+// We use this to control the maximum number of block grid elements per row
+// $block-grid-elements: 12;
+// $block-grid-default-spacing: rem-calc(20);
+// $align-block-grid-to-grid: true;
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+// $block-grid-media-queries: true;
+
+// Breadcrumbs
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use this to set the background color for the breadcrumb container.
+// $crumb-bg: scale-color($secondary-color, $lightness: 55%);
+
+// We use these to set the padding around the breadcrumbs.
+// $crumb-padding: rem-calc(9 14 9);
+// $crumb-side-padding: rem-calc(12);
+
+// We use these to control border styles.
+// $crumb-function-factor: -10%;
+// $crumb-border-size: 1px;
+// $crumb-border-style: solid;
+// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
+// $crumb-radius: $global-radius;
+
+// We use these to set various text styles for breadcrumbs.
+// $crumb-font-size: rem-calc(11);
+// $crumb-font-color: $primary-color;
+// $crumb-font-color-current: #333;
+// $crumb-font-color-unavailable: #999;
+// $crumb-font-transform: uppercase;
+// $crumb-link-decor: underline;
+
+// We use these to control the slash between breadcrumbs
+// $crumb-slash-color: #aaa;
+// $crumb-slash: "/";
+
+//
+// BUTTONS
+//
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to build padding for buttons.
+// $button-tny: rem-calc(10);
+// $button-sml: rem-calc(14);
+// $button-med: rem-calc(16);
+// $button-lrg: rem-calc(18);
+
+// We use this to control the display property.
+// $button-display: inline-block;
+// $button-margin-bottom: rem-calc(20);
+
+// We use these to control button text styles.
+// $button-font-family: $body-font-family;
+// $button-font-color: #fff;
+// $button-font-color-alt: #333;
+// $button-font-tny: rem-calc(11);
+// $button-font-sml: rem-calc(13);
+// $button-font-med: rem-calc(16);
+// $button-font-lrg: rem-calc(20);
+// $button-font-weight: normal;
+// $button-font-align: center;
+
+// We use these to control various hover effects.
+// $button-function-factor: 5%;
+
+// We use these to control button border styles.
+// $button-border-width: 1px;
+// $button-border-style: solid;
+
+// We use this to set the default radius used throughout the core.
+// $button-radius: $global-radius;
+// $button-round: $global-rounded;
+
+// We use this to set default opacity for disabled buttons.
+// $button-disabled-opacity: 0.7;
+
+// Button Groups
+
+// $include-html-button-classes: $include-html-classes;
+
+// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+// $button-bar-margin-opposite: rem-calc(10);
+// $button-group-border-width: 1px;
+
+// Clearing
+
+// $include-html-clearing-classes: $include-html-classes;
+
+// We use these to set the background colors for parts of Clearing.
+// $clearing-bg: #333;
+// $clearing-caption-bg: $clearing-bg;
+// $clearing-carousel-bg: rgba (51,51,51,0.8);
+// $clearing-img-bg: $clearing-bg;
+
+// We use these to style the close button
+// $clearing-close-color: #ccc;
+// $clearing-close-size: 30px;
+
+// We use these to style the arrows
+// $clearing-arrow-size: 12px;
+// $clearing-arrow-color: $clearing-close-color;
+
+// We use these to style captions
+// $clearing-caption-font-color: #ccc;
+// $clearing-caption-font-size: 0.875em;
+// $clearing-caption-padding: 10px 30px 20px;
+
+// We use these to make the image and carousel height and style
+// $clearing-active-img-height: 85%;
+// $clearing-carousel-height: 120px;
+// $clearing-carousel-thumb-width: 120px;
+// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
+
+// Dropdown
+
+// $include-html-dropdown-classes: $include-html-classes;
+
+// We use these to controls height and width styles.
+// $f-dropdown-max-width: 200px;
+// $f-dropdown-height: auto;
+// $f-dropdown-max-height: none;
+// $f-dropdown-margin-top: 2px;
+
+// We use this to control the background color
+// $f-dropdown-bg: #fff;
+
+// We use this to set the border styles for dropdowns.
+// $f-dropdown-border-style: solid;
+// $f-dropdown-border-width: 1px;
+// $f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
+
+// We use these to style the triangle pip.
+// $f-dropdown-triangle-size: 6px;
+// $f-dropdown-triangle-color: #fff;
+// $f-dropdown-triangle-side-offset: 10px;
+
+// We use these to control styles for the list elements.
+// $f-dropdown-list-style: none;
+// $f-dropdown-font-color: #555;
+// $f-dropdown-font-size: rem-calc(14);
+// $f-dropdown-list-padding: rem-calc(5, 10);
+// $f-dropdown-line-height: rem-calc(18);
+// $f-dropdown-list-hover-bg: #eeeeee ;
+// $dropdown-mobile-default-float: 0;
+
+// We use this to control the styles for when the dropdown has custom content.
+// $f-dropdown-content-padding: rem-calc(20);
+
+// Dropdown Buttons
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to set the color of the pip in dropdown buttons
+// $dropdown-button-pip-color: #fff;
+// $dropdown-button-pip-color-alt: #333;
+
+// $button-pip-tny: rem-calc(6);
+// $button-pip-sml: rem-calc(7);
+// $button-pip-med: rem-calc(9);
+// $button-pip-lrg: rem-calc(11);
+
+// We use these to style tiny dropdown buttons
+// $dropdown-button-padding-tny: $button-pip-tny * 7;
+// $dropdown-button-pip-size-tny: $button-pip-tny;
+// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
+// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
+
+// We use these to style small dropdown buttons
+// $dropdown-button-padding-sml: $button-pip-sml * 7;
+// $dropdown-button-pip-size-sml: $button-pip-sml;
+// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
+// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
+
+// We use these to style medium dropdown buttons
+// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
+// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
+// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
+// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
+
+// We use these to style large dropdown buttons
+// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
+// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
+// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
+// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
+
+// Flex Video
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use these to control video container padding and margins
+// $flex-video-padding-top: rem-calc(25);
+// $flex-video-padding-bottom: 67.5%;
+// $flex-video-margin-bottom: rem-calc(16);
+
+// We use this to control widescreen bottom padding
+// $flex-video-widescreen-padding-bottom: 57.25%;
+
+// Forms
+
+// $include-html-form-classes: $include-html-classes;
+
+// We use this to set the base for lots of form spacing and positioning styles
+// $form-spacing: rem-calc(16);
+
+// We use these to style the labels in different ways
+// $form-label-pointer: pointer;
+// $form-label-font-size: rem-calc(14);
+// $form-label-font-weight: normal;
+// $form-label-line-height: 1.5;
+// $form-label-font-color: scale-color(#000, $lightness: 30%);
+// $form-label-bottom-margin: 0;
+// $input-font-family: inherit;
+// $input-font-color: rgba(0,0,0,0.75);
+// $input-font-size: rem-calc(14);
+// $input-bg-color: #fff;
+// $input-focus-bg-color: scale-color(#fff, $lightness: -2%);
+// $input-border-color: scale-color(#fff, $lightness: -20%);
+// $input-focus-border-color: scale-color(#fff, $lightness: -40%);
+// $input-border-style: solid;
+// $input-border-width: 1px;
+// $input-border-radius: $global-radius;
+// $input-disabled-bg: #ddd;
+// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+// $input-include-glowing-effect: true;
+
+// We use these to style the fieldset border and spacing.
+// $fieldset-border-style: solid;
+// $fieldset-border-width: 1px;
+// $fieldset-border-color: #ddd;
+// $fieldset-padding: rem-calc(20);
+// $fieldset-margin: rem-calc(18 0);
+
+// We use these to style the legends when you use them
+// $legend-bg: #fff;
+// $legend-font-weight: bold;
+// $legend-padding: rem-calc(0 3);
+
+// We use these to style the prefix and postfix input elements
+// $input-prefix-bg: scale-color(#fff, $lightness: -5%);
+// $input-prefix-border-color: scale-color(#fff, $lightness: -20%);
+// $input-prefix-border-size: 1px;
+// $input-prefix-border-type: solid;
+// $input-prefix-overflow: hidden;
+// $input-prefix-font-color: #333;
+// $input-prefix-font-color-alt: #fff;
+
+// We use these to style the error states for inputs and labels
+// $input-error-message-padding: rem-calc(6 9 9);
+// $input-error-message-top: -1px;
+// $input-error-message-font-size: rem-calc(12);
+// $input-error-message-font-weight: normal;
+// $input-error-message-font-style: italic;
+// $input-error-message-font-color: #fff;
+// $input-error-message-font-color-alt: #333;
+
+// We use this to style the glowing effect of inputs when focused
+// $glowing-effect-fade-time: 0.45s;
+// $glowing-effect-color: $input-focus-border-color;
+
+// Select variables
+// $select-bg-color: #fafafa;
+
+// Inline Lists
+
+// $include-html-inline-list-classes: $include-html-classes;
+
+// We use this to control the margins and padding of the inline list.
+// $inline-list-top-margin: 0;
+// $inline-list-opposite-margin: 0;
+// $inline-list-bottom-margin: rem-calc(17);
+// $inline-list-default-float-margin: rem-calc(-22);
+
+// $inline-list-padding: 0;
+
+// We use this to control the overflow of the inline list.
+// $inline-list-overflow: hidden;
+
+// We use this to control the list items
+// $inline-list-display: block;
+
+// We use this to control any elments within list items
+// $inline-list-children-display: block;
+
+// Joyride
+
+// $include-html-joyride-classes: $include-html-classes;
+
+// Controlling default Joyride styles
+// $joyride-tip-bg: #333;
+// $joyride-tip-default-width: 300px;
+// $joyride-tip-padding: rem-calc(18 20 24);
+// $joyride-tip-border: solid 1px #555;
+// $joyride-tip-radius: 4px;
+// $joyride-tip-position-offset: 22px;
+
+// Here, we're setting the tip dont styles
+// $joyride-tip-font-color: #fff;
+// $joyride-tip-font-size: rem-calc(14);
+// $joyride-tip-header-weight: bold;
+
+// This changes the nub size
+// $joyride-tip-nub-size: 10px;
+
+// This adjusts the styles for the timer when its enabled
+// $joyride-tip-timer-width: 50px;
+// $joyride-tip-timer-height: 3px;
+// $joyride-tip-timer-color: #666;
+
+// This changes up the styles for the close button
+// $joyride-tip-close-color: #777;
+// $joyride-tip-close-size: 24px;
+// $joyride-tip-close-weight: normal;
+
+// When Joyride is filling the screen, we use this style for the bg
+// $joyride-screenfill: rgba(0,0,0,0.5);
+
+// Keystrokes
+
+// $include-html-keystroke-classes: $include-html-classes;
+
+// We use these to control text styles.
+// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
+// $keystroke-font-size: rem-calc(14);
+// $keystroke-font-color: #222;
+// $keystroke-font-color-alt: #fff;
+// $keystroke-function-factor: -7%;
+
+// We use this to control keystroke padding.
+// $keystroke-padding: rem-calc(2 4 0);
+
+// We use these to control background and border styles.
+// $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
+// $keystroke-border-style: solid;
+// $keystroke-border-width: 1px;
+// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
+// $keystroke-radius: $global-radius;
+
+// Labels
+
+// $include-html-label-classes: $include-html-classes;
+
+// We use these to style the labels
+// $label-padding: rem-calc(4 8 6);
+// $label-radius: $global-radius;
+
+// We use these to style the label text
+// $label-font-sizing: rem-calc(11);
+// $label-font-weight: normal;
+// $label-font-color: #333;
+// $label-font-color-alt: #fff;
+// $label-font-family: $body-font-family;
+
+// Magellan
+
+// $include-html-magellan-classes: $include-html-classes;
+
+// $magellan-bg: #fff;
+// $magellan-padding: 10px;
+
+// Off-canvas
+
+// $tabbar-bg: #333;
+// $tabbar-height: rem-calc(45);
+// $tabbar-line-height: $tabbar-height;
+// $tabbar-color: #FFF;
+// $tabbar-middle-padding: 0 rem-calc(10);
+
+// Off Canvas Divider Styles
+// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
+// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
+
+// Off Canvas Tab Bar Headers
+// $tabbar-header-color: #FFF;
+// $tabbar-header-weight: bold;
+// $tabbar-header-line-height: $tabbar-height;
+// $tabbar-header-margin: 0;
+
+// Off Canvas Menu Variables
+// $off-canvas-width: 250px;
+// $off-canvas-bg: #333;
+
+// Off Canvas Menu List Variables
+// $off-canvas-label-padding: 0.3rem rem-calc(15);
+// $off-canvas-label-color: #999;
+// $off-canvas-label-text-transform: uppercase;
+// $off-canvas-label-font-weight: bold;
+// $off-canvas-label-bg: #444;
+// $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%);
+// $off-canvas-label-border-bottom: none;
+// $off-canvas-label-margin:0;
+// $off-canvas-link-padding: rem-calc(10, 15);
+// $off-canvas-link-color: rgba(#FFF, 0.7);
+// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
+
+// Off Canvas Menu Icon Variables
+// $tabbar-menu-icon-color: #FFF;
+// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
+
+// $tabbar-menu-icon-text-indent: rem-calc(35);
+// $tabbar-menu-icon-width: $tabbar-height;
+// $tabbar-menu-icon-height: $tabbar-height;
+// $tabbar-menu-icon-line-height: rem-calc(33);
+// $tabbar-menu-icon-padding: 0;
+
+// $tabbar-hamburger-icon-width: rem-calc(16);
+// $tabbar-hamburger-icon-left: false;
+// $tabbar-hamburger-icon-top: false;
+// $tapbar-hamburger-icon-thickness: 1px;
+// $tapbar-hamburger-icon-gap: 6px;
+
+// Off Canvas Back-Link Overlay
+// $off-canvas-overlay-transition: background 300ms ease;
+// $off-canvas-overlay-cursor: pointer;
+// $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5);
+// $off-canvas-overlay-background: rgba(#FFF, 0.2);
+// $off-canvas-overlay-background-hover: rgba(#FFF, 0.05);
+
+// Transition Variables
+// $menu-slide: "transform 500ms ease";
+
+// Orbit
+
+// $include-html-orbit-classes: $include-html-classes;
+
+// We use these to control the caption styles
+// $orbit-container-bg: none;
+// $orbit-caption-bg: rgba(51,51,51, 0.8);
+// $orbit-caption-font-color: #fff;
+// $orbit-caption-font-size: rem-calc(14);
+// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
+// $orbit-caption-padding: rem-calc(10 14);
+// $orbit-caption-height: auto;
+
+// We use these to control the left/right nav styles
+// $orbit-nav-bg: none;
+// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
+// $orbit-nav-arrow-color: #fff;
+// $orbit-nav-arrow-color-hover: #fff;
+
+// We use these to control the timer styles
+// $orbit-timer-bg: rgba(255,255,255,0.3);
+// $orbit-timer-show-progress-bar: true;
+
+// We use these to control the bullet nav styles
+// $orbit-bullet-nav-color: #ccc;
+// $orbit-bullet-nav-color-active: #999;
+// $orbit-bullet-radius: rem-calc(9);
+
+// We use these to controls the style of slide numbers
+// $orbit-slide-number-bg: rgba(0,0,0,0);
+// $orbit-slide-number-font-color: #fff;
+// $orbit-slide-number-padding: rem-calc(5);
+
+// Graceful Loading Wrapper and preloader
+// $wrapper-class: "slideshow-wrapper";
+// $preloader-class: "preloader";
+
+// Pagination
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use these to control the pagination container
+// $pagination-height: rem-calc(24);
+// $pagination-margin: rem-calc(-5);
+
+// We use these to set the list-item properties
+// $pagination-li-float: $default-float;
+// $pagination-li-height: rem-calc(24);
+// $pagination-li-font-color: #222;
+// $pagination-li-font-size: rem-calc(14);
+// $pagination-li-margin: rem-calc(5);
+
+// We use these for the pagination anchor links
+// $pagination-link-pad: rem-calc(1 10 1);
+// $pagination-link-font-color: #999;
+// $pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
+
+// We use these for disabled anchor links
+// $pagination-link-unavailable-cursor: default;
+// $pagination-link-unavailable-font-color: #999;
+// $pagination-link-unavailable-bg-active: transparent;
+
+// We use these for currently selected anchor links
+// $pagination-link-current-background: $primary-color;
+// $pagination-link-current-font-color: #fff;
+// $pagination-link-current-font-weight: bold;
+// $pagination-link-current-cursor: default;
+// $pagination-link-current-active-bg: $primary-color;
+
+// Panels
+
+// $include-html-panel-classes: $include-html-classes;
+
+// We use these to control the background and border styles
+// $panel-bg: scale-color(#fff, $lightness: -5%);
+// $panel-border-style: solid;
+// $panel-border-size: 1px;
+
+// We use this % to control how much we darken things on hover
+// $panel-function-factor: -11%;
+// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
+
+// We use these to set default inner padding and bottom margin
+// $panel-margin-bottom: rem-calc(20);
+// $panel-padding: rem-calc(20);
+
+// We use these to set default font colors
+// $panel-font-color: #333;
+// $panel-font-color-alt: #fff;
+
+// $panel-header-adjust: true;
+// $callout-panel-link-color: $primary-color;
+
+// Pricing Tables
+
+// $include-html-pricing-classes: $include-html-classes;
+
+// We use this to control the border color
+// $price-table-border: solid 1px #ddd;
+
+// We use this to control the bottom margin of the pricing table
+// $price-table-margin-bottom: rem-calc(20);
+
+// We use these to control the title styles
+// $price-title-bg: #333;
+// $price-title-padding: rem-calc(15 20);
+// $price-title-align: center;
+// $price-title-color: #eee;
+// $price-title-weight: normal;
+// $price-title-size: rem-calc(16);
+// $price-title-font-family: $body-font-family;
+
+// We use these to control the price styles
+// $price-money-bg: #f6f6f6 ;
+// $price-money-padding: rem-calc(15 20);
+// $price-money-align: center;
+// $price-money-color: #333;
+// $price-money-weight: normal;
+// $price-money-size: rem-calc(32);
+// $price-money-font-family: $body-font-family;
+
+
+// We use these to control the description styles
+// $price-bg: #fff;
+// $price-desc-color: #777;
+// $price-desc-padding: rem-calc(15);
+// $price-desc-align: center;
+// $price-desc-font-size: rem-calc(12);
+// $price-desc-weight: normal;
+// $price-desc-line-height: 1.4;
+// $price-desc-bottom-border: dotted 1px #ddd;
+
+// We use these to control the list item styles
+// $price-item-color: #333;
+// $price-item-padding: rem-calc(15);
+// $price-item-align: center;
+// $price-item-font-size: rem-calc(14);
+// $price-item-weight: normal;
+// $price-item-bottom-border: dotted 1px #ddd;
+
+// We use these to control the CTA area styles
+// $price-cta-bg: #fff;
+// $price-cta-align: center;
+// $price-cta-padding: rem-calc(20 20 0);
+
+// Progress Meters
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use this to se the prog bar height
+// $progress-bar-height: rem-calc(25);
+// $progress-bar-color: #f6f6f6 ;
+
+// We use these to control the border styles
+// $progress-bar-border-color: scale-color(#fff, $lightness: -20%);
+// $progress-bar-border-size: 1px;
+// $progress-bar-border-style: solid;
+// $progress-bar-border-radius: $global-radius;
+
+// We use these to control the margin & padding
+// $progress-bar-pad: rem-calc(2);
+// $progress-bar-margin-bottom: rem-calc(10);
+
+// We use these to set the meter colors
+// $progress-meter-color: $primary-color;
+// $progress-meter-secondary-color: $secondary-color;
+// $progress-meter-success-color: $success-color;
+// $progress-meter-alert-color: $alert-color;
+
+// Reveal
+
+// $include-html-reveal-classes: $include-html-classes;
+
+// We use these to control the style of the reveal overlay.
+// $reveal-overlay-bg: rgba(#000, .45);
+// $reveal-overlay-bg-old: #000;
+
+// We use these to control the style of the modal itself.
+// $reveal-modal-bg: #fff;
+// $reveal-position-top: 50px;
+// $reveal-default-width: 80%;
+// $reveal-modal-padding: rem-calc(20);
+// $reveal-box-shadow: 0 0 10px rgba(#000,.4);
+
+// We use these to style the reveal close button
+// $reveal-close-font-size: rem-calc(22);
+// $reveal-close-top: rem-calc(8);
+// $reveal-close-side: rem-calc(11);
+// $reveal-close-color: #aaa;
+// $reveal-close-weight: bold;
+
+// We use these to control the modal border
+// $reveal-border-style: solid;
+// $reveal-border-width: 1px;
+// $reveal-border-color: #666;
+
+// $reveal-modal-class: "reveal-modal";
+// $close-reveal-modal-class: "close-reveal-modal";
+
+// Side Nav
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use this to control padding.
+// $side-nav-padding: rem-calc(14 0);
+
+// We use these to control list styles.
+// $side-nav-list-type: none;
+// $side-nav-list-position: inside;
+// $side-nav-list-margin: rem-calc(0 0 7 0);
+
+// We use these to control link styles.
+// $side-nav-link-color: $primary-color;
+// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
+// $side-nav-font-size: rem-calc(14);
+// $side-nav-font-weight: normal;
+// $side-nav-font-family: $body-font-family;
+// $side-nav-active-font-family: $side-nav-font-family;
+
+
+
+// We use these to control border styles
+// $side-nav-divider-size: 1px;
+// $side-nav-divider-style: solid;
+// $side-nav-divider-color: scale-color(#fff, $lightness: -10%);
+
+// Split Buttons
+
+// $include-html-button-classes: $include-html-classes;
+
+// We use these to control different shared styles for Split Buttons
+// $split-button-function-factor: 10%;
+// $split-button-pip-color: #fff;
+// $split-button-pip-color-alt: #333;
+// $split-button-active-bg-tint: rgba(0,0,0,0.1);
+
+// We use these to control tiny split buttons
+// $split-button-padding-tny: $button-pip-tny * 10;
+// $split-button-span-width-tny: $button-pip-tny * 6;
+// $split-button-pip-size-tny: $button-pip-tny;
+// $split-button-pip-top-tny: $button-pip-tny * 2;
+// $split-button-pip-default-float-tny: rem-calc(-6);
+
+// We use these to control small split buttons
+// $split-button-padding-sml: $button-pip-sml * 10;
+// $split-button-span-width-sml: $button-pip-sml * 6;
+// $split-button-pip-size-sml: $button-pip-sml;
+// $split-button-pip-top-sml: $button-pip-sml * 1.5;
+// $split-button-pip-default-float-sml: rem-calc(-6);
+
+// We use these to control medium split buttons
+// $split-button-padding-med: $button-pip-med * 9;
+// $split-button-span-width-med: $button-pip-med * 5.5;
+// $split-button-pip-size-med: $button-pip-med - rem-calc(3);
+// $split-button-pip-top-med: $button-pip-med * 1.5;
+// $split-button-pip-default-float-med: rem-calc(-6);
+
+// We use these to control large split buttons
+// $split-button-padding-lrg: $button-pip-lrg * 8;
+// $split-button-span-width-lrg: $button-pip-lrg * 5;
+// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
+// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
+// $split-button-pip-default-float-lrg: rem-calc(-6);
+
+// Sub Nav
+
+// $include-html-nav-classes: $include-html-classes;
+
+// We use these to control margin and padding
+// $sub-nav-list-margin: rem-calc(-4 0 18);
+// $sub-nav-list-padding-top: rem-calc(4);
+
+// We use this to control the definition
+// $sub-nav-font-family: $body-font-family;
+// $sub-nav-font-size: rem-calc(14);
+// $sub-nav-font-color: #999;
+// $sub-nav-font-weight: normal;
+// $sub-nav-text-decoration: none;
+// $sub-nav-border-radius: 3px;
+// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
+
+
+// We use these to control the active item styles
+
+// $sub-nav-active-font-weight: normal;
+// $sub-nav-active-bg: $primary-color;
+// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
+// $sub-nav-active-color: #fff;
+// $sub-nav-active-padding: rem-calc(3 16);
+// $sub-nav-active-cursor: default;
+
+// $sub-nav-item-divider: "";
+// $sub-nav-item-divider-margin: rem-calc(12);
+
+//
+// SWITCH
+//
+
+// $include-html-form-classes: $include-html-classes;
+
+// Controlling border styles and background colors for the switch container
+// $switch-border-color: scale-color(#fff, $lightness: -20%);
+// $switch-border-style: solid;
+// $switch-border-width: 1px;
+// $switch-bg: #fff;
+
+// We use these to control the switch heights for our default classes
+// $switch-height-tny: 22px;
+// $switch-height-sml: 28px;
+// $switch-height-med: 36px;
+// $switch-height-lrg: 44px;
+// $switch-bottom-margin: rem-calc(20);
+
+// We use these to control default font sizes for our classes.
+// $switch-font-size-tny: 11px;
+// $switch-font-size-sml: 12px;
+// $switch-font-size-med: 14px;
+// $switch-font-size-lrg: 17px;
+// $switch-label-side-padding: 6px;
+
+// We use these to style the switch-paddle
+// $switch-paddle-bg: #fff;
+// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
+// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
+// $switch-paddle-border-width: 1px;
+// $switch-paddle-border-style: solid;
+// $switch-paddle-transition-speed: .1s;
+// $switch-paddle-transition-ease: ease-out;
+// $switch-positive-color: scale-color($success-color, $lightness: 94%);
+// $switch-negative-color: #f5f5f5;
+
+// Outline Style for tabbing through switches
+// $switch-label-outline: 1px dotted #888;
+
+// Tables
+
+// $include-html-table-classes: $include-html-classes;
+
+// These control the background color for the table and even rows
+// $table-bg: #fff;
+// $table-even-row-bg: #f9f9f9 ;
+
+// These control the table cell border style
+// $table-border-style: solid;
+// $table-border-size: 1px;
+// $table-border-color: #ddd;
+
+// These control the table head styles
+// $table-head-bg: #f5f5f5 ;
+// $table-head-font-size: rem-calc(14);
+// $table-head-font-color: #222;
+// $table-head-font-weight: bold;
+// $table-head-padding: rem-calc(8 10 10);
+
+// These control the row padding and font styles
+// $table-row-padding: rem-calc(9 10);
+// $table-row-font-size: rem-calc(14);
+// $table-row-font-color: #222;
+// $table-line-height: rem-calc(18);
+
+// These are for controlling the display and margin of tables
+// $table-display: table-cell;
+// $table-margin-bottom: rem-calc(20);
+
+//
+// TABS
+//
+
+// $include-html-tabs-classes: $include-html-classes;
+
+// $tabs-navigation-padding: rem-calc(16);
+// $tabs-navigation-bg-color: #efefef ;
+// $tabs-navigation-active-bg-color: #fff;
+// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
+// $tabs-navigation-font-color: #222;
+// $tabs-navigation-font-size: rem-calc(16);
+// $tabs-navigation-font-family: $body-font-family;
+
+// $tabs-content-margin-bottom: rem-calc(24);
+// $tabs-content-padding: $column-gutter/2;
+
+// $tabs-vertical-navigation-margin-bottom: 1.25rem;
+
+//
+// THUMBNAILS
+//
+
+// $include-html-media-classes: $include-html-classes;
+
+// We use these to control border styles
+// $thumb-border-style: solid;
+// $thumb-border-width: 4px;
+// $thumb-border-color: #fff;
+// $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
+// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
+
+// Radius and transition speed for thumbs
+// $thumb-radius: $global-radius;
+// $thumb-transition-speed: 200ms;
+
+//
+// TOOLTIPS
+//
+
+// $include-html-tooltip-classes: $include-html-classes;
+
+// $has-tip-border-bottom: dotted 1px #ccc;
+// $has-tip-font-weight: bold;
+// $has-tip-font-color: #333;
+// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
+// $has-tip-font-color-hover: $primary-color;
+// $has-tip-cursor-type: help;
+
+// $tooltip-padding: rem-calc(12);
+// $tooltip-bg: #333;
+// $tooltip-font-size: rem-calc(14);
+// $tooltip-font-weight: normal;
+// $tooltip-font-color: #fff;
+// $tooltip-line-height: 1.3;
+// $tooltip-close-font-size: rem-calc(10);
+// $tooltip-close-font-weight: normal;
+// $tooltip-close-font-color: #777;
+// $tooltip-font-size-sml: rem-calc(14);
+// $tooltip-radius: $global-radius;
+// $tooltip-rounded: $global-rounded;
+// $tooltip-pip-size: 5px;
+
+//
+// TOP BAR
+//
+
+// $include-html-top-bar-classes: $include-html-classes;
+
+// Background color for the top bar
+// $topbar-bg-color: #333;
+// $topbar-bg: $topbar-bg-color;
+
+// Height and margin
+// $topbar-height: 45px;
+// $topbar-margin-bottom: 0;
+
+// Controlling the styles for the title in the top bar
+// $topbar-title-weight: normal;
+// $topbar-title-font-size: rem-calc(17);
+
+// Style the top bar dropdown elements
+// $topbar-dropdown-bg: #333;
+// $topbar-dropdown-link-color: #fff;
+// $topbar-dropdown-link-bg: #333;
+// $topbar-dropdown-link-weight: normal;
+// $topbar-dropdown-toggle-size: 5px;
+// $topbar-dropdown-toggle-color: #fff;
+// $topbar-dropdown-toggle-alpha: 0.4;
+
+// Set the link colors and styles for top-level nav
+// $topbar-link-color: #fff;
+// $topbar-link-color-hover: #fff;
+// $topbar-link-color-active: #fff;
+// $topbar-link-color-active-hover: #fff;
+// $topbar-link-weight: normal;
+// $topbar-link-font-size: rem-calc(13);
+// $topbar-link-hover-lightness: -10%; // Darken by 10%
+// $topbar-link-bg-hover: #272727;
+// $topbar-link-bg-active: $primary-color;
+// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
+// $topbar-link-font-family: $body-font-family;
+// $topbar-link-text-transform: none;
+// $topbar-link-padding: $topbar-height / 3;
+
+// $topbar-button-font-size: 0.75rem;
+// $topbar-button-top: 7px;
+
+// $topbar-dropdown-label-color: #777;
+// $topbar-dropdown-label-text-transform: uppercase;
+// $topbar-dropdown-label-font-weight: bold;
+// $topbar-dropdown-label-font-size: rem-calc(10);
+// $topbar-dropdown-label-bg: #333;
+
+// Top menu icon styles
+// $topbar-menu-link-transform: uppercase;
+// $topbar-menu-link-font-size: rem-calc(13);
+// $topbar-menu-link-weight: bold;
+// $topbar-menu-link-color: #fff;
+// $topbar-menu-icon-color: #fff;
+// $topbar-menu-link-color-toggled: #888;
+// $topbar-menu-icon-color-toggled: #888;
+
+// Transitions and breakpoint styles
+// $topbar-transition-speed: 300ms;
+// Using rem-calc for the below breakpoint causes issues with top bar
+// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
+// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";
+
+// Divider Styles
+// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
+// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
+
+// Sticky Class
+// $topbar-sticky-class: ".sticky";
+// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
+
+//
+// VISIBILITY CLASSES
+//
+
+// $include-html-visibility-classes: $include-html-classes;
+// $include-table-visibility-classes: true;
+// $include-legacy-visibility-classes: true;
+
+//
+// RANGE SLIDER
+//
+
+// $include-html-range-slider-classes: $include-html-classes;
+
+// These variabels define the slider bar styles
+// $range-slider-bar-width: 100%;
+// $range-slider-bar-height: rem-calc(16);
+
+// $range-slider-bar-border-width: 1px;
+// $range-slider-bar-border-style: solid;
+// $range-slider-bar-border-color: #ddd;
+// $range-slider-radius: $global-radius;
+// $range-slider-round: $global-rounded;
+// $range-slider-bar-bg-color: #fafafa;
+
+// Vertical bar styles
+// $range-slider-vertical-bar-width: rem-calc(16);
+// $range-slider-vertical-bar-height: rem-calc(200);
+
+// These variabels define the slider handle styles
+// $range-slider-handle-width: rem-calc(32);
+// $range-slider-handle-height: rem-calc(22);
+// $range-slider-handle-position-top: rem-calc(-5);
+// $range-slider-handle-bg-color: $primary-color;
+// $range-slider-handle-border-width: 1px;
+// $range-slider-handle-border-style: solid;
+// $range-slider-handle-border-color: none;
+// $range-slider-handle-radius: $global-radius;
+// $range-slider-handle-round: $global-rounded;
+// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
+// $range-slider-handle-cursor: pointer;
+@import 'foundation'
diff --git a/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass b/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass
new file mode 100644
index 00000000..8842a7c9
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass
@@ -0,0 +1,87 @@
+@import constants
+@import font-awesome
+@import foundation_and_overrides
+header.top-menu
+ height: 90px
+ background-color: transparent
+ background-repeat: no-repeat, no-repeat
+ background-position: left bottom, right bottom
+ background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
+ color: $green
+ padding-left: 49px
+ padding-right: 52px
+ .menu-content
+ background-color: white
+ background-repeat: repeat-x
+ background-position: center bottom
+ background-image: image-url('theme1/button-bar-middle.png')
+ //min-height: 61px
+ height: 100%
+ section
+ height: 52px
+ line-height: 48px
+ &.main-buttons
+ float: left
+ @media #{$medium-up}
+ padding-left: 14px
+ &.extra-info
+ float: right
+ .supplier-info-row
+ float: right
+ clear: right
+ line-height: 27px
+ padding-right: 7px
+ .table-number
+ display: inline-block
+ //text-transform: lowercase
+ .supplier-name
+ display: inline-block
+ .supplier-orders-placed-count
+ display: inline-block
+ margin-right: 15px
+ .supplier-orders-in-process-count
+ display: inline-block
+ .menu-list-item
+ margin-left: 20px
+ cursor: pointer
+ border: 0.08em solid #eee
+ padding: 5px
+ border-radius: 0.1em
+ display: inline-block
+ line-height: 1em
+ margin-top: 10px
+ color: #999
+ &.active
+ color: yellow
+ border-color: yellow
+ &.callout
+ color: #f70
+ border-color: #f70
+ @media #{$medium-only}
+ margin-left: 8px
+ @media #{$small-only}
+ margin-left: 5px
+.orders-placed-count-icon
+ @extend .fa
+ @extend .fa-clock-o
+ @extend .fa-lg
+ margin-left: 3px
+.orders-in-process-count-icon
+ @extend .fa
+ @extend .fa-check
+ @extend .fa-lg
+ margin-left: 3px
+.toggle-side-menu
+ position: absolute
+ width: 28px
+ height: 28px
+ color: white
+ left: 0
+ cursor: pointer
+ z-index: 100
+ &.open
+ color: white
+ span
+ @extend .fa
+ @extend .fa-bars
+ @extend .fa-lg
diff --git a/app/assets/stylesheets/supplier/foundation1/menu_side.css.sass b/app/assets/stylesheets/supplier/foundation1/menu_side.css.sass
new file mode 100644
index 00000000..9034f44e
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/menu_side.css.sass
@@ -0,0 +1,13 @@
+@import constants
+aside.side-menu
+ background-color: #444
+ position: fixed
+ display: none
+ left: -222px
+ top: 0
+ width: 222px
+ height: 100%
+ > ul
+ list-style: none
+ a
+ color: white
diff --git a/app/assets/stylesheets/supplier/foundation1/product_categories.css.sass b/app/assets/stylesheets/supplier/foundation1/product_categories.css.sass
new file mode 100644
index 00000000..4fc13fdc
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/product_categories.css.sass
@@ -0,0 +1,30 @@
+@import font-awesome
+#product-category-list
+ list-style: none
+ li
+ clear: both
+ margin-bottom: 8px
+ .name
+ padding: 5px 5px
+#week_days-group
+ .btn
+ opacity: 0.4
+ &.active
+ opacity: 1
+#full_day-controller
+ @extend .fa
+ @extend .fa-clock-o
+ margin: 0 10px
+ color: #f70
+ &.active
+ // Full day active is not special, highlight when not active,
+ // because it indicates the being active of a time range
+ color: #444
+
+#sub-day-container
+ display: inline-block
+ &.hide
+ display: none
+ select
+ width: 70px
+ margin-right: 14px
diff --git a/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass b/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass
new file mode 100644
index 00000000..eb1854cf
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/products_preview.css.sass
@@ -0,0 +1,17 @@
+.products_preview-date
+ .products_preview-time-container
+ float: left
+ input
+ width: 120px
+.products_preview-hour
+ float: left
+ margin-left: 10px
+ select
+ width: 50px
+ &:after
+ content: " :"
+.products_preview-minute
+ float: left
+ margin-left: 10px
+ select
+ width: 50px
diff --git a/app/assets/stylesheets/supplier/foundation1/structure.css.sass b/app/assets/stylesheets/supplier/foundation1/structure.css.sass
new file mode 100644
index 00000000..b5f6f46b
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/structure.css.sass
@@ -0,0 +1,56 @@
+$side-spacing: 0px
+@import constants
+@import ./foundation_and_overrides
+html
+body
+ label
+ &.number
+ display: inline
+ padding: 4px 10px
+ input
+ &.number
+ width: 40px
+.supplier-is-closed
+ .alert
+ form
+ margin: 0
+.location_picker_search
+ float: left
+.draggable
+ cursor: move !important
+input.dimension
+ width: 40px
+.location_picker_map
+ width: 600px
+ height: 500px
+ border: 1px solid black
+ padding: 2px
+ display: inline-block
+ float: left
+ clear: left
+ img
+ max-width: none
+ label
+ width: auto
+ display:inline
+.handle
+ cursor: move
+ font-size: 0.8em
+ color: #777
+form
+ &.form-inline
+ display: inline-block
+ padding: 4px
+.clear
+ clear: both
+body
+ background-image: $wood
+ background-repeat: repeat
+main.main-section
+ +panel($bg:rgba(200,200,200,0.8))
+ min-height: 100%
+ padding: 0
+ margin: 0
+
+.hide, .hidden
+ display: none
diff --git a/app/controllers/suppliers/tables_controller.rb b/app/controllers/suppliers/tables_controller.rb
index 0a283f08..ded30fdf 100644
--- a/app/controllers/suppliers/tables_controller.rb
+++ b/app/controllers/suppliers/tables_controller.rb
@@ -88,7 +88,7 @@ module Suppliers
end
def qr_codes
- @tables = current_supplier.tables
+ @tables = Table.for_supplier(current_supplier, from_number: params[:from_number], to_number: params[:to_number])
@tables.select!{|t| t.section_id == params[:section_id]} if params[:section_id].present?
render layout: 'qr_sheet'
end
diff --git a/app/views/layouts/tablet.html.slim b/app/views/layouts/tablet.html.slim
index 52e5893d..2246661f 100644
--- a/app/views/layouts/tablet.html.slim
+++ b/app/views/layouts/tablet.html.slim
@@ -10,69 +10,42 @@ html lang="en"
/! Le HTML5 shim, for IE6-8 support of HTML elements
/[if lt IE 9]
= javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
- = stylesheet_link_tag "supplier/wood1/application", media: "all"
+ = stylesheet_link_tag "supplier/foundation1/application", media: "all"
link href="/favicon.ico" rel="shortcut icon"
= render 'suppliers/application/head'
- = javascript_include_tag "supplier/application"
+ = javascript_include_tag "supplier/foundation1/application"
= yield :head
body
- .navbar.navbar-fixed-top.navbar-inverse
- .navbar-inner
- .container
- a.btn.btn-navbar data-target=".nav-collapse" data-toggle="collapse"
- span.icon-bar
- span.icon-bar
- span.icon-bar
- a.brand href=supplier_root_path = image_tag 'icons/logo-small.png', alt: application_title
- ul.nav.pull-right
- li.dropdown
- a.dropdown-toggle href="#" data-toggle="dropdown"
- = current_supplier.name.presence || current_supplier.email
- b.caret
- ul.dropdown-menu
- - if current_supplier.open?
- li
- = form_tag supplier_mark_as_closed_path do
- = submit_tag t('supplier.close'), class: [:btn, 'btn-danger'], onClick: %|$(this).parents('form').submit()|
- li= link_to 'Settings', supplier_settings_path
- li= link_to 'Logout', destroy_supplier_session_path, method: :delete
- .container.nav-collapse
- ul.nav#top-navigation-list
- //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
- //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
- li= link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}
- li= link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}
- li= link_to Section.model_name.human_plural, suppliers_sections_path, data: {t: 'models.plural.section'}
- li= link_to Table.model_name.human_plural, suppliers_tables_path, data: {t: 'models.plural.table'}
- li= link_to List.model_name.human_plural, suppliers_lists_path, data: {t: 'models.plural.list'}
- .container
- .content.main-content
- - if flash[:alert].present?
- .alert.alert-error
- a.close data-dismiss="alert" ×
- div= flash[:alert]
- - if flash[:notice].present?
- .alert.alert-success
- a.close data-dismiss="alert" ×
- div= flash[:notice]
- - if current_supplier.closed?
- .row.supplier-is-closed
+ = render 'suppliers/application/top_menu'
+ main.main-section
+ .container
+ .content.main-content
+ - if flash[:alert].present?
+ .alert.alert-error
+ a.close data-dismiss="alert" ×
+ div= flash[:alert]
+ - if flash[:notice].present?
+ .alert.alert-success
+ a.close data-dismiss="alert" ×
+ div= flash[:notice]
+ - if current_supplier.closed?
+ .row.supplier-is-closed
+ .span12
+ .alert.alert-block
+ button.close{data-dismiss="alert"} x
+ p = t('supplier.you_are_currently_closed_alert')
+ = form_tag supplier_mark_as_open_path do
+ = submit_tag t('supplier.mark_as_open_button'), class: [:btn, 'btn-primary']
+ .row
.span12
- .alert.alert-block
- button.close{data-dismiss="alert"} x
- p = t('supplier.you_are_currently_closed_alert')
- = form_tag supplier_mark_as_open_path do
- = submit_tag t('supplier.mark_as_open_button'), class: [:btn, 'btn-primary']
- .row
- .span12
- = content_for?(:content) ? yield(:content) : yield
- - if content_for?(:row)
- .row= yield :row
- .row
- .span12
- #ember-app-container
- script#alert-template[type="text/html"]= mustache_template 'supplier/alert'
- = yield :footer
- javascript:
- jQuery(function(){#{onload_javascript}});
+ = content_for?(:content) ? yield(:content) : yield
+ - if content_for?(:row)
+ .row= yield :row
+ .row
+ .span12
+ #ember-app-container
+ script#alert-template[type="text/html"]= mustache_template 'supplier/alert'
+ = yield :footer
+ javascript:
+ jQuery(function(){#{onload_javascript}});
diff --git a/app/views/suppliers/application/_top_menu.html.slim b/app/views/suppliers/application/_top_menu.html.slim
new file mode 100644
index 00000000..8d877d17
--- /dev/null
+++ b/app/views/suppliers/application/_top_menu.html.slim
@@ -0,0 +1,63 @@
+header.top-menu
+ .toggle-side-menu
+ span
+ .menu-content
+ section.main-buttons
+ //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
+ //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
+ = link_to image_tag('icons/logo-small.png'), supplier_root_path
+ = link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}
+ = link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}
+ = link_to Section.model_name.human_plural, suppliers_sections_path, data: {t: 'models.plural.section'}
+ = link_to Table.model_name.human_plural, suppliers_tables_path, data: {t: 'models.plural.table'}
+ = link_to List.model_name.human_plural, suppliers_lists_path, data: {t: 'models.plural.list'}
+ section.extra-info
+ .supplier-info-row
+ .supplier-name= current_supplier.name.presence || current_supplier.email
+ .table-number
+ .supplier-info-row
+ .counter.supplier-orders-placed-count
+ = current_supplier.orders_placed_count
+ span.orders-placed-count-icon
+ .counter.supplier-orders-in-process-count
+ = current_supplier.orders_in_process_count
+ span.orders-in-process-count-icon
+aside.side-menu
+ ul
+ li
+ label Menu
+ - if current_supplier.open?
+ li
+ = form_tag supplier_mark_as_closed_path do
+ = submit_tag t('supplier.close'), class: [:btn, 'btn-danger'], onClick: %|$(this).parents('form').submit()|
+ li= link_to 'Settings', supplier_settings_path
+ li= link_to 'Logout', destroy_supplier_session_path, method: :delete
+/.navbar.navbar-fixed-top.navbar-inverse
+ .navbar-inner
+ .container
+ a.btn.btn-navbar data-target=".nav-collapse" data-toggle="collapse"
+ span.icon-bar
+ span.icon-bar
+ span.icon-bar
+ a.brand href=supplier_root_path = image_tag 'icons/logo-small.png', alt: application_title
+ ul.nav.pull-right
+ li.dropdown
+ a.dropdown-toggle href="#" data-toggle="dropdown"
+ = current_supplier.name.presence || current_supplier.email
+ b.caret
+ ul.dropdown-menu
+ - if current_supplier.open?
+ li
+ = form_tag supplier_mark_as_closed_path do
+ = submit_tag t('supplier.close'), class: [:btn, 'btn-danger'], onClick: %|$(this).parents('form').submit()|
+ li= link_to 'Settings', supplier_settings_path
+ li= link_to 'Logout', destroy_supplier_session_path, method: :delete
+ .container.nav-collapse
+ ul.nav#top-navigation-list
+ //li= link_to t('supplier.menu.active_orders', orders: Order.model_name.human_plural), supplier_active_orders_path
+ //li= link_to t('supplier.menu.active_lists', lists: List.model_name.human_plural), supplier_active_lists_path
+ li= link_to ProductCategory.model_name.human_plural, suppliers_product_categories_path, data: {t: 'models.plural.product_category'}
+ li= link_to Product.model_name.human_plural, suppliers_products_path, data: {t: 'models.plural.product'}
+ li= link_to Section.model_name.human_plural, suppliers_sections_path, data: {t: 'models.plural.section'}
+ li= link_to Table.model_name.human_plural, suppliers_tables_path, data: {t: 'models.plural.table'}
+ li= link_to List.model_name.human_plural, suppliers_lists_path, data: {t: 'models.plural.list'}
diff --git a/app/views/suppliers/product_categories/_form.html.slim b/app/views/suppliers/product_categories/_form.html.slim
index f742d782..d40ce7c1 100644
--- a/app/views/suppliers/product_categories/_form.html.slim
+++ b/app/views/suppliers/product_categories/_form.html.slim
@@ -18,7 +18,7 @@
button.week-day-toggle.btn type="button" data-day=day_name data-t="product_category.week_days.abbreviation.#{day_name}"
- span#full_day-controller.icon.icon-time
+ span#full_day-controller
#sub-day-container.hide
= f.input_field :start_from, as: :select, collection: (1..24).map{|h| ["#{h}:00", h*60]}
= f.input_field :end_on, as: :select, collection: (1..24).map{|h| ["#{h}:00", h*60]}
diff --git a/app/views/suppliers/product_categories/index.html.slim b/app/views/suppliers/product_categories/index.html.slim
index 69e1a444..f69fc17f 100644
--- a/app/views/suppliers/product_categories/index.html.slim
+++ b/app/views/suppliers/product_categories/index.html.slim
@@ -5,7 +5,7 @@
ul#product-category-list data-update-url=sort_suppliers_product_categories_path
- for product_category in @product_categories
= content_tag_for :li, product_category do
- span.handle.icon-move.icon-white
+ span.handle.fa.fa-arrows
span.name= link_to product_category.name, [:suppliers, product_category]
span= product_category.visible_on
.pull-right.actions
diff --git a/app/views/suppliers/tables/index.html.slim b/app/views/suppliers/tables/index.html.slim
index 8af23e2e..35760233 100644
--- a/app/views/suppliers/tables/index.html.slim
+++ b/app/views/suppliers/tables/index.html.slim
@@ -33,4 +33,4 @@ div.page-header= title :index, model_class
.form-actions
= link_to t("helpers.links.new"), new_suppliers_table_path, class: 'btn btn-primary', data: {t: 'helpers.links.new'}
'
- = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path, class: 'btn btn-info', data: {t: 'tables.qr_codes.link'}
+ = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path(params.slice(:from_number, :to_number)), class: 'btn btn-info', data: {t: 'tables.qr_codes.link'}, target: :_blank