',
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2
}
}
]
});
// Hook into Bootstrap shown event and manually trigger 'resize' event
// so that Slick recalculates the widths
$('#quick-look').on('shown.bs.modal', function () {
$modalProductDetailElement.resize();
});
}
};
// Shop Category Toggle Functionality
RESHOP.shopCategoryToggle = function() {
if ($shopCategoryToggleSpan.length) {
$shopCategoryToggleSpan.on('click', function () {
$(this).toggleClass('is-expanded');
$(this).next('ul').stop(true, true).slideToggle();
});
}
};
// Shop Perspective Change
RESHOP.shopPerspectiveChange = function() {
if ($shopGridBtn.length && $shopListBtn.length) {
$shopGridBtn.on('click',function () {
$(this).addClass('is-active');
$shopListBtn.removeClass('is-active');
$shopPerspectiveRow.removeClass('is-list-active');
$shopPerspectiveRow.addClass('is-grid-active');
});
$shopListBtn.on('click',function () {
$(this).addClass('is-active');
$shopGridBtn.removeClass('is-active');
$shopPerspectiveRow.removeClass('is-grid-active');
$shopPerspectiveRow.addClass('is-list-active');
});
}
};
// Shop Side Filter Settings
RESHOP.shopSideFilter = function() {
if ($shopFilterBtn.length) {
$shopFilterBtn.on('click',function () {
// Add Class Active
$(this).toggleClass('is-active');
// Get Value of the attribute data-side
var target = $(this).attr('data-side');
// Open Side
$(target).toggleClass('is-open');
});
}
};
// Show Newsletter Modal
RESHOP.showNewsletterModal = function() {
if ($('#newsletter-modal').length) {
setTimeout(function () {
// Manually opens a modal
$('#newsletter-modal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
}, 5000);
}
};
// Check everything including DOM elements and images loaded
$(window).on('load',function () {
RESHOP.showNewsletterModal();
if ($primarySlider.length) {
// Play slider when everything is loaded
$primarySlider.data('owl.carousel').options.autoplay = true;
$primarySlider.trigger('refresh.owl.carousel');
}
});
RESHOP.initScrollUp();
RESHOP.initTooltip();
RESHOP.initModal();
RESHOP.defaultAddressCheckbox();
RESHOP.initScrollSpy();
RESHOP.onClickScroll();
RESHOP.reshopNavigation();
RESHOP.primarySlider();
RESHOP.productSlider();
RESHOP.tabSlider();
RESHOP.onTabActiveRefreshSlider();
RESHOP.brandSlider();
RESHOP.testimonialSlider();
RESHOP.appConfiguration();
RESHOP.isotopeFilter();
RESHOP.timerCountDown();
RESHOP.initInputCounter();
RESHOP.blogPostGallery();
RESHOP.blogPostVideo();
RESHOP.blogPostEmbedVideo();
RESHOP.blogPostMasonry();
RESHOP.productDetailInit();
RESHOP.modalProductDetailInit();
RESHOP.shopCategoryToggle();
RESHOP.shopPerspectiveChange();
RESHOP.shopSideFilter();
})(jQuery);
================================================
FILE: js/jquery.shopnav.js
================================================
/*!
* Shop Nav v1.0.0 Lightweight plugin
*
* Copyright (c)
* Ahmad Hussnain
* MIT License
*/
;(function ($, window, document, undefined) {
'use strict';
$.fn.shopNav = function (options) {
var defaults = {
mobileBreakpoint: 1024
},
// this is now jQuery Object
settings = $.extend({}, defaults, options),
bigScreenFlag = Number.MAX_VALUE,
smallScreenFlag = 1,
$element = this,
mode,
tabInit = false,
$toggleBtn = $element.find('.toggle-button'),
$closeSpan = $element.find('.ah-close'),
$underneathSpanToggle = $element.find('.has-dropdown').children('.js-menu-toggle'),
$megaBtn,$megaMenuItem,$megaMenuSpan,$megaMenuContent;
return this.each(function() {
/**
* Returns Window Width
*/
var windowWidth = function () {
return window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
};
/**
* Check if the page has Mega menu
*/
var checkTabs = function () {
if ($element.find('.mega-menu').length > 0) {
tabInit = true;
// Get Mega button for click event
$megaBtn = $('.mega-text');
// Get all mega menu categories item for hover event
$megaMenuItem = $element.find('.mega-menu-list').find('li');
// Get all mega menu span for click event
$megaMenuSpan = $element.find('.mega-menu-list').find('span');
// Get all mega menu content
$megaMenuContent = $element.find('.mega-menu-content');
}
};
/**
* Global Event Handler for solving Mega Menu outside click problem
*/
var globalBodyClick = function () {
if ($megaBtn.hasClass('js-open')) {
$megaBtn.removeClass('js-open');
}
};
/**
* Click functionality for Mega Menu Button
*/
var clickMegaBtn = function (e) {
// Don't bubble up to the DOM element
e.stopPropagation();
// Add class on button
$megaBtn.toggleClass('js-open');
};
/**
* Mega menu off hovering effect on categories item on portrait mode
*/
var bindEventsMegaMenu = function () {
if (tabInit) {
if (mode === 'landscape') {
$megaBtn.on('click',clickMegaBtn);
$(document.body).on('click',globalBodyClick);
$megaMenuItem.on('mouseenter',mouseEnterMegaItem);
} else {
$megaBtn.off('click');
$megaBtn.removeClass('js-open');
$(document.body).off('click',globalBodyClick);
$megaMenuSpan.on('click',clickMegaSpan);
$megaMenuItem.off('mouseenter').off('mouseleave')
}
}
};
/**
* Mega menu on hovering function
*/
var mouseEnterMegaItem = function () {
// Remove all old classes from list items
$megaMenuItem.removeClass('js-active');
// Remove all old classes from span
$megaMenuSpan.removeClass('js-toggle-mark');
// add class to new list item
$(this).addClass('js-active');
// add class to span
$(this).find('span').addClass('js-toggle-mark');
// remove all js-active classes from content
$megaMenuContent.removeClass('js-active');
// add to new one index() function only works on list items , divs
$($megaMenuContent[$(this).index()]).addClass('js-active');
};
/**
* Mega menu on click function
*/
var clickMegaSpan = function () {
// Remove all old classes from span
$megaMenuSpan.removeClass('js-toggle-mark');
// Remove all old classes from list items
$megaMenuItem.removeClass('js-active');
// add class to new span
$(this).addClass('js-toggle-mark');
// add class to parent li
$(this).parent().addClass('js-active');
// remove all js-active classes from content
$megaMenuContent.removeClass('js-active');
// add to new one index() function only works on list items , divs
$($megaMenuContent[$(this).parent().index()]).addClass('js-active');
};
/**
* Attach click on toggle button
*/
var attachClickOnToggleBtn = function () {
$toggleBtn.on('click',function () {
$element.addClass('js-open');
});
};
/**
* Attach click on close span
*/
var attachClickOnCloseSpan = function () {
// .menu-init
// (child of menu-init) (toggle-button)
// (child of menu-init) (ah-lg-mode)
// (child of ah-lg-mode) ah-close
$closeSpan.on('click',function () {
$element.removeClass('js-open');
});
};
/**
* Attach click on spans that are place underneath (.has-dropdown) list item
*/
var attachClickOnUnderneathSpan = function () {
$underneathSpanToggle.on('click',function () {
$(this).toggleClass('js-toggle-mark');
// Show delay duration = 0 , slide toggle duration = 300
$(this).next().stop(true,true).slideToggle(300);
});
};
/**
* Flush plugin state from portrait mode
*/
var flushPluginState = function () {
// Remove .js-open class from the main element
$element.removeClass('js-open');
// Remove class from underneath spans
$underneathSpanToggle.removeClass('js-toggle-mark');
// Remove display property from spans that are place underneath (.has-dropdown) list item
$underneathSpanToggle.next().css('display','');
};
/**
* check browser width in real-time
*/
var windowCheck = function() {
// portrait mode
if(windowWidth() <= settings.mobileBreakpoint && bigScreenFlag > settings.mobileBreakpoint){
mode = 'portrait';
bindEventsMegaMenu();
}
// landscape mode
if(windowWidth() > settings.mobileBreakpoint && smallScreenFlag <= settings.mobileBreakpoint) {
mode = 'landscape';
bindEventsMegaMenu();
// Flush plugin state from portrait mode
flushPluginState();
}
bigScreenFlag = windowWidth();
smallScreenFlag = windowWidth();
};
// Check if the page has Mega menu
checkTabs();
// Attach click on toggle button
attachClickOnToggleBtn();
// Attach click on close span
attachClickOnCloseSpan();
// Attach click on spans that are place underneath (.has-dropdown) list item
attachClickOnUnderneathSpan();
// check browser width in real-time
windowCheck();
$(window).on('resize', function() {
windowCheck();
});
});
};
})(jQuery, window, document);
================================================
FILE: js/map-init.js
================================================
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 12,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(37.393322, -122.023780),
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.393322, -122.023780),
map: map,
});
}
================================================
FILE: js/vendor.js
================================================
/*!
* modernizr v3.6.0
* Build https://modernizr.com/download?-cssanimations-csscolumns-customelements-flexbox-history-picture-pointerevents-postmessage-sizes-srcset-webgl-websockets-webworkers-addtest-domprefixes-hasevent-mq-prefixedcssvalue-prefixes-setclasses-testallprops-testprop-teststyles-dontmin
*
* Copyright (c)
* Faruk Ates
* Paul Irish
* Alex Sexton
* Ryan Seddon
* Patrick Kettner
* Stu Cox
* Richard Herrera
* MIT License
*/
!function(i,c,p){var a=[],l=[],e={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){l.push({name:e,fn:t,options:n})},addAsyncTest:function(e){l.push({name:null,fn:e})}},u=function(){};u.prototype=e,(u=new u).addTest("customelements","customElements"in i),u.addTest("history",function(){var e=navigator.userAgent;return(-1===e.indexOf("Android 2.")&&-1===e.indexOf("Android 4.0")||-1===e.indexOf("Mobile Safari")||-1!==e.indexOf("Chrome")||-1!==e.indexOf("Windows Phone")||"file:"===location.protocol)&&(i.history&&"pushState"in i.history)}),u.addTest("postmessage","postMessage"in i);var t=!1;try{t="WebSocket"in i&&2===i.WebSocket.CLOSING}catch(e){}u.addTest("websockets",t),u.addTest("picture","HTMLPictureElement"in i),u.addTest("webworkers","Worker"in i);var n=e._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];function A(e,t){return typeof e===t}e._prefixes=n;var m=c.documentElement,h="svg"===m.nodeName.toLowerCase();function s(e){var t=m.className,n=u._config.classPrefix||"";if(h&&(t=t.baseVal),u._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}u._config.enableClasses&&(t+=" "+n+e.join(" "+n),h?m.className.baseVal=t:m.className=t)}var f,r,o="Moz O ms Webkit",d=e._config.usePrefixes?o.toLowerCase().split(" "):[];function g(e,t){if("object"==typeof e)for(var n in e)f(e,n)&&g(n,e[n]);else{var r=(e=e.toLowerCase()).split("."),o=u[r[0]];if(2==r.length&&(o=o[r[1]]),void 0!==o)return u;t="function"==typeof t?t():t,1==r.length?u[r[0]]=t:(!u[r[0]]||u[r[0]]instanceof Boolean||(u[r[0]]=new Boolean(u[r[0]])),u[r[0]][r[1]]=t),s([(t&&0!=t?"":"no-")+r.join("-")]),u._trigger(e,t)}return u}function v(){return"function"!=typeof c.createElement?c.createElement(arguments[0]):h?c.createElementNS.call(c,"http://www.w3.org/2000/svg",arguments[0]):c.createElement.apply(c,arguments)}e._domPrefixes=d,f=A(r={}.hasOwnProperty,"undefined")||A(r.call,"undefined")?function(e,t){return t in e&&A(e.constructor.prototype[t],"undefined")}:function(e,t){return r.call(e,t)},e._l={},e.on=function(e,t){this._l[e]||(this._l[e]=[]),this._l[e].push(t),u.hasOwnProperty(e)&&setTimeout(function(){u._trigger(e,u[e])},0)},e._trigger=function(e,t){if(this._l[e]){var n=this._l[e];setTimeout(function(){var e;for(e=0;e
=0&&n0&&t-1 in e)}var E=function(e){var t,n,r,i,o,a,s,u,l,c,f,p,d,h,g,y,v,m,x,b="sizzle"+1*new Date,w=e.document,T=0,C=0,E=ae(),k=ae(),S=ae(),D=function(e,t){return e===t&&(f=!0),0},N={}.hasOwnProperty,A=[],j=A.pop,q=A.push,L=A.push,H=A.slice,O=function(e,t){for(var n=0,r=e.length;n+~]|"+M+")"+M+"*"),z=new RegExp("="+M+"*([^\\]'\"]*?)"+M+"*\\]","g"),X=new RegExp(W),U=new RegExp("^"+R+"$"),V={ID:new RegExp("^#("+R+")"),CLASS:new RegExp("^\\.("+R+")"),TAG:new RegExp("^("+R+"|[*])"),ATTR:new RegExp("^"+I),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+P+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},G=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Q=/^[^{]+\{\s*\[native \w/,J=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,K=/[+~]/,Z=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ee=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},te=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ne=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},re=function(){p()},ie=me(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{L.apply(A=H.call(w.childNodes),w.childNodes),A[w.childNodes.length].nodeType}catch(e){L={apply:A.length?function(e,t){q.apply(e,H.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function oe(e,t,r,i){var o,s,l,c,f,h,v,m=t&&t.ownerDocument,T=t?t.nodeType:9;if(r=r||[],"string"!=typeof e||!e||1!==T&&9!==T&&11!==T)return r;if(!i&&((t?t.ownerDocument||t:w)!==d&&p(t),t=t||d,g)){if(11!==T&&(f=J.exec(e)))if(o=f[1]){if(9===T){if(!(l=t.getElementById(o)))return r;if(l.id===o)return r.push(l),r}else if(m&&(l=m.getElementById(o))&&x(t,l)&&l.id===o)return r.push(l),r}else{if(f[2])return L.apply(r,t.getElementsByTagName(e)),r;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return L.apply(r,t.getElementsByClassName(o)),r}if(n.qsa&&!S[e+" "]&&(!y||!y.test(e))){if(1!==T)m=t,v=e;else if("object"!==t.nodeName.toLowerCase()){(c=t.getAttribute("id"))?c=c.replace(te,ne):t.setAttribute("id",c=b),s=(h=a(e)).length;while(s--)h[s]="#"+c+" "+ve(h[s]);v=h.join(","),m=K.test(e)&&ge(t.parentNode)||t}if(v)try{return L.apply(r,m.querySelectorAll(v)),r}catch(e){}finally{c===b&&t.removeAttribute("id")}}}return u(e.replace(B,"$1"),t,r,i)}function ae(){var e=[];function t(n,i){return e.push(n+" ")>r.cacheLength&&delete t[e.shift()],t[n+" "]=i}return t}function se(e){return e[b]=!0,e}function ue(e){var t=d.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function le(e,t){var n=e.split("|"),i=n.length;while(i--)r.attrHandle[n[i]]=t}function ce(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function fe(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function pe(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function de(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&ie(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function he(e){return se(function(t){return t=+t,se(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function ge(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}n=oe.support={},o=oe.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},p=oe.setDocument=function(e){var t,i,a=e?e.ownerDocument||e:w;return a!==d&&9===a.nodeType&&a.documentElement?(d=a,h=d.documentElement,g=!o(d),w!==d&&(i=d.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",re,!1):i.attachEvent&&i.attachEvent("onunload",re)),n.attributes=ue(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ue(function(e){return e.appendChild(d.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=Q.test(d.getElementsByClassName),n.getById=ue(function(e){return h.appendChild(e).id=b,!d.getElementsByName||!d.getElementsByName(b).length}),n.getById?(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){return e.getAttribute("id")===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n=t.getElementById(e);return n?[n]:[]}}):(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){var n="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&g)return t.getElementsByClassName(e)},v=[],y=[],(n.qsa=Q.test(d.querySelectorAll))&&(ue(function(e){h.appendChild(e).innerHTML="=0;)e.push(r);return e}),gt:he(function(e,t,n){for(var r=n<0?n+t:n;++r1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function be(e,t,n){for(var r=0,i=t.length;r-1&&(o[l]=!(a[l]=f))}}else v=we(v===a?v.splice(h,v.length):v),i?i(null,a,v,u):L.apply(a,v)})}function Ce(e){for(var t,n,i,o=e.length,a=r.relative[e[0].type],s=a||r.relative[" "],u=a?1:0,c=me(function(e){return e===t},s,!0),f=me(function(e){return O(t,e)>-1},s,!0),p=[function(e,n,r){var i=!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):f(e,n,r));return t=null,i}];u1&&xe(p),u>1&&ve(e.slice(0,u-1).concat({value:" "===e[u-2].type?"*":""})).replace(B,"$1"),n,u0,i=e.length>0,o=function(o,a,s,u,c){var f,h,y,v=0,m="0",x=o&&[],b=[],w=l,C=o||i&&r.find.TAG("*",c),E=T+=null==w?1:Math.random()||.1,k=C.length;for(c&&(l=a===d||a||c);m!==k&&null!=(f=C[m]);m++){if(i&&f){h=0,a||f.ownerDocument===d||(p(f),s=!g);while(y=e[h++])if(y(f,a||d,s)){u.push(f);break}c&&(T=E)}n&&((f=!y&&f)&&v--,o&&x.push(f))}if(v+=m,n&&m!==v){h=0;while(y=t[h++])y(x,b,a,s);if(o){if(v>0)while(m--)x[m]||b[m]||(b[m]=j.call(u));b=we(b)}L.apply(u,b),c&&!o&&b.length>0&&v+t.length>1&&oe.uniqueSort(u)}return c&&(T=E,l=w),x};return n?se(o):o}return s=oe.compile=function(e,t){var n,r=[],i=[],o=S[e+" "];if(!o){t||(t=a(e)),n=t.length;while(n--)(o=Ce(t[n]))[b]?r.push(o):i.push(o);(o=S(e,Ee(i,r))).selector=e}return o},u=oe.select=function(e,t,n,i){var o,u,l,c,f,p="function"==typeof e&&e,d=!i&&a(e=p.selector||e);if(n=n||[],1===d.length){if((u=d[0]=d[0].slice(0)).length>2&&"ID"===(l=u[0]).type&&9===t.nodeType&&g&&r.relative[u[1].type]){if(!(t=(r.find.ID(l.matches[0].replace(Z,ee),t)||[])[0]))return n;p&&(t=t.parentNode),e=e.slice(u.shift().value.length)}o=V.needsContext.test(e)?0:u.length;while(o--){if(l=u[o],r.relative[c=l.type])break;if((f=r.find[c])&&(i=f(l.matches[0].replace(Z,ee),K.test(u[0].type)&&ge(t.parentNode)||t))){if(u.splice(o,1),!(e=i.length&&ve(u)))return L.apply(n,i),n;break}}}return(p||s(e,d))(i,t,!g,n,!t||K.test(e)&&ge(t.parentNode)||t),n},n.sortStable=b.split("").sort(D).join("")===b,n.detectDuplicates=!!f,p(),n.sortDetached=ue(function(e){return 1&e.compareDocumentPosition(d.createElement("fieldset"))}),ue(function(e){return e.innerHTML="1?w.uniqueSort(n):n},filter:function(e){return this.pushStack(j(this,e||[],!1))},not:function(e){return this.pushStack(j(this,e||[],!0))},is:function(e){return!!j(this,"string"==typeof e&&D.test(e)?w(e):e||[],!1).length}});var q,L=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(w.fn.init=function(e,t,n){var i,o;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(i="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:L.exec(e))||!i[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(i[1]){if(t=t instanceof w?t[0]:t,w.merge(this,w.parseHTML(i[1],t&&t.nodeType?t.ownerDocument||t:r,!0)),A.test(i[1])&&w.isPlainObject(t))for(i in t)g(this[i])?this[i](t[i]):this.attr(i,t[i]);return this}return(o=r.getElementById(i[2]))&&(this[0]=o,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):g(e)?void 0!==n.ready?n.ready(e):e(w):w.makeArray(e,this)}).prototype=w.fn,q=w(r);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};w.fn.extend({has:function(e){var t=w(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&w.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?w.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?u.call(w(e),this[0]):u.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(w.uniqueSort(w.merge(this.get(),w(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}w.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return k(e,"parentNode")},parentsUntil:function(e,t,n){return k(e,"parentNode",n)},next:function(e){return P(e,"nextSibling")},prev:function(e){return P(e,"previousSibling")},nextAll:function(e){return k(e,"nextSibling")},prevAll:function(e){return k(e,"previousSibling")},nextUntil:function(e,t,n){return k(e,"nextSibling",n)},prevUntil:function(e,t,n){return k(e,"previousSibling",n)},siblings:function(e){return S((e.parentNode||{}).firstChild,e)},children:function(e){return S(e.firstChild)},contents:function(e){return N(e,"iframe")?e.contentDocument:(N(e,"template")&&(e=e.content||e),w.merge([],e.childNodes))}},function(e,t){w.fn[e]=function(n,r){var i=w.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=w.filter(r,i)),this.length>1&&(O[e]||w.uniqueSort(i),H.test(e)&&i.reverse()),this.pushStack(i)}});var M=/[^\x20\t\r\n\f]+/g;function R(e){var t={};return w.each(e.match(M)||[],function(e,n){t[n]=!0}),t}w.Callbacks=function(e){e="string"==typeof e?R(e):w.extend({},e);var t,n,r,i,o=[],a=[],s=-1,u=function(){for(i=i||e.once,r=t=!0;a.length;s=-1){n=a.shift();while(++s-1)o.splice(n,1),n<=s&&s--}),this},has:function(e){return e?w.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||u()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!r}};return l};function I(e){return e}function W(e){throw e}function $(e,t,n,r){var i;try{e&&g(i=e.promise)?i.call(e).done(t).fail(n):e&&g(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}w.extend({Deferred:function(t){var n=[["notify","progress",w.Callbacks("memory"),w.Callbacks("memory"),2],["resolve","done",w.Callbacks("once memory"),w.Callbacks("once memory"),0,"resolved"],["reject","fail",w.Callbacks("once memory"),w.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},"catch":function(e){return i.then(null,e)},pipe:function(){var e=arguments;return w.Deferred(function(t){w.each(n,function(n,r){var i=g(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&g(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){var o=0;function a(t,n,r,i){return function(){var s=this,u=arguments,l=function(){var e,l;if(!(t=o&&(r!==W&&(s=void 0,u=[e]),n.rejectWith(s,u))}};t?c():(w.Deferred.getStackHook&&(c.stackTrace=w.Deferred.getStackHook()),e.setTimeout(c))}}return w.Deferred(function(e){n[0][3].add(a(0,e,g(i)?i:I,e.notifyWith)),n[1][3].add(a(0,e,g(t)?t:I)),n[2][3].add(a(0,e,g(r)?r:W))}).promise()},promise:function(e){return null!=e?w.extend(e,i):i}},o={};return w.each(n,function(e,t){var a=t[2],s=t[5];i[t[1]]=a.add,s&&a.add(function(){r=s},n[3-e][2].disable,n[3-e][3].disable,n[0][2].lock,n[0][3].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=o.call(arguments),a=w.Deferred(),s=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?o.call(arguments):n,--t||a.resolveWith(r,i)}};if(t<=1&&($(e,a.done(s(n)).resolve,a.reject,!t),"pending"===a.state()||g(i[n]&&i[n].then)))return a.then();while(n--)$(i[n],s(n),a.reject);return a.promise()}});var B=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;w.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&B.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},w.readyException=function(t){e.setTimeout(function(){throw t})};var F=w.Deferred();w.fn.ready=function(e){return F.then(e)["catch"](function(e){w.readyException(e)}),this},w.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--w.readyWait:w.isReady)||(w.isReady=!0,!0!==e&&--w.readyWait>0||F.resolveWith(r,[w]))}}),w.ready.then=F.then;function _(){r.removeEventListener("DOMContentLoaded",_),e.removeEventListener("load",_),w.ready()}"complete"===r.readyState||"loading"!==r.readyState&&!r.documentElement.doScroll?e.setTimeout(w.ready):(r.addEventListener("DOMContentLoaded",_),e.addEventListener("load",_));var z=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===x(n)){i=!0;for(s in n)z(e,t,s,n[s],!0,o,a)}else if(void 0!==r&&(i=!0,g(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(w(e),n)})),t))for(;s1,null,!0)},removeData:function(e){return this.each(function(){K.remove(this,e)})}}),w.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=J.get(e,t),n&&(!r||Array.isArray(n)?r=J.access(e,t,w.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=w.queue(e,t),r=n.length,i=n.shift(),o=w._queueHooks(e,t),a=function(){w.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return J.get(e,n)||J.access(e,n,{empty:w.Callbacks("once memory").add(function(){J.remove(e,[t+"queue",n])})})}}),w.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""," "],thead:[1,""],col:[2,""],tr:[2,""],td:[3,""],_default:[0,"",""]};ge.optgroup=ge.option,ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td;function ye(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&N(e,t)?w.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n-1)i&&i.push(o);else if(l=w.contains(o.ownerDocument,o),a=ye(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}!function(){var e=r.createDocumentFragment().appendChild(r.createElement("div")),t=r.createElement("input");t.setAttribute("type","radio"),t.setAttribute("checked","checked"),t.setAttribute("name","t"),e.appendChild(t),h.checkClone=e.cloneNode(!0).cloneNode(!0).lastChild.checked,e.innerHTML="",h.noCloneChecked=!!e.cloneNode(!0).lastChild.defaultValue}();var be=r.documentElement,we=/^key/,Te=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ce=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function ke(){return!1}function Se(){try{return r.activeElement}catch(e){}}function De(e,t,n,r,i,o){var a,s;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(s in t)De(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=ke;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return w().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=w.guid++)),e.each(function(){w.event.add(this,t,i,r,n)})}w.event={global:{},add:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=J.get(e);if(y){n.handler&&(n=(o=n).handler,i=o.selector),i&&w.find.matchesSelector(be,i),n.guid||(n.guid=w.guid++),(u=y.events)||(u=y.events={}),(a=y.handle)||(a=y.handle=function(t){return"undefined"!=typeof w&&w.event.triggered!==t.type?w.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(M)||[""]).length;while(l--)d=g=(s=Ce.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=w.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=w.event.special[d]||{},c=w.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&w.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(d,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),w.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,y=J.hasData(e)&&J.get(e);if(y&&(u=y.events)){l=(t=(t||"").match(M)||[""]).length;while(l--)if(s=Ce.exec(t[l])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){f=w.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,y.handle)||w.removeEvent(e,d,y.handle),delete u[d])}else for(d in u)w.event.remove(e,d+t[l],n,r,!0);w.isEmptyObject(u)&&J.remove(e,"handle events")}},dispatch:function(e){var t=w.event.fix(e),n,r,i,o,a,s,u=new Array(arguments.length),l=(J.get(this,"events")||{})[t.type]||[],c=w.event.special[t.type]||{};for(u[0]=t,n=1;n=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:w.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u\x20\t\r\n\f]*)[^>]*)\/>/gi,Ae=/\s*$/g;function Le(e,t){return N(e,"table")&&N(11!==t.nodeType?t:t.firstChild,"tr")?w(e).children("tbody")[0]||e:e}function He(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Oe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Pe(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(J.hasData(e)&&(o=J.access(e),a=J.set(t,o),l=o.events)){delete a.handle,a.events={};for(i in l)for(n=0,r=l[i].length;n1&&"string"==typeof y&&!h.checkClone&&je.test(y))return e.each(function(i){var o=e.eq(i);v&&(t[0]=y.call(this,i,o.html())),Re(o,t,n,r)});if(p&&(i=xe(t,e[0].ownerDocument,!1,e,r),o=i.firstChild,1===i.childNodes.length&&(i=o),o||r)){for(u=(s=w.map(ye(i,"script"),He)).length;f")},clone:function(e,t,n){var r,i,o,a,s=e.cloneNode(!0),u=w.contains(e.ownerDocument,e);if(!(h.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||w.isXMLDoc(e)))for(a=ye(s),r=0,i=(o=ye(e)).length;r0&&ve(a,!u&&ye(e,"script")),s},cleanData:function(e){for(var t,n,r,i=w.event.special,o=0;void 0!==(n=e[o]);o++)if(Y(n)){if(t=n[J.expando]){if(t.events)for(r in t.events)i[r]?w.event.remove(n,r):w.removeEvent(n,r,t.handle);n[J.expando]=void 0}n[K.expando]&&(n[K.expando]=void 0)}}}),w.fn.extend({detach:function(e){return Ie(this,e,!0)},remove:function(e){return Ie(this,e)},text:function(e){return z(this,function(e){return void 0===e?w.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Re(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Le(this,e).appendChild(e)})},prepend:function(){return Re(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Le(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(w.cleanData(ye(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return w.clone(this,e,t)})},html:function(e){return z(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Ae.test(e)&&!ge[(de.exec(e)||["",""])[1].toLowerCase()]){e=w.htmlPrefilter(e);try{for(;n=0&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))),u}function et(e,t,n){var r=$e(e),i=Fe(e,t,r),o="border-box"===w.css(e,"boxSizing",!1,r),a=o;if(We.test(i)){if(!n)return i;i="auto"}return a=a&&(h.boxSizingReliable()||i===e.style[t]),("auto"===i||!parseFloat(i)&&"inline"===w.css(e,"display",!1,r))&&(i=e["offset"+t[0].toUpperCase()+t.slice(1)],a=!0),(i=parseFloat(i)||0)+Ze(e,t,n||(o?"border":"content"),a,r,i)+"px"}w.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Fe(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=G(t),u=Xe.test(t),l=e.style;if(u||(t=Je(s)),a=w.cssHooks[t]||w.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"==(o=typeof n)&&(i=ie.exec(n))&&i[1]&&(n=ue(e,t,i),o="number"),null!=n&&n===n&&("number"===o&&(n+=i&&i[3]||(w.cssNumber[s]?"":"px")),h.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=G(t);return Xe.test(t)||(t=Je(s)),(a=w.cssHooks[t]||w.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=Fe(e,t,r)),"normal"===i&&t in Ve&&(i=Ve[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),w.each(["height","width"],function(e,t){w.cssHooks[t]={get:function(e,n,r){if(n)return!ze.test(w.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?et(e,t,r):se(e,Ue,function(){return et(e,t,r)})},set:function(e,n,r){var i,o=$e(e),a="border-box"===w.css(e,"boxSizing",!1,o),s=r&&Ze(e,t,r,a,o);return a&&h.scrollboxSize()===o.position&&(s-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(o[t])-Ze(e,t,"border",!1,o)-.5)),s&&(i=ie.exec(n))&&"px"!==(i[3]||"px")&&(e.style[t]=n,n=w.css(e,t)),Ke(e,n,s)}}}),w.cssHooks.marginLeft=_e(h.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Fe(e,"marginLeft"))||e.getBoundingClientRect().left-se(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),w.each({margin:"",padding:"",border:"Width"},function(e,t){w.cssHooks[e+t]={expand:function(n){for(var r=0,i={},o="string"==typeof n?n.split(" "):[n];r<4;r++)i[e+oe[r]+t]=o[r]||o[r-2]||o[0];return i}},"margin"!==e&&(w.cssHooks[e+t].set=Ke)}),w.fn.extend({css:function(e,t){return z(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=$e(e),i=t.length;a1)}});function tt(e,t,n,r,i){return new tt.prototype.init(e,t,n,r,i)}w.Tween=tt,tt.prototype={constructor:tt,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||w.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(w.cssNumber[n]?"":"px")},cur:function(){var e=tt.propHooks[this.prop];return e&&e.get?e.get(this):tt.propHooks._default.get(this)},run:function(e){var t,n=tt.propHooks[this.prop];return this.options.duration?this.pos=t=w.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):tt.propHooks._default.set(this),this}},tt.prototype.init.prototype=tt.prototype,tt.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=w.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){w.fx.step[e.prop]?w.fx.step[e.prop](e):1!==e.elem.nodeType||null==e.elem.style[w.cssProps[e.prop]]&&!w.cssHooks[e.prop]?e.elem[e.prop]=e.now:w.style(e.elem,e.prop,e.now+e.unit)}}},tt.propHooks.scrollTop=tt.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},w.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},w.fx=tt.prototype.init,w.fx.step={};var nt,rt,it=/^(?:toggle|show|hide)$/,ot=/queueHooks$/;function at(){rt&&(!1===r.hidden&&e.requestAnimationFrame?e.requestAnimationFrame(at):e.setTimeout(at,w.fx.interval),w.fx.tick())}function st(){return e.setTimeout(function(){nt=void 0}),nt=Date.now()}function ut(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=oe[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function lt(e,t,n){for(var r,i=(pt.tweeners[t]||[]).concat(pt.tweeners["*"]),o=0,a=i.length;o1)},removeAttr:function(e){return this.each(function(){w.removeAttr(this,e)})}}),w.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?w.prop(e,t,n):(1===o&&w.isXMLDoc(e)||(i=w.attrHooks[t.toLowerCase()]||(w.expr.match.bool.test(t)?dt:void 0)),void 0!==n?null===n?void w.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=w.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!h.radioValue&&"radio"===t&&N(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(M);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),dt={set:function(e,t,n){return!1===t?w.removeAttr(e,n):e.setAttribute(n,n),n}},w.each(w.expr.match.bool.source.match(/\w+/g),function(e,t){var n=ht[t]||w.find.attr;ht[t]=function(e,t,r){var i,o,a=t.toLowerCase();return r||(o=ht[a],ht[a]=i,i=null!=n(e,t,r)?a:null,ht[a]=o),i}});var gt=/^(?:input|select|textarea|button)$/i,yt=/^(?:a|area)$/i;w.fn.extend({prop:function(e,t){return z(this,w.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[w.propFix[e]||e]})}}),w.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&w.isXMLDoc(e)||(t=w.propFix[t]||t,i=w.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=w.find.attr(e,"tabindex");return t?parseInt(t,10):gt.test(e.nodeName)||yt.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),h.optSelected||(w.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),w.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){w.propFix[this.toLowerCase()]=this});function vt(e){return(e.match(M)||[]).join(" ")}function mt(e){return e.getAttribute&&e.getAttribute("class")||""}function xt(e){return Array.isArray(e)?e:"string"==typeof e?e.match(M)||[]:[]}w.fn.extend({addClass:function(e){var t,n,r,i,o,a,s,u=0;if(g(e))return this.each(function(t){w(this).addClass(e.call(this,t,mt(this)))});if((t=xt(e)).length)while(n=this[u++])if(i=mt(n),r=1===n.nodeType&&" "+vt(i)+" "){a=0;while(o=t[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=vt(r))&&n.setAttribute("class",s)}return this},removeClass:function(e){var t,n,r,i,o,a,s,u=0;if(g(e))return this.each(function(t){w(this).removeClass(e.call(this,t,mt(this)))});if(!arguments.length)return this.attr("class","");if((t=xt(e)).length)while(n=this[u++])if(i=mt(n),r=1===n.nodeType&&" "+vt(i)+" "){a=0;while(o=t[a++])while(r.indexOf(" "+o+" ")>-1)r=r.replace(" "+o+" "," ");i!==(s=vt(r))&&n.setAttribute("class",s)}return this},toggleClass:function(e,t){var n=typeof e,r="string"===n||Array.isArray(e);return"boolean"==typeof t&&r?t?this.addClass(e):this.removeClass(e):g(e)?this.each(function(n){w(this).toggleClass(e.call(this,n,mt(this),t),t)}):this.each(function(){var t,i,o,a;if(r){i=0,o=w(this),a=xt(e);while(t=a[i++])o.hasClass(t)?o.removeClass(t):o.addClass(t)}else void 0!==e&&"boolean"!==n||((t=mt(this))&&J.set(this,"__className__",t),this.setAttribute&&this.setAttribute("class",t||!1===e?"":J.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&(" "+vt(mt(n))+" ").indexOf(t)>-1)return!0;return!1}});var bt=/\r/g;w.fn.extend({val:function(e){var t,n,r,i=this[0];{if(arguments.length)return r=g(e),this.each(function(n){var i;1===this.nodeType&&(null==(i=r?e.call(this,n,w(this).val()):e)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=w.map(i,function(e){return null==e?"":e+""})),(t=w.valHooks[this.type]||w.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,i,"value")||(this.value=i))});if(i)return(t=w.valHooks[i.type]||w.valHooks[i.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(bt,""):null==n?"":n}}}),w.extend({valHooks:{option:{get:function(e){var t=w.find.attr(e,"value");return null!=t?t:vt(w.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r-1)&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),w.each(["radio","checkbox"],function(){w.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=w.inArray(w(e).val(),t)>-1}},h.checkOn||(w.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),h.focusin="onfocusin"in e;var wt=/^(?:focusinfocus|focusoutblur)$/,Tt=function(e){e.stopPropagation()};w.extend(w.event,{trigger:function(t,n,i,o){var a,s,u,l,c,p,d,h,v=[i||r],m=f.call(t,"type")?t.type:t,x=f.call(t,"namespace")?t.namespace.split("."):[];if(s=h=u=i=i||r,3!==i.nodeType&&8!==i.nodeType&&!wt.test(m+w.event.triggered)&&(m.indexOf(".")>-1&&(m=(x=m.split(".")).shift(),x.sort()),c=m.indexOf(":")<0&&"on"+m,t=t[w.expando]?t:new w.Event(m,"object"==typeof t&&t),t.isTrigger=o?2:3,t.namespace=x.join("."),t.rnamespace=t.namespace?new RegExp("(^|\\.)"+x.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,t.result=void 0,t.target||(t.target=i),n=null==n?[t]:w.makeArray(n,[t]),d=w.event.special[m]||{},o||!d.trigger||!1!==d.trigger.apply(i,n))){if(!o&&!d.noBubble&&!y(i)){for(l=d.delegateType||m,wt.test(l+m)||(s=s.parentNode);s;s=s.parentNode)v.push(s),u=s;u===(i.ownerDocument||r)&&v.push(u.defaultView||u.parentWindow||e)}a=0;while((s=v[a++])&&!t.isPropagationStopped())h=s,t.type=a>1?l:d.bindType||m,(p=(J.get(s,"events")||{})[t.type]&&J.get(s,"handle"))&&p.apply(s,n),(p=c&&s[c])&&p.apply&&Y(s)&&(t.result=p.apply(s,n),!1===t.result&&t.preventDefault());return t.type=m,o||t.isDefaultPrevented()||d._default&&!1!==d._default.apply(v.pop(),n)||!Y(i)||c&&g(i[m])&&!y(i)&&((u=i[c])&&(i[c]=null),w.event.triggered=m,t.isPropagationStopped()&&h.addEventListener(m,Tt),i[m](),t.isPropagationStopped()&&h.removeEventListener(m,Tt),w.event.triggered=void 0,u&&(i[c]=u)),t.result}},simulate:function(e,t,n){var r=w.extend(new w.Event,n,{type:e,isSimulated:!0});w.event.trigger(r,null,t)}}),w.fn.extend({trigger:function(e,t){return this.each(function(){w.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return w.event.trigger(e,t,n,!0)}}),h.focusin||w.each({focus:"focusin",blur:"focusout"},function(e,t){var n=function(e){w.event.simulate(t,e.target,w.event.fix(e))};w.event.special[t]={setup:function(){var r=this.ownerDocument||this,i=J.access(r,t);i||r.addEventListener(e,n,!0),J.access(r,t,(i||0)+1)},teardown:function(){var r=this.ownerDocument||this,i=J.access(r,t)-1;i?J.access(r,t,i):(r.removeEventListener(e,n,!0),J.remove(r,t))}}});var Ct=e.location,Et=Date.now(),kt=/\?/;w.parseXML=function(t){var n;if(!t||"string"!=typeof t)return null;try{n=(new e.DOMParser).parseFromString(t,"text/xml")}catch(e){n=void 0}return n&&!n.getElementsByTagName("parsererror").length||w.error("Invalid XML: "+t),n};var St=/\[\]$/,Dt=/\r?\n/g,Nt=/^(?:submit|button|image|reset|file)$/i,At=/^(?:input|select|textarea|keygen)/i;function jt(e,t,n,r){var i;if(Array.isArray(t))w.each(t,function(t,i){n||St.test(e)?r(e,i):jt(e+"["+("object"==typeof i&&null!=i?t:"")+"]",i,n,r)});else if(n||"object"!==x(t))r(e,t);else for(i in t)jt(e+"["+i+"]",t[i],n,r)}w.param=function(e,t){var n,r=[],i=function(e,t){var n=g(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(Array.isArray(e)||e.jquery&&!w.isPlainObject(e))w.each(e,function(){i(this.name,this.value)});else for(n in e)jt(n,e[n],t,i);return r.join("&")},w.fn.extend({serialize:function(){return w.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=w.prop(this,"elements");return e?w.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!w(this).is(":disabled")&&At.test(this.nodeName)&&!Nt.test(e)&&(this.checked||!pe.test(e))}).map(function(e,t){var n=w(this).val();return null==n?null:Array.isArray(n)?w.map(n,function(e){return{name:t.name,value:e.replace(Dt,"\r\n")}}):{name:t.name,value:n.replace(Dt,"\r\n")}}).get()}});var qt=/%20/g,Lt=/#.*$/,Ht=/([?&])_=[^&]*/,Ot=/^(.*?):[ \t]*([^\r\n]*)$/gm,Pt=/^(?:about|app|app-storage|.+-extension|file|res|widget):$/,Mt=/^(?:GET|HEAD)$/,Rt=/^\/\//,It={},Wt={},$t="*/".concat("*"),Bt=r.createElement("a");Bt.href=Ct.href;function Ft(e){return function(t,n){"string"!=typeof t&&(n=t,t="*");var r,i=0,o=t.toLowerCase().match(M)||[];if(g(n))while(r=o[i++])"+"===r[0]?(r=r.slice(1)||"*",(e[r]=e[r]||[]).unshift(n)):(e[r]=e[r]||[]).push(n)}}function _t(e,t,n,r){var i={},o=e===Wt;function a(s){var u;return i[s]=!0,w.each(e[s]||[],function(e,s){var l=s(t,n,r);return"string"!=typeof l||o||i[l]?o?!(u=l):void 0:(t.dataTypes.unshift(l),a(l),!1)}),u}return a(t.dataTypes[0])||!i["*"]&&a("*")}function zt(e,t){var n,r,i=w.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&w.extend(!0,e,r),e}function Xt(e,t,n){var r,i,o,a,s=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}function Ut(e,t,n,r){var i,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(i in l)if((s=i.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[i]:!0!==l[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}w.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:Ct.href,type:"GET",isLocal:Pt.test(Ct.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":$t,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":w.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?zt(zt(e,w.ajaxSettings),t):zt(w.ajaxSettings,e)},ajaxPrefilter:Ft(It),ajaxTransport:Ft(Wt),ajax:function(t,n){"object"==typeof t&&(n=t,t=void 0),n=n||{};var i,o,a,s,u,l,c,f,p,d,h=w.ajaxSetup({},n),g=h.context||h,y=h.context&&(g.nodeType||g.jquery)?w(g):w.event,v=w.Deferred(),m=w.Callbacks("once memory"),x=h.statusCode||{},b={},T={},C="canceled",E={readyState:0,getResponseHeader:function(e){var t;if(c){if(!s){s={};while(t=Ot.exec(a))s[t[1].toLowerCase()]=t[2]}t=s[e.toLowerCase()]}return null==t?null:t},getAllResponseHeaders:function(){return c?a:null},setRequestHeader:function(e,t){return null==c&&(e=T[e.toLowerCase()]=T[e.toLowerCase()]||e,b[e]=t),this},overrideMimeType:function(e){return null==c&&(h.mimeType=e),this},statusCode:function(e){var t;if(e)if(c)E.always(e[E.status]);else for(t in e)x[t]=[x[t],e[t]];return this},abort:function(e){var t=e||C;return i&&i.abort(t),k(0,t),this}};if(v.promise(E),h.url=((t||h.url||Ct.href)+"").replace(Rt,Ct.protocol+"//"),h.type=n.method||n.type||h.method||h.type,h.dataTypes=(h.dataType||"*").toLowerCase().match(M)||[""],null==h.crossDomain){l=r.createElement("a");try{l.href=h.url,l.href=l.href,h.crossDomain=Bt.protocol+"//"+Bt.host!=l.protocol+"//"+l.host}catch(e){h.crossDomain=!0}}if(h.data&&h.processData&&"string"!=typeof h.data&&(h.data=w.param(h.data,h.traditional)),_t(It,h,n,E),c)return E;(f=w.event&&h.global)&&0==w.active++&&w.event.trigger("ajaxStart"),h.type=h.type.toUpperCase(),h.hasContent=!Mt.test(h.type),o=h.url.replace(Lt,""),h.hasContent?h.data&&h.processData&&0===(h.contentType||"").indexOf("application/x-www-form-urlencoded")&&(h.data=h.data.replace(qt,"+")):(d=h.url.slice(o.length),h.data&&(h.processData||"string"==typeof h.data)&&(o+=(kt.test(o)?"&":"?")+h.data,delete h.data),!1===h.cache&&(o=o.replace(Ht,"$1"),d=(kt.test(o)?"&":"?")+"_="+Et+++d),h.url=o+d),h.ifModified&&(w.lastModified[o]&&E.setRequestHeader("If-Modified-Since",w.lastModified[o]),w.etag[o]&&E.setRequestHeader("If-None-Match",w.etag[o])),(h.data&&h.hasContent&&!1!==h.contentType||n.contentType)&&E.setRequestHeader("Content-Type",h.contentType),E.setRequestHeader("Accept",h.dataTypes[0]&&h.accepts[h.dataTypes[0]]?h.accepts[h.dataTypes[0]]+("*"!==h.dataTypes[0]?", "+$t+"; q=0.01":""):h.accepts["*"]);for(p in h.headers)E.setRequestHeader(p,h.headers[p]);if(h.beforeSend&&(!1===h.beforeSend.call(g,E,h)||c))return E.abort();if(C="abort",m.add(h.complete),E.done(h.success),E.fail(h.error),i=_t(Wt,h,n,E)){if(E.readyState=1,f&&y.trigger("ajaxSend",[E,h]),c)return E;h.async&&h.timeout>0&&(u=e.setTimeout(function(){E.abort("timeout")},h.timeout));try{c=!1,i.send(b,k)}catch(e){if(c)throw e;k(-1,e)}}else k(-1,"No Transport");function k(t,n,r,s){var l,p,d,b,T,C=n;c||(c=!0,u&&e.clearTimeout(u),i=void 0,a=s||"",E.readyState=t>0?4:0,l=t>=200&&t<300||304===t,r&&(b=Xt(h,E,r)),b=Ut(h,b,E,l),l?(h.ifModified&&((T=E.getResponseHeader("Last-Modified"))&&(w.lastModified[o]=T),(T=E.getResponseHeader("etag"))&&(w.etag[o]=T)),204===t||"HEAD"===h.type?C="nocontent":304===t?C="notmodified":(C=b.state,p=b.data,l=!(d=b.error))):(d=C,!t&&C||(C="error",t<0&&(t=0))),E.status=t,E.statusText=(n||C)+"",l?v.resolveWith(g,[p,C,E]):v.rejectWith(g,[E,C,d]),E.statusCode(x),x=void 0,f&&y.trigger(l?"ajaxSuccess":"ajaxError",[E,h,l?p:d]),m.fireWith(g,[E,C]),f&&(y.trigger("ajaxComplete",[E,h]),--w.active||w.event.trigger("ajaxStop")))}return E},getJSON:function(e,t,n){return w.get(e,t,n,"json")},getScript:function(e,t){return w.get(e,void 0,t,"script")}}),w.each(["get","post"],function(e,t){w[t]=function(e,n,r,i){return g(n)&&(i=i||r,r=n,n=void 0),w.ajax(w.extend({url:e,type:t,dataType:i,data:n,success:r},w.isPlainObject(e)&&e))}}),w._evalUrl=function(e){return w.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,"throws":!0})},w.fn.extend({wrapAll:function(e){var t;return this[0]&&(g(e)&&(e=e.call(this[0])),t=w(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(e){return g(e)?this.each(function(t){w(this).wrapInner(e.call(this,t))}):this.each(function(){var t=w(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=g(e);return this.each(function(n){w(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(e){return this.parent(e).not("body").each(function(){w(this).replaceWith(this.childNodes)}),this}}),w.expr.pseudos.hidden=function(e){return!w.expr.pseudos.visible(e)},w.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},w.ajaxSettings.xhr=function(){try{return new e.XMLHttpRequest}catch(e){}};var Vt={0:200,1223:204},Gt=w.ajaxSettings.xhr();h.cors=!!Gt&&"withCredentials"in Gt,h.ajax=Gt=!!Gt,w.ajaxTransport(function(t){var n,r;if(h.cors||Gt&&!t.crossDomain)return{send:function(i,o){var a,s=t.xhr();if(s.open(t.type,t.url,t.async,t.username,t.password),t.xhrFields)for(a in t.xhrFields)s[a]=t.xhrFields[a];t.mimeType&&s.overrideMimeType&&s.overrideMimeType(t.mimeType),t.crossDomain||i["X-Requested-With"]||(i["X-Requested-With"]="XMLHttpRequest");for(a in i)s.setRequestHeader(a,i[a]);n=function(e){return function(){n&&(n=r=s.onload=s.onerror=s.onabort=s.ontimeout=s.onreadystatechange=null,"abort"===e?s.abort():"error"===e?"number"!=typeof s.status?o(0,"error"):o(s.status,s.statusText):o(Vt[s.status]||s.status,s.statusText,"text"!==(s.responseType||"text")||"string"!=typeof s.responseText?{binary:s.response}:{text:s.responseText},s.getAllResponseHeaders()))}},s.onload=n(),r=s.onerror=s.ontimeout=n("error"),void 0!==s.onabort?s.onabort=r:s.onreadystatechange=function(){4===s.readyState&&e.setTimeout(function(){n&&r()})},n=n("abort");try{s.send(t.hasContent&&t.data||null)}catch(e){if(n)throw e}},abort:function(){n&&n()}}}),w.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),w.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return w.globalEval(e),e}}}),w.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),w.ajaxTransport("script",function(e){if(e.crossDomain){var t,n;return{send:function(i,o){t=w("
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: product-detail-affiliate.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
VIDEO
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
PRODUCT INFORMATION
ADD YOUR TAGS
Use spaces to separate tags. Use single quotes (') for phrases.
23 Reviews - 4.6 (Overall)
We want to hear from you!
Tell us what you think about this item
CUSTOMER ALSO VIEWED
PRODUCTS THAT CUSTOMER VIEWED
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: product-detail-variable.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
VIDEO
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
PRODUCT INFORMATION
ADD YOUR TAGS
Use spaces to separate tags. Use single quotes (') for phrases.
23 Reviews - 4.6 (Overall)
We want to hear from you!
Tell us what you think about this item
CUSTOMER ALSO VIEWED
PRODUCTS THAT CUSTOMER VIEWED
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: product-detail.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
VIDEO
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
PRODUCT INFORMATION
ADD YOUR TAGS
Use spaces to separate tags. Use single quotes (') for phrases.
23 Reviews - 4.6 (Overall)
We want to hear from you!
Tell us what you think about this item
CUSTOMER ALSO VIEWED
PRODUCTS THAT CUSTOMER VIEWED
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: scss/abstracts/_functions.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass functions.
// -----------------------------------------------------------------------------
// Convert pixel to rem
// Base Font Size according to template
$base-font-size: 16 !default;
@function rem($px,$base:$base-font-size) {
@return ($px / $base) * 1rem;
}
// Function for calculating padding bottom value for non square images
@function nonsquare($imageWidth,$imageHeight) {
@return ($imageHeight / $imageWidth) * 100%;
}
================================================
FILE: scss/abstracts/_header-comment.scss
================================================
// -----------------------------------------------------------------------------
// This file contains only header section comment for resultant CSS file.
// -----------------------------------------------------------------------------
/*
Theme Name: Ludus
Author: ahfront
Description: Ludus - is complete multipurpose polish eCommerce template built with
best practices. It will be perfect solution for your current or future shop, customizable
into any store contains responsiveness & great UI. Well tested on compatible browsers.
The template contains 40+ HTML files, 3 Homepages, 3 Header Styles, 12 Dashboard Pages,
3 Product Pages, 7 Shop Pages, 5 Blog Pages, Box mode and generated 10 Color variations but could
create unlimited colors.
Version: 1.0.0
Tags: one-column, two-columns, three-columns, four-columns, right-sidebar,
custom-colors, box-mode, custom-header, custom-menu, custom-logo, featured-images
*/
$a: '1.0 Base Styles';
$b: '2.0 Typography';
$c: '3.0 Pre-configured styles';
$d: '4.0 Layout Utility Styles';
$e: '5.0 Components';
$f: '6.0 Header';
$f-1: '6.1 Primary Nav';
$f-2: '6.2 Secondary Nav';
$g: '7.0 Footer';
$g-1: '7.1 Outer-Footer';
$g-2: '7.3 Lower-Footer';
$h: '8.0 Index-Pages:';
$i: '9.0 About-Page';
$j: '10.0 Contact-Page';
$k: '11.0 Cart-Wishlist-Pages';
$l: '12.0 Empty-404-Pages';
$m: '13.0 Checkout-Page';
$n: '14.0 Signin Signup Lost Password-Page';
$o: '15.0 FAQ-Page';
$p: '16.0 Dashboard-Pages';
$q: '17.0 Blog-Pages';
$r: '18.0 Product-Detail-Pages';
$s: '19.0 Shop-Pages';
$t: '20.0 Vendor Extension Pages';
$t-1: '20.1 Bootstrap';
$t-2: '20.2 jquery.shopnav';
$t-3: '20.3 Owl-Carousel';
$t-4: '20.4 jquery.scrollUp';
$t-5: '20.5 Slick Carousel';
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
#{$a}
#{$b}
#{$c}
#{$d}
#{$e}
#{$f}
#{$f-1}
#{$f-2}
#{$g}
#{$g-1}
#{$g-2}
#{$i}
#{$j}
#{$k}
#{$l}
#{$m}
#{$n}
#{$o}
#{$p}
#{$q}
#{$r}
#{$s}
#{$t}
#{$t-1}
#{$t-2}
#{$t-3}
#{$t-4}
#{$t-5}
--------------------------------------------------------------*/
================================================
FILE: scss/abstracts/_mixins.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------
// Import `Space Utility` mixin file.
@import 'mixins-module/mixin-utilities-spacing';
================================================
FILE: scss/abstracts/_variables.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------
// Global Variables
/// Regular font family
/// @type List
$g-text-font-stack: 'Open Sans', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
/// White color
/// @type Color
$g-white: #ffffff !default;
/// Black color
/// @type Color
$g-black: #000000 !default;
/// Copy text color
/// @type Color
$g-text-color: #7f7f7f !default;
/// Main border color
/// @type Color
$g-border-color:#f8f8f8 !default;
/// Main brand color
/// @type Color
$g-brand-color:#ff4500 !default;
/// Main brand secondary color
/// @type Color
$g-brand-secondary-color: #333333 !default;
/// Main brand secondary color modify
/// @type Color
$g-brand-secondary-color-modify: rgba(33,33,33,0.51) !default;
/// Card background load color
/// @type Color
$g-card-bg-color: #f5f5f5 !default;
/// Default Mobile Breakpoint according to jquery.Navshop plugin
$g-mobileBreakpoint: 1024 !default;
================================================
FILE: scss/abstracts/mixins-module/_mixin-utilities-spacing.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all mixins that will help us to generate space classes.
// -----------------------------------------------------------------------------
/// Default Pixel Base Font Size
$base-font-size: 16 !default;
/// Your custom attribute for which you wanted to generate space classes. By
/// default value is `both`. It could be `margin` or `padding`.
/// @example
/// $g-attribute = 'margin';
/// $g-attribute = 'padding';
/// @type String
$g-attribute: 'both' !default;
/// Your custom sides for which you wanted to generate space classes. By default
/// `List` will generate `7` different version of classes on per spacing value.
/// `t` = `top`, `r` = `right`, `b` = `bottom` and `l` = `left`. You could
/// customize `List` according to your need.
/// @example
/// $g-sides = ('t', 'r', 'b', 'l');
/// $g-sides = ('t');
/// @author Ahmad Hussnain
/// @type List
$g-sides: ('t', 'r', 'b', 'l', 'x', 'y', 'xy') !default;
/// Your custom space values for which you wanted to generate space classes.
/// You could customize `List` according to your need.
/// @type List
$g-space-amount: (10, 20, 30, 40, 50, 60, 70, 80, 90, 100) !default;
/// This mixin only helps to generate space classes with `auto` value.
///
/// @param {String} $prefix - This parameter can takes a prefix value like `'u-s-m'`
/// or `'u-s-p'`.
/// @param {String} $attribute - This parameter can takes a value `'both'`,
/// `'margin'` or `'padding'`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
@mixin auto-space-property-generator($prefix,$attribute,$sides) {
@each $Value in $sides {
@if ($Value == 't') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}-top: auto;
}
} @else if ($Value == 'r') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}-right: auto;
}
} @else if ($Value == 'b') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}-bottom: auto;
}
} @else if ($Value == 'l') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}-left: auto;
}
} @else if ($Value == 'x') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}-left: auto;
#{$attribute}-right: auto;
}
} @else if ($Value == 'y') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}-top: auto;
#{$attribute}-bottom: auto;
}
} @else if ($Value == 'xy') {
.#{$prefix}-#{$Value}-auto {
#{$attribute}: auto;
}
}
}
}
/// This mixin helps to generate only space classes according to your custom
/// sides and custom space amounts.
///
/// @param {String} $prefix - This parameter can takes a prefix value like `'u-s-m'`
/// or `'u-s-p'`.
/// @param {String} $attribute - This parameter can takes a value `'both'`,
/// `'margin'` or `'padding'`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
/// @param {Number | List} $space-amount - This parameter can takes a number or list
/// of your custom space amounts. If You don't specify `List` then it will
/// generate classes from `0 to 120` pixels that by default converted to rem unit.
@mixin normal-space-property-generator($prefix,$attribute,$sides,$space-amount) {
@each $Value in $sides {
@if ($Value == 't') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}-top: #{$space-amount};
} @else {
#{$attribute}-top: ($space-amount / $base-font-size) * 1rem;
}
}
} @else if ($Value == 'r') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}-right: #{$space-amount};
} @else {
#{$attribute}-right: ($space-amount / $base-font-size) * 1rem;
}
}
} @else if ($Value == 'b') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}-bottom: #{$space-amount};
} @else {
#{$attribute}-bottom: ($space-amount / $base-font-size) * 1rem;
}
}
} @else if ($Value == 'l') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}-left: #{$space-amount};
} @else {
#{$attribute}-left: ($space-amount / $base-font-size) * 1rem;
}
}
} @else if ($Value == 'x') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}-left: #{$space-amount};
#{$attribute}-right: #{$space-amount};
} @else {
#{$attribute}-left: ($space-amount / $base-font-size) * 1rem;
#{$attribute}-right: ($space-amount / $base-font-size) * 1rem;
}
}
} @else if ($Value == 'y') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}-top: #{$space-amount};
#{$attribute}-bottom: #{$space-amount};
} @else {
#{$attribute}-top: ($space-amount / $base-font-size) * 1rem;
#{$attribute}-bottom: ($space-amount / $base-font-size) * 1rem;
}
}
} @else if ($Value == 'xy') {
.#{$prefix}-#{$Value}-#{$space-amount} {
@if ($space-amount == 0) {
#{$attribute}: #{$space-amount};
} @else {
#{$attribute}: ($space-amount / $base-font-size) * 1rem;
}
}
}
}
}
/// This mixin decides what properties, sides and amounts are needed to generate
/// classes.
///
/// @param {String | List} $attribute - This parameter can takes a value
/// `'both'` or a list `('margin','padding')`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
/// @param {Number | List} $space-amount - This parameter can takes a number or
/// a list of your custom space amounts. If You don't specify `List` then it will
/// generate classes from `0 to 120` pixels.
/// @requires {mixin} auto-space-property-generator
/// @requires {mixin} normal-space-property-generator
@mixin main-generator($attribute,$sides,$space-amount) {
// If $attribute value is not equal to 'both' then it means user pass only single value.
@if ($attribute == 'margin') {
/* Margin with value `auto`. */
@include auto-space-property-generator('u-s-m', nth($attribute, 1), $sides);
}
@else {
/* Margin with value `auto`. */
@include auto-space-property-generator('u-s-m', nth($attribute, 1), $sides);
}
@if ($space-amount == null) {
@for $i from 0 through 120 {
@if ($attribute == 'margin') {
@include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $i);
} @else if ($attribute == 'padding') {
@include normal-space-property-generator('u-s-p', nth($attribute, 1), $sides, $i);
} @else {
/* Margin with value `#{$i}`. */
@include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $i);
/* Padding with value `#{$i}`. */
@include normal-space-property-generator('u-s-p', nth($attribute, 2), $sides, $i);
}
}
} @else {
@each $custom-space-amount in $space-amount {
@if ($attribute == 'margin') {
/* Margin with value `#{$i}`. */
@include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $custom-space-amount);
} @else if ($attribute == 'padding') {
/* Padding with value `#{$i}`. */
@include normal-space-property-generator('u-s-p', nth($attribute, 1), $sides, $custom-space-amount);
} @else {
/* Margin with value `#{$i}`. */
@include normal-space-property-generator('u-s-m', nth($attribute, 1), $sides, $custom-space-amount);
/* Padding with value `#{$i}`. */
@include normal-space-property-generator('u-s-p', nth($attribute, 2), $sides, $custom-space-amount);
}
}
}
}
/// Main mixin that invokes all the mixins which help to generate
/// classes, i.e based on user requirements.
///
/// @param {String} $attribute - This parameter can takes a value `'both'`,
/// `'margin'` or `'padding'`.
/// @param {List} $sides - This parameter can takes a list of your custom
/// sides i.e `('t','r','b','l','x','y','xy')`.
/// @param {List} $space-amount [null] - This parameter can takes a list of your
/// custom space amounts. If You don't specify `List` or leave it as optional
/// parameter then it will generate classes from `0 to 120` pixels.
/// @requires {variable} $g-attribute
/// @requires {variable} $g-sides
/// @requires {variable} $g-space-amount
/// @requires {mixin} main-generator
@mixin utility-margin-padding($attribute,$sides,$space-amount: null) {
@if ($attribute == 'both') {
$attribute: ('margin', 'padding');
}
@include main-generator($attribute, $sides, $space-amount);
}
================================================
FILE: scss/app.color10.scss
================================================
$g-brand-color:#ff1500; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color2.scss
================================================
$g-brand-color:#ff003b; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color3.scss
================================================
$g-brand-color:#003bff; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color4.scss
================================================
$g-brand-color:#156844; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color5.scss
================================================
$g-brand-color:#c500ff; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color6.scss
================================================
$g-brand-color:#382E2E; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color7.scss
================================================
$g-brand-color:#116466; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color8.scss
================================================
$g-brand-color:#1B469A; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.color9.scss
================================================
$g-brand-color:#0D122C; // This color overrides the `!default` flag $g-brand-color variable
@import 'app';
================================================
FILE: scss/app.scss
================================================
// Configuration and helpers
@import
'abstracts/header-comment',
'abstracts/functions',
'abstracts/variables';
// Base stuff
@import
'base/base',
'base/typography',
'base/pre-config',
'base/utilities';
// Components
@import
'components/all';
// Layout-related sections
@import
'layout/header',
'layout/footer';
// Page-specific styles
@import
'pages/all';
// Vendor Extensions
@import
'vendors-extensions/all';
================================================
FILE: scss/base/_base.scss
================================================
// -----------------------------------------------------------------------------
// This file contains only basic styles.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$a}
--------------------------------------------------------------*/
/**
* Setup box-sizing
*/
html {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
&.boxed {
background-color: #eee;
}
}
*,
*::before,
*::after {
box-sizing: inherit;// html inherit
}
/**
* Set up a background-color and height on the root and body element.
*/
body {
line-height: 1.5;// now it is 24px
font-size: 1rem;
-webkit-font-smoothing: antialiased;
}
.config {
overflow: hidden;
}
/**
* Basic styles for headings and paragraph
*/
h1,h2,h3,h4,h5,h6{
padding: 0;
margin: 0;
}
h1 {
font-size: 50px;
line-height: 50px;
}
h2 {
font-size: 32px;
line-height: 46px;
}
h3 {
font-size: 18px;
line-height: 32px;
}
h4 {
font-size: 16px;
line-height: 30px;
}
h5 {
font-size: 15px;
line-height: 30px;
}
p {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 24px;
}
/**
* Basic styles for links
*/
a,a:hover,a:focus {
outline: none;
text-decoration: none;
cursor: pointer;
}
/**
* Basic style for image element
*/
img {
border: 0;
&:focus {
outline: none;
}
}
/**
* Basic style for iframe element
*/
iframe {
border:none;
overflow:hidden;
}
iframe[src*="soundcloud"] {
width: 100%;
}
/*--------------------------------------------------------------
Box Module
--------------------------------------------------------------*/
/* Body Element */
// Greater than
@media (min-width: 576px) {
html {
&.boxed {
body {
background-color: $g-white;
margin: 0 auto;
}
}
}
}
// Greater than
@media (min-width: 576px) {
html {
&.boxed {
body {
max-width: 546px;
}
}
}
}
// Greater than
@media (min-width: 791px) {
html {
&.boxed {
body {
max-width: 770px;
}
}
}
}
// Greater than
@media (min-width: 1025px) {
html {
&.boxed {
body {
max-width: 990px;
}
}
}
}
// Greater than
@media (min-width: 1230px) {
html {
&.boxed {
body {
max-width: 1200px;
}
}
}
}
/* Header with container Element */
// Less than
@media (max-width: 1024px) {
html.boxed {
header {
.container {
padding-left: 20px;
padding-right: 20px;
}
}
}
}
// Greater than
@media (min-width: 1025px) {
html.boxed {
header {
.container {
padding-left: 40px;
padding-right: 40px;
}
}
}
}
/* Header & Footer Element */
// Greater than
@media (min-width: 576px) {
html.boxed header,html.boxed footer {
margin-right: auto;
margin-left: auto;
width: 100%;
}
}
// Greater than
@media (min-width: 576px) {
html.boxed header,html.boxed footer {
max-width: 456px;
}
}
// Greater than
@media (min-width: 791px) {
html.boxed header,html.boxed footer {
max-width: 770px;
}
}
// Greater than
@media (min-width: 1025px) {
html.boxed header,html.boxed footer {
max-width: 990px;
}
}
// Greater than
@media (min-width: 1230px) {
html.boxed header,html.boxed footer {
max-width: 1200px;
}
}
/* App Content exclude Header & Footer */
// Greater than
@media (min-width: 576px) {
html.boxed .app-content {
margin: 0 auto;
overflow: hidden;
}
}
// Greater than
@media (min-width: 576px) {
html.boxed .app-content {
max-width: 546px;
}
}
// Greater than
@media (min-width: 791px) {
html.boxed .app-content {
max-width: 770px;
}
}
// Greater than
@media (min-width: 1025px) {
html.boxed .app-content {
max-width: 990px;
}
}
// Greater than
@media (min-width: 1230px) {
html.boxed .app-content {
max-width: 1200px;
}
}
/* App Content with container */
// Less than
@media (max-width: 1024px) {
html.boxed .app-content .container {
padding-left: 20px;
padding-right: 20px;
}
}
// Greater than
@media (min-width: 1025px) {
html.boxed .app-content .container {
padding-left: 40px;
padding-right: 40px;
}
}
/* Footer with container Element */
// Less than
@media (max-width: 1024px) {
html.boxed {
footer {
.container {
padding-left: 20px;
padding-right: 20px;
}
}
}
}
// Greater than
@media (min-width: 1025px) {
html.boxed {
footer {
.container {
padding-left: 40px;
padding-right: 40px;
}
}
}
}
================================================
FILE: scss/base/_pre-config.scss
================================================
// -----------------------------------------------------------------------------
// This file contains some pre configure styles.
// Does our app contains preloader?
// What should we do when user disable JavaScript?
// Does Flash of Un-styled Content (FOUC) is occurring on your app?
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$c}
--------------------------------------------------------------*/
/**
* JavaScript Disabled Page
*/
.no-js {
#app {
display: none;
}
}
.app-setting {
background-color: $g-white;
display: flex;
align-items: center;
height: 100vh;
position: fixed;
z-index: 1000001;
top: 0;
left: 0;
right: 0;
bottom: 0;
&__wrap {
text-align: center;
padding: rem(35);
background-color: #fbfbfb;
border-left: rem(3) solid $g-brand-color;
}
&__h1 {
font-size: rem(33);
font-weight: 700;
line-height: 42px;
color: $g-brand-secondary-color;
}
&__text {
font-size: rem(13);
color: #ababab;
}
}
/**
* Preloader
*/
.preloader.is-active {
width: 100%;
text-align: center;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1000000;
background: white;
display: block;
}
.preloader {
display: none;
&__wrap {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
&__img {
display: block;
}
}
/*
* Row modifier class
*/
.row--center {
justify-content: center;
}
/*
* Fitvids plugin modifier class
*/
.fluid-width-video-wrapper {
background-color: $g-card-bg-color;
}
/*
* Social media classes with property background-color & color.
* 's' is a prefix and represents a social media class.
*/
/* Facebook */
.s-fb--bgcolor-hover:hover {
background-color: #4267b2;
}
.s-fb--color-hover:hover {
color: #4267b2;
}
.s-fb--color {
color: #4267b2;
}
/* Twitter */
.s-tw--bgcolor-hover:hover {
background-color: #38A1F3;
}
.s-tw--color-hover:hover {
color: #38A1F3;
}
.s-tw--color {
color: #38A1F3;
}
/* instagram */
.s-insta--bgcolor-hover:hover {
background-color: #f77737;
}
.s-insta--color-hover:hover {
color: #f77737;
}
.s-insta--color {
color: #f77737;
}
/* youtube */
.s-youtube--bgcolor-hover:hover {
background-color: #ED3833;
}
.s-youtube--color-hover:hover {
color: #ED3833;
}
.s-youtube--color {
color: #ED3833;
}
/* linkedin */
.s-linked--bgcolor-hover:hover {
background-color: #0077B5;
}
.s-linked--color-hover:hover {
color: #0077B5;
}
.s-linked--color {
color: #0077B5;
}
/* googleplus */
.s-gplus--bgcolor-hover:hover {
background-color: #dd4b39;
}
.s-gplus--color-hover:hover {
color: #dd4b39;
}
.s-gplus--color {
color: #dd4b39;
}
/* Whats App */
.s-wa--color {
color: #25d366;
}
.s-wa--color-hover:hover {
color: #25d366;
}
/*
* Global classes you can use these classes on elements and components of your application.
* Remember: Don't confuse your mind with utility classes & Global classes.
* Utility class has a prefix 'u' that represents root namespace also has a sub-namespace
* prefix. These are low-level utility classes that make it easy to build complex user interfaces.
* Global class has a prefix 'gl' and these classes are ready-made styles that you could
* use on different elements like span, div, h1, h3 and components like button, selectbox. scrollbar etc.
*/
/*
* Chrome Default Style for scrollbar
*/
.gl-scroll {
// Width
&::-webkit-scrollbar {
height: 8px;
width: 8px;
}
// Track
&::-webkit-scrollbar-track {
background: #eee;
}
// Handle
&::-webkit-scrollbar-thumb {
background: #888;
}
// Handle on hover
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
}
/*
* Global Rating Style apply on any div that has `i` element as children
*/
.gl-rating-style {
> i {
margin-left: 2px;
color: #ff9600;
&:first-child {
margin-left: 0;
}
}
}
.gl-rating-style-2 {
> i {
margin-left: 2px;
color: #ff4500;
&:first-child {
margin-left: 0;
}
}
}
/*
* Signup, Login Social Buttons
*/
.gl-s-api {
width: 80%;
margin: 0 auto;
&__btn {
border: none;
cursor: pointer;
text-align: center;
display: block;
width: 100%;
padding: 12px;
color: $g-white;
font-size: 14px;
font-weight: 600;
transition: background-color 0.5s linear;
&:focus {
outline: 0;
}
span {
margin-left: 10px;
}
}
&__btn--fb {
background-color: #4267b2;
&:hover {
background-color: darken(#4267b2,5%);
}
}
&__btn--gplus {
background-color: #dd4b39;
&:hover {
background-color: darken(#dd4b39,5%);
}
}
}
/*
* Inline Maker 1
*/
.gl-inline {
display: flex;
flex-wrap: nowrap;
align-items: center;
div {
flex:1;
margin-right: 14px;
&:last-child {
margin-right: 0;
}
}
}
/*
* Inline Maker 2
*/
.gl-l-r {
display: flex;
align-items: center;
justify-content: space-between;
}
/**
* DOB: Date of Birth Select Box
*/
.gl-dob {
display: flex;
align-items: center;
.select-box {
flex: 1;// Because of this property all select boxes automatically fill space that a wrapper has.
margin-right: 8px;
&:last-child {
margin-right: 0;
}
}
}
// Anchor Text with brand color
.gl-link {
font-size: 13px;
font-weight: 600;
color: $g-brand-color;
transition: color 0.5s linear;
&:hover {
color: darken($g-brand-color,1%);
}
}
.gl-h1 {
color: $g-brand-secondary-color;
font-size: 18px;
margin-bottom: 8px;// has margin-bottom
}
.gl-text {
display: block;
color: #a0a0a0;
font-size: 13px;
}
.gl-label {
margin-bottom: 8px;// has margin-bottom
display: block;
color: $g-brand-secondary-color;
font-size: 13px;
font-weight: 600;
}
/**
* Global Tag
*/
.gl-tag {
// because of flex
margin-right: 8px;
display: inline-block; // important tag
margin-bottom: 10px;
padding: 5px 13px;
font-size: 12px;
font-weight: 600;
border-radius: 22px;
&:last-child {
margin-right: 0;
}
}
/*
* Global Modal Classes
*/
.gl-modal-h1 {
margin-bottom: 8px;
line-height: 1;
display: block;
color: $g-brand-secondary-color;
font-size: 20px;
font-weight: 600;
}
.gl-modal-text {
color: #a0a0a0;
font-size: 13px;
}
.gl-modal-btn-group {
display: flex;
align-items: center;
button {
margin-right: 12px;
&:last-child {
margin-right: 0;
}
}
}
@media (max-width:575px) {
.gl-inline {
display: block;
div {
display: block;
margin-right: 0;
}
}
.gl-l-r {
display: block;
}
// Birthday
.gl-dob {
display: block;
.select-box {
width: 100%;
margin-bottom: 8px;
margin-right: 0;
&:last-child {
margin:0;
}
}
}
}
/**
* Default Pulse Animation
*/
@keyframes mypulse {
0% {
box-shadow: 0 0 0 0 #bdc3c7;
}
100% {
box-shadow: 0 0 0 1.5em rgba(189, 195, 199, 0);// 24px
}
}
================================================
FILE: scss/base/_typography.scss
================================================
// -----------------------------------------------------------------------------
// This file contains our layout Typography styles.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$b}
--------------------------------------------------------------*/
/**
* Basic typography style for copy text
*/
body {
color: $g-text-color;
font-family: $g-text-font-stack;
}
================================================
FILE: scss/base/_utilities.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all CSS utility classes that are specific only for layout
// design.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$d}
--------------------------------------------------------------*/
/**
* Utility classes for colors:
* Convey meaning through color with a handful of color utility classes.
* Includes support for styling links too.
*/
.u-c-brand {
color:$g-brand-color !important;// Remove any specificity color level
}
.u-c-secondary {
color:$g-brand-secondary-color !important;
}
.u-c-white {
color:$g-white !important;
}
.u-c-black {
color:$g-black !important;
}
.u-c-grey {
color:$g-text-color !important;
}
.u-c-silver {
color:#a0a0a0 !important;
}
/*
* Display Utility
*/
.u-d-block {
display: block;
}
/*
* Sizing
* Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
*/
.u-w-100 {
width: 100%;
}
.u-h-100 {
height: 100%;
}
/**
* Image Responsive utility classes
*/
.u-img-fluid {
width: 100%;// IE 10
max-width: 100%;
height: auto;
}
================================================
FILE: scss/components/_all.scss
================================================
// -----------------------------------------------------------------------------
// `all.scss` is just typical import file that contains all code base of
// the directory.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$e}
--------------------------------------------------------------*/
@import "./breadcrumb/breadcrumb";
@import "./button/button";
@import "./countdown/countdown";
@import "./input-counter/input-counter";
@import "./input-text/input-text";
@import "./preload-img-aspect-ratio/preload-img-aspect-ratio";
@import "./product/product";
@import "./checkbox-radio/checkbox-radio";
@import "./select-box/select-box";
@import "./textarea/textarea";
@import "./modal/modal";
================================================
FILE: scss/components/breadcrumb/_breadcrumb.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the breadcrumb component.
// -----------------------------------------------------------------------------
/* Breadcrumb Component */
.breadcrumb {
&__wrap {
background-color: #fbfbfb;
padding: rem(18);
border-radius: rem(3);
}
&__list {
list-style: none;
padding: 0;
margin: 0;
word-wrap: break-word;
> li {
display: inline-block;
> a {
color: #a0a0a0;
font-size: 13px;
font-weight: 700;
transition: color 0.5s;
&:hover {
color: $g-brand-secondary-color;
}
}
&.is-marked {
> a {
color: $g-brand-secondary-color;
}
}
&.has-separator {
&:after {
content: '/';
margin: 0 16px;
}
}
}
}
}
================================================
FILE: scss/components/button/_button.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the button component.
// -----------------------------------------------------------------------------
/* Button Component */
.btn {
user-select: none;
// default it is display:inline-block
cursor: pointer;
font-size: 14px; // default text font size inside button
&:focus {
outline: none;
}
}
.btn--icon {
border: none;
background-color: transparent;
padding: 0;
}
// Here e stands for effect
// Background Effects
.btn--e-brand {
color: $g-white;
border: 1px solid transparent;
background-color:$g-brand-color;
transition: background-color .5s ease-in;
&:hover {
background-color: darken($g-brand-color,1%);
}
}
// Border 2
.btn--e-brand-b-2 {
color: $g-white;
background-color:$g-brand-color;
border: 2px solid $g-brand-color;
transition: background-color 0.5s ease-in, border-color 0.5s ease-in;
&:hover {
background-color: darken($g-brand-color,1%);
border-color: darken($g-brand-color,1%);
}
}
// Border 2
// Grey
.btn--e-grey-b-2 {
color: $g-brand-secondary-color;
background-color:#f5f5f5;
border: 2px solid #f5f5f5;
transition: background-color 0.5s ease-in, border-color 0.5s ease-in;
&:hover {
background-color: darken(#f5f5f5,1%);
border-color: darken(#f5f5f5,1%);
}
}
// Secondary
.btn--e-secondary {
color: $g-white;
border: 1px solid transparent;
background-color:$g-brand-secondary-color;
transition: background-color .5s ease-in;
&:hover {
background-color: darken($g-brand-secondary-color,1%);
}
}
// White background
.btn--e-white-brand {
border: 1px solid transparent;
color: $g-brand-secondary-color;
background-color: $g-white;
transition: background-color .3s linear, color .3s linear;
&:hover {
background-color: $g-brand-color;
color: $g-white;
}
}
//-------------------------------------------------------
// Transparent Outline Effects
// Border 2
// Brand Outline
.btn--e-transparent-brand-b-2 {
color: $g-brand-color;
border:2px solid $g-brand-color;
background-color:transparent;
transition: border-color .5s ease-in;
&:hover {
border-color: darken($g-brand-color,1%);
}
}
// Transparent Outline Effects
// Border 2
// Brand Outline with bg
.btn--e-transparent-hover-brand-b-2 {
color: $g-brand-color;
border:2px solid $g-brand-color;
background-color:transparent;
transition: background-color .1s ease-in,border-color .1s ease-in;
&:hover {
background-color: $g-brand-color;
color: $g-white;
}
}
// Secondary Outline
.btn--e-transparent-secondary-b-2 {
color: $g-brand-secondary-color;
border:2px solid $g-brand-secondary-color;
background-color:transparent;
transition: border-color .5s ease-in;
&:hover {
border-color: darken($g-brand-secondary-color,1%);
}
}
// Platinum outline
.btn--e-transparent-platinum-b-2 {
color: $g-brand-secondary-color;
border: 2px solid #e5e5e5;
background-color:transparent;
transition: border-color 0.5s linear;
&:hover {
border-color: $g-brand-color;
}
}
// Box-Shadow Button
// White with Secondary color
.btn--e-white-brand-shadow {
border: 1px solid #eee;
box-shadow: 1px 2px 8px 0 rgba(36, 37, 38, 0.08);
background-color: $g-white;
color: $g-brand-secondary-color;
transition: background-color .3s linear, border-color .3s linear,color .3s linear;
&:hover {
border-color: $g-brand-color;
background-color: $g-brand-color;
color: $g-white;
}
}
// Brand with Shadow
.btn--e-brand-shadow {
border: 1px solid $g-brand-color;
box-shadow: 1px 2px 8px 0 rgba(36, 37, 38, 0.08);
background-color: $g-brand-color;
color: $g-white;
transition: background-color .3s linear, border-color .3s linear;
&:hover {
border-color: darken($g-brand-color,1%);
background-color: darken($g-brand-color,1%);
}
}
================================================
FILE: scss/components/checkbox-radio/_checkbox-radio.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the checkbox-radio component.
// -----------------------------------------------------------------------------
/* Checkbox, Radio Component */
/*
* Remember these are very important styles and make sure input checkbox always has a greater z-index from label
* and any other div's.
* Remember these styles make checkbox horizontal center, and when you click out of the boundary region
* Behind the scenes checkbox has a opacity 0 but it will be checked.
*/
// div
.check-box {
[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
min-width: 16px;// Width of the default hidden radio
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
}
// div
.radio-box {
[type="radio"] {
position: absolute;
left: 0;
top: 0;
min-width: 16px;// Width of the default hidden radio
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
}
.check-box {
position: relative;
display: inline-block;// Very Very Important property
white-space: nowrap;
line-height: 1;// i.e. 16px Very important property makes square vertical center
&__label {
position: initial;// which is static
display: inline-block;// Very Very Important property
font-weight: 600;
font-size: 13px;
color: $g-brand-secondary-color;
margin-left: 24px;
// min-width: 18px;
white-space: normal;
&:before,&:after {
content: '';
width: 18px;
height: 18px;
display: block;
border: 2px solid transparent;
z-index: 0;
transition: all .5s ease;
position: absolute;
left: 0;
top: 0;
}
&:before {
background-color: #f1f1f1;
}
&:after {
transform: scale(0.6);// transition to scale(0.4) when it is checked
}
}
}
.check-box input:checked ~ .check-box__state label:before {
animation: mypulse 1s;
}
.check-box input:checked ~ .check-box__state.check-box__state--primary label:before {
border-color: $g-brand-color;
background-color: $g-white;
}
.check-box input:checked ~ .check-box__state.check-box__state--primary label:after {
transform: scale(0.4);
background-color: $g-brand-color;
}
.radio-box {
position: relative;
display: inline-block;// Very Very Important property
white-space: nowrap;
line-height: 1;// i.e. 16px Very important property makes square vertical center
&__label {
position: initial;// which is static
display: inline-block;// Very Very Important property
font-weight: 600;
font-size: 13px;
color: $g-brand-secondary-color;
white-space: normal;
margin-left: 24px;
// min-width: 18px;
&:before,&:after {
content: '';
width: 18px;
height: 18px;
display: block;
border-radius: 50%;
border: 2px solid transparent;
z-index: 0;
transition: all .5s ease;
position: absolute;
left: 0;
top: 0;
}
&:before {
background-color: #f1f1f1;
}
&:after {
transform: scale(0.6);// transition to scale(0.4) when it is checked
}
}
}
.radio-box input:checked ~ .radio-box__state label:before {
animation: mypulse 1s;
}
.radio-box input:checked ~ .radio-box__state.radio-box__state--primary label:before {
border-color: $g-brand-color;
background-color: $g-white;
}
.radio-box input:checked ~ .radio-box__state.radio-box__state--primary label:after {
transform: scale(0.4);
background-color: $g-brand-color;
}
================================================
FILE: scss/components/countdown/_countdown.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the countdown component.
// -----------------------------------------------------------------------------
/* Countdown Component */
// Used on 2 products that are on the Deal of the page
.countdown--style-special {
display: flex;
flex-wrap: wrap;
justify-content: center;
.countdown__content {
margin: 0 6px 10px;
text-align: center;
// by default all children would be inline because of flex
//display: inline-block;
padding: 5px 24px;
//background: transparent linear-gradient(146deg, $g-brand-color 0%, lighten($g-brand-color,10%) 100%);
//box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
background-color: rgba(255,255,255,0.98);
// > div { }
}
.countdown__value {
font-size: 35px;
font-weight: 600;
display: block;
color: $g-brand-secondary-color;
}
.countdown__key {
font-size: 12px;
font-weight: 600;
display: block;
color: $g-brand-color;
}
}
// Used on Banner-bg
.countdown--style-banner {
display: flex;
flex-wrap: wrap;
justify-content: center;
.countdown__content {
// by default all children would be inline because of flex
//display: inline-block;
margin: 0 10px 10px;
text-align: center;
padding: 5px 24px;
// box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
background-color: $g-brand-secondary-color;
// > div { }
}
.countdown__value {
font-size: 48px;
font-weight: 600;
display: block;
color: $g-white;
}
.countdown__key {
font-size: 12px;
font-weight: 600;
display: block;
color: $g-white;
}
}
// Used on index-2 'countdown style section'
.countdown--style-section {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.countdown__content {
margin: 18px 20px 20px 0;
padding: 8px 22px;
// by default all children would be inline because of flex
//display: inline-block;
// padding: 2px 6px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
background-color: rgba(255,255,255,.98);
// background: transparent linear-gradient(146deg, $g-brand-color 0%, lighten($g-brand-color,10%) 100%);
}
.countdown__value {
font-size: 26px;
font-weight: 600;
display: block;
color: $g-brand-secondary-color;
}
.countdown__key {
font-size: 10px;
font-weight: 600;
display: block;
color: $g-brand-color;
}
}
================================================
FILE: scss/components/input-counter/_input-counter.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the input-counter component.
// -----------------------------------------------------------------------------
/* Input-Counter Component */
.input-counter {
position: relative;
display: inline-block;
max-width: 132px;
min-width: 132px;
&__text {
border-radius: 25px;
display: block;
width: 100%;
height: 50px;
font-size: 14px;
font-weight: 600;
text-align: center;
&:focus {
outline: 0;
}
}
&--text-primary-style {
color: $g-brand-secondary-color;
transition: all 0.6s linear;
border: 2px solid transparent;
background-color: #f1f1f1;
&:focus {
background-color: transparent;
border-color: $g-brand-color;
}
}
&__minus,&__plus {
top: 0;
display: inline-block;
font-size: 10px;
cursor: pointer;
position: absolute;
width: 50px;
line-height: 50px;//Vertical Center
height: 100%;
text-align: center;
color: $g-text-color;
transition: color 0.5s;
&:hover {
color: $g-brand-secondary-color;
}
}
&__minus {
left:0;
}
&__plus {
right: 0;
}
}
================================================
FILE: scss/components/input-text/_input-text.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the input text component.
// -----------------------------------------------------------------------------
/* Input Text Component */
.input-text {
font-size: 12px;
background-clip: padding-box;
padding: 0 18px;
height: 40px;// default height
&--border-radius {
border-radius: 25px;
}
&--primary-style {
color: $g-brand-secondary-color;
transition: all 0.6s linear;
border: 2px solid transparent;
background-color: #f1f1f1;
&:focus {
background-color: transparent;
border-color: $g-brand-color;
}
}
&--style-1 {
color: #5c636c;
transition: all 0.6s linear;
border: 1px solid transparent;
background-color: #f1f1f1;
&:focus {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
background-color: transparent;
border-color: #eee;
}
}
&--style-2 {
color: #5c636c;
border: 1px solid transparent;
background-color: #f1f1f1;
transition: all 0.6s linear;
&:focus {
background-color: $g-white;
}
}
&--only-white {
border: 1px solid transparent;
color: $g-brand-secondary-color;
background-color: $g-white;
}
&:focus {
outline: 0;
}
}
.input-text:disabled {
background-color: #cecece;// All .input-text--primary-style will override with this
}
// IE10+
input::-ms-clear {
display: none;
}
================================================
FILE: scss/components/modal/_modal.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all global styles of a model component.
// -----------------------------------------------------------------------------
/* Modal Component */
// Relative to modal-content
.dismiss-button {
z-index: 2;
position: absolute;
top: 0;
right: -50px;
background-color: transparent;
padding: 8px;
font-size: 24px;
border: 0;
color: $g-white;
cursor: pointer;
transition: color 110ms ease-in-out;
&:hover {
color: $g-brand-color;
}
}
// Modal:1 Dashboard Modal Styles
#dash-newsletter {
.modal-dialog {
width: 100%;
max-width: 450px;
}
.modal-body {
padding: rem(30);
}
}
// Form Buttons (Subscribe - Cancel)
.d-modal__form {
width: 100%;
.btn {
padding: 14px 46px;
font-size: 12px;
font-weight: 600;
}
a {
font-size: 15px;
font-weight: 600;
color: $g-brand-color;
transition: color 110ms ease-in-out;
&:hover {
color: $g-text-color;
}
}
}
// Modal:2 Checkout - Edit Ship Address
// Modal:3 Checkout - Add Ship Address
#edit-ship-address,#add-ship-address {
.modal-dialog {
width: 100%;
max-width: 750px;
}
.modal-body {
padding: rem(30);
}
}
.checkout-modal1__form,.checkout-modal2__form {
width: 100%;
.btn,.input-text,.select-box {
border-radius: 6px;
}
.input-text,.select-box {
width: 100%;
}
.btn {
font-weight: 600;
padding: 16px 46px;
}
}
// Modal:4 Add to Cart Modal Styles
#add-to-cart {
.modal-dialog {
width: 100%;
max-width: 550px;
}
.row {
align-items: center;
}
}
.success {
text-align: center;
&__text-wrap {
margin-bottom: 18px;
i {
margin-right: 8px;
font-size: 16px;
color: $g-brand-color;
}
span {
font-weight: 700;
font-size: 14px;
color: $g-brand-secondary-color;
}
}
&__img-wrap {
display: inline-block;
vertical-align: middle;
background-color: $g-card-bg-color;
width: 120px;
height: 120px;
img {
min-width: 120px;
}
}
&__name {
display: block;
margin: 4px 0;
font-size: 14px;
font-weight: 600;
color: $g-brand-secondary-color;
}
&__quantity {
margin-bottom: 4px;
display: block;
font-size: 12px;
color: #a0a0a0;
}
&__price {
display: block;
font-weight: 700;
font-size: 14px;
color: $g-brand-color;
}
}
.s-option {
text-align: center;
&__text {
display: block;
margin-bottom: 20px;
font-size: 12px;
color: #a0a0a0;
}
&__link-box {
width: 85%;
margin: 0 auto;
}
&__link {
margin-bottom: 20px;
display: block;
padding: 12px 8px;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 13px;
}
}
// Modal:5 Product Quick Look
#quick-look {
.modal-dialog {
width: 100%;
max-width: 991px;
}
.modal-body {
padding: rem(30);
}
}
// Modal:6 Newsletter Modal
.new-l--center {
text-align: center;
}
#newsletter-modal {
.modal-dialog {
width: 100%;
max-width: 800px;
}
.modal-body {
padding: 0;
}
.new-l__dismiss {
z-index: 2;
position: absolute;
top: 0;
right: 10px;
background-color: transparent;
padding: 8px;
font-size: 16px;
border: 0;
color: #515151;
cursor: pointer;
}
.row {
align-items: center;
}
}
.new-l__img-wrap {
background-color: $g-card-bg-color;
position: relative;
&:before {
transition: all 0.6s linear;
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0;
background-color: rgba(0, 0, 0, .4);
}
}
.new-l__img-wrap:hover {
&:before {
opacity: 1;
}
}
.new-l__h3 {
font-size: 26px;
line-height: 1.2;
color: $g-brand-secondary-color;
}
.new-l__p1 {
font-size: 14px;
line-height: 21px;
}
.new-l__p2 {
font-size: 12px;
color: #a0a0a0;
}
.new-l__link {
font-size: 13px;
color: $g-text-color;
transition: all .3s;
&:hover {
color: $g-brand-color;
text-decoration: underline;
}
}
// Newsletter Form Global Style
.new-l__form {
width: 100%;
.btn {
width: 100%;
}
.btn {
padding: 13px 30px;
font-size: 14px;
font-weight: 600;
}
}
.news-l__input {
width: 100%;
font-size: 12px;
padding: 0 18px;
height: 40px; // default height
color: $g-brand-secondary-color;
transition: all 0.6s linear;
border: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
background-color: $g-white;
&:focus {
border-color: $g-brand-color;
}
&:focus {
outline: 0;
}
// IE10+
&::-ms-clear {
display: none;
}
}
@media(max-width:991px) {
.new-l__col-1 {
display: none;
}
}
================================================
FILE: scss/components/preload-img-aspect-ratio/_preload-img-aspect-ratio.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all styles related to the preload aspect ratio component.
// -----------------------------------------------------------------------------
/* Preload Aspect Ratio Component */
/*
* Example 1 For Square:
.i3-banner {
position: relative;
display: block;
overflow: hidden;
cursor:pointer;
&:before {
transition: all 0.6s linear;
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0;
background-color: rgba(0, 0, 0, .4);
}
&__img {
transform: scale(1);
transition: all 0.6s ease-in-out;
}
}
.i3-banner:hover {
&:before {
opacity: 1;
}
.i3-banner__img {
transform: scale(1.1);
}
}
.aspect--1048-334 {
padding-bottom: nonsquare(1048, 334);
}
// Section
.section {
&__text-wrap {
text-align: center;
}
&__content {
position: relative;
}
&__heading {
font-weight: 600;
letter-spacing: -.02rem;
font-size: 28px;
position: relative;
}
&__span {
//font-weight: 600;
font-size: 13px;
display: block;
}
}
// Shop Collection
.collection {
position: relative;
display: block;
overflow: hidden;
cursor:pointer;
&:before {
transition: all 0.6s linear;
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0;
background-color: rgba(0, 0, 0, .4);
}
&__img {
transform: scale(1);
transition: all 0.6s ease-in-out;
}
}
.collection:hover {
&:before {
opacity: 1;
}
.collection__img {
transform: scale(1.1);
}
}
.aspect--1286-890 {
padding-bottom: nonsquare(1286, 890);
}
// End
// Filter
// isotope filter item container
.filter-category-container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.filter__btn--style-1 {
position: relative;
transition: all 0.3s ease 0s;
display: block;
border: none;
padding: 18px;
font-size: 14px;
color: $g-brand-secondary-color;
font-weight: 600;
background-color: transparent;
// Normal
&:before {
content: '';
width: 0;
height: 2px;
background-color: $g-brand-color;
position: absolute;
top: 0; // top
left: 50%;
transform: translateX(-50%);
transition: all 0.2s ease 0s;
}
&:hover {
color: $g-brand-color;
&:before {
width: 100%;
}
}
&.js-checked {
color: $g-brand-color;
&:before {
width: 100%;
}
}
}
.filter__btn--style-2 {
transition: all 0.3s ease 0s;
display: block;
padding: 15px 27px;
margin: 0 8px 10px;
border:2px solid #f7f7f9;
font-size: 12px;
color: $g-text-color;
background-color: transparent;
&:hover {
border-color: $g-brand-color;
color: $g-brand-secondary-color;
}
&.js-checked {
border-color: $g-brand-color;
color: $g-brand-secondary-color;
}
}
.load-more {
text-align: center;
padding: 40px 0;
> button {
padding: 22px 56px;
border: none;
border-radius: 5px;
font-size: 13px;
}
}
// Top Sale in Week
.banner-bg {
padding: 7em 0;
position: relative;
background: #f5f5f5 url("../images/banners/banner-bg.jpg") repeat fixed center center;
//background: #f5f5f5 url("https://source.unsplash.com/random") no-repeat fixed center center;
background-size: cover;
&__wrap {
text-align: center;
}
&__text-block {
display: block;
}
// div span
&__text-1 {
font-weight: 600;
margin-bottom: 6px;
font-size: 58px;
}
// div span
&__text-2 {
font-weight: 600;
margin-bottom: 12px;
font-size: 31px;
}
// span
&__text-3 {
margin-bottom: 18px;
font-size: 14px;
}
&__shop-now {
display: inline-block;
padding: 14px 30px;
font-weight: 600;
border-radius: 40px;
font-size: 13px;
}
}
.promotion {
display: block;
position: relative;
&:before {
transition: all 0.3s linear;
content: '';
position: absolute;
z-index: 1;
top:0;
left:0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
}
&__content {
position: absolute;
width: 100%;
z-index: 2;
transform: translateY(-50%);
top: 50%;
text-align: center;
}
&__text-wrap {
display: inline-block;
background-color: rgba(255, 255, 255, 0.9);
padding: 30px 15px;
transition: all 0.5s ease-in-out;
}
&__text-1 {
font-size: 14px;
}
&__text-2 {
font-size: 20px;
font-weight: 600;
}
}
.promotion:hover {
&:before {
opacity: 1;
}
.promotion__text-wrap {
background-color: rgba(255, 255, 255, 1);
// padding: 40px 25px;
}
}
// Column Product
.column-product {
//border: 1px solid green;
&__title {
display: block;
font-size: 18px;
font-weight: 600;
}
&__list {
margin: 0;
padding: 0;
list-style: none;
}
&__item {
// border: 1px solid red;
margin-bottom: 30px;
}
&__item:last-child {
margin-bottom: 0;
}
}
// Service
.service {
display: flex;
background-color: $g-white;
padding: 23px;
box-shadow: 0 6px 15px 0 rgba(36,37,38,.08);
border: 2px solid #f5f5f5;
&__icon,&__info-wrap {
-ms-flex: 0 1 auto;// IE10+ fix
}
&__icon {
margin-right: 20px;
> i {
color: $g-brand-color;
font-size: 30px;
}
}
&__info-wrap {
// flex: 1;
}
&__info-text-1 {
display: block;
font-size: 14px;
margin-bottom: 4px;
color: $g-brand-secondary-color;
font-weight: 600;
}
&__info-text-2 {
font-size: 13px;
display: block;
color: $g-text-color;
}
}
// Brand Slider
.new-brand-slider {
position: relative;
}
#brand-slider {
position: static;
}
@media (max-width: 991px) {
.block {
display: block;// All flex properties will not work
}
.success {
&__img-wrap,&__info-wrap {
display: none;
}
}
}
================================================
FILE: scss/pages/_product-detail.scss
================================================
// -----------------------------------------------------------------------------
// This file contains styles that are specific to the product detail page.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$r}
--------------------------------------------------------------*/
// Breadcrumb
.pd-breadcrumb__list {
list-style: none;
padding: 0;
margin: 0;
word-wrap: break-word;
> li {
display: inline-block;
> a {
color: #a0a0a0;
font-size: 12px;
transition: color 0.5s;
&:hover {
color: $g-brand-secondary-color;
}
}
&.is-marked {
> a {
color: $g-brand-secondary-color;
font-weight: 700;
}
}
&.has-separator {
&:after {
content: '-';
margin: 0 6px;
}
}
}
}
// Product Detail Simple
.pd {
cursor: pointer;
}
.pd-wrap {
position: relative;
}
.pd-text {
position: absolute;
top:15px;
padding: 8px;
right: 15px;
font-size: 12px;
color: $g-brand-secondary-color;
}
// Product-Detail Social List
.pd-social-list {
margin:0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
> li {
margin-right: 16px;
&:last-child {
margin-right: 0;
}
> a {
font-size: rem(18);
transition: color 110ms ease-in-out;
color: $g-brand-secondary-color;
}
}
}
// Product Right Slide
.pd-detail__label {
display: block;
font-size: 14px;
font-weight: 700;
color: $g-brand-secondary-color;
}
// Span inline
.pd-detail__inline {
span {
margin-right: rem(6);
&:last-child {
margin-right: 0;
}
}
}
// div inline
.pd-detail-inline-2 {
display: flex;
flex-wrap: nowrap;
align-items: center;
div {
margin-right: 14px;
&:last-child {
margin-right: 0;
}
}
}
// Product Name
.pd-detail__name {
display: block;
color: $g-brand-secondary-color;
font-size: 16px;
font-weight: 600;
}
// Product Price, Discount, Del
.pd-detail__price {
color: $g-brand-color;
font-size: rem(32);
font-weight: 700;
}
.pd-detail__discount {
color: $g-brand-color;
font-size: 14px;
font-weight: 600;
transition: color 0.5s;
}
.pd-detail__del {
color: #a0a0a0;
font-size: 12px;
}
.pd-detail__rating {
display: block;
i {
font-size: 12px;
}
}
.pd-detail__review {
> a {
font-size: 12px;
transition: color 110ms ease-in-out;
color: $g-brand-secondary-color;
&:hover {
color: $g-brand-color;
text-decoration: underline;
}
}
}
.pd-detail__stock,.pd-detail__left {
font-size: 12px;
font-weight: 600;
padding: 8px;
display: inline-block;
border-radius: 30px;
}
.pd-detail__stock {
background-color: rgba(#009444,.14);
color: #009444;
}
.pd-detail__left {
background-color: rgba(#ff4500,.14);
color: #ff4500;
}
// Total 245 characters
.pd-detail__preview-desc {
font-size: 13px;
color: $g-text-color;
}
.pd-detail__click-wrap {
> a {
font-size: 13px;
color: #a0a0a0;
transition: color 110ms ease-in-out;
&:hover {
color: #b6b6b6;
text-decoration: underline;
}
}
}
.pd-detail__click-count {
font-size: 10px;
color: #a0a0a0;
}
// by default input-counter has fixed width and height
.pd-detail__form {
width: 100%;
.btn {
padding: rem(16) rem(48);
border-radius: rem(6);
}
}
/**
* Variations
*/
// Color
.pd-detail__color,.pd-detail__size {
display: flex;
flex-wrap: wrap;
}
// div
.color__radio {
position: relative;
line-height: 1.89;
margin-right: 36px;// Same as before and after width
display: inline-block;// Very Very Important property
}
.color__radio {
[type="radio"] {
position: absolute;
left: 0;
top: 0;
min-width: 30px;// Width of the default hidden radio
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
}
// label
.color__radio-label {
position: initial;// Which is by default static
display: inline-block;// Very Very Important property
}
.color__radio-label:before,.color__radio-label:after {
content: '';
width: 30px;
height: 30px;
display: block;
border: 2px solid transparent;
z-index: 0;
position: absolute;
left: 0;
top: 0;
}
.color__radio-label:after {
transform: scale(0.6);
background-color: inherit;// Important property
}
.color__radio input:checked + label:before {
border-color: #d2d2d2;
}
// Color End
// Size
// div
.size__radio {
position: relative;
margin: 0 12px 12px 0;
}
.size__radio {
[type="radio"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
}
.size__radio-label {
border: 1px solid rgba(0,0,0,0.08);
padding: 7px 15px;
background-color: $g-white;
font-size: 13px;
color: $g-brand-secondary-color;
cursor: pointer;
display: inline-block;
}
.size__radio input:checked + label {
border-color: $g-brand-secondary-color;
}
// ul policy
.pd-detail__policy-list {
margin: 0;
padding-left: 26px;
font-size: 14px;
list-style: none;
> li {
i {
color:#009444;
}
span {
color: $g-text-color;
}
}
}
// Tab
.pd-tab__list {
margin: 0;
border-bottom: 2px solid #e7e7e7;
> li {
margin-bottom: -2px;// For border
> a {
padding: 10px 0;
color: $g-brand-secondary-color;
font-size: 14px;
font-weight: 700;
border-bottom: 2px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
letter-spacing: .01rem;
transition: all .3s;
span {
margin-left: 2px;
font-size: 12px;
}
&.active {
color: $g-black;
border-color: $g-black;
}
}
+ li {
margin-left: 28px;
}
}
}
.pd-tab__desc,.pd-tab__tag {
max-width: 691px;
}
.pd-tab__desc {
p {
color: $g-brand-secondary-color;
font-size: 16px;
line-height: 2;
}
ul {
margin: 0;
padding-left: 16px;
list-style: none;
> li {
margin-bottom: 7px;
color: $g-brand-secondary-color;
font-size: 14px;
}
}
h4 {
color: $g-brand-secondary-color;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.pd-table {
overflow: auto;
table {
width: 100%;
border-radius: 2px;
border: 1px solid #eee;
border-collapse: collapse;
}
tbody {
tr {
border-bottom: 1px solid #eee;
}
td {
font-size: 14px;
color: $g-text-color;
padding: 12px;
}
td:first-child {
color: $g-brand-secondary-color;
font-weight: 600;
}
}
}
}
.pd-tab__tag {
h2 {
font-size: 16px;
font-weight: 700;
color: $g-brand-secondary-color;
line-height: 1.18;
}
form {
width: 100%;
.btn {
font-size: 13px;
font-weight: 600;
border: 0;
height: 48px;
padding: 17px 18px;
}
.input-text {
height: 48px;
margin-right: 8px;
width: 50%;
}
}
}
// Form
.pd-tab__rev-f1 {
width: 100%;
}
// Score Mark
.pd-tab__rev-score {
padding: 40px 0;
text-align: center;
background-color: #f6f6f6;
h2 {
font-size: 16px;
font-weight: 600;
line-height: 0.875;
color: $g-brand-secondary-color;
}
h4 {
font-size: 14px;
font-weight: 700;
line-height: 0.875;
color: $g-brand-secondary-color;
}
}
// Group
.rev-f1__group {
display: flex;
align-items: center;
justify-content: space-between;
h2 {
font-size: 16px;
font-weight: 700;
color: $g-brand-secondary-color;
line-height: 1.18;
}
.select-box {
border-radius: rem(6);
}
}
// Review Wrap
.rev-f1__review {
max-width: 691px;
}
.review-o {
padding: rem(16) 0;
border-bottom: 1px solid #f0f0f0;
}
.review-o__name {
font-size: 14px;
font-weight: 600;
color: $g-brand-secondary-color;
}
.review-o__date {
margin-left: 6px;
font-size: 11px;
font-weight: 600;
color: $g-text-color;
}
.review-o__rating {
span {
margin-left: 2px;
font-size: 11px;
font-weight: 600;
color: $g-text-color;
}
}
.review-o__text {
font-size: 13px;
color: $g-text-color;
}
// Form-2
.pd-tab__rev-f2 {
width: 100%;
h2 {
font-size: 32px;
color: $g-brand-secondary-color;
line-height: 0.90;
}
.input-text,.text-area {
width: 100%;
}
.text-area {
height: rem(250);
}
.btn {
font-weight: 600;
padding: 16px 46px;
}
}
.rev-f2__table-wrap {
overflow: auto;
}
.rev-f2__table {
width: 100%;
table-layout: fixed;
text-align: center;
border-collapse: collapse;
border: 1px solid #dee2e6;
th,td {
padding: 16px 4px;
border: 1px solid #d6d6d6;
}
th {
width: 120px;
color: $g-brand-secondary-color;
background-color: #f0f0f0;
font-size: 13px;
span {
margin-top: 2px;
display: block;
font-size: 11px;
color: $g-brand-secondary-color;
}
}
}
.rev-f2__group {
display: flex;
flex-wrap: nowrap;
div {
flex:1;
margin-right: 14px;
&:last-child {
margin-right: 0;
}
}
}
@media (max-width:991px) {
.pd-text {
display: none;
}
.zoomContainer {
display: none;
}
.rev-f2__group {
display: block;
div {
display: block;
margin-right: 0;
}
}
}
@media (max-width:575px) {
.pd-detail-inline-2 {
display: block;
div {
display: block;
margin-right: 0;
}
}
.rev-f1__group {
display: block;
}
}
================================================
FILE: scss/pages/_shop.scss
================================================
// -----------------------------------------------------------------------------
// This file contains styles that are specific to the shop pages.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$s}
--------------------------------------------------------------*/
// Widget Master
.shop-w-master {
&__heading {
font-size: 18px;
color: $g-brand-secondary-color;
font-weight: 700;
line-height: 20px;
}
}
.sidebar--bg-snow {
background-color: #f9f9f9;
}
.shop-w {
&--style {
border: 1px solid #f1f1f1;
background-color: $g-white;
box-shadow: 0 6px 15px 0 rgba(36, 37, 38, 0.08);
}
&__intro-wrap {
position: relative;
}
&__h {
font-size: 14px;
padding: 14px 18px;
border-bottom: 1px solid #efefef;
color: $g-brand-secondary-color;
font-weight: 700;
line-height: 20px;
}
&__wrap {
padding: 14px;
}
}
.shop-w__toggle.collapsed {
&:before {
content: "\F067";
}
}
.shop-w__toggle {
position: absolute;
top: 50%;
padding: 8px 12px;
background-color: transparent;
transform: translateY(-50%);
right: 10px;
font-size: 12px;
cursor: pointer;
color: #444;
}
// Shop widget Global Recursive List
.shop-w {
ul {
margin: 0;
padding-left: 0;
list-style: none;
}
}
// Shop widget Official List
.shop-w__list {
overflow: auto;
max-height: 290px;
> li {
position: relative;// Important property because of span (.shop-w__total-text)
padding: 8px 16px;
}
}
// Shop widget Official List with Hidden checkboxes
.shop-w__list-2 {
overflow: auto;
max-height: 290px;
> li {
padding: rem(4) 0;
position: relative;// Important property because of span (.shop-w__total-text)
}
}
.list__content {
position: relative;
[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
min-width: 16px;
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
span {
padding: 8px 16px;
display: block;
font-size: 14px;
transition: background-color 110ms ease-in-out,color 110ms ease-in-out;
color: $g-text-color;
}
}
.list__content:hover {
span {
color: $g-brand-secondary-color;
background-color: #ececec;
border-radius: .5rem;
}
}
.list__content input:checked + span {
background-color: #ececec;
color: $g-brand-secondary-color;
border-radius: .5rem;
}
.shop-w__total-text {
font-size: 11px;
position: absolute;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
color: $g-brand-secondary-color;
right: 13px;
}
// Category list
.shop-w__category-list {
overflow: auto;
max-height: 290px;
> li {
padding: 4px 14px;
> a {
font-size: 14px;
color: $g-brand-secondary-color;
transition: color 110ms ease-in-out;
&:hover {
color: $g-brand-color;
}
}
// Recursive only : Apply to only list item that has '.has-list' class
ul {
.has-list {
> a {
font-size: 13px;
font-weight: 700;
color: $g-brand-secondary-color;
}
}
}
ul {
display: none;
padding-left: 8px;
li {
// padding: 4px 0;
a {
font-size: 13px;
color: $g-text-color;
transition: color 110ms ease-in-out;
&:hover {
color: $g-brand-color;
}
}
}
}
}
}
.has-list {
position: relative;
}
.category-list__text {
font-size: 10px;
color: #a0a0a0;
}
.js-shop-category-span {
cursor: pointer;
font-size: 13px;
color: #444;
transition: color 110ms ease-in-out;
&:hover {
color: $g-black;
}
}
.js-shop-category-span.is-expanded {
&:before {
content: '\f068';
}
}
// Price
.shop-w__form-p-wrap {
display: flex;
flex-wrap: wrap;
padding: 8px 0;
div {
margin-right: 8px;
margin-bottom: 12px;
&:last-child {
margin-right: 0;
}
}
.input-text,.btn {
height: 40px;
padding: 8px;
border-radius: 2px;
}
.input-text {
width: 80px;
}
.btn {
width: 40px;
}
}
// Color Checkbox
// div
.color__check {
position: relative;
line-height: 1.89;
margin-right: 36px;// Same as before and after width
display: inline-block;// Very Very Important property
}
.color__check {
[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
min-width: 30px;// Width of the default hidden radio
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
}
// label
.color__check-label {
position: initial;// Which is by default static
display: inline-block;// Very Very Important property
}
.color__check-label:before,.color__check-label:after {
content: '';
width: 30px;
height: 30px;
display: block;
border: 2px solid transparent;
z-index: 0;
position: absolute;
left: 0;
top: 0;
}
.color__check-label:after {
transform: scale(0.6);
background-color: inherit;// Important property
}
.color__check input:checked + label:before {
border-color: #d2d2d2;
}
// Color End
// Div Rating Radio
.rating__check {
position: relative;
cursor: pointer;
[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
min-width: 16px;// Width of the default hidden radio
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
}
// div with 'i' icons
.rating__check-star-wrap {
> i {
margin-left: 2px;
color: #ff4500;
transition: color .4s ease-in-out;
&:first-child {
margin-left: 0;
}
}
span {
font-size: 12px;
color: $g-brand-secondary-color;
margin-right: 2px;
}
}
.rating__check:hover {
.rating__check-star-wrap {
> i {
color: #ff9600;
}
}
}
// Checked
.rating__check input:checked {
+ .rating__check-star-wrap {
> i {
color: #ff9600;
}
}
}
// Shop Option
.shop-p__meta-wrap {
box-shadow: 0 8px 16px rgba(0,0,0,.15);
padding: 20px;
border-radius: rem(10);
}
.shop-p__meta-text-1 {
display: block;
font-size: 14px;
margin-bottom: 6px;
font-weight: 700;
color: $g-brand-secondary-color;
}
//div
.shop-p__meta-text-2 {
font-size: 14px;
font-weight: 700;
color: $g-text-color;
}
.shop-p__tool-style {
display: flex;
align-items: center;
justify-content: space-between;
}
.tool-style__group {
display: flex;
flex-wrap: wrap;// Multi-line
span {
position: relative;
display: inline-block;
height: 40px;
cursor: pointer;
border: 2px solid #e5e5e5;
font-size: 13px;
padding: 8px 18px;
font-weight: 700;
color: $g-brand-secondary-color;
&:hover {
background-color: rgba($g-brand-color,.12);
color: $g-brand-color;
border-color: $g-brand-color;
z-index: 2;
}
}
// Apply only on those spans which are not last-child
span:not(:last-child) {
margin-right: -2px;
}
span.is-active {
background-color: rgba($g-brand-color,.12);
color: $g-brand-color;
border-color: $g-brand-color;
z-index: 2;
}
}
.tool-style__form-wrap {
display: flex;
align-items: center;
div + div {
margin-left: 15px;
}
select {
border-radius: .25rem;
}
}
// Product Grid Styles
.is-grid-active {
.product-m {
position: relative; // For hover div
margin-bottom: 30px;
transition: 0.3s;
//
&__thumb {
position: relative; // For Cart Button/ Quick Look
}
// Add Cart
&__add-cart {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
> a {
padding: 12px;
border-radius: rem(2);
font-size: 13px;
width: 100%;
text-align: center;
display: block;
}
}
&__quick-look {
position: absolute;
top: 8px;
right: 22px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
> a {
font-size: 16px;
color: $g-brand-color;
transition: color 110ms ease-in-out;
&:hover {
color: #a0a0a0;
}
}
}
&__content {
padding: 4px 16px 6px;
}
&__category {
margin-bottom: 2px;
line-height: 1.2;
> a {
color: #a0a0a0;
transition: color 0.5s;
font-size: 12px;
&:hover {
color: $g-brand-color;
}
}
}
&__name {
> a {
color: $g-brand-secondary-color;
font-size: 14px;
font-weight: 600;
transition: color 0.5s;
&:hover {
color: $g-brand-color;
}
}
}
&__price {
line-height: 1.2;
color: $g-brand-secondary-color;
font-size: 14px;
font-weight: 600;
}
&__discount {
font-weight: 600;
margin-left: 30px;
color: $g-brand-color;
font-size: 14px;
text-decoration: line-through;
}
&__rating {
margin-bottom: 6px;
i {
font-size: 12px;
}
}
&__review {
margin-left: 4px;
font-size: 11px;
color: #a0a0a0;
}
&__hover {
position: absolute;
top: 96%;
width: 100%;
z-index: 9;
padding: 4px 16px 14px;
left: 0;
background: $g-white;
box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.2); // x-offset y-offset blur spread
transition: all 300ms ease-in-out;
opacity: 0;
visibility: hidden;
}
// Span inline
&__wishlist {
text-align: right;
a {
font-size: 16px;
color: #a0a0a0;
transition: color 110ms ease-in-out;
&:hover {
color: $g-brand-color;
}
}
}
&__preview-description {
margin-bottom: 8px;
font-size: 12px;
color: $g-text-color;
}
}
}
.is-grid-active {
.product-m:hover {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
.product-m__add-cart {
opacity: 1;
visibility: visible;
}
.product-m__quick-look {
opacity: 1;
visibility: visible;
}
.product-m__hover {
top: 99%;
opacity: 1;
visibility: visible;
}
}
}
// Product List Styles
// default has flex
.is-list-active {
display: block;
[class*="col-"] {
// default has position relative property
display: block;// default has flex with hard coded max-width
max-width: 100%;
width: 100%;
}
}
.is-list-active {
.product-m {
padding: 15px 0;
transition: 0.3s;
display: flex;
flex-wrap: wrap;
&__thumb {
position: relative; // For Cart /Quick Look Button
flex: 0 0 33.33333%;// col-4
max-width: 33.33333%;// col-4
padding-right: 15px;
padding-left: 15px;
}
// Add Cart
&__add-cart {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
> a {
padding: 12px;
border-radius: rem(2);
font-size: 13px;
width: 100%;
text-align: center;
display: block;
}
}
&__quick-look {
position: absolute;
top: 8px;
right: 22px;
opacity: 0;
visibility: hidden;
transition: 0.3s;
> a {
font-size: 16px;
color: $g-brand-color;
transition: color 110ms ease-in-out;
&:hover {
color:darken($g-brand-color,1%);
}
}
}
&__content {
position: relative;// For add to wishlist
flex: 0 0 66.66667%;// col-8
max-width: 66.66667%;// col-8
padding-right: 15px;
padding-left: 15px;
}
&__category {
margin-bottom: 2px;
line-height: 1.2;
> a {
color: #a0a0a0;
transition: color 0.5s;
font-size: 12px;
&:hover {
color: $g-brand-color;
}
}
}
&__name {
> a {
color: $g-brand-secondary-color;
font-size: 14px;
font-weight: 600;
transition: color 0.5s;
&:hover {
color: $g-brand-color;
}
}
}
&__price {
margin-bottom: 8px;
line-height: 1.2;
color: $g-brand-secondary-color;
font-size: 14px;
font-weight: 600;
}
&__discount {
font-weight: 600;
margin-left: 30px;
color: $g-brand-color;
font-size: 14px;
text-decoration: line-through;
}
&__rating {
margin-bottom: 6px;
i {
font-size: 12px;
}
}
&__review {
margin-left: 4px;
font-size: 11px;
color: #a0a0a0;
}
&__preview-description {
font-size: 12px;
color: $g-text-color;
}
// Span inline
&__wishlist {
position: absolute;
right: 12px;
bottom:13px;
a {
font-size: 16px;
color: #a0a0a0;
transition: color 110ms ease-in-out;
&:hover {
color: $g-brand-color;
}
}
}
}
}
.is-list-active {
.product-m:hover {
background: $g-white;
border-radius: rem(3);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
.product-m__add-cart {
opacity: 1;
visibility: visible;
}
.product-m__quick-look {
opacity: 1;
visibility: visible;
}
}
}
// Shop Pagination
.shop-p__pagination {
margin: 0;
padding: 0;
list-style: none;
justify-content: center;
display: flex;
align-items: center;
> li {
margin-right: 14px;
&:last-child {
margin-right: 0;
}
> a {
width: 42px;
text-align: center;
height: 42px;
line-height: 42px;
font-size: 12px;
display: block;
// border: 1px solid #;
font-weight: 600;
border-radius: 50%;
background-color: transparent;
color: $g-brand-secondary-color;
}
}
> li.is-active {
> a {
background-color: #f7f7f7;
}
}
> li:not(.is-active) {
> a:hover {
color: $g-brand-color;
text-decoration: underline;
}
}
}
// Shop Side Filters and overlay
.shop-a {
&__wrap {
position: fixed;
top: 0;
width: 350px;
min-height: 100vh;
bottom: 0;
z-index: 9999;
right: 0;
transition: all 400ms ease-out;
transform: translate(200px, 0);
box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.09);
background-color: $g-white;
visibility: hidden;
opacity: 0;
}
&__inner {
overflow: auto;
height: 100%;
padding: rem(20) rem(18);
}
}
.shop-a.is-open {
.shop-a__wrap {
transform: translate(0, 0);
visibility: visible;
opacity: 1;
}
}
@media(max-width:575px) {
.is-list-active {
.product-m {
&__thumb {
margin-bottom: 30px;
flex: 0 0 100%;
max-width: 100%;
}
&__content {
flex: 0 0 100%;
max-width: 100%;
}
// Span inline
&__wishlist {
position: static;
text-align: right;
}
}
}
.shop-p__tool-style {
display: block;
}
.tool-style__form-wrap {
display: block;
div + div {
margin-left: 0;
}
}
}
================================================
FILE: scss/pages/_sign-in-up-lost.scss
================================================
// -----------------------------------------------------------------------------
// This file contains styles that are specific to the sign-in-up page.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$n}
--------------------------------------------------------------*/
// Sign-up
.l-f-o {
border: 1px solid #eee;
&__pad-box {
padding: 20px;
}
// Apply to these components
&__form {
width: 100%;
}
.input-text,.btn,.select-box {
border-radius: 6px;
}
.input-text {
width: 100%;
}
.btn {
font-weight: 600;
padding: 12px 18px;// Noted
}
&__create-link {
font-size: 13px;
text-align: center;
padding: 12px;
display: block;
font-weight: 600;
border-radius: 6px;
}
}
================================================
FILE: scss/utility.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all CSS utility classes for spacing.
// -----------------------------------------------------------------------------
@import 'abstracts/mixins';
/**
* Utility classes for spacing:
* A wide range of shorthand margin and padding utility classes to modify an
* an element appearance.
* Prefix understanding: u means utility which is a prefix for root namespace,
* s means spacing which is a prefix for sub namespace, m means margin,
* p means padding. e.g. `u-s-m-t-22` means apply top margin 22 pixels that by default converted to rem unit.
*/
@include utility-margin-padding($g-attribute, $g-sides);
================================================
FILE: scss/vendors-extensions/_all.scss
================================================
// -----------------------------------------------------------------------------
// `all.scss` is just typical import file that contains all code base of
// the directory.
// -----------------------------------------------------------------------------
/*--------------------------------------------------------------
#{$t}
--------------------------------------------------------------*/
/*--------------------------------------------------------------
#{$t-1}
--------------------------------------------------------------*/
@import 'bootstrap';
/*--------------------------------------------------------------
#{$t-2}
--------------------------------------------------------------*/
@import 'jquery.shopNav/dropdown';
@import 'jquery.shopNav/extensions/mega';
@import 'jquery.shopNav/extensions/mini-cart';
/*--------------------------------------------------------------
#{$t-3}
--------------------------------------------------------------*/
@import 'owl-carousel';
/*--------------------------------------------------------------
#{$t-4}
--------------------------------------------------------------*/
@import 'jquery.scrollup';
/*--------------------------------------------------------------
#{$t-5}
--------------------------------------------------------------*/
@import 'slick';
================================================
FILE: scss/vendors-extensions/_bootstrap.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all Bootstrap override styles.
// -----------------------------------------------------------------------------
/* Modal styles */
.modal {
z-index: 999999;
}
// Every Modal has custom width
.modal-content {
display: block !important;
border: none;
border-radius: 0;
}
.modal--radius {
border-radius: 8px;
}
.modal--shadow {
box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
/* Tootip styles */
.tooltip {
font-family: $g-text-font-stack;
// font-weight: 400; Regular
// Default font-size is 14px
font-size: 12px;
font-weight: 600;
}
.tooltip.show {
opacity: 1;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #f5f5f5;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: #f5f5f5;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: #f5f5f5;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: #f5f5f5;
}
.tooltip-inner {
color: $g-brand-secondary-color;
background-color: #f5f5f5;
border-radius: 2px;
}
@media (max-width:991px) {
.tooltip.show {
opacity: 0;
}
}
================================================
FILE: scss/vendors-extensions/_jquery.scrollup.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all JqueryScrollUp override styles.
// -----------------------------------------------------------------------------
/* ScrollUp Custom */
#topScroll {
right: 24px;
bottom: 60px;
width: 50px;
height: 50px;
line-height: 50px;
box-shadow: 2px 2px 4px 4px rgba(36, 37, 38, 0.08);
background-color: $g-white;
color: $g-brand-secondary-color;
font-size: 18px;
text-align: center;
}
================================================
FILE: scss/vendors-extensions/_owl-carousel.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all owl-carousel override styles.
// -----------------------------------------------------------------------------
.slider-fouc {
display: none;
}
.s-skeleton {
position: relative;
&--h-600 {
min-height: 600px;
}
&--h-640 {
min-height: 640px;
}
&--bg-grey {
background-color: $g-card-bg-color;
}
&--bg-black {
background-color: $g-black;
}
.owl-carousel {
position: static;// All dots or prev/next now relative to s-skeleton
}
}
// Slider 1
.primary-style-1 {
.hero-slide {
height: 600px;
display: flex;
align-items: center; // Vertical Center slider-content
//justify-content: center; // Horizontal center
}
}
// Slider 2
.primary-style-2 {
.hero-slide {
height: 600px;
display: flex;
align-items: center; // Vertical Center slider-content
}
}
// Slider 3
.primary-style-3 {
.hero-slide {
height: 640px;
}
}
.primary-style-3-wrap {
position: absolute;
bottom: 120px;
z-index: 1;
width: 100%;
}
// Global
.hero-slide {
// These below styles apply to all sliders
background: center center/cover no-repeat;// position size repeat
&--1 {
background-image: url('../images/slider/slide-1.jpg');
}
&--2 {
background-image: url('../images/slider/slide-2.jpg');
}
&--3 {
background-image: url('../images/slider/slide-3.jpg');
}
&--4 {
background-image: url('../images/slider/slide-4.jpg');
}
&--5 {
background-image: url('../images/slider/slide-5.jpg');
}
&--6 {
background-image: url('../images/slider/slide-6.jpg');
}
&--7 {
background-image: url('../images/slider/slide-7.jpg');
}
&--8 {
background-image: url('../images/slider/slide-8.jpg');
}
&--9 {
background-image: url('../images/slider/slide-9.jpg');
}
}
// Owl-dots global
.owl-carousel {
.owl-dots {
position: absolute;
}
// button
button.owl-dot {
&:focus {
outline:0;
}
}
}
// Owl-dots
.owl-carousel.primary-style-1 {
.owl-dots {
top: 50%;
transform: translateY(-50%);
right:40px;
}
// button
button.owl-dot {
width:14px;
height:14px;
border-radius: 50%;
display:block;
margin-bottom:6px;
background: #e1e1e1;
transition: background 0.8s ease-out;
&:last-child {
margin-bottom:0;
}
&.active,&:hover {
background: transparent linear-gradient(-180deg, $g-brand-color 0%, lighten($g-brand-color,10%) 100%);
}
}
}
// Owl-dots
.owl-carousel.primary-style-2 {
.owl-dots {
width:100%;
text-align:center;
bottom:20px;
}
// button
button.owl-dot {
width:11px;
height:11px;
display:inline-block;
margin-right:4px;
border-radius:50%;
background-color: #7f7f7f;
transition: background 0.8s ease-out;
&:last-child {
margin-right:0;
}
&.active,&:hover {
background-color: $g-white;
}
}
}
.primary-style-2-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.primary-style-2-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.primary-style-2-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.primary-style-2-container {
max-width: 960px;
}
}
// Owl-dots
.owl-carousel.primary-style-3 {
.owl-dots {
top: 50%;
transform: translateY(-50%);
right:40px;
}
// button
button.owl-dot {
width: 5px;
height: 32px;
display:block;
margin-bottom:6px;
background-color: #f3f3f3;
transition: background 0.8s ease-out;
&:last-child {
margin-bottom:0;
}
&.active,&:hover {
background-color: $g-brand-color;
}
}
}
.owl-carousel#testimonial-slider {
.owl-dots {
width:100%;
text-align:center;
bottom:-30px;
}
button.owl-dot {
width:11px;
height:11px;
display:inline-block;
border: 1px solid $g-brand-secondary-color;
margin-right:4px;
border-radius:50%;
background-color: transparent;
transition: background 0.8s ease-out;
&:last-child {
margin-right:0;
}
&.active,&:hover {
background-color: $g-brand-secondary-color;
}
}
}
.content-span-1 {
font-size: rem(20); // line-height golden ration 20 * 1.5 = 30
font-weight: 700;
display: block; // Animation only apply on block elements
}
.content-span-2 {
font-weight: 700;
font-size: rem(52); // line-height golden ration 52 * 1.5 = 78
display: block;
}
.content-span-3 {
display: block;
font-size: rem(14); // 14 * 1.5 = 21
margin-bottom: 8px;
}
.content-span-4 {
display: block;
font-weight: 600;
font-size: rem(14);
margin-bottom: 20px;
span {
font-weight: 700;
margin-left: 4px;
font-size: rem(22);
}
}
.shop-now-link {
padding: 18px 53px;
font-size: rem(12);
position: relative;
transition: background 0.3s;
text-align: center;
border-radius: 6px;
display: inline-block;
}
// Animation styles
.owl-item {
.slider-content--animation * {
animation-duration: 1s;
animation-fill-mode: both;
}
&.active {
.content-span-1 {
animation-delay: 0.5s;
animation-name: fadeInLeft;
}
.content-span-2 {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.content-span-3 {
animation-delay: 1.5s;
animation-name: fadeInLeft;
}
.content-span-4 {
animation-delay: 1.5s;
animation-name: fadeInLeft;
}
.shop-now-link {
animation-delay: 2s;
animation-name: fadeInLeft;
}
}
}
// Product Slider
.product-slider,.tab-slider {
position: static;
.owl-item:hover {
z-index: 2;
}
}
/* Products-Slider (Previous & Next Buttons) */
.section__content:hover {
.p-prev,.t-prev,.p-next,.t-next {
opacity: 1;
}
}
// Half Circle 72/2 = 36
// Global
.p-prev,.p-next {
text-align: center;
box-shadow: 0 6px 15px 5px rgba(36, 37, 38, 0.08);
z-index: 1;
cursor: pointer;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
height: 72px;
line-height: 72px;
width: 36px;
background-color: $g-white;
margin: auto 0;
transition: opacity .6s ease-in,background-color .6s ease-in;
opacity: 0;
> i {
font-size: 14px;
color: $g-brand-secondary-color;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
.p-prev {
left: 0;
border-bottom-right-radius: 90px;
border-top-right-radius: 90px;
> i {
left: 6px;
}
}
.p-next {
right: 0;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
> i {
right: 6px;
}
}
// Tab Slider
.t-prev,.t-next {
text-align: center;
z-index: 1;
display: inline-block;
box-shadow: 0 6px 15px 5px rgba(36, 37, 38, 0.08);
background-color: $g-white;
position: absolute; // Makes relative
top: 0;
bottom: 0;
cursor: pointer;
height: 36px;
line-height: 36px;
width: 36px;
margin: auto 0;
transition: opacity .6s ease-in;
opacity: 0;
> i {
font-size: 14px;
color: $g-brand-secondary-color;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
.t-prev {
left: 0;
border-bottom-right-radius: 90px;
border-top-right-radius: 90px;
> i {
left: 10px;
}
}
.t-next {
right: 0;
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
> i {
right: 10px;
}
}
// Brand Slider
#brand-slider {
.owl-stage {
margin: rem(20) 0;
}
}
// div
.brand-slide {
width: 155px;
height: 60px;
margin: 0 auto;
a {
display: block;
background-color: $g-white;
transition: all .3s;
&:hover {
box-shadow: 2px 3px 8px 0 rgba(0,0,0,0.2);
}
}
}
.b-prev,.b-next {
text-align: center;
z-index: 1;
display: inline-block;
position: absolute; // Makes relative to container
top: 0;
cursor: pointer;
bottom: 0;
height: 36px;
line-height: 36px;
width: 36px;
box-shadow: 0 6px 15px 5px rgba(36, 37, 38, 0.08);
background-color: $g-white;
margin: auto 0;
transition: opacity .6s ease-in;
opacity: 0;
> i {
font-size: 14px;
color: $g-brand-secondary-color;
}
}
.b-prev {
left: 0;
}
.b-next {
right: 0;
}
/* Brand-Slider (Previous & Next Buttons) */
.section__content:hover {
.b-prev,.b-next {
opacity: 1;
}
}
================================================
FILE: scss/vendors-extensions/_slick.scss
================================================
// -----------------------------------------------------------------------------
// This file contains all slick override styles.
// -----------------------------------------------------------------------------
.slick-slide, .slick-slide * {
outline: none;
}
#pd-o-thumbnail {
.slick-slide:not(.slick-current) {
opacity: .4;
}
}
#js-product-detail-modal-thumbnail {
.slick-slide:not(.slick-current) {
opacity: .4;
}
}
// Product-Detail thumbnail slider
.pt-prev,.pt-next {
text-align: center;
z-index: 1;
display: inline-block;
position: absolute; // Makes relative to container
top: 0;
cursor: pointer;
bottom: 0;
border-radius: 50%;
height: 36px;
line-height: 36px;
width: 36px;
margin: auto 0;
transition: opacity ease-in-out .5s, background-color ease-in 0.3s;
background-color: $g-white;
opacity: 0;
i {
font-size: 12px;
color: $g-black;
}
}
.pt-prev {
left:20px;
}
.pt-next {
right: 20px;
}
#pd-o-thumbnail:hover {
.pt-prev,.pt-next {
opacity: .8;
}
}
#js-product-detail-modal-thumbnail:hover {
.pt-prev,.pt-next {
opacity: .8;
}
}
================================================
FILE: scss/vendors-extensions/jquery.shopNav/_dropdown.scss
================================================
// Recursive
.ah-list {
margin: 0;
padding: 0;
li {
list-style: none;
}
// Recursive
ul {
margin: 0;
padding: 0;
}
}
// Design Default Template 1 .ah-list--design1 > li > a
.ah-list--design1 {
> li {
display: inline-block;
> a {
display: inline-block;
font-size: 16px;// icon
padding: 28px 18px; // padding top bottom height 80/2 =40 / 2 = 20 so + 4 = 24
}
}
}
// For Index 1
.ah-list--link-color-secondary {
> li {
> a {
color:$g-brand-secondary-color;
}
}
}
// For Index 2 / Index 3, but on tablet devices it would become secondary color
.ah-list--link-color-white {
> li {
> a {
color: $g-white;
}
}
}
// Custom Design Default Template 2 .ah-list--design1 > li > a
.ah-list--design2 {
> li {
display: inline-block;
> a {
font-weight: 700;
font-size: 12px;
display: inline-block;
padding: 31px 14px;
}
}
}
// Level 1 , 2 and so on recursive
.has-dropdown > ul .has-dropdown {
position: relative;
}
// Level 0
.has-dropdown > ul {
background-color: $g-white;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.13);
position: absolute;
text-align: left;
padding: 20px 0 20px; // only top bottom
z-index: 999;
white-space: nowrap;
transition: all 0.3s ease;
top:120%; // increment increase distance from item (means bottom)
opacity: 0;
visibility: hidden;
> li {
> a {
display: block;
padding: 8px 20px;
color: $g-brand-secondary-color;
font-size: 12px;
font-weight: 600;
}
}
}
// This class should apply on list item with class has-dropdown
// Modifier 1: For Left Side
.has-dropdown--ul-left-100 > ul {
left: 100%;
}
// Modifier 2: For Right Side
.has-dropdown--ul-right-100 > ul {
right: 100%;
}
// Global Styles end
// Less than
@media (max-width: $g-mobileBreakpoint * 1px) {
// Recursive style
.menu-init {
// Remove all angle downs on mobile menu
.fa-angle-down {
&:before {
content: none;
}
}
}
.menu-init.js-open {
.ah-lg-mode {
left:0;
transition: all .4s ease-in-out;
}
&:after {
content: "";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
background-color: rgba(0,0,0,.7);
z-index: 19999;
}
}
.ah-lg-mode {
position: fixed; // Relative to the .container
left: -315px;// iphone 5 has total width 320px
width: 315px;
height: 100%;
top: 0;
background-color: $g-white;
z-index: 20000;
overflow-y: auto;
}
.ah-close {
color: $g-brand-secondary-color;
padding: 20px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: block;
}
// For Dropdown
.ah-list {
> li {
position: relative;
display: block;
// padding:0;
border-top: 1px solid $g-border-color;
> a {
display: block;
padding:8px 18px;
}
}
> li:last-child {
border-bottom: 1px solid $g-border-color;
}
// Default
&--design1,&--design2 {
> li {
> a {
font-weight: normal;
font-size: 14px;
}
}
}
}
.ah-list--link-color-white {
> li {
> a {
color: $g-brand-secondary-color;
}
}
}
.js-menu-toggle {
width: 21px;
display: block;
height: 21px;
border-radius: 50%;
background-color: $g-white;
box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.13);
position: absolute;// position relative to list item
right: 15px;
top:6px;// same as top-bottom padding of link
transition: all .3s;
cursor: pointer;
&:after {
font-family: 'Font Awesome 5 Free';
content: "\F067";
position: absolute;// position relative to span
top: 50%;
width: 100%;
font-weight: 900;
color: $g-brand-secondary-color;
display: block;
transform: translateY(-50%);
text-align: center;
font-size: 8px;
}
&.js-toggle-mark {
&:after {
content: "\F068";
}
}
}
// Dropdown style Level 0
.has-dropdown > ul {
width: 100% !important;
box-shadow: none;
transition: none;
position: static;
padding: 0 0 10px;
opacity: 1;
visibility: visible;
// through jquery
display: none;// This property is very important helps to remove transition flash of dropdown when window
// is resize
> li {
padding: 0;
> a {
display: block;
}
}
}
// Hard coded settings for level0 mobile language , currency
// Level 0
.ah-list > li > ul > li > a {
padding: 8px 36px;// 18*2 = 36px
}
.ah-list > li > ul > li > ul > li > a {
padding: 8px 54px;//18 * 3 = 54
}
// Level 2
.ah-list > li > ul > li > ul > li > ul > li > a {
padding: 8px 72px;//18 * 4 = 72
}
}
// Greater than
@media (min-width: ($g-mobileBreakpoint + 1) * 1px) {
.toggle-button {
display: none;
}
.ah-close {
display: none;
}
// Hover effect for level 0 list
.ah-list {
> li {
> a:hover {
color: $g-brand-color;
}
}
}
// Hover only works on desktop mode
// Level 0
.has-dropdown > ul {
> li:hover {
background-color: #fbfbfb;
}
}
.has-dropdown:hover > ul {
opacity: 1;
visibility: visible;
}
// Level 0
.ah-list > .has-dropdown:hover > ul {
top: 100%; // increment increase distance from item (means bottom)
}
// after Level 0, apply on all nested dropdowns
.has-dropdown .has-dropdown:hover > ul {
top: 0;
}
// Apply only to first list items which has drop down
.ah-list {
// li
> .has-dropdown:hover > a {
color: $g-brand-color;
}
}
// Icon settings
.has-dropdown {
> a {
// It is place inside anchor element. By default computed line-height of anchor is 18px
.fa-angle-down {
// So anchor has line-height 18px for vertical center we also need to set the icon line-height 18px
font-size: 10px;
line-height: 18px;
float: right;
}
}
&:hover {
> a {
// Right
.i-state-right:before {
content: "\F105";
}
}
}
}
}
================================================
FILE: scss/vendors-extensions/jquery.shopNav/extensions/_mega.scss
================================================
/* Extension Mega Menu */
// Global Styles
.mega-text {
width: 34px;
height: 34px;
display: inline-block;
user-select: none;
background-color: $g-brand-color;
font-size: 12px;
font-weight: 600;
line-height: 34px;
text-align: center;
cursor: pointer;
color: $g-white;
}
.mega-menu-list {
> ul {
> li {
> a {
display: block;
padding: 10px 22px;
color: $g-black;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
}
&.js-active {
background: linear-gradient(225deg, $g-brand-color,$g-brand-color);
> a {
color: $g-white;
}
}
}
}
}
.mega-menu-content {
display: none;// Add class js-active through jQuery
}
.mega-menu-content.js-active {
display: block;
}
.mega-menu-content {
[class*="col-"] {
> ul {
> li {
> a {
padding: 4px 0;
display: block;
color: $g-brand-secondary-color;
font-size: 13px;
transition: color 0.5s;
&:hover {
color: darken($g-brand-color, 1%);
}
}
}
}
> ul {
> .mega-list-title {
> a {
font-weight: 700;
}
}
}
}
}
.mega-menu-content {
> h5 {
font-weight: 600;
margin: 6px 0 0;
font-size: 12px;
color: $g-black;
}
}
// Less than
@media (max-width: $g-mobileBreakpoint * 1px) {
// Same styles that we created for portrait mode
.toggle-mega-text {
width: 34px;
display: inline-block;
height: 34px;
user-select: none;
background-color: $g-brand-color;
font-size: 12px;
font-weight: 600;
line-height: 34px;
text-align: center;
cursor: pointer;
color: $g-white;
}
// Through jQuery display:block is added
.mega-menu {
display: none;
}
// by default .mega-menu-wrap in portrait mode doesn't have any properties and display:block
// behavior will apply
.mega-menu-list {
padding: 20px;
border: 1px solid #f6f6f6;
> ul {
> li {
position: relative;// Relative for just span toggle
}
}
}
.mega-menu-content {
padding:20px;
}
.mega-menu-content {
.row {
display: block;
}
[class*="col-"] {
margin-bottom: 15px; // margin bottom
max-width: 100%; // Apply to all columns
}
}
.mega-image {
display:none;
}
}
// Desktop Styles Greater than
@media (min-width: ($g-mobileBreakpoint + 1) * 1px) {
.js-open.mega-text {
animation: mypulse 1s;
}
.js-open.mega-text ~ .mega-menu {
display: block;
}
.mega-menu {
display: none;
padding: 30px;
width: 100%; // Because There are some categories which has no sub categories
background-color: $g-white;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.13);
position: absolute;
z-index: 998;
top: 100%;
}
.mega-menu-wrap {
display: flex;
flex-wrap: nowrap;
}
.mega-menu-list {
flex: 0 0 20%;
max-width: 20%;
}
.mega-menu-content {
flex: 0 0 80%;
max-width: 80%;
overflow-y:auto;
padding: 0 17px;
height: 370px;
transition: opacity 0.5s;
display: none;
// Added through jQuery when hover, opacity: 0;
// Width
&::-webkit-scrollbar {
width: 8px;
}
// Track
&::-webkit-scrollbar-track {
background: #eee;
}
// Handle
&::-webkit-scrollbar-thumb {
background: #888;
}
// Handle on hover
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
}
// Mega-Banner Hover effect
.mega-banner {
position: relative;
overflow: hidden;
img {
transform: scale(1);
transition: all 0.6s ease-in-out;
}
&:hover {
img {
transform: scale(1.1);
}
}
}
.mega-image {
margin: auto 0;
}
}
================================================
FILE: scss/vendors-extensions/jquery.shopNav/extensions/_mini-cart.scss
================================================
/* Extension Mini Cart */
.mini-cart-shop-link {
position: relative;
> .total-item-round {
top: 16px;
left: 32px;
}
}
.total-item-round {
width: 24px;
position: absolute;
height: 24px;
line-height: 24px;
border-radius: 50%;
text-align: center;
font-size: 11px;
background-color: $g-brand-color;
color: $g-white;
}
.mini-cart {
//background-color: #f3f3f3;
background-color: $g-white;
box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.06);
width: 478px;
padding: 14px;
position: absolute;
transition: all 0.3s ease;
// border-radius: 5px;
z-index: 998;
top: 120%; // increment increase distance from item (means bottom)
opacity: 0;
right: 0;
visibility: hidden;
}
.mini-product-container {
// place only 2 products on slot (height of 1 product is 112) so 112 + 112 + (margin-bottom of 1:22) + (padding-top:17) + (padding-top:17)
// 112 + 112 + 22 + 17 + 17 = 280px
max-height: 280px;
padding: 17px;
overflow-y: auto;
}
.card-mini-product {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
background-color: $g-white;
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 15px;
margin-bottom: 22px;
&:last-child {
margin-bottom: 0;
}
}
.mini-product {
display: flex;
align-items: center;
&__image-wrapper {
margin-right: 20px;
}
&__link {
background-color: $g-card-bg-color;
display: inline-block;
vertical-align: middle;
width: 80px;
height: 80px;
img {
display: block;
min-width: 80px;
}
}
&__category {
display: block;
> a {
color: #a0a0a0;
transition: color 0.5s;
font-size: 12px;
&:hover {
color:$g-brand-color;
}
}
}
&__name {
display: block;
> a {
color: $g-brand-secondary-color;
font-size: 14px;
font-weight: 600;
transition: color 0.5s;
&:hover {
color:$g-brand-color;
}
}
}
&__quantity {
font-size: 12px;
margin-right: 4px;
color: $g-brand-secondary-color;
}
&__price {
font-size: 14px;
font-weight: 600;
color: $g-brand-secondary-color;
}
&__delete-link {
padding: 10px;
font-size: 16px;
display: inline-block;
color: $g-brand-secondary-color;
transition: color 0.5s;
&:hover {
color: $g-brand-color;
}
}
}
.mini-total {
margin-bottom: 16px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.subtotal-text {
display: block;
font-size: 14px;
font-weight: 600;
color: $g-brand-secondary-color;
}
.subtotal-value {
display: block;
font-size: 14px;
font-weight: 700;
color: $g-brand-secondary-color;
}
.mini-link {
display: block;
text-align: center;
padding: 12px 42px;
border-radius: 6px;
margin-bottom: 20px;
font-weight: 700;
font-size: 10px;
}
.mini-action {
width: 65%;
margin: 0 auto;
}
// Less than Large devices (desktops, 992px and up)
@media (max-width: $g-mobileBreakpoint * 1px) {
.mini-cart-shop-link {
> .total-item-round {
top: 5px;
left:38px;
}
}
.toggle-button-shop {
+ .total-item-round {
top: 5px;
right: 10px;
}
}
// Dropdown style Level 0
.has-dropdown > .mini-cart {
width: 100% !important;
box-shadow:none;
// border-radius: 0;
transition: none;
padding: 14px;
position: static;
opacity: 1;
visibility: visible;
// through jquery
display: none;// This property is very important helps to remove transition flash of dropdown when window
// is resize
}
.mini-product-container {
// Height calculated with product name which has long text
// place only 2 products on slot (height of 1 product is 390) so 390 + 390 + (margin-bottom of 1:22) + (padding-top:17) + (padding-top:17)
// 390 + 390 + 22 + 17 + 17 = 836
max-height: 836px;
}
.card-mini-product {
display: block;// Flex would be remove
text-align: center;
}
.mini-product {
display: block;
&__image-wrapper {
margin-right: 0;
margin-bottom: 10px;
}
&__info-wrapper {
padding: 0;
display: block;
margin-bottom: 10px;
}
}
.mini-total {
margin-bottom: 22px;
}
}
// Greater than important 992
@media (min-width: ($g-mobileBreakpoint + 1) * 1px) {
.toggle-button-shop {
+ .total-item-round {
display: none;
}
}
.has-dropdown:hover > .mini-cart {
top: 100%; // increment increase distance from item (means bottom)
opacity: 1;
visibility: visible;
}
}
================================================
FILE: shop-grid-full.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: shop-grid-left.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: shop-grid-right.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: shop-list-full.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: shop-list-left.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: shop-list-right.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: shop-side-version-2.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(23)
$125.00
$22.00
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Nikon Camera 4k Lens Zoom Pro
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Product Policy:
Buyer Protection. Full Refund if you don't receive your order. Returns accepted if product not as described.
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: signin.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
I'M NEW CUSTOMER
By creating an account with our store, you will be able to move through the checkout process faster, store shipping addresses, view and track your orders in your account and more.
SIGNIN
If you have an account with us, please log in.
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: signup.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
================================================
FILE: wishlist.html
================================================
Ludus - Electronics, Apparel, Computers, Books, DVDs & more
Item is added successfully!
Beats Bomb Wireless Headphone
Quantity: 1
$170.00
JavaScript is disabled in your browser.
Please enable JavaScript in your browser or upgrade to a JavaScript-capable browser.
* Example 2 For Non Square: 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
ReplyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
ReplyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
ReplyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
ReplyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Reply