').addClass(settings.timer_progress_class));
- timer_container.addClass(settings.timer_paused_class);
- container.append(timer_container);
- }
-
- if (settings.slide_number) {
- number_container = $('
').addClass(settings.slide_number_class);
- number_container.append('
' + settings.slide_number_text + '
');
- container.append(number_container);
- }
-
- if (settings.bullets) {
- bullets_container = $('
').addClass(settings.bullets_container_class);
- container.append(bullets_container);
- bullets_container.wrap('');
- self.slides().each(function (idx, el) {
- var bullet = $('- ').attr('data-orbit-slide', idx).on('click', self.link_bullet);;
- bullets_container.append(bullet);
- });
- }
-
- };
-
- self._goto = function (next_idx, start_timer) {
- // if (locked) {return false;}
- if (next_idx === idx) {return false;}
- if (typeof timer === 'object') {timer.restart();}
- var slides = self.slides();
-
- var dir = 'next';
- locked = true;
- if (next_idx < idx) {dir = 'prev';}
- if (next_idx >= slides.length) {
- if (!settings.circular) {
- return false;
- }
- next_idx = 0;
- } else if (next_idx < 0) {
- if (!settings.circular) {
- return false;
- }
- next_idx = slides.length - 1;
- }
-
- var current = $(slides.get(idx));
- var next = $(slides.get(next_idx));
-
- current.css('zIndex', 2);
- current.removeClass(settings.active_slide_class);
- next.css('zIndex', 4).addClass(settings.active_slide_class);
-
- slides_container.trigger('before-slide-change.fndtn.orbit');
- settings.before_slide_change();
- self.update_active_link(next_idx);
-
- var callback = function () {
- var unlock = function () {
- idx = next_idx;
- locked = false;
- if (start_timer === true) {timer = self.create_timer(); timer.start();}
- self.update_slide_number(idx);
- slides_container.trigger('after-slide-change.fndtn.orbit', [{slide_number : idx, total_slides : slides.length}]);
- settings.after_slide_change(idx, slides.length);
- };
- if (slides_container.outerHeight() != next.outerHeight() && settings.variable_height) {
- slides_container.animate({'height': next.outerHeight()}, 250, 'linear', unlock);
- } else {
- unlock();
- }
- };
-
- if (slides.length === 1) {callback(); return false;}
-
- var start_animation = function () {
- if (dir === 'next') {animate.next(current, next, callback);}
- if (dir === 'prev') {animate.prev(current, next, callback);}
- };
-
- if (next.outerHeight() > slides_container.outerHeight() && settings.variable_height) {
- slides_container.animate({'height': next.outerHeight()}, 250, 'linear', start_animation);
- } else {
- start_animation();
- }
- };
-
- self.next = function (e) {
- e.stopImmediatePropagation();
- e.preventDefault();
- self._goto(idx + 1);
- };
-
- self.prev = function (e) {
- e.stopImmediatePropagation();
- e.preventDefault();
- self._goto(idx - 1);
- };
-
- self.link_custom = function (e) {
- e.preventDefault();
- var link = $(this).attr('data-orbit-link');
- if ((typeof link === 'string') && (link = $.trim(link)) != '') {
- var slide = container.find('[data-orbit-slide=' + link + ']');
- if (slide.index() != -1) {self._goto(slide.index());}
- }
- };
-
- self.link_bullet = function (e) {
- var index = $(this).attr('data-orbit-slide');
- if ((typeof index === 'string') && (index = $.trim(index)) != '') {
- if (isNaN(parseInt(index))) {
- var slide = container.find('[data-orbit-slide=' + index + ']');
- if (slide.index() != -1) {self._goto(slide.index() + 1);}
- } else {
- self._goto(parseInt(index));
- }
- }
-
- }
-
- self.timer_callback = function () {
- self._goto(idx + 1, true);
- }
-
- self.compute_dimensions = function () {
- var current = $(self.slides().get(idx));
- var h = current.outerHeight();
- if (!settings.variable_height) {
- self.slides().each(function(){
- if ($(this).outerHeight() > h) { h = $(this).outerHeight(); }
- });
- }
- slides_container.height(h);
- };
-
- self.create_timer = function () {
- var t = new Timer(
- container.find('.' + settings.timer_container_class),
- settings,
- self.timer_callback
- );
- return t;
- };
-
- self.stop_timer = function () {
- if (typeof timer === 'object') {
- timer.stop();
- }
- };
-
- self.toggle_timer = function () {
- var t = container.find('.' + settings.timer_container_class);
- if (t.hasClass(settings.timer_paused_class)) {
- if (typeof timer === 'undefined') {timer = self.create_timer();}
- timer.start();
- } else {
- if (typeof timer === 'object') {timer.stop();}
- }
- };
-
- self.init = function () {
- self.build_markup();
- if (settings.timer) {
- timer = self.create_timer();
- Foundation.utils.image_loaded(this.slides().children('img'), timer.start);
- }
- animate = new FadeAnimation(settings, slides_container);
- if (settings.animation === 'slide') {
- animate = new SlideAnimation(settings, slides_container);
- }
-
- container.on('click', '.' + settings.next_class, self.next);
- container.on('click', '.' + settings.prev_class, self.prev);
-
- if (settings.next_on_click) {
- container.on('click', '.' + settings.slides_container_class + ' [data-orbit-slide]', self.link_bullet);
- }
-
- container.on('click', self.toggle_timer);
- if (settings.swipe) {
- container.on('touchstart.fndtn.orbit', function (e) {
- if (!e.touches) {e = e.originalEvent;}
- var data = {
- start_page_x : e.touches[0].pageX,
- start_page_y : e.touches[0].pageY,
- start_time : (new Date()).getTime(),
- delta_x : 0,
- is_scrolling : undefined
- };
- container.data('swipe-transition', data);
- e.stopPropagation();
- })
- .on('touchmove.fndtn.orbit', function (e) {
- if (!e.touches) {
- e = e.originalEvent;
- }
- // Ignore pinch/zoom events
- if (e.touches.length > 1 || e.scale && e.scale !== 1) {
- return;
- }
-
- var data = container.data('swipe-transition');
- if (typeof data === 'undefined') {data = {};}
-
- data.delta_x = e.touches[0].pageX - data.start_page_x;
-
- if ( typeof data.is_scrolling === 'undefined') {
- data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
- }
-
- if (!data.is_scrolling && !data.active) {
- e.preventDefault();
- var direction = (data.delta_x < 0) ? (idx + 1) : (idx - 1);
- data.active = true;
- self._goto(direction);
- }
- })
- .on('touchend.fndtn.orbit', function (e) {
- container.data('swipe-transition', {});
- e.stopPropagation();
- })
- }
- container.on('mouseenter.fndtn.orbit', function (e) {
- if (settings.timer && settings.pause_on_hover) {
- self.stop_timer();
- }
- })
- .on('mouseleave.fndtn.orbit', function (e) {
- if (settings.timer && settings.resume_on_mouseout) {
- timer.start();
- }
- });
-
- $(document).on('click', '[data-orbit-link]', self.link_custom);
- $(window).on('load resize', self.compute_dimensions);
- Foundation.utils.image_loaded(this.slides().children('img'), self.compute_dimensions);
- Foundation.utils.image_loaded(this.slides().children('img'), function () {
- container.prev('.' + settings.preloader_class).css('display', 'none');
- self.update_slide_number(0);
- self.update_active_link(0);
- slides_container.trigger('ready.fndtn.orbit');
- });
- };
-
- self.init();
- };
-
- var Timer = function (el, settings, callback) {
- var self = this,
- duration = settings.timer_speed,
- progress = el.find('.' + settings.timer_progress_class),
- start,
- timeout,
- left = -1;
-
- this.update_progress = function (w) {
- var new_progress = progress.clone();
- new_progress.attr('style', '');
- new_progress.css('width', w + '%');
- progress.replaceWith(new_progress);
- progress = new_progress;
- };
-
- this.restart = function () {
- clearTimeout(timeout);
- el.addClass(settings.timer_paused_class);
- left = -1;
- self.update_progress(0);
- };
-
- this.start = function () {
- if (!el.hasClass(settings.timer_paused_class)) {return true;}
- left = (left === -1) ? duration : left;
- el.removeClass(settings.timer_paused_class);
- start = new Date().getTime();
- progress.animate({'width' : '100%'}, left, 'linear');
- timeout = setTimeout(function () {
- self.restart();
- callback();
- }, left);
- el.trigger('timer-started.fndtn.orbit')
- };
-
- this.stop = function () {
- if (el.hasClass(settings.timer_paused_class)) {return true;}
- clearTimeout(timeout);
- el.addClass(settings.timer_paused_class);
- var end = new Date().getTime();
- left = left - (end - start);
- var w = 100 - ((left / duration) * 100);
- self.update_progress(w);
- el.trigger('timer-stopped.fndtn.orbit');
- };
- };
-
- var SlideAnimation = function (settings, container) {
- var duration = settings.animation_speed;
- var is_rtl = ($('html[dir=rtl]').length === 1);
- var margin = is_rtl ? 'marginRight' : 'marginLeft';
- var animMargin = {};
- animMargin[margin] = '0%';
-
- this.next = function (current, next, callback) {
- current.animate({marginLeft : '-100%'}, duration);
- next.animate(animMargin, duration, function () {
- current.css(margin, '100%');
- callback();
- });
- };
-
- this.prev = function (current, prev, callback) {
- current.animate({marginLeft : '100%'}, duration);
- prev.css(margin, '-100%');
- prev.animate(animMargin, duration, function () {
- current.css(margin, '100%');
- callback();
- });
- };
- };
-
- var FadeAnimation = function (settings, container) {
- var duration = settings.animation_speed;
- var is_rtl = ($('html[dir=rtl]').length === 1);
- var margin = is_rtl ? 'marginRight' : 'marginLeft';
-
- this.next = function (current, next, callback) {
- next.css({'margin' : '0%', 'opacity' : '0.01'});
- next.animate({'opacity' :'1'}, duration, 'linear', function () {
- current.css('margin', '100%');
- callback();
- });
- };
-
- this.prev = function (current, prev, callback) {
- prev.css({'margin' : '0%', 'opacity' : '0.01'});
- prev.animate({'opacity' : '1'}, duration, 'linear', function () {
- current.css('margin', '100%');
- callback();
- });
- };
- };
-
- Foundation.libs = Foundation.libs || {};
-
- Foundation.libs.orbit = {
- name : 'orbit',
-
- version : '5.5.2',
-
- settings : {
- animation : 'slide',
- timer_speed : 10000,
- pause_on_hover : true,
- resume_on_mouseout : false,
- next_on_click : true,
- animation_speed : 500,
- stack_on_small : false,
- navigation_arrows : true,
- slide_number : true,
- slide_number_text : 'of',
- container_class : 'orbit-container',
- stack_on_small_class : 'orbit-stack-on-small',
- next_class : 'orbit-next',
- prev_class : 'orbit-prev',
- timer_container_class : 'orbit-timer',
- timer_paused_class : 'paused',
- timer_progress_class : 'orbit-progress',
- slides_container_class : 'orbit-slides-container',
- preloader_class : 'preloader',
- slide_selector : '*',
- bullets_container_class : 'orbit-bullets',
- bullets_active_class : 'active',
- slide_number_class : 'orbit-slide-number',
- caption_class : 'orbit-caption',
- active_slide_class : 'active',
- orbit_transition_class : 'orbit-transitioning',
- bullets : true,
- circular : true,
- timer : true,
- variable_height : false,
- swipe : true,
- before_slide_change : noop,
- after_slide_change : noop
- },
-
- init : function (scope, method, options) {
- var self = this;
- this.bindings(method, options);
- },
-
- events : function (instance) {
- var orbit_instance = new Orbit(this.S(instance), this.S(instance).data('orbit-init'));
- this.S(instance).data(this.name + '-instance', orbit_instance);
- },
-
- reflow : function () {
- var self = this;
-
- if (self.S(self.scope).is('[data-orbit]')) {
- var $el = self.S(self.scope);
- var instance = $el.data(self.name + '-instance');
- instance.compute_dimensions();
- } else {
- self.S('[data-orbit]', self.scope).each(function (idx, el) {
- var $el = self.S(el);
- var opts = self.data_options($el);
- var instance = $el.data(self.name + '-instance');
- instance.compute_dimensions();
- });
- }
- }
- };
-
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.offcanvas = {
- name : 'offcanvas',
-
- version : '5.5.2',
-
- settings : {
- open_method : 'move',
- close_on_click : false
- },
-
- init : function (scope, method, options) {
- this.bindings(method, options);
- },
-
- events : function () {
- var self = this,
- S = self.S,
- move_class = '',
- right_postfix = '',
- left_postfix = '';
-
- if (this.settings.open_method === 'move') {
- move_class = 'move-';
- right_postfix = 'right';
- left_postfix = 'left';
- } else if (this.settings.open_method === 'overlap_single') {
- move_class = 'offcanvas-overlap-';
- right_postfix = 'right';
- left_postfix = 'left';
- } else if (this.settings.open_method === 'overlap') {
- move_class = 'offcanvas-overlap';
- }
-
- S(this.scope).off('.offcanvas')
- .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
- self.click_toggle_class(e, move_class + right_postfix);
- if (self.settings.open_method !== 'overlap') {
- S('.left-submenu').removeClass(move_class + right_postfix);
- }
- $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
- var settings = self.get_settings(e);
- var parent = S(this).parent();
-
- if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
- self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
- parent.parent().removeClass(move_class + right_postfix);
- } else if (S(this).parent().hasClass('has-submenu')) {
- e.preventDefault();
- S(this).siblings('.left-submenu').toggleClass(move_class + right_postfix);
- } else if (parent.hasClass('back')) {
- e.preventDefault();
- parent.parent().removeClass(move_class + right_postfix);
- }
- $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
- self.click_toggle_class(e, move_class + left_postfix);
- if (self.settings.open_method !== 'overlap') {
- S('.right-submenu').removeClass(move_class + left_postfix);
- }
- $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
- var settings = self.get_settings(e);
- var parent = S(this).parent();
-
- if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
- self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
- parent.parent().removeClass(move_class + left_postfix);
- } else if (S(this).parent().hasClass('has-submenu')) {
- e.preventDefault();
- S(this).siblings('.right-submenu').toggleClass(move_class + left_postfix);
- } else if (parent.hasClass('back')) {
- e.preventDefault();
- parent.parent().removeClass(move_class + left_postfix);
- }
- $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
- self.click_remove_class(e, move_class + left_postfix);
- S('.right-submenu').removeClass(move_class + left_postfix);
- if (right_postfix) {
- self.click_remove_class(e, move_class + right_postfix);
- S('.left-submenu').removeClass(move_class + left_postfix);
- }
- $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
- })
- .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
- self.click_remove_class(e, move_class + left_postfix);
- $('.left-off-canvas-toggle').attr('aria-expanded', 'false');
- if (right_postfix) {
- self.click_remove_class(e, move_class + right_postfix);
- $('.right-off-canvas-toggle').attr('aria-expanded', 'false');
- }
- });
- },
-
- toggle : function (class_name, $off_canvas) {
- $off_canvas = $off_canvas || this.get_wrapper();
- if ($off_canvas.is('.' + class_name)) {
- this.hide(class_name, $off_canvas);
- } else {
- this.show(class_name, $off_canvas);
- }
- },
-
- show : function (class_name, $off_canvas) {
- $off_canvas = $off_canvas || this.get_wrapper();
- $off_canvas.trigger('open.fndtn.offcanvas');
- $off_canvas.addClass(class_name);
- },
-
- hide : function (class_name, $off_canvas) {
- $off_canvas = $off_canvas || this.get_wrapper();
- $off_canvas.trigger('close.fndtn.offcanvas');
- $off_canvas.removeClass(class_name);
- },
-
- click_toggle_class : function (e, class_name) {
- e.preventDefault();
- var $off_canvas = this.get_wrapper(e);
- this.toggle(class_name, $off_canvas);
- },
-
- click_remove_class : function (e, class_name) {
- e.preventDefault();
- var $off_canvas = this.get_wrapper(e);
- this.hide(class_name, $off_canvas);
- },
-
- get_settings : function (e) {
- var offcanvas = this.S(e.target).closest('[' + this.attr_name() + ']');
- return offcanvas.data(this.attr_name(true) + '-init') || this.settings;
- },
-
- get_wrapper : function (e) {
- var $off_canvas = this.S(e ? e.target : this.scope).closest('.off-canvas-wrap');
-
- if ($off_canvas.length === 0) {
- $off_canvas = this.S('.off-canvas-wrap');
- }
- return $off_canvas;
- },
-
- reflow : function () {}
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.alert = {
- name : 'alert',
-
- version : '5.5.2',
-
- settings : {
- callback : function () {}
- },
-
- init : function (scope, method, options) {
- this.bindings(method, options);
- },
-
- events : function () {
- var self = this,
- S = this.S;
-
- $(this.scope).off('.alert').on('click.fndtn.alert', '[' + this.attr_name() + '] .close', function (e) {
- var alertBox = S(this).closest('[' + self.attr_name() + ']'),
- settings = alertBox.data(self.attr_name(true) + '-init') || self.settings;
-
- e.preventDefault();
- if (Modernizr.csstransitions) {
- alertBox.addClass('alert-close');
- alertBox.on('transitionend webkitTransitionEnd oTransitionEnd', function (e) {
- S(this).trigger('close.fndtn.alert').remove();
- settings.callback();
- });
- } else {
- alertBox.fadeOut(300, function () {
- S(this).trigger('close.fndtn.alert').remove();
- settings.callback();
- });
- }
- });
- },
-
- reflow : function () {}
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.reveal = {
- name : 'reveal',
-
- version : '5.5.2',
-
- locked : false,
-
- settings : {
- animation : 'fadeAndPop',
- animation_speed : 250,
- close_on_background_click : true,
- close_on_esc : true,
- dismiss_modal_class : 'close-reveal-modal',
- multiple_opened : false,
- bg_class : 'reveal-modal-bg',
- root_element : 'body',
- open : function(){},
- opened : function(){},
- close : function(){},
- closed : function(){},
- on_ajax_error: $.noop,
- bg : $('.reveal-modal-bg'),
- css : {
- open : {
- 'opacity' : 0,
- 'visibility' : 'visible',
- 'display' : 'block'
- },
- close : {
- 'opacity' : 1,
- 'visibility' : 'hidden',
- 'display' : 'none'
- }
- }
- },
-
- init : function (scope, method, options) {
- $.extend(true, this.settings, method, options);
- this.bindings(method, options);
- },
-
- events : function (scope) {
- var self = this,
- S = self.S;
-
- S(this.scope)
- .off('.reveal')
- .on('click.fndtn.reveal', '[' + this.add_namespace('data-reveal-id') + ']:not([disabled])', function (e) {
- e.preventDefault();
-
- if (!self.locked) {
- var element = S(this),
- ajax = element.data(self.data_attr('reveal-ajax')),
- replaceContentSel = element.data(self.data_attr('reveal-replace-content'));
-
- self.locked = true;
-
- if (typeof ajax === 'undefined') {
- self.open.call(self, element);
- } else {
- var url = ajax === true ? element.attr('href') : ajax;
- self.open.call(self, element, {url : url}, { replaceContentSel : replaceContentSel });
- }
- }
- });
-
- S(document)
- .on('click.fndtn.reveal', this.close_targets(), function (e) {
- e.preventDefault();
- if (!self.locked) {
- var settings = S('[' + self.attr_name() + '].open').data(self.attr_name(true) + '-init') || self.settings,
- bg_clicked = S(e.target)[0] === S('.' + settings.bg_class)[0];
-
- if (bg_clicked) {
- if (settings.close_on_background_click) {
- e.stopPropagation();
- } else {
- return;
- }
- }
-
- self.locked = true;
- self.close.call(self, bg_clicked ? S('[' + self.attr_name() + '].open:not(.toback)') : S(this).closest('[' + self.attr_name() + ']'));
- }
- });
-
- if (S('[' + self.attr_name() + ']', this.scope).length > 0) {
- S(this.scope)
- // .off('.reveal')
- .on('open.fndtn.reveal', this.settings.open)
- .on('opened.fndtn.reveal', this.settings.opened)
- .on('opened.fndtn.reveal', this.open_video)
- .on('close.fndtn.reveal', this.settings.close)
- .on('closed.fndtn.reveal', this.settings.closed)
- .on('closed.fndtn.reveal', this.close_video);
- } else {
- S(this.scope)
- // .off('.reveal')
- .on('open.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.open)
- .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.opened)
- .on('opened.fndtn.reveal', '[' + self.attr_name() + ']', this.open_video)
- .on('close.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.close)
- .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.settings.closed)
- .on('closed.fndtn.reveal', '[' + self.attr_name() + ']', this.close_video);
- }
-
- return true;
- },
-
- // PATCH #3: turning on key up capture only when a reveal window is open
- key_up_on : function (scope) {
- var self = this;
-
- // PATCH #1: fixing multiple keyup event trigger from single key press
- self.S('body').off('keyup.fndtn.reveal').on('keyup.fndtn.reveal', function ( event ) {
- var open_modal = self.S('[' + self.attr_name() + '].open'),
- settings = open_modal.data(self.attr_name(true) + '-init') || self.settings ;
- // PATCH #2: making sure that the close event can be called only while unlocked,
- // so that multiple keyup.fndtn.reveal events don't prevent clean closing of the reveal window.
- if ( settings && event.which === 27 && settings.close_on_esc && !self.locked) { // 27 is the keycode for the Escape key
- self.close.call(self, open_modal);
- }
- });
-
- return true;
- },
-
- // PATCH #3: turning on key up capture only when a reveal window is open
- key_up_off : function (scope) {
- this.S('body').off('keyup.fndtn.reveal');
- return true;
- },
-
- open : function (target, ajax_settings) {
- var self = this,
- modal;
-
- if (target) {
- if (typeof target.selector !== 'undefined') {
- // Find the named node; only use the first one found, since the rest of the code assumes there's only one node
- modal = self.S('#' + target.data(self.data_attr('reveal-id'))).first();
- } else {
- modal = self.S(this.scope);
-
- ajax_settings = target;
- }
- } else {
- modal = self.S(this.scope);
- }
-
- var settings = modal.data(self.attr_name(true) + '-init');
- settings = settings || this.settings;
-
-
- if (modal.hasClass('open') && target.attr('data-reveal-id') == modal.attr('id')) {
- return self.close(modal);
- }
-
- if (!modal.hasClass('open')) {
- var open_modal = self.S('[' + self.attr_name() + '].open');
-
- if (typeof modal.data('css-top') === 'undefined') {
- modal.data('css-top', parseInt(modal.css('top'), 10))
- .data('offset', this.cache_offset(modal));
- }
-
- modal.attr('tabindex','0').attr('aria-hidden','false');
-
- this.key_up_on(modal); // PATCH #3: turning on key up capture only when a reveal window is open
-
- // Prevent namespace event from triggering twice
- modal.on('open.fndtn.reveal', function(e) {
- if (e.namespace !== 'fndtn.reveal') return;
- });
-
- modal.on('open.fndtn.reveal').trigger('open.fndtn.reveal');
-
- if (open_modal.length < 1) {
- this.toggle_bg(modal, true);
- }
-
- if (typeof ajax_settings === 'string') {
- ajax_settings = {
- url : ajax_settings
- };
- }
-
- if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
- if (open_modal.length > 0) {
- if (settings.multiple_opened) {
- self.to_back(open_modal);
- } else {
- self.hide(open_modal, settings.css.close);
- }
- }
-
- this.show(modal, settings.css.open);
- } else {
- var old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;
- $.extend(ajax_settings, {
- success : function (data, textStatus, jqXHR) {
- if ( $.isFunction(old_success) ) {
- var result = old_success(data, textStatus, jqXHR);
- if (typeof result == 'string') {
- data = result;
- }
- }
-
- if (typeof options !== 'undefined' && typeof options.replaceContentSel !== 'undefined') {
- modal.find(options.replaceContentSel).html(data);
- } else {
- modal.html(data);
- }
-
- self.S(modal).foundation('section', 'reflow');
- self.S(modal).children().foundation();
-
- if (open_modal.length > 0) {
- if (settings.multiple_opened) {
- self.to_back(open_modal);
- } else {
- self.hide(open_modal, settings.css.close);
- }
- }
- self.show(modal, settings.css.open);
- }
- });
-
- // check for if user initalized with error callback
- if (settings.on_ajax_error !== $.noop) {
- $.extend(ajax_settings, {
- error : settings.on_ajax_error
- });
- }
-
- $.ajax(ajax_settings);
- }
- }
- self.S(window).trigger('resize');
- },
-
- close : function (modal) {
- var modal = modal && modal.length ? modal : this.S(this.scope),
- open_modals = this.S('[' + this.attr_name() + '].open'),
- settings = modal.data(this.attr_name(true) + '-init') || this.settings,
- self = this;
-
- if (open_modals.length > 0) {
-
- modal.removeAttr('tabindex','0').attr('aria-hidden','true');
-
- this.locked = true;
- this.key_up_off(modal); // PATCH #3: turning on key up capture only when a reveal window is open
-
- modal.trigger('close.fndtn.reveal');
-
- if ((settings.multiple_opened && open_modals.length === 1) || !settings.multiple_opened || modal.length > 1) {
- self.toggle_bg(modal, false);
- self.to_front(modal);
- }
-
- if (settings.multiple_opened) {
- self.hide(modal, settings.css.close, settings);
- self.to_front($($.makeArray(open_modals).reverse()[1]));
- } else {
- self.hide(open_modals, settings.css.close, settings);
- }
- }
- },
-
- close_targets : function () {
- var base = '.' + this.settings.dismiss_modal_class;
-
- if (this.settings.close_on_background_click) {
- return base + ', .' + this.settings.bg_class;
- }
-
- return base;
- },
-
- toggle_bg : function (modal, state) {
- if (this.S('.' + this.settings.bg_class).length === 0) {
- this.settings.bg = $('', {'class': this.settings.bg_class})
- .appendTo('body').hide();
- }
-
- var visible = this.settings.bg.filter(':visible').length > 0;
- if ( state != visible ) {
- if ( state == undefined ? visible : !state ) {
- this.hide(this.settings.bg);
- } else {
- this.show(this.settings.bg);
- }
- }
- },
-
- show : function (el, css) {
- // is modal
- if (css) {
- var settings = el.data(this.attr_name(true) + '-init') || this.settings,
- root_element = settings.root_element,
- context = this;
-
- if (el.parent(root_element).length === 0) {
- var placeholder = el.wrap('').parent();
-
- el.on('closed.fndtn.reveal.wrapped', function () {
- el.detach().appendTo(placeholder);
- el.unwrap().unbind('closed.fndtn.reveal.wrapped');
- });
-
- el.detach().appendTo(root_element);
- }
-
- var animData = getAnimationData(settings.animation);
- if (!animData.animate) {
- this.locked = false;
- }
- if (animData.pop) {
- css.top = $(window).scrollTop() - el.data('offset') + 'px';
- var end_css = {
- top: $(window).scrollTop() + el.data('css-top') + 'px',
- opacity: 1
- };
-
- return setTimeout(function () {
- return el
- .css(css)
- .animate(end_css, settings.animation_speed, 'linear', function () {
- context.locked = false;
- el.trigger('opened.fndtn.reveal');
- })
- .addClass('open');
- }, settings.animation_speed / 2);
- }
-
- if (animData.fade) {
- css.top = $(window).scrollTop() + el.data('css-top') + 'px';
- var end_css = {opacity: 1};
-
- return setTimeout(function () {
- return el
- .css(css)
- .animate(end_css, settings.animation_speed, 'linear', function () {
- context.locked = false;
- el.trigger('opened.fndtn.reveal');
- })
- .addClass('open');
- }, settings.animation_speed / 2);
- }
-
- return el.css(css).show().css({opacity : 1}).addClass('open').trigger('opened.fndtn.reveal');
- }
-
- var settings = this.settings;
-
- // should we animate the background?
- if (getAnimationData(settings.animation).fade) {
- return el.fadeIn(settings.animation_speed / 2);
- }
-
- this.locked = false;
-
- return el.show();
- },
-
- to_back : function(el) {
- el.addClass('toback');
- },
-
- to_front : function(el) {
- el.removeClass('toback');
- },
-
- hide : function (el, css) {
- // is modal
- if (css) {
- var settings = el.data(this.attr_name(true) + '-init'),
- context = this;
- settings = settings || this.settings;
-
- var animData = getAnimationData(settings.animation);
- if (!animData.animate) {
- this.locked = false;
- }
- if (animData.pop) {
- var end_css = {
- top: - $(window).scrollTop() - el.data('offset') + 'px',
- opacity: 0
- };
-
- return setTimeout(function () {
- return el
- .animate(end_css, settings.animation_speed, 'linear', function () {
- context.locked = false;
- el.css(css).trigger('closed.fndtn.reveal');
- })
- .removeClass('open');
- }, settings.animation_speed / 2);
- }
-
- if (animData.fade) {
- var end_css = {opacity : 0};
-
- return setTimeout(function () {
- return el
- .animate(end_css, settings.animation_speed, 'linear', function () {
- context.locked = false;
- el.css(css).trigger('closed.fndtn.reveal');
- })
- .removeClass('open');
- }, settings.animation_speed / 2);
- }
-
- return el.hide().css(css).removeClass('open').trigger('closed.fndtn.reveal');
- }
-
- var settings = this.settings;
-
- // should we animate the background?
- if (getAnimationData(settings.animation).fade) {
- return el.fadeOut(settings.animation_speed / 2);
- }
-
- return el.hide();
- },
-
- close_video : function (e) {
- var video = $('.flex-video', e.target),
- iframe = $('iframe', video);
-
- if (iframe.length > 0) {
- iframe.attr('data-src', iframe[0].src);
- iframe.attr('src', iframe.attr('src'));
- video.hide();
- }
- },
-
- open_video : function (e) {
- var video = $('.flex-video', e.target),
- iframe = video.find('iframe');
-
- if (iframe.length > 0) {
- var data_src = iframe.attr('data-src');
- if (typeof data_src === 'string') {
- iframe[0].src = iframe.attr('data-src');
- } else {
- var src = iframe[0].src;
- iframe[0].src = undefined;
- iframe[0].src = src;
- }
- video.show();
- }
- },
-
- data_attr : function (str) {
- if (this.namespace.length > 0) {
- return this.namespace + '-' + str;
- }
-
- return str;
- },
-
- cache_offset : function (modal) {
- var offset = modal.show().height() + parseInt(modal.css('top'), 10) + modal.scrollY;
-
- modal.hide();
-
- return offset;
- },
-
- off : function () {
- $(this.scope).off('.fndtn.reveal');
- },
-
- reflow : function () {}
- };
-
- /*
- * getAnimationData('popAndFade') // {animate: true, pop: true, fade: true}
- * getAnimationData('fade') // {animate: true, pop: false, fade: true}
- * getAnimationData('pop') // {animate: true, pop: true, fade: false}
- * getAnimationData('foo') // {animate: false, pop: false, fade: false}
- * getAnimationData(null) // {animate: false, pop: false, fade: false}
- */
- function getAnimationData(str) {
- var fade = /fade/i.test(str);
- var pop = /pop/i.test(str);
- return {
- animate : fade || pop,
- pop : pop,
- fade : fade
- };
- }
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.interchange = {
- name : 'interchange',
-
- version : '5.5.2',
-
- cache : {},
-
- images_loaded : false,
- nodes_loaded : false,
-
- settings : {
- load_attr : 'interchange',
-
- named_queries : {
- 'default' : 'only screen',
- 'small' : Foundation.media_queries['small'],
- 'small-only' : Foundation.media_queries['small-only'],
- 'medium' : Foundation.media_queries['medium'],
- 'medium-only' : Foundation.media_queries['medium-only'],
- 'large' : Foundation.media_queries['large'],
- 'large-only' : Foundation.media_queries['large-only'],
- 'xlarge' : Foundation.media_queries['xlarge'],
- 'xlarge-only' : Foundation.media_queries['xlarge-only'],
- 'xxlarge' : Foundation.media_queries['xxlarge'],
- 'landscape' : 'only screen and (orientation: landscape)',
- 'portrait' : 'only screen and (orientation: portrait)',
- 'retina' : 'only screen and (-webkit-min-device-pixel-ratio: 2),' +
- 'only screen and (min--moz-device-pixel-ratio: 2),' +
- 'only screen and (-o-min-device-pixel-ratio: 2/1),' +
- 'only screen and (min-device-pixel-ratio: 2),' +
- 'only screen and (min-resolution: 192dpi),' +
- 'only screen and (min-resolution: 2dppx)'
- },
-
- directives : {
- replace : function (el, path, trigger) {
- // The trigger argument, if called within the directive, fires
- // an event named after the directive on the element, passing
- // any parameters along to the event that you pass to trigger.
- //
- // ex. trigger(), trigger([a, b, c]), or trigger(a, b, c)
- //
- // This allows you to bind a callback like so:
- // $('#interchangeContainer').on('replace', function (e, a, b, c) {
- // console.log($(this).html(), a, b, c);
- // });
-
- if (el !== null && /IMG/.test(el[0].nodeName)) {
- var orig_path = el[0].src;
-
- if (new RegExp(path, 'i').test(orig_path)) {
- return;
- }
-
- el.attr("src", path);
-
- return trigger(el[0].src);
- }
- var last_path = el.data(this.data_attr + '-last-path'),
- self = this;
-
- if (last_path == path) {
- return;
- }
-
- if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path)) {
- $(el).css('background-image', 'url(' + path + ')');
- el.data('interchange-last-path', path);
- return trigger(path);
- }
-
- return $.get(path, function (response) {
- el.html(response);
- el.data(self.data_attr + '-last-path', path);
- trigger();
- });
-
- }
- }
- },
-
- init : function (scope, method, options) {
- Foundation.inherit(this, 'throttle random_str');
-
- this.data_attr = this.set_data_attr();
- $.extend(true, this.settings, method, options);
- this.bindings(method, options);
- this.reflow();
- },
-
- get_media_hash : function () {
- var mediaHash = '';
- for (var queryName in this.settings.named_queries ) {
- mediaHash += matchMedia(this.settings.named_queries[queryName]).matches.toString();
- }
- return mediaHash;
- },
-
- events : function () {
- var self = this, prevMediaHash;
-
- $(window)
- .off('.interchange')
- .on('resize.fndtn.interchange', self.throttle(function () {
- var currMediaHash = self.get_media_hash();
- if (currMediaHash !== prevMediaHash) {
- self.resize();
- }
- prevMediaHash = currMediaHash;
- }, 50));
-
- return this;
- },
-
- resize : function () {
- var cache = this.cache;
-
- if (!this.images_loaded || !this.nodes_loaded) {
- setTimeout($.proxy(this.resize, this), 50);
- return;
- }
-
- for (var uuid in cache) {
- if (cache.hasOwnProperty(uuid)) {
- var passed = this.results(uuid, cache[uuid]);
- if (passed) {
- this.settings.directives[passed
- .scenario[1]].call(this, passed.el, passed.scenario[0], (function (passed) {
- if (arguments[0] instanceof Array) {
- var args = arguments[0];
- } else {
- var args = Array.prototype.slice.call(arguments, 0);
- }
-
- return function() {
- passed.el.trigger(passed.scenario[1], args);
- }
- }(passed)));
- }
- }
- }
-
- },
-
- results : function (uuid, scenarios) {
- var count = scenarios.length;
-
- if (count > 0) {
- var el = this.S('[' + this.add_namespace('data-uuid') + '="' + uuid + '"]');
-
- while (count--) {
- var mq, rule = scenarios[count][2];
- if (this.settings.named_queries.hasOwnProperty(rule)) {
- mq = matchMedia(this.settings.named_queries[rule]);
- } else {
- mq = matchMedia(rule);
- }
- if (mq.matches) {
- return {el : el, scenario : scenarios[count]};
- }
- }
- }
-
- return false;
- },
-
- load : function (type, force_update) {
- if (typeof this['cached_' + type] === 'undefined' || force_update) {
- this['update_' + type]();
- }
-
- return this['cached_' + type];
- },
-
- update_images : function () {
- var images = this.S('img[' + this.data_attr + ']'),
- count = images.length,
- i = count,
- loaded_count = 0,
- data_attr = this.data_attr;
-
- this.cache = {};
- this.cached_images = [];
- this.images_loaded = (count === 0);
-
- while (i--) {
- loaded_count++;
- if (images[i]) {
- var str = images[i].getAttribute(data_attr) || '';
-
- if (str.length > 0) {
- this.cached_images.push(images[i]);
- }
- }
-
- if (loaded_count === count) {
- this.images_loaded = true;
- this.enhance('images');
- }
- }
-
- return this;
- },
-
- update_nodes : function () {
- var nodes = this.S('[' + this.data_attr + ']').not('img'),
- count = nodes.length,
- i = count,
- loaded_count = 0,
- data_attr = this.data_attr;
-
- this.cached_nodes = [];
- this.nodes_loaded = (count === 0);
-
- while (i--) {
- loaded_count++;
- var str = nodes[i].getAttribute(data_attr) || '';
-
- if (str.length > 0) {
- this.cached_nodes.push(nodes[i]);
- }
-
- if (loaded_count === count) {
- this.nodes_loaded = true;
- this.enhance('nodes');
- }
- }
-
- return this;
- },
-
- enhance : function (type) {
- var i = this['cached_' + type].length;
-
- while (i--) {
- this.object($(this['cached_' + type][i]));
- }
-
- return $(window).trigger('resize.fndtn.interchange');
- },
-
- convert_directive : function (directive) {
-
- var trimmed = this.trim(directive);
-
- if (trimmed.length > 0) {
- return trimmed;
- }
-
- return 'replace';
- },
-
- parse_scenario : function (scenario) {
- // This logic had to be made more complex since some users were using commas in the url path
- // So we cannot simply just split on a comma
-
- var directive_match = scenario[0].match(/(.+),\s*(\w+)\s*$/),
- // getting the mq has gotten a bit complicated since we started accounting for several use cases
- // of URLs. For now we'll continue to match these scenarios, but we may consider having these scenarios
- // as nested objects or arrays in F6.
- // regex: match everything before close parenthesis for mq
- media_query = scenario[1].match(/(.*)\)/);
-
- if (directive_match) {
- var path = directive_match[1],
- directive = directive_match[2];
-
- } else {
- var cached_split = scenario[0].split(/,\s*$/),
- path = cached_split[0],
- directive = '';
- }
-
- return [this.trim(path), this.convert_directive(directive), this.trim(media_query[1])];
- },
-
- object : function (el) {
- var raw_arr = this.parse_data_attr(el),
- scenarios = [],
- i = raw_arr.length;
-
- if (i > 0) {
- while (i--) {
- // split array between comma delimited content and mq
- // regex: comma, optional space, open parenthesis
- var scenario = raw_arr[i].split(/,\s?\(/);
-
- if (scenario.length > 1) {
- var params = this.parse_scenario(scenario);
- scenarios.push(params);
- }
- }
- }
-
- return this.store(el, scenarios);
- },
-
- store : function (el, scenarios) {
- var uuid = this.random_str(),
- current_uuid = el.data(this.add_namespace('uuid', true));
-
- if (this.cache[current_uuid]) {
- return this.cache[current_uuid];
- }
-
- el.attr(this.add_namespace('data-uuid'), uuid);
- return this.cache[uuid] = scenarios;
- },
-
- trim : function (str) {
-
- if (typeof str === 'string') {
- return $.trim(str);
- }
-
- return str;
- },
-
- set_data_attr : function (init) {
- if (init) {
- if (this.namespace.length > 0) {
- return this.namespace + '-' + this.settings.load_attr;
- }
-
- return this.settings.load_attr;
- }
-
- if (this.namespace.length > 0) {
- return 'data-' + this.namespace + '-' + this.settings.load_attr;
- }
-
- return 'data-' + this.settings.load_attr;
- },
-
- parse_data_attr : function (el) {
- var raw = el.attr(this.attr_name()).split(/\[(.*?)\]/),
- i = raw.length,
- output = [];
-
- while (i--) {
- if (raw[i].replace(/[\W\d]+/, '').length > 4) {
- output.push(raw[i]);
- }
- }
-
- return output;
- },
-
- reflow : function () {
- this.load('images', true);
- this.load('nodes', true);
- }
-
- };
-
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs['magellan-expedition'] = {
- name : 'magellan-expedition',
-
- version : '5.5.2',
-
- settings : {
- active_class : 'active',
- threshold : 0, // pixels from the top of the expedition for it to become fixes
- destination_threshold : 20, // pixels from the top of destination for it to be considered active
- throttle_delay : 30, // calculation throttling to increase framerate
- fixed_top : 0, // top distance in pixels assigend to the fixed element on scroll
- offset_by_height : true, // whether to offset the destination by the expedition height. Usually you want this to be true, unless your expedition is on the side.
- duration : 700, // animation duration time
- easing : 'swing' // animation easing
- },
-
- init : function (scope, method, options) {
- Foundation.inherit(this, 'throttle');
- this.bindings(method, options);
- },
-
- events : function () {
- var self = this,
- S = self.S,
- settings = self.settings;
-
- // initialize expedition offset
- self.set_expedition_position();
-
- S(self.scope)
- .off('.magellan')
- .on('click.fndtn.magellan', '[' + self.add_namespace('data-magellan-arrival') + '] a[href*=#]', function (e) {
- var sameHost = ((this.hostname === location.hostname) || !this.hostname),
- samePath = self.filterPathname(location.pathname) === self.filterPathname(this.pathname),
- testHash = this.hash.replace(/(:|\.|\/)/g, '\\$1'),
- anchor = this;
-
- if (sameHost && samePath && testHash) {
- e.preventDefault();
- var expedition = $(this).closest('[' + self.attr_name() + ']'),
- settings = expedition.data('magellan-expedition-init'),
- hash = this.hash.split('#').join(''),
- target = $('a[name="' + hash + '"]');
-
- if (target.length === 0) {
- target = $('#' + hash);
-
- }
-
- // Account for expedition height if fixed position
- var scroll_top = target.offset().top - settings.destination_threshold + 1;
- if (settings.offset_by_height) {
- scroll_top = scroll_top - expedition.outerHeight();
- }
- $('html, body').stop().animate({
- 'scrollTop' : scroll_top
- }, settings.duration, settings.easing, function () {
- if (history.pushState) {
- history.pushState(null, null, anchor.pathname + '#' + hash);
- }
- else {
- location.hash = anchor.pathname + '#' + hash;
- }
- });
- }
- })
- .on('scroll.fndtn.magellan', self.throttle(this.check_for_arrivals.bind(this), settings.throttle_delay));
- },
-
- check_for_arrivals : function () {
- var self = this;
- self.update_arrivals();
- self.update_expedition_positions();
- },
-
- set_expedition_position : function () {
- var self = this;
- $('[' + this.attr_name() + '=fixed]', self.scope).each(function (idx, el) {
- var expedition = $(this),
- settings = expedition.data('magellan-expedition-init'),
- styles = expedition.attr('styles'), // save styles
- top_offset, fixed_top;
-
- expedition.attr('style', '');
- top_offset = expedition.offset().top + settings.threshold;
-
- //set fixed-top by attribute
- fixed_top = parseInt(expedition.data('magellan-fixed-top'));
- if (!isNaN(fixed_top)) {
- self.settings.fixed_top = fixed_top;
- }
-
- expedition.data(self.data_attr('magellan-top-offset'), top_offset);
- expedition.attr('style', styles);
- });
- },
-
- update_expedition_positions : function () {
- var self = this,
- window_top_offset = $(window).scrollTop();
-
- $('[' + this.attr_name() + '=fixed]', self.scope).each(function () {
- var expedition = $(this),
- settings = expedition.data('magellan-expedition-init'),
- styles = expedition.attr('style'), // save styles
- top_offset = expedition.data('magellan-top-offset');
-
- //scroll to the top distance
- if (window_top_offset + self.settings.fixed_top >= top_offset) {
- // Placeholder allows height calculations to be consistent even when
- // appearing to switch between fixed/non-fixed placement
- var placeholder = expedition.prev('[' + self.add_namespace('data-magellan-expedition-clone') + ']');
- if (placeholder.length === 0) {
- placeholder = expedition.clone();
- placeholder.removeAttr(self.attr_name());
- placeholder.attr(self.add_namespace('data-magellan-expedition-clone'), '');
- expedition.before(placeholder);
- }
- expedition.css({position :'fixed', top : settings.fixed_top}).addClass('fixed');
- } else {
- expedition.prev('[' + self.add_namespace('data-magellan-expedition-clone') + ']').remove();
- expedition.attr('style', styles).css('position', '').css('top', '').removeClass('fixed');
- }
- });
- },
-
- update_arrivals : function () {
- var self = this,
- window_top_offset = $(window).scrollTop();
-
- $('[' + this.attr_name() + ']', self.scope).each(function () {
- var expedition = $(this),
- settings = expedition.data(self.attr_name(true) + '-init'),
- offsets = self.offsets(expedition, window_top_offset),
- arrivals = expedition.find('[' + self.add_namespace('data-magellan-arrival') + ']'),
- active_item = false;
- offsets.each(function (idx, item) {
- if (item.viewport_offset >= item.top_offset) {
- var arrivals = expedition.find('[' + self.add_namespace('data-magellan-arrival') + ']');
- arrivals.not(item.arrival).removeClass(settings.active_class);
- item.arrival.addClass(settings.active_class);
- active_item = true;
- return true;
- }
- });
-
- if (!active_item) {
- arrivals.removeClass(settings.active_class);
- }
- });
- },
-
- offsets : function (expedition, window_offset) {
- var self = this,
- settings = expedition.data(self.attr_name(true) + '-init'),
- viewport_offset = window_offset;
-
- return expedition.find('[' + self.add_namespace('data-magellan-arrival') + ']').map(function (idx, el) {
- var name = $(this).data(self.data_attr('magellan-arrival')),
- dest = $('[' + self.add_namespace('data-magellan-destination') + '=' + name + ']');
- if (dest.length > 0) {
- var top_offset = dest.offset().top - settings.destination_threshold;
- if (settings.offset_by_height) {
- top_offset = top_offset - expedition.outerHeight();
- }
- top_offset = Math.floor(top_offset);
- return {
- destination : dest,
- arrival : $(this),
- top_offset : top_offset,
- viewport_offset : viewport_offset
- }
- }
- }).sort(function (a, b) {
- if (a.top_offset < b.top_offset) {
- return -1;
- }
- if (a.top_offset > b.top_offset) {
- return 1;
- }
- return 0;
- });
- },
-
- data_attr : function (str) {
- if (this.namespace.length > 0) {
- return this.namespace + '-' + str;
- }
-
- return str;
- },
-
- off : function () {
- this.S(this.scope).off('.magellan');
- this.S(window).off('.magellan');
- },
-
- filterPathname : function (pathname) {
- pathname = pathname || '';
- return pathname
- .replace(/^\//,'')
- .replace(/(?:index|default).[a-zA-Z]{3,4}$/,'')
- .replace(/\/$/,'');
- },
-
- reflow : function () {
- var self = this;
- // remove placeholder expeditions used for height calculation purposes
- $('[' + self.add_namespace('data-magellan-expedition-clone') + ']', self.scope).remove();
- }
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.accordion = {
- name : 'accordion',
-
- version : '5.5.2',
-
- settings : {
- content_class : 'content',
- active_class : 'active',
- multi_expand : false,
- toggleable : true,
- callback : function () {}
- },
-
- init : function (scope, method, options) {
- this.bindings(method, options);
- },
-
- events : function (instance) {
- var self = this;
- var S = this.S;
- self.create(this.S(instance));
-
- S(this.scope)
- .off('.fndtn.accordion')
- .on('click.fndtn.accordion', '[' + this.attr_name() + '] > dd > a, [' + this.attr_name() + '] > li > a', function (e) {
- var accordion = S(this).closest('[' + self.attr_name() + ']'),
- groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
- settings = accordion.data(self.attr_name(true) + '-init') || self.settings,
- target = S('#' + this.href.split('#')[1]),
- aunts = $('> dd, > li', accordion),
- siblings = aunts.children('.' + settings.content_class),
- active_content = siblings.filter('.' + settings.active_class);
-
- e.preventDefault();
-
- if (accordion.attr(self.attr_name())) {
- siblings = siblings.add('[' + groupSelector + '] dd > ' + '.' + settings.content_class + ', [' + groupSelector + '] li > ' + '.' + settings.content_class);
- aunts = aunts.add('[' + groupSelector + '] dd, [' + groupSelector + '] li');
- }
-
- if (settings.toggleable && target.is(active_content)) {
- target.parent('dd, li').toggleClass(settings.active_class, false);
- target.toggleClass(settings.active_class, false);
- S(this).attr('aria-expanded', function(i, attr){
- return attr === 'true' ? 'false' : 'true';
- });
- settings.callback(target);
- target.triggerHandler('toggled', [accordion]);
- accordion.triggerHandler('toggled', [target]);
- return;
- }
-
- if (!settings.multi_expand) {
- siblings.removeClass(settings.active_class);
- aunts.removeClass(settings.active_class);
- aunts.children('a').attr('aria-expanded','false');
- }
-
- target.addClass(settings.active_class).parent().addClass(settings.active_class);
- settings.callback(target);
- target.triggerHandler('toggled', [accordion]);
- accordion.triggerHandler('toggled', [target]);
- S(this).attr('aria-expanded','true');
- });
- },
-
- create: function($instance) {
- var self = this,
- accordion = $instance,
- aunts = $('> .accordion-navigation', accordion),
- settings = accordion.data(self.attr_name(true) + '-init') || self.settings;
-
- aunts.children('a').attr('aria-expanded','false');
- aunts.has('.' + settings.content_class + '.' + settings.active_class).children('a').attr('aria-expanded','true');
-
- if (settings.multi_expand) {
- $instance.attr('aria-multiselectable','true');
- }
- },
-
- off : function () {},
-
- reflow : function () {}
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.topbar = {
- name : 'topbar',
-
- version : '5.5.2',
-
- settings : {
- index : 0,
- start_offset : 0,
- sticky_class : 'sticky',
- custom_back_text : true,
- back_text : 'Back',
- mobile_show_parent_link : true,
- is_hover : true,
- scrolltop : true, // jump to top when sticky nav menu toggle is clicked
- sticky_on : 'all',
- dropdown_autoclose: true
- },
-
- init : function (section, method, options) {
- Foundation.inherit(this, 'add_custom_rule register_media throttle');
- var self = this;
-
- self.register_media('topbar', 'foundation-mq-topbar');
-
- this.bindings(method, options);
-
- self.S('[' + this.attr_name() + ']', this.scope).each(function () {
- var topbar = $(this),
- settings = topbar.data(self.attr_name(true) + '-init'),
- section = self.S('section, .top-bar-section', this);
- topbar.data('index', 0);
- var topbarContainer = topbar.parent();
- if (topbarContainer.hasClass('fixed') || self.is_sticky(topbar, topbarContainer, settings) ) {
- self.settings.sticky_class = settings.sticky_class;
- self.settings.sticky_topbar = topbar;
- topbar.data('height', topbarContainer.outerHeight());
- topbar.data('stickyoffset', topbarContainer.offset().top);
- } else {
- topbar.data('height', topbar.outerHeight());
- }
-
- if (!settings.assembled) {
- self.assemble(topbar);
- }
-
- if (settings.is_hover) {
- self.S('.has-dropdown', topbar).addClass('not-click');
- } else {
- self.S('.has-dropdown', topbar).removeClass('not-click');
- }
-
- // Pad body when sticky (scrolled) or fixed.
- self.add_custom_rule('.f-topbar-fixed { padding-top: ' + topbar.data('height') + 'px }');
-
- if (topbarContainer.hasClass('fixed')) {
- self.S('body').addClass('f-topbar-fixed');
- }
- });
-
- },
-
- is_sticky : function (topbar, topbarContainer, settings) {
- var sticky = topbarContainer.hasClass(settings.sticky_class);
- var smallMatch = matchMedia(Foundation.media_queries.small).matches;
- var medMatch = matchMedia(Foundation.media_queries.medium).matches;
- var lrgMatch = matchMedia(Foundation.media_queries.large).matches;
-
- if (sticky && settings.sticky_on === 'all') {
- return true;
- }
- if (sticky && this.small() && settings.sticky_on.indexOf('small') !== -1) {
- if (smallMatch && !medMatch && !lrgMatch) { return true; }
- }
- if (sticky && this.medium() && settings.sticky_on.indexOf('medium') !== -1) {
- if (smallMatch && medMatch && !lrgMatch) { return true; }
- }
- if (sticky && this.large() && settings.sticky_on.indexOf('large') !== -1) {
- if (smallMatch && medMatch && lrgMatch) { return true; }
- }
-
- return false;
- },
-
- toggle : function (toggleEl) {
- var self = this,
- topbar;
-
- if (toggleEl) {
- topbar = self.S(toggleEl).closest('[' + this.attr_name() + ']');
- } else {
- topbar = self.S('[' + this.attr_name() + ']');
- }
-
- var settings = topbar.data(this.attr_name(true) + '-init');
-
- var section = self.S('section, .top-bar-section', topbar);
-
- if (self.breakpoint()) {
- if (!self.rtl) {
- section.css({left : '0%'});
- $('>.name', section).css({left : '100%'});
- } else {
- section.css({right : '0%'});
- $('>.name', section).css({right : '100%'});
- }
-
- self.S('li.moved', section).removeClass('moved');
- topbar.data('index', 0);
-
- topbar
- .toggleClass('expanded')
- .css('height', '');
- }
-
- if (settings.scrolltop) {
- if (!topbar.hasClass('expanded')) {
- if (topbar.hasClass('fixed')) {
- topbar.parent().addClass('fixed');
- topbar.removeClass('fixed');
- self.S('body').addClass('f-topbar-fixed');
- }
- } else if (topbar.parent().hasClass('fixed')) {
- if (settings.scrolltop) {
- topbar.parent().removeClass('fixed');
- topbar.addClass('fixed');
- self.S('body').removeClass('f-topbar-fixed');
-
- window.scrollTo(0, 0);
- } else {
- topbar.parent().removeClass('expanded');
- }
- }
- } else {
- if (self.is_sticky(topbar, topbar.parent(), settings)) {
- topbar.parent().addClass('fixed');
- }
-
- if (topbar.parent().hasClass('fixed')) {
- if (!topbar.hasClass('expanded')) {
- topbar.removeClass('fixed');
- topbar.parent().removeClass('expanded');
- self.update_sticky_positioning();
- } else {
- topbar.addClass('fixed');
- topbar.parent().addClass('expanded');
- self.S('body').addClass('f-topbar-fixed');
- }
- }
- }
- },
-
- timer : null,
-
- events : function (bar) {
- var self = this,
- S = this.S;
-
- S(this.scope)
- .off('.topbar')
- .on('click.fndtn.topbar', '[' + this.attr_name() + '] .toggle-topbar', function (e) {
- e.preventDefault();
- self.toggle(this);
- })
- .on('click.fndtn.topbar contextmenu.fndtn.topbar', '.top-bar .top-bar-section li a[href^="#"],[' + this.attr_name() + '] .top-bar-section li a[href^="#"]', function (e) {
- var li = $(this).closest('li'),
- topbar = li.closest('[' + self.attr_name() + ']'),
- settings = topbar.data(self.attr_name(true) + '-init');
-
- if (settings.dropdown_autoclose && settings.is_hover) {
- var hoverLi = $(this).closest('.hover');
- hoverLi.removeClass('hover');
- }
- if (self.breakpoint() && !li.hasClass('back') && !li.hasClass('has-dropdown')) {
- self.toggle();
- }
-
- })
- .on('click.fndtn.topbar', '[' + this.attr_name() + '] li.has-dropdown', function (e) {
- var li = S(this),
- target = S(e.target),
- topbar = li.closest('[' + self.attr_name() + ']'),
- settings = topbar.data(self.attr_name(true) + '-init');
-
- if (target.data('revealId')) {
- self.toggle();
- return;
- }
-
- if (self.breakpoint()) {
- return;
- }
-
- if (settings.is_hover && !Modernizr.touch) {
- return;
- }
-
- e.stopImmediatePropagation();
-
- if (li.hasClass('hover')) {
- li
- .removeClass('hover')
- .find('li')
- .removeClass('hover');
-
- li.parents('li.hover')
- .removeClass('hover');
- } else {
- li.addClass('hover');
-
- $(li).siblings().removeClass('hover');
-
- if (target[0].nodeName === 'A' && target.parent().hasClass('has-dropdown')) {
- e.preventDefault();
- }
- }
- })
- .on('click.fndtn.topbar', '[' + this.attr_name() + '] .has-dropdown>a', function (e) {
- if (self.breakpoint()) {
-
- e.preventDefault();
-
- var $this = S(this),
- topbar = $this.closest('[' + self.attr_name() + ']'),
- section = topbar.find('section, .top-bar-section'),
- dropdownHeight = $this.next('.dropdown').outerHeight(),
- $selectedLi = $this.closest('li');
-
- topbar.data('index', topbar.data('index') + 1);
- $selectedLi.addClass('moved');
-
- if (!self.rtl) {
- section.css({left : -(100 * topbar.data('index')) + '%'});
- section.find('>.name').css({left : 100 * topbar.data('index') + '%'});
- } else {
- section.css({right : -(100 * topbar.data('index')) + '%'});
- section.find('>.name').css({right : 100 * topbar.data('index') + '%'});
- }
-
- topbar.css('height', $this.siblings('ul').outerHeight(true) + topbar.data('height'));
- }
- });
-
- S(window).off('.topbar').on('resize.fndtn.topbar', self.throttle(function () {
- self.resize.call(self);
- }, 50)).trigger('resize.fndtn.topbar').load(function () {
- // Ensure that the offset is calculated after all of the pages resources have loaded
- S(this).trigger('resize.fndtn.topbar');
- });
-
- S('body').off('.topbar').on('click.fndtn.topbar', function (e) {
- var parent = S(e.target).closest('li').closest('li.hover');
-
- if (parent.length > 0) {
- return;
- }
-
- S('[' + self.attr_name() + '] li.hover').removeClass('hover');
- });
-
- // Go up a level on Click
- S(this.scope).on('click.fndtn.topbar', '[' + this.attr_name() + '] .has-dropdown .back', function (e) {
- e.preventDefault();
-
- var $this = S(this),
- topbar = $this.closest('[' + self.attr_name() + ']'),
- section = topbar.find('section, .top-bar-section'),
- settings = topbar.data(self.attr_name(true) + '-init'),
- $movedLi = $this.closest('li.moved'),
- $previousLevelUl = $movedLi.parent();
-
- topbar.data('index', topbar.data('index') - 1);
-
- if (!self.rtl) {
- section.css({left : -(100 * topbar.data('index')) + '%'});
- section.find('>.name').css({left : 100 * topbar.data('index') + '%'});
- } else {
- section.css({right : -(100 * topbar.data('index')) + '%'});
- section.find('>.name').css({right : 100 * topbar.data('index') + '%'});
- }
-
- if (topbar.data('index') === 0) {
- topbar.css('height', '');
- } else {
- topbar.css('height', $previousLevelUl.outerHeight(true) + topbar.data('height'));
- }
-
- setTimeout(function () {
- $movedLi.removeClass('moved');
- }, 300);
- });
-
- // Show dropdown menus when their items are focused
- S(this.scope).find('.dropdown a')
- .focus(function () {
- $(this).parents('.has-dropdown').addClass('hover');
- })
- .blur(function () {
- $(this).parents('.has-dropdown').removeClass('hover');
- });
- },
-
- resize : function () {
- var self = this;
- self.S('[' + this.attr_name() + ']').each(function () {
- var topbar = self.S(this),
- settings = topbar.data(self.attr_name(true) + '-init');
-
- var stickyContainer = topbar.parent('.' + self.settings.sticky_class);
- var stickyOffset;
-
- if (!self.breakpoint()) {
- var doToggle = topbar.hasClass('expanded');
- topbar
- .css('height', '')
- .removeClass('expanded')
- .find('li')
- .removeClass('hover');
-
- if (doToggle) {
- self.toggle(topbar);
- }
- }
-
- if (self.is_sticky(topbar, stickyContainer, settings)) {
- if (stickyContainer.hasClass('fixed')) {
- // Remove the fixed to allow for correct calculation of the offset.
- stickyContainer.removeClass('fixed');
-
- stickyOffset = stickyContainer.offset().top;
- if (self.S(document.body).hasClass('f-topbar-fixed')) {
- stickyOffset -= topbar.data('height');
- }
-
- topbar.data('stickyoffset', stickyOffset);
- stickyContainer.addClass('fixed');
- } else {
- stickyOffset = stickyContainer.offset().top;
- topbar.data('stickyoffset', stickyOffset);
- }
- }
-
- });
- },
-
- breakpoint : function () {
- return !matchMedia(Foundation.media_queries['topbar']).matches;
- },
-
- small : function () {
- return matchMedia(Foundation.media_queries['small']).matches;
- },
-
- medium : function () {
- return matchMedia(Foundation.media_queries['medium']).matches;
- },
-
- large : function () {
- return matchMedia(Foundation.media_queries['large']).matches;
- },
-
- assemble : function (topbar) {
- var self = this,
- settings = topbar.data(this.attr_name(true) + '-init'),
- section = self.S('section, .top-bar-section', topbar);
-
- // Pull element out of the DOM for manipulation
- section.detach();
-
- self.S('.has-dropdown>a', section).each(function () {
- var $link = self.S(this),
- $dropdown = $link.siblings('.dropdown'),
- url = $link.attr('href'),
- $titleLi;
-
- if (!$dropdown.find('.title.back').length) {
-
- if (settings.mobile_show_parent_link == true && url) {
- $titleLi = $('
- ' + $link.html() +'
');
- } else {
- $titleLi = $('
');
- }
-
- // Copy link to subnav
- if (settings.custom_back_text == true) {
- $('h5>a', $titleLi).html(settings.back_text);
- } else {
- $('h5>a', $titleLi).html('« ' + $link.html());
- }
- $dropdown.prepend($titleLi);
- }
- });
-
- // Put element back in the DOM
- section.appendTo(topbar);
-
- // check for sticky
- this.sticky();
-
- this.assembled(topbar);
- },
-
- assembled : function (topbar) {
- topbar.data(this.attr_name(true), $.extend({}, topbar.data(this.attr_name(true)), {assembled : true}));
- },
-
- height : function (ul) {
- var total = 0,
- self = this;
-
- $('> li', ul).each(function () {
- total += self.S(this).outerHeight(true);
- });
-
- return total;
- },
-
- sticky : function () {
- var self = this;
-
- this.S(window).on('scroll', function () {
- self.update_sticky_positioning();
- });
- },
-
- update_sticky_positioning : function () {
- var klass = '.' + this.settings.sticky_class,
- $window = this.S(window),
- self = this;
-
- if (self.settings.sticky_topbar && self.is_sticky(this.settings.sticky_topbar,this.settings.sticky_topbar.parent(), this.settings)) {
- var distance = this.settings.sticky_topbar.data('stickyoffset') + this.settings.start_offset;
- if (!self.S(klass).hasClass('expanded')) {
- if ($window.scrollTop() > (distance)) {
- if (!self.S(klass).hasClass('fixed')) {
- self.S(klass).addClass('fixed');
- self.S('body').addClass('f-topbar-fixed');
- }
- } else if ($window.scrollTop() <= distance) {
- if (self.S(klass).hasClass('fixed')) {
- self.S(klass).removeClass('fixed');
- self.S('body').removeClass('f-topbar-fixed');
- }
- }
- }
- }
- },
-
- off : function () {
- this.S(this.scope).off('.fndtn.topbar');
- this.S(window).off('.fndtn.topbar');
- },
-
- reflow : function () {}
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.tab = {
- name : 'tab',
-
- version : '5.5.2',
-
- settings : {
- active_class : 'active',
- callback : function () {},
- deep_linking : false,
- scroll_to_content : true,
- is_hover : false
- },
-
- default_tab_hashes : [],
-
- init : function (scope, method, options) {
- var self = this,
- S = this.S;
-
- // Store the default active tabs which will be referenced when the
- // location hash is absent, as in the case of navigating the tabs and
- // returning to the first viewing via the browser Back button.
- S('[' + this.attr_name() + '] > .active > a', this.scope).each(function () {
- self.default_tab_hashes.push(this.hash);
- });
-
- // store the initial href, which is used to allow correct behaviour of the
- // browser back button when deep linking is turned on.
- self.entry_location = window.location.href;
-
- this.bindings(method, options);
- this.handle_location_hash_change();
- },
-
- events : function () {
- var self = this,
- S = this.S;
-
- var usual_tab_behavior = function (e, target) {
- var settings = S(target).closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init');
- if (!settings.is_hover || Modernizr.touch) {
- e.preventDefault();
- e.stopPropagation();
- self.toggle_active_tab(S(target).parent());
- }
- };
-
- S(this.scope)
- .off('.tab')
- // Key event: focus/tab key
- .on('keydown.fndtn.tab', '[' + this.attr_name() + '] > * > a', function(e) {
- var el = this;
- var keyCode = e.keyCode || e.which;
- // if user pressed tab key
- if (keyCode == 9) {
- e.preventDefault();
- // TODO: Change usual_tab_behavior into accessibility function?
- usual_tab_behavior(e, el);
- }
- })
- // Click event: tab title
- .on('click.fndtn.tab', '[' + this.attr_name() + '] > * > a', function(e) {
- var el = this;
- usual_tab_behavior(e, el);
- })
- // Hover event: tab title
- .on('mouseenter.fndtn.tab', '[' + this.attr_name() + '] > * > a', function (e) {
- var settings = S(this).closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init');
- if (settings.is_hover) {
- self.toggle_active_tab(S(this).parent());
- }
- });
-
- // Location hash change event
- S(window).on('hashchange.fndtn.tab', function (e) {
- e.preventDefault();
- self.handle_location_hash_change();
- });
- },
-
- handle_location_hash_change : function () {
-
- var self = this,
- S = this.S;
-
- S('[' + this.attr_name() + ']', this.scope).each(function () {
- var settings = S(this).data(self.attr_name(true) + '-init');
- if (settings.deep_linking) {
- // Match the location hash to a label
- var hash;
- if (settings.scroll_to_content) {
- hash = self.scope.location.hash;
- } else {
- // prefix the hash to prevent anchor scrolling
- hash = self.scope.location.hash.replace('fndtn-', '');
- }
- if (hash != '') {
- // Check whether the location hash references a tab content div or
- // another element on the page (inside or outside the tab content div)
- var hash_element = S(hash);
- if (hash_element.hasClass('content') && hash_element.parent().hasClass('tabs-content')) {
- // Tab content div
- self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=' + hash + ']').parent());
- } else {
- // Not the tab content div. If inside the tab content, find the
- // containing tab and toggle it as active.
- var hash_tab_container_id = hash_element.closest('.content').attr('id');
- if (hash_tab_container_id != undefined) {
- self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=#' + hash_tab_container_id + ']').parent(), hash);
- }
- }
- } else {
- // Reference the default tab hashes which were initialized in the init function
- for (var ind = 0; ind < self.default_tab_hashes.length; ind++) {
- self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=' + self.default_tab_hashes[ind] + ']').parent());
- }
- }
- }
- });
- },
-
- toggle_active_tab : function (tab, location_hash) {
- var self = this,
- S = self.S,
- tabs = tab.closest('[' + this.attr_name() + ']'),
- tab_link = tab.find('a'),
- anchor = tab.children('a').first(),
- target_hash = '#' + anchor.attr('href').split('#')[1],
- target = S(target_hash),
- siblings = tab.siblings(),
- settings = tabs.data(this.attr_name(true) + '-init'),
- interpret_keyup_action = function (e) {
- // Light modification of Heydon Pickering's Practical ARIA Examples: http://heydonworks.com/practical_aria_examples/js/a11y.js
-
- // define current, previous and next (possible) tabs
-
- var $original = $(this);
- var $prev = $(this).parents('li').prev().children('[role="tab"]');
- var $next = $(this).parents('li').next().children('[role="tab"]');
- var $target;
-
- // find the direction (prev or next)
-
- switch (e.keyCode) {
- case 37:
- $target = $prev;
- break;
- case 39:
- $target = $next;
- break;
- default:
- $target = false
- break;
- }
-
- if ($target.length) {
- $original.attr({
- 'tabindex' : '-1',
- 'aria-selected' : null
- });
- $target.attr({
- 'tabindex' : '0',
- 'aria-selected' : true
- }).focus();
- }
-
- // Hide panels
-
- $('[role="tabpanel"]')
- .attr('aria-hidden', 'true');
-
- // Show panel which corresponds to target
-
- $('#' + $(document.activeElement).attr('href').substring(1))
- .attr('aria-hidden', null);
-
- },
- go_to_hash = function(hash) {
- // This function allows correct behaviour of the browser's back button when deep linking is enabled. Without it
- // the user would get continually redirected to the default hash.
- var is_entry_location = window.location.href === self.entry_location,
- default_hash = settings.scroll_to_content ? self.default_tab_hashes[0] : is_entry_location ? window.location.hash :'fndtn-' + self.default_tab_hashes[0].replace('#', '')
-
- if (!(is_entry_location && hash === default_hash)) {
- window.location.hash = hash;
- }
- };
-
- // allow usage of data-tab-content attribute instead of href
- if (anchor.data('tab-content')) {
- target_hash = '#' + anchor.data('tab-content').split('#')[1];
- target = S(target_hash);
- }
-
- if (settings.deep_linking) {
-
- if (settings.scroll_to_content) {
-
- // retain current hash to scroll to content
- go_to_hash(location_hash || target_hash);
-
- if (location_hash == undefined || location_hash == target_hash) {
- tab.parent()[0].scrollIntoView();
- } else {
- S(target_hash)[0].scrollIntoView();
- }
- } else {
- // prefix the hashes so that the browser doesn't scroll down
- if (location_hash != undefined) {
- go_to_hash('fndtn-' + location_hash.replace('#', ''));
- } else {
- go_to_hash('fndtn-' + target_hash.replace('#', ''));
- }
- }
- }
-
- // WARNING: The activation and deactivation of the tab content must
- // occur after the deep linking in order to properly refresh the browser
- // window (notably in Chrome).
- // Clean up multiple attr instances to done once
- tab.addClass(settings.active_class).triggerHandler('opened');
- tab_link.attr({'aria-selected' : 'true', tabindex : 0});
- siblings.removeClass(settings.active_class)
- siblings.find('a').attr({'aria-selected' : 'false', tabindex : -1});
- target.siblings().removeClass(settings.active_class).attr({'aria-hidden' : 'true', tabindex : -1});
- target.addClass(settings.active_class).attr('aria-hidden', 'false').removeAttr('tabindex');
- settings.callback(tab);
- target.triggerHandler('toggled', [target]);
- tabs.triggerHandler('toggled', [tab]);
-
- tab_link.off('keydown').on('keydown', interpret_keyup_action );
- },
-
- data_attr : function (str) {
- if (this.namespace.length > 0) {
- return this.namespace + '-' + str;
- }
-
- return str;
- },
-
- off : function () {},
-
- reflow : function () {}
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.abide = {
- name : 'abide',
-
- version : '5.5.2',
-
- settings : {
- live_validate : true,
- validate_on_blur : true,
- // validate_on: 'tab', // tab (when user tabs between fields), change (input changes), manual (call custom events)
- focus_on_invalid : true,
- error_labels : true, // labels with a for="inputId" will recieve an `error` class
- error_class : 'error',
- timeout : 1000,
- patterns : {
- alpha : /^[a-zA-Z]+$/,
- alpha_numeric : /^[a-zA-Z0-9]+$/,
- integer : /^[-+]?\d+$/,
- number : /^[-+]?\d*(?:[\.\,]\d+)?$/,
-
- // amex, visa, diners
- card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
- cvv : /^([0-9]){3,4}$/,
-
- // http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
- email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
-
- // http://blogs.lse.ac.uk/lti/2008/04/23/a-regular-expression-to-match-any-url/
- url: /^(https?|ftp|file|ssh):\/\/([-;:&=\+\$,\w]+@{1})?([-A-Za-z0-9\.]+)+:?(\d+)?((\/[-\+~%\/\.\w]+)?\??([-\+=&;%@\.\w]+)?#?([\w]+)?)?/,
- // abc.de
- domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
-
- datetime : /^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,
- // YYYY-MM-DD
- date : /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,
- // HH:MM:SS
- time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
- dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
- // MM/DD/YYYY
- month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
- // DD/MM/YYYY
- day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
-
- // #FFF or #FFFFFF
- color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
- },
- validators : {
- equalTo : function (el, required, parent) {
- var from = document.getElementById(el.getAttribute(this.add_namespace('data-equalto'))).value,
- to = el.value,
- valid = (from === to);
-
- return valid;
- }
- }
- },
-
- timer : null,
-
- init : function (scope, method, options) {
- this.bindings(method, options);
- },
-
- events : function (scope) {
- var self = this,
- form = self.S(scope).attr('novalidate', 'novalidate'),
- settings = form.data(this.attr_name(true) + '-init') || {};
-
- this.invalid_attr = this.add_namespace('data-invalid');
-
- function validate(originalSelf, e) {
- clearTimeout(self.timer);
- self.timer = setTimeout(function () {
- self.validate([originalSelf], e);
- }.bind(originalSelf), settings.timeout);
- }
-
-
- form
- .off('.abide')
- .on('submit.fndtn.abide', function (e) {
- var is_ajax = /ajax/i.test(self.S(this).attr(self.attr_name()));
- return self.validate(self.S(this).find('input, textarea, select').not(":hidden, [data-abide-ignore]").get(), e, is_ajax);
- })
- .on('validate.fndtn.abide', function (e) {
- if (settings.validate_on === 'manual') {
- self.validate([e.target], e);
- }
- })
- .on('reset', function (e) {
- return self.reset($(this), e);
- })
- .find('input, textarea, select').not(":hidden, [data-abide-ignore]")
- .off('.abide')
- .on('blur.fndtn.abide change.fndtn.abide', function (e) {
- // old settings fallback
- // will be deprecated with F6 release
- if (settings.validate_on_blur && settings.validate_on_blur === true) {
- validate(this, e);
- }
- // new settings combining validate options into one setting
- if (settings.validate_on === 'change') {
- validate(this, e);
- }
- })
- .on('keydown.fndtn.abide', function (e) {
- // old settings fallback
- // will be deprecated with F6 release
- if (settings.live_validate && settings.live_validate === true && e.which != 9) {
- validate(this, e);
- }
- // new settings combining validate options into one setting
- if (settings.validate_on === 'tab' && e.which === 9) {
- validate(this, e);
- }
- else if (settings.validate_on === 'change') {
- validate(this, e);
- }
- })
- .on('focus', function (e) {
- if (navigator.userAgent.match(/iPad|iPhone|Android|BlackBerry|Windows Phone|webOS/i)) {
- $('html, body').animate({
- scrollTop: $(e.target).offset().top
- }, 100);
- }
- });
- },
-
- reset : function (form, e) {
- var self = this;
- form.removeAttr(self.invalid_attr);
-
- $('[' + self.invalid_attr + ']', form).removeAttr(self.invalid_attr);
- $('.' + self.settings.error_class, form).not('small').removeClass(self.settings.error_class);
- $(':input', form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr(self.invalid_attr);
- },
-
- validate : function (els, e, is_ajax) {
- var validations = this.parse_patterns(els),
- validation_count = validations.length,
- form = this.S(els[0]).closest('form'),
- submit_event = /submit/.test(e.type);
-
- // Has to count up to make sure the focus gets applied to the top error
- for (var i = 0; i < validation_count; i++) {
- if (!validations[i] && (submit_event || is_ajax)) {
- if (this.settings.focus_on_invalid) {
- els[i].focus();
- }
- form.trigger('invalid.fndtn.abide');
- this.S(els[i]).closest('form').attr(this.invalid_attr, '');
- return false;
- }
- }
-
- if (submit_event || is_ajax) {
- form.trigger('valid.fndtn.abide');
- }
-
- form.removeAttr(this.invalid_attr);
-
- if (is_ajax) {
- return false;
- }
-
- return true;
- },
-
- parse_patterns : function (els) {
- var i = els.length,
- el_patterns = [];
-
- while (i--) {
- el_patterns.push(this.pattern(els[i]));
- }
-
- return this.check_validation_and_apply_styles(el_patterns);
- },
-
- pattern : function (el) {
- var type = el.getAttribute('type'),
- required = typeof el.getAttribute('required') === 'string';
-
- var pattern = el.getAttribute('pattern') || '';
-
- if (this.settings.patterns.hasOwnProperty(pattern) && pattern.length > 0) {
- return [el, this.settings.patterns[pattern], required];
- } else if (pattern.length > 0) {
- return [el, new RegExp(pattern), required];
- }
-
- if (this.settings.patterns.hasOwnProperty(type)) {
- return [el, this.settings.patterns[type], required];
- }
-
- pattern = /.*/;
-
- return [el, pattern, required];
- },
-
- // TODO: Break this up into smaller methods, getting hard to read.
- check_validation_and_apply_styles : function (el_patterns) {
- var i = el_patterns.length,
- validations = [],
- form = this.S(el_patterns[0][0]).closest('[data-' + this.attr_name(true) + ']'),
- settings = form.data(this.attr_name(true) + '-init') || {};
- while (i--) {
- var el = el_patterns[i][0],
- required = el_patterns[i][2],
- value = el.value.trim(),
- direct_parent = this.S(el).parent(),
- validator = el.getAttribute(this.add_namespace('data-abide-validator')),
- is_radio = el.type === 'radio',
- is_checkbox = el.type === 'checkbox',
- label = this.S('label[for="' + el.getAttribute('id') + '"]'),
- valid_length = (required) ? (el.value.length > 0) : true,
- el_validations = [];
-
- var parent, valid;
-
- // support old way to do equalTo validations
- if (el.getAttribute(this.add_namespace('data-equalto'))) { validator = 'equalTo' }
-
- if (!direct_parent.is('label')) {
- parent = direct_parent;
- } else {
- parent = direct_parent.parent();
- }
-
- if (is_radio && required) {
- el_validations.push(this.valid_radio(el, required));
- } else if (is_checkbox && required) {
- el_validations.push(this.valid_checkbox(el, required));
-
- } else if (validator) {
- // Validate using each of the specified (space-delimited) validators.
- var validators = validator.split(' ');
- var last_valid = true, all_valid = true;
- for (var iv = 0; iv < validators.length; iv++) {
- valid = this.settings.validators[validators[iv]].apply(this, [el, required, parent])
- el_validations.push(valid);
- all_valid = valid && last_valid;
- last_valid = valid;
- }
- if (all_valid) {
- this.S(el).removeAttr(this.invalid_attr);
- parent.removeClass('error');
- if (label.length > 0 && this.settings.error_labels) {
- label.removeClass(this.settings.error_class).removeAttr('role');
- }
- $(el).triggerHandler('valid');
- } else {
- this.S(el).attr(this.invalid_attr, '');
- parent.addClass('error');
- if (label.length > 0 && this.settings.error_labels) {
- label.addClass(this.settings.error_class).attr('role', 'alert');
- }
- $(el).triggerHandler('invalid');
- }
- } else {
-
- if (el_patterns[i][1].test(value) && valid_length ||
- !required && el.value.length < 1 || $(el).attr('disabled')) {
- el_validations.push(true);
- } else {
- el_validations.push(false);
- }
-
- el_validations = [el_validations.every(function (valid) {return valid;})];
- if (el_validations[0]) {
- this.S(el).removeAttr(this.invalid_attr);
- el.setAttribute('aria-invalid', 'false');
- el.removeAttribute('aria-describedby');
- parent.removeClass(this.settings.error_class);
- if (label.length > 0 && this.settings.error_labels) {
- label.removeClass(this.settings.error_class).removeAttr('role');
- }
- $(el).triggerHandler('valid');
- } else {
- this.S(el).attr(this.invalid_attr, '');
- el.setAttribute('aria-invalid', 'true');
-
- // Try to find the error associated with the input
- var errorElem = parent.find('small.' + this.settings.error_class, 'span.' + this.settings.error_class);
- var errorID = errorElem.length > 0 ? errorElem[0].id : '';
- if (errorID.length > 0) {
- el.setAttribute('aria-describedby', errorID);
- }
-
- // el.setAttribute('aria-describedby', $(el).find('.error')[0].id);
- parent.addClass(this.settings.error_class);
- if (label.length > 0 && this.settings.error_labels) {
- label.addClass(this.settings.error_class).attr('role', 'alert');
- }
- $(el).triggerHandler('invalid');
- }
- }
- validations = validations.concat(el_validations);
- }
- return validations;
- },
-
- valid_checkbox : function (el, required) {
- var el = this.S(el),
- valid = (el.is(':checked') || !required || el.get(0).getAttribute('disabled'));
-
- if (valid) {
- el.removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
- $(el).triggerHandler('valid');
- } else {
- el.attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
- $(el).triggerHandler('invalid');
- }
-
- return valid;
- },
-
- valid_radio : function (el, required) {
- var name = el.getAttribute('name'),
- group = this.S(el).closest('[data-' + this.attr_name(true) + ']').find("[name='" + name + "']"),
- count = group.length,
- valid = false,
- disabled = false;
-
- // Has to count up to make sure the focus gets applied to the top error
- for (var i=0; i < count; i++) {
- if( group[i].getAttribute('disabled') ){
- disabled=true;
- valid=true;
- } else {
- if (group[i].checked){
- valid = true;
- } else {
- if( disabled ){
- valid = false;
- }
- }
- }
- }
-
- // Has to count up to make sure the focus gets applied to the top error
- for (var i = 0; i < count; i++) {
- if (valid) {
- this.S(group[i]).removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
- $(group[i]).triggerHandler('valid');
- } else {
- this.S(group[i]).attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
- $(group[i]).triggerHandler('invalid');
- }
- }
-
- return valid;
- },
-
- valid_equal : function (el, required, parent) {
- var from = document.getElementById(el.getAttribute(this.add_namespace('data-equalto'))).value,
- to = el.value,
- valid = (from === to);
-
- if (valid) {
- this.S(el).removeAttr(this.invalid_attr);
- parent.removeClass(this.settings.error_class);
- if (label.length > 0 && settings.error_labels) {
- label.removeClass(this.settings.error_class);
- }
- } else {
- this.S(el).attr(this.invalid_attr, '');
- parent.addClass(this.settings.error_class);
- if (label.length > 0 && settings.error_labels) {
- label.addClass(this.settings.error_class);
- }
- }
-
- return valid;
- },
-
- valid_oneof : function (el, required, parent, doNotValidateOthers) {
- var el = this.S(el),
- others = this.S('[' + this.add_namespace('data-oneof') + ']'),
- valid = others.filter(':checked').length > 0;
-
- if (valid) {
- el.removeAttr(this.invalid_attr).parent().removeClass(this.settings.error_class);
- } else {
- el.attr(this.invalid_attr, '').parent().addClass(this.settings.error_class);
- }
-
- if (!doNotValidateOthers) {
- var _this = this;
- others.each(function () {
- _this.valid_oneof.call(_this, this, null, null, true);
- });
- }
-
- return valid;
- },
-
- reflow : function(scope, options) {
- var self = this,
- form = self.S('[' + this.attr_name() + ']').attr('novalidate', 'novalidate');
- self.S(form).each(function (idx, el) {
- self.events(el);
- });
- }
- };
-}(jQuery, window, window.document));
-;(function ($, window, document, undefined) {
- 'use strict';
-
- Foundation.libs.tooltip = {
- name : 'tooltip',
-
- version : '5.5.2',
-
- settings : {
- additional_inheritable_classes : [],
- tooltip_class : '.tooltip',
- append_to : 'body',
- touch_close_text : 'Tap To Close',
- disable_for_touch : false,
- hover_delay : 200,
- show_on : 'all',
- tip_template : function (selector, content) {
- return '' + content + '';
- }
- },
-
- cache : {},
-
- init : function (scope, method, options) {
- Foundation.inherit(this, 'random_str');
- this.bindings(method, options);
- },
-
- should_show : function (target, tip) {
- var settings = $.extend({}, this.settings, this.data_options(target));
-
- if (settings.show_on === 'all') {
- return true;
- } else if (this.small() && settings.show_on === 'small') {
- return true;
- } else if (this.medium() && settings.show_on === 'medium') {
- return true;
- } else if (this.large() && settings.show_on === 'large') {
- return true;
- }
- return false;
- },
-
- medium : function () {
- return matchMedia(Foundation.media_queries['medium']).matches;
- },
-
- large : function () {
- return matchMedia(Foundation.media_queries['large']).matches;
- },
-
- events : function (instance) {
- var self = this,
- S = self.S;
-
- self.create(this.S(instance));
-
- function _startShow(elt, $this, immediate) {
- if (elt.timer) {
- return;
- }
-
- if (immediate) {
- elt.timer = null;
- self.showTip($this);
- } else {
- elt.timer = setTimeout(function () {
- elt.timer = null;
- self.showTip($this);
- }.bind(elt), self.settings.hover_delay);
- }
- }
-
- function _startHide(elt, $this) {
- if (elt.timer) {
- clearTimeout(elt.timer);
- elt.timer = null;
- }
-
- self.hide($this);
- }
-
- $(this.scope)
- .off('.tooltip')
- .on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip',
- '[' + this.attr_name() + ']', function (e) {
- var $this = S(this),
- settings = $.extend({}, self.settings, self.data_options($this)),
- is_touch = false;
-
- if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type) && S(e.target).is('a')) {
- return false;
- }
-
- if (/mouse/i.test(e.type) && self.ie_touch(e)) {
- return false;
- }
-
- if ($this.hasClass('open')) {
- if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) {
- e.preventDefault();
- }
- self.hide($this);
- } else {
- if (settings.disable_for_touch && Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) {
- return;
- } else if (!settings.disable_for_touch && Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) {
- e.preventDefault();
- S(settings.tooltip_class + '.open').hide();
- is_touch = true;
- // close other open tooltips on touch
- if ($('.open[' + self.attr_name() + ']').length > 0) {
- var prevOpen = S($('.open[' + self.attr_name() + ']')[0]);
- self.hide(prevOpen);
- }
- }
-
- if (/enter|over/i.test(e.type)) {
- _startShow(this, $this);
-
- } else if (e.type === 'mouseout' || e.type === 'mouseleave') {
- _startHide(this, $this);
- } else {
- _startShow(this, $this, true);
- }
- }
- })
- .on('mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip', '[' + this.attr_name() + '].open', function (e) {
- if (/mouse/i.test(e.type) && self.ie_touch(e)) {
- return false;
- }
-
- if ($(this).data('tooltip-open-event-type') == 'touch' && e.type == 'mouseleave') {
- return;
- } else if ($(this).data('tooltip-open-event-type') == 'mouse' && /MSPointerDown|touchstart/i.test(e.type)) {
- self.convert_to_touch($(this));
- } else {
- _startHide(this, $(this));
- }
- })
- .on('DOMNodeRemoved DOMAttrModified', '[' + this.attr_name() + ']:not(a)', function (e) {
- _startHide(this, S(this));
- });
- },
-
- ie_touch : function (e) {
- // How do I distinguish between IE11 and Windows Phone 8?????
- return false;
- },
-
- showTip : function ($target) {
- var $tip = this.getTip($target);
- if (this.should_show($target, $tip)) {
- return this.show($target);
- }
- return;
- },
-
- getTip : function ($target) {
- var selector = this.selector($target),
- settings = $.extend({}, this.settings, this.data_options($target)),
- tip = null;
-
- if (selector) {
- tip = this.S('span[data-selector="' + selector + '"]' + settings.tooltip_class);
- }
-
- return (typeof tip === 'object') ? tip : false;
- },
-
- selector : function ($target) {
- var dataSelector = $target.attr(this.attr_name()) || $target.attr('data-selector');
-
- if (typeof dataSelector != 'string') {
- dataSelector = this.random_str(6);
- $target
- .attr('data-selector', dataSelector)
- .attr('aria-describedby', dataSelector);
- }
-
- return dataSelector;
- },
-
- create : function ($target) {
- var self = this,
- settings = $.extend({}, this.settings, this.data_options($target)),
- tip_template = this.settings.tip_template;
-
- if (typeof settings.tip_template === 'string' && window.hasOwnProperty(settings.tip_template)) {
- tip_template = window[settings.tip_template];
- }
-
- var $tip = $(tip_template(this.selector($target), $('').html($target.attr('title')).html())),
- classes = this.inheritable_classes($target);
-
- $tip.addClass(classes).appendTo(settings.append_to);
-
- if (Modernizr.touch) {
- $tip.append('' + settings.touch_close_text + '');
- $tip.on('touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip', function (e) {
- self.hide($target);
- });
- }
-
- $target.removeAttr('title').attr('title', '');
- },
-
- reposition : function (target, tip, classes) {
- var width, nub, nubHeight, nubWidth, column, objPos;
-
- tip.css('visibility', 'hidden').show();
-
- width = target.data('width');
- nub = tip.children('.nub');
- nubHeight = nub.outerHeight();
- nubWidth = nub.outerHeight();
-
- if (this.small()) {
- tip.css({'width' : '100%'});
- } else {
- tip.css({'width' : (width) ? width : 'auto'});
- }
-
- objPos = function (obj, top, right, bottom, left, width) {
- return obj.css({
- 'top' : (top) ? top : 'auto',
- 'bottom' : (bottom) ? bottom : 'auto',
- 'left' : (left) ? left : 'auto',
- 'right' : (right) ? right : 'auto'
- }).end();
- };
-
- objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left);
-
- if (this.small()) {
- objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', 12.5, $(this.scope).width());
- tip.addClass('tip-override');
- objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left);
- } else {
- var left = target.offset().left;
- if (Foundation.rtl) {
- nub.addClass('rtl');
- left = target.offset().left + target.outerWidth() - tip.outerWidth();
- }
-
- objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', left);
- // reset nub from small styles, if they've been applied
- if (nub.attr('style')) {
- nub.removeAttr('style');
- }
-
- tip.removeClass('tip-override');
- if (classes && classes.indexOf('tip-top') > -1) {
- if (Foundation.rtl) {
- nub.addClass('rtl');
- }
- objPos(tip, (target.offset().top - tip.outerHeight()), 'auto', 'auto', left)
- .removeClass('tip-override');
- } else if (classes && classes.indexOf('tip-left') > -1) {
- objPos(tip, (target.offset().top + (target.outerHeight() / 2) - (tip.outerHeight() / 2)), 'auto', 'auto', (target.offset().left - tip.outerWidth() - nubHeight))
- .removeClass('tip-override');
- nub.removeClass('rtl');
- } else if (classes && classes.indexOf('tip-right') > -1) {
- objPos(tip, (target.offset().top + (target.outerHeight() / 2) - (tip.outerHeight() / 2)), 'auto', 'auto', (target.offset().left + target.outerWidth() + nubHeight))
- .removeClass('tip-override');
- nub.removeClass('rtl');
- }
- }
-
- tip.css('visibility', 'visible').hide();
- },
-
- small : function () {
- return matchMedia(Foundation.media_queries.small).matches &&
- !matchMedia(Foundation.media_queries.medium).matches;
- },
-
- inheritable_classes : function ($target) {
- var settings = $.extend({}, this.settings, this.data_options($target)),
- inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'radius', 'round'].concat(settings.additional_inheritable_classes),
- classes = $target.attr('class'),
- filtered = classes ? $.map(classes.split(' '), function (el, i) {
- if ($.inArray(el, inheritables) !== -1) {
- return el;
- }
- }).join(' ') : '';
-
- return $.trim(filtered);
- },
-
- convert_to_touch : function ($target) {
- var self = this,
- $tip = self.getTip($target),
- settings = $.extend({}, self.settings, self.data_options($target));
-
- if ($tip.find('.tap-to-close').length === 0) {
- $tip.append('' + settings.touch_close_text + '');
- $tip.on('click.fndtn.tooltip.tapclose touchstart.fndtn.tooltip.tapclose MSPointerDown.fndtn.tooltip.tapclose', function (e) {
- self.hide($target);
- });
- }
-
- $target.data('tooltip-open-event-type', 'touch');
- },
-
- show : function ($target) {
- var $tip = this.getTip($target);
-
- if ($target.data('tooltip-open-event-type') == 'touch') {
- this.convert_to_touch($target);
- }
-
- this.reposition($target, $tip, $target.attr('class'));
- $target.addClass('open');
- $tip.fadeIn(150);
- },
-
- hide : function ($target) {
- var $tip = this.getTip($target);
- $tip.fadeOut(150, function () {
- $tip.find('.tap-to-close').remove();
- $tip.off('click.fndtn.tooltip.tapclose MSPointerDown.fndtn.tapclose');
- $target.removeClass('open');
- });
- },
-
- off : function () {
- var self = this;
- this.S(this.scope).off('.fndtn.tooltip');
- this.S(this.settings.tooltip_class).each(function (i) {
- $('[' + self.attr_name() + ']').eq(i).attr('title', $(this).text());
- }).remove();
- },
-
- reflow : function () {}
- };
-}(jQuery, window, window.document));
diff --git a/src/ralph/dc_view/static/css/_functions.less b/src/ralph/dc_view/static/css/_functions.less
deleted file mode 100644
index b2dd7d3a4d..0000000000
--- a/src/ralph/dc_view/static/css/_functions.less
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "_variables.less";
-
-.generate-slots(@from, @to, @n, @top: 0, @counter: 0, @left-offset: 0, @rest... ) when (@from =< @to) {
- .slot-@{from}@{rest} {
- top: @top;
- left: ((@devices-width-front / @n) * @counter) + @left-offset;
- }
- .generate-slots((@from+1), @to, @n, @top, (@counter+1), @left-offset, @rest);
-}
diff --git a/src/ralph/dc_view/static/css/_variables.less b/src/ralph/dc_view/static/css/_variables.less
deleted file mode 100644
index f8ff643225..0000000000
--- a/src/ralph/dc_view/static/css/_variables.less
+++ /dev/null
@@ -1,29 +0,0 @@
-@max-u: 48;
-@rack-border-width: 4px;
-@rack-width: 450px;
-@rack-width-small: 350px;
-@pdu-width: 50px;
-@listing-u-width: 25px;
-@devices-width-back: (@rack-width - (@pdu-width * 2) - (@listing-u-width * 2));
-@devices-width-front: (@rack-width - (@listing-u-width * 2));
-@devices-width-back-small: (@rack-width-small - (@pdu-width * 2) - (@listing-u-width * 2));
-@devices-width-front-small: (@rack-width-small - (@listing-u-width * 2));
-@device-background: rgb(147, 217, 50);
-@u-height: 25px;
-@info-padding: 3px;
-@rack-info-width: 270px;
-
-@default-slots-per-row: 5;
-@default-slot-height: 50px;
-@default-slot-width: @devices-width-front / @default-slots-per-row;
-
-@grid-color: rgba(255, 255, 255, 0.5);
-@grid-size: 40px;
-@grid-count: 40;
-
-.active-border() {
- border: 1px solid white;
-}
-
-@border-info: 1px solid #ccc;
-@rack-background: #888;
diff --git a/src/ralph/dc_view/static/css/data_center.css b/src/ralph/dc_view/static/css/data_center.css
deleted file mode 100644
index a2deaca0ff..0000000000
--- a/src/ralph/dc_view/static/css/data_center.css
+++ /dev/null
@@ -1,998 +0,0 @@
-.data-center {
- margin-left: 280px;
-}
-.data-center .grid {
- float: left;
- background: #555;
-}
-.data-center .grid.rows-1 {
- min-height: 40px;
- max-height: 40px;
- height: 40px;
-}
-.data-center .grid.rows-2 {
- min-height: 80px;
- max-height: 80px;
- height: 80px;
-}
-.data-center .grid.rows-3 {
- min-height: 120px;
- max-height: 120px;
- height: 120px;
-}
-.data-center .grid.rows-4 {
- min-height: 160px;
- max-height: 160px;
- height: 160px;
-}
-.data-center .grid.rows-5 {
- min-height: 200px;
- max-height: 200px;
- height: 200px;
-}
-.data-center .grid.rows-6 {
- min-height: 240px;
- max-height: 240px;
- height: 240px;
-}
-.data-center .grid.rows-7 {
- min-height: 280px;
- max-height: 280px;
- height: 280px;
-}
-.data-center .grid.rows-8 {
- min-height: 320px;
- max-height: 320px;
- height: 320px;
-}
-.data-center .grid.rows-9 {
- min-height: 360px;
- max-height: 360px;
- height: 360px;
-}
-.data-center .grid.rows-10 {
- min-height: 400px;
- max-height: 400px;
- height: 400px;
-}
-.data-center .grid.rows-11 {
- min-height: 440px;
- max-height: 440px;
- height: 440px;
-}
-.data-center .grid.rows-12 {
- min-height: 480px;
- max-height: 480px;
- height: 480px;
-}
-.data-center .grid.rows-13 {
- min-height: 520px;
- max-height: 520px;
- height: 520px;
-}
-.data-center .grid.rows-14 {
- min-height: 560px;
- max-height: 560px;
- height: 560px;
-}
-.data-center .grid.rows-15 {
- min-height: 600px;
- max-height: 600px;
- height: 600px;
-}
-.data-center .grid.rows-16 {
- min-height: 640px;
- max-height: 640px;
- height: 640px;
-}
-.data-center .grid.rows-17 {
- min-height: 680px;
- max-height: 680px;
- height: 680px;
-}
-.data-center .grid.rows-18 {
- min-height: 720px;
- max-height: 720px;
- height: 720px;
-}
-.data-center .grid.rows-19 {
- min-height: 760px;
- max-height: 760px;
- height: 760px;
-}
-.data-center .grid.rows-20 {
- min-height: 800px;
- max-height: 800px;
- height: 800px;
-}
-.data-center .grid.rows-21 {
- min-height: 840px;
- max-height: 840px;
- height: 840px;
-}
-.data-center .grid.rows-22 {
- min-height: 880px;
- max-height: 880px;
- height: 880px;
-}
-.data-center .grid.rows-23 {
- min-height: 920px;
- max-height: 920px;
- height: 920px;
-}
-.data-center .grid.rows-24 {
- min-height: 960px;
- max-height: 960px;
- height: 960px;
-}
-.data-center .grid.rows-25 {
- min-height: 1000px;
- max-height: 1000px;
- height: 1000px;
-}
-.data-center .grid.rows-26 {
- min-height: 1040px;
- max-height: 1040px;
- height: 1040px;
-}
-.data-center .grid.rows-27 {
- min-height: 1080px;
- max-height: 1080px;
- height: 1080px;
-}
-.data-center .grid.rows-28 {
- min-height: 1120px;
- max-height: 1120px;
- height: 1120px;
-}
-.data-center .grid.rows-29 {
- min-height: 1160px;
- max-height: 1160px;
- height: 1160px;
-}
-.data-center .grid.rows-30 {
- min-height: 1200px;
- max-height: 1200px;
- height: 1200px;
-}
-.data-center .grid.rows-31 {
- min-height: 1240px;
- max-height: 1240px;
- height: 1240px;
-}
-.data-center .grid.rows-32 {
- min-height: 1280px;
- max-height: 1280px;
- height: 1280px;
-}
-.data-center .grid.rows-33 {
- min-height: 1320px;
- max-height: 1320px;
- height: 1320px;
-}
-.data-center .grid.rows-34 {
- min-height: 1360px;
- max-height: 1360px;
- height: 1360px;
-}
-.data-center .grid.rows-35 {
- min-height: 1400px;
- max-height: 1400px;
- height: 1400px;
-}
-.data-center .grid.rows-36 {
- min-height: 1440px;
- max-height: 1440px;
- height: 1440px;
-}
-.data-center .grid.rows-37 {
- min-height: 1480px;
- max-height: 1480px;
- height: 1480px;
-}
-.data-center .grid.rows-38 {
- min-height: 1520px;
- max-height: 1520px;
- height: 1520px;
-}
-.data-center .grid.rows-39 {
- min-height: 1560px;
- max-height: 1560px;
- height: 1560px;
-}
-.data-center .grid.rows-40 {
- min-height: 1600px;
- max-height: 1600px;
- height: 1600px;
-}
-.data-center .grid.cols-1 {
- width: 40px;
-}
-.data-center .grid.cols-2 {
- width: 80px;
-}
-.data-center .grid.cols-3 {
- width: 120px;
-}
-.data-center .grid.cols-4 {
- width: 160px;
-}
-.data-center .grid.cols-5 {
- width: 200px;
-}
-.data-center .grid.cols-6 {
- width: 240px;
-}
-.data-center .grid.cols-7 {
- width: 280px;
-}
-.data-center .grid.cols-8 {
- width: 320px;
-}
-.data-center .grid.cols-9 {
- width: 360px;
-}
-.data-center .grid.cols-10 {
- width: 400px;
-}
-.data-center .grid.cols-11 {
- width: 440px;
-}
-.data-center .grid.cols-12 {
- width: 480px;
-}
-.data-center .grid.cols-13 {
- width: 520px;
-}
-.data-center .grid.cols-14 {
- width: 560px;
-}
-.data-center .grid.cols-15 {
- width: 600px;
-}
-.data-center .grid.cols-16 {
- width: 640px;
-}
-.data-center .grid.cols-17 {
- width: 680px;
-}
-.data-center .grid.cols-18 {
- width: 720px;
-}
-.data-center .grid.cols-19 {
- width: 760px;
-}
-.data-center .grid.cols-20 {
- width: 800px;
-}
-.data-center .grid.cols-21 {
- width: 840px;
-}
-.data-center .grid.cols-22 {
- width: 880px;
-}
-.data-center .grid.cols-23 {
- width: 920px;
-}
-.data-center .grid.cols-24 {
- width: 960px;
-}
-.data-center .grid.cols-25 {
- width: 1000px;
-}
-.data-center .grid.cols-26 {
- width: 1040px;
-}
-.data-center .grid.cols-27 {
- width: 1080px;
-}
-.data-center .grid.cols-28 {
- width: 1120px;
-}
-.data-center .grid.cols-29 {
- width: 1160px;
-}
-.data-center .grid.cols-30 {
- width: 1200px;
-}
-.data-center .grid.cols-31 {
- width: 1240px;
-}
-.data-center .grid.cols-32 {
- width: 1280px;
-}
-.data-center .grid.cols-33 {
- width: 1320px;
-}
-.data-center .grid.cols-34 {
- width: 1360px;
-}
-.data-center .grid.cols-35 {
- width: 1400px;
-}
-.data-center .grid.cols-36 {
- width: 1440px;
-}
-.data-center .grid.cols-37 {
- width: 1480px;
-}
-.data-center .grid.cols-38 {
- width: 1520px;
-}
-.data-center .grid.cols-39 {
- width: 1560px;
-}
-.data-center .grid.cols-40 {
- width: 1600px;
-}
-.data-center .grid.edit .grid_wrapper {
- background-color: rgba(255, 255, 255, 0.1);
-}
-.data-center .grid.edit .grid_wrapper .progress,
-.data-center .grid.edit .grid_wrapper .free,
-.data-center .grid.edit .grid_wrapper .display,
-.data-center .grid.edit .grid_wrapper .used {
- display: none;
-}
-.data-center .grid.edit .grid_wrapper .rack.new {
- border-color: #ff3;
- background-color: #997;
-}
-.data-center .grid.edit .grid_wrapper .rack.saved {
- border-color: #444;
- background-color: #888888;
-}
-.data-center .grid.edit .grid_wrapper .rack.move {
- border-style: dashed;
-}
-.data-center .grid.edit .grid_wrapper .rack.move.not_allowed {
- background-color: red;
-}
-.data-center .grid.edit .grid_wrapper .rack.move.allowed {
- background-color: #2a3;
-}
-.data-center .grid.edit .grid_wrapper .rack.move .wrapper .tools {
- display: none !important;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper {
- cursor: initial;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper:hover .tools {
- display: block;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper:hover .tools {
- display: block;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .tools {
- display: none;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .icon-repeat {
- font-size: 1.25em;
- cursor: pointer;
- font-weight: bold;
- bottom: 5px;
- padding: 2px;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .icon-repeat:hover {
- color: #fff;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .icon-repeat.left {
- left: 5%;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .icon-repeat.right {
- right: 5%;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .edit {
- padding: 2px 0 0 2px;
-}
-.data-center .grid.edit .grid_wrapper .rack .wrapper .name {
- cursor: move;
-}
-.data-center .grid .grid_wrapper {
- position: relative;
- min-height: 1600px;
- background-color: transparent;
- background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 1%, transparent 2%, transparent), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 1%, transparent 2%, transparent);
- background-size: 40px 40px;
-}
-.data-center .grid .grid_wrapper .rack {
- box-sizing: border-box;
- position: absolute;
- background: #888888;
- width: 40px;
- height: 40px;
- border: 1px solid #444;
-}
-.data-center .grid .grid_wrapper .rack.add {
- text-align: center;
- font-size: 40px;
- line-height: 40px;
- border: 0;
- color: #3f3;
- background: transparent;
- cursor: pointer;
-}
-.data-center .grid .grid_wrapper .rack.add:hover {
- border: 0;
- background: rgba(255, 255, 255, 0.2);
-}
-.data-center .grid .grid_wrapper .rack.x-1 {
- left: 40px;
-}
-.data-center .grid .grid_wrapper .rack.x-2 {
- left: 80px;
-}
-.data-center .grid .grid_wrapper .rack.x-3 {
- left: 120px;
-}
-.data-center .grid .grid_wrapper .rack.x-4 {
- left: 160px;
-}
-.data-center .grid .grid_wrapper .rack.x-5 {
- left: 200px;
-}
-.data-center .grid .grid_wrapper .rack.x-6 {
- left: 240px;
-}
-.data-center .grid .grid_wrapper .rack.x-7 {
- left: 280px;
-}
-.data-center .grid .grid_wrapper .rack.x-8 {
- left: 320px;
-}
-.data-center .grid .grid_wrapper .rack.x-9 {
- left: 360px;
-}
-.data-center .grid .grid_wrapper .rack.x-10 {
- left: 400px;
-}
-.data-center .grid .grid_wrapper .rack.x-11 {
- left: 440px;
-}
-.data-center .grid .grid_wrapper .rack.x-12 {
- left: 480px;
-}
-.data-center .grid .grid_wrapper .rack.x-13 {
- left: 520px;
-}
-.data-center .grid .grid_wrapper .rack.x-14 {
- left: 560px;
-}
-.data-center .grid .grid_wrapper .rack.x-15 {
- left: 600px;
-}
-.data-center .grid .grid_wrapper .rack.x-16 {
- left: 640px;
-}
-.data-center .grid .grid_wrapper .rack.x-17 {
- left: 680px;
-}
-.data-center .grid .grid_wrapper .rack.x-18 {
- left: 720px;
-}
-.data-center .grid .grid_wrapper .rack.x-19 {
- left: 760px;
-}
-.data-center .grid .grid_wrapper .rack.x-20 {
- left: 800px;
-}
-.data-center .grid .grid_wrapper .rack.x-21 {
- left: 840px;
-}
-.data-center .grid .grid_wrapper .rack.x-22 {
- left: 880px;
-}
-.data-center .grid .grid_wrapper .rack.x-23 {
- left: 920px;
-}
-.data-center .grid .grid_wrapper .rack.x-24 {
- left: 960px;
-}
-.data-center .grid .grid_wrapper .rack.x-25 {
- left: 1000px;
-}
-.data-center .grid .grid_wrapper .rack.x-26 {
- left: 1040px;
-}
-.data-center .grid .grid_wrapper .rack.x-27 {
- left: 1080px;
-}
-.data-center .grid .grid_wrapper .rack.x-28 {
- left: 1120px;
-}
-.data-center .grid .grid_wrapper .rack.x-29 {
- left: 1160px;
-}
-.data-center .grid .grid_wrapper .rack.x-30 {
- left: 1200px;
-}
-.data-center .grid .grid_wrapper .rack.x-31 {
- left: 1240px;
-}
-.data-center .grid .grid_wrapper .rack.x-32 {
- left: 1280px;
-}
-.data-center .grid .grid_wrapper .rack.x-33 {
- left: 1320px;
-}
-.data-center .grid .grid_wrapper .rack.x-34 {
- left: 1360px;
-}
-.data-center .grid .grid_wrapper .rack.x-35 {
- left: 1400px;
-}
-.data-center .grid .grid_wrapper .rack.x-36 {
- left: 1440px;
-}
-.data-center .grid .grid_wrapper .rack.x-37 {
- left: 1480px;
-}
-.data-center .grid .grid_wrapper .rack.x-38 {
- left: 1520px;
-}
-.data-center .grid .grid_wrapper .rack.x-39 {
- left: 1560px;
-}
-.data-center .grid .grid_wrapper .rack.x-40 {
- left: 1600px;
-}
-.data-center .grid .grid_wrapper .rack.y-1 {
- top: 40px;
-}
-.data-center .grid .grid_wrapper .rack.y-2 {
- top: 80px;
-}
-.data-center .grid .grid_wrapper .rack.y-3 {
- top: 120px;
-}
-.data-center .grid .grid_wrapper .rack.y-4 {
- top: 160px;
-}
-.data-center .grid .grid_wrapper .rack.y-5 {
- top: 200px;
-}
-.data-center .grid .grid_wrapper .rack.y-6 {
- top: 240px;
-}
-.data-center .grid .grid_wrapper .rack.y-7 {
- top: 280px;
-}
-.data-center .grid .grid_wrapper .rack.y-8 {
- top: 320px;
-}
-.data-center .grid .grid_wrapper .rack.y-9 {
- top: 360px;
-}
-.data-center .grid .grid_wrapper .rack.y-10 {
- top: 400px;
-}
-.data-center .grid .grid_wrapper .rack.y-11 {
- top: 440px;
-}
-.data-center .grid .grid_wrapper .rack.y-12 {
- top: 480px;
-}
-.data-center .grid .grid_wrapper .rack.y-13 {
- top: 520px;
-}
-.data-center .grid .grid_wrapper .rack.y-14 {
- top: 560px;
-}
-.data-center .grid .grid_wrapper .rack.y-15 {
- top: 600px;
-}
-.data-center .grid .grid_wrapper .rack.y-16 {
- top: 640px;
-}
-.data-center .grid .grid_wrapper .rack.y-17 {
- top: 680px;
-}
-.data-center .grid .grid_wrapper .rack.y-18 {
- top: 720px;
-}
-.data-center .grid .grid_wrapper .rack.y-19 {
- top: 760px;
-}
-.data-center .grid .grid_wrapper .rack.y-20 {
- top: 800px;
-}
-.data-center .grid .grid_wrapper .rack.y-21 {
- top: 840px;
-}
-.data-center .grid .grid_wrapper .rack.y-22 {
- top: 880px;
-}
-.data-center .grid .grid_wrapper .rack.y-23 {
- top: 920px;
-}
-.data-center .grid .grid_wrapper .rack.y-24 {
- top: 960px;
-}
-.data-center .grid .grid_wrapper .rack.y-25 {
- top: 1000px;
-}
-.data-center .grid .grid_wrapper .rack.y-26 {
- top: 1040px;
-}
-.data-center .grid .grid_wrapper .rack.y-27 {
- top: 1080px;
-}
-.data-center .grid .grid_wrapper .rack.y-28 {
- top: 1120px;
-}
-.data-center .grid .grid_wrapper .rack.y-29 {
- top: 1160px;
-}
-.data-center .grid .grid_wrapper .rack.y-30 {
- top: 1200px;
-}
-.data-center .grid .grid_wrapper .rack.y-31 {
- top: 1240px;
-}
-.data-center .grid .grid_wrapper .rack.y-32 {
- top: 1280px;
-}
-.data-center .grid .grid_wrapper .rack.y-33 {
- top: 1320px;
-}
-.data-center .grid .grid_wrapper .rack.y-34 {
- top: 1360px;
-}
-.data-center .grid .grid_wrapper .rack.y-35 {
- top: 1400px;
-}
-.data-center .grid .grid_wrapper .rack.y-36 {
- top: 1440px;
-}
-.data-center .grid .grid_wrapper .rack.y-37 {
- top: 1480px;
-}
-.data-center .grid .grid_wrapper .rack.y-38 {
- top: 1520px;
-}
-.data-center .grid .grid_wrapper .rack.y-39 {
- top: 1560px;
-}
-.data-center .grid .grid_wrapper .rack.y-40 {
- top: 1600px;
-}
-.data-center .grid .grid_wrapper .rack.rotate-left {
- transform: rotate(-90deg);
-}
-.data-center .grid .grid_wrapper .rack.rotate-right {
- transform: rotate(90deg);
-}
-.data-center .grid .grid_wrapper .rack.rotate-right .used,
-.data-center .grid .grid_wrapper .rack.rotate-right .name {
- transform: rotate(180deg);
-}
-.data-center .grid .grid_wrapper .rack.rotate-right .wrapper .progress.red {
- left: 0;
-}
-.data-center .grid .grid_wrapper .rack.rotate-top .wrapper .progress,
-.data-center .grid .grid_wrapper .rack.rotate-left .wrapper .progress {
- top: 1.4em;
-}
-.data-center .grid .grid_wrapper .rack.rotate-bottom .used {
- top: 0;
-}
-.data-center .grid .grid_wrapper .rack.rotate-bottom .name {
- position: absolute;
- bottom: 0;
- min-width: 100%;
-}
-.data-center .grid .grid_wrapper .rack.rotate-bottom .wrapper .progress {
- bottom: 1.4em;
-}
-.data-center .grid .grid_wrapper .rack.rotate-bottom .tools {
- transform: rotate(180deg);
-}
-.data-center .grid .grid_wrapper .rack.x-1 {
- left: 40px;
-}
-.data-center .grid .grid_wrapper .rack.x-2 {
- left: 80px;
-}
-.data-center .grid .grid_wrapper .rack.x-3 {
- left: 120px;
-}
-.data-center .grid .grid_wrapper .rack.x-4 {
- left: 160px;
-}
-.data-center .grid .grid_wrapper .rack.x-5 {
- left: 200px;
-}
-.data-center .grid .grid_wrapper .rack.x-6 {
- left: 240px;
-}
-.data-center .grid .grid_wrapper .rack.x-7 {
- left: 280px;
-}
-.data-center .grid .grid_wrapper .rack.x-8 {
- left: 320px;
-}
-.data-center .grid .grid_wrapper .rack.x-9 {
- left: 360px;
-}
-.data-center .grid .grid_wrapper .rack.x-10 {
- left: 400px;
-}
-.data-center .grid .grid_wrapper .rack.x-11 {
- left: 440px;
-}
-.data-center .grid .grid_wrapper .rack.x-12 {
- left: 480px;
-}
-.data-center .grid .grid_wrapper .rack.x-13 {
- left: 520px;
-}
-.data-center .grid .grid_wrapper .rack.x-14 {
- left: 560px;
-}
-.data-center .grid .grid_wrapper .rack.x-15 {
- left: 600px;
-}
-.data-center .grid .grid_wrapper .rack.x-16 {
- left: 640px;
-}
-.data-center .grid .grid_wrapper .rack.x-17 {
- left: 680px;
-}
-.data-center .grid .grid_wrapper .rack.x-18 {
- left: 720px;
-}
-.data-center .grid .grid_wrapper .rack.x-19 {
- left: 760px;
-}
-.data-center .grid .grid_wrapper .rack.x-20 {
- left: 800px;
-}
-.data-center .grid .grid_wrapper .rack.x-21 {
- left: 840px;
-}
-.data-center .grid .grid_wrapper .rack.x-22 {
- left: 880px;
-}
-.data-center .grid .grid_wrapper .rack.x-23 {
- left: 920px;
-}
-.data-center .grid .grid_wrapper .rack.x-24 {
- left: 960px;
-}
-.data-center .grid .grid_wrapper .rack.x-25 {
- left: 1000px;
-}
-.data-center .grid .grid_wrapper .rack.x-26 {
- left: 1040px;
-}
-.data-center .grid .grid_wrapper .rack.x-27 {
- left: 1080px;
-}
-.data-center .grid .grid_wrapper .rack.x-28 {
- left: 1120px;
-}
-.data-center .grid .grid_wrapper .rack.x-29 {
- left: 1160px;
-}
-.data-center .grid .grid_wrapper .rack.x-30 {
- left: 1200px;
-}
-.data-center .grid .grid_wrapper .rack.x-31 {
- left: 1240px;
-}
-.data-center .grid .grid_wrapper .rack.x-32 {
- left: 1280px;
-}
-.data-center .grid .grid_wrapper .rack.x-33 {
- left: 1320px;
-}
-.data-center .grid .grid_wrapper .rack.x-34 {
- left: 1360px;
-}
-.data-center .grid .grid_wrapper .rack.x-35 {
- left: 1400px;
-}
-.data-center .grid .grid_wrapper .rack.x-36 {
- left: 1440px;
-}
-.data-center .grid .grid_wrapper .rack.x-37 {
- left: 1480px;
-}
-.data-center .grid .grid_wrapper .rack.x-38 {
- left: 1520px;
-}
-.data-center .grid .grid_wrapper .rack.x-39 {
- left: 1560px;
-}
-.data-center .grid .grid_wrapper .rack.x-40 {
- left: 1600px;
-}
-.data-center .grid .grid_wrapper .rack.y-1 {
- top: 40px;
-}
-.data-center .grid .grid_wrapper .rack.y-2 {
- top: 80px;
-}
-.data-center .grid .grid_wrapper .rack.y-3 {
- top: 120px;
-}
-.data-center .grid .grid_wrapper .rack.y-4 {
- top: 160px;
-}
-.data-center .grid .grid_wrapper .rack.y-5 {
- top: 200px;
-}
-.data-center .grid .grid_wrapper .rack.y-6 {
- top: 240px;
-}
-.data-center .grid .grid_wrapper .rack.y-7 {
- top: 280px;
-}
-.data-center .grid .grid_wrapper .rack.y-8 {
- top: 320px;
-}
-.data-center .grid .grid_wrapper .rack.y-9 {
- top: 360px;
-}
-.data-center .grid .grid_wrapper .rack.y-10 {
- top: 400px;
-}
-.data-center .grid .grid_wrapper .rack.y-11 {
- top: 440px;
-}
-.data-center .grid .grid_wrapper .rack.y-12 {
- top: 480px;
-}
-.data-center .grid .grid_wrapper .rack.y-13 {
- top: 520px;
-}
-.data-center .grid .grid_wrapper .rack.y-14 {
- top: 560px;
-}
-.data-center .grid .grid_wrapper .rack.y-15 {
- top: 600px;
-}
-.data-center .grid .grid_wrapper .rack.y-16 {
- top: 640px;
-}
-.data-center .grid .grid_wrapper .rack.y-17 {
- top: 680px;
-}
-.data-center .grid .grid_wrapper .rack.y-18 {
- top: 720px;
-}
-.data-center .grid .grid_wrapper .rack.y-19 {
- top: 760px;
-}
-.data-center .grid .grid_wrapper .rack.y-20 {
- top: 800px;
-}
-.data-center .grid .grid_wrapper .rack.y-21 {
- top: 840px;
-}
-.data-center .grid .grid_wrapper .rack.y-22 {
- top: 880px;
-}
-.data-center .grid .grid_wrapper .rack.y-23 {
- top: 920px;
-}
-.data-center .grid .grid_wrapper .rack.y-24 {
- top: 960px;
-}
-.data-center .grid .grid_wrapper .rack.y-25 {
- top: 1000px;
-}
-.data-center .grid .grid_wrapper .rack.y-26 {
- top: 1040px;
-}
-.data-center .grid .grid_wrapper .rack.y-27 {
- top: 1080px;
-}
-.data-center .grid .grid_wrapper .rack.y-28 {
- top: 1120px;
-}
-.data-center .grid .grid_wrapper .rack.y-29 {
- top: 1160px;
-}
-.data-center .grid .grid_wrapper .rack.y-30 {
- top: 1200px;
-}
-.data-center .grid .grid_wrapper .rack.y-31 {
- top: 1240px;
-}
-.data-center .grid .grid_wrapper .rack.y-32 {
- top: 1280px;
-}
-.data-center .grid .grid_wrapper .rack.y-33 {
- top: 1320px;
-}
-.data-center .grid .grid_wrapper .rack.y-34 {
- top: 1360px;
-}
-.data-center .grid .grid_wrapper .rack.y-35 {
- top: 1400px;
-}
-.data-center .grid .grid_wrapper .rack.y-36 {
- top: 1440px;
-}
-.data-center .grid .grid_wrapper .rack.y-37 {
- top: 1480px;
-}
-.data-center .grid .grid_wrapper .rack.y-38 {
- top: 1520px;
-}
-.data-center .grid .grid_wrapper .rack.y-39 {
- top: 1560px;
-}
-.data-center .grid .grid_wrapper .rack.y-40 {
- top: 1600px;
-}
-.data-center .grid .grid_wrapper .rack:hover {
- background: #bbbbbb;
-}
-.data-center .grid .grid_wrapper .rack .wrapper {
- height: 100%;
- min-height: 100%;
- position: relative;
- cursor: zoom-in;
- display: block;
-}
-.data-center .grid .grid_wrapper .rack .wrapper:hover {
- text-decoration: none;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .barcode,
-.data-center .grid .grid_wrapper .rack .wrapper .sn {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .name {
- height: 1.4em;
- line-height: 1.4em;
- overflow: hidden;
- white-space: nowrap;
- background: rgba(0, 0, 0, 0.8);
- text-align: center;
- color: #eee;
- width: 100%;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .used {
- position: absolute;
- bottom: 0;
- color: #000;
- text-align: center;
- color: #fff;
- min-width: 100%;
- font-size: .825em;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .progress,
-.data-center .grid .grid_wrapper .rack .wrapper .free,
-.data-center .grid .grid_wrapper .rack .wrapper .display {
- position: absolute;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .progress {
- margin: 0;
- border-radius: 0;
- height: 5px;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .progress.red {
- background: #a33;
- z-index: 2;
- border-left: 1px solid #000;
- right: 0;
- box-sizing: border-box;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .progress.green {
- background: #3f3;
- width: 100%;
- z-index: 1;
-}
-.data-center .grid .grid_wrapper .rack .wrapper .free {
- text-align: center;
- width: 100%;
- top: 10px;
-}
-.data-center .grid .grid_wrapper .rack:hover,
-.data-center .grid .grid_wrapper .rack.active {
- border: 1px solid white;
-}
diff --git a/src/ralph/dc_view/static/css/rack.css b/src/ralph/dc_view/static/css/rack.css
deleted file mode 100644
index ee9d7d056d..0000000000
--- a/src/ralph/dc_view/static/css/rack.css
+++ /dev/null
@@ -1,939 +0,0 @@
-* {
- box-sizing: border-box;
-}
-.visualization [class*="span"] {
- margin-left: 10px;
-}
-.rack-info {
- background: #fff;
- color: #444;
- position: fixed;
- width: 270px;
-}
-.rack-info input[type="text"] {
- height: inherit;
-}
-.rack-info h3 {
- padding: 5px;
- margin: 0;
-}
-.rack-info .description {
- padding: 10px;
- margin-bottom: 10px;
- font-size: 1.2em;
- background: #fbf7aa;
- border: 1px solid #f6ee49;
-}
-.rack-info .info {
- width: 100%;
-}
-.rack-info .info .slot_info tr:last-child td {
- border-bottom: none;
-}
-.rack-info .info td {
- padding: 5px;
- border-bottom: 1px solid #cccccc;
-}
-.rack-info .info td:first-child {
- width: 20%;
- font-weight: bold;
-}
-.rack-info .info tr:nth-last-child(2) > td,
-.rack-info .info tr:last-child > td {
- border-bottom: none;
-}
-.slot_info tr:first-child > td {
- border-top: 1px solid #cccccc;
-}
-.slot_info tr:nth-last-child(2) > td {
- border-bottom: 1px solid #cccccc;
-}
-.racks .rack .wrapper .devices .device.position-u-1,
-.racks .rack .wrapper .listing-u .position.position-u-1 {
- bottom: 0px;
-}
-.racks .rack .wrapper .devices .device.position-u-2,
-.racks .rack .wrapper .listing-u .position.position-u-2 {
- bottom: 25px;
-}
-.racks .rack .wrapper .devices .device.position-u-3,
-.racks .rack .wrapper .listing-u .position.position-u-3 {
- bottom: 50px;
-}
-.racks .rack .wrapper .devices .device.position-u-4,
-.racks .rack .wrapper .listing-u .position.position-u-4 {
- bottom: 75px;
-}
-.racks .rack .wrapper .devices .device.position-u-5,
-.racks .rack .wrapper .listing-u .position.position-u-5 {
- bottom: 100px;
-}
-.racks .rack .wrapper .devices .device.position-u-6,
-.racks .rack .wrapper .listing-u .position.position-u-6 {
- bottom: 125px;
-}
-.racks .rack .wrapper .devices .device.position-u-7,
-.racks .rack .wrapper .listing-u .position.position-u-7 {
- bottom: 150px;
-}
-.racks .rack .wrapper .devices .device.position-u-8,
-.racks .rack .wrapper .listing-u .position.position-u-8 {
- bottom: 175px;
-}
-.racks .rack .wrapper .devices .device.position-u-9,
-.racks .rack .wrapper .listing-u .position.position-u-9 {
- bottom: 200px;
-}
-.racks .rack .wrapper .devices .device.position-u-10,
-.racks .rack .wrapper .listing-u .position.position-u-10 {
- bottom: 225px;
-}
-.racks .rack .wrapper .devices .device.position-u-11,
-.racks .rack .wrapper .listing-u .position.position-u-11 {
- bottom: 250px;
-}
-.racks .rack .wrapper .devices .device.position-u-12,
-.racks .rack .wrapper .listing-u .position.position-u-12 {
- bottom: 275px;
-}
-.racks .rack .wrapper .devices .device.position-u-13,
-.racks .rack .wrapper .listing-u .position.position-u-13 {
- bottom: 300px;
-}
-.racks .rack .wrapper .devices .device.position-u-14,
-.racks .rack .wrapper .listing-u .position.position-u-14 {
- bottom: 325px;
-}
-.racks .rack .wrapper .devices .device.position-u-15,
-.racks .rack .wrapper .listing-u .position.position-u-15 {
- bottom: 350px;
-}
-.racks .rack .wrapper .devices .device.position-u-16,
-.racks .rack .wrapper .listing-u .position.position-u-16 {
- bottom: 375px;
-}
-.racks .rack .wrapper .devices .device.position-u-17,
-.racks .rack .wrapper .listing-u .position.position-u-17 {
- bottom: 400px;
-}
-.racks .rack .wrapper .devices .device.position-u-18,
-.racks .rack .wrapper .listing-u .position.position-u-18 {
- bottom: 425px;
-}
-.racks .rack .wrapper .devices .device.position-u-19,
-.racks .rack .wrapper .listing-u .position.position-u-19 {
- bottom: 450px;
-}
-.racks .rack .wrapper .devices .device.position-u-20,
-.racks .rack .wrapper .listing-u .position.position-u-20 {
- bottom: 475px;
-}
-.racks .rack .wrapper .devices .device.position-u-21,
-.racks .rack .wrapper .listing-u .position.position-u-21 {
- bottom: 500px;
-}
-.racks .rack .wrapper .devices .device.position-u-22,
-.racks .rack .wrapper .listing-u .position.position-u-22 {
- bottom: 525px;
-}
-.racks .rack .wrapper .devices .device.position-u-23,
-.racks .rack .wrapper .listing-u .position.position-u-23 {
- bottom: 550px;
-}
-.racks .rack .wrapper .devices .device.position-u-24,
-.racks .rack .wrapper .listing-u .position.position-u-24 {
- bottom: 575px;
-}
-.racks .rack .wrapper .devices .device.position-u-25,
-.racks .rack .wrapper .listing-u .position.position-u-25 {
- bottom: 600px;
-}
-.racks .rack .wrapper .devices .device.position-u-26,
-.racks .rack .wrapper .listing-u .position.position-u-26 {
- bottom: 625px;
-}
-.racks .rack .wrapper .devices .device.position-u-27,
-.racks .rack .wrapper .listing-u .position.position-u-27 {
- bottom: 650px;
-}
-.racks .rack .wrapper .devices .device.position-u-28,
-.racks .rack .wrapper .listing-u .position.position-u-28 {
- bottom: 675px;
-}
-.racks .rack .wrapper .devices .device.position-u-29,
-.racks .rack .wrapper .listing-u .position.position-u-29 {
- bottom: 700px;
-}
-.racks .rack .wrapper .devices .device.position-u-30,
-.racks .rack .wrapper .listing-u .position.position-u-30 {
- bottom: 725px;
-}
-.racks .rack .wrapper .devices .device.position-u-31,
-.racks .rack .wrapper .listing-u .position.position-u-31 {
- bottom: 750px;
-}
-.racks .rack .wrapper .devices .device.position-u-32,
-.racks .rack .wrapper .listing-u .position.position-u-32 {
- bottom: 775px;
-}
-.racks .rack .wrapper .devices .device.position-u-33,
-.racks .rack .wrapper .listing-u .position.position-u-33 {
- bottom: 800px;
-}
-.racks .rack .wrapper .devices .device.position-u-34,
-.racks .rack .wrapper .listing-u .position.position-u-34 {
- bottom: 825px;
-}
-.racks .rack .wrapper .devices .device.position-u-35,
-.racks .rack .wrapper .listing-u .position.position-u-35 {
- bottom: 850px;
-}
-.racks .rack .wrapper .devices .device.position-u-36,
-.racks .rack .wrapper .listing-u .position.position-u-36 {
- bottom: 875px;
-}
-.racks .rack .wrapper .devices .device.position-u-37,
-.racks .rack .wrapper .listing-u .position.position-u-37 {
- bottom: 900px;
-}
-.racks .rack .wrapper .devices .device.position-u-38,
-.racks .rack .wrapper .listing-u .position.position-u-38 {
- bottom: 925px;
-}
-.racks .rack .wrapper .devices .device.position-u-39,
-.racks .rack .wrapper .listing-u .position.position-u-39 {
- bottom: 950px;
-}
-.racks .rack .wrapper .devices .device.position-u-40,
-.racks .rack .wrapper .listing-u .position.position-u-40 {
- bottom: 975px;
-}
-.racks .rack .wrapper .devices .device.position-u-41,
-.racks .rack .wrapper .listing-u .position.position-u-41 {
- bottom: 1000px;
-}
-.racks .rack .wrapper .devices .device.position-u-42,
-.racks .rack .wrapper .listing-u .position.position-u-42 {
- bottom: 1025px;
-}
-.racks .rack .wrapper .devices .device.position-u-43,
-.racks .rack .wrapper .listing-u .position.position-u-43 {
- bottom: 1050px;
-}
-.racks .rack .wrapper .devices .device.position-u-44,
-.racks .rack .wrapper .listing-u .position.position-u-44 {
- bottom: 1075px;
-}
-.racks .rack .wrapper .devices .device.position-u-45,
-.racks .rack .wrapper .listing-u .position.position-u-45 {
- bottom: 1100px;
-}
-.racks .rack .wrapper .devices .device.position-u-46,
-.racks .rack .wrapper .listing-u .position.position-u-46 {
- bottom: 1125px;
-}
-.racks .rack .wrapper .devices .device.position-u-47,
-.racks .rack .wrapper .listing-u .position.position-u-47 {
- bottom: 1150px;
-}
-.racks .rack .wrapper .devices .device.position-u-48,
-.racks .rack .wrapper .listing-u .position.position-u-48 {
- bottom: 1175px;
-}
-.racks .rack .wrapper .devices .device.height-u-0 {
- z-index: 10000;
- background-color: #f33;
- height: 25px;
-}
-.rack {
- float: left;
-}
-.racks {
- float: left;
- margin-left: 280px;
-}
-.racks .rack {
- border-radius: 5px;
- position: relative;
- border: 4px solid #444444;
- background: #666;
- width: 450px;
- box-sizing: content-box;
-}
-.racks .rack .name {
- font-size: 1.25em;
- color: #eee;
- font-weight: bold;
- text-align: center;
- border-bottom: 1px solid #666;
- box-shadow: 0 1px 1px #000;
- text-shadow: 2px 0 1px #000;
- height: 30px;
- line-height: 30px;
- position: relative;
-}
-.racks .rack .name:after {
- position: absolute;
- right: 10px;
- font-size: .825em;
- display: inline-block;
-}
-.racks .rack.front .wrapper .devices {
- width: 400px;
-}
-.racks .rack.front .wrapper .devices .device {
- width: 400px;
-}
-.racks .rack.front .wrapper .listing-u {
- z-index: 1000;
-}
-.racks .rack.front .wrapper .listing-u.left {
- box-shadow: 1px 0 1px rgba(0, 0, 0, 0.6);
-}
-.racks .rack.front .wrapper .listing-u.right {
- box-shadow: -1px 0 1px rgba(0, 0, 0, 0.6);
-}
-.racks .rack.front .wrapper .pdu {
- display: none;
-}
-.racks .rack.front .name:after {
- content: "front";
-}
-.racks .rack.back .name:after {
- content: "back";
-}
-.racks .rack.back {
- margin-left: 10px;
-}
-.racks .rack.rack-u-1 .wrapper {
- height: 25px;
-}
-.racks .rack.rack-u-2 .wrapper {
- height: 50px;
-}
-.racks .rack.rack-u-3 .wrapper {
- height: 75px;
-}
-.racks .rack.rack-u-4 .wrapper {
- height: 100px;
-}
-.racks .rack.rack-u-5 .wrapper {
- height: 125px;
-}
-.racks .rack.rack-u-6 .wrapper {
- height: 150px;
-}
-.racks .rack.rack-u-7 .wrapper {
- height: 175px;
-}
-.racks .rack.rack-u-8 .wrapper {
- height: 200px;
-}
-.racks .rack.rack-u-9 .wrapper {
- height: 225px;
-}
-.racks .rack.rack-u-10 .wrapper {
- height: 250px;
-}
-.racks .rack.rack-u-11 .wrapper {
- height: 275px;
-}
-.racks .rack.rack-u-12 .wrapper {
- height: 300px;
-}
-.racks .rack.rack-u-13 .wrapper {
- height: 325px;
-}
-.racks .rack.rack-u-14 .wrapper {
- height: 350px;
-}
-.racks .rack.rack-u-15 .wrapper {
- height: 375px;
-}
-.racks .rack.rack-u-16 .wrapper {
- height: 400px;
-}
-.racks .rack.rack-u-17 .wrapper {
- height: 425px;
-}
-.racks .rack.rack-u-18 .wrapper {
- height: 450px;
-}
-.racks .rack.rack-u-19 .wrapper {
- height: 475px;
-}
-.racks .rack.rack-u-20 .wrapper {
- height: 500px;
-}
-.racks .rack.rack-u-21 .wrapper {
- height: 525px;
-}
-.racks .rack.rack-u-22 .wrapper {
- height: 550px;
-}
-.racks .rack.rack-u-23 .wrapper {
- height: 575px;
-}
-.racks .rack.rack-u-24 .wrapper {
- height: 600px;
-}
-.racks .rack.rack-u-25 .wrapper {
- height: 625px;
-}
-.racks .rack.rack-u-26 .wrapper {
- height: 650px;
-}
-.racks .rack.rack-u-27 .wrapper {
- height: 675px;
-}
-.racks .rack.rack-u-28 .wrapper {
- height: 700px;
-}
-.racks .rack.rack-u-29 .wrapper {
- height: 725px;
-}
-.racks .rack.rack-u-30 .wrapper {
- height: 750px;
-}
-.racks .rack.rack-u-31 .wrapper {
- height: 775px;
-}
-.racks .rack.rack-u-32 .wrapper {
- height: 800px;
-}
-.racks .rack.rack-u-33 .wrapper {
- height: 825px;
-}
-.racks .rack.rack-u-34 .wrapper {
- height: 850px;
-}
-.racks .rack.rack-u-35 .wrapper {
- height: 875px;
-}
-.racks .rack.rack-u-36 .wrapper {
- height: 900px;
-}
-.racks .rack.rack-u-37 .wrapper {
- height: 925px;
-}
-.racks .rack.rack-u-38 .wrapper {
- height: 950px;
-}
-.racks .rack.rack-u-39 .wrapper {
- height: 975px;
-}
-.racks .rack.rack-u-40 .wrapper {
- height: 1000px;
-}
-.racks .rack.rack-u-41 .wrapper {
- height: 1025px;
-}
-.racks .rack.rack-u-42 .wrapper {
- height: 1050px;
-}
-.racks .rack.rack-u-43 .wrapper {
- height: 1075px;
-}
-.racks .rack.rack-u-44 .wrapper {
- height: 1100px;
-}
-.racks .rack.rack-u-45 .wrapper {
- height: 1125px;
-}
-.racks .rack.rack-u-46 .wrapper {
- height: 1150px;
-}
-.racks .rack.rack-u-47 .wrapper {
- height: 1175px;
-}
-.racks .rack.rack-u-48 .wrapper {
- height: 1200px;
-}
-.racks .rack .wrapper {
- background-color: #666;
- margin-top: 2px;
-}
-.racks .rack .wrapper .listing-u {
- background: #666;
- margin: 0;
- width: 25px;
- float: left;
- position: relative;
- min-height: 100%;
- height: 100%;
-}
-.racks .rack .wrapper .listing-u .position {
- font-size: .825em;
- border-top: 1px solid #888;
- border-bottom: 1px solid #000;
- position: absolute;
- height: 25px;
- line-height: 25px;
- color: #fff;
- text-align: center;
- width: 25px;
-}
-.racks .rack .wrapper .listing-u .position.active {
- border: 1px solid white;
-}
-.racks .rack .wrapper .pdu {
- position: relative;
- background: #ccc;
- min-height: 100%;
- height: 100%;
- width: 50px;
- float: left;
- z-index: 1000;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- flex-direction: column;
-}
-.racks .rack .wrapper .pdu.left {
- box-shadow: 1px 0 1px rgba(0, 0, 0, 0.6);
-}
-.racks .rack .wrapper .pdu.right {
- box-shadow: -1px 0 1px rgba(0, 0, 0, 0.6);
-}
-.racks .rack .wrapper .pdu pdu-item {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1 1 auto;
- margin: 3px 3px 0 3px;
- background: #999999;
- border: 1px solid #808080;
-}
-.racks .rack .wrapper .pdu pdu-item:nth-last-of-type(1) {
- margin-bottom: 3px;
-}
-.racks .rack .wrapper .pdu pdu-item:hover {
- border: 1px solid white;
-}
-.racks .rack .wrapper .pdu pdu-item .item {
- padding: 5px;
- font-size: .825em;
-}
-.racks .rack .wrapper .pdu pdu-item .item a {
- color: inherit;
-}
-.racks .rack .wrapper .devices {
- width: 300px;
- min-height: 100%;
- height: 100%;
- float: left;
- position: relative;
-}
-.racks .rack .wrapper .devices .device {
- cursor: pointer;
- width: 300px;
- position: absolute;
- height: 25px;
- border-bottom: 1px solid #78b622;
- border-top: 1px solid #aae15d;
- background: #93d932;
-}
-.racks .rack .wrapper .devices .device:hover,
-.racks .rack .wrapper .devices .device.active {
- border-bottom: 1px solid white;
- border-top: 1px solid white;
-}
-.racks .rack .wrapper .devices .device.accessory {
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAK0lEQVQYV2NkIBIwEqmOAVnhfxyawGrQFaLbANI82BRi8w+GG/GGFNHhCAARkQoLdFrYLgAAAABJRU5ErkJggg==) repeat-x;
- background-color: #fff;
-}
-.racks .rack .wrapper .devices .device.accessory:hover {
- border: 1px solid white;
-}
-.racks .rack .wrapper .devices .device.accessory .info {
- position: relative;
-}
-.racks .rack .wrapper .devices .device.accessory .info .asset-description {
- top: 0;
- left: 0;
- position: absolute;
- padding: 2px;
- background: #fff;
-}
-.racks .rack .wrapper .devices .device.accessory.brush {
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAKCAYAAABxJ+R3AAAAEklEQVQIW2NkgID/QMzIOBAcAH5DCguOmamFAAAAAElFTkSuQmCC);
- background-color: #fff;
- border-color: #ccc;
-}
-.racks .rack .wrapper .devices .device.accessory.brush:hover {
- border: 1px solid white;
-}
-.racks .rack .wrapper .devices .device.accessory.organizer {
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
- background-color: #fff;
- border-color: #ccc;
-}
-.racks .rack .wrapper .devices .device.accessory.organizer:hover {
- border: 1px solid white;
-}
-.racks .rack .wrapper .devices .device.empty {
- background: #fff;
- line-height: 25px;
- border-bottom-color: #bbb;
- border-top-color: #ddd;
-}
-.racks .rack .wrapper .devices .device.empty:before,
-.racks .rack .wrapper .devices .device.empty:after {
- position: absolute;
- content: ":";
- line-height: 1em;
-}
-.racks .rack .wrapper .devices .device.empty:before {
- left: 10px;
-}
-.racks .rack .wrapper .devices .device.empty:after {
- right: 10px;
-}
-.racks .rack .wrapper .devices .device.empty:hover,
-.racks .rack .wrapper .devices .device.empty.active {
- border: 1px solid white;
-}
-.racks .rack .wrapper .devices .device.height-u-1 {
- height: 25px;
-}
-.racks .rack .wrapper .devices .device.height-u-2 {
- height: 50px;
-}
-.racks .rack .wrapper .devices .device.height-u-3 {
- height: 75px;
-}
-.racks .rack .wrapper .devices .device.height-u-4 {
- height: 100px;
-}
-.racks .rack .wrapper .devices .device.height-u-5 {
- height: 125px;
-}
-.racks .rack .wrapper .devices .device.height-u-6 {
- height: 150px;
-}
-.racks .rack .wrapper .devices .device.height-u-7 {
- height: 175px;
-}
-.racks .rack .wrapper .devices .device.height-u-8 {
- height: 200px;
-}
-.racks .rack .wrapper .devices .device.height-u-9 {
- height: 225px;
-}
-.racks .rack .wrapper .devices .device.height-u-10 {
- height: 250px;
-}
-.racks .rack .wrapper .devices .device.height-u-11 {
- height: 275px;
-}
-.racks .rack .wrapper .devices .device.height-u-12 {
- height: 300px;
-}
-.racks .rack .wrapper .devices .device.height-u-13 {
- height: 325px;
-}
-.racks .rack .wrapper .devices .device.height-u-14 {
- height: 350px;
-}
-.racks .rack .wrapper .devices .device.height-u-15 {
- height: 375px;
-}
-.racks .rack .wrapper .devices .device.height-u-16 {
- height: 400px;
-}
-.racks .rack .wrapper .devices .device.height-u-17 {
- height: 425px;
-}
-.racks .rack .wrapper .devices .device.height-u-18 {
- height: 450px;
-}
-.racks .rack .wrapper .devices .device.height-u-19 {
- height: 475px;
-}
-.racks .rack .wrapper .devices .device.height-u-20 {
- height: 500px;
-}
-.racks .rack .wrapper .devices .device.height-u-21 {
- height: 525px;
-}
-.racks .rack .wrapper .devices .device.height-u-22 {
- height: 550px;
-}
-.racks .rack .wrapper .devices .device.height-u-23 {
- height: 575px;
-}
-.racks .rack .wrapper .devices .device.height-u-24 {
- height: 600px;
-}
-.racks .rack .wrapper .devices .device.height-u-25 {
- height: 625px;
-}
-.racks .rack .wrapper .devices .device.height-u-26 {
- height: 650px;
-}
-.racks .rack .wrapper .devices .device.height-u-27 {
- height: 675px;
-}
-.racks .rack .wrapper .devices .device.height-u-28 {
- height: 700px;
-}
-.racks .rack .wrapper .devices .device.height-u-29 {
- height: 725px;
-}
-.racks .rack .wrapper .devices .device.height-u-30 {
- height: 750px;
-}
-.racks .rack .wrapper .devices .device.height-u-31 {
- height: 775px;
-}
-.racks .rack .wrapper .devices .device.height-u-32 {
- height: 800px;
-}
-.racks .rack .wrapper .devices .device.height-u-33 {
- height: 825px;
-}
-.racks .rack .wrapper .devices .device.height-u-34 {
- height: 850px;
-}
-.racks .rack .wrapper .devices .device.height-u-35 {
- height: 875px;
-}
-.racks .rack .wrapper .devices .device.height-u-36 {
- height: 900px;
-}
-.racks .rack .wrapper .devices .device.height-u-37 {
- height: 925px;
-}
-.racks .rack .wrapper .devices .device.height-u-38 {
- height: 950px;
-}
-.racks .rack .wrapper .devices .device.height-u-39 {
- height: 975px;
-}
-.racks .rack .wrapper .devices .device.height-u-40 {
- height: 1000px;
-}
-.racks .rack .wrapper .devices .device.height-u-41 {
- height: 1025px;
-}
-.racks .rack .wrapper .devices .device.height-u-42 {
- height: 1050px;
-}
-.racks .rack .wrapper .devices .device.height-u-43 {
- height: 1075px;
-}
-.racks .rack .wrapper .devices .device.height-u-44 {
- height: 1100px;
-}
-.racks .rack .wrapper .devices .device.height-u-45 {
- height: 1125px;
-}
-.racks .rack .wrapper .devices .device.height-u-46 {
- height: 1150px;
-}
-.racks .rack .wrapper .devices .device.height-u-47 {
- height: 1175px;
-}
-.racks .rack .wrapper .devices .device.height-u-48 {
- height: 1200px;
-}
-.racks .rack .wrapper .devices .device.height-u-0 .sn,
-.racks .rack .wrapper .devices .device.height-u-1 .sn {
- display: none;
-}
-.racks .rack .wrapper .devices .device.position-u-1 .info .barcode,
-.racks .rack .wrapper .devices .device.position-u-1 .info .asset-description {
- top: 0;
-}
-.racks .rack .wrapper .devices .device .info {
- display: block;
- color: #333;
- line-height: 1em;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- font-size: .825em;
- position: relative;
- min-height: 100%;
-}
-.racks .rack .wrapper .devices .device .info .barcode,
-.racks .rack .wrapper .devices .device .info .asset-description,
-.racks .rack .wrapper .devices .device .info .sn,
-.racks .rack .wrapper .devices .device .info .accessory-remarks {
- position: absolute;
-}
-.racks .rack .wrapper .devices .device .info .barcode {
- right: 3px;
- bottom: 3px;
-}
-.racks .rack .wrapper .devices .device .info .sn {
- left: 3px;
- bottom: 3px;
-}
-.racks .rack .wrapper .devices .device .info .asset-description {
- color: #333;
- font-weight: bold;
- left: 3px;
- top: 3px;
-}
-.racks .rack .wrapper .devices .device .info .accessory-remarks {
- right: 3px;
- bottom: 3px;
- color: #333;
- font-weight: bold;
- background-color: #fbf7aa;
- padding: 1px 5px;
-}
-.racks .rack .wrapper .devices .device .children {
- position: absolute;
- top: 25px;
- bottom: 25px;
- min-width: 100%;
- max-width: 100%;
- width: 100%;
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-align-items: stretch;
- -moz-align-items: stretch;
- align-items: stretch;
- -webkit-align-content: stretch;
- moz-align-content: stretch;
- align-content: stretch;
- -webkit-flex-flow: row wrap;
- -moz-flex-flow: row wrap;
- flex-flow: row wrap;
-}
-.racks .rack .wrapper .devices .device .children .child {
- cursor: pointer;
-}
-.racks .rack .wrapper .devices .device .children [class*="slot-"] {
- width: 50px;
- box-sizing: border-box;
- font-size: .825em;
- background: rgba(255, 255, 255, 0.3);
- border: 1px solid rgba(0, 0, 0, 0.2);
- color: #000;
- display: block;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-.racks .rack .wrapper .devices .device .children [class*="slot-"]:hover {
- border: 1px solid white;
-}
-.racks .rack .wrapper .devices .device .children [class*="slot-"] .slot_no {
- display: block;
- overflow: hidden;
- color: #222;
- background: rgba(0, 0, 0, 0.3);
- padding: 2px;
-}
-.racks .rack.front .wrapper .devices .device.height-u-3 .children [class*="slot-"] .slot_no {
- display: inline-block;
-}
-.racks .rack.front .wrapper .devices .device.rows-1.cols-2 [class*="slot-"] {
- width: 200px;
-}
-.racks .rack.front .wrapper .devices .device.rows-2.cols-4 [class*="slot-"] {
- width: 100px;
-}
-.racks .rack.front .wrapper .devices .device.rows-2.cols-6 [class*="slot-"] {
- width: 66.66666667px;
-}
-.racks .rack.front .wrapper .devices .device.rows-2.cols-8 [class*="slot-"] {
- width: 50px;
-}
-.racks .rack.front .wrapper .devices .device.rows-2.cols-8.half-slots [class$="A"],
-.racks .rack.front .wrapper .devices .device.rows-2.cols-8.half-slots [class$="B"] {
- width: 25px;
-}
-.racks .rack.front .wrapper .devices .device.rows-4.cols-2 [class*="slot-"] {
- width: 200px;
-}
-.racks .rack.back .wrapper .devices .device.height-u-3 .children [class*="slot-"] .slot_no {
- display: inline-block;
-}
-.racks .rack.back .wrapper .devices .device.rows-1.cols-2 [class*="slot-"] {
- width: 150px;
-}
-.racks .rack.back .wrapper .devices .device.rows-2.cols-4 [class*="slot-"] {
- width: 75px;
-}
-.racks .rack.back .wrapper .devices .device.rows-2.cols-6 [class*="slot-"] {
- width: 50px;
-}
-.racks .rack.back .wrapper .devices .device.rows-2.cols-8 [class*="slot-"] {
- width: 37.5px;
-}
-.racks .rack.back .wrapper .devices .device.rows-2.cols-8.half-slots [class$="A"],
-.racks .rack.back .wrapper .devices .device.rows-2.cols-8.half-slots [class$="B"] {
- width: 18.75px;
-}
-.racks .rack.back .wrapper .devices .device.rows-4.cols-2 [class*="slot-"] {
- width: 150px;
-}
-@media all and (max-width: 1500px) {
- .racks .rack {
- width: 350px;
- }
- .racks .rack.front .wrapper .devices {
- width: 300px;
- }
- .racks .rack.front .wrapper .devices .device {
- width: 300px;
- }
- .racks .rack.front .wrapper .devices .device.height-u-3 .children [class*="slot-"] .slot_no {
- display: inline-block;
- }
- .racks .rack.front .wrapper .devices .device.rows-1.cols-2 [class*="slot-"] {
- width: 150px;
- }
- .racks .rack.front .wrapper .devices .device.rows-2.cols-4 [class*="slot-"] {
- width: 75px;
- }
- .racks .rack.front .wrapper .devices .device.rows-2.cols-6 [class*="slot-"] {
- width: 50px;
- }
- .racks .rack.front .wrapper .devices .device.rows-2.cols-8 [class*="slot-"] {
- width: 37.5px;
- }
- .racks .rack.front .wrapper .devices .device.rows-2.cols-8.half-slots [class$="A"],
- .racks .rack.front .wrapper .devices .device.rows-2.cols-8.half-slots [class$="B"] {
- width: 18.75px;
- }
- .racks .rack.front .wrapper .devices .device.rows-4.cols-2 [class*="slot-"] {
- width: 150px;
- }
- .racks .rack.back .wrapper .devices {
- width: 200px;
- }
- .racks .rack.back .wrapper .devices .device {
- width: 200px;
- }
- .racks .rack.back .wrapper .devices .device.height-u-3 .children [class*="slot-"] .slot_no {
- display: inline-block;
- }
- .racks .rack.back .wrapper .devices .device.rows-1.cols-2 [class*="slot-"] {
- width: 100px;
- }
- .racks .rack.back .wrapper .devices .device.rows-2.cols-4 [class*="slot-"] {
- width: 50px;
- }
- .racks .rack.back .wrapper .devices .device.rows-2.cols-6 [class*="slot-"] {
- width: 33.33333333px;
- }
- .racks .rack.back .wrapper .devices .device.rows-2.cols-8 [class*="slot-"] {
- width: 25px;
- }
- .racks .rack.back .wrapper .devices .device.rows-2.cols-8.half-slots [class$="A"],
- .racks .rack.back .wrapper .devices .device.rows-2.cols-8.half-slots [class$="B"] {
- width: 12.5px;
- }
- .racks .rack.back .wrapper .devices .device.rows-4.cols-2 [class*="slot-"] {
- width: 100px;
- }
-}
diff --git a/src/ralph/settings/base.py b/src/ralph/settings/base.py
index d22710bcf7..facef26cbe 100644
--- a/src/ralph/settings/base.py
+++ b/src/ralph/settings/base.py
@@ -87,6 +87,14 @@
STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'var', 'static')
+
+STATICFILES_DIRS = (
+ os.path.join(BASE_DIR, 'static'),
+)
+
+STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage' # noqa
+
# adapt message's tags to bootstrap
MESSAGE_TAGS = {
messages.DEBUG: 'info',
diff --git a/src/ralph/settings/test.py b/src/ralph/settings/test.py
index 8d14d52979..08eb68d864 100644
--- a/src/ralph/settings/test.py
+++ b/src/ralph/settings/test.py
@@ -16,4 +16,10 @@
'ralph.tests',
)
+PASSWORD_HASHERS = (
+ 'django.contrib.auth.hashers.MD5PasswordHasher',
+)
+
+STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'
+
ROOT_URLCONF = 'ralph.urls.base'
diff --git a/src/ralph/static/README b/src/ralph/static/README
new file mode 100644
index 0000000000..b38ca67e4a
--- /dev/null
+++ b/src/ralph/static/README
@@ -0,0 +1,5 @@
+Please add some static files (e.g.: css, js, fonts) here, except 3rd party!
+
+The ``vendor`` directory contains 3rd party libs. If you want add some external library (e.g.: jquery, bootstrap) please edit ``gulp.js`` and ``bower.json``.
+
+The ``css`` directory contains compiled SCSS files.
diff --git a/src/ralph/static/src/scss/_colors.scss b/src/ralph/static/src/scss/_colors.scss
new file mode 100644
index 0000000000..119a22ed91
--- /dev/null
+++ b/src/ralph/static/src/scss/_colors.scss
@@ -0,0 +1,307 @@
+//== Google material colors
+
+//## Red
+$mdc-red-50: #FFEBEE;
+$mdc-red-100: #FFCDD2;
+$mdc-red-200: #EF9A9A;
+$mdc-red-300: #E57373;
+$mdc-red-400: #EF5350;
+$mdc-red-500: #F44336;
+$mdc-red-600: #E53935;
+$mdc-red-700: #D32F2F;
+$mdc-red-800: #C62828;
+$mdc-red-900: #B71C1C;
+$mdc-red-A100: #FF8A80;
+$mdc-red-A200: #FF5252;
+$mdc-red-A400: #FF1744;
+$mdc-red-A700: #D50000;
+
+//## Pink
+$mdc-pink-50: #FCE4EC;
+$mdc-pink-100: #F8BBD0;
+$mdc-pink-200: #F48FB1;
+$mdc-pink-300: #F06292;
+$mdc-pink-400: #EC407A;
+$mdc-pink-500: #E91E63;
+$mdc-pink-600: #D81B60;
+$mdc-pink-700: #C2185B;
+$mdc-pink-800: #AD1457;
+$mdc-pink-900: #880E4F;
+$mdc-pink-A100: #FF80AB;
+$mdc-pink-A200: #FF4081;
+$mdc-pink-A400: #F50057;
+$mdc-pink-A700: #C51162;
+
+//## Purple
+$mdc-purple-50: #F3E5F5;
+$mdc-purple-100: #E1BEE7;
+$mdc-purple-200: #CE93D8;
+$mdc-purple-300: #BA68C8;
+$mdc-purple-400: #AB47BC;
+$mdc-purple-500: #9C27B0;
+$mdc-purple-600: #8E24AA;
+$mdc-purple-700: #7B1FA2;
+$mdc-purple-800: #6A1B9A;
+$mdc-purple-900: #4A148C;
+$mdc-purple-A100: #EA80FC;
+$mdc-purple-A200: #E040FB;
+$mdc-purple-A400: #D500F9;
+$mdc-purple-A700: #AA00FF;
+
+//## Deep Purple
+$mdc-deep-purple-50: #EDE7F6;
+$mdc-deep-purple-100: #D1C4E9;
+$mdc-deep-purple-200: #B39DDB;
+$mdc-deep-purple-300: #9575CD;
+$mdc-deep-purple-400: #7E57C2;
+$mdc-deep-purple-500: #673AB7;
+$mdc-deep-purple-600: #5E35B1;
+$mdc-deep-purple-700: #512DA8;
+$mdc-deep-purple-800: #4527A0;
+$mdc-deep-purple-900: #311B92;
+$mdc-deep-purple-A100: #B388FF;
+$mdc-deep-purple-A200: #7C4DFF;
+$mdc-deep-purple-A400: #651FFF;
+$mdc-deep-purple-A700: #6200EA;
+
+//## Indigo
+$mdc-indigo-50: #E8EAF6;
+$mdc-indigo-100: #C5CAE9;
+$mdc-indigo-200: #9FA8DA;
+$mdc-indigo-300: #7986CB;
+$mdc-indigo-400: #5C6BC0;
+$mdc-indigo-500: #3F51B5;
+$mdc-indigo-600: #3949AB;
+$mdc-indigo-700: #303F9F;
+$mdc-indigo-800: #283593;
+$mdc-indigo-900: #1A237E;
+$mdc-indigo-A100: #8C9EFF;
+$mdc-indigo-A200: #536DFE;
+$mdc-indigo-A400: #3D5AFE;
+$mdc-indigo-A700: #304FFE;
+
+//## Blue
+$mdc-blue-50: #E3F2FD;
+$mdc-blue-100: #BBDEFB;
+$mdc-blue-200: #90CAF9;
+$mdc-blue-300: #64B5F6;
+$mdc-blue-400: #42A5F5;
+$mdc-blue-500: #2196F3;
+$mdc-blue-600: #1E88E5;
+$mdc-blue-700: #1976D2;
+$mdc-blue-800: #1565C0;
+$mdc-blue-900: #0D47A1;
+$mdc-blue-A100: #82B1FF;
+$mdc-blue-A200: #448AFF;
+$mdc-blue-A400: #2979FF;
+$mdc-blue-A700: #2962FF;
+
+//## Light Blue
+$mdc-light-blue-50: #E1F5FE;
+$mdc-light-blue-100: #B3E5FC;
+$mdc-light-blue-200: #81D4FA;
+$mdc-light-blue-300: #4FC3F7;
+$mdc-light-blue-400: #29B6F6;
+$mdc-light-blue-500: #03A9F4;
+$mdc-light-blue-600: #039BE5;
+$mdc-light-blue-700: #0288D1;
+$mdc-light-blue-800: #0277BD;
+$mdc-light-blue-900: #01579B;
+$mdc-light-blue-A100: #80D8FF;
+$mdc-light-blue-A200: #40C4FF;
+$mdc-light-blue-A400: #00B0FF;
+$mdc-light-blue-A700: #0091EA;
+
+//## Cyan
+$mdc-cyan-50: #E0F7FA;
+$mdc-cyan-100: #B2EBF2;
+$mdc-cyan-200: #80DEEA;
+$mdc-cyan-300: #4DD0E1;
+$mdc-cyan-400: #26C6DA;
+$mdc-cyan-500: #00BCD4;
+$mdc-cyan-600: #00ACC1;
+$mdc-cyan-700: #0097A7;
+$mdc-cyan-800: #00838F;
+$mdc-cyan-900: #006064;
+$mdc-cyan-A100: #84FFFF;
+$mdc-cyan-A200: #18FFFF;
+$mdc-cyan-A400: #00E5FF;
+$mdc-cyan-A700: #00B8D4;
+
+//## Teal
+$mdc-teal-50: #E0F2F1;
+$mdc-teal-100: #B2DFDB;
+$mdc-teal-200: #80CBC4;
+$mdc-teal-300: #4DB6AC;
+$mdc-teal-400: #26A69A;
+$mdc-teal-500: #009688;
+$mdc-teal-600: #00897B;
+$mdc-teal-700: #00796B;
+$mdc-teal-800: #00695C;
+$mdc-teal-900: #004D40;
+$mdc-teal-A100: #A7FFEB;
+$mdc-teal-A200: #64FFDA;
+$mdc-teal-A400: #1DE9B6;
+$mdc-teal-A700: #00BFA5;
+
+//## Green
+$mdc-green-50: #E8F5E9;
+$mdc-green-100: #C8E6C9;
+$mdc-green-200: #A5D6A7;
+$mdc-green-300: #81C784;
+$mdc-green-400: #66BB6A;
+$mdc-green-500: #4CAF50;
+$mdc-green-600: #43A047;
+$mdc-green-700: #388E3C;
+$mdc-green-800: #2E7D32;
+$mdc-green-900: #1B5E20;
+$mdc-green-A100: #B9F6CA;
+$mdc-green-A200: #69F0AE;
+$mdc-green-A400: #00E676;
+$mdc-green-A700: #00C853;
+
+//## Light Green
+$mdc-light-green-50: #F1F8E9;
+$mdc-light-green-100: #DCEDC8;
+$mdc-light-green-200: #C5E1A5;
+$mdc-light-green-300: #AED581;
+$mdc-light-green-400: #9CCC65;
+$mdc-light-green-500: #8BC34A;
+$mdc-light-green-600: #7CB342;
+$mdc-light-green-700: #689F38;
+$mdc-light-green-800: #558B2F;
+$mdc-light-green-900: #33691E;
+$mdc-light-green-A100: #CCFF90;
+$mdc-light-green-A200: #B2FF59;
+$mdc-light-green-A400: #76FF03;
+$mdc-light-green-A700: #64DD17;
+
+//## Lime
+$mdc-lime-50: #F9FBE7;
+$mdc-lime-100: #F0F4C3;
+$mdc-lime-200: #E6EE9C;
+$mdc-lime-300: #DCE775;
+$mdc-lime-400: #D4E157;
+$mdc-lime-500: #CDDC39;
+$mdc-lime-600: #C0CA33;
+$mdc-lime-700: #AFB42B;
+$mdc-lime-800: #9E9D24;
+$mdc-lime-900: #827717;
+$mdc-lime-A100: #F4FF81;
+$mdc-lime-A200: #EEFF41;
+$mdc-lime-A400: #C6FF00;
+$mdc-lime-A700: #AEEA00;
+
+//## Yellow
+$mdc-yellow-50: #FFFDE7;
+$mdc-yellow-100: #FFF9C4;
+$mdc-yellow-200: #FFF59D;
+$mdc-yellow-300: #FFF176;
+$mdc-yellow-400: #FFEE58;
+$mdc-yellow-500: #FFEB3B;
+$mdc-yellow-600: #FDD835;
+$mdc-yellow-700: #FBC02D;
+$mdc-yellow-800: #F9A825;
+$mdc-yellow-900: #F57F17;
+$mdc-yellow-A100: #FFFF8D;
+$mdc-yellow-A200: #FFFF00;
+$mdc-yellow-A400: #FFEA00;
+$mdc-yellow-A700: #FFD600;
+
+//## Amber
+$mdc-amber-50: #FFF8E1;
+$mdc-amber-100: #FFECB3;
+$mdc-amber-200: #FFE082;
+$mdc-amber-300: #FFD54F;
+$mdc-amber-400: #FFCA28;
+$mdc-amber-500: #FFC107;
+$mdc-amber-600: #FFB300;
+$mdc-amber-700: #FFA000;
+$mdc-amber-800: #FF8F00;
+$mdc-amber-900: #FF6F00;
+$mdc-amber-A100: #FFE57F;
+$mdc-amber-A200: #FFD740;
+$mdc-amber-A400: #FFC400;
+$mdc-amber-A700: #FFAB00;
+
+//## Orange
+$mdc-orange-50: #FFF3E0;
+$mdc-orange-100: #FFE0B2;
+$mdc-orange-200: #FFCC80;
+$mdc-orange-300: #FFB74D;
+$mdc-orange-400: #FFA726;
+$mdc-orange-500: #FF9800;
+$mdc-orange-600: #FB8C00;
+$mdc-orange-700: #F57C00;
+$mdc-orange-800: #EF6C00;
+$mdc-orange-900: #E65100;
+$mdc-orange-A100: #FFD180;
+$mdc-orange-A200: #FFAB40;
+$mdc-orange-A400: #FF9100;
+$mdc-orange-A700: #FF6D00;
+
+//## Deep Orange
+$mdc-deep-orange-50: #FBE9E7;
+$mdc-deep-orange-100: #FFCCBC;
+$mdc-deep-orange-200: #FFAB91;
+$mdc-deep-orange-300: #FF8A65;
+$mdc-deep-orange-400: #FF7043;
+$mdc-deep-orange-500: #FF5722;
+$mdc-deep-orange-600: #F4511E;
+$mdc-deep-orange-700: #E64A19;
+$mdc-deep-orange-800: #D84315;
+$mdc-deep-orange-900: #BF360C;
+$mdc-deep-orange-A100: #FF9E80;
+$mdc-deep-orange-A200: #FF6E40;
+$mdc-deep-orange-A400: #FF3D00;
+$mdc-deep-orange-A700: #DD2C00;
+
+//## Brown
+$mdc-brown-50: #EFEBE9;
+$mdc-brown-100: #D7CCC8;
+$mdc-brown-200: #BCAAA4;
+$mdc-brown-300: #A1887F;
+$mdc-brown-400: #8D6E63;
+$mdc-brown-500: #795548;
+$mdc-brown-600: #6D4C41;
+$mdc-brown-700: #5D4037;
+$mdc-brown-800: #4E342E;
+$mdc-brown-900: #3E2723;
+
+//## Grey
+$mdc-grey-50: #FAFAFA;
+$mdc-grey-100: #F5F5F5;
+$mdc-grey-200: #EEEEEE;
+$mdc-grey-300: #E0E0E0;
+$mdc-grey-400: #BDBDBD;
+$mdc-grey-500: #9E9E9E;
+$mdc-grey-600: #757575;
+$mdc-grey-700: #616161;
+$mdc-grey-800: #424242;
+$mdc-grey-900: #212121;
+
+//## Blue Grey
+$mdc-blue-grey-50: #ECEFF1;
+$mdc-blue-grey-100: #CFD8DC;
+$mdc-blue-grey-200: #B0BEC5;
+$mdc-blue-grey-300: #90A4AE;
+$mdc-blue-grey-400: #78909C;
+$mdc-blue-grey-500: #607D8B;
+$mdc-blue-grey-600: #546E7A;
+$mdc-blue-grey-700: #455A64;
+$mdc-blue-grey-800: #37474F;
+$mdc-blue-grey-900: #263238;
+
+//== Alpha values for grey text, icons, and dividers
+
+//## White
+$mdc-white-lighter: rgba(255,255,255,.12); // Dividers
+$mdc-white-light: rgba(255,255,255,.30); // Disabled / Hint Text
+$mdc-white-dark: rgba(255,255,255,.70); // Secondary Text
+$mdc-white-darker: rgba(255,255,255, 1); // Text / Icons
+
+//## Black
+$mdc-black-lighter: rgba(0,0,0,.12); // Dividers
+$mdc-black-light: rgba(0,0,0,.26); // Disabled / Hint Text
+$mdc-black-dark: rgba(0,0,0,.54); // Secondary text / Icons
+$mdc-black-darker: rgba(0,0,0,.87); // Text
diff --git a/src/ralph/static/src/scss/_overrides.scss b/src/ralph/static/src/scss/_overrides.scss
new file mode 100644
index 0000000000..bbd98834d5
--- /dev/null
+++ b/src/ralph/static/src/scss/_overrides.scss
@@ -0,0 +1,21 @@
+@import 'variables';
+
+.vLargeTextField, .vXMLLargeTextField {
+ width: 100%;
+}
+
+select {
+ width: auto;
+ padding-right: 20px;
+ margin-right: 10px;
+}
+
+.datepicker {
+ td, th {
+ &.active {
+ &.day {background: $datepicker-active-color;}
+ &.year {background: $datepicker-active-color;}
+ }
+ span.active {background: $datepicker-active-color;}
+ }
+}
diff --git a/src/ralph/static/src/scss/_settings.scss b/src/ralph/static/src/scss/_settings.scss
new file mode 100644
index 0000000000..b8c3d8b451
--- /dev/null
+++ b/src/ralph/static/src/scss/_settings.scss
@@ -0,0 +1,62 @@
+@import 'foundation/functions';
+@import 'colors';
+// @import 'foundation/settings';
+
+$fa-font-path: '../vendor/fonts';
+
+$base-font-size: 12px;
+$rem-base: $base-font-size;
+
+$body-bg: #fff;
+$global-radius: 0;
+
+// $primary-color: #EF6C00;
+$primary-color: $mdc-blue-600;
+
+$success-color: #43A047;
+
+$panel-bg: $mdc-blue-grey-50;
+$crumb-bg: $mdc-blue-grey-50;
+
+$crumb-padding: rem-calc(10 12 10);
+$crumb-side-padding: rem-calc(6);
+$crumb-border-size: 0;
+$crumb-border-style: none;
+$crumb-border-color: transparent;
+$crumb-font-color: $primary-color;
+$crumb-font-transform: normal;
+
+$button-tny: rem-calc(7);
+$button-sml: rem-calc(8);
+$button-med: rem-calc(10);
+$button-lrg: rem-calc(12);
+$button-font-tny: rem-calc(11);
+$button-font-sml: rem-calc(12);
+$button-font-med: rem-calc(13);
+$button-font-lrg: rem-calc(14);
+$button-margin-bottom: 0;
+$button-radius: 0;
+
+$form-label-font-size: rem-calc(12);
+$fieldset-border-style: solid;
+$fieldset-border-width: 1px;
+$fieldset-border-color: #ccc;
+$fieldset-padding: rem-calc(30);
+
+
+$topbar-height: rem-calc(40);
+$topbar-margin-bottom: 0;
+$topbar-link-color-hover: #fff;
+$topbar-link-bg-hover: $primary-color;
+$topbar-dropdown-link-color: #fff;
+$topbar-dropdown-link-bg-hover: $primary-color;
+$topbar-dropdown-label-color: #fff;
+
+$f-dropdown-max-width: 280px;
+
+$datepicker-active-color: $primary-color;
+
+
+$tabs-border-color: #ccc;
+$tabs-content-bg-color: #fafafa;
+$fieldset-bg-color: $tabs-content-bg-color;
diff --git a/src/ralph/static/src/scss/_styles.scss b/src/ralph/static/src/scss/_styles.scss
new file mode 100644
index 0000000000..6f6ccfca01
--- /dev/null
+++ b/src/ralph/static/src/scss/_styles.scss
@@ -0,0 +1,120 @@
+/* all app scss styles here */
+body {
+ background-color: #fff;
+ .popup {
+ .content {
+ margin-top: 15px;
+ }
+ }
+}
+#content-main {
+ padding-bottom: 60px;
+ .content {
+ border: 1px solid $tabs-border-color;
+ padding-top: rem-calc(20);
+ background-color: $tabs-content-bg-color;
+ }
+}
+
+.action-counter {
+ margin-left: 5px;
+}
+
+.row {
+ width: 100%;
+ max-width: 100%;
+}
+
+.row .admin_bottom .row {
+ max-width: 100%;
+ margin: 0;
+}
+
+.row .row {
+ margin: 0;
+ width: 100%;
+}
+
+.admin_bottom {
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ margin: 0;
+ padding: 10px 0;
+}
+
+.breadcrumbs {
+ border-bottom: 1px solid darken($crumb-bg, 10%);
+ margin-bottom: 10px;
+}
+
+#site-name > a {
+ color: #fff;
+ text-shadow: 0 0 5px rgba(255, 255, 255, .6);
+ &:hover {
+ text-shadow: 0 0 7px rgb(255, 255, 255);
+ background: $topbar-bg;
+ }
+}
+
+select {
+ background-color: #fff;
+}
+
+label, label.inline, select, #{text-inputs(all, 'input')} {
+ padding: 0.4rem;
+ height: auto;
+}
+
+button.button.search {
+ background-color: #5B5B5B;
+ &:hover {
+ background-color: darken($primary-color, 5%);
+ }
+}
+
+.field-row.error {
+ background-color: $alert-color;
+ margin-bottom: 5px;
+ .error small.error, label.error {
+ margin-bottom: 0;
+ color: $oil;
+ }
+}
+h1 {
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 1.8rem;
+ margin-bottom: rem-calc(4);
+ padding-bottom: 0;
+}
+.header-wrapper {
+ margin-bottom: 5px;
+ .header {
+ .header-toolbar {
+ float: right;
+ }
+ }
+}
+
+
+input.datepicker {
+ width: 100px;
+}
+
+.add-related .fa {
+ color: $success-color;
+}
+
+.change-related .fa {
+ color: $warning-color;
+}
+
+.delete-related .fa {
+ color: $alert-color;
+}
+
+.with-icons {
+ line-height: 3rem;
+}
diff --git a/src/ralph/static/src/scss/components/_functions.scss b/src/ralph/static/src/scss/components/_functions.scss
new file mode 100644
index 0000000000..927478c0db
--- /dev/null
+++ b/src/ralph/static/src/scss/components/_functions.scss
@@ -0,0 +1,61 @@
+@import 'variables';
+@mixin active-border() {
+ border: 1px solid white;
+}
+
+@mixin generate-x-position($n) {
+ @for $i from 0 through $n {
+ &.x-#{$i} {
+ left: $grid-size * $i;
+ }
+ }
+}
+
+@mixin generate-y-position($n) {
+ @for $i from 0 through $n {
+ &.y-#{$i} {
+ top: $grid-size * $i;
+ }
+ }
+}
+@mixin generate-rows($n) {
+ @for $i from 1 through $n {
+ &.rows-#{$i} {
+ min-height: $grid-size * $i;
+ max-height: $grid-size * $i;
+ height: $grid-size * $i;
+ }
+ }
+}
+@mixin generate-cols($n) {
+ @for $i from 1 through $n {
+ &.cols-#{$i} {
+ width: $grid-size * $i;
+ }
+ }
+}
+
+
+@mixin generate-racks($n) {
+ @for $i from 1 through $n {
+ &.rack-u-#{$i} .wrapper {
+ height: $u-height * $i;
+ }
+ }
+}
+
+@mixin generate-u($n) {
+ @for $i from 1 through $n {
+ &.height-u-#{$i} {
+ height: $u-height * $i;
+ }
+ }
+}
+
+@mixin generate-position($n) {
+ @for $i from 0 through $n {
+ &.position-u-#{$i} {
+ bottom: $u-height * ($i - 1);
+ }
+ }
+}
diff --git a/src/ralph/static/src/scss/components/_variables.scss b/src/ralph/static/src/scss/components/_variables.scss
new file mode 100644
index 0000000000..09ab92c0c0
--- /dev/null
+++ b/src/ralph/static/src/scss/components/_variables.scss
@@ -0,0 +1,25 @@
+$max-u: 48;
+$rack-border-width: 4px;
+$rack-width: 450px;
+$rack-width-small: 350px;
+$pdu-width: 50px;
+$listing-u-width: 25px;
+$devices-width-back: ($rack-width - ($pdu-width * 2) - ($listing-u-width * 2));
+$devices-width-front: ($rack-width - ($listing-u-width * 2));
+$devices-width-back-small: ($rack-width-small - ($pdu-width * 2) - ($listing-u-width * 2));
+$devices-width-front-small: ($rack-width-small - ($listing-u-width * 2));
+$device-background: rgb(147, 217, 50);
+$u-height: 25px;
+$info-padding: 3px;
+$rack-info-width: 270px;
+
+$default-slots-per-row: 5;
+$default-slot-height: 50px;
+$default-slot-width: $devices-width-front / $default-slots-per-row;
+
+$grid-color: rgba(255, 255, 255, 0.5);
+$grid-size: 40px;
+$grid-count: 40;
+
+$border-info: 1px solid #ccc;
+$rack-background: #888;
diff --git a/src/ralph/dc_view/static/css/data_center.less b/src/ralph/static/src/scss/components/data_center.scss
similarity index 74%
rename from src/ralph/dc_view/static/css/data_center.less
rename to src/ralph/static/src/scss/components/data_center.scss
index e46e26618c..56777772e5 100644
--- a/src/ralph/dc_view/static/css/data_center.less
+++ b/src/ralph/static/src/scss/components/data_center.scss
@@ -1,40 +1,14 @@
-@import "_variables.less";
+@import 'variables';
+@import 'functions';
-.generate-x-position(@n, @i: 1) when (@i =< @n) {
- &.x-@{i} {
- left: @grid-size * @i;
- }
- .generate-x-position(@n, (@i + 1));
-}
-.generate-y-position(@n, @i: 1) when (@i =< @n) {
- &.y-@{i} {
- top: @grid-size * @i;
- }
- .generate-y-position(@n, (@i + 1));
-}
-
-.generate-rows(@n, @i: 1) when (@i =< @n) {
- &.rows-@{i} {
- min-height: @grid-size * @i;
- max-height: @grid-size * @i;
- height: @grid-size * @i;
- }
- .generate-rows(@n, (@i + 1));
-}
-.generate-cols(@n, @i: 1) when (@i =< @n) {
- &.cols-@{i} {
- width: @grid-size * @i;
- }
- .generate-cols(@n, (@i + 1));
-}
.data-center {
- margin-left: @rack-info-width + 10px;
+ margin-left: $rack-info-width + 10px;
.grid {
float: left;
background: #555;
- .generate-rows(@grid-count);
- .generate-cols(@grid-count);
+ @include generate-cols($grid-count);
+ @include generate-rows($grid-count);
&.edit {
.grid_wrapper {
background-color: rgba(255, 255, 255, 0.1);
@@ -48,7 +22,7 @@
}
&.saved {
border-color: #444;
- background-color: @rack-background;
+ background-color: $rack-background;
}
&.move {
border-style: dashed;
@@ -89,24 +63,24 @@
}
.grid_wrapper {
position: relative;
- min-height: @grid-size * @grid-count;
+ min-height: $grid-size * $grid-count;
background-color: transparent;
background-image:
linear-gradient(
0deg,
- @grid-color 0%,
- @grid-color 1%,
+ $grid-color 0%,
+ $grid-color 1%,
transparent 2%,
transparent
),
linear-gradient(
90deg,
- @grid-color 0%,
- @grid-color 1%,
+ $grid-color 0%,
+ $grid-color 1%,
transparent 2%,
transparent
);
- background-size: @grid-size @grid-size;
+ background-size: $grid-size $grid-size;
.rack {
&.add {
text-align: center;
@@ -121,9 +95,9 @@
background: rgba(255, 255, 255, .2);
}
}
- @label-height: 1.4em;
- .generate-x-position(@grid-count);
- .generate-y-position(@grid-count);
+ $label-height: 1.4em;
+ @include generate-x-position($grid-count);
+ @include generate-y-position($grid-count);
&.rotate-left {transform: rotate(-90deg);}
&.rotate-right {
transform: rotate(90deg);
@@ -136,7 +110,7 @@
}
&.rotate-top, &.rotate-left {
.wrapper .progress {
- top: @label-height;
+ top: $label-height;
}
}
&.rotate-bottom{
@@ -149,22 +123,22 @@
min-width: 100%;
}
.wrapper .progress {
- bottom: @label-height;
+ bottom: $label-height;
}
.tools {
transform: rotate(180deg);
}
}
- .generate-x-position(@grid-count);
- .generate-y-position(@grid-count);
+ @include generate-x-position($grid-count);
+ @include generate-y-position($grid-count);
box-sizing: border-box;
position: absolute;
- background: @rack-background;
- width: @grid-size;
- height: @grid-size;
+ background: $rack-background;
+ width: $grid-size;
+ height: $grid-size;
border: 1px solid #444;
&:hover {
- background: lighten(@rack-background, 20%);
+ background: lighten($rack-background, 20%);
}
.wrapper {
height: 100%;
@@ -181,8 +155,8 @@
overflow: hidden;
}
.name {
- height: @label-height;
- line-height: @label-height;
+ height: $label-height;
+ line-height: $label-height;
overflow: hidden;
white-space: nowrap;
background: rgba(0, 0, 0, 0.8);
@@ -204,11 +178,13 @@
position: absolute;
}
.progress {
+ border:0;
margin:0;
+ padding:0;
border-radius: 0;
height: 5px;
- &.red {background: #a33;z-index:2;border-left: 1px solid #000;right:0;box-sizing:border-box;}
- &.green {background: #3f3;width:100%;z-index:1;}
+ &.red {background: #c22;z-index:2;right:0;box-sizing:border-box;}
+ &.green {background: #0E4;width:100%;z-index:1;}
}
.free {
text-align: center;
@@ -217,7 +193,7 @@
}
}
&:hover, &.active {
- .active-border();
+ @include active-border();
}
}
}
diff --git a/src/ralph/static/src/scss/components/date_hierarchy.scss b/src/ralph/static/src/scss/components/date_hierarchy.scss
new file mode 100644
index 0000000000..a2e457fa8e
--- /dev/null
+++ b/src/ralph/static/src/scss/components/date_hierarchy.scss
@@ -0,0 +1,14 @@
+.date-hierarchy {
+ padding: 5px 0;
+ overflow: hidden;
+ ul {
+ margin: 0;
+ li {
+ list-style-type: none;
+ float: left;
+ &.date-back {
+ margin-right: 10px;
+ }
+ }
+ }
+}
diff --git a/src/ralph/static/src/scss/components/fieldsets.scss b/src/ralph/static/src/scss/components/fieldsets.scss
new file mode 100644
index 0000000000..d649355b33
--- /dev/null
+++ b/src/ralph/static/src/scss/components/fieldsets.scss
@@ -0,0 +1,10 @@
+fieldset {
+ margin: 0 0 20px 0;
+ padding: 0 10px 0 10px;
+ background: $fieldset-bg-color;
+ legend {
+ color: $oil;
+ font-size: rem-calc(14);
+ background: transparent;
+ }
+}
diff --git a/src/ralph/dc_view/static/css/rack.less b/src/ralph/static/src/scss/components/rack.scss
similarity index 72%
rename from src/ralph/dc_view/static/css/rack.less
rename to src/ralph/static/src/scss/components/rack.scss
index d7db0575b6..9860379df9 100644
--- a/src/ralph/dc_view/static/css/rack.less
+++ b/src/ralph/static/src/scss/components/rack.scss
@@ -1,40 +1,15 @@
-@import "_variables.less";
-@import "_functions.less";
-
-* {
- box-sizing: border-box;
-}
+@import 'variables';
+@import 'functions';
.visualization [class*="span"] {
margin-left: 10px;
}
-.generate-racks(@n, @i: 1) when (@i =< @n) {
- &.rack-u-@{i} .wrapper {
- height: @u-height * @i;
- }
- .generate-racks(@n, (@i + 1));
-}
-
-.generate-u(@n, @i: 1) when (@i =< @n) {
- &.height-u-@{i} {
- height: @u-height * @i;
- }
- .generate-u(@n, (@i + 1));
-}
-
-.generate-position(@n, @i: 1) when (@i =< @n) {
- &.position-u-@{i} {
- bottom: @u-height * (@i - 1);
- }
- .generate-position(@n, (@i + 1));
-}
-
.rack-info {
background: #fff;
color: #444;
position: fixed;
- width: @rack-info-width;
+ width: $rack-info-width;
input[type="text"] {
height: inherit;
}
@@ -43,12 +18,12 @@
margin: 0;
}
.description {
- @description-color: #FBF7AA;
+ $description-color: #FBF7AA;
padding: 10px;
margin-bottom: 10px;
font-size: 1.2em;
- background: @description-color;
- border: 1px solid darken(@description-color, 20%);
+ background: $description-color;
+ border: 1px solid darken($description-color, 20%);
}
.info {
width: 100%;
@@ -59,7 +34,7 @@
}
td {
padding: 5px;
- border-bottom: @border-info;
+ border-bottom: $border-info;
}
td:first-child {
width: 20%;
@@ -77,38 +52,38 @@
.slot_info {
tr:first-child {
& > td {
- border-top: @border-info;
+ border-top: $border-info;
}
}
tr:nth-last-child(2) {
& > td {
- border-bottom: @border-info;
+ border-bottom: $border-info;
}
}
}
.racks .rack .wrapper .devices .device,
.racks .rack .wrapper .listing-u .position {
- .generate-position(@max-u);
+ @include generate-position($max-u);
}
.racks .rack .wrapper .devices .device.height-u-0 {
z-index: 10000;
background-color: #f33;
- height: @u-height;
+ height: $u-height;
}
.rack {float: left;}
.racks {
float: left;
- margin-left: @rack-info-width + 10px;
+ margin-left: $rack-info-width + 10px;
.rack {
border-radius: 5px;
position: relative;
- border: @rack-border-width solid #444;
+ border: $rack-border-width solid #444;
background: #666;
- width: @rack-width;
+ width: $rack-width;
box-sizing: content-box;
.name {
font-size: 1.25em;
@@ -129,8 +104,8 @@
display: inline-block;
}
&.front .wrapper .devices {
- width: @devices-width-front;
- .device {width: @devices-width-front;}
+ width: $devices-width-front;
+ .device {width: $devices-width-front;}
}
&.front .wrapper .listing-u {
z-index: 1000;
@@ -141,7 +116,7 @@
&.front .name:after {content: "front";}
&.back .name:after {content: "back";}
&.back {margin-left: 10px;}
- .generate-racks(@max-u);
+ @include generate-racks($max-u);
.wrapper
{
background-color:#666;
@@ -149,7 +124,7 @@
.listing-u {
background: #666;
margin: 0;
- width: @listing-u-width;
+ width: $listing-u-width;
float: left;
position: relative;
min-height: 100%;
@@ -159,13 +134,13 @@
border-top: 1px solid #888;
border-bottom: 1px solid #000;
position: absolute;
- height: @u-height;
- line-height: @u-height;
+ height: $u-height;
+ line-height: $u-height;
color: #fff;
text-align: center;
- width: @listing-u-width;
+ width: $listing-u-width;
&.active {
- .active-border();
+ @include active-border();
}
}
}
@@ -174,8 +149,8 @@
background: #ccc;
min-height: 100%;
height: 100%;
- width: @pdu-width;
- float: left;
+ width: $pdu-width;
+ float: left !important;
z-index: 1000;
display: -webkit-box;
display: -moz-box;
@@ -189,38 +164,38 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- @background-color: #999;
- @margin: 3px;
- @padding: 5px;
+ $background-color: #999;
+ $margin: 3px;
+ $padding: 5px;
flex: 1 1 auto;
- margin: @margin @margin 0 @margin;
- background: @background-color;
- border: 1px solid darken(@background-color, 10%);
- &:nth-last-of-type(1) {margin-bottom: @margin;}
+ margin: $margin $margin 0 $margin;
+ background: $background-color;
+ border: 1px solid darken($background-color, 10%);
+ &:nth-last-of-type(1) {margin-bottom: $margin;}
&:hover {
- .active-border();
+ @include active-border();
}
.item {
- padding: @padding;
+ padding: $padding;
font-size: .825em;
a {color: inherit;}
}
}
}
.devices {
- width: @devices-width-back;
+ width: $devices-width-back;
min-height: 100%;
height: 100%;
float: left;
position: relative;
.device {
cursor: pointer;
- width: @devices-width-back;
+ width: $devices-width-back;
position: absolute;
- height: @u-height;
- border-bottom: 1px solid darken(@device-background, 10%);
- border-top: 1px solid lighten(@device-background, 10%);
- background: @device-background;
+ height: $u-height;
+ border-bottom: 1px solid darken($device-background, 10%);
+ border-top: 1px solid lighten($device-background, 10%);
+ background: $device-background;
&:hover, &.active{
border-bottom: 1px solid white;
border-top: 1px solid white;
@@ -229,7 +204,7 @@
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAK0lEQVQYV2NkIBIwEqmOAVnhfxyawGrQFaLbANI82BRi8w+GG/GGFNHhCAARkQoLdFrYLgAAAABJRU5ErkJggg==) repeat-x;
background-color: #fff;
&:hover {
- .active-border();
+ @include active-border();
}
.info {
position: relative;
@@ -246,7 +221,7 @@
background-color: #fff;
border-color: #ccc;
&:hover {
- .active-border()
+ @include active-border()
}
}
&.organizer {
@@ -254,23 +229,23 @@
background-color: #fff;
border-color: #ccc;
&:hover {
- .active-border()
+ @include active-border()
}
}
}
&.empty {
background: #fff;
- line-height: @u-height;
+ line-height: $u-height;
border-bottom-color: #bbb;
border-top-color: #ddd;
&:before, &:after {position: absolute; content:":";line-height: 1em;}
&:before {left:10px;}
&:after {right:10px;}
&:hover, &.active {
- .active-border()
+ @include active-border();
}
}
- .generate-u(@max-u);
+ @include generate-u($max-u);
&.height-u-0 .sn, &.height-u-1 .sn {display: none;}
&.position-u-1 .info .barcode, &.position-u-1 .info .asset-description {top:0;}
.info {
@@ -283,22 +258,22 @@
min-height: 100%;
.barcode, .asset-description, .sn, .accessory-remarks {position: absolute;}
.barcode {
- right: @info-padding;
- bottom: @info-padding;
+ right: $info-padding;
+ bottom: $info-padding;
}
.sn {
- left: @info-padding;
- bottom: @info-padding;
+ left: $info-padding;
+ bottom: $info-padding;
}
.asset-description {
color: #333;
font-weight: bold;
- left: @info-padding;
- top:@info-padding;
+ left: $info-padding;
+ top:$info-padding;
}
.accessory-remarks {
- right: @info-padding;
- bottom: @info-padding;
+ right: $info-padding;
+ bottom: $info-padding;
color: #333;
font-weight: bold;
background-color: #fbf7aa;
@@ -307,8 +282,8 @@
}
.children {
position: absolute;
- top: @u-height;
- bottom: @u-height;
+ top: $u-height;
+ bottom: $u-height;
min-width: 100%;
max-width: 100%;
width: 100%;
@@ -330,7 +305,7 @@
cursor: pointer;
}
[class*="slot-"] {
- width: @devices-width-front / 8;
+ width: $devices-width-front / 8;
box-sizing: border-box;
font-size: .825em;
background: rgba(255,255,255,.3);
@@ -342,7 +317,7 @@
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
- .active-border();
+ @include active-border();
}
.slot_no {
display: block;
@@ -360,66 +335,66 @@
}
// Layouts
-.generate-layouts(@device-width) {
+@mixin generate-layouts($device-width) {
&.height-u-3 .children {
[class*="slot-"] {
.slot_no {display: inline-block;}
}
}
&.rows-1.cols-2 {
- @cols: 2;
- [class*="slot-"] {width: @device-width / @cols;}
+ $cols: 2;
+ [class*="slot-"] {width: $device-width / $cols;}
}
&.rows-2.cols-4 {
- @cols: 4;
- [class*="slot-"] {width: @device-width / @cols;}
+ $cols: 4;
+ [class*="slot-"] {width: $device-width / $cols;}
}
&.rows-2.cols-6 {
- @cols: 6;
- [class*="slot-"] {width: @device-width / @cols;}
+ $cols: 6;
+ [class*="slot-"] {width: $device-width / $cols;}
}
&.rows-2.cols-8 {
- @cols: 8;
- [class*="slot-"] {width: @device-width / @cols;}
+ $cols: 8;
+ [class*="slot-"] {width: $device-width / $cols;}
&.half-slots {
[class$="A"],
[class$="B"] {
- width: @device-width / (@cols * 2);
+ width: $device-width / ($cols * 2);
}
}
}
&.rows-4.cols-2 {
- @cols: 2;
- [class*="slot-"] {width: @device-width / @cols;}
+ $cols: 2;
+ [class*="slot-"] {width: $device-width / $cols;}
}
}
.racks .rack.front .wrapper .devices .device {
- .generate-layouts(@devices-width-front);
+ @include generate-layouts($devices-width-front);
}
.racks .rack.back .wrapper .devices .device {
- .generate-layouts(@devices-width-back);
+ @include generate-layouts($devices-width-back);
}
@media all and (max-width: 1500px) {
.racks {
.rack {
- width: @rack-width-small;
+ width: $rack-width-small;
&.front .wrapper {
.devices {
- width: @devices-width-front-small;
+ width: $devices-width-front-small;
.device {
- width: @devices-width-front-small;
- .generate-layouts(@devices-width-front-small)
+ width: $devices-width-front-small;
+ @include generate-layouts($devices-width-front-small)
}
}
}
&.back .wrapper {
.devices {
- width: @devices-width-back-small;
+ width: $devices-width-back-small;
.device {
- width: @devices-width-back-small;
- .generate-layouts(@devices-width-back-small)
+ width: $devices-width-back-small;
+ @include generate-layouts($devices-width-back-small)
}
}
}
diff --git a/src/ralph/static/src/scss/components/tables.scss b/src/ralph/static/src/scss/components/tables.scss
new file mode 100644
index 0000000000..e49ab64fa0
--- /dev/null
+++ b/src/ralph/static/src/scss/components/tables.scss
@@ -0,0 +1,71 @@
+@import 'colors';
+
+@mixin cell-border() {
+ border: 1px solid #D8D8D8;
+}
+
+$thead-bg-color: $mdc-blue-grey-50;
+$row-even-bg-color: $mdc-grey-100;
+$row-odd-bg-color: #fff;
+
+table {
+ &.full {
+ width: 100%;
+ }
+ td, th {
+ input[type="checkbox"] {
+ margin: 0;
+ }
+ }
+ thead {
+ tr {
+ line-height: 2.5rem;
+ th {
+ @include cell-border();
+ background: $thead-bg-color;
+ padding: 0;
+ .text {
+ .sort-icon {
+ color: $mdc-black-dark;
+ }
+ .sortoptions {
+ display: inline;
+ .sortremove {
+ color: $mdc-red-500;
+ }
+ }
+ .sort-icon, .sortoptions {
+ opacity: .5;
+ }
+ &:hover {
+ .sort-icon, .sortoptions {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+ }
+ tbody {
+ tr {
+ line-height: 2rem;
+ &:nth-child(even) {
+ background-color: $row-even-bg-color;
+ }
+ &:nth-child(odd) {
+ background-color: $row-odd-bg-color;
+ }
+ &:nth-child(even):hover {
+ background-color: darken($row-even-bg-color, 1%);
+ }
+ &:nth-child(odd):hover {
+ background-color: darken($row-odd-bg-color, 1%);
+ }
+ td, th {
+ text-align: center;
+ @include cell-border();
+ padding: 0;
+ }
+ }
+ }
+}
diff --git a/src/ralph/static/src/scss/components/tabs.scss b/src/ralph/static/src/scss/components/tabs.scss
new file mode 100644
index 0000000000..18172e1838
--- /dev/null
+++ b/src/ralph/static/src/scss/components/tabs.scss
@@ -0,0 +1,35 @@
+.tabs {
+ display: inline-block;
+ vertical-align: middle;
+ ul, li {
+ padding: 0;
+ margin: 0;
+ }
+ ul {
+ line-height: 3rem;
+ li {
+ list-style-type: none;
+ float: left;
+ margin-right: 5px;
+ a {
+ // background-color: $mdc-orange-800;
+ background-color: $tabs-content-bg-color;
+ border-bottom: 0;
+ border: 1px solid $tabs-border-color;
+ font-size: $button-font-med;
+ padding: rem-calc(10 20);
+ padding-bottom: rem-calc(11);
+ transition: all .1s ease-in-out;
+ }
+ &:last-child a {
+ }
+ &.active a, a:hover {
+ border-top: 4px solid $mdc-orange-500;
+ background-color: $tabs-content-bg-color;
+ }
+ &.active a {
+ border-bottom: 1px solid $tabs-content-bg-color;
+ }
+ }
+ }
+}
diff --git a/src/ralph/static/src/scss/ralph.scss b/src/ralph/static/src/scss/ralph.scss
new file mode 100644
index 0000000000..fc7dd4286e
--- /dev/null
+++ b/src/ralph/static/src/scss/ralph.scss
@@ -0,0 +1,54 @@
+@charset 'UTF-8';
+
+@import 'normalize';
+@import 'settings';
+
+@import 'font-awesome';
+
+@import 'foundation/components/grid';
+@import 'foundation/components/accordion';
+@import 'foundation/components/alert-boxes';
+@import 'foundation/components/block-grid';
+@import 'foundation/components/breadcrumbs';
+@import 'foundation/components/button-groups';
+@import 'foundation/components/buttons';
+@import 'foundation/components/clearing';
+@import 'foundation/components/dropdown';
+@import 'foundation/components/dropdown-buttons';
+// @import 'foundation/components/flex-video';
+@import 'foundation/components/forms';
+@import 'foundation/components/icon-bar';
+@import 'foundation/components/inline-lists';
+// @import 'foundation/components/joyride';
+// @import 'foundation/components/keystrokes';
+@import 'foundation/components/labels';
+// @import 'foundation/components/magellan';
+// @import 'foundation/components/orbit';
+@import 'foundation/components/pagination';
+@import 'foundation/components/panels';
+@import 'foundation/components/pricing-tables';
+@import 'foundation/components/progress-bars';
+@import 'foundation/components/range-slider';
+// @import 'foundation/components/reveal';
+@import 'foundation/components/side-nav';
+@import 'foundation/components/split-buttons';
+@import 'foundation/components/sub-nav';
+@import 'foundation/components/switches';
+// @import 'foundation/components/tables';
+// @import 'foundation/components/tabs';
+// @import 'foundation/components/thumbs';
+@import 'foundation/components/tooltips';
+@import 'foundation/components/top-bar';
+@import 'foundation/components/type';
+// @import 'foundation/components/offcanvas';
+@import 'foundation/components/visibility';
+
+@import 'components/fieldsets';
+@import 'components/tables';
+@import 'components/tabs';
+@import 'components/date_hierarchy';
+@import 'components/data_center';
+@import 'components/rack';
+
+@import 'styles';
+@import 'overrides';