/home/mip/mip/public/vendor/laravel-filemanager/files/folder-1/821668/smartmenus-1.0.0.1.zip
PK |?]��X�� �� jquery.smartmenus.jsnu �Iw�� /*!
* SmartMenus jQuery Plugin - v1.0.0 - January 27, 2016
* http://www.smartmenus.org/
*
* Copyright Vasil Dinkov, Vadikom Web Ltd.
* http://vadikom.com
*
* Licensed MIT
*/
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Global jQuery
factory(jQuery);
}
} (function($) {
var menuTrees = [],
IE = !!window.createPopup, // detect it for the iframe shim
mouse = false, // optimize for touch by default - we will detect for mouse input
touchEvents = 'ontouchstart' in window, // we use this just to choose between toucn and pointer events, not for touch screen detection
mouseDetectionEnabled = false,
requestAnimationFrame = window.requestAnimationFrame || function(callback) { return setTimeout(callback, 1000 / 60); },
cancelAnimationFrame = window.cancelAnimationFrame || function(id) { clearTimeout(id); };
// Handle detection for mouse input (i.e. desktop browsers, tablets with a mouse, etc.)
function initMouseDetection(disable) {
var eNS = '.smartmenus_mouse';
if (!mouseDetectionEnabled && !disable) {
// if we get two consecutive mousemoves within 2 pixels from each other and within 300ms, we assume a real mouse/cursor is present
// in practice, this seems like impossible to trick unintentianally with a real mouse and a pretty safe detection on touch devices (even with older browsers that do not support touch events)
var firstTime = true,
lastMove = null;
$(document).bind(getEventsNS([
['mousemove', function(e) {
var thisMove = { x: e.pageX, y: e.pageY, timeStamp: new Date().getTime() };
if (lastMove) {
var deltaX = Math.abs(lastMove.x - thisMove.x),
deltaY = Math.abs(lastMove.y - thisMove.y);
if ((deltaX > 0 || deltaY > 0) && deltaX <= 2 && deltaY <= 2 && thisMove.timeStamp - lastMove.timeStamp <= 300) {
mouse = true;
// if this is the first check after page load, check if we are not over some item by chance and call the mouseenter handler if yes
if (firstTime) {
var $a = $(e.target).closest('a');
if ($a.is('a')) {
$.each(menuTrees, function() {
if ($.contains(this.$root[0], $a[0])) {
this.itemEnter({ currentTarget: $a[0] });
return false;
}
});
}
firstTime = false;
}
}
}
lastMove = thisMove;
}],
[touchEvents ? 'touchstart' : 'pointerover pointermove pointerout MSPointerOver MSPointerMove MSPointerOut', function(e) {
if (isTouchEvent(e.originalEvent)) {
mouse = false;
}
}]
], eNS));
mouseDetectionEnabled = true;
} else if (mouseDetectionEnabled && disable) {
$(document).unbind(eNS);
mouseDetectionEnabled = false;
}
}
function isTouchEvent(e) {
return !/^(4|mouse)$/.test(e.pointerType);
}
// returns a jQuery bind() ready object
function getEventsNS(defArr, eNS) {
if (!eNS) {
eNS = '';
}
var obj = {};
$.each(defArr, function(index, value) {
obj[value[0].split(' ').join(eNS + ' ') + eNS] = value[1];
});
return obj;
}
$.SmartMenus = function(elm, options) {
this.$root = $(elm);
this.opts = options;
this.rootId = ''; // internal
this.accessIdPrefix = '';
this.$subArrow = null;
this.activatedItems = []; // stores last activated A's for each level
this.visibleSubMenus = []; // stores visible sub menus UL's (might be in no particular order)
this.showTimeout = 0;
this.hideTimeout = 0;
this.scrollTimeout = 0;
this.clickActivated = false;
this.focusActivated = false;
this.zIndexInc = 0;
this.idInc = 0;
this.$firstLink = null; // we'll use these for some tests
this.$firstSub = null; // at runtime so we'll cache them
this.disabled = false;
this.$disableOverlay = null;
this.$touchScrollingSub = null;
this.cssTransforms3d = 'perspective' in elm.style || 'webkitPerspective' in elm.style;
this.wasCollapsible = false;
this.init();
};
$.extend($.SmartMenus, {
hideAll: function() {
$.each(menuTrees, function() {
this.menuHideAll();
});
},
destroy: function() {
while (menuTrees.length) {
menuTrees[0].destroy();
}
initMouseDetection(true);
},
prototype: {
init: function(refresh) {
var self = this;
if (!refresh) {
menuTrees.push(this);
this.rootId = (new Date().getTime() + Math.random() + '').replace(/\D/g, '');
this.accessIdPrefix = 'sm-' + this.rootId + '-';
if (this.$root.hasClass('sm-rtl')) {
this.opts.rightToLeftSubMenus = true;
}
// init root (main menu)
var eNS = '.smartmenus';
this.$root
.data('smartmenus', this)
.attr('data-smartmenus-id', this.rootId)
.dataSM('level', 1)
.bind(getEventsNS([
['mouseover focusin', $.proxy(this.rootOver, this)],
['mouseout focusout', $.proxy(this.rootOut, this)],
['keydown', $.proxy(this.rootKeyDown, this)]
], eNS))
.delegate('a', getEventsNS([
['mouseenter', $.proxy(this.itemEnter, this)],
['mouseleave', $.proxy(this.itemLeave, this)],
['mousedown', $.proxy(this.itemDown, this)],
['focus', $.proxy(this.itemFocus, this)],
['blur', $.proxy(this.itemBlur, this)],
['click', $.proxy(this.itemClick, this)]
], eNS));
// hide menus on tap or click outside the root UL
eNS += this.rootId;
if (this.opts.hideOnClick) {
$(document).bind(getEventsNS([
['touchstart', $.proxy(this.docTouchStart, this)],
['touchmove', $.proxy(this.docTouchMove, this)],
['touchend', $.proxy(this.docTouchEnd, this)],
// for Opera Mobile < 11.5, webOS browser, etc. we'll check click too
['click', $.proxy(this.docClick, this)]
], eNS));
}
// hide sub menus on resize
$(window).bind(getEventsNS([['resize orientationchange', $.proxy(this.winResize, this)]], eNS));
if (this.opts.subIndicators) {
this.$subArrow = $('<span/>').addClass('sub-arrow');
if (this.opts.subIndicatorsText) {
this.$subArrow.html(this.opts.subIndicatorsText);
}
}
// make sure mouse detection is enabled
initMouseDetection();
}
// init sub menus
this.$firstSub = this.$root.find('ul').each(function() { self.menuInit($(this)); }).eq(0);
this.$firstLink = this.$root.find('a').eq(0);
// find current item
if (this.opts.markCurrentItem) {
var reDefaultDoc = /(index|default)\.[^#\?\/]*/i,
reHash = /#.*/,
locHref = window.location.href.replace(reDefaultDoc, ''),
locHrefNoHash = locHref.replace(reHash, '');
this.$root.find('a').each(function() {
var href = this.href.replace(reDefaultDoc, ''),
$this = $(this);
if (href == locHref || href == locHrefNoHash) {
$this.addClass('current');
if (self.opts.markCurrentTree) {
$this.parentsUntil('[data-smartmenus-id]', 'ul').each(function() {
$(this).dataSM('parent-a').addClass('current');
});
}
}
});
}
// save initial state
this.wasCollapsible = this.isCollapsible();
},
destroy: function(refresh) {
if (!refresh) {
var eNS = '.smartmenus';
this.$root
.removeData('smartmenus')
.removeAttr('data-smartmenus-id')
.removeDataSM('level')
.unbind(eNS)
.undelegate(eNS);
eNS += this.rootId;
$(document).unbind(eNS);
$(window).unbind(eNS);
if (this.opts.subIndicators) {
this.$subArrow = null;
}
}
this.menuHideAll();
var self = this;
this.$root.find('ul').each(function() {
var $this = $(this);
if ($this.dataSM('scroll-arrows')) {
$this.dataSM('scroll-arrows').remove();
}
if ($this.dataSM('shown-before')) {
if (self.opts.subMenusMinWidth || self.opts.subMenusMaxWidth) {
$this.css({ width: '', minWidth: '', maxWidth: '' }).removeClass('sm-nowrap');
}
if ($this.dataSM('scroll-arrows')) {
$this.dataSM('scroll-arrows').remove();
}
$this.css({ zIndex: '', top: '', left: '', marginLeft: '', marginTop: '', display: '' });
}
if (($this.attr('id') || '').indexOf(self.accessIdPrefix) == 0) {
$this.removeAttr('id');
}
})
.removeDataSM('in-mega')
.removeDataSM('shown-before')
.removeDataSM('ie-shim')
.removeDataSM('scroll-arrows')
.removeDataSM('parent-a')
.removeDataSM('level')
.removeDataSM('beforefirstshowfired')
.removeAttr('role')
.removeAttr('aria-hidden')
.removeAttr('aria-labelledby')
.removeAttr('aria-expanded');
this.$root.find('a.has-submenu').each(function() {
var $this = $(this);
if ($this.attr('id').indexOf(self.accessIdPrefix) == 0) {
$this.removeAttr('id');
}
})
.removeClass('has-submenu')
.removeDataSM('sub')
.removeAttr('aria-haspopup')
.removeAttr('aria-controls')
.removeAttr('aria-expanded')
.closest('li').removeDataSM('sub');
if (this.opts.subIndicators) {
this.$root.find('span.sub-arrow').remove();
}
if (this.opts.markCurrentItem) {
this.$root.find('a.current').removeClass('current');
}
if (!refresh) {
this.$root = null;
this.$firstLink = null;
this.$firstSub = null;
if (this.$disableOverlay) {
this.$disableOverlay.remove();
this.$disableOverlay = null;
}
menuTrees.splice($.inArray(this, menuTrees), 1);
}
},
disable: function(noOverlay) {
if (!this.disabled) {
this.menuHideAll();
// display overlay over the menu to prevent interaction
if (!noOverlay && !this.opts.isPopup && this.$root.is(':visible')) {
var pos = this.$root.offset();
this.$disableOverlay = $('<div class="sm-jquery-disable-overlay"/>').css({
position: 'absolute',
top: pos.top,
left: pos.left,
width: this.$root.outerWidth(),
height: this.$root.outerHeight(),
zIndex: this.getStartZIndex(true),
opacity: 0
}).appendTo(document.body);
}
this.disabled = true;
}
},
docClick: function(e) {
if (this.$touchScrollingSub) {
this.$touchScrollingSub = null;
return;
}
// hide on any click outside the menu or on a menu link
if (this.visibleSubMenus.length && !$.contains(this.$root[0], e.target) || $(e.target).is('a')) {
this.menuHideAll();
}
},
docTouchEnd: function(e) {
if (!this.lastTouch) {
return;
}
if (this.visibleSubMenus.length && (this.lastTouch.x2 === undefined || this.lastTouch.x1 == this.lastTouch.x2) && (this.lastTouch.y2 === undefined || this.lastTouch.y1 == this.lastTouch.y2) && (!this.lastTouch.target || !$.contains(this.$root[0], this.lastTouch.target))) {
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = 0;
}
// hide with a delay to prevent triggering accidental unwanted click on some page element
var self = this;
this.hideTimeout = setTimeout(function() { self.menuHideAll(); }, 350);
}
this.lastTouch = null;
},
docTouchMove: function(e) {
if (!this.lastTouch) {
return;
}
var touchPoint = e.originalEvent.touches[0];
this.lastTouch.x2 = touchPoint.pageX;
this.lastTouch.y2 = touchPoint.pageY;
},
docTouchStart: function(e) {
var touchPoint = e.originalEvent.touches[0];
this.lastTouch = { x1: touchPoint.pageX, y1: touchPoint.pageY, target: touchPoint.target };
},
enable: function() {
if (this.disabled) {
if (this.$disableOverlay) {
this.$disableOverlay.remove();
this.$disableOverlay = null;
}
this.disabled = false;
}
},
getClosestMenu: function(elm) {
var $closestMenu = $(elm).closest('ul');
while ($closestMenu.dataSM('in-mega')) {
$closestMenu = $closestMenu.parent().closest('ul');
}
return $closestMenu[0] || null;
},
getHeight: function($elm) {
return this.getOffset($elm, true);
},
// returns precise width/height float values
getOffset: function($elm, height) {
var old;
if ($elm.css('display') == 'none') {
old = { position: $elm[0].style.position, visibility: $elm[0].style.visibility };
$elm.css({ position: 'absolute', visibility: 'hidden' }).show();
}
var box = $elm[0].getBoundingClientRect && $elm[0].getBoundingClientRect(),
val = box && (height ? box.height || box.bottom - box.top : box.width || box.right - box.left);
if (!val && val !== 0) {
val = height ? $elm[0].offsetHeight : $elm[0].offsetWidth;
}
if (old) {
$elm.hide().css(old);
}
return val;
},
getStartZIndex: function(root) {
var zIndex = parseInt(this[root ? '$root' : '$firstSub'].css('z-index'));
if (!root && isNaN(zIndex)) {
zIndex = parseInt(this.$root.css('z-index'));
}
return !isNaN(zIndex) ? zIndex : 1;
},
getTouchPoint: function(e) {
return e.touches && e.touches[0] || e.changedTouches && e.changedTouches[0] || e;
},
getViewport: function(height) {
var name = height ? 'Height' : 'Width',
val = document.documentElement['client' + name],
val2 = window['inner' + name];
if (val2) {
val = Math.min(val, val2);
}
return val;
},
getViewportHeight: function() {
return this.getViewport(true);
},
getViewportWidth: function() {
return this.getViewport();
},
getWidth: function($elm) {
return this.getOffset($elm);
},
handleEvents: function() {
return !this.disabled && this.isCSSOn();
},
handleItemEvents: function($a) {
return this.handleEvents() && !this.isLinkInMegaMenu($a);
},
isCollapsible: function() {
return this.$firstSub.css('position') == 'static';
},
isCSSOn: function() {
return this.$firstLink.css('display') == 'block';
},
isFixed: function() {
var isFixed = this.$root.css('position') == 'fixed';
if (!isFixed) {
this.$root.parentsUntil('body').each(function() {
if ($(this).css('position') == 'fixed') {
isFixed = true;
return false;
}
});
}
return isFixed;
},
isLinkInMegaMenu: function($a) {
return $(this.getClosestMenu($a[0])).hasClass('mega-menu');
},
isTouchMode: function() {
return !mouse || this.opts.noMouseOver || this.isCollapsible();
},
itemActivate: function($a, focus) {
var $ul = $a.closest('ul'),
level = $ul.dataSM('level');
// if for some reason the parent item is not activated (e.g. this is an API call to activate the item), activate all parent items first
if (level > 1 && (!this.activatedItems[level - 2] || this.activatedItems[level - 2][0] != $ul.dataSM('parent-a')[0])) {
var self = this;
$($ul.parentsUntil('[data-smartmenus-id]', 'ul').get().reverse()).add($ul).each(function() {
self.itemActivate($(this).dataSM('parent-a'));
});
}
// hide any visible deeper level sub menus
if (!this.isCollapsible() || focus) {
this.menuHideSubMenus(!this.activatedItems[level - 1] || this.activatedItems[level - 1][0] != $a[0] ? level - 1 : level);
}
// save new active item for this level
this.activatedItems[level - 1] = $a;
if (this.$root.triggerHandler('activate.smapi', $a[0]) === false) {
return;
}
// show the sub menu if this item has one
var $sub = $a.dataSM('sub');
if ($sub && (this.isTouchMode() || (!this.opts.showOnClick || this.clickActivated))) {
this.menuShow($sub);
}
},
itemBlur: function(e) {
var $a = $(e.currentTarget);
if (!this.handleItemEvents($a)) {
return;
}
this.$root.triggerHandler('blur.smapi', $a[0]);
},
itemClick: function(e) {
var $a = $(e.currentTarget);
if (!this.handleItemEvents($a)) {
return;
}
if (this.$touchScrollingSub && this.$touchScrollingSub[0] == $a.closest('ul')[0]) {
this.$touchScrollingSub = null;
e.stopPropagation();
return false;
}
if (this.$root.triggerHandler('click.smapi', $a[0]) === false) {
return false;
}
var subArrowClicked = $(e.target).is('span.sub-arrow'),
$sub = $a.dataSM('sub'),
firstLevelSub = $sub ? $sub.dataSM('level') == 2 : false;
// if the sub is not visible
if ($sub && !$sub.is(':visible')) {
if (this.opts.showOnClick && firstLevelSub) {
this.clickActivated = true;
}
// try to activate the item and show the sub
this.itemActivate($a);
// if "itemActivate" showed the sub, prevent the click so that the link is not loaded
// if it couldn't show it, then the sub menus are disabled with an !important declaration (e.g. via mobile styles) so let the link get loaded
if ($sub.is(':visible')) {
this.focusActivated = true;
return false;
}
} else if (this.isCollapsible() && subArrowClicked) {
this.itemActivate($a);
this.menuHide($sub);
return false;
}
if (this.opts.showOnClick && firstLevelSub || $a.hasClass('disabled') || this.$root.triggerHandler('select.smapi', $a[0]) === false) {
return false;
}
},
itemDown: function(e) {
var $a = $(e.currentTarget);
if (!this.handleItemEvents($a)) {
return;
}
$a.dataSM('mousedown', true);
},
itemEnter: function(e) {
var $a = $(e.currentTarget);
if (!this.handleItemEvents($a)) {
return;
}
if (!this.isTouchMode()) {
if (this.showTimeout) {
clearTimeout(this.showTimeout);
this.showTimeout = 0;
}
var self = this;
this.showTimeout = setTimeout(function() { self.itemActivate($a); }, this.opts.showOnClick && $a.closest('ul').dataSM('level') == 1 ? 1 : this.opts.showTimeout);
}
this.$root.triggerHandler('mouseenter.smapi', $a[0]);
},
itemFocus: function(e) {
var $a = $(e.currentTarget);
if (!this.handleItemEvents($a)) {
return;
}
// fix (the mousedown check): in some browsers a tap/click produces consecutive focus + click events so we don't need to activate the item on focus
if (this.focusActivated && (!this.isTouchMode() || !$a.dataSM('mousedown')) && (!this.activatedItems.length || this.activatedItems[this.activatedItems.length - 1][0] != $a[0])) {
this.itemActivate($a, true);
}
this.$root.triggerHandler('focus.smapi', $a[0]);
},
itemLeave: function(e) {
var $a = $(e.currentTarget);
if (!this.handleItemEvents($a)) {
return;
}
if (!this.isTouchMode()) {
$a[0].blur();
if (this.showTimeout) {
clearTimeout(this.showTimeout);
this.showTimeout = 0;
}
}
$a.removeDataSM('mousedown');
this.$root.triggerHandler('mouseleave.smapi', $a[0]);
},
menuHide: function($sub) {
if (this.$root.triggerHandler('beforehide.smapi', $sub[0]) === false) {
return;
}
$sub.stop(true, true);
if ($sub.css('display') != 'none') {
var complete = function() {
// unset z-index
$sub.css('z-index', '');
};
// if sub is collapsible (mobile view)
if (this.isCollapsible()) {
if (this.opts.collapsibleHideFunction) {
this.opts.collapsibleHideFunction.call(this, $sub, complete);
} else {
$sub.hide(this.opts.collapsibleHideDuration, complete);
}
} else {
if (this.opts.hideFunction) {
this.opts.hideFunction.call(this, $sub, complete);
} else {
$sub.hide(this.opts.hideDuration, complete);
}
}
// remove IE iframe shim
if ($sub.dataSM('ie-shim')) {
$sub.dataSM('ie-shim').remove().css({ '-webkit-transform': '', transform: '' });
}
// deactivate scrolling if it is activated for this sub
if ($sub.dataSM('scroll')) {
this.menuScrollStop($sub);
$sub.css({ 'touch-action': '', '-ms-touch-action': '', '-webkit-transform': '', transform: '' })
.unbind('.smartmenus_scroll').removeDataSM('scroll').dataSM('scroll-arrows').hide();
}
// unhighlight parent item + accessibility
$sub.dataSM('parent-a').removeClass('highlighted').attr('aria-expanded', 'false');
$sub.attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
});
var level = $sub.dataSM('level');
this.activatedItems.splice(level - 1, 1);
this.visibleSubMenus.splice($.inArray($sub, this.visibleSubMenus), 1);
this.$root.triggerHandler('hide.smapi', $sub[0]);
}
},
menuHideAll: function() {
if (this.showTimeout) {
clearTimeout(this.showTimeout);
this.showTimeout = 0;
}
// hide all subs
// if it's a popup, this.visibleSubMenus[0] is the root UL
var level = this.opts.isPopup ? 1 : 0;
for (var i = this.visibleSubMenus.length - 1; i >= level; i--) {
this.menuHide(this.visibleSubMenus[i]);
}
// hide root if it's popup
if (this.opts.isPopup) {
this.$root.stop(true, true);
if (this.$root.is(':visible')) {
if (this.opts.hideFunction) {
this.opts.hideFunction.call(this, this.$root);
} else {
this.$root.hide(this.opts.hideDuration);
}
// remove IE iframe shim
if (this.$root.dataSM('ie-shim')) {
this.$root.dataSM('ie-shim').remove();
}
}
}
this.activatedItems = [];
this.visibleSubMenus = [];
this.clickActivated = false;
this.focusActivated = false;
// reset z-index increment
this.zIndexInc = 0;
this.$root.triggerHandler('hideAll.smapi');
},
menuHideSubMenus: function(level) {
for (var i = this.activatedItems.length - 1; i >= level; i--) {
var $sub = this.activatedItems[i].dataSM('sub');
if ($sub) {
this.menuHide($sub);
}
}
},
menuIframeShim: function($ul) {
// create iframe shim for the menu
if (IE && this.opts.overlapControlsInIE && !$ul.dataSM('ie-shim')) {
$ul.dataSM('ie-shim', $('<iframe/>').attr({ src: 'javascript:0', tabindex: -9 })
.css({ position: 'absolute', top: 'auto', left: '0', opacity: 0, border: '0' })
);
}
},
menuInit: function($ul) {
if (!$ul.dataSM('in-mega')) {
// mark UL's in mega drop downs (if any) so we can neglect them
if ($ul.hasClass('mega-menu')) {
$ul.find('ul').dataSM('in-mega', true);
}
// get level (much faster than, for example, using parentsUntil)
var level = 2,
par = $ul[0];
while ((par = par.parentNode.parentNode) != this.$root[0]) {
level++;
}
// cache stuff for quick access
var $a = $ul.prevAll('a').eq(-1);
// if the link is nested (e.g. in a heading)
if (!$a.length) {
$a = $ul.prevAll().find('a').eq(-1);
}
$a.addClass('has-submenu').dataSM('sub', $ul);
$ul.dataSM('parent-a', $a)
.dataSM('level', level)
.parent().dataSM('sub', $ul);
// accessibility
var aId = $a.attr('id') || this.accessIdPrefix + (++this.idInc),
ulId = $ul.attr('id') || this.accessIdPrefix + (++this.idInc);
$a.attr({
id: aId,
'aria-haspopup': 'true',
'aria-controls': ulId,
'aria-expanded': 'false'
});
$ul.attr({
id: ulId,
'role': 'group',
'aria-hidden': 'true',
'aria-labelledby': aId,
'aria-expanded': 'false'
});
// add sub indicator to parent item
if (this.opts.subIndicators) {
$a[this.opts.subIndicatorsPos](this.$subArrow.clone());
}
}
},
menuPosition: function($sub) {
var $a = $sub.dataSM('parent-a'),
$li = $a.closest('li'),
$ul = $li.parent(),
level = $sub.dataSM('level'),
subW = this.getWidth($sub),
subH = this.getHeight($sub),
itemOffset = $a.offset(),
itemX = itemOffset.left,
itemY = itemOffset.top,
itemW = this.getWidth($a),
itemH = this.getHeight($a),
$win = $(window),
winX = $win.scrollLeft(),
winY = $win.scrollTop(),
winW = this.getViewportWidth(),
winH = this.getViewportHeight(),
horizontalParent = $ul.parent().is('[data-sm-horizontal-sub]') || level == 2 && !$ul.hasClass('sm-vertical'),
rightToLeft = this.opts.rightToLeftSubMenus && !$li.is('[data-sm-reverse]') || !this.opts.rightToLeftSubMenus && $li.is('[data-sm-reverse]'),
subOffsetX = level == 2 ? this.opts.mainMenuSubOffsetX : this.opts.subMenusSubOffsetX,
subOffsetY = level == 2 ? this.opts.mainMenuSubOffsetY : this.opts.subMenusSubOffsetY,
x, y;
if (horizontalParent) {
x = rightToLeft ? itemW - subW - subOffsetX : subOffsetX;
y = this.opts.bottomToTopSubMenus ? -subH - subOffsetY : itemH + subOffsetY;
} else {
x = rightToLeft ? subOffsetX - subW : itemW - subOffsetX;
y = this.opts.bottomToTopSubMenus ? itemH - subOffsetY - subH : subOffsetY;
}
if (this.opts.keepInViewport) {
var absX = itemX + x,
absY = itemY + y;
if (rightToLeft && absX < winX) {
x = horizontalParent ? winX - absX + x : itemW - subOffsetX;
} else if (!rightToLeft && absX + subW > winX + winW) {
x = horizontalParent ? winX + winW - subW - absX + x : subOffsetX - subW;
}
if (!horizontalParent) {
if (subH < winH && absY + subH > winY + winH) {
y += winY + winH - subH - absY;
} else if (subH >= winH || absY < winY) {
y += winY - absY;
}
}
// do we need scrolling?
// 0.49 used for better precision when dealing with float values
if (horizontalParent && (absY + subH > winY + winH + 0.49 || absY < winY) || !horizontalParent && subH > winH + 0.49) {
var self = this;
if (!$sub.dataSM('scroll-arrows')) {
$sub.dataSM('scroll-arrows', $([$('<span class="scroll-up"><span class="scroll-up-arrow"></span></span>')[0], $('<span class="scroll-down"><span class="scroll-down-arrow"></span></span>')[0]])
.bind({
mouseenter: function() {
$sub.dataSM('scroll').up = $(this).hasClass('scroll-up');
self.menuScroll($sub);
},
mouseleave: function(e) {
self.menuScrollStop($sub);
self.menuScrollOut($sub, e);
},
'mousewheel DOMMouseScroll': function(e) { e.preventDefault(); }
})
.insertAfter($sub)
);
}
// bind scroll events and save scroll data for this sub
var eNS = '.smartmenus_scroll';
$sub.dataSM('scroll', {
y: this.cssTransforms3d ? 0 : y - itemH,
step: 1,
// cache stuff for faster recalcs later
itemH: itemH,
subH: subH,
arrowDownH: this.getHeight($sub.dataSM('scroll-arrows').eq(1))
})
.bind(getEventsNS([
['mouseover', function(e) { self.menuScrollOver($sub, e); }],
['mouseout', function(e) { self.menuScrollOut($sub, e); }],
['mousewheel DOMMouseScroll', function(e) { self.menuScrollMousewheel($sub, e); }]
], eNS))
.dataSM('scroll-arrows').css({ top: 'auto', left: '0', marginLeft: x + (parseInt($sub.css('border-left-width')) || 0), width: subW - (parseInt($sub.css('border-left-width')) || 0) - (parseInt($sub.css('border-right-width')) || 0), zIndex: $sub.css('z-index') })
.eq(horizontalParent && this.opts.bottomToTopSubMenus ? 0 : 1).show();
// when a menu tree is fixed positioned we allow scrolling via touch too
// since there is no other way to access such long sub menus if no mouse is present
if (this.isFixed()) {
$sub.css({ 'touch-action': 'none', '-ms-touch-action': 'none' })
.bind(getEventsNS([
[touchEvents ? 'touchstart touchmove touchend' : 'pointerdown pointermove pointerup MSPointerDown MSPointerMove MSPointerUp', function(e) {
self.menuScrollTouch($sub, e);
}]
], eNS));
}
}
}
$sub.css({ top: 'auto', left: '0', marginLeft: x, marginTop: y - itemH });
// IE iframe shim
this.menuIframeShim($sub);
if ($sub.dataSM('ie-shim')) {
$sub.dataSM('ie-shim').css({ zIndex: $sub.css('z-index'), width: subW, height: subH, marginLeft: x, marginTop: y - itemH });
}
},
menuScroll: function($sub, once, step) {
var data = $sub.dataSM('scroll'),
$arrows = $sub.dataSM('scroll-arrows'),
end = data.up ? data.upEnd : data.downEnd,
diff;
if (!once && data.momentum) {
data.momentum *= 0.92;
diff = data.momentum;
if (diff < 0.5) {
this.menuScrollStop($sub);
return;
}
} else {
diff = step || (once || !this.opts.scrollAccelerate ? this.opts.scrollStep : Math.floor(data.step));
}
// hide any visible deeper level sub menus
var level = $sub.dataSM('level');
if (this.activatedItems[level - 1] && this.activatedItems[level - 1].dataSM('sub') && this.activatedItems[level - 1].dataSM('sub').is(':visible')) {
this.menuHideSubMenus(level - 1);
}
data.y = data.up && end <= data.y || !data.up && end >= data.y ? data.y : (Math.abs(end - data.y) > diff ? data.y + (data.up ? diff : -diff) : end);
$sub.add($sub.dataSM('ie-shim')).css(this.cssTransforms3d ? { '-webkit-transform': 'translate3d(0, ' + data.y + 'px, 0)', transform: 'translate3d(0, ' + data.y + 'px, 0)' } : { marginTop: data.y });
// show opposite arrow if appropriate
if (mouse && (data.up && data.y > data.downEnd || !data.up && data.y < data.upEnd)) {
$arrows.eq(data.up ? 1 : 0).show();
}
// if we've reached the end
if (data.y == end) {
if (mouse) {
$arrows.eq(data.up ? 0 : 1).hide();
}
this.menuScrollStop($sub);
} else if (!once) {
if (this.opts.scrollAccelerate && data.step < this.opts.scrollStep) {
data.step += 0.2;
}
var self = this;
this.scrollTimeout = requestAnimationFrame(function() { self.menuScroll($sub); });
}
},
menuScrollMousewheel: function($sub, e) {
if (this.getClosestMenu(e.target) == $sub[0]) {
e = e.originalEvent;
var up = (e.wheelDelta || -e.detail) > 0;
if ($sub.dataSM('scroll-arrows').eq(up ? 0 : 1).is(':visible')) {
$sub.dataSM('scroll').up = up;
this.menuScroll($sub, true);
}
}
e.preventDefault();
},
menuScrollOut: function($sub, e) {
if (mouse) {
if (!/^scroll-(up|down)/.test((e.relatedTarget || '').className) && ($sub[0] != e.relatedTarget && !$.contains($sub[0], e.relatedTarget) || this.getClosestMenu(e.relatedTarget) != $sub[0])) {
$sub.dataSM('scroll-arrows').css('visibility', 'hidden');
}
}
},
menuScrollOver: function($sub, e) {
if (mouse) {
if (!/^scroll-(up|down)/.test(e.target.className) && this.getClosestMenu(e.target) == $sub[0]) {
this.menuScrollRefreshData($sub);
var data = $sub.dataSM('scroll'),
upEnd = $(window).scrollTop() - $sub.dataSM('parent-a').offset().top - data.itemH;
$sub.dataSM('scroll-arrows').eq(0).css('margin-top', upEnd).end()
.eq(1).css('margin-top', upEnd + this.getViewportHeight() - data.arrowDownH).end()
.css('visibility', 'visible');
}
}
},
menuScrollRefreshData: function($sub) {
var data = $sub.dataSM('scroll'),
upEnd = $(window).scrollTop() - $sub.dataSM('parent-a').offset().top - data.itemH;
if (this.cssTransforms3d) {
upEnd = -(parseFloat($sub.css('margin-top')) - upEnd);
}
$.extend(data, {
upEnd: upEnd,
downEnd: upEnd + this.getViewportHeight() - data.subH
});
},
menuScrollStop: function($sub) {
if (this.scrollTimeout) {
cancelAnimationFrame(this.scrollTimeout);
this.scrollTimeout = 0;
$sub.dataSM('scroll').step = 1;
return true;
}
},
menuScrollTouch: function($sub, e) {
e = e.originalEvent;
if (isTouchEvent(e)) {
var touchPoint = this.getTouchPoint(e);
// neglect event if we touched a visible deeper level sub menu
if (this.getClosestMenu(touchPoint.target) == $sub[0]) {
var data = $sub.dataSM('scroll');
if (/(start|down)$/i.test(e.type)) {
if (this.menuScrollStop($sub)) {
// if we were scrolling, just stop and don't activate any link on the first touch
e.preventDefault();
this.$touchScrollingSub = $sub;
} else {
this.$touchScrollingSub = null;
}
// update scroll data since the user might have zoomed, etc.
this.menuScrollRefreshData($sub);
// extend it with the touch properties
$.extend(data, {
touchStartY: touchPoint.pageY,
touchStartTime: e.timeStamp
});
} else if (/move$/i.test(e.type)) {
var prevY = data.touchY !== undefined ? data.touchY : data.touchStartY;
if (prevY !== undefined && prevY != touchPoint.pageY) {
this.$touchScrollingSub = $sub;
var up = prevY < touchPoint.pageY;
// changed direction? reset...
if (data.up !== undefined && data.up != up) {
$.extend(data, {
touchStartY: touchPoint.pageY,
touchStartTime: e.timeStamp
});
}
$.extend(data, {
up: up,
touchY: touchPoint.pageY
});
this.menuScroll($sub, true, Math.abs(touchPoint.pageY - prevY));
}
e.preventDefault();
} else { // touchend/pointerup
if (data.touchY !== undefined) {
if (data.momentum = Math.pow(Math.abs(touchPoint.pageY - data.touchStartY) / (e.timeStamp - data.touchStartTime), 2) * 15) {
this.menuScrollStop($sub);
this.menuScroll($sub);
e.preventDefault();
}
delete data.touchY;
}
}
}
}
},
menuShow: function($sub) {
if (!$sub.dataSM('beforefirstshowfired')) {
$sub.dataSM('beforefirstshowfired', true);
if (this.$root.triggerHandler('beforefirstshow.smapi', $sub[0]) === false) {
return;
}
}
if (this.$root.triggerHandler('beforeshow.smapi', $sub[0]) === false) {
return;
}
$sub.dataSM('shown-before', true)
.stop(true, true);
if (!$sub.is(':visible')) {
// highlight parent item
var $a = $sub.dataSM('parent-a');
if (this.opts.keepHighlighted || this.isCollapsible()) {
$a.addClass('highlighted');
}
if (this.isCollapsible()) {
$sub.removeClass('sm-nowrap').css({ zIndex: '', width: 'auto', minWidth: '', maxWidth: '', top: '', left: '', marginLeft: '', marginTop: '' });
} else {
// set z-index
$sub.css('z-index', this.zIndexInc = (this.zIndexInc || this.getStartZIndex()) + 1);
// min/max-width fix - no way to rely purely on CSS as all UL's are nested
if (this.opts.subMenusMinWidth || this.opts.subMenusMaxWidth) {
$sub.css({ width: 'auto', minWidth: '', maxWidth: '' }).addClass('sm-nowrap');
if (this.opts.subMenusMinWidth) {
$sub.css('min-width', this.opts.subMenusMinWidth);
}
if (this.opts.subMenusMaxWidth) {
var noMaxWidth = this.getWidth($sub);
$sub.css('max-width', this.opts.subMenusMaxWidth);
if (noMaxWidth > this.getWidth($sub)) {
$sub.removeClass('sm-nowrap').css('width', this.opts.subMenusMaxWidth);
}
}
}
this.menuPosition($sub);
// insert IE iframe shim
if ($sub.dataSM('ie-shim')) {
$sub.dataSM('ie-shim').insertBefore($sub);
}
}
var complete = function() {
// fix: "overflow: hidden;" is not reset on animation complete in jQuery < 1.9.0 in Chrome when global "box-sizing: border-box;" is used
$sub.css('overflow', '');
};
// if sub is collapsible (mobile view)
if (this.isCollapsible()) {
if (this.opts.collapsibleShowFunction) {
this.opts.collapsibleShowFunction.call(this, $sub, complete);
} else {
$sub.show(this.opts.collapsibleShowDuration, complete);
}
} else {
if (this.opts.showFunction) {
this.opts.showFunction.call(this, $sub, complete);
} else {
$sub.show(this.opts.showDuration, complete);
}
}
// accessibility
$a.attr('aria-expanded', 'true');
$sub.attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
});
// store sub menu in visible array
this.visibleSubMenus.push($sub);
this.$root.triggerHandler('show.smapi', $sub[0]);
}
},
popupHide: function(noHideTimeout) {
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = 0;
}
var self = this;
this.hideTimeout = setTimeout(function() {
self.menuHideAll();
}, noHideTimeout ? 1 : this.opts.hideTimeout);
},
popupShow: function(left, top) {
if (!this.opts.isPopup) {
alert('SmartMenus jQuery Error:\n\nIf you want to show this menu via the "popupShow" method, set the isPopup:true option.');
return;
}
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = 0;
}
this.$root.dataSM('shown-before', true)
.stop(true, true);
if (!this.$root.is(':visible')) {
this.$root.css({ left: left, top: top });
// IE iframe shim
this.menuIframeShim(this.$root);
if (this.$root.dataSM('ie-shim')) {
this.$root.dataSM('ie-shim').css({ zIndex: this.$root.css('z-index'), width: this.getWidth(this.$root), height: this.getHeight(this.$root), left: left, top: top }).insertBefore(this.$root);
}
// show menu
var self = this,
complete = function() {
self.$root.css('overflow', '');
};
if (this.opts.showFunction) {
this.opts.showFunction.call(this, this.$root, complete);
} else {
this.$root.show(this.opts.showDuration, complete);
}
this.visibleSubMenus[0] = this.$root;
}
},
refresh: function() {
this.destroy(true);
this.init(true);
},
rootKeyDown: function(e) {
if (!this.handleEvents()) {
return;
}
switch (e.keyCode) {
case 27: // reset on Esc
var $activeTopItem = this.activatedItems[0];
if ($activeTopItem) {
this.menuHideAll();
$activeTopItem[0].focus();
var $sub = $activeTopItem.dataSM('sub');
if ($sub) {
this.menuHide($sub);
}
}
break;
case 32: // activate item's sub on Space
var $target = $(e.target);
if ($target.is('a') && this.handleItemEvents($target)) {
var $sub = $target.dataSM('sub');
if ($sub && !$sub.is(':visible')) {
this.itemClick({ currentTarget: e.target });
e.preventDefault();
}
}
break;
}
},
rootOut: function(e) {
if (!this.handleEvents() || this.isTouchMode() || e.target == this.$root[0]) {
return;
}
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = 0;
}
if (!this.opts.showOnClick || !this.opts.hideOnClick) {
var self = this;
this.hideTimeout = setTimeout(function() { self.menuHideAll(); }, this.opts.hideTimeout);
}
},
rootOver: function(e) {
if (!this.handleEvents() || this.isTouchMode() || e.target == this.$root[0]) {
return;
}
if (this.hideTimeout) {
clearTimeout(this.hideTimeout);
this.hideTimeout = 0;
}
},
winResize: function(e) {
if (!this.handleEvents()) {
// we still need to resize the disable overlay if it's visible
if (this.$disableOverlay) {
var pos = this.$root.offset();
this.$disableOverlay.css({
top: pos.top,
left: pos.left,
width: this.$root.outerWidth(),
height: this.$root.outerHeight()
});
}
return;
}
// hide sub menus on resize - on mobile do it only on orientation change
if (!('onorientationchange' in window) || e.type == 'orientationchange') {
var isCollapsible = this.isCollapsible();
// if it was collapsible before resize and still is, don't do it
if (!(this.wasCollapsible && isCollapsible)) {
if (this.activatedItems.length) {
this.activatedItems[this.activatedItems.length - 1][0].blur();
}
this.menuHideAll();
}
this.wasCollapsible = isCollapsible;
}
}
}
});
$.fn.dataSM = function(key, val) {
if (val) {
return this.data(key + '_smartmenus', val);
}
return this.data(key + '_smartmenus');
}
$.fn.removeDataSM = function(key) {
return this.removeData(key + '_smartmenus');
}
$.fn.smartmenus = function(options) {
if (typeof options == 'string') {
var args = arguments,
method = options;
Array.prototype.shift.call(args);
return this.each(function() {
var smartmenus = $(this).data('smartmenus');
if (smartmenus && smartmenus[method]) {
smartmenus[method].apply(smartmenus, args);
}
});
}
var opts = $.extend({}, $.fn.smartmenus.defaults, options);
return this.each(function() {
new $.SmartMenus(this, opts);
});
}
// default settings
$.fn.smartmenus.defaults = {
isPopup: false, // is this a popup menu (can be shown via the popupShow/popupHide methods) or a permanent menu bar
mainMenuSubOffsetX: 0, // pixels offset from default position
mainMenuSubOffsetY: 0, // pixels offset from default position
subMenusSubOffsetX: 0, // pixels offset from default position
subMenusSubOffsetY: 0, // pixels offset from default position
subMenusMinWidth: '10em', // min-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored
subMenusMaxWidth: '20em', // max-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored
subIndicators: true, // create sub menu indicators - creates a SPAN and inserts it in the A
subIndicatorsPos: 'prepend', // position of the SPAN relative to the menu item content ('prepend', 'append')
subIndicatorsText: '+', // [optionally] add text in the SPAN (e.g. '+') (you may want to check the CSS for the sub indicators too)
scrollStep: 30, // pixels step when scrolling long sub menus that do not fit in the viewport height
scrollAccelerate: true, // accelerate scrolling or use a fixed step
showTimeout: 250, // timeout before showing the sub menus
hideTimeout: 500, // timeout before hiding the sub menus
showDuration: 0, // duration for show animation - set to 0 for no animation - matters only if showFunction:null
showFunction: null, // custom function to use when showing a sub menu (the default is the jQuery 'show')
// don't forget to call complete() at the end of whatever you do
// e.g.: function($ul, complete) { $ul.fadeIn(250, complete); }
hideDuration: 0, // duration for hide animation - set to 0 for no animation - matters only if hideFunction:null
hideFunction: function($ul, complete) { $ul.fadeOut(200, complete); }, // custom function to use when hiding a sub menu (the default is the jQuery 'hide')
// don't forget to call complete() at the end of whatever you do
// e.g.: function($ul, complete) { $ul.fadeOut(250, complete); }
collapsibleShowDuration:0, // duration for show animation for collapsible sub menus - matters only if collapsibleShowFunction:null
collapsibleShowFunction:function($ul, complete) { $ul.slideDown(200, complete); }, // custom function to use when showing a collapsible sub menu
// (i.e. when mobile styles are used to make the sub menus collapsible)
collapsibleHideDuration:0, // duration for hide animation for collapsible sub menus - matters only if collapsibleHideFunction:null
collapsibleHideFunction:function($ul, complete) { $ul.slideUp(200, complete); }, // custom function to use when hiding a collapsible sub menu
// (i.e. when mobile styles are used to make the sub menus collapsible)
showOnClick: false, // show the first-level sub menus onclick instead of onmouseover (i.e. mimic desktop app menus) (matters only for mouse input)
hideOnClick: true, // hide the sub menus on click/tap anywhere on the page
noMouseOver: false, // disable sub menus activation onmouseover (i.e. behave like in touch mode - use just mouse clicks) (matters only for mouse input)
keepInViewport: true, // reposition the sub menus if needed to make sure they always appear inside the viewport
keepHighlighted: true, // keep all ancestor items of the current sub menu highlighted (adds the 'highlighted' class to the A's)
markCurrentItem: false, // automatically add the 'current' class to the A element of the item linking to the current URL
markCurrentTree: true, // add the 'current' class also to the A elements of all ancestor items of the current item
rightToLeftSubMenus: false, // right to left display of the sub menus (check the CSS for the sub indicators' position)
bottomToTopSubMenus: false, // bottom to top display of the sub menus
overlapControlsInIE: true // make sure sub menus appear on top of special OS controls in IE (i.e. SELECT, OBJECT, EMBED, etc.)
};
return $;
}));PK |?]��� �P �P css/sm-blue/_sm-blue.scssnu �Iw�� @import 'compass';
// This file is best viewed with Tab size 4 code indentation
// -----------------------------------------------------------------------------------------------------------------
// 1. Theme Quick Settings (Variables)
// (for further control, you will need to dig into the actual CSS in 2.)
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 1.1. Colors
// ----------------------------------------------------------
$sm-blue__blue: #3092c0 !default;
$sm-blue__blue-dark: darken($sm-blue__blue, 5%) !default;
$sm-blue__blue-darker: #006892 !default;
$sm-blue__blue-light: lighten($sm-blue__blue, 30%) !default;
$sm-blue__white: #fff !default;
$sm-blue__gray: darken($sm-blue__white, 34%) !default;
$sm-blue__text-shadow: rgba(0, 0, 0, 0.2) !default;
$sm-blue__box-shadow: rgba(0, 0, 0, 0.2) !default;
$sm-blue__gradients_amount: 2% !default;
// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------
$sm-blue__desktop-vp: 768px !default; // switch from collapsible to desktop
// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------
// Import "PT Sans Narrow" font from Google fonts
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
$sm-blue__font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif !default;
$sm-blue__font-size-base: 18px !default;
$sm-blue__font-size-small: 16px !default;
$sm-blue__line-height: 23px !default;
// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------
$sm-blue__border-width: 1px !default;
$sm-blue__border-radius-base: 8px !default;
$sm-blue__border-radius-small: 4px !default;
// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------
// Menu box
$sm-blue__collapsible-bg: transparent !default;
$sm-blue__collapsible-border-radius: $sm-blue__border-radius-base !default;
$sm-blue__collapsible-box-shadow: 0 1px 4px $sm-blue__box-shadow !default;
// Items
$sm-blue__collapsible-item-color: $sm-blue__white !default;
$sm-blue__collapsible-item-bg: $sm-blue__blue !default;
$sm-blue__collapsible-item-current-color: $sm-blue__white !default;
$sm-blue__collapsible-item-current-bg: $sm-blue__blue-darker !default;
$sm-blue__collapsible-item-disabled-color: lighten($sm-blue__blue, 30%) !default;
$sm-blue__collapsible-item-padding-vertical: 10px !default;
$sm-blue__collapsible-item-padding-horizontal: 20px !default;
// Toggle button (sub menu indicators)
$sm-blue__collapsible-toggle-bg: rgba(0, 0, 0, 0.1) !default;
// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------
// Menu box
$sm-blue__collapsible-sub-bg: $sm-blue__white !default;
// Items
$sm-blue__collapsible-sub-item-color: $sm-blue__blue-dark !default;
$sm-blue__collapsible-sub-item-bg: transparent !default;
$sm-blue__collapsible-sub-item-current-color: $sm-blue__white !default;
$sm-blue__collapsible-sub-item-current-bg: $sm-blue__blue-darker !default;
$sm-blue__collapsible-sub-item-disabled-color: darken($sm-blue__white, 30%) !default;
// Items separators
$sm-blue__collapsible-sub-separators-color: rgba(0, 0, 0, 0.05) !default;
// Items text indentation for deeper levels
$sm-blue__collapsible-sub-item-indentation: 8px !default;
// ----------------------------------------------------------
// :: 1.7. Desktop main menu
// ----------------------------------------------------------
// Menu box
$sm-blue__desktop-bg: $sm-blue__blue !default;
$sm-blue__desktop-border-radius: $sm-blue__border-radius-base !default;
$sm-blue__desktop-box-shadow: 0 1px 1px $sm-blue__box-shadow !default;
// Items
$sm-blue__desktop-item-color: $sm-blue__white !default;
$sm-blue__desktop-item-bg: $sm-blue__blue !default;
$sm-blue__desktop-item-hover-bg: darken($sm-blue__blue, 5%) !default;
$sm-blue__desktop-item-current-color: $sm-blue__white !default;
$sm-blue__desktop-item-current-bg: $sm-blue__blue-darker !default;
$sm-blue__desktop-item-disabled-color: lighten($sm-blue__blue, 30%) !default;
$sm-blue__desktop-item-padding-vertical: 13px !default;
$sm-blue__desktop-item-padding-horizontal: 24px !default;
// Items separators
$sm-blue__desktop-separators-size: 1px !default;
$sm-blue__desktop-separators-color: darken($sm-blue__blue, 5%) !default;
// Sub menu indicators
$sm-blue__desktop-arrow-size: 5px !default; // border-width
$sm-blue__desktop-arrow-color: $sm-blue__blue-light !default;
// Vertical menu box
$sm-blue__desktop-vertical-box-shadow: 0 1px 4px $sm-blue__box-shadow !default;
// Vertical items
$sm-blue__desktop-vertical-item-padding-vertical: 9px !default;
$sm-blue__desktop-vertical-item-padding-horizontal: 23px !default;
// ----------------------------------------------------------
// :: 1.8. Desktop sub menus
// ----------------------------------------------------------
// Menu box
$sm-blue__desktop-sub-bg: $sm-blue__white !default;
$sm-blue__desktop-sub-border-color: $sm-blue__gray !default;
$sm-blue__desktop-sub-border-radius: $sm-blue__border-radius-small !default;
$sm-blue__desktop-sub-box-shadow: 0 5px 12px $sm-blue__box-shadow !default;
$sm-blue__desktop-sub-padding-vertical: 7px !default;
$sm-blue__desktop-sub-padding-horizontal: 0 !default;
// Items
$sm-blue__desktop-sub-item-color: $sm-blue__blue-dark !default;
$sm-blue__desktop-sub-item-bg: transparent !default;
$sm-blue__desktop-sub-item-hover-color: $sm-blue__white !default;
$sm-blue__desktop-sub-item-hover-bg: $sm-blue__blue !default;
$sm-blue__desktop-sub-item-current-color: $sm-blue__white !default;
$sm-blue__desktop-sub-item-current-bg: $sm-blue__blue-darker !default;
$sm-blue__desktop-sub-item-disabled-color: darken($sm-blue__white, 30%) !default;
$sm-blue__desktop-sub-item-padding-vertical: 9px !default;
$sm-blue__desktop-sub-item-padding-horizontal: 23px !default;
// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------
// calc item height and sub menus toggle button size
$sm-blue__item-height: $sm-blue__line-height + $sm-blue__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-blue__toggle-size: floor($sm-blue__item-height * 0.8);
$sm-blue__toggle-spacing: floor($sm-blue__item-height * 0.1);
// Main menu box
.sm-blue {
background: $sm-blue__collapsible-bg;
@include border-radius($sm-blue__collapsible-border-radius);
@include box-shadow($sm-blue__collapsible-box-shadow);
// Main menu items
a {
&,
&:hover,
&:focus,
&:active {
padding: $sm-blue__collapsible-item-padding-vertical $sm-blue__collapsible-item-padding-horizontal;
/* make room for the toggle button (sub indicator) */
padding-right: $sm-blue__collapsible-item-padding-horizontal + $sm-blue__toggle-size + $sm-blue__toggle-spacing;
background: $sm-blue__collapsible-item-bg;
@include background-image(linear-gradient(to bottom, lighten($sm-blue__collapsible-item-bg, $sm-blue__gradients_amount), darken($sm-blue__collapsible-item-bg, $sm-blue__gradients_amount)));
color: $sm-blue__collapsible-item-color;
font-family: $sm-blue__font-family;
font-size: $sm-blue__font-size-base;
font-weight: bold;
line-height: $sm-blue__line-height;
text-decoration: none;
text-shadow: 0 1px 0 $sm-blue__text-shadow;
}
&.current {
background: $sm-blue__collapsible-item-current-bg;
@include background-image(linear-gradient(to bottom, darken($sm-blue__collapsible-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__collapsible-item-current-bg, $sm-blue__gradients_amount)));
color: $sm-blue__collapsible-item-current-color;
}
&.disabled {
color: $sm-blue__collapsible-item-disabled-color;
}
// Toggle buttons (sub menu indicators)
span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -(ceil($sm-blue__toggle-size / 2));
left: auto;
right: $sm-blue__toggle-spacing;
width: $sm-blue__toggle-size;
height: $sm-blue__toggle-size;
overflow: hidden;
font: bold #{$sm-blue__font-size-small}/#{$sm-blue__toggle-size} monospace !important;
text-align: center;
text-shadow: none;
background: $sm-blue__collapsible-toggle-bg;
@include border-radius($sm-blue__border-radius-small);
}
// Change + to - on sub menu expand
&.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
}
// round the corners of the first item
> li:first-child > a, > li:first-child > :not(ul) a {
@include border-radius($sm-blue__collapsible-border-radius $sm-blue__collapsible-border-radius 0 0);
}
// round the corners of the last item
@include sm-blue__round-corners-last-item($sm-blue__collapsible-border-radius);
// Sub menus box
ul {
background: $sm-blue__collapsible-sub-bg;
// darken the background of the 2+ level sub menus
ul {
background: rgba(darken($sm-blue__collapsible-sub-bg, 60%), 0.1);
}
// Sub menus items
a {
&,
&:hover,
&:focus,
&:active {
background: $sm-blue__collapsible-sub-item-bg;
color: $sm-blue__collapsible-sub-item-color;
font-size: $sm-blue__font-size-small;
text-shadow: none;
// add indentation for sub menus text
border-left: $sm-blue__collapsible-sub-item-indentation solid transparent;
}
&.current {
background: $sm-blue__collapsible-sub-item-current-bg;
@include background-image(linear-gradient(to bottom, darken($sm-blue__collapsible-sub-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__collapsible-sub-item-current-bg, $sm-blue__gradients_amount)));
color: $sm-blue__collapsible-sub-item-current-color;
}
&.disabled {
color: $sm-blue__collapsible-sub-item-disabled-color;
}
}
// Add indentation for sub menus text for deeper levels
@include sm-blue__sub-items-indentation($sm-blue__collapsible-sub-item-indentation);
// Sub menus items separators
li {
border-top: 1px solid $sm-blue__collapsible-sub-separators-color;
&:first-child {
border-top: 0;
}
}
}
}
// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------
@media (min-width: $sm-blue__desktop-vp) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-blue ul{position:absolute;width:12em;}
.sm-blue li{float:left;}
.sm-blue.sm-rtl li{float:right;}
.sm-blue ul li,.sm-blue.sm-rtl ul li,.sm-blue.sm-vertical li{float:none;}
.sm-blue a{white-space:nowrap;}
.sm-blue ul a,.sm-blue.sm-vertical a{white-space:normal;}
.sm-blue .sm-nowrap > li > a,.sm-blue .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
/* ...end */
// Main menu box
.sm-blue {
background: $sm-blue__desktop-bg;
@include background-image(linear-gradient(to bottom, lighten($sm-blue__desktop-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-bg, $sm-blue__gradients_amount)));
@include border-radius($sm-blue__desktop-border-radius);
@include box-shadow($sm-blue__desktop-box-shadow);
// Main menu items
a {
&,
&:hover,
&:focus,
&:active,
&.highlighted {
padding: $sm-blue__desktop-item-padding-vertical $sm-blue__desktop-item-padding-horizontal;
background: $sm-blue__desktop-item-bg;
@include background-image(linear-gradient(to bottom, lighten($sm-blue__desktop-item-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-item-bg, $sm-blue__gradients_amount)));
color: $sm-blue__desktop-item-color;
}
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-blue__desktop-item-hover-bg;
@include background-image(linear-gradient(to bottom, lighten($sm-blue__desktop-item-hover-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-item-hover-bg, $sm-blue__gradients_amount)));
}
&.current {
background: $sm-blue__desktop-item-current-bg;
@include background-image(linear-gradient(to bottom, darken($sm-blue__desktop-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__desktop-item-current-bg, $sm-blue__gradients_amount)));
color: $sm-blue__desktop-item-current-color;
}
&.disabled {
background: $sm-blue__desktop-item-bg;
@include background-image(linear-gradient(to bottom, lighten($sm-blue__desktop-item-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-item-bg, $sm-blue__gradients_amount)));
color: $sm-blue__desktop-item-disabled-color;
}
// Sub menu indicators
span.sub-arrow {
top: auto;
margin-top: 0;
bottom: 2px;
left: 50%;
margin-left: -$sm-blue__desktop-arrow-size;
right: auto;
width: 0;
height: 0;
border-width: $sm-blue__desktop-arrow-size;
border-style: solid dashed dashed dashed;
border-color: $sm-blue__desktop-arrow-color transparent transparent transparent;
background: transparent;
@include border-radius(0);
}
// reset mobile first style
&.highlighted span.sub-arrow:before {
display: none;
}
}
// round the corners of the first and last items
> li:first-child > a, > li:first-child > :not(ul) a {
@include border-radius($sm-blue__desktop-border-radius 0 0 $sm-blue__desktop-border-radius);
}
> li:last-child > a, > li:last-child > :not(ul) a {
@include border-radius(0 $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius 0 !important);
}
// Main menu items separators
> li {
border-left: $sm-blue__desktop-separators-size solid $sm-blue__desktop-separators-color;
&:first-child {
border-left: 0;
}
}
// Sub menus box
ul {
border: $sm-blue__border-width solid $sm-blue__gray;
padding: $sm-blue__desktop-sub-padding-vertical $sm-blue__desktop-sub-padding-horizontal;
background: $sm-blue__desktop-sub-bg;
@include border-radius(0 0 $sm-blue__desktop-sub-border-radius $sm-blue__desktop-sub-border-radius);
@include box-shadow($sm-blue__desktop-sub-box-shadow);
// 2+ sub levels need rounding of all corners
ul {
@include border-radius($sm-blue__desktop-sub-border-radius);
background: $sm-blue__desktop-sub-bg;
}
// Sub menus items
a {
&,
&:hover,
&:focus,
&:active,
&.highlighted {
border: 0 !important;
padding: $sm-blue__desktop-sub-item-padding-vertical $sm-blue__desktop-sub-item-padding-horizontal;
background: $sm-blue__desktop-sub-item-bg;
color: $sm-blue__desktop-sub-item-color;
@include border-radius(0 !important);
}
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-blue__desktop-sub-item-hover-bg;
@include background-image(linear-gradient(to bottom, lighten($sm-blue__desktop-sub-item-hover-bg, $sm-blue__gradients_amount), darken($sm-blue__desktop-sub-item-hover-bg, $sm-blue__gradients_amount)));
color: $sm-blue__desktop-sub-item-hover-color;
}
&.current {
background: $sm-blue__desktop-sub-item-current-bg;
@include background-image(linear-gradient(to bottom, darken($sm-blue__desktop-sub-item-current-bg, $sm-blue__gradients_amount), lighten($sm-blue__desktop-sub-item-current-bg, $sm-blue__gradients_amount)));
color: $sm-blue__desktop-sub-item-current-color;
}
&.disabled {
background: $sm-blue__desktop-sub-bg;
color: $sm-blue__desktop-sub-item-disabled-color;
}
// Sub menu indicators
span.sub-arrow {
top: 50%;
margin-top: -$sm-blue__desktop-arrow-size;
bottom: auto;
left: auto;
margin-left: 0;
right: 10px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $sm-blue__desktop-arrow-color;
}
}
// No sub menus items separators
li {
border: 0;
}
}
// Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
span.scroll-up,
span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background: $sm-blue__desktop-sub-bg;
height: 20px;
// width and position will be set automatically by the script
}
span.scroll-up-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
// we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too
width: 0;
height: 0;
overflow: hidden;
border-width: 8px; // tweak size of the arrow
border-style: dashed dashed solid dashed;
border-color: transparent transparent $sm-blue__desktop-sub-item-color transparent;
}
span.scroll-down-arrow {
@extend span.scroll-up-arrow;
top: 6px;
border-style: solid dashed dashed dashed;
border-color: $sm-blue__desktop-sub-item-color transparent transparent transparent;
}
// Rigth-to-left
// Main menu box
&.sm-rtl {
// Vertical main menu items
&.sm-vertical {
a {
// Sub menu indicators
span.sub-arrow {
right: auto;
left: 10px;
border-style: dashed solid dashed dashed;
border-color: transparent $sm-blue__desktop-arrow-color transparent transparent;
}
}
}
// round the corners of the first and last items
> li:first-child > a, > li:first-child > :not(ul) a {
@include border-radius(0 $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius 0);
}
> li:last-child > a, > li:last-child > :not(ul) a {
@include border-radius($sm-blue__desktop-border-radius 0 0 $sm-blue__desktop-border-radius !important);
}
// Main menu items separators
> li {
&:first-child {
border-left: $sm-blue__desktop-separators-size solid $sm-blue__desktop-separators-color;
}
&:last-child {
border-left: 0;
}
}
// Sub menus box
ul {
a {
// Sub menu indicators
span.sub-arrow {
right: auto;
left: 10px;
border-style: dashed solid dashed dashed;
border-color: transparent $sm-blue__desktop-arrow-color transparent transparent;
}
}
}
}
// Vertical main menu
// Main menu box
&.sm-vertical {
@include box-shadow($sm-blue__desktop-vertical-box-shadow);
// Main menu items
a {
padding: $sm-blue__desktop-vertical-item-padding-vertical $sm-blue__desktop-vertical-item-padding-horizontal;
// Sub menu indicators
span.sub-arrow {
top: 50%;
margin-top: -$sm-blue__desktop-arrow-size;
bottom: auto;
left: auto;
margin-left: 0;
right: 10px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $sm-blue__desktop-arrow-color;
}
}
// round the corners of the first and last items
> li:first-child > a, > li:first-child > :not(ul) a {
@include border-radius($sm-blue__desktop-border-radius $sm-blue__desktop-border-radius 0 0);
}
> li:last-child > a, > li:last-child > :not(ul) a {
@include border-radius(0 0 $sm-blue__desktop-border-radius $sm-blue__desktop-border-radius !important);
}
// No main menu item separators
> li {
border-left: 0 !important;
}
// Sub menus box
ul {
@include border-radius($sm-blue__desktop-sub-border-radius !important);
// Sub menus items
a {
padding: $sm-blue__desktop-sub-item-padding-vertical $sm-blue__desktop-sub-item-padding-horizontal;
}
}
}
}
}PK |?]Z�eA eA css/sm-blue/sm-blue.cssnu �Iw�� @import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
.sm-blue {
background: transparent;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
padding: 10px 20px;
/* make room for the toggle button (sub indicator) */
padding-right: 58px;
background: #3092c0;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));
background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
color: white;
font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 23px;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.sm-blue a.current {
background: #006892;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c));
background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c);
background-image: -moz-linear-gradient(to bottom, #006188, #006f9c);
background-image: -o-linear-gradient(to bottom, #006188, #006f9c);
background-image: linear-gradient(to bottom, #006188, #006f9c);
color: white;
}
.sm-blue a.disabled {
color: #a1d1e8;
}
.sm-blue a span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -17px;
left: auto;
right: 4px;
width: 34px;
height: 34px;
overflow: hidden;
font: bold 16px/34px monospace !important;
text-align: center;
text-shadow: none;
background: rgba(0, 0, 0, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.sm-blue a.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
}
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted,
.sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
.sm-blue ul {
background: white;
}
.sm-blue ul ul {
background: rgba(102, 102, 102, 0.1);
}
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
background: transparent;
color: #2b82ac;
font-size: 16px;
text-shadow: none;
border-left: 8px solid transparent;
}
.sm-blue ul a.current {
background: #006892;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c));
background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c);
background-image: -moz-linear-gradient(to bottom, #006188, #006f9c);
background-image: -o-linear-gradient(to bottom, #006188, #006f9c);
background-image: linear-gradient(to bottom, #006188, #006f9c);
color: white;
}
.sm-blue ul a.disabled {
color: #b3b3b3;
}
.sm-blue ul ul a,
.sm-blue ul ul a:hover,
.sm-blue ul ul a:focus,
.sm-blue ul ul a:active {
border-left: 16px solid transparent;
}
.sm-blue ul ul ul a,
.sm-blue ul ul ul a:hover,
.sm-blue ul ul ul a:focus,
.sm-blue ul ul ul a:active {
border-left: 24px solid transparent;
}
.sm-blue ul ul ul ul a,
.sm-blue ul ul ul ul a:hover,
.sm-blue ul ul ul ul a:focus,
.sm-blue ul ul ul ul a:active {
border-left: 32px solid transparent;
}
.sm-blue ul ul ul ul ul a,
.sm-blue ul ul ul ul ul a:hover,
.sm-blue ul ul ul ul ul a:focus,
.sm-blue ul ul ul ul ul a:active {
border-left: 40px solid transparent;
}
.sm-blue ul li {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sm-blue ul li:first-child {
border-top: 0;
}
@media (min-width: 768px) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-blue ul {
position: absolute;
width: 12em;
}
.sm-blue li {
float: left;
}
.sm-blue.sm-rtl li {
float: right;
}
.sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li {
float: none;
}
.sm-blue a {
white-space: nowrap;
}
.sm-blue ul a, .sm-blue.sm-vertical a {
white-space: normal;
}
.sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a {
white-space: nowrap;
}
/* ...end */
.sm-blue {
background: #3092c0;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));
background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
padding: 13px 24px;
background: #3092c0;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));
background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
color: white;
}
.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
background: #2b82ac;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #2d89b4), color-stop(100%, #297ca3));
background-image: -webkit-linear-gradient(to bottom, #2d89b4, #297ca3);
background-image: -moz-linear-gradient(to bottom, #2d89b4, #297ca3);
background-image: -o-linear-gradient(to bottom, #2d89b4, #297ca3);
background-image: linear-gradient(to bottom, #2d89b4, #297ca3);
}
.sm-blue a.current {
background: #006892;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c));
background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c);
background-image: -moz-linear-gradient(to bottom, #006188, #006f9c);
background-image: -o-linear-gradient(to bottom, #006188, #006f9c);
background-image: linear-gradient(to bottom, #006188, #006f9c);
color: white;
}
.sm-blue a.disabled {
background: #3092c0;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));
background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
color: #a1d1e8;
}
.sm-blue a span.sub-arrow {
top: auto;
margin-top: 0;
bottom: 2px;
left: 50%;
margin-left: -5px;
right: auto;
width: 0;
height: 0;
border-width: 5px;
border-style: solid dashed dashed dashed;
border-color: #a1d1e8 transparent transparent transparent;
background: transparent;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
.sm-blue a.highlighted span.sub-arrow:before {
display: none;
}
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-ms-border-radius: 8px 0 0 8px;
-o-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
.sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a {
-webkit-border-radius: 0 8px 8px 0 !important;
-moz-border-radius: 0 8px 8px 0 !important;
-ms-border-radius: 0 8px 8px 0 !important;
-o-border-radius: 0 8px 8px 0 !important;
border-radius: 0 8px 8px 0 !important;
}
.sm-blue > li {
border-left: 1px solid #2b82ac;
}
.sm-blue > li:first-child {
border-left: 0;
}
.sm-blue ul {
border: 1px solid #a8a8a8;
padding: 7px 0;
background: white;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}
.sm-blue ul ul {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background: white;
}
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
border: 0 !important;
padding: 9px 23px;
background: transparent;
color: #2b82ac;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-ms-border-radius: 0 !important;
-o-border-radius: 0 !important;
border-radius: 0 !important;
}
.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
background: #3092c0;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #3298c8), color-stop(100%, #2e8cb8));
background-image: -webkit-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -moz-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: -o-linear-gradient(to bottom, #3298c8, #2e8cb8);
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
color: white;
}
.sm-blue ul a.current {
background: #006892;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #006188), color-stop(100%, #006f9c));
background-image: -webkit-linear-gradient(to bottom, #006188, #006f9c);
background-image: -moz-linear-gradient(to bottom, #006188, #006f9c);
background-image: -o-linear-gradient(to bottom, #006188, #006f9c);
background-image: linear-gradient(to bottom, #006188, #006f9c);
color: white;
}
.sm-blue ul a.disabled {
background: white;
color: #b3b3b3;
}
.sm-blue ul a span.sub-arrow {
top: 50%;
margin-top: -5px;
bottom: auto;
left: auto;
margin-left: 0;
right: 10px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #a1d1e8;
}
.sm-blue ul li {
border: 0;
}
.sm-blue span.scroll-up,
.sm-blue span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background: white;
height: 20px;
}
.sm-blue span.scroll-up-arrow, .sm-blue span.scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-width: 8px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #2b82ac transparent;
}
.sm-blue span.scroll-down-arrow {
top: 6px;
border-style: solid dashed dashed dashed;
border-color: #2b82ac transparent transparent transparent;
}
.sm-blue.sm-rtl.sm-vertical a span.sub-arrow {
right: auto;
left: 10px;
border-style: dashed solid dashed dashed;
border-color: transparent #a1d1e8 transparent transparent;
}
.sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a {
-webkit-border-radius: 0 8px 8px 0;
-moz-border-radius: 0 8px 8px 0;
-ms-border-radius: 0 8px 8px 0;
-o-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
.sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a {
-webkit-border-radius: 8px 0 0 8px !important;
-moz-border-radius: 8px 0 0 8px !important;
-ms-border-radius: 8px 0 0 8px !important;
-o-border-radius: 8px 0 0 8px !important;
border-radius: 8px 0 0 8px !important;
}
.sm-blue.sm-rtl > li:first-child {
border-left: 1px solid #2b82ac;
}
.sm-blue.sm-rtl > li:last-child {
border-left: 0;
}
.sm-blue.sm-rtl ul a span.sub-arrow {
right: auto;
left: 10px;
border-style: dashed solid dashed dashed;
border-color: transparent #a1d1e8 transparent transparent;
}
.sm-blue.sm-vertical {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sm-blue.sm-vertical a {
padding: 9px 23px;
}
.sm-blue.sm-vertical a span.sub-arrow {
top: 50%;
margin-top: -5px;
bottom: auto;
left: auto;
margin-left: 0;
right: 10px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #a1d1e8;
}
.sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a {
-webkit-border-radius: 0 0 8px 8px !important;
-moz-border-radius: 0 0 8px 8px !important;
-ms-border-radius: 0 0 8px 8px !important;
-o-border-radius: 0 0 8px 8px !important;
border-radius: 0 0 8px 8px !important;
}
.sm-blue.sm-vertical > li {
border-left: 0 !important;
}
.sm-blue.sm-vertical ul {
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
-ms-border-radius: 4px !important;
-o-border-radius: 4px !important;
border-radius: 4px !important;
}
.sm-blue.sm-vertical ul a {
padding: 9px 23px;
}
}
PK |?]%�ɖ � . css/sm-blue/mixins/_sub-items-indentation.scssnu �Iw�� // Generate rules to indent sub menus text
//
// We'll use left border to avoid messing with the padding.
@mixin sm-blue__sub-items-indentation($amount, $chainable: 'ul ', $level: 4, $chain: '') {
@for $i from 1 through $level {
$chain: $chain + $chainable;
#{$chain} a,
#{$chain} a:hover,
#{$chain} a:focus,
#{$chain} a:active {
border-left: ($amount * ($i + 1)) solid transparent;
}
}
}PK |?]z(fK� � 0 css/sm-blue/mixins/_round-corners-last-item.scssnu �Iw�� // Generate rules to round the corners of the last collapsible item
@mixin sm-blue__round-corners-last-item($amount, $chainable: 'ul > li:last-child > ', $level: 4, $chain_prefix: '> li:last-child > ', $chain: '', $selector: '') {
$chain: $chain_prefix;
$selector: $chain + 'a, ' + $chain + '*:not(ul) a, ' + $chain + 'ul';
@for $i from 1 through $level {
$chain: $chain + $chainable;
$selector: $selector + ',
' + $chain + ' a, ' + $chain + '*:not(ul) a, ' + $chain + ' ul';
}
#{$selector} {
@include border-radius(0 0 $amount $amount);
}
// highlighted items, don't need rounding since their sub is open
$chain: $chain_prefix;
$selector: $chain + 'a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
@for $i from 1 through $level {
$chain: $chain + $chainable;
$selector: $selector + ',
' + $chain + ' a.highlighted, ' + $chain + '*:not(ul) a.highlighted';
}
#{$selector} {
@include border-radius(0);
}
}PK |?]?��#L L css/sm-blue/sm-blue.scssnu �Iw�� @import '_mixins.scss';
// the variables + the CSS
@import '_sm-blue.scss';PK |?]�{�] ] css/sm-blue/_mixins.scssnu �Iw�� @import 'mixins/_sub-items-indentation.scss';
@import 'mixins/_round-corners-last-item.scss';PK |?]��c � � css/sm-core-css.cssnu �Iw�� /* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
You need this once per page no matter how many menu trees or different themes you use.
-------------------------------------------------------------------------------------------*/
.sm{position:relative;z-index:9999;}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:not-allowed;}
.sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;}
.sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}PK |?]QRn�� � css/sm-simple/sm-simple.cssnu �Iw�� .sm-simple {
border: 1px solid #bbbbbb;
background: white;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
padding: 13px 20px;
/* make room for the toggle button (sub indicator) */
padding-right: 58px;
color: #555555;
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 17px;
text-decoration: none;
}
.sm-simple a.current {
background: #555555;
color: white;
}
.sm-simple a.disabled {
color: #cccccc;
}
.sm-simple a span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -17px;
left: auto;
right: 4px;
width: 34px;
height: 34px;
overflow: hidden;
font: bold 14px/34px monospace !important;
text-align: center;
text-shadow: none;
background: rgba(0, 0, 0, 0.08);
}
.sm-simple a.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
.sm-simple li {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sm-simple > li:first-child {
border-top: 0;
}
.sm-simple ul {
background: rgba(179, 179, 179, 0.1);
}
.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
font-size: 14px;
border-left: 8px solid transparent;
}
.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
border-left: 16px solid transparent;
}
.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
border-left: 24px solid transparent;
}
.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
border-left: 32px solid transparent;
}
.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
border-left: 40px solid transparent;
}
@media (min-width: 768px) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-simple ul {
position: absolute;
width: 12em;
}
.sm-simple li {
float: left;
}
.sm-simple.sm-rtl li {
float: right;
}
.sm-simple ul li, .sm-simple.sm-rtl ul li, .sm-simple.sm-vertical li {
float: none;
}
.sm-simple a {
white-space: nowrap;
}
.sm-simple ul a, .sm-simple.sm-vertical a {
white-space: normal;
}
.sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
white-space: nowrap;
}
/* ...end */
.sm-simple {
background: white;
}
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
padding: 11px 20px;
color: #555555;
}
.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
background: #eeeeee;
}
.sm-simple a.current {
background: #555555;
color: white;
}
.sm-simple a.disabled {
background: white;
color: #cccccc;
}
.sm-simple a.has-submenu {
padding-right: 32px;
}
.sm-simple a span.sub-arrow {
top: 50%;
margin-top: -8px;
right: 20px;
width: 8px;
height: 16px;
font: 14px/16px monospace !important;
background: transparent;
}
.sm-simple a.highlighted span.sub-arrow:before {
display: none;
}
.sm-simple > li {
border-top: 0;
border-left: 1px solid #eeeeee;
}
.sm-simple > li:first-child {
border-left: 0;
}
.sm-simple ul {
border: 1px solid #bbbbbb;
background: white;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.sm-simple ul a {
border: 0 !important;
}
.sm-simple ul a.has-submenu {
padding-right: 20px;
}
.sm-simple ul a span.sub-arrow {
right: auto;
margin-left: -12px;
}
.sm-simple ul > li {
border-left: 0;
border-top: 1px solid #eeeeee;
}
.sm-simple ul > li:first-child {
border-top: 0;
}
.sm-simple span.scroll-up,
.sm-simple span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background: white;
height: 20px;
}
.sm-simple span.scroll-up-arrow, .sm-simple span.scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-width: 8px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #555555 transparent;
}
.sm-simple span.scroll-down-arrow {
top: 6px;
border-style: solid dashed dashed dashed;
border-color: #555555 transparent transparent transparent;
}
.sm-simple.sm-rtl a.has-submenu {
padding-right: 20px;
padding-left: 32px;
}
.sm-simple.sm-rtl a span.sub-arrow {
right: auto;
left: 20px;
}
.sm-simple.sm-rtl.sm-vertical a.has-submenu {
padding: 11px 20px;
}
.sm-simple.sm-rtl.sm-vertical a span.sub-arrow {
right: 20px;
margin-right: -12px;
}
.sm-simple.sm-rtl > li:first-child {
border-left: 1px solid #eeeeee;
}
.sm-simple.sm-rtl > li:last-child {
border-left: 0;
}
.sm-simple.sm-rtl ul a.has-submenu {
padding: 11px 20px;
}
.sm-simple.sm-rtl ul a span.sub-arrow {
right: 20px;
margin-right: -12px;
}
.sm-simple.sm-vertical a span.sub-arrow {
right: auto;
margin-left: -12px;
}
.sm-simple.sm-vertical li {
border-left: 0;
border-top: 1px solid #eeeeee;
}
.sm-simple.sm-vertical > li:first-child {
border-top: 0;
}
}
PK |?]�ć�3 �3 css/sm-simple/_sm-simple.scssnu �Iw�� @import 'compass';
// This file is best viewed with Tab size 4 code indentation
// -----------------------------------------------------------------------------------------------------------------
// 1. Theme Quick Settings (Variables)
// (for further control, you will need to dig into the actual CSS in 2.)
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 1.1. Colors
// ----------------------------------------------------------
$sm-simple__white: #fff !default;
$sm-simple__gray: darken($sm-simple__white, 6.5%) !default;
$sm-simple__gray-dark: darken($sm-simple__white, 26.5%) !default;
$sm-simple__gray-darker: darken($sm-simple__white, 66.5%) !default;
$sm-simple__box-shadow: rgba(0, 0, 0, 0.2) !default;
// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------
$sm-simple__desktop-vp: 768px !default; // switch from collapsible to desktop
// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------
$sm-simple__font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif !default;
$sm-simple__font-size-base: 16px !default;
$sm-simple__font-size-small: 14px !default;
$sm-simple__line-height: 17px !default;
// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------
$sm-simple__border-width: 1px !default;
// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------
// Menu box
$sm-simple__collapsible-bg: $sm-simple__white !default;
$sm-simple__collapsible-border-color: $sm-simple__gray-dark !default;
$sm-simple__collapsible-box-shadow: 0 1px 1px $sm-simple__box-shadow !default;
// Items
$sm-simple__collapsible-item-color: $sm-simple__gray-darker !default;
$sm-simple__collapsible-item-current-color: $sm-simple__white !default;
$sm-simple__collapsible-item-current-bg: $sm-simple__gray-darker !default;
$sm-simple__collapsible-item-disabled-color: darken($sm-simple__white, 20%) !default;
$sm-simple__collapsible-item-padding-vertical: 13px !default;
$sm-simple__collapsible-item-padding-horizontal: 20px !default;
// Items separators
$sm-simple__collapsible-separators-color: rgba(0, 0, 0, 0.05) !default;
// Toggle button (sub menu indicators)
$sm-simple__collapsible-toggle-bg: rgba(0, 0, 0, 0.08) !default;
// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------
// Menu box
$sm-simple__collapsible-sub-bg: rgba(darken($sm-simple__collapsible-bg, 30%), 0.1) !default;
// Items text indentation for deeper levels
$sm-simple__collapsible-sub-item-indentation: 8px !default;
// ----------------------------------------------------------
// :: 1.7. Desktop main menu and sub menus
// ----------------------------------------------------------
// Menu box
$sm-simple__desktop-bg: $sm-simple__white !default;
// Items
$sm-simple__desktop-item-color: $sm-simple__gray_darker !default;
$sm-simple__desktop-item-hover-bg: $sm-simple__gray !default;
$sm-simple__desktop-item-current-color: $sm-simple__white !default;
$sm-simple__desktop-item-current-bg: $sm-simple__gray-darker !default;
$sm-simple__desktop-item-disabled-color: darken($sm-simple__white, 20%) !default;
$sm-simple__desktop-item-padding-vertical: 11px !default;
$sm-simple__desktop-item-padding-horizontal: 20px !default;
// Items separators
$sm-simple__desktop-separators-size: 1px !default;
$sm-simple__desktop-separators-color: $sm-simple__gray !default;
// Sub menu indicators
$sm-simple__desktop-arrow-spacing: 4px !default;
// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------
// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------
// calc item height and sub menus toggle button size
$sm-simple__item-height: $sm-simple__line-height + $sm-simple__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-simple__toggle-size: floor($sm-simple__item-height * 0.8);
$sm-simple__toggle-spacing: floor($sm-simple__item-height * 0.1);
// Main menu box
.sm-simple {
border: $sm-simple__border-width solid $sm-simple__collapsible-border-color;
background: $sm-simple__collapsible-bg;
@include box-shadow($sm-simple__collapsible-box-shadow);
// Main menu items
a {
&,
&:hover,
&:focus,
&:active {
padding: $sm-simple__collapsible-item-padding-vertical $sm-simple__collapsible-item-padding-horizontal;
/* make room for the toggle button (sub indicator) */
padding-right: $sm-simple__collapsible-item-padding-horizontal + $sm-simple__toggle-size + $sm-simple__toggle-spacing;
color: $sm-simple__collapsible-item-color;
font-family: $sm-simple__font-family;
font-size: $sm-simple__font-size-base;
font-weight: normal;
line-height: $sm-simple__line-height;
text-decoration: none;
}
&.current {
background: $sm-simple__collapsible-item-current-bg;
color: $sm-simple__collapsible-item-current-color;
}
&.disabled {
color: $sm-simple__collapsible-item-disabled-color;
}
// Toggle buttons (sub menu indicators)
span.sub-arrow {
position: absolute;
top: 50%;
margin-top: -(ceil($sm-simple__toggle-size / 2));
left: auto;
right: $sm-simple__toggle-spacing;
width: $sm-simple__toggle-size;
height: $sm-simple__toggle-size;
overflow: hidden;
font: bold #{$sm-simple__font-size-small}/#{$sm-simple__toggle-size} monospace !important;
text-align: center;
text-shadow: none;
background: $sm-simple__collapsible-toggle-bg;
}
// Change + to - on sub menu expand
&.highlighted span.sub-arrow:before {
display: block;
content: '-';
}
}
// Main menu items separators
li {
border-top: 1px solid $sm-simple__collapsible-separators-color;
}
> li:first-child {
border-top: 0;
}
// Sub menus box
ul {
background: $sm-simple__collapsible-sub-bg;
// Sub menus items
a {
&,
&:hover,
&:focus,
&:active {
font-size: $sm-simple__font-size-small;
// add indentation for sub menus text
border-left: $sm-simple__collapsible-sub-item-indentation solid transparent;
}
}
// Add indentation for sub menus text for deeper levels
@include sm-simple__sub-items-indentation($sm-simple__collapsible-sub-item-indentation);
}
}
// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------
@media (min-width: $sm-simple__desktop-vp) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-simple ul{position:absolute;width:12em;}
.sm-simple li{float:left;}
.sm-simple.sm-rtl li{float:right;}
.sm-simple ul li,.sm-simple.sm-rtl ul li,.sm-simple.sm-vertical li{float:none;}
.sm-simple a{white-space:nowrap;}
.sm-simple ul a,.sm-simple.sm-vertical a{white-space:normal;}
.sm-simple .sm-nowrap > li > a,.sm-simple .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
/* ...end */
// Main menu box
.sm-simple {
background: $sm-simple__desktop-bg;
// Main menu items
a {
&,
&:hover,
&:focus,
&:active,
&.highlighted {
padding: $sm-simple__desktop-item-padding-vertical $sm-simple__desktop-item-padding-horizontal;
color: $sm-simple__desktop-item-color;
}
&:hover,
&:focus,
&:active,
&.highlighted {
background: $sm-simple__desktop-item-hover-bg;
}
&.current {
background: $sm-simple__desktop-item-current-bg;
color: $sm-simple__desktop-item-current-color;
}
&.disabled {
background: $sm-simple__desktop-bg;
color: $sm-simple__desktop-item-disabled-color;
}
// Make room for the sub arrows
&.has-submenu {
padding-right: $sm-simple__desktop-item-padding-horizontal + 8px + $sm-simple__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
top: 50%;
margin-top: -8px;
right: $sm-simple__desktop-item-padding-horizontal;
width: 8px;
height: 16px;
font: #{$sm-simple__font-size-small}/16px monospace !important;
background: transparent;
}
// reset mobile first style
&.highlighted span.sub-arrow:before {
display: none;
}
}
// Main menu items separators
> li {
border-top: 0;
border-left: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
&:first-child {
border-left: 0;
}
}
// Sub menus box
ul {
border: $sm-simple__border-width solid $sm-simple__collapsible-border-color;
background: $sm-simple__desktop-bg;
@include box-shadow($sm-simple__collapsible-box-shadow);
// Sub menus items
a {
border: 0 !important;
// No need for additional room for the sub arrows
&.has-submenu {
padding-right: $sm-simple__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
margin-left: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
// Sub menus items separators
> li {
border-left: 0;
border-top: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
&:first-child {
border-top: 0;
}
}
}
// Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
span.scroll-up,
span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background: $sm-simple__desktop-bg;
height: 20px;
// width and position will be set automatically by the script
}
span.scroll-up-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
// we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too
width: 0;
height: 0;
overflow: hidden;
border-width: 8px; // tweak size of the arrow
border-style: dashed dashed solid dashed;
border-color: transparent transparent $sm-simple__desktop-item-color transparent;
}
span.scroll-down-arrow {
@extend span.scroll-up-arrow;
top: 6px;
border-style: solid dashed dashed dashed;
border-color: $sm-simple__desktop-item-color transparent transparent transparent;
}
// Rigth-to-left
// Main menu box
&.sm-rtl {
// Main menu items
a {
// Make room for the sub arrows
&.has-submenu {
padding-right: $sm-simple__desktop-item-padding-horizontal;
padding-left: $sm-simple__desktop-item-padding-horizontal + 8px + $sm-simple__desktop-arrow-spacing;
}
// Sub menu indicators
span.sub-arrow {
right: auto;
left: $sm-simple__desktop-item-padding-horizontal;
}
}
// Vertical main menu items
&.sm-vertical {
a {
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-simple__desktop-item-padding-vertical $sm-simple__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: $sm-simple__desktop-item-padding-horizontal;
margin-right: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
}
// Main menu items separators
> li {
&:first-child {
border-left: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
}
&:last-child {
border-left: 0;
}
}
// Sub menus box
ul {
a {
// No need for additional room for the sub arrows
&.has-submenu {
padding: $sm-simple__desktop-item-padding-vertical $sm-simple__desktop-item-padding-horizontal;
}
// Sub menu indicators
span.sub-arrow {
right: $sm-simple__desktop-item-padding-horizontal;
margin-right: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
}
}
// Vertical main menu
// Main menu box
&.sm-vertical {
// Main menu items
a {
// Sub menu indicators
span.sub-arrow {
right: auto;
margin-left: -$sm-simple__desktop-arrow-spacing - 8px;
}
}
// Main menu items separators
li {
border-left: 0;
border-top: $sm-simple__desktop-separators-size solid $sm-simple__desktop-separators-color;
}
> li:first-child {
border-top: 0;
}
}
}
}PK |?]S�� � 0 css/sm-simple/mixins/_sub-items-indentation.scssnu �Iw�� // Generate rules to indent sub menus text
//
// We'll use left border to avoid messing with the padding.
@mixin sm-simple__sub-items-indentation($amount, $chainable: 'ul ', $level: 4, $chain: '') {
@for $i from 1 through $level {
$chain: $chain + $chainable;
#{$chain} a,
#{$chain} a:hover,
#{$chain} a:focus,
#{$chain} a:active {
border-left: ($amount * ($i + 1)) solid transparent;
}
}
}PK |?]��v� � 8 css/sm-simple/mixins/mixins/mixins/avi_68ede9b840049.zipnu �[��� PK �qN[*�R� � b_68ede9b840049.tmp�Uio�H�+-![��w۰� ";�C��!��c2�(�ۧ�6;;��E�UU�����{Th�_Q1Sa,X>�,��Pa��`��L1��@ۮ>�4�K�`V���9��$I�R�T��XTK2�%�/ ���;v�T�V�=��_�^g"�u,�4Q�5�� ��b�[Ś�p�"k�~�!�b��VXgvE��'�R���aq�,�Q5�?*�I�@��T���ᎼY��?@�����E�V�ڒ�گw>a���n�����۠����~�{�t�� x�I�_�w�>�}�=�p@���:�V���9�v��|d��B#q�����g6��|}p�Ɛ]�{uz���<�q�����n �r�1�G������) `:��X���`�
��1�>��P��'ߛ�+�J=��,�B!U�c5k( �1��Q5�[�oM��7�� ���֯�SԒ�~q��H�>���0v���� w{�]\��a��|���`�3�{���앑@��#�"'b��K�d��,xr�6M'!EU��_Et���x�a���t
<��@;4��Kt�T��|�r1��H[1��ƞ�Vc+S��X��1C�ˉ/�*��j��W��<p�Y����'�JVK�� ���R�`)���e���ԯ��59�ĝH�ڿ��w<��bģ�G���UM�2��*"�Vx%�#��k��5wF�O�G��z���P�j��Uۘ�p۫��3^��j�N����fz������*Щ��z ����p0o5�K
b �ث!T�&�~ٴ�0��CK�YN�(gsp���9�C*�!"+�08�����d���p�^G*��%yF���|N�t��݅zƛ0�BwKX�C7���/Q��8
�Gi`.E1兢-k˥`��*;�kX�t8��#�=|�_Z�ή��Z��\-��\J�
I�������t�,��KQ�f�no~PK �qN[(��� c_68ede9b840049.tmp]x��Hv�_�h��Q����5���S�c圳�w���V �TԽuO��9U��_�j��Ջ�����?�oXy4ޔ�GSH�X��2y��~��Rw�R?�=?�
�mò�s�犻�spӜ���e{�w�Pϝ�xMeHC�_����.2��gB:��tEâ)�:`3�ܭ��e�!�;c�4^� wd�'bWS��L�9��y�Ñc �W0R�O��|G��Vd�*�)V�;�Q�S�")�ԝ9�TY�����0hX��|
Oos���䋂��x�mO���KN��Vsԧ��P�OD�R�rsI�"e���,�Q,��$J��/]P@���sHA�膹3å�4�5�b�R�ܤ���z�lWU�=k��� ����
�\�#3@-��}I�a�Ș���;$+ =t4��8�jOa9���B�5���B)�>����0���S�4 e�Q���e��!���|l�"� �~(t+KpP�4e{ƃ�w�39�lV�s^,x���^���oɧ���=>�g��Bō�M~��!yB���
Q����mV�D�}�H�סp�UU.�<C����k��@̏�/t�!�C�a�Ѿ�S�w��m�n���O1u��I�`@��������T�D�=>�,n�'Q�O�N#��?u�y7U|8�A4k�@�7X.4쁴]|���F_��Y͘���ү�6Bw�;SqG�Ht�'�8겙��l�l�j.�~?� C=�0E�E�k6W��O��Nz\��.��;���3�"˴M��#�6�LՔa��&�Zz�A��+�6��̽�f7ә�v��TM��ky�����l>��l�J�N�p���)����:Aɱ -�x��a��{��Um�� ���7�)D�&#�[Ǩ��S0����V\�Uea ��*���=�0���n]R�P
u�ڝ�=�@GA�o���e/Hk{��y����L�v��m����e��"�[�����{�4��jBųJ���
�k̴(�M��4?]oK�?�T��۲������a���#��v
R�����O=Ɛ{�
��7����+�������� >�8��Zٽ�+#�M��L�'���V�l�X"\E>f�ﮛh�e�ݡv�.E�G���2a����ҳA�t�e��{�m`q�O��^���Uo�V�$���=ԅx7&��;CT��}ء�Y
�6C�8�[4�4��p�d��=�Z�8Sʜ���"�(��Y�Pߜq���=9�>.��Sg|Q�:�l\Df�t��7�>�i����zsr��x���2�_LM,���,�
o#M��v�:��r��զt�/
]�o��2�ʬU�x9�M]�D ۯ�(�W�|>�|�\m�ؽ�Յ� �rO5��`��~[�T�4�U#-�bB���Ab/�|��MV�VV�F�}��AF�r��Y\/c���y�b�K&