'),this.wrapper.css({position:"absolute","z-index":0,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-repeat":"no-repeat","background-position":"center center"}),"detect"===this.settings.posterType?(t.get(this.path+".png").done(function(){e.wrapper.css("background-image","url("+e.path+".png)")}),t.get(this.path+".jpg").done(function(){e.wrapper.css("background-image","url("+e.path+".jpg)")}),t.get(this.path+".gif").done(function(){e.wrapper.css("background-image","url("+e.path+".gif)")})):e.wrapper.css("background-image","url("+e.path+"."+this.settings.posterType+")"),"static"===this.element.css("position")&&this.element.css("position","relative"),this.element.prepend(this.wrapper),!r&&!p){this.video=t("
"),this.video.css("visibility","hidden"),this.video.prop({autoplay:this.settings.autoplay,loop:this.settings.loop,volume:this.settings.volume,muted:this.settings.muted,playbackRate:this.settings.playbackRate}),this.wrapper.append(this.video);var i=d(this.settings.position);this.video.css({margin:"auto",position:"absolute","z-index":1,top:i.y,left:i.x,"-webkit-transform":"translate(-"+i.x+", -"+i.y+")","-ms-transform":"translate(-"+i.x+", -"+i.y+")",transform:"translate(-"+i.x+", -"+i.y+")"}),this.video.bind("loadedmetadata."+n,function(){e.video.css("visibility","visible"),e.resize()}),t(this.element).bind("resize."+n,function(){e.resize()})}},o.prototype.getVideoObject=function(){return this.video?this.video[0]:null},o.prototype.resize=function(){if(this.video){var t=this.video[0].videoHeight,e=this.video[0].videoWidth,i=this.wrapper.height(),s=this.wrapper.width();this.video.css(s/e>i/t?{width:s+2,height:"auto"}:{width:"auto",height:i+2})}},o.prototype.destroy=function(){this.element.unbind(n),this.video.unbind(n),delete t[n].lookup[this.index],this.element.removeData(n),this.wrapper.remove()},t.fn[n]=function(e,i){var s;return this.each(function(){s=t.data(this,n),s&&s.destroy(),s=new o(this,e,i),s.index=t[n].lookup.push(s)-1,t.data(this,n,s)}),this},t(i).ready(function(){t(e).bind("resize."+n,function(){for(var e,i=t[n].lookup.length,s=0;i>s;s++)e=t[n].lookup[s],e&&e.resize()}),t(i).find("[data-"+n+"-bg]").each(function(e,i){var s=t(i),o=s.data(n+"-options"),a=s.data(n+"-bg");o=o?h(o):{},s[n](a,o)})})}(jQuery||Zepto,window,document,navigator);
--------------------------------------------------------------------------------
/demo/js/pointer-events.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module Pointer Events Polyfill
3 | * @description Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE).
4 | * @author Kent Mewhort
5 | * @license BSD Lisence
6 | */
7 | function PointerEventsPolyfill(t){if(this.options={selector:"*",mouseEvents:["click","dblclick","mousedown","mouseup"],usePolyfillIf:function(){if("Microsoft Internet Explorer"==navigator.appName){var t=navigator.userAgent;if(null!=t.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/)){var e=parseFloat(RegExp.$1);if(11>e)return!0}}return!1}},t){var e=this;$.each(t,function(t,n){e.options[t]=n})}this.options.usePolyfillIf()&&this.register_mouse_events()}PointerEventsPolyfill.initialize=function(t){return null==PointerEventsPolyfill.singleton&&(PointerEventsPolyfill.singleton=new PointerEventsPolyfill(t)),PointerEventsPolyfill.singleton},PointerEventsPolyfill.prototype.register_mouse_events=function(){$(document).on(this.options.mouseEvents.join(" "),this.options.selector,function(t){if("none"==$(this).css("pointer-events")){var e=$(this).css("display");$(this).css("display","none");var n=document.elementFromPoint(t.clientX,t.clientY);return e?$(this).css("display",e):$(this).css("display",""),t.target=n,$(n).trigger(t),!1}return!0})},jQuery(document).ready(function(){PointerEventsPolyfill.initialize({})});
--------------------------------------------------------------------------------
/demo/js/smoothscroll.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module SmoothScroll
3 | * @author Balazs Galambosi, Patrick Brunner, Michael Herf
4 | * @license MIT license
5 | * @version v0.9.9
6 | */
7 | function ssc_init() {
8 | if (document.body) {
9 | var a = document.body, b = document.documentElement, c = window.innerHeight, d = a.scrollHeight;
10 | (ssc_root = 0 <= document.compatMode.indexOf("CSS") ? b : a, ssc_activeElement = a, ssc_initdone = !0, top != self) ? ssc_frame = !0 : d > c && (a.offsetHeight <= c || b.offsetHeight <= c) && (ssc_root.style.height = "auto", ssc_root.offsetHeight <= c) && (c = document.createElement("div"), c.style.clear = "both", a.appendChild(c));
11 | ssc_fixedback || (a.style.backgroundAttachment = "scroll", b.style.backgroundAttachment = "scroll");
12 | ssc_keyboardsupport && ssc_addEvent("keydown", ssc_keydown)
13 | }
14 | }
15 | function ssc_scrollArray(a, b, c, d) {
16 | if (d || (d = 1E3), ssc_directionCheck(b, c), ssc_que.push({
17 | x: b,
18 | y: c,
19 | lastX: 0 > b ? .99 : -.99,
20 | lastY: 0 > c ? .99 : -.99,
21 | start: +new Date
22 | }), !ssc_pending) {
23 | var e = function () {
24 | for (var n = +new Date, h = 0, m = 0, k = 0; k < ssc_que.length; k++) {
25 | var f = ssc_que[k], l = n - f.start, p = l >= ssc_animtime, g = p ? 1 : l / ssc_animtime;
26 | ssc_pulseAlgorithm && (g = ssc_pulse(g));
27 | l = f.x * g - f.lastX >> 0;
28 | g = f.y * g - f.lastY >> 0;
29 | h += l;
30 | m += g;
31 | f.lastX += l;
32 | f.lastY += g;
33 | p && (ssc_que.splice(k, 1), k--)
34 | }
35 | b && (n = a.scrollLeft, a.scrollLeft += h, h && a.scrollLeft === n && (b = 0));
36 | c && (h = a.scrollTop, a.scrollTop += m, m && a.scrollTop === h && (c = 0));
37 | b || c || (ssc_que = []);
38 | ssc_que.length ? setTimeout(e, d / ssc_framerate + 1) : ssc_pending = !1
39 | };
40 | setTimeout(e, 0);
41 | ssc_pending = !0
42 | }
43 | }
44 | function ssc_wheel(a) {
45 | ssc_initdone || ssc_init();
46 | var b = a.target, c = ssc_overflowingAncestor(b);
47 | if (!c || a.defaultPrevented || ssc_isNodeName(ssc_activeElement, "embed") || ssc_isNodeName(b, "embed") && /\.pdf/i.test(b.src))return !0;
48 | var b = a.wheelDeltaX || 0, d = a.wheelDeltaY || 0;
49 | b || d || (d = a.wheelDelta || 0);
50 | 1.2 < Math.abs(b) && (b *= ssc_stepsize / 120);
51 | 1.2 < Math.abs(d) && (d *= ssc_stepsize / 120);
52 | ssc_scrollArray(c, -b, -d);
53 | a.preventDefault()
54 | }
55 | function ssc_keydown(a) {
56 | var b = a.target, c = a.ctrlKey || a.altKey || a.metaKey;
57 | if (/input|textarea|embed/i.test(b.nodeName) || b.isContentEditable || a.defaultPrevented || c || ssc_isNodeName(b, "button") && a.keyCode === ssc_key.spacebar)return !0;
58 | var d;
59 | d = b = 0;
60 | var c = ssc_overflowingAncestor(ssc_activeElement), e = c.clientHeight;
61 | switch (c == document.body && (e = window.innerHeight), a.keyCode) {
62 | case ssc_key.up:
63 | d = -ssc_arrowscroll;
64 | break;
65 | case ssc_key.down:
66 | d = ssc_arrowscroll;
67 | break;
68 | case ssc_key.spacebar:
69 | d = a.shiftKey ? 1 : -1;
70 | d = -d * e * .9;
71 | break;
72 | case ssc_key.pageup:
73 | d = .9 * -e;
74 | break;
75 | case ssc_key.pagedown:
76 | d = .9 * e;
77 | break;
78 | case ssc_key.home:
79 | d = -c.scrollTop;
80 | break;
81 | case ssc_key.end:
82 | e = c.scrollHeight - c.scrollTop - e;
83 | d = 0 < e ? e + 10 : 0;
84 | break;
85 | case ssc_key.left:
86 | b = -ssc_arrowscroll;
87 | break;
88 | case ssc_key.right:
89 | b = ssc_arrowscroll;
90 | break;
91 | default:
92 | return !0
93 | }
94 | ssc_scrollArray(c, b, d);
95 | a.preventDefault()
96 | }
97 | function ssc_mousedown(a) {
98 | ssc_activeElement = a.target
99 | }
100 | function ssc_setCache(a, b) {
101 | for (var c = a.length; c--;)ssc_cache[ssc_uniqueID(a[c])] = b;
102 | return b
103 | }
104 | function ssc_overflowingAncestor(a) {
105 | var b = [], c = ssc_root.scrollHeight;
106 | do {
107 | var d = ssc_cache[ssc_uniqueID(a)];
108 | if (d)return ssc_setCache(b, d);
109 | if (b.push(a), c === a.scrollHeight) {
110 | if (!ssc_frame || ssc_root.clientHeight + 10 < c)return ssc_setCache(b, document.body)
111 | } else if (a.clientHeight + 10 < a.scrollHeight && (overflow = getComputedStyle(a, "").getPropertyValue("overflow"), "scroll" === overflow || "auto" === overflow))return ssc_setCache(b, a)
112 | } while (a = a.parentNode)
113 | }
114 | function ssc_addEvent(a, b, c) {
115 | window.addEventListener(a, b, c || !1)
116 | }
117 | function ssc_removeEvent(a, b, c) {
118 | window.removeEventListener(a, b, c || !1)
119 | }
120 | function ssc_isNodeName(a, b) {
121 | return a.nodeName.toLowerCase() === b.toLowerCase()
122 | }
123 | function ssc_directionCheck(a, b) {
124 | a = 0 < a ? 1 : -1;
125 | b = 0 < b ? 1 : -1;
126 | (ssc_direction.x !== a || ssc_direction.y !== b) && (ssc_direction.x = a, ssc_direction.y = b, ssc_que = [])
127 | }
128 | function ssc_pulse_(a) {
129 | var b, c, d;
130 | return a *= ssc_pulseScale, 1 > a ? b = a - (1 - Math.exp(-a)) : (c = Math.exp(-1), --a, d = 1 - Math.exp(-a), b = c + d * (1 - c)), b * ssc_pulseNormalize
131 | }
132 | function ssc_pulse(a) {
133 | return 1 <= a ? 1 : 0 >= a ? 0 : (1 == ssc_pulseNormalize && (ssc_pulseNormalize /= ssc_pulse_(1)), ssc_pulse_(a))
134 | }
135 | if (-1 === navigator.platform.toUpperCase().indexOf("MAC") && !navigator.userAgent.match(/(Android|iPod|iPhone|iPad|IEMobile|Opera Mini|BlackBerry)/)) {
136 | var ssc_framerate = 150, ssc_animtime = 700, ssc_stepsize = 100, ssc_pulseAlgorithm = !0, ssc_pulseScale = 8, ssc_pulseNormalize = 1, ssc_keyboardsupport = !0, ssc_arrowscroll = 50, ssc_frame = !1, ssc_direction = {
137 | x: 0,
138 | y: 0
139 | }, ssc_initdone = !1, ssc_fixedback = !0, ssc_root = document.documentElement, ssc_activeElement, ssc_key = {
140 | left: 37, up: 38, right: 39, down: 40, spacebar: 32, pageup: 33, pagedown: 34, end: 35,
141 | home: 36
142 | }, ssc_que = [], ssc_pending = !1, ssc_cache = {};
143 | setInterval(function () {
144 | ssc_cache = {}
145 | }, 1E4);
146 | var ssc_uniqueID = function () {
147 | var a = 0;
148 | return function (b) {
149 | return b.ssc_uniqueID || (b.ssc_uniqueID = a++)
150 | }
151 | }(), ischrome = /chrome/.test(navigator.userAgent.toLowerCase());
152 | ischrome && (ssc_addEvent("mousedown", ssc_mousedown), ssc_addEvent("mousewheel", ssc_wheel), ssc_addEvent("load", ssc_init))
153 | }
154 | ;
155 |
--------------------------------------------------------------------------------
/demo/js/wow.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module WOW
3 | * @author Matthieu Aussaguel
4 | * @version v1.1.2
5 | * @license MIT License
6 | */
7 | (function(){var t,e,n,i,o,r=function(t,e){return function(){return t.apply(e,arguments)}},s=[].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1};e=function(){function t(){}return t.prototype.extend=function(t,e){var n,i;for(n in e)i=e[n],null==t[n]&&(t[n]=i);return t},t.prototype.isMobile=function(t){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(t)},t.prototype.createEvent=function(t,e,n,i){var o;return null==e&&(e=!1),null==n&&(n=!1),null==i&&(i=null),null!=document.createEvent?(o=document.createEvent("CustomEvent"),o.initCustomEvent(t,e,n,i)):null!=document.createEventObject?(o=document.createEventObject(),o.eventType=t):o.eventName=t,o},t.prototype.emitEvent=function(t,e){return null!=t.dispatchEvent?t.dispatchEvent(e):e in(null!=t)?t[e]():"on"+e in(null!=t)?t["on"+e]():void 0},t.prototype.addEvent=function(t,e,n){return null!=t.addEventListener?t.addEventListener(e,n,!1):null!=t.attachEvent?t.attachEvent("on"+e,n):t[e]=n},t.prototype.removeEvent=function(t,e,n){return null!=t.removeEventListener?t.removeEventListener(e,n,!1):null!=t.detachEvent?t.detachEvent("on"+e,n):delete t[e]},t.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},t}(),n=this.WeakMap||this.MozWeakMap||(n=function(){function t(){this.keys=[],this.values=[]}return t.prototype.get=function(t){var e,n,i,o,r;for(r=this.keys,e=i=0,o=r.length;o>i;e=++i)if(n=r[e],n===t)return this.values[e]},t.prototype.set=function(t,e){var n,i,o,r,s;for(s=this.keys,n=o=0,r=s.length;r>o;n=++o)if(i=s[n],i===t)return void(this.values[n]=e);return this.keys.push(t),this.values.push(e)},t}()),t=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(t=function(){function t(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return t.notSupported=!0,t.prototype.observe=function(){},t}()),i=this.getComputedStyle||function(t){return this.getPropertyValue=function(e){var n;return"float"===e&&(e="styleFloat"),o.test(e)&&e.replace(o,function(t,e){return e.toUpperCase()}),(null!=(n=t.currentStyle)?n[e]:void 0)||null},this},o=/(\-([a-z]){1})/g,this.WOW=function(){function o(t){null==t&&(t={}),this.scrollCallback=r(this.scrollCallback,this),this.scrollHandler=r(this.scrollHandler,this),this.resetAnimation=r(this.resetAnimation,this),this.start=r(this.start,this),this.scrolled=!0,this.config=this.util().extend(t,this.defaults),null!=t.scrollContainer&&(this.config.scrollContainer=document.querySelector(t.scrollContainer)),this.animationNameCache=new n,this.wowEvent=this.util().createEvent(this.config.boxClass)}return o.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null},o.prototype.init=function(){var t;return this.element=window.document.documentElement,"interactive"===(t=document.readyState)||"complete"===t?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},o.prototype.start=function(){var e,n,i,o;if(this.stopped=!1,this.boxes=function(){var t,n,i,o;for(i=this.element.querySelectorAll("."+this.config.boxClass),o=[],t=0,n=i.length; n>t; t++)e=i[t],o.push(e);return o}.call(this),this.all=function(){var t,n,i,o;for(i=this.boxes,o=[],t=0,n=i.length;n>t;t++)e=i[t],o.push(e);return o}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(o=this.boxes,n=0,i=o.length;i>n;n++)e=o[n],this.applyStyle(e,!0);return this.disabled()||(this.util().addEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new t(function(t){return function(e){var n,i,o,r,s;for(s=[],n=0,i=e.length;i>n;n++)r=e[n],s.push(function(){var t,e,n,i;for(n=r.addedNodes||[],i=[],t=0,e=n.length;e>t;t++)o=n[t],i.push(this.doSync(o));return i}.call(t));return s}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},o.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(this.config.scrollContainer||window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},o.prototype.sync=function(){return t.notSupported?this.doSync(this.element):void 0},o.prototype.doSync=function(t){var e,n,i,o,r;if(null==t&&(t=this.element),1===t.nodeType){for(t=t.parentNode||t,o=t.querySelectorAll("."+this.config.boxClass),r=[],n=0,i=o.length;i>n;n++)e=o[n],s.call(this.all,e)<0?(this.boxes.push(e),this.all.push(e),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(e,!0),r.push(this.scrolled=!0)):r.push(void 0);return r}},o.prototype.show=function(t){return this.applyStyle(t),t.className=t.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(t),this.util().emitEvent(t,this.wowEvent),this.util().addEvent(t,"animationend",this.resetAnimation),this.util().addEvent(t,"oanimationend",this.resetAnimation),this.util().addEvent(t,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(t,"MSAnimationEnd",this.resetAnimation),t},o.prototype.applyStyle=function(t,e){var n,i,o;return i=t.getAttribute("data-wow-duration"),n=t.getAttribute("data-wow-delay"),o=t.getAttribute("data-wow-iteration"),this.animate(function(r){return function(){return r.customStyle(t,e,i,n,o)}}(this))},o.prototype.animate=function(){return"requestAnimationFrame"in window?function(t){return window.requestAnimationFrame(t)}:function(t){return t()}}(),o.prototype.resetStyle=function(){var t,e,n,i,o;for(i=this.boxes,o=[],e=0,n=i.length;n>e;e++)t=i[e],o.push(t.style.visibility="visible");return o},o.prototype.resetAnimation=function(t){var e;return t.type.toLowerCase().indexOf("animationend")>=0?(e=t.target||t.srcElement,e.className=e.className.replace(this.config.animateClass,"").trim()):void 0},o.prototype.customStyle=function(t,e,n,i,o){return e&&this.cacheAnimationName(t),t.style.visibility=e?"hidden":"visible",n&&this.vendorSet(t.style,{animationDuration:n}),i&&this.vendorSet(t.style,{animationDelay:i}),o&&this.vendorSet(t.style,{animationIterationCount:o}),this.vendorSet(t.style,{animationName:e?"none":this.cachedAnimationName(t)}),t},o.prototype.vendors=["moz","webkit"],o.prototype.vendorSet=function(t,e){var n,i,o,r;i=[];for(n in e)o=e[n],t[""+n]=o,i.push(function(){var e,i,s,l;for(s=this.vendors,l=[],e=0,i=s.length;i>e;e++)r=s[e],l.push(t[""+r+n.charAt(0).toUpperCase()+n.substr(1)]=o);return l}.call(this));return i},o.prototype.vendorCSS=function(t,e){var n,o,r,s,l,a;for(l=i(t),s=l.getPropertyCSSValue(e),r=this.vendors,n=0,o=r.length;o>n;n++)a=r[n],s=s||l.getPropertyCSSValue("-"+a+"-"+e);return s},o.prototype.animationName=function(t){var e;try{e=this.vendorCSS(t,"animation-name").cssText}catch(n){e=i(t).getPropertyValue("animation-name")}return"none"===e?"":e},o.prototype.cacheAnimationName=function(t){return this.animationNameCache.set(t,this.animationName(t))},o.prototype.cachedAnimationName=function(t){return this.animationNameCache.get(t)},o.prototype.scrollHandler=function(){return this.scrolled=!0},o.prototype.scrollCallback=function(){var t;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var e,n,i,o;for(i=this.boxes,o=[],e=0,n=i.length; n>e; e++)t=i[e],t&&(this.isVisible(t)?this.show(t):o.push(t));return o}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},o.prototype.offsetTop=function(t){for(var e; void 0===t.offsetTop;)t=t.parentNode;for(e=t.offsetTop; t=t.offsetParent;)e+=t.offsetTop;return e},o.prototype.isVisible=function(t){var e,n,i,o,r;return n=t.getAttribute("data-wow-offset")||this.config.offset,r=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset,o=r+Math.min(this.element.clientHeight,this.util().innerHeight())-n,i=this.offsetTop(t),e=i+t.clientHeight,o>=i&&e>=r},o.prototype.util=function(){return null!=this._util?this._util:this._util=new e},o.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},o}()}).call(this);
--------------------------------------------------------------------------------
/demo/sass/_variables.scss:
--------------------------------------------------------------------------------
1 | //========================================================
2 | // Variables
3 | //=========================================================
4 |
5 | // Use relative measurements. Change to 0 on "Post Production"
6 | $debug: 1;
7 |
8 | // Layouts
9 | $layout-boxed-width: 1920px;
10 | $layout-boxed-bg: #444;
11 |
12 |
13 | // Resolutions
14 | $screen-xs-min: 480px;
15 | $screen-sm-min: 768px;
16 | $screen-md-min: 992px;
17 | $screen-lg-min: 1200px;
18 |
19 |
20 | // Fonts
21 | $default-font-family: 'Roboto', sans-serif;
22 | $default-font-weight: 400;
23 | $default-font-size: 16px;
24 | $default-line-height: 26px;
25 |
26 |
27 | // Colors
28 | $default: #000;
29 | $contrast: #fff;
30 | $white: #fff;
31 | $primary: #2196f3;
32 | $secondary-1: #33d7b4;
33 | $secondary-2: #ff4c2e;
34 | $secondary-3: #feea3a;
35 |
36 | $header-color: $contrast;
37 | $header-bg: darken($primary, 10%);
38 |
39 | $content-color: lighten(saturate(adjust_hue($default, 0), 0%), 46.666666666666664%);;
40 | $content-bg: $contrast;
41 |
42 | $footer-color: $contrast;
43 | $footer-bg: $default;
44 |
45 |
46 | // Round Corvers
47 | $border-radius-small: 0;
48 | $border-radius-base: $border-radius-small * 2;
49 | $border-radius-large: $border-radius-base * 2;
50 |
51 |
52 | // Shadows
53 | $box-shadow-ambient: 0 0 2px rgba(0, 0, 0, .12);
54 | $box-shadow-key-light: 2px 3px 8px 0px rgba(0, 0, 0, 0.3);
55 |
56 |
--------------------------------------------------------------------------------
/demo/sass/components/_buttons.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Buttons
3 | */
4 |
5 | $btn-xs-height: 30px; // < 40px
6 | $btn-xs-size: 14px;
7 |
8 | $btn-sm-height: $btn-xs-height * 1.33; // >= 40px
9 | $btn-sm-size: $btn-xs-size * 1.33;
10 |
11 | $btn-md-height: $btn-sm-height * 1.25; // >= 50px
12 | $btn-md-size: $btn-sm-size * 1.25;
13 |
14 | $btn-lg-height: $btn-md-height * 1.2; // >= 60px
15 | $btn-lg-size: $btn-md-size * 1.2;
16 |
17 | $btn-xl-height: $btn-lg-height * 1.16; // >= 70px
18 | $btn-xl-size: $btn-lg-size * 1.16;
19 |
20 | $btn-group-offset: 10px;
21 |
22 | // Button General Styles
23 | .btn {
24 | display: inline-block;
25 | text-align: center;
26 | line-height: 1.2;
27 | white-space: nowrap;
28 | max-width: 100%;
29 | overflow: hidden;
30 | text-overflow: ellipsis;
31 | }
32 |
33 | // Button Layout Styles
34 | .btn-xs {
35 | padding: ceil(($btn-xs-height - ($btn-xs-size * 1.2)) / 2);
36 | font-size: ceil($btn-xs-size);
37 | }
38 |
39 | .btn-sm {
40 | padding: ceil(($btn-sm-height - ($btn-sm-size * 1.2)) / 2);
41 | font-size: ceil($btn-sm-size);
42 | }
43 |
44 | .btn-md {
45 | padding: ceil(($btn-md-height - ($btn-md-size * 1.2)) / 2);
46 | font-size: ceil($btn-md-size);
47 | }
48 |
49 | .btn-lg {
50 | padding: ceil(($btn-lg-height - ($btn-lg-size * 1.2)) / 2);
51 | font-size: ceil($btn-lg-size);
52 | }
53 |
54 | .btn-xl {
55 | padding: ceil(($btn-xl-height - ($btn-xl-size * 1.2)) / 2);
56 | font-size: ceil($btn-xl-size);
57 | }
58 |
59 | // Button Appearance Styles
60 | .btn-default {
61 | color: $contrast;
62 | background: $default;
63 |
64 | &:hover {
65 | color: $contrast;
66 | background: lighten($default, 5%);
67 | }
68 |
69 | &:active {
70 | color: $contrast;
71 | background: darken($default, 5%);
72 | }
73 | }
74 |
75 | .btn-primary {
76 | color: #fff;
77 | background: $primary;
78 |
79 | &:hover {
80 | color: #fff;
81 | background: lighten($primary, 5%);
82 | }
83 |
84 | &:active {
85 | color: #fff;
86 | background: darken($primary, 5%);
87 | }
88 | }
89 |
90 |
91 | // Button Group Styles
92 | .btn-group {
93 | @include transform(translateY(-$btn-group-offset));
94 | margin-bottom: -$btn-group-offset;
95 | margin-left: -$btn-group-offset;
96 |
97 | .btn {
98 | margin-top: $btn-group-offset;
99 | margin-left: $btn-group-offset;
100 | }
101 | }
--------------------------------------------------------------------------------
/demo/sass/components/_icons.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Icons
3 | */
4 |
5 | $icon-xs-size: 40px;
6 | $icon-xs-fz: 28px;
7 |
8 | $icon-sm-size: 45px;
9 | $icon-sm-fz: 43px;
10 |
11 | $icon-md-size: 60px;
12 | $icon-md-fz: 48px;
13 |
14 | $icon-lg-size: 108px;
15 | $icon-lg-fz: 40px;
16 |
17 | $icon-xl-size: $icon-lg-size * 1.15;
18 | $icon-xl-fz: $icon-lg-fz * 1.15;
19 |
20 | // Icon General Styles
21 | .icon {
22 | display: inline-block;
23 | text-align: center;
24 | border-radius: 50%;
25 | }
26 |
27 |
28 | // Icon Sizing Styles
29 | .icon-xs{
30 | width: $icon-xs-size;
31 | height: $icon-xs-size;
32 | line-height: $icon-xs-size;
33 | font-size: $icon-xs-fz;
34 | }
35 |
36 | .icon-sm {
37 | width: $icon-sm-size;
38 | height: $icon-sm-size;
39 | line-height: $icon-sm-size;
40 | font-size: $icon-sm-fz;
41 | }
42 |
43 | .icon-md {
44 | width: $icon-md-size;
45 | height: $icon-md-size;
46 | line-height: $icon-md-size;
47 | font-size: $icon-md-fz;
48 | }
49 |
50 | .icon-lg {
51 | width: $icon-lg-size;
52 | height: $icon-lg-size;
53 | line-height: $icon-lg-size;
54 | font-size: $icon-lg-fz;
55 | }
56 |
57 | .icon-xl{
58 | width: $icon-xl-size;
59 | height: $icon-xl-size;
60 | line-height: $icon-xl-size;
61 | font-size: $icon-xl-fz;
62 | }
63 |
64 |
65 | // Icon Appearance Styles
66 | .icon-default {
67 | color: darken(saturate(adjust_hue($contrast, 0), 0.5076142131979677%), 8.039215686274503%);
68 | }
69 |
70 | .icon-primary {
71 | color: #FFF;
72 | background: $primary;
73 | }
74 |
75 | .icon-secondary-1 {
76 | color: #FFF;
77 | background: $secondary-1;
78 | }
79 |
80 | .icon-secondary-2 {
81 | color: #FFF;
82 | background: $secondary-2;
83 | }
84 |
85 | .icon-secondary-3 {
86 | color: #FFF;
87 | background: $secondary-3;
88 | }
89 |
90 | // Social Icons Styles
91 | .icon.fa-facebook {
92 | color: #FFF;
93 | background: #3B579D;
94 |
95 | &:hover {
96 | background: darken(#3B579D, 5%);
97 | }
98 | }
99 |
100 | .icon.fa-twitter {
101 | color: #FFF;
102 | background: #5EA9DD;
103 |
104 | &:hover {
105 | background: darken(#5EA9DD, 5%);
106 | }
107 | }
108 |
109 | .icon.fa-google-plus {
110 | color: #FFF;
111 | background: #DF4A32;
112 |
113 | &:hover {
114 | background: darken(#DF4A32, 5%);
115 | }
116 | }
117 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/demo/sass/extensions/_rd-parallax.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Parallax
3 | *
4 | * @description Describes style declarations for RD Parallax extension
5 | *
6 | * @author Evgeniy Gusarov
7 | * @link https://ua.linkedin.com/pub/evgeniy-gusarov/8a/a40/54a
8 | * @version 3.0.0
9 | */
10 | .rd-parallax{
11 |
12 | &-layer-wrap{
13 | position: relative;
14 | }
15 |
16 | &-inner{
17 | overflow: hidden;
18 | position: relative;
19 | min-height: 100%;
20 | }
21 |
22 | &-layer[data-type="media"]{
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | right: 0;
27 | bottom: 0;
28 | height: 100%;
29 | -webkit-backface-visibility: hidden;
30 |
31 | iframe{
32 | width: 100%;
33 | height: 100%;
34 | }
35 | }
36 |
37 | &-layer[data-url]{
38 | -webkit-background-size: cover;
39 | background-size: cover;
40 | background-position: center center;
41 | }
42 |
43 | &-layer[data-type="html"]{
44 | position: relative;
45 | }
46 |
47 | &, #{headings()}{
48 | color: $white;
49 | }
50 |
51 | .image-wrap-1{
52 | visibility: hidden;
53 | position: absolute;
54 | top: -30px;
55 | width: 710px;
56 | right: 100%;
57 | margin-right: 38px;
58 | z-index: 1;
59 |
60 | img{
61 | @include transform(rotate(10deg));
62 | }
63 | }
64 |
65 | .image-wrap-2{
66 | visibility: hidden;
67 | position: absolute;
68 | top: 100px;
69 | width: 910px;
70 | right: 100%;
71 | margin-right: 58px;;
72 | z-index: 0;
73 |
74 | img{
75 | @include transform(rotate(-13deg));
76 | }
77 | }
78 |
79 | @media (min-width: $screen-md-min) {
80 | .image-wrap-1, .image-wrap-2{
81 | visibility: visible;
82 | }
83 | }
84 | }
--------------------------------------------------------------------------------
/demo/sass/extensions/_ui-to-top.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection ToTop
3 | * @license MIT license - http://opensource.org/licenses/MIT
4 | * @version 1.0.0
5 | */
6 | .ui-to-top{
7 | display: none;
8 | width: 50px;
9 | height: 50px;
10 | font-size: 24px;
11 | line-height: 46px;
12 | color: #FFF;
13 | background: $primary;
14 | border-radius: 50%;
15 | box-shadow: $box-shadow-ambient, $box-shadow-key-light;
16 | position: fixed;
17 | right: 15px;
18 | bottom: 15px;
19 | overflow: hidden;
20 | text-align: center;
21 | text-decoration: none;
22 | z-index: 20;
23 |
24 | @include transform(translateY(100px));
25 |
26 | &:hover {
27 | color: #FFF;
28 | background: lighten($primary, 5%);
29 | text-decoration: none;
30 | }
31 |
32 | &.active{
33 | @include transform(translateY(0));
34 | }
35 | }
36 |
37 | .mobile .ui-to-top,
38 | .tablet .ui-to-top {
39 | display: none !important;
40 | }
41 |
42 | @media (min-width: $screen-md-min){
43 | .ui-to-top {
44 | display: block;
45 | right: 40px;
46 | bottom: 40px;
47 | }
48 | }
49 |
50 |
51 |
--------------------------------------------------------------------------------
/demo/sass/extensions/_vide.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Vide
3 | * @description Describes style declarations for Vide extension
4 | */
5 |
6 | .vide {
7 | &__body {
8 | position: relative;
9 | }
10 | }
--------------------------------------------------------------------------------
/demo/sass/helpers/_floating.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Floating System
3 | */
4 |
5 | .pull-left {
6 | float: left;
7 | }
8 |
9 | .pull-none {
10 | float: none;
11 | }
12 |
13 | .pull-right {
14 | float: right;
15 | }
16 |
17 | @mixin make-floating($resolution){
18 | .pull-#{$resolution}-left {
19 | float: left;
20 | }
21 |
22 | .pull-#{$resolution}-none {
23 | float: none;
24 | }
25 |
26 | .pull-#{$resolution}-right {
27 | float: right;
28 | }
29 | }
30 |
31 | @media (min-width: $screen-xs-min) {
32 | @include make-floating("xs");
33 | }
34 |
35 | @media (min-width: $screen-sm-min) {
36 | @include make-floating("sm");
37 | }
38 |
39 | @media (min-width: $screen-md-min) {
40 | @include make-floating("md");
41 | }
42 |
43 | @media (min-width: $screen-lg-min) {
44 | @include make-floating("lg");
45 | }
46 |
--------------------------------------------------------------------------------
/demo/sass/helpers/_text-alignment.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Text Alignment
3 | */
4 |
5 | .text-left {
6 | text-align: left;
7 | }
8 |
9 | .text-center {
10 | text-align: center;
11 | }
12 |
13 | .text-right {
14 | text-align: right;
15 | }
16 |
17 | @mixin make-text-alignment($resolution){
18 | .text-#{$resolution}-left {
19 | text-align: left;
20 | }
21 |
22 | .text-#{$resolution}-center {
23 | text-align: center;
24 | }
25 |
26 | .text-#{$resolution}-right {
27 | text-align: right;
28 | }
29 | }
30 |
31 | @media (min-width: $screen-xs-min) {
32 | @include make-text-alignment("xs");
33 | }
34 |
35 | @media (min-width: $screen-sm-min) {
36 | @include make-text-alignment("sm");
37 | }
38 |
39 | @media (min-width: $screen-md-min) {
40 | @include make-text-alignment("md");
41 | }
42 |
43 | @media (min-width: $screen-lg-min) {
44 | @include make-text-alignment("lg");
45 | }
46 |
47 |
--------------------------------------------------------------------------------
/demo/sass/helpers/_text-styling.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Text Styling
3 | */
4 |
5 | .italic {
6 | font-style: italic;
7 | }
8 |
9 | .underline {
10 | text-decoration: underline;
11 | }
12 |
13 | .strike {
14 | text-decoration: line-through;
15 | }
16 |
17 | .thin {
18 | font-weight: 100;
19 | }
20 |
21 | .light {
22 | font-weight: 300;
23 | }
24 |
25 | .regular{
26 | font-weight: 400;
27 | }
28 |
29 | .medium{
30 | font-weight: 500;
31 | }
32 |
33 | .sbold{
34 | font-weight: 600;
35 | }
36 |
37 | .bold, strong {
38 | font-weight: 700;
39 | }
40 |
41 | .ubold {
42 | font-weight: 900;
43 | }
44 |
45 | .uppercase{
46 | text-transform: uppercase;
47 | }
--------------------------------------------------------------------------------
/demo/sass/includes/_mixins.scss:
--------------------------------------------------------------------------------
1 | //==========================================================
2 | // MIXINS
3 | //==========================================================
4 |
5 | // Note: Some of described mixins in this file requires the ie conditional comments
6 | //
7 | // For IE < 9
8 | //
11 | //
12 |
13 | @mixin keyframes($name) {
14 | @-webkit-keyframes #{$name} {
15 | @content;
16 | }
17 | @keyframes #{$name} {
18 | @content;
19 | }
20 | }
21 |
22 | @mixin clip($x1, $x2, $y1, $y2) {
23 | clip: rect($y1, $x2, $y2, $x1);
24 | }
25 |
26 | // Opacity
27 | @mixin opacity($opacity) {
28 | opacity: $opacity;
29 |
30 | .lt-ie9 & {
31 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity})";
32 | filter: alpha(opacity=$opacity*100);
33 | }
34 | }
35 |
36 | // Background-rgba
37 | @mixin background($rgb, $opacity) {
38 | background: rgba($rgb, $opacity);
39 |
40 | .lt-ie9 & {
41 | background: none;
42 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($rgb, $opacity))}', endColorstr='#{ie-hex-str(rgba($rgb, $opacity))}')";
43 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($rgb, $opacity))}', endColorstr='#{ie-hex-str(rgba($rgb, $opacity))}');
44 | zoom: 1;
45 | }
46 | }
47 |
48 | // Animation
49 | @mixin animation($anim) {
50 | -webkit-animation: $anim;
51 | animation: $anim;
52 | }
53 |
54 | // Transform Origin
55 | @mixin transform-origin($trfm-o) {
56 | -webkit-transform-origin: $trfm-o;
57 | transform-origin: $trfm-o;
58 | }
59 |
60 | // Transform
61 | @mixin transform($trfm) {
62 | -webkit-transform: $trfm;
63 | transform: $trfm;
64 | }
65 |
66 | // Triangle
67 | @mixin triangle($dir, $w, $h, $clr) {
68 | width: 0;
69 | height: 0;
70 | border-style: solid;
71 |
72 | @if $dir == top {
73 | border-width: 0 ceil($w/2) $h ceil($w/2);
74 | border-color: transparent transparent $clr transparent;
75 | } @else if $dir == bottom {
76 | border-width: $h ceil($w/2) 0 ceil($w/2);
77 | border-color: $clr transparent transparent transparent;
78 | } @else if $dir == left {
79 | border-width: ceil($h/2) $w ceil($h/2) 0;
80 | border-color: transparent $clr transparent transparent;
81 | } @else if $dir == right {
82 | border-width: ceil($h/2) 0 ceil($h/2) $w;
83 | border-color: transparent transparent transparent $clr;
84 | } @else if $dir == top_left {
85 | border-width: $w $w 0 0;
86 | border-color: $clr transparent transparent transparent;
87 | } @else if $dir == top_right {
88 | border-width: 0 $w $w 0;
89 | border-color: transparent $clr transparent transparent;
90 | } @else if $dir == bottom_right {
91 | border-width: 0 0 $w $w;
92 | border-color: transparent transparent $clr transparent;
93 | } @else if $dir == bottom_left {
94 | border-width: $w 0 0 $w;
95 | border-color: transparent transparent transparent $clr;
96 | }
97 | }
98 |
99 | // Clearfix
100 | @mixin clearfix {
101 | &:before,
102 | &:after {
103 | display: table;
104 | content: "";
105 | line-height: 0;
106 | }
107 |
108 | &:after {
109 | clear: both;
110 | }
111 | }
112 |
113 | @include keyframes(sprite-animation){
114 | from{
115 | background-position: 0 0;
116 | }
117 | }
118 |
119 | // Variables
120 | $fa: 'FontAwesome';
121 |
122 | // Usefull Functions
123 |
124 | @function str-replace($string, $search, $replace: '') {
125 | $index: str-index($string, $search);
126 |
127 | @if $index {
128 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
129 | }
130 |
131 | @return $string;
132 | }
133 |
134 | @function rem($px-size) {
135 | @if ($debug) {
136 | @return $px-size;
137 | } @else {
138 | @return str-replace(#{($px-size/100)}, px, rem);
139 | }
140 | }
141 |
142 | @function remove($list, $value, $recursive: false) {
143 | $result: ();
144 |
145 | @for $i from 1 through length($list) {
146 | @if type-of(nth($list, $i)) == list and $recursive {
147 | $result: append($result, remove(nth($list, $i), $value, $recursive));
148 | } @else if nth($list, $i) != $value {
149 | $result: append($result, nth($list, $i));
150 | }
151 | }
152 |
153 | @return $result;
154 | }
155 |
156 | @function sort($list) {
157 | $sortedlist: ();
158 | @while length($list) > 0 {
159 | $value: nth($list, 1);
160 | @each $item in $list {
161 | @if $item < $value {
162 | $value: $item;
163 | }
164 | }
165 | $sortedlist: append($sortedlist, $value, 'space');
166 | $list: remove($list, $value);
167 | }
168 | @return $sortedlist;
169 | }
170 |
171 | @function average($list) {
172 | $sum: 0;
173 |
174 | @each $i in $list {
175 | $sum: $sum + $i;
176 | }
177 |
178 | @return $sum / length($list);
179 | }
180 |
181 | @function headings() {
182 | @return "h1, h2, h3, h4, h5, h6, .heading-1, .heading-2, .heading-3, .heading-4,.heading-5, .heading-6";
183 | }
184 |
185 | @function cols($resolution) {
186 | $selector: ();
187 | @each $j in 1, 2, 3, 4, 6, 12 {
188 | $selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n + #{(12/$j)+1})", comma);
189 | }
190 |
191 | $selector: append($selector, "> .col-#{$resolution}-8.col-#{$resolution}-preffix-2");
192 |
193 | @return $selector;
194 | }
195 |
196 | @function cols-full($resolution) {
197 | $selector: ();
198 | @for $j from 1 through 12 {
199 | $selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n)", comma);
200 | }
201 |
202 | @return $selector;
203 | }
204 |
205 | @mixin make-flow-offset($lg-offset, $md-offset: $lg-offset, $sm-offset: $md-offset, $xs-offset: $sm-offset) {
206 | & > * + * {
207 | margin-top: $xs-offset;
208 | }
209 |
210 | html:not(.lt-ie10) & {
211 | @media (min-width: $screen-xs-min) {
212 | #{cols-full("xs")} {
213 | margin-top: 0;
214 | }
215 | }
216 |
217 | @media (min-width: $screen-xs-min) {
218 | #{cols("xs")} {
219 | margin-top: $xs-offset;
220 | }
221 | }
222 |
223 | @media (min-width: $screen-sm-min) {
224 | #{cols-full("sm")} {
225 | margin-top: 0;
226 | }
227 | }
228 |
229 | @media (min-width: $screen-sm-min) {
230 | #{cols("sm")} {
231 | margin-top: $sm-offset;
232 | }
233 | }
234 |
235 | @media (min-width: $screen-md-min) {
236 | #{cols-full("md")} {
237 | margin-top: 0;
238 | }
239 | }
240 |
241 | @media (min-width: $screen-md-min) {
242 | #{cols("md")} {
243 | margin-top: $md-offset;
244 | }
245 | }
246 |
247 | @media (min-width: $screen-lg-min) {
248 | #{cols-full("lg")} {
249 | margin-top: 0;
250 | }
251 | }
252 |
253 | @media (min-width: $screen-lg-min) {
254 | #{cols("lg")} {
255 | margin-top: $lg-offset;
256 | }
257 | }
258 | }
259 | }
260 |
--------------------------------------------------------------------------------
/demo/sass/includes/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @section Normalize
3 | *
4 | * @description Resets default browser styling
5 | *
6 | * @link http://github.com/necolas/normalize.css
7 | * @license MIT license - http://opensource.org/licenses/MIT
8 | * @version 3.0.3
9 | * @revision 1.0
10 | */
11 |
12 | html, body, div, span, applet, object, iframe,
13 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
14 | a, abbr, acronym, address, big, cite, code,
15 | del, dfn, em, img, ins, kbd, q, s, samp,
16 | small, strike, strong, sub, sup, tt, var,
17 | b, u, i, center,
18 | dl, dt, dd, ol, ul, li,
19 | fieldset, form, label, legend,
20 | table, caption, tbody, tfoot, thead, tr, th, td,
21 | article, aside, canvas, details, embed,
22 | figure, figcaption, footer, header, hgroup,
23 | menu, nav, output, ruby, section, summary,
24 | time, mark, audio, video, button, input, textarea {
25 | margin: 0;
26 | padding: 0;
27 | border: 0;
28 | font: inherit;
29 | vertical-align: top;
30 | }
31 |
32 | article, aside, details, figcaption, figure,
33 | footer, header, hgroup, menu, nav, main, time, section {
34 | display: block;
35 | }
36 |
37 | ol, ul {
38 | list-style: none;
39 | }
40 |
41 | blockquote, q {
42 | quotes: none;
43 | }
44 |
45 | blockquote:before, blockquote:after,
46 | q:before, q:after {
47 | content: '';
48 | }
49 |
50 | table {
51 | border-collapse: collapse;
52 | border-spacing: 0;
53 | }
54 |
55 | button, input, textarea, select {
56 | display: inline-block;
57 | -webkit-appearance: none;
58 | outline: none;
59 | color: inherit;
60 | overflow: visible;
61 | background-color: rgba(#000, 0);
62 | box-shadow: none;
63 | border-radius: 0;
64 | }
65 |
66 | button,
67 | input[type='button'],
68 | input[type='submit'] {
69 | cursor: pointer;
70 | }
71 |
72 | /*
73 | * @bugfix input text-overflow padding ignore
74 | * @affected lt IE11
75 | */
76 | .lt-ie11 {
77 | input {
78 | border-left: 1px solid rgba(#000, 0);
79 | border-right: 1px solid rgba(#000, 0);
80 | border-bottom-left-radius: 1px!important;
81 | }
82 | }
83 |
84 | *,
85 | *:before,
86 | *:after {
87 | box-sizing: border-box;
88 | }
89 |
90 | a,
91 | a[href^="tel:"],
92 | a[href^="callto:"] {
93 | font: inherit;
94 | color: inherit;
95 | text-decoration: none;
96 |
97 | &:focus {
98 | outline: none;
99 | }
100 | }
101 |
102 | img {
103 | max-width: 100%;
104 | height: auto;
105 | }
106 |
107 | a, button, input {
108 | transition: .3s all ease;
109 | }
110 |
--------------------------------------------------------------------------------
/demo/sass/modules/tm-box/_boxes.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection Box
3 | */
4 |
5 | $box-gutter: 30px;
6 |
7 | .box__left{
8 | padding-bottom: $box-gutter;
9 | }
10 |
11 | .box__right{
12 | padding-top: $box-gutter;
13 | }
14 |
15 | .box, .box-xs, .box-sm, .box-md, .box-lg{
16 | .box__middle {
17 | vertical-align: middle;
18 | }
19 |
20 | .box__bottom {
21 | vertical-align: bottom;
22 | }
23 | }
24 |
25 | .box-group, .box-group-outer > *{
26 | display: -ms-flexbox;
27 | display: -webkit-flex;
28 | display: flex;
29 | }
30 |
31 | .box{
32 | .box__left img, .box__right img{
33 | max-width: none;
34 | }
35 |
36 | .box__left,
37 | .box__right,
38 | .box__body {
39 | padding: 0;
40 | display: table-cell;
41 | vertical-align: top;
42 | }
43 |
44 | .box__left{
45 | padding-right: $box-gutter;
46 | padding-bottom: 0;
47 | }
48 |
49 | .box__right{
50 | padding-left: $box-gutter;
51 | padding-top: 0;
52 | }
53 | }
54 |
55 | @mixin make-box($resolution, $gutter){
56 | .box-#{$resolution}{
57 | .box__left img, .box__right img{
58 | max-width: none;
59 | }
60 |
61 | .box__left,
62 | .box__right,
63 | .box__body {
64 | display: table-cell;
65 | vertical-align: top;
66 | }
67 |
68 | .box__left{
69 | padding-right: $gutter;
70 | padding-bottom: 0;
71 | }
72 |
73 | .box__right{
74 | padding-left: $gutter;
75 | padding-top: 0;
76 | }
77 | }
78 |
79 | .box-#{$resolution}-clear{
80 | .box__left img, .box__right img{
81 | max-width: 100%;
82 | }
83 |
84 | .box__left,
85 | .box__right,
86 | .box__cnt {
87 | padding: 0;
88 | display: block;
89 | vert-align: top;
90 | }
91 |
92 | .box__left{
93 | padding-bottom: $gutter;
94 | }
95 |
96 | .box__right{
97 | padding-top: $gutter;
98 | }
99 | }
100 | }
101 |
102 | @media (min-width: $screen-xs-min) {
103 | @include make-box("xs", $box-gutter);
104 | }
105 |
106 | @media (min-width: $screen-sm-min) {
107 | @include make-box("sm", $box-gutter);
108 | }
109 |
110 | @media (min-width: $screen-md-min) {
111 | @include make-box("md", $box-gutter);
112 | }
113 |
114 | @media (min-width: $screen-lg-min) {
115 | @include make-box("lg", $box-gutter);
116 | }
--------------------------------------------------------------------------------
/demo/sass/modules/tm-grid/_tm-grid-builder.scss:
--------------------------------------------------------------------------------
1 | //=======================================================
2 | // Grid System
3 | //=======================================================
4 |
5 | @mixin make-flex() {
6 | display: -ms-flexbox;
7 | display: -webkit-flex;
8 | display: flex;
9 | }
10 |
11 | @mixin flex($grow-shrink-basis) {
12 | -ms-flex: $grow-shrink-basis;
13 | -webkit-flex: $grow-shrink-basis;
14 | flex: $grow-shrink-basis;
15 | }
16 |
17 | @mixin flex-direction($direction) {
18 | -webkit-flex-direction: $direction;
19 | -ms-flex-direction: $direction;
20 | flex-direction: $direction;
21 | }
22 |
23 | @mixin flex-wrap($wrap) {
24 | -webkit-flex-wrap: $wrap;
25 | -ms-flex-wrap: $wrap;
26 | flex-wrap: $wrap;
27 | }
28 |
29 | @mixin flex-grow($grow) {
30 | -webkit-flex-grow: $grow;
31 | -ms-flex-positive: $grow;
32 | flex-grow: $grow;
33 | }
34 |
35 | @mixin flex-basis($basis) {
36 | -webkit-flex-basis: $basis;
37 | -ms-flex-preferred-size: $basis;
38 | flex-basis: $basis;
39 | max-width: $basis;
40 | }
41 |
42 | @mixin justify-content($align) {
43 | -webkit-justify-content: $align;
44 | @if ($align == "flex-start") {
45 | -ms-flex-pack: start;
46 | } @else if ($align == "flex-end") {
47 | -ms-flex-pack: end;
48 | } @else if ($align == "space-around") {
49 | -ms-flex-pack: distribute;
50 | } @else if ($align == "space-between") {
51 | -ms-flex-pack: justify;
52 | } @else {
53 | -ms-flex-pack: $align;
54 | }
55 | justify-content: $align;
56 | }
57 |
58 | @mixin align-content($align){
59 | -webkit-align-content: $align;
60 | @if ($align == "flex-start") {
61 | -ms-flex-pack: start;
62 | } @else if ($align == "flex-end") {
63 | -ms-flex-pack: end;
64 | } @else if ($align == "space-around") {
65 | -ms-flex-pack: distribute;
66 | } @else if ($align == "space-between") {
67 | -ms-flex-pack: justify;
68 | } @else if ($align == "center") {
69 | -ms-flex-pack: center;
70 | } @else if ($align == "stretch") {
71 | -ms-flex-pack: stretch;
72 | } @else {
73 | -ms-flex-pack: $align;
74 | }
75 | align-content: $align;
76 | }
77 |
78 | @mixin align-items($valign) {
79 | -webkit-align-items: $valign;
80 | @if ($valign == "flex-start") {
81 | -ms-flex-align: start;
82 | } @else if ($valign == "flex-end") {
83 | -ms-flex-align: end;
84 | } @else {
85 | -ms-flex-align: $valign;
86 | }
87 | align-items: $valign;
88 | }
89 |
90 | @mixin align-self($valign) {
91 | -webkit-align-self: $valign;
92 | @if ($valign == "flex-start") {
93 | -ms-flex-item-align: start;
94 | } @else if ($valign == "flex-end") {
95 | -ms-flex-item-align: end;
96 | } @else {
97 | -ms-flex-item-align: $valign;
98 | }
99 | align-self: $valign;
100 | }
101 |
102 | @mixin order($order) {
103 | -webkit-order: $order;
104 | -ms-flex-order: $order;
105 | order: $order
106 | }
107 |
108 | @mixin make-container($gutter: 30px) {
109 | margin-right: auto;
110 | margin-left: auto;
111 | padding-left: ($gutter / 2);
112 | padding-right: ($gutter / 2);
113 | }
114 |
115 | @mixin make-row($gutter: 30px) {
116 | margin-left: ceil(($gutter / -2));
117 | margin-right: floor(($gutter / -2));
118 | }
119 |
120 | @mixin make-col($gutter: 30px) {
121 | padding-left: ceil(($gutter / 2));
122 | padding-right: floor(($gutter / 2));
123 | }
124 |
125 | @mixin make-grid($resolution, $count: 12) {
126 | .col-#{$resolution}-preffix-0 {
127 | margin-left: 0%;
128 | }
129 |
130 | @for $i from 1 through $count {
131 | .col-#{$resolution}-#{$i} {
132 | @include flex-basis(percentage($i / $count));
133 | }
134 |
135 | .col-#{$resolution}-preffix-#{$i} {
136 | margin-left: percentage($i / $count);
137 | }
138 | }
139 | }
140 |
141 | @mixin make-fallback($resolution, $count: 12) {
142 | @for $i from 1 through $count {
143 | .col-xs-#{$i}{
144 | margin-left: auto;
145 | margin-right: auto;
146 | max-width: percentage($i / $count);
147 | }
148 | }
149 |
150 | @for $i from 1 through $count {
151 | .col-sm-#{$i}{
152 | margin-left: auto;
153 | margin-right: auto;
154 | max-width: percentage($i / $count);
155 | }
156 | }
157 |
158 | @for $i from 1 through $count {
159 | .col-md-#{$i}{
160 | margin-left: auto;
161 | margin-right: auto;
162 | max-width: percentage($i / $count);
163 | }
164 | }
165 |
166 | @for $i from 1 through $count {
167 | .col-lg-#{$i} {
168 | margin-left: auto;
169 | margin-right: auto;
170 | max-width: percentage($i / $count);
171 | }
172 | }
173 |
174 | [class*="col-xs-preffix-"],
175 | [class*="col-sm-preffix-"],
176 | [class*="col-md-preffix-"],
177 | [class*="col-lg-preffix-"]{
178 | margin-left: auto;
179 | }
180 | }
181 |
182 | @mixin make-grid-system($resolution) {
183 | .row-#{$resolution}-center {
184 | @include justify-content(center);
185 | }
186 |
187 | .row-#{$resolution}-left {
188 | @include justify-content(flex-start);
189 | }
190 |
191 | .row-#{$resolution}-right {
192 | @include justify-content(flex-end);
193 | }
194 |
195 | .row-#{$resolution}-justify {
196 | @include justify-content(space-between);
197 | }
198 |
199 | .row-#{$resolution}-around {
200 | @include justify-content(space-around);
201 | }
202 |
203 | .row-#{$resolution}-top {
204 | @include align-items(flex-start);
205 | }
206 |
207 | .row-#{$resolution} {
208 | @include flex-direction(row);
209 | }
210 |
211 | .row-#{$resolution}-reverse {
212 | @include flex-direction(row-reverse);
213 | }
214 |
215 | .row-#{$resolution}-middle {
216 | @include align-items(center);
217 | }
218 |
219 | .row-#{$resolution}-bottom {
220 | @include align-items(flex-end);
221 | }
222 |
223 | .col-#{$resolution}-top {
224 | @include align-self(flex-start);
225 | }
226 |
227 | .col-#{$resolution}-middle {
228 | @include align-self(center);
229 | }
230 |
231 | .col-#{$resolution}-bottom {
232 | @include align-self(flex-end);
233 | }
234 |
235 | .row > {
236 | @include make-grid($resolution, $column-count);
237 | }
238 | }
--------------------------------------------------------------------------------
/demo/sass/modules/tm-grid/_tm-grid.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @section TM Grid System
3 | *
4 | * @description A powerful and flexible css flex grid system
5 | *
6 | * @author Evgeniy Gusarov
7 | * @link https://ua.linkedin.com/pub/evgeniy-gusarov/8a/a40/54a
8 | * @version 1.0.0
9 | */
10 |
11 | @import "_tm-grid-builder.scss";
12 |
13 | $column-count: 12;
14 | $column-width: 70px;
15 | $gutter-width: 30px;
16 |
17 | $row-ws: $gutter-width * 2;
18 |
19 | $container-xs: 300px;
20 | $container-sm: 720px + $gutter-width;
21 | $container-md: 940px + $gutter-width;
22 | $container-lg: $column-count*$column-width + $gutter-width*($column-count);
23 |
24 | .container {
25 | @include make-container($gutter-width);
26 | min-width: $container-xs;
27 | max-width: $screen-xs-min;
28 |
29 | @media (min-width: $screen-sm-min) {
30 | max-width: $container-sm;
31 | }
32 | @media (min-width: $screen-md-min) {
33 | max-width: $container-md;
34 | }
35 | @media (min-width: $screen-lg-min) {
36 | max-width: $container-lg;
37 | }
38 | }
39 |
40 | .container-fluid {
41 | @include make-container($gutter-width);
42 | }
43 |
44 | .row {
45 | @include make-row($gutter-width);
46 | }
47 |
48 | [class*='col-'] {
49 | @include make-col($gutter-width);
50 | }
51 |
52 | html.lt-ie10 * + [class*='col-'],
53 | html.lt-ie10 * + .row,
54 | * + [class*='col-'],
55 | * + .row {
56 | margin-top: $row-ws;
57 | }
58 |
59 | html.lt-ie10 .row-no-gutter, .row-no-gutter {
60 | margin-left: 0;
61 | margin-right: 0;
62 |
63 | > [class*='col'] {
64 | padding-left: 0;
65 | padding-right: 0;
66 | }
67 |
68 | > * + [class*='col'] {
69 | margin-top: 0;
70 | }
71 | }
72 |
73 | @media (min-width: $screen-xs-min) {
74 | * + [class*='col-xs-'] {
75 | margin-top: 0;
76 | }
77 |
78 | .row {
79 | @include make-flex();
80 | @include flex(0 1 auto);
81 | @include flex-direction(row);
82 | @include flex-wrap(wrap);
83 | }
84 |
85 | .row > [class*='col'] {
86 | @include flex(0 0 auto);
87 | @include flex-basis(100%);
88 | }
89 |
90 | @include make-grid-system("xs");
91 | }
92 |
93 | @media (min-width: $screen-sm-min) {
94 | * + [class*='col-sm-'] {
95 | margin-top: 0;
96 | }
97 |
98 | @include make-grid-system("sm");
99 | }
100 |
101 | @media (min-width: $screen-md-min) {
102 | * + [class*='col-md-'] {
103 | margin-top: 0;
104 | }
105 |
106 | @include make-grid-system("md");
107 | }
108 |
109 | @media (min-width: $screen-lg-min) {
110 | * + [class*='col-lg-'] {
111 | margin-top: 0;
112 | }
113 |
114 | @include make-grid-system("lg");
115 | }
116 |
117 | html.lt-ie10 {
118 | .row > {
119 | @include make-fallback($column-count);
120 | }
121 | }
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
--------------------------------------------------------------------------------
/demo/video/video-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/demo/video/video-bg.jpg
--------------------------------------------------------------------------------
/demo/video/video-bg.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/demo/video/video-bg.mp4
--------------------------------------------------------------------------------
/documentation/README.md:
--------------------------------------------------------------------------------
1 | # theme-documentation
2 | New Theme Documentation
3 |
--------------------------------------------------------------------------------
/documentation/config.php:
--------------------------------------------------------------------------------
1 | $section_dirname) {
30 | $section_json_file = dirname(__FILE__) . '/sections/' . $section_dirname . '/section.json';
31 | // Check if section json file exists
32 | if (file_exists($section_json_file)):
33 | $section_string = file_get_contents($section_json_file);
34 | $current_section = json_decode($section_string, true);
35 |
36 | if (empty($current_section)) {
37 | echo "
Section $section_dirname JSON empty or formatted wrong";
38 | }
39 |
40 | $section_id = $current_section['id'];
41 | $section_title = $current_section['translations'][$lang];
42 | $section_path = 'index.php?lang=' . $lang . '§ion=' . $section_id;
43 |
44 | // Active class
45 | $active_class = '';
46 | if ($section_id == $_GET['section']) {
47 | $active_class = ' opened';
48 | }
49 |
50 | // Get Articles List
51 | $section_articles = getArticles($current_section);
52 |
53 | $html .= '
' . $section_title . '';
54 |
55 | // Generate articles navigation
56 | if (!empty($section_articles)) {
57 | $html .= '';
58 | foreach ($section_articles as $key => $article) {
59 | $article_id = $article['id'];
60 | $article_name = $article['translations'][$lang];
61 |
62 | $article_path = '#' . $article_id;
63 | // Update article path if first in article section
64 | if ($key == 0) {
65 | $article_path = 'index.php?lang=' . $lang . '§ion=' . $section_id .'#';
66 | }
67 | // Update article path if not in article section
68 | else if ($section_param != $section_id) {
69 | $article_path = 'index.php?lang=' . $lang . '§ion=' . $section_id . '#' . $article_id;
70 | }
71 | $html .= '- ' . $article_name . '
';
72 | }
73 | $html .= '
';
74 | }
75 | $html .= '';
76 | else:
77 | die("Section $section_dirname JSON file not found");
78 | endif;
79 |
80 | }
81 | return $html;
82 | }
83 |
84 | /**
85 | * Includes articles files
86 | * @param [array] $sections [Array with sections data]
87 | * @param [string] $lang [Current language]
88 | * @param [string] $section_param [Current section]
89 | */
90 | function includeSection($sections, $lang, $section_param)
91 | {
92 | $section_json_file = dirname(__FILE__) . '/sections/' . $section_param . '/section.json';
93 |
94 | if (file_exists($section_json_file)):
95 | $section_string = file_get_contents($section_json_file);
96 | $current_section = json_decode($section_string, true);
97 |
98 | $section_id = $current_section['id'];
99 | $section_articles = $current_section['articles'];
100 |
101 | echo "
";
102 | // Load section description
103 | $section_desc = dirname(__FILE__) . '/sections/' . $section_param . '/' . $lang . '/__description.php';
104 | if (file_exists($section_desc)) {
105 | echo "";
106 | include_once $section_desc;
107 | echo "";
108 | } else {
109 | echo "Section __description.php file is missing.";
110 | }
111 |
112 | foreach ($section_articles as $key => $article) {
113 | $article_id = $article['id'];
114 | echo "";
115 | $article_path = dirname(__FILE__) . '/sections/' . $section_param . '/' . $lang . '/' . $article_id . '.php';
116 | if (file_exists($article_path)) {
117 | include_once $article_path;
118 | } else {
119 | echo "Article $article_id not found.";
120 | }
121 | echo "";
122 | }
123 | echo "";
124 | else:
125 | die("Section $section_dirname JSON file not found");
126 | endif;
127 | }
128 |
129 | /**
130 | * Documentation Search
131 | * @param string $dir Documentation sections directory
132 | * @return array Array with files, that contain search request value
133 | */
134 | function search_dir($dir)
135 | {
136 | global $request, $seen;
137 |
138 | $dirs = array();
139 | $pages = array();
140 |
141 | $regex = "/" . preg_quote($request,'/') . "/";
142 | $seen[] = realpath($dir);
143 |
144 | if (is_readable($dir) && ($d = dir($dir))) {
145 |
146 | while (false != ($f = $d->read())) {
147 | $path = $d->path . '/' . $f;
148 |
149 | if (is_file($path) && is_readable($path)) {
150 | $realpath = realpath($path);
151 |
152 | if (in_array($realpath, $seen)) {
153 | continue;
154 | } else {
155 | $seen[] = $realpath;
156 | }
157 |
158 | $file = join(' ', file($path));
159 |
160 | if (preg_match($regex, $file)) {
161 | if ('json' != substr($path, strrpos($path, '.') + 1 )) {
162 | $path_array = explode('/', $path);
163 | $sect_name = substr($path_array[3], 0, strpos($path_array[3], '.'));
164 |
165 | if ($sect_name == '__description') {
166 | $sect_hash = '';
167 | } else {
168 | $sect_hash = '#' . $sect_name;
169 | }
170 |
171 | array_push($pages, array(
172 | 'lang' => $path_array[2],
173 | 'section' => $path_array[1],
174 | 'hash' => $sect_hash,
175 | )
176 | );
177 | }
178 | }
179 |
180 | } else {
181 | if (is_dir($path) && ('.' != $f) && ('..' != $f)) {
182 | array_push($dirs, $path);
183 | }
184 | }
185 | }
186 | $d->close();
187 | }
188 |
189 | foreach ($dirs as $subdir) {
190 | $realdir = realpath($subdir);
191 |
192 | if (!in_array($realdir, $seen)) {
193 | $seen[] = $realdir;
194 | $pages = array_merge($pages, search_dir($subdir));
195 | }
196 | }
197 |
198 | return $pages;
199 | }
--------------------------------------------------------------------------------
/documentation/img/chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/chrome.png
--------------------------------------------------------------------------------
/documentation/img/fancybox_buttons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/fancybox_buttons.png
--------------------------------------------------------------------------------
/documentation/img/fancybox_loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/fancybox_loading.gif
--------------------------------------------------------------------------------
/documentation/img/fancybox_overlay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/fancybox_overlay.png
--------------------------------------------------------------------------------
/documentation/img/fancybox_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/fancybox_sprite.png
--------------------------------------------------------------------------------
/documentation/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/favicon.ico
--------------------------------------------------------------------------------
/documentation/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/favicon.png
--------------------------------------------------------------------------------
/documentation/img/firefox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/firefox.png
--------------------------------------------------------------------------------
/documentation/img/ie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/ie.png
--------------------------------------------------------------------------------
/documentation/img/ie8-panel/warning_bar_0000_us.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/ie8-panel/warning_bar_0000_us.jpg
--------------------------------------------------------------------------------
/documentation/img/safari.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/img/safari.png
--------------------------------------------------------------------------------
/documentation/index.php:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
<?php echo $doc_title; ?>
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
35 |
36 |
37 |
38 |
39 |
40 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
75 |
82 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
94 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
129 |
130 |
131 |
132 |
133 |
134 |
--------------------------------------------------------------------------------
/documentation/js/device.min.js:
--------------------------------------------------------------------------------
1 | /*! device.js 0.1.61 */
2 | (function () {
3 | var a, b, c, d, e, f, g, h, i, j;
4 | a = window.device, window.device = {}, c = window.document.documentElement, j = window.navigator.userAgent.toLowerCase(), device.ios = function () {
5 | return device.iphone() || device.ipod() || device.ipad()
6 | }, device.iphone = function () {
7 | return d("iphone")
8 | }, device.ipod = function () {
9 | return d("ipod")
10 | }, device.ipad = function () {
11 | return d("ipad")
12 | }, device.android = function () {
13 | return d("android")
14 | }, device.androidPhone = function () {
15 | return device.android() && d("mobile")
16 | }, device.androidTablet = function () {
17 | return device.android() && !d("mobile")
18 | }, device.blackberry = function () {
19 | return d("blackberry") || d("bb10") || d("rim")
20 | }, device.blackberryPhone = function () {
21 | return device.blackberry() && !d("tablet")
22 | }, device.blackberryTablet = function () {
23 | return device.blackberry() && d("tablet")
24 | }, device.windows = function () {
25 | return d("windows")
26 | }, device.windowsPhone = function () {
27 | return device.windows() && d("phone")
28 | }, device.windowsTablet = function () {
29 | return device.windows() && d("touch") && !device.windowsPhone()
30 | }, device.fxos = function () {
31 | return(d("(mobile;") || d("(tablet;")) && d("; rv:")
32 | }, device.fxosPhone = function () {
33 | return device.fxos() && d("mobile")
34 | }, device.fxosTablet = function () {
35 | return device.fxos() && d("tablet")
36 | }, device.meego = function () {
37 | return d("meego")
38 | }, device.cordova = function () {
39 | return window.cordova && "file:" === location.protocol
40 | }, device.nodeWebkit = function () {
41 | return"object" == typeof window.process
42 | }, device.mobile = function () {
43 | return device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone() || device.meego()
44 | }, device.tablet = function () {
45 | return device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() || device.fxosTablet()
46 | }, device.desktop = function () {
47 | return!device.tablet() && !device.mobile()
48 | }, device.portrait = function () {
49 | return window.innerHeight / window.innerWidth > 1
50 | }, device.landscape = function () {
51 | return window.innerHeight / window.innerWidth < 1
52 | }, device.noConflict = function () {
53 | return window.device = a, this
54 | }, d = function (a) {
55 | return-1 !== j.indexOf(a)
56 | }, f = function (a) {
57 | var b;
58 | return b = new RegExp(a, "i"), c.className.match(b)
59 | }, b = function (a) {
60 | return f(a) ? void 0 : c.className += " " + a
61 | }, h = function (a) {
62 | return f(a) ? c.className = c.className.replace(a, "") : void 0
63 | }, device.ios() ? device.ipad() ? b("ios ipad tablet") : device.iphone() ? b("ios iphone mobile") : device.ipod() && b("ios ipod mobile") : b(device.android() ? device.androidTablet() ? "android tablet" : "android mobile" : device.blackberry() ? device.blackberryTablet() ? "blackberry tablet" : "blackberry mobile" : device.windows() ? device.windowsTablet() ? "windows tablet" : device.windowsPhone() ? "windows mobile" : "desktop" : device.fxos() ? device.fxosTablet() ? "fxos tablet" : "fxos mobile" : device.meego() ? "meego mobile" : device.nodeWebkit() ? "node-webkit" : "desktop"), device.cordova() && b("cordova"), e = function () {
64 | return device.landscape() ? (h("portrait"), b("landscape")) : (h("landscape"), b("portrait"))
65 | }, i = "onorientationchange"in window, g = i ? "orientationchange" : "resize", window.addEventListener ? window.addEventListener(g, e, !1) : window.attachEvent ? window.attachEvent(g, e) : window[g] = e, e()
66 | }).call(this);
--------------------------------------------------------------------------------
/documentation/js/jquery.easing.1.3.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
3 | *
4 | * Uses the built in easing capabilities added In jQuery 1.1
5 | * to offer multiple easing options
6 | *
7 | * TERMS OF USE - jQuery Easing
8 | *
9 | * Open source under the BSD License.
10 | *
11 | * Copyright © 2008 George McGinley Smith
12 | * All rights reserved.
13 | *
14 | * Redistribution and use in source and binary forms, with or without modification,
15 | * are permitted provided that the following conditions are met:
16 | *
17 | * Redistributions of source code must retain the above copyright notice, this list of
18 | * conditions and the following disclaimer.
19 | * Redistributions in binary form must reproduce the above copyright notice, this list
20 | * of conditions and the following disclaimer in the documentation and/or other materials
21 | * provided with the distribution.
22 | *
23 | * Neither the name of the author nor the names of contributors may be used to endorse
24 | * or promote products derived from this software without specific prior written permission.
25 | *
26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
34 | * OF THE POSSIBILITY OF SUCH DAMAGE.
35 | *
36 | */
37 |
38 | // t: current time, b: begInnIng value, c: change In value, d: duration
39 | jQuery.easing['jswing'] = jQuery.easing['swing'];
40 |
41 | jQuery.extend( jQuery.easing,
42 | {
43 | def: 'easeOutQuad',
44 | swing: function (x, t, b, c, d) {
45 | //alert(jQuery.easing.default);
46 | return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
47 | },
48 | easeInQuad: function (x, t, b, c, d) {
49 | return c*(t/=d)*t + b;
50 | },
51 | easeOutQuad: function (x, t, b, c, d) {
52 | return -c *(t/=d)*(t-2) + b;
53 | },
54 | easeInOutQuad: function (x, t, b, c, d) {
55 | if ((t/=d/2) < 1) return c/2*t*t + b;
56 | return -c/2 * ((--t)*(t-2) - 1) + b;
57 | },
58 | easeInCubic: function (x, t, b, c, d) {
59 | return c*(t/=d)*t*t + b;
60 | },
61 | easeOutCubic: function (x, t, b, c, d) {
62 | return c*((t=t/d-1)*t*t + 1) + b;
63 | },
64 | easeInOutCubic: function (x, t, b, c, d) {
65 | if ((t/=d/2) < 1) return c/2*t*t*t + b;
66 | return c/2*((t-=2)*t*t + 2) + b;
67 | },
68 | easeInQuart: function (x, t, b, c, d) {
69 | return c*(t/=d)*t*t*t + b;
70 | },
71 | easeOutQuart: function (x, t, b, c, d) {
72 | return -c * ((t=t/d-1)*t*t*t - 1) + b;
73 | },
74 | easeInOutQuart: function (x, t, b, c, d) {
75 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
76 | return -c/2 * ((t-=2)*t*t*t - 2) + b;
77 | },
78 | easeInQuint: function (x, t, b, c, d) {
79 | return c*(t/=d)*t*t*t*t + b;
80 | },
81 | easeOutQuint: function (x, t, b, c, d) {
82 | return c*((t=t/d-1)*t*t*t*t + 1) + b;
83 | },
84 | easeInOutQuint: function (x, t, b, c, d) {
85 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
86 | return c/2*((t-=2)*t*t*t*t + 2) + b;
87 | },
88 | easeInSine: function (x, t, b, c, d) {
89 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
90 | },
91 | easeOutSine: function (x, t, b, c, d) {
92 | return c * Math.sin(t/d * (Math.PI/2)) + b;
93 | },
94 | easeInOutSine: function (x, t, b, c, d) {
95 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
96 | },
97 | easeInExpo: function (x, t, b, c, d) {
98 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
99 | },
100 | easeOutExpo: function (x, t, b, c, d) {
101 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
102 | },
103 | easeInOutExpo: function (x, t, b, c, d) {
104 | if (t==0) return b;
105 | if (t==d) return b+c;
106 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
107 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
108 | },
109 | easeInCirc: function (x, t, b, c, d) {
110 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
111 | },
112 | easeOutCirc: function (x, t, b, c, d) {
113 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
114 | },
115 | easeInOutCirc: function (x, t, b, c, d) {
116 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
117 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
118 | },
119 | easeInElastic: function (x, t, b, c, d) {
120 | var s=1.70158;var p=0;var a=c;
121 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
122 | if (a < Math.abs(c)) { a=c; var s=p/4; }
123 | else var s = p/(2*Math.PI) * Math.asin (c/a);
124 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
125 | },
126 | easeOutElastic: function (x, t, b, c, d) {
127 | var s=1.70158;var p=0;var a=c;
128 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
129 | if (a < Math.abs(c)) { a=c; var s=p/4; }
130 | else var s = p/(2*Math.PI) * Math.asin (c/a);
131 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
132 | },
133 | easeInOutElastic: function (x, t, b, c, d) {
134 | var s=1.70158;var p=0;var a=c;
135 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
136 | if (a < Math.abs(c)) { a=c; var s=p/4; }
137 | else var s = p/(2*Math.PI) * Math.asin (c/a);
138 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
139 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
140 | },
141 | easeInBack: function (x, t, b, c, d, s) {
142 | if (s == undefined) s = 1.70158;
143 | return c*(t/=d)*t*((s+1)*t - s) + b;
144 | },
145 | easeOutBack: function (x, t, b, c, d, s) {
146 | if (s == undefined) s = 1.70158;
147 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
148 | },
149 | easeInOutBack: function (x, t, b, c, d, s) {
150 | if (s == undefined) s = 1.70158;
151 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
152 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153 | },
154 | easeInBounce: function (x, t, b, c, d) {
155 | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
156 | },
157 | easeOutBounce: function (x, t, b, c, d) {
158 | if ((t/=d) < (1/2.75)) {
159 | return c*(7.5625*t*t) + b;
160 | } else if (t < (2/2.75)) {
161 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
162 | } else if (t < (2.5/2.75)) {
163 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
164 | } else {
165 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
166 | }
167 | },
168 | easeInOutBounce: function (x, t, b, c, d) {
169 | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
170 | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
171 | }
172 | });
173 |
174 | /*
175 | *
176 | * TERMS OF USE - EASING EQUATIONS
177 | *
178 | * Open source under the BSD License.
179 | *
180 | * Copyright © 2001 Robert Penner
181 | * All rights reserved.
182 | *
183 | * Redistribution and use in source and binary forms, with or without modification,
184 | * are permitted provided that the following conditions are met:
185 | *
186 | * Redistributions of source code must retain the above copyright notice, this list of
187 | * conditions and the following disclaimer.
188 | * Redistributions in binary form must reproduce the above copyright notice, this list
189 | * of conditions and the following disclaimer in the documentation and/or other materials
190 | * provided with the distribution.
191 | *
192 | * Neither the name of the author nor the names of contributors may be used to endorse
193 | * or promote products derived from this software without specific prior written permission.
194 | *
195 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
196 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
197 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
198 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
199 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
200 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
201 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
202 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
203 | * OF THE POSSIBILITY OF SUCH DAMAGE.
204 | *
205 | */
--------------------------------------------------------------------------------
/documentation/js/jquery.rd-navbar.min.js:
--------------------------------------------------------------------------------
1 | (function(a){var n=a(window).width(),h,m,k=0,l=function(b,c){this.options=c;this.$source=a(b)};l.prototype={init:function(){this.createDOM();this.createListeners()},createDOM:function(){a(".rd-mobilemenu").append(this.createNavDOM());a("html").hasClass("desktop")&&1600<=n?(a("body").delegate("*","mousewheel",this.scroll),a("body").delegate("*","touchmove",this.scroll),a("body").delegate("*","touchend",this.touchend),a("body").delegate("*","touchstart",{type:"click"},this.close)):a(".rd-mobilepanel_toggle, .page-content, .rd-mobilemenu").removeClass("active")},
2 | createNavDOM:function(){for(var b=a("
",{"class":"rd-mobilemenu_ul"}),c=this.$source.children(),d=0;d a").hasClass("opened")||a(h).css({display:"none"}),
3 | a(f).find("> a").each(function(){$this=a(this);$this.addClass("rd-with-ul").on("click",function(b){b.preventDefault();$this=a(this);$this.hasClass("rd-with-ul")&&!$this.hasClass("active")?(a(".rd-with-ul").removeClass("active"),b=$this.addClass("active").parent().find(".rd-mobilemenu_submenu"),b.stop().slideDown(),a(".rd-mobilemenu_submenu").not(b).stop().slideUp()):(b=$this.removeClass("active").parent().find(".rd-mobilemenu_submenu"),b.stop().slideUp())})})}f&&b.append(f)}b.find("a").each(function(){-1<
4 | window.location.href.indexOf(a(this).attr("href"))&&(a(this).parents(".rd-mobilemenu_ul").find("a").removeClass("focus"),a(this).addClass("focus"))});return b},createListeners:function(){this.panelHeight=a(".rd-mobilepanel").outerHeight();this.createToggleListener();this.createResizeListener();this.createScrollListener();this.createItemScrollListener()},createToggleListener:function(){var b=this,c;c=b.isMobile()?"touchstart":"click";a("body").delegate(".rd-mobilepanel_toggle",c,function(c){c.preventDefault();
5 | c.stopPropagation();c=a(".rd-mobilemenu");a(this).toggleClass("active");a(".page-content").toggleClass("active");console.log("toggle");c.hasClass("active")?(a(this).removeClass("active"),c.removeClass("active"),a("body").undelegate("*","mousewheel",b.scroll),a("body").undelegate("*","touchmove",b.scroll),a("body").undelegate("*","touchend",b.touchend)):(a(this).addClass("active"),c.addClass("active"),a("body").delegate("*","mousewheel",b.scroll),a("body").delegate("*","touchmove",b.scroll),a("body").delegate("*",
6 | "touchend",b.touchend))})},createResizeListener:function(){var b=this;a(window).on("resize",function(){var c=a(".rd-mobilemenu");"none"==c.css("display")&&(c.removeClass("active"),a(".rd-mobilepanel_toggle").removeClass("active"),a("body").undelegate("*","mousewheel",b.scroll),a("body").undelegate("*","touchmove",b.scroll),a("body").undelegate("*","touchend",b.touchend))})},createScrollListener:function(){function b(){function b(){e.addClass("fixed");f.css({transform:"translateY(50.25px)","font-size":24})}
7 | var e=a(".rd-mobilepanel"),f=a(".rd-mobilepanel_title"),g=a(document).scrollTop();1067g?(e.removeClass("fixed"),a("body").removeClass("navbar-stickup").removeClass("navbar-fixed"),g>c&&e.hasClass("fixed"),f.css({transform:"translateY("+g/4+"px)","font-size":56-g/6.7})):(b(),a("body").removeClass("navbar-fixed").addClass("navbar-stickup")):(b(),a("body").removeClass("navbar-stickup").addClass("navbar-fixed"));c=g}a(".rd-mobilepanel");var c=0;a(window).on("scroll",b);a(window).on("resize",
8 | b);b()},createItemScrollListener:function(){a(".rd-mobilemenu_ul").find('a[href*="#"]').on("click",function(b){if(-1==window.location.search.indexOf(a(this).attr("data-section")))return!0;b.preventDefault();a(this).parents(".rd-mobilemenu_ul").find("a").removeClass("focus");a(this).addClass("focus");var c=this.hash;console.log(this.hash);""==this.hash?a("html, body").stop().animate({scrollTop:0},300,"swing",function(){window.location.hash=c}):(b=a(c),a("html, body").stop().animate({scrollTop:b.stickUpOffset().top+
9 | 2},300,"swing",function(){window.location.hash=c}))});a(document).on("scroll",function(b){var c=a(document).scrollTop(),d;a(".rd-mobilemenu_ul > li > a.rd-with-ul").each(function(){-1a(document).height()-100?(d.find("a").removeClass("focus"),d.find("> li:last-child a").addClass("focus")):d.find("a").each(function(){var b=a(this),d=a("#"+b.attr("data-id"));0c&&(b.parents(".rd-mobilemenu_ul").find("a").removeClass("focus"),b.addClass("focus"))}))})},scroll:function(b){var c=a(".rd-mobilemenu_ul"),d=b.originalEvent.targetTouches?b.originalEvent.targetTouches[0].pageX:b.pageX,e=b.originalEvent.targetTouches?b.originalEvent.targetTouches[0].pageY:b.pageY;if(e>c.stickUpOffset().top&&ec.stickUpOffset().left&&de-k){k=e;return}k=e;d=-25*(b.originalEvent.wheelDelta||-b.originalEvent.detail)}c.stop().scrollTop(c.scrollTop()+d)}else if(a("html").hasClass("desktop"))return!0;b.preventDefault();return!1},touchend:function(b){b=a(".rd-mobilemenu_ul");b.stop().animate({scrollTop:b.scrollTop()+(m?100:-100)},3E3,"easeOutQuint");h=void 0},close:function(b){if(b.originalEvent){var c=a(".rd-mobilemenu"),d=b.originalEvent.targetTouches?
12 | b.originalEvent.targetTouches[0].pageX:b.pageX,e=b.originalEvent.targetTouches?b.originalEvent.targetTouches[0].pageY:b.pageY;e>c.stickUpOffset().top&&ec.stickUpOffset().left&&d'+settings.text+'');
19 |
20 | $(containerIDhash).click(function(){
21 | $('html, body').stop().animate({scrollTop:0}, settings.scrollSpeed, settings.easingType);
22 | $('#'+settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType);
23 | return false;
24 | })
25 |
26 |
27 | $(window).scroll(function() {
28 | var sd = $(window).scrollTop();
29 | if(typeof document.body.style.maxHeight === "undefined") {
30 | $(containerIDhash).css({
31 | 'position': 'absolute',
32 | 'top': $(window).scrollTop() + $(window).height() - 50
33 | });
34 | }
35 | if ( sd > settings.min )
36 | $(containerIDhash).addClass('active');
37 | else
38 | $(containerIDhash).removeClass('active');
39 | });
40 | };
41 | })(jQuery);
42 |
--------------------------------------------------------------------------------
/documentation/js/script.min.js:
--------------------------------------------------------------------------------
1 | function isIE(){var a=navigator.userAgent.toLowerCase();return-1!=a.indexOf("msie")?parseInt(a.split("msie")[1]):!1}(function(a){a("html").hasClass("desktop")&&a(document).ready(function(){a().UItoTop({easingType:"easeOutQuart",containerClass:"toTop fa fa-angle-up"})})})(jQuery);
2 | $(function(){var a=document.querySelector&&document.querySelector('meta[name="viewport"]'),c=navigator.userAgent,b=function(){a.content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0"};a&&/iPhone|iPad/.test(c)&&!/Opera Mini/.test(c)&&(a.content="width=device-width, minimum-scale=1.0, maximum-scale=1.0",document.addEventListener("gesturestart",b,!1));void 0!=window.orientation&&(c.match(/ipod|ipad|iphone/gi)||$(".sf-menus li").each(function(){$(">ul",this)[0]&&$(">a",
3 | this).toggle(function(){return!1},function(){window.location.href=$(this).attr("href")})}))});var ua=navigator.userAgent.toLocaleLowerCase(),regV=/ipod|ipad|iphone/gi,result=ua.match(regV),userScale="";result||(userScale=",user-scalable=0");document.write('');
4 | (function(a){var c=a(".select");0
4 | This script work demonstration can be viewed in the section below.
5 |
6 |
7 |
8 | The demonstration is also available in a separate window:
9 | Open in a new tab
10 |
11 |
12 |
--------------------------------------------------------------------------------
/documentation/sections/demo/ru/__description.php:
--------------------------------------------------------------------------------
1 | Демо
2 |
3 |
4 | Демонстрацию работы скрипта можно увидеть в секции ниже.
5 |
6 |
7 |
8 | Также демонстрация доступна и в отдельном окне:
9 | Открыть в новой вкладке
10 |
11 |
12 |
--------------------------------------------------------------------------------
/documentation/sections/demo/section.json:
--------------------------------------------------------------------------------
1 | {
2 | "id":"demo",
3 | "translations":
4 | {
5 | "en":"Demo",
6 | "ru":"Демо"
7 | },
8 | "articles": {
9 |
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/documentation/sections/example/section.json:
--------------------------------------------------------------------------------
1 | {
2 | "id":"example",
3 | "translations":
4 | {
5 | "en":"Connection example",
6 | "ru":"Пример подключения"
7 | },
8 | "articles": {
9 |
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/__description.php:
--------------------------------------------------------------------------------
1 | How to exploit
2 |
3 |
4 | Below are the principles of working with the script
5 |
6 |
7 |
8 | Note: First of all, remember that RD Navbar is primarily a builder. There are practically no special rules in its layout or styling. The whole principle of working with RD Navbar is to stylize and adjust the corresponding navigation layouts, which also depend exclusively on the design and features of the product in which the script is implemented.
9 |
10 |
11 |
12 | Git repository
13 |
14 |
15 |
16 | Before becoming familiar with the information below, be sure to download the script itself and the demo from our public repository:
17 | Clickable
18 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/classes.php:
--------------------------------------------------------------------------------
1 |
2 | Class Map
3 |
4 |
5 |
6 | RD Navbar uses some CSS classes to display either changes in the navigation panel. The full list of available classes is as follows:
7 |
8 |
9 |
10 | -
11 | .rd-navbar - the main class for navbar creation
12 |
13 | -
14 | .rd-navbar-dropdown - the class that is used to create a dropdown menu
15 |
16 | -
17 | .rd-navbar-megamenu - the class that is used to create a megamenu
18 |
19 | -
20 | [data-rd-navbar-toggle] - the data attribute used to create the switches
21 |
22 | -
23 | .rd-navbar-submenu - the class that is added to the parent element .rd-navbar-dropdown, .rd-navbar-megamenu
24 |
25 | -
26 | .rd-navbar-submenu-toggle - the class that is used to create the switch of the submenu.
27 |
28 | -
29 | .rd-navbar--has-dropdown - the class that is added to the parent element .rd-navbar-dropdown
30 |
31 | -
32 | .rd-navbar--has-megamenu - the class that is added to the parent element .rd-navbar-megamenu
33 |
34 | -
35 | .focus - the class that is added to the .rd-navbar-submenu when the mouse is clicked on the hover
36 |
37 | -
38 | .opened - the class that is added to the .rd-navbar-submenu when switching the display of the submenu
39 |
40 | -
41 | .rd-navbar--is-clone - the class that is added to the clone-element of navbar
42 |
43 | -
44 | .rd-navbar--is-stuck - the class that is added when sticking of the Navbar to the original element or clone-element, depending on the settings.
45 |
46 |
47 |
48 |
49 | All classes that are not listed in the list above are exclusively optional and do not affect the operation of the RD Navbar.
50 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/general.php:
--------------------------------------------------------------------------------
1 |
2 | Principles of working with the script
3 |
4 |
5 |
6 | There may be absolutely any HTML layout for the creation of navigation. Everything depends solely on the template’s design and fantasy of the coder. However, all the navigation elements should be located inside the block with the class .rd-navbar
7 |
8 |
9 |
10 |
11 | <!-- RD Navbar -->
12 | <nav class="rd-navbar">
13 | ...
14 | </nav>
15 | <!-- END RD Navbar-->
16 |
17 |
18 |
19 |
20 | The principle of working with navbar is based on the usage of various layouts. The demo, for example, shows how one and the same markup looks on the mobile (.rd-navbar-fixed) and desktop (.rd-navbar-static) layouts. The titles of layouts can also be completely diverse, and up to the developer.
21 |
22 |
23 |
24 | In general, the realization of any navigation in the template using RD Navbar is reduced to using the following functional units of the script:
25 |
26 |
27 |
28 | -
29 | Adjustment of navbar’s layouts for the appropriate resolutions
30 |
31 | -
32 | Sticky panel setting
33 |
34 | -
35 | Navigation setting: dropdown and megamenus.
36 |
37 | -
38 | Setting switches (toggles)
39 |
40 | -
41 | Linker Adjustment
42 |
43 | -
44 | Single page navigation adjustment
45 |
46 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/layouts.php:
--------------------------------------------------------------------------------
1 |
2 | Adjustment of the navbar’s layouts
3 |
4 |
5 |
6 | RD Navbar is inherently responsive. While the vast majority of third-party solutions use the backup navigation to display desktop and mobile navigation versions, RD Navbar offers a radically different solution.
7 |
8 |
9 |
10 | The essence of working with Navbar layouts is to define specific layout classes (.rd-navbar-fixed, .rd-navbar-static, .rd-navbar-sidebar, etc.), which are hung on the main Navbar element with the class .rd- Navbar, depending on the current window size of the user’s browser.
11 |
12 |
13 |
14 | This approach allows you to quickly and without extra effort perform a complete restyling of navigation, depending on the specific resolution.
15 |
16 |
17 |
18 | To create a responsive navigation, navbar's layout classes are defined in a special responsive object when the script is initialized.
19 |
20 |
21 |
22 |
23 | ...
24 | o = $('.rd-navbar');
25 |
26 | o.RDNavbar({
27 | responsive: {
28 | 0: {
29 | layout: 'rd-navbar-fixed'
30 | },
31 | 768: {
32 | layout: 'rd-navbar-fullwidth'
33 | }
34 | 1200: {
35 | layout: 'rd-navbar-static'
36 | }
37 | }
38 | })
39 | ...
40 |
41 |
42 |
43 |
44 | If necessary, you can also specify additional navbar's layouts that will be displayed exclusively on the Touch devices using the deviceLayout attribute.
45 |
46 |
47 |
48 |
49 | ...
50 | o = $('.rd-navbar');
51 |
52 | o.RDNavbar({
53 | responsive: {
54 | 0: {
55 | layout: 'rd-navbar-fixed'
56 | deviceLayout: 'rd-navbar-fixed'
57 | },
58 | 768: {
59 | layout: 'rd-navbar-fullwidth'
60 | deviceLayout: 'rd-navbar-fixed'
61 | }
62 | 1200: {
63 | layout: 'rd-navbar-static'
64 | deviceLayout: 'rd-navbar-fixed'
65 | }
66 | }
67 | })
68 | ...
69 |
70 |
71 |
72 |
73 | Thus, you can achieve the effect of matching navigation styling, for example, to the Material Design standard on mobile devices.
74 |
75 |
76 |
77 | Also, if necessary, you can specify a responsive object using HTML. To do this, you should specify the following attributes
78 |
79 |
80 |
81 |
82 | <!-- RD Navbar -->
83 | <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fullwidth"
84 | data-lg-layout="rd-navbar-static" data-deviceLayout="rd-navbar-fixed">
85 |
86 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/links.php:
--------------------------------------------------------------------------------
1 |
2 | Linker Adjustment
3 |
4 |
5 |
6 | RD Navbar also supports the ability to link the current layout to other elements. So, for example, in the demo, navbar's layout is linked to the html tag for the demonstration. Thus, when changing the Navbar's Layout, the Layout class changes not only on the Navbar itself but also on linked elements with the addition of the suffix -linked.
7 |
8 |
9 |
10 | So, with the active .rd-navbar-fixed, the .rd-navbar-fixed-linked class will be added to the html tag.
11 |
12 |
13 |
14 | This functional will be very useful for shops where a product filter is usually displayed outside the navigation bar in the form of a sidebar. Using the linker RD Navbar, it is very easy and convenient to visually place this sidebar on the navbar panel as a product filter switch.
15 |
16 |
17 |
18 | In order to link the corresponding elements of the page outside the navbar, you need to use the linkedElements attribute, where an array of target HTML elements or CSS selectors for their selection is passed as the value.
19 |
20 |
21 |
22 |
23 | ...
24 | o = $('.rd-navbar');
25 |
26 | o.RDNavbar({
27 | linkedElements: [".magento-sidebar", $('.something-else')[0]]
28 | })
29 | ...
30 |
31 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/navigation.php:
--------------------------------------------------------------------------------
1 |
2 | Navigation setting
3 |
4 |
5 |
6 | RD Navbar supports usual drop-down menus as well as megamenus.
7 |
8 |
9 |
10 | In order to define the appropriate element as a drop-down menu or a megamenu, you need to use the .rd-navbar-dropdown and .rd-navbar-megamenu classes.
11 |
12 |
13 |
14 | Besides, RD Navbar supports the setting of interaction rules with menu items that contain submenus.
15 |
16 |
17 |
18 | For example, all menu items from a submenu contain the appropriate switches for displaying the submenu, by default. But, if necessary, you can specify the submenu display no the hover using the mouse. To do this, you must use the attribute focusOnHover: true for the corresponding Navbar layout class.
19 |
20 |
21 |
22 | For example, it's very convenient to display the submenu on the Hover on the desktop layout, while on the mobile one it does not make any sense. Using, responsive object navbar, we can very easily manipulate the behavior of the submenu.
23 |
24 |
25 |
26 |
27 | ...
28 | o = $('.rd-navbar');
29 |
30 | o.RDNavbar({
31 | responsive: {
32 | 0: {
33 | layout: 'rd-navbar-fixed',
34 | focusOnHover: false
35 | },
36 | 992: {
37 | layout: 'rd-navbar-static',
38 | focusOnHover: true
39 | }
40 | }
41 | })
42 | ...
43 |
44 |
45 |
46 |
47 | Also, for the simplicity and convenience of the navigation creation, you need some service classes on the elements and additional switch elements for the submenu. You don’t need to create these service elements and classes manually. The script will do it itself, simply set the flag domAppend: true.
48 |
49 |
50 |
51 |
52 | ...
53 | o = $('.rd-navbar');
54 |
55 | o.RDNavbar({
56 | domAppend: true
57 | })
58 | ...
59 |
60 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/onepage.php:
--------------------------------------------------------------------------------
1 |
2 | Single page navigation adjustment
3 |
4 |
5 |
6 | RD Navbar supports the functional for creating single page anchor page navigation.
7 |
8 |
9 |
10 | To implement anchor navigation on the page, you need to specify the hash tag of the identifier of the target anchor section with the attribute data-type = "anchor" as the value of the href attribute in the navigation links.
11 |
12 |
13 |
14 |
15 | ...
16 | <a href="#about">About</a>
17 | ...
18 |
19 | ...
20 | <section id="about" data-type="anchor">
21 | ...
22 | </section>
23 | ...
24 |
25 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/stickup.php:
--------------------------------------------------------------------------------
1 |
2 | Sticky panel setting
3 |
4 |
5 |
6 | In order to enable navbar sticking while scrolling, you need to use the attribute stickUp: true
7 |
8 |
9 |
10 |
11 | ...
12 | o = $('.rd-navbar');
13 |
14 | o.RDNavbar({
15 | responsive: {
16 | 0: {
17 | layout: 'rd-navbar-fixed',
18 | stickUp: false
19 | },
20 | 768: {
21 | layout: 'rd-navbar-fullwidth',
22 | stickUp: true
23 | }
24 | 1200: {
25 | layout: 'rd-navbar-static',
26 | stickUp: true
27 | }
28 | }
29 | })
30 | ...
31 |
32 |
33 |
34 |
35 |
36 | The sticky panel in the RD Navbar has two modes of operation: the original panel sticking and the clone-element sticking. To determine the sticking mode, you need to use the stickUpClone (true | false) attribute and specify the offset sticking from the top position of the navbar in the script settings. The stickUp attribute must be set in true.
37 |
38 |
39 |
40 |
41 | ...
42 | o = $('.rd-navbar');
43 |
44 | o.RDNavbar({
45 | responsive: {
46 | 0: {
47 | layout: 'rd-navbar-fixed',
48 | stickUp: false
49 | },
50 | 768: {
51 | layout: 'rd-navbar-fullwidth',
52 | stickUp: true,
53 | stickUpClone: true,
54 | stickUpOffset: '100%'
55 | }
56 | 1200: {
57 | layout: 'rd-navbar-static',
58 | stickUp: true,
59 | stickUpClone: true,
60 | stickUpOffset: '100%'
61 | }
62 | }
63 | })
64 | ...
65 |
66 |
67 |
68 |
69 | So, in this example, to create the sticking effect of Navbar, its clone version will be used as soon as the Navbar is completely scrolled on the page.
70 |
71 |
72 |
73 | Also, if necessary, you can specify a responsive object using HTML. To do this, you must specify the following attributes
74 |
75 |
76 |
77 |
78 | <!-- RD Navbar -->
79 | <nav class="rd-navbar" data-stick-up="true" data-md-stick-up="true" data-lg-stick-up="true">
80 |
81 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/en/toggles.php:
--------------------------------------------------------------------------------
1 |
2 | Setting switches (toggles)
3 |
4 |
5 |
6 | RD Navbar contains a very convenient system of toggles that can be used in various situations, for example, when you need to show / hide the navigation menu or search, or any other element of navbar.
7 |
8 |
9 |
10 | To create a switch, use the following markup
11 |
12 |
13 |
14 |
15 | ...
16 | <button data-rd-navbar-toggle=".element-1, #element-2, [data-type='element-3']."></button>
17 | ...
18 |
19 |
20 |
21 |
22 | , where data-rd-navbar-toggle contains the most common css selector of elements for which a toggle is needed.
23 |
24 |
25 |
26 | When the switch is activated, an .active class is hung on the element, which allows you to perform various manipulations with it: move, hide, display, zoom, etc.
27 |
28 |
29 |
30 | For example, in the demo, the toggles are used to display / hide menus, carts, search and dropdown with additional links.
31 |
32 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/__description.php:
--------------------------------------------------------------------------------
1 | Как использовать
2 |
3 |
4 | Ниже описаны принципы работы со скриптом
5 |
6 |
7 |
8 | Обратите внимание: Прежде всего стоит запомнить, что RD Navbar - это прежде всего конструктор.
9 | В его разметке или стилизации нет практически никаких особенных правил. Весь принцип работы с RD Navbar сводится
10 | к стилизации и настройке соответствующих лейаутов навигации, которые также зависят исключительно от дизайна и особенностей
11 | продукта, в котором скрипт внедряется.
12 |
13 |
14 |
15 | Git репозиторий
16 |
17 |
18 |
19 | Прежде чем ознакомиться с информацией ниже, обязательно скачайте сам скрипт и демо из нашего публичного репозитория:
20 | Кликабельно
21 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/classes.php:
--------------------------------------------------------------------------------
1 |
2 | Карта классов
3 |
4 |
5 |
6 | RD Navbar использует некоторые css классы для отображения тех или инных изменений в навигационной панели.
7 | Полный список доступных классов представлен ниже:
8 |
9 |
10 |
11 | -
12 | .rd-navbar - основной класс для создания навбара
13 |
14 | -
15 | .rd-navbar-dropdown - класс, который используется для создания выпадающего меню
16 |
17 | -
18 | .rd-navbar-megamenu - класс, который используется для создания мегаменю
19 |
20 | -
21 | [data-rd-navbar-toggle] - дата-атрибут, который используется для создания переключателей
22 |
23 | -
24 | .rd-navbar-submenu - класс, который добавляется на родительский элемент .rd-navbar-dropdown, .rd-navbar-megamenu
25 |
26 | -
27 | .rd-navbar-submenu-toggle - класс, который используется для создания переключателя подменю.
28 |
29 | -
30 | .rd-navbar--has-dropdown - класс, который добавляется на родительский элемент .rd-navbar-dropdown
31 |
32 | -
33 | .rd-navbar--has-megamenu - класс, который добавляется на родительский элемент .rd-navbar-megamenu
34 |
35 | -
36 | .focus - класс, который добавляется на .rd-navbar-submenu при ховере мышью
37 |
38 | -
39 | .opened - класс, который добавляется на .rd-navbar-submenu при переключении отображения субменю
40 |
41 | -
42 | .rd-navbar--is-clone - класс, который добавляется на клон-элемент навбара
43 |
44 | -
45 | .rd-navbar--is-stuck - класс, который добавляется при прилипании навбара на оригинальный элемент или
46 | клон-элемент, в зависимости от настроек.
47 |
48 |
49 |
50 |
51 | Все классы, которые не указаны в списке выше являются сугубо опциональными и никак не влияют на работу RD Navbar.
52 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/general.php:
--------------------------------------------------------------------------------
1 |
2 | Принципы работы со скриптом
3 |
4 |
5 |
6 | HTML Разметка для создания навигации может быть совершенно любой. Все зависит исключительно от дизайна
7 | шаблона и фантазии кодера. Тем не менее, все элементы навигации должны располагаться внутри блока с классом .rd-navbar
8 |
9 |
10 |
11 |
12 | <!-- RD Navbar -->
13 | <nav class="rd-navbar">
14 | ...
15 | </nav>
16 | <!-- END RD Navbar-->
17 |
18 |
19 |
20 |
21 | Принцип работы с навбаром основан на использовании различных лейаутов. В демо, для примера, показано, как одна и также
22 | разметка выглядит в мобильном (.rd-navbar-fixed) и десктопном (.rd-navbar-static) лейаутах. Сами названия лейаутов также
23 | могут быть совершенно любыми, на усмотрение разработчика.
24 |
25 |
26 |
27 | В общем виде, реализация любой навигации в шаблоне с использованием RD Navbar сводится к использованию следующих функциональных
28 | единиц скрипта:
29 |
30 |
31 |
32 | -
33 | Настройка лейаутов навбара для соответствующих разрешений
34 |
35 | -
36 | Настройка прилипающей панели
37 |
38 | -
39 | Настройка навигации: выпадающие и мега- меню.
40 |
41 | -
42 | Настройка переключатей (тоглов)
43 |
44 | -
45 | Настройка линковщика
46 |
47 | -
48 | Настройка одностраничной навигации
49 |
50 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/layouts.php:
--------------------------------------------------------------------------------
1 |
2 | Настройка лейаутов навбара
3 |
4 |
5 |
6 | RD Navbar по своей природе ориентирован на респонсивность. В то время, когда подавляющее количество сторонних
7 | решений использует дублирование навигации для отображения десктопной и мобильной версий навигации, RD Navbar
8 | предлагает кардинально другое решение.
9 |
10 |
11 |
12 | Суть работы с лейаутами навбара сводится к определению специфических классов лейаутов (.rd-navbar-fixed,
13 | .rd-navbar-static, .rd-navbar-sidebar и т.д.), которые навешиваются на основной элемент навбара с классом .rd-navbar, в зависимости
14 | от текущего размера окна браузера у пользователя.
15 |
16 |
17 |
18 | Такой подход позволяет быстро и без особых усилий выполнять полную рестилизацию навигации в зависимости от
19 | определенного разрешения.
20 |
21 |
22 |
23 | Для создания респонсивной навигации классы лейаутов навбара определяются в специальном объекте responsive при инициализации
24 | скрипта.
25 |
26 |
27 |
28 |
29 | ...
30 | o = $('.rd-navbar');
31 |
32 | o.RDNavbar({
33 | responsive: {
34 | 0: {
35 | layout: 'rd-navbar-fixed'
36 | },
37 | 768: {
38 | layout: 'rd-navbar-fullwidth'
39 | }
40 | 1200: {
41 | layout: 'rd-navbar-static'
42 | }
43 | }
44 | })
45 | ...
46 |
47 |
48 |
49 |
50 | Также, в случае необходимости, можно указать дополнительные лейауты навбара, которые будут отображаться исключительно
51 | на Touch устройствах, воспользовавшись атрибутом deviceLayout.
52 |
53 |
54 |
55 |
56 | ...
57 | o = $('.rd-navbar');
58 |
59 | o.RDNavbar({
60 | responsive: {
61 | 0: {
62 | layout: 'rd-navbar-fixed'
63 | deviceLayout: 'rd-navbar-fixed'
64 | },
65 | 768: {
66 | layout: 'rd-navbar-fullwidth'
67 | deviceLayout: 'rd-navbar-fixed'
68 | }
69 | 1200: {
70 | layout: 'rd-navbar-static'
71 | deviceLayout: 'rd-navbar-fixed'
72 | }
73 | }
74 | })
75 | ...
76 |
77 |
78 |
79 |
80 | Таким образом, можно добиться эффекта соответствия стилизации навигации, например, стандарту Material Design на мобильных устройствах.
81 |
82 |
83 |
84 | Также, в случае необходимости, можно указать responsive object с помощью HTML. Для этого необходимо указать следующие аттрибуты
85 |
86 |
87 |
88 |
89 | <!-- RD Navbar -->
90 | <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fullwidth"
91 | data-lg-layout="rd-navbar-static" data-deviceLayout="rd-navbar-fixed">
92 |
93 |
94 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/links.php:
--------------------------------------------------------------------------------
1 |
2 | Настройка линковщика
3 |
4 |
5 |
6 | RD Navbar также поддерживает возможность линкования текущего лейаута на другие элементы. Так, например, в демо, лейаут навбара
7 | залинкован на тег html для демонстрации. Таким образом, при смене лейаута навбара, класс лейаута изменяется не только на самом
8 | навбаре, но и на залинкованых элементах с добавлением посфикса -linked.
9 |
10 |
11 |
12 | Так, при активном лейауте .rd-navbar-fixed, на тег html будет добавлен класс .rd-navbar-fixed-linked
13 |
14 |
15 |
16 | Данный функционал будет очень полезен для магазинов, где вне панели навигации в виде сайдбара обычно отображается
17 | фильтр продуктов. Используя линковщик RD Navbar, можно очень легко и удобно визуально поместить данный сайдбар
18 | на панель навбара в виде переключателя фильтра продуктов.
19 |
20 |
21 |
22 | Для того, чтобы залинковать соответствующие элементы страницы вне навбара необходимо воспользоваться атрибутом linkedElements,
23 | где в качестве значения передается массив целевых HTML элементов или css селекторы для их выборки.
24 |
25 |
26 |
27 |
28 | ...
29 | o = $('.rd-navbar');
30 |
31 | o.RDNavbar({
32 | linkedElements: [".magento-sidebar", $('.something-else')[0]]
33 | })
34 | ...
35 |
36 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/navigation.php:
--------------------------------------------------------------------------------
1 |
2 | Настройка навигации
3 |
4 |
5 |
6 | RD Navbar поддерживает, как и обычные выпадающие меню, так и мегаменю.
7 |
8 |
9 |
10 | Для того, чтобы определить соотвествующий элемент как выпадающее меню или мегаменю, необходимо воспользоваться классами
11 | .rd-navbar-dropdown и .rd-navbar-megamenu.
12 |
13 |
14 |
15 | По мимо это, RD Navbar поддерживает настройку правил взаимодествия с пунктами меню, которые содержат подменю.
16 |
17 |
18 |
19 | Так, например, все пункты меню с подменю, по умолчанию содержат соотвествующие переключатели для отображения подменю.
20 | Но, в случае необходимости можно указать отображение подменю и при ховере мышью. Для этого необходимо воспользоваться
21 | атрибутом focusOnHover: true для соответствующего класса лейаута навбара.
22 |
23 |
24 |
25 | Например, на десктопном лейауте очень удобно отображать подменю при ховере, в то время, когда на мобильном - это не имеет
26 | никакого смысла. Используя, responsive объект навбара, мы очень легко можем манипулировать поведением подменю.
27 |
28 |
29 |
30 |
31 | ...
32 | o = $('.rd-navbar');
33 |
34 | o.RDNavbar({
35 | responsive: {
36 | 0: {
37 | layout: 'rd-navbar-fixed',
38 | focusOnHover: false
39 | },
40 | 992: {
41 | layout: 'rd-navbar-static',
42 | focusOnHover: true
43 | }
44 | }
45 | })
46 | ...
47 |
48 |
49 |
50 |
51 | Также, для простоты и удобства создания навигации необходимые некоторые служебные классы на элементах и дополнительные
52 | элементы-переключатели для подменю. Данные служебные элементы и классы можно не создавать вручную. Скрипт сделает это сам,
53 | достаточно просто установить флаг domAppend: true.
54 |
55 |
56 |
57 |
58 | ...
59 | o = $('.rd-navbar');
60 |
61 | o.RDNavbar({
62 | domAppend: true
63 | })
64 | ...
65 |
66 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/onepage.php:
--------------------------------------------------------------------------------
1 |
2 | Настройка одностраничной навигации
3 |
4 |
5 |
6 | RD Navbar поддерживает функционал для создания одностраничной якорной навигации по странице.
7 |
8 |
9 |
10 | Для реализации якорной навигации на странице необходимо в качестве значения атрибута href ссылки в навигации указать хеш тег
11 | идентификатора целевой якорной секции с атрибутом data-type="anchor".
12 |
13 |
14 |
15 |
16 | ...
17 | <a href="#about">About</a>
18 | ...
19 |
20 | ...
21 | <section id="about" data-type="anchor">
22 | ...
23 | </section>
24 | ...
25 |
26 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/stickup.php:
--------------------------------------------------------------------------------
1 |
2 | Настройка прилипающей панели
3 |
4 |
5 |
6 | Для того, чтобы включить прилипание навбара при скролле, необходимо воспользоваться атрибутом stickUp: true.
7 |
8 |
9 |
10 |
11 | ...
12 | o = $('.rd-navbar');
13 |
14 | o.RDNavbar({
15 | responsive: {
16 | 0: {
17 | layout: 'rd-navbar-fixed',
18 | stickUp: false
19 | },
20 | 768: {
21 | layout: 'rd-navbar-fullwidth',
22 | stickUp: true
23 | }
24 | 1200: {
25 | layout: 'rd-navbar-static',
26 | stickUp: true
27 | }
28 | }
29 | })
30 | ...
31 |
32 |
33 |
34 |
35 |
36 | Прилипающая панель в RD Navbar имеет два режима работы: прилипание оригинальной панели и прилипание клон-эелемента. Для
37 | определения
38 | режима прилипания необходимо воспользоваться атрибутом stickUpClone (true|false) и указать оффсет прилипания от верхней позиции навбара
39 | в настройках скрипта. При этом атрибут stickUp должен быть установлен в true.
40 |
41 |
42 |
43 |
44 | ...
45 | o = $('.rd-navbar');
46 |
47 | o.RDNavbar({
48 | responsive: {
49 | 0: {
50 | layout: 'rd-navbar-fixed',
51 | stickUp: false
52 | },
53 | 768: {
54 | layout: 'rd-navbar-fullwidth',
55 | stickUp: true,
56 | stickUpClone: true,
57 | stickUpOffset: '100%'
58 | }
59 | 1200: {
60 | layout: 'rd-navbar-static',
61 | stickUp: true,
62 | stickUpClone: true,
63 | stickUpOffset: '100%'
64 | }
65 | }
66 | })
67 | ...
68 |
69 |
70 |
71 |
72 | Так, в данном примере, для создания эффекта прилипания навбара будет использоваться его клон-версия,
73 | как только навбар будет полностью проскролен на странице.
74 |
75 |
76 |
77 | Также, в случае необходимости, можно указать responsive object с помощью HTML. Для этого необходимо указать следующие аттрибуты
78 |
79 |
80 |
81 |
82 | <!-- RD Navbar -->
83 | <nav class="rd-navbar" data-stick-up="true" data-md-stick-up="true" data-lg-stick-up="true">
84 |
85 |
86 |
87 |
88 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/ru/toggles.php:
--------------------------------------------------------------------------------
1 |
2 | Настройка переключателей (тоглов)
3 |
4 |
5 |
6 | RD Navbar содержит очень удобную систему переключателей, которые можно применять в различных ситуациях, например, в
7 | случае, когда необходимо показывать/скрывать меню навигации или поиск, или любой другой элемент навбара.
8 |
9 |
10 |
11 | Для создания переключателя необходимо воспользоваться следующей разметкой
12 |
13 |
14 |
15 |
16 | ...
17 | <button data-rd-navbar-toggle=".element-1, #element-2, [data-type='element-3']."></button>
18 | ...
19 |
20 |
21 |
22 |
23 | , где data-rd-navbar-toggle содержит самый обычный css селектор элементов, для которых необходим переключатель.
24 |
25 |
26 |
27 | При активации переключателя, на элемент навешивается класс .active, что позволяет выполнять различные манипуляции с ним:
28 | двигать, скрывать, отображать, увеличивать и т.д.
29 |
30 |
31 |
32 | Так, например, в демо, переключатели используются для отображения/скрытия меню, корзины, поиска и дропдауна с дополнительными
33 | ссылками.
34 |
35 |
--------------------------------------------------------------------------------
/documentation/sections/howtouse/section.json:
--------------------------------------------------------------------------------
1 | {
2 | "id":"howtouse",
3 | "translations":
4 | {
5 | "en": "How to use the script?",
6 | "ru":"Как использовать скрипт?"
7 | },
8 | "articles": [
9 | {
10 | "id": "general",
11 | "translations": {
12 | "en": "General principles",
13 | "ru": "Общие принципы"
14 | }
15 | },
16 | {
17 | "id": "classes",
18 | "translations": {
19 | "en": "Class Map",
20 | "ru": "Карта классов"
21 | }
22 | },
23 | {
24 | "id": "layouts",
25 | "translations": {
26 | "en": "Adjustment of the layouts",
27 | "ru": "Настройка лейаутов"
28 | }
29 | },
30 | {
31 | "id": "stickup",
32 | "translations": {
33 | "en": "Sticky panel setting",
34 | "ru": "Настройка прилипающей панели"
35 | }
36 | },
37 | {
38 | "id": "navigation",
39 | "translations": {
40 | "en": "Navigation setting",
41 | "ru": "Настройка навигации"
42 | }
43 | },
44 | {
45 | "id": "toggles",
46 | "translations": {
47 | "en": "Setting switches (toggles)",
48 | "ru": "Настройка переключателей (тоглов)"
49 | }
50 | },
51 | {
52 | "id": "links",
53 | "translations": {
54 | "en": "Linker Adjustment",
55 | "ru": "Настройка линковщика"
56 | }
57 | },
58 | {
59 | "id": "onepage",
60 | "translations": {
61 | "en": "Single page navigation adjustment",
62 | "ru": "Настройка одностраничной навигации"
63 | }
64 | }
65 | ]
66 | }
67 |
--------------------------------------------------------------------------------
/documentation/sections/introduction/en/__description.php:
--------------------------------------------------------------------------------
1 | Introduction
2 |
3 |
4 | Full-function, powerful and flexible navigation is easier now.
5 |
6 |
7 | Where to start?
8 |
9 |
10 | -
11 | Click the following link to view the demonstration of this script work:
12 | Demo.
13 | .
14 |
15 | -
16 | The script itself is available in our public repository:
17 | Git
18 |
19 |
20 |
21 |
22 | Supported browsers
23 |
24 |
25 |
26 | The script was tested on Windows, Linux and MacOS systems and supports the following browsers:
27 |
28 |
29 |
30 | -
31 |
32 |
33 | 9+
34 |
35 | -
36 |
37 |
38 | 40+
39 |
40 | -
41 |
42 |
43 | 35+
44 |
45 | -
46 |
47 |
48 | 8+
49 |
50 |
51 |
52 |
53 | The test was not executed in other browsers. Write our author about all found bugs using the contact information provided below.
54 |
55 |
56 | Requirements
57 |
58 |
59 | You need to satisfy the following requirements for the script work:
60 |
61 |
62 |
63 | -
64 | jQuery 1.11+
65 |
66 | -
67 | jQuery Easing 1.1+ (For One Page navigation)
68 |
69 |
70 |
71 |
72 | About the author
73 |
74 |
75 |
76 | Gusarov Yevgeniy (Diversant | StMechanus)
77 |
78 |
79 |
80 | - E-mail
81 | - stmechanus@gmail.com
82 |
83 |
84 | - Skype
85 | - stmechanus@gmail.com
86 |
87 |
88 | - Bitrix
89 | - Diversant
90 |
91 |
92 | - LinkedIn
93 | -
94 | Gusarov Yevgeniy
95 |
96 |
97 |
--------------------------------------------------------------------------------
/documentation/sections/introduction/ru/__description.php:
--------------------------------------------------------------------------------
1 | Введение
2 |
3 |
4 | Полнофункциональная, мощная и гибкая навигация - теперь проще простого.
5 |
6 |
7 | С чего начать?
8 |
9 |
10 | -
11 | Демонстрацию работы данного скрипта можно посмотреть по следующей ссылке:
12 | Демо
13 | .
14 |
15 | -
16 | Сам скрипт доступен в нашем публичном репозитории:
17 | Git
18 |
19 |
20 |
21 |
22 |
23 | Поддерживаемые браузеры
24 |
25 |
26 |
27 | Скрипт тестировался в системах Windows, Linux и MacOS и поддерживает следующие браузеры:
28 |
29 |
30 |
31 | -
32 |
33 |
34 |
9+
35 |
36 | -
37 |
38 |
39 |
40+
40 |
41 | -
42 |
43 |
44 |
35+
45 |
46 | -
47 |
48 |
49 |
8+
50 |
51 |
52 |
53 |
54 | Тестирование в других браузерах не производилось. О всех найденых багах пишите автору используя контактную
55 | информацию, предоставленную ниже.
56 |
57 |
58 | Зависимости
59 |
60 |
61 | Для работоспособности скрипта требуется удовлеворение следующих зависимостей:
62 |
63 |
64 |
65 | -
66 | jQuery 1.11+
67 |
68 | -
69 | jQuery Easing 1.1+ (Для работы One Page навигации)
70 |
71 |
72 |
73 |
74 | Об авторе
75 |
76 |
77 |
78 | Евгений Гусаров (Diversant | StMechanus)
79 |
80 |
81 |
82 | - E-mail
83 | - stmechanus@gmail.com
84 |
85 |
86 | - Skype
87 | - stmechanus@gmail.com
88 |
89 |
90 | - Bitrix
91 | - Diversant
92 |
93 |
94 | - LinkedIn
95 | -
96 | Евгений Гусаров
97 |
98 |
99 |
--------------------------------------------------------------------------------
/documentation/sections/introduction/section.json:
--------------------------------------------------------------------------------
1 | {
2 | "id":"introduction",
3 | "translations":
4 | {
5 | "en":"Introduction",
6 | "ru":"Введение"
7 | },
8 | "articles": {
9 |
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/documentation/sections/requirejs/en/__description.php:
--------------------------------------------------------------------------------
1 | Integration with Require.js
2 |
3 |
4 | The script has built-in support of AMD export for integration with Require.js. The whole process of integration combines a few simple steps.
5 |
6 |
7 |
8 | Require.js configuration
9 |
10 |
11 |
12 | First of all, you need to make sure that the configuration of the paths in require.js is correct. It is necessary to define the aliases jquery and jquery.rd-navbar. In most cases, this configuration is defined in the main application script, the path to which is defined in the date data-main attribute when connecting require.js
13 |
14 |
15 |
16 |
17 | <script data-main="js/main" src="js/require.js"></script>
18 |
19 |
20 |
21 |
22 | The configuration itself must contain the following aliases for paths
23 |
24 |
25 |
26 |
27 | requirejs.config({
28 | paths: {
29 | "jquery": "path/to/jquery.min.js"
30 | "jquery.rd-navbar": "path/to/jquery.rd-navbar.min.js"
31 | }
32 | });
33 |
34 |
35 |
36 |
37 | Script initialization
38 |
39 |
40 |
41 | It takes you only to use the following code to initialize the script:
42 |
43 |
44 |
45 |
46 | requirejs(["jquery", "jquery.rd-navbar"], function($, parallax) {
47 | var o = $(".rd-navbar");
48 | o.RDNavbar({});
49 | });
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/documentation/sections/requirejs/ru/__description.php:
--------------------------------------------------------------------------------
1 | Интеграция с Require.js
2 |
3 |
4 | Скрипт имеет встроенную поддержку AMD экспорта для интеграции с Require.js. Весь процесс интеграции все также
5 | сводится к нескольким простым шагам.
6 |
7 |
8 |
9 | Конфигурация require.js
10 |
11 |
12 |
13 | Прежде всего вам нобходимо убедиться в правильности настройки конфигурации путей в require.js. Обязательно необходимо
14 | определить алиасы jquery и jquery.rd-navbar. В большинстве случаев, данная конфигурация определяется в главном скрипте
15 | приложения, путь к которому определяется в дата атрибуте data-main при подключении require.js
16 |
17 |
18 |
19 |
20 | <script data-main="js/main" src="js/require.js"></script>
21 |
22 |
23 |
24 |
25 | Сама конфигурация должна содержать следующие алиасы для путей
26 |
27 |
28 |
29 |
30 | requirejs.config({
31 | paths: {
32 | "jquery": "path/to/jquery.min.js"
33 | "jquery.rd-navbar": "path/to/jquery.rd-navbar.min.js"
34 | }
35 | });
36 |
37 |
38 |
39 |
40 | Инициализация скрипта
41 |
42 |
43 |
44 | Для инициализации скрипта достаточно воспользоваться следующим кодом.
45 |
46 |
47 |
48 |
49 | requirejs(["jquery", "jquery.rd-navbar"], function($, parallax) {
50 | var o = $(".rd-navbar");
51 | o.RDNavbar({});
52 | });
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/documentation/sections/requirejs/section.json:
--------------------------------------------------------------------------------
1 | {
2 | "id":"requirejs",
3 | "translations":
4 | {
5 | "en":"Integration with Require.js",
6 | "ru":"Интеграция с Require.js"
7 | },
8 | "articles": {
9 |
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/documentation/sections/settings/section.json:
--------------------------------------------------------------------------------
1 | {
2 | "id":"settings",
3 | "translations":
4 | {
5 | "en":"Script settings",
6 | "ru":"Настройки скрипта"
7 | },
8 | "articles": {
9 |
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/documentation/video/framework_install.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/video/framework_install.mp4
--------------------------------------------------------------------------------
/documentation/video/framework_install.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/video/framework_install.png
--------------------------------------------------------------------------------
/documentation/video/static_editor.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/video/static_editor.mp4
--------------------------------------------------------------------------------
/documentation/video/static_editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/documentation/video/static_editor.png
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # RD Navbar
2 |
3 | Powerful navigation tool. Create your own unique navigations depending on screen resolutions.
4 |
5 | Check out this [Demo](http://cms.devoffice.com/coding-dev/rd-navbar/demo/) to see it in action!
6 |
7 | Extended documentation is available here: [Documentation](http://cms.devoffice.com/coding-dev/rd-navbar/documentation/)
8 |
9 | ## Concept
10 | First of all, you need to remember. RD Navbar - is a navigation builder. It provides all functionality that you need to
11 | create your own unique navigation.
12 |
13 | ## Map of classes
14 | There are several classes that you can use for your navigation creation:
15 |
16 | * .rd-navbar - Base class for nav creation. Wrap all your nav with ````;
17 | * .rd-navbar-dropdown - Use this class as a wrapper for your dropdown menus;
18 | * .rd-navbar-megamenu - Use this class as a wrapper for your megamenus;
19 | * [data-rd-navbar-toggle] - Use this data-attribute with any kind of buttons or links to create your custom
20 | toggles.
21 |
22 | ## Setup
23 | The HTML, CSS and JavaScript codes are always unique for your target navigation. So check out our extended documentation for additional instructions: [Documentation](http://cms.devoffice.com/coding-dev/rd-navbar/documentation/)
24 |
25 | ## License
26 | Licensed under dual [CC By-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/)
27 | and [GPLv3](http://www.gnu.org/licenses/gpl-3.0.ru.html)
28 |
29 |
--------------------------------------------------------------------------------
/sources/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | //==========================================================
2 | // MIXINS
3 | //==========================================================
4 |
5 | // Note: Some of described mixins in this file requires the ie conditional comments
6 | //
7 | // For IE < 9
8 | //
11 | //
12 |
13 | @mixin keyframes($name) {
14 | @-webkit-keyframes #{$name} {
15 | @content;
16 | }
17 | @keyframes #{$name} {
18 | @content;
19 | }
20 | }
21 |
22 | @mixin clip($x1, $x2, $y1, $y2) {
23 | clip: rect($y1, $x2, $y2, $x1);
24 | }
25 |
26 | // Opacity
27 | @mixin opacity($opacity) {
28 | opacity: $opacity;
29 |
30 | .lt-ie9 & {
31 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity})";
32 | filter: alpha(opacity=$opacity*100);
33 | }
34 | }
35 |
36 | // Background-rgba
37 | @mixin background($rgb, $opacity) {
38 | background: rgba($rgb, $opacity);
39 |
40 | .lt-ie9 & {
41 | background: none;
42 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($rgb, $opacity))}', endColorstr='#{ie-hex-str(rgba($rgb, $opacity))}')";
43 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($rgb, $opacity))}', endColorstr='#{ie-hex-str(rgba($rgb, $opacity))}');
44 | zoom: 1;
45 | }
46 | }
47 |
48 | // Animation
49 | @mixin animation($anim) {
50 | -webkit-animation: $anim;
51 | animation: $anim;
52 | }
53 |
54 | // Transform Origin
55 | @mixin transform-origin($trfm-o) {
56 | -webkit-transform-origin: $trfm-o;
57 | transform-origin: $trfm-o;
58 | }
59 |
60 | // Transform
61 | @mixin transform($trfm) {
62 | -webkit-transform: $trfm;
63 | transform: $trfm;
64 | }
65 |
66 | // Triangle
67 | @mixin triangle($dir, $w, $h, $clr) {
68 | width: 0;
69 | height: 0;
70 | border-style: solid;
71 |
72 | @if $dir == top {
73 | border-width: 0 ceil($w/2) $h ceil($w/2);
74 | border-color: transparent transparent $clr transparent;
75 | } @else if $dir == bottom {
76 | border-width: $h ceil($w/2) 0 ceil($w/2);
77 | border-color: $clr transparent transparent transparent;
78 | } @else if $dir == left {
79 | border-width: ceil($h/2) $w ceil($h/2) 0;
80 | border-color: transparent $clr transparent transparent;
81 | } @else if $dir == right {
82 | border-width: ceil($h/2) 0 ceil($h/2) $w;
83 | border-color: transparent transparent transparent $clr;
84 | } @else if $dir == top_left {
85 | border-width: $w $w 0 0;
86 | border-color: $clr transparent transparent transparent;
87 | } @else if $dir == top_right {
88 | border-width: 0 $w $w 0;
89 | border-color: transparent $clr transparent transparent;
90 | } @else if $dir == bottom_right {
91 | border-width: 0 0 $w $w;
92 | border-color: transparent transparent $clr transparent;
93 | } @else if $dir == bottom_left {
94 | border-width: $w 0 0 $w;
95 | border-color: transparent transparent transparent $clr;
96 | }
97 | }
98 |
99 | // Clearfix
100 | @mixin clearfix {
101 | &:before,
102 | &:after {
103 | display: table;
104 | content: "";
105 | line-height: 0;
106 | }
107 |
108 | &:after {
109 | clear: both;
110 | }
111 | }
112 |
113 | // Variables
114 | $fa: 'FontAwesome';
115 |
116 | // Usefull Functions
117 |
118 | @function str-replace($string, $search, $replace: '') {
119 | $index: str-index($string, $search);
120 |
121 | @if $index {
122 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
123 | }
124 |
125 | @return $string;
126 | }
127 |
128 | @function rem($px-size) {
129 | @if ($debug == 1) {
130 | @return $px-size;
131 | } @else {
132 | @return str-replace(#{($px-size/100)}, px, rem);
133 | }
134 | }
135 |
136 | @function remove($list, $value, $recursive: false) {
137 | $result: ();
138 |
139 | @for $i from 1 through length($list) {
140 | @if type-of(nth($list, $i)) == list and $recursive {
141 | $result: append($result, remove(nth($list, $i), $value, $recursive));
142 | } @else if nth($list, $i) != $value {
143 | $result: append($result, nth($list, $i));
144 | }
145 | }
146 |
147 | @return $result;
148 | }
149 |
150 | @function sort($list) {
151 | $sortedlist: ();
152 | @while length($list) > 0 {
153 | $value: nth($list, 1);
154 | @each $item in $list {
155 | @if $item < $value {
156 | $value: $item;
157 | }
158 | }
159 | $sortedlist: append($sortedlist, $value, 'space');
160 | $list: remove($list, $value);
161 | }
162 | @return $sortedlist;
163 | }
164 |
165 | @function average($list) {
166 | $sum: 0;
167 |
168 | @each $i in $list {
169 | $sum: $sum + $i;
170 | }
171 |
172 | @return $sum / length($list);
173 | }
174 |
175 | @function headings() {
176 | @return "h1, h2, h3, h4, h5, h6, .heading-1, .heading-2, .heading-3, .heading-4,.heading-5, .heading-6";
177 | }
178 |
179 | @function cols($resolution) {
180 | $selector: ();
181 | @each $j in 1, 2, 3, 4, 6, 12 {
182 | $selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n + #{(12/$j)+1})", comma);
183 | }
184 |
185 | $selector: append($selector, "> .col-#{$resolution}-8.col-#{$resolution}-preffix-2");
186 |
187 | @return $selector;
188 | }
189 |
190 | @function cols-full($resolution) {
191 | $selector: ();
192 | @for $j from 1 through 12 {
193 | $selector: append($selector, "> .col-#{$resolution}-#{$j}:nth-child(n)", comma);
194 | }
195 |
196 | @return $selector;
197 | }
198 |
199 | @mixin make-flow-offset($lg-offset, $md-offset: $lg-offset, $sm-offset: $md-offset, $xs-offset: $sm-offset) {
200 | & > * + * {
201 | margin-top: $xs-offset;
202 | }
203 |
204 | html:not(.lt-ie10) & {
205 | @media (min-width: $screen-xs-min) {
206 | #{cols-full("xs")} {
207 | margin-top: 0;
208 | }
209 | }
210 |
211 | @media (min-width: $screen-xs-min) {
212 | #{cols("xs")} {
213 | margin-top: $xs-offset;
214 | }
215 | }
216 |
217 | @media (min-width: $screen-sm-min) {
218 | #{cols-full("sm")} {
219 | margin-top: 0;
220 | }
221 | }
222 |
223 | @media (min-width: $screen-sm-min) {
224 | #{cols("sm")} {
225 | margin-top: $sm-offset;
226 | }
227 | }
228 |
229 | @media (min-width: $screen-md-min) {
230 | #{cols-full("md")} {
231 | margin-top: 0;
232 | }
233 | }
234 |
235 | @media (min-width: $screen-md-min) {
236 | #{cols("md")} {
237 | margin-top: $md-offset;
238 | }
239 | }
240 |
241 | @media (min-width: $screen-lg-min) {
242 | #{cols-full("lg")} {
243 | margin-top: 0;
244 | }
245 | }
246 |
247 | @media (min-width: $screen-lg-min) {
248 | #{cols("lg")} {
249 | margin-top: $lg-offset;
250 | }
251 | }
252 | }
253 | }
254 |
--------------------------------------------------------------------------------
/sources/sass/rd-navbar.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar
3 | * @description Describes style declarations for RD Navbar extension
4 | */
5 |
6 | @import "_mixins.scss";
7 |
8 | $rd-navbar-default-color: #999;
9 | $rd-navbar-contrast-color: #333;
10 | $rd-navbar-accent-color: #f44336;
11 | $rd-navbar-accent-color-2: rgb(46, 204, 113);
12 | $rd-navbar-white-color: #fff;
13 |
14 | $rd-navbar-shadow-ambient: 0 0 2px 0 rgba(#000, .25);
15 | $rd-navbar-shadow-medium: 0 3px 5px 0 rgba(#000, .25);
16 | $rd-navbar-shadow-large: 0 5px 8px 0 rgba(#000, .25);
17 |
18 |
19 | %rd-navbar-transition{
20 | transition: .3s all cubic-bezier(0.785, 0.135, 0.150, 0.860);
21 | }
22 |
23 | %rd-navbar-hidden{
24 | display: none;
25 | }
26 |
27 | %rd-navbar-visible{
28 | display: block;
29 | }
30 |
31 | .rd-navbar--no-transition {
32 | &, *{
33 | transition: none!important;
34 | }
35 | }
36 |
37 | .rd-navbar-wrap{
38 | @extend %rd-navbar-transition;
39 | }
40 |
41 | .rd-navbar, .rd-navbar.rd-navbar--is-clone{
42 | @extend %rd-navbar-hidden;
43 | }
44 |
45 | .rd-navbar-fixed,
46 | .rd-navbar-static,
47 | .rd-navbar-fullwidth,
48 | .rd-navbar-sidebar{
49 | @extend %rd-navbar-visible;
50 | }
51 |
52 | .rd-navbar-outer{
53 | color: $rd-navbar-default-color;
54 | background: $rd-navbar-contrast-color;
55 | }
56 |
57 | .rd-navbar-static{
58 | background: $rd-navbar-white-color;
59 | .rd-navbar-nav-wrap,
60 | .rd-navbar-search-wrap{
61 | display: table-cell;
62 | vertical-align: middle;
63 | }
64 |
65 | .rd-navbar-nav-wrap{
66 | width: 100%;
67 | }
68 |
69 | &.rd-navbar--is-clone{
70 | @extend %rd-navbar-transition;
71 | position: fixed;
72 | top: 0;
73 | left: 0;
74 | right: 0;
75 | display: block;
76 | @include transform(translateY(-105%));
77 | z-index: 20;
78 |
79 | .rd-navbar-panel{
80 | display: none;
81 | }
82 |
83 | &.rd-navbar--is-stuck{
84 | @include transform(translateY(0));
85 | }
86 | }
87 |
88 | &.rd-navbar--is-stuck{
89 | position: fixed;
90 | left: 0;
91 | top: 0;
92 | right: 0;
93 | z-index: 20;
94 |
95 | .rd-navbar-panel{
96 | display: none;
97 | }
98 | }
99 | }
100 |
101 | @import "rd-navbar_components/_rd-navbar-toggles.scss";
102 | @import "rd-navbar_components/_rd-navbar-nav.scss";
103 | @import "rd-navbar_components/_rd-navbar-brand.scss";
104 | @import "rd-navbar_components/_rd-navbar-cart.scss";
105 | @import "rd-navbar_components/_rd-navbar-panel.scss";
106 | @import "rd-navbar_components/_rd-navbar-search.scss";
107 | @import "rd-navbar_components/_rd-navbar-collapse.scss";
108 |
109 |
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-brand.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Brand
3 | *
4 | * @description Describes style declarations for RD Navbar brand
5 | */
6 |
7 | .rd-navbar-brand{
8 | display: none;
9 | color: $rd-navbar-contrast-color;
10 | }
11 |
12 | .rd-navbar-static{
13 | .rd-navbar-brand{
14 | display: inline-block;
15 | float: left;
16 | > *{
17 | display: inline-block;
18 | vertical-align: middle;
19 | }
20 |
21 | > img{
22 | margin-right: 10px;
23 | }
24 |
25 | > a{
26 | font-size: 36px;
27 | line-height: 48px;
28 |
29 | span{
30 | display: none;
31 | }
32 | }
33 | }
34 | }
35 |
36 | .rd-navbar-fixed{
37 | .rd-navbar-brand{
38 | display: block;
39 | text-align: left;
40 | position: fixed;
41 | top: 4px;
42 | left: 56px;
43 | right: 112px;
44 | white-space: nowrap;
45 | overflow: hidden;
46 | text-overflow: ellipsis;
47 | font-size: 22px;
48 | line-height: 46px;
49 | height: 48px;
50 | z-index: 17;
51 |
52 | img{
53 | display: none;
54 | }
55 |
56 | a{
57 | display: inline-block;
58 | }
59 | }
60 | }
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-cart.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Toggles
3 | *
4 | * @description Describes style declarations for RD Navbar navigation
5 | */
6 |
7 | .rd-navbar-cart-floating{
8 | display: none;
9 | }
10 |
11 | .rd-navbar-cart-toggle {
12 | @include toggle-icons-via-rotation(48px, 28px, $rd-navbar-contrast-color, '\e8cb', '\e5cd');
13 | font-family: 'Material Icons';
14 | }
15 |
16 | .rd-navbar-cart{
17 | @extend %rd-navbar-transition;
18 | display: none;
19 | text-align: left;
20 | color: $rd-navbar-default-color;
21 | background: $rd-navbar-white-color;
22 | box-shadow: $rd-navbar-shadow-ambient, $rd-navbar-shadow-medium;
23 | height: 328px;
24 | width: 100%;
25 |
26 | &:before{
27 | content: '';
28 | position: absolute;
29 | height: 32px;
30 | left: 0;
31 | right: 0;
32 | top: 0;
33 | background: linear-gradient($rd-navbar-white-color, rgba($rd-navbar-white-color, 0));
34 | z-index: 1;
35 | }
36 |
37 | &-items{
38 | overflow: auto;
39 | max-height: 100%;
40 | height: 100%;
41 | padding: 16px 0;
42 |
43 | &::-webkit-scrollbar{
44 | width: 4px;
45 | }
46 |
47 | &::-webkit-scrollbar-thumb{
48 | background: $rd-navbar-default-color;
49 | }
50 | }
51 |
52 | .rd-navbar-cart-item{
53 | &__preview{
54 | border-radius: 50%;
55 | }
56 | }
57 |
58 | .rd-navbar-cart-item{
59 | position: relative;
60 | padding: 8px 0;
61 | &__left, &__body, &__remove{
62 | position: relative;
63 | display: table-cell;
64 | }
65 |
66 | &__left{
67 | padding: 0 16px;
68 | img{
69 | max-width: none;
70 | }
71 | }
72 |
73 | &__body{
74 | vertical-align: middle;
75 | width: 100%;
76 | }
77 |
78 | &__title{
79 | font-size: 16px;
80 | line-height: 26px;
81 | color: $rd-navbar-contrast-color;
82 | }
83 |
84 | &__counter{
85 | font-size: 14px;
86 | line-height: 1.3;
87 | }
88 |
89 | &__remove{
90 | vertical-align: middle;
91 | width: 56px;
92 | font-size: 24px;
93 | padding: 0 16px;
94 | }
95 |
96 | &:after{
97 | content: '';
98 | position: absolute;
99 | bottom: 0;
100 | right: 0;
101 | left: 88px;
102 | display: block;
103 | height: 1px;
104 | background: rgba($rd-navbar-default-color, .2);
105 | }
106 | }
107 | }
108 |
109 | .rd-navbar-static{
110 | .rd-navbar-cart-wrap{
111 | position: relative;
112 | float: right;
113 | margin-top: 12px;
114 | margin-left: 20px;
115 | }
116 |
117 | .rd-navbar-cart-floating{
118 | display: block;
119 |
120 | .rd-navbar-cart-buy{
121 | display: none;
122 | }
123 | }
124 |
125 | .rd-navbar-cart{
126 | display: block;
127 | position: absolute;
128 | width: 320px;
129 | top: 100%;
130 | right: 0;
131 | visibility: hidden;
132 | opacity: 0;
133 | @include transform(translateY(30px));
134 | z-index: 2;
135 |
136 | &.active{
137 | visibility: visible;
138 | opacity: 1;
139 | @include transform(translateY(0));
140 | }
141 | }
142 |
143 | .rd-navbar-cart-buy{
144 | @extend %rd-navbar-transition;
145 | position: relative;
146 | display: block;
147 | font-size: 16px;
148 | font-weight: 500;
149 | line-height: 56px;
150 | text-align: center;
151 | color: $rd-navbar-white-color;
152 | background: $rd-navbar-accent-color-2;
153 |
154 | &:hover{
155 | background: lighten($rd-navbar-accent-color-2, 5%);
156 | }
157 |
158 | &:before{
159 | font-weight: 400;
160 | font-size: 24px;
161 | display: inline-block;
162 | vertical-align: middle;
163 | margin-right: 8px;
164 | }
165 | }
166 | }
167 |
168 | .rd-navbar-fixed{
169 | .rd-navbar-cart{
170 | display: block;
171 | position: fixed;
172 | top: 100%;
173 | left: 0;
174 | width: 100%;
175 | padding-bottom: 56px;
176 | z-index: 19;
177 |
178 | &.active{
179 | @include transform(translateY(-100%));
180 | }
181 |
182 | .rd-navbar-cart-buy{
183 | display: none;
184 | }
185 | }
186 |
187 | .rd-navbar-cart-floating{
188 | display: block;
189 | @extend %rd-navbar-transition;
190 | position: fixed;
191 | bottom: 15px;
192 | right: 15px;
193 | z-index: 20;
194 | color: #FFF;
195 | overflow: hidden;
196 | border-radius: 50%;
197 | box-shadow: $rd-navbar-shadow-large, $rd-navbar-shadow-ambient;
198 | width: 56px;
199 | height: 56px;
200 | outline: 1px solid transparent;
201 | backface-visibility: hidden;
202 |
203 | &:before{
204 | @extend %rd-navbar-transition;
205 | content: '';
206 | position: absolute;
207 | top: 50%;
208 | left: 50%;
209 | width: 56px;
210 | height: 56px;
211 | border-radius: 50%;
212 | background: $rd-navbar-accent-color;
213 | @include transform(translate(-50%, -50%));
214 | }
215 |
216 | .rd-navbar-cart-buy{
217 | @extend %rd-navbar-transition;
218 | position: relative;
219 | display: block;
220 | font-size: 16px;
221 | font-weight: 500;
222 | line-height: 56px;
223 | opacity: 0;
224 | visibility: hidden;
225 |
226 | &:before{
227 | font-weight: 400;
228 | font-size: 24px;
229 | display: inline-block;
230 | vertical-align: middle;
231 | margin-right: 8px;
232 | }
233 | }
234 |
235 | .rd-navbar-cart-toggle {
236 | position: absolute;
237 | top: 50%;
238 | left: 50%;
239 | @include transform(translate(-50%, -50%));
240 |
241 | span {
242 | color: #FFF;
243 | height: 56px;
244 | line-height: 56px;
245 | }
246 | }
247 |
248 | &.active{
249 | right: 0;
250 | bottom: 0;
251 | border-radius: 0;
252 | width: 100%;
253 |
254 | &:before{
255 | @include transform(translate(-50%, -50%) scale(20));
256 | background: $rd-navbar-accent-color-2;
257 | }
258 |
259 | .rd-navbar-cart-buy{
260 | opacity: 1;
261 | visibility: visible;
262 | }
263 |
264 | .rd-navbar-cart-toggle{
265 | visibility: hidden;
266 | opacity: 0;
267 | }
268 | }
269 | }
270 | }
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-collapse.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Collapse
3 | *
4 | * @description Describes style declarations for RD Navbar collapse
5 | */
6 |
7 | .rd-navbar-collapse,
8 | .rd-navbar-collapse-toggle{
9 | display: none;
10 | }
11 |
12 | .rd-navbar-static{
13 | .rd-navbar-inner{
14 | max-width: 1200px;
15 | padding-left: 15px;
16 | padding-right: 15px;
17 | margin-left: auto;
18 | margin-right: auto;
19 | }
20 |
21 | .rd-navbar-collapse{
22 | display: block;
23 | float: right;
24 | margin-left: -15px;
25 | margin-top: 23px;
26 |
27 | li{
28 | display: inline-block;
29 | margin-left: 15px;
30 |
31 | a:hover{
32 | text-decoration: underline;
33 | }
34 | }
35 | }
36 |
37 | }
38 |
39 | .rd-navbar-fixed{
40 | .rd-navbar-collapse{
41 | display: block;
42 | @extend %rd-navbar-transition;
43 | text-align: left;
44 | position: fixed;
45 | top: 4px;
46 | right: 4px;
47 | color: $rd-navbar-contrast-color;
48 | padding: 48px 0 8px;
49 | font-size: 16px;
50 | line-height: 26px;
51 | z-index: 19;
52 | width: 180px;
53 | box-shadow: 0 0 0 0 nth($rd-navbar-shadow-medium, 5);
54 | visibility: hidden;
55 | overflow: hidden;
56 | transition: .3s box-shadow ease .2s;
57 |
58 | &:before{
59 | content: '';
60 | position: absolute;
61 | top: 0;
62 | right: 0;
63 | background: darken($rd-navbar-white-color, 3%);
64 | border-radius: 50%;
65 | width: 48px;
66 | height: 48px;
67 | @include transform(scale(0));
68 | @extend %rd-navbar-transition;
69 | }
70 |
71 | li{
72 | position: relative;
73 | opacity: 0;
74 | transition: .3s all ease 0s;
75 | }
76 |
77 |
78 | > li > a{
79 | display: block;
80 | padding: 11px 16px;
81 |
82 | &:hover{
83 | background: lighten($rd-navbar-contrast-color, 75%);
84 | }
85 | }
86 |
87 | &.active{
88 | visibility: visible;
89 | box-shadow: $rd-navbar-shadow-medium;
90 |
91 | li{
92 | transition: .3s all ease .2s;
93 | opacity: 1;
94 | }
95 |
96 | &:before{
97 | background: $rd-navbar-white-color;
98 | @include transform(scale(12));
99 | }
100 | }
101 | }
102 |
103 | .rd-navbar-collapse-toggle{
104 | display: block;
105 | position: fixed;
106 | top: 4px;
107 | right: 4px;
108 | font-family: 'Material Icons';
109 | width: 48px;
110 | height: 48px;
111 | @include toggle-icons-via-rotation(48px, 28px, $rd-navbar-contrast-color, '\e5d4', '\e5cd');
112 | z-index: 20;
113 | }
114 | }
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-nav.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Toggles
3 | *
4 | * @description Describes style declarations for RD Navbar navigation
5 | */
6 |
7 | .rd-navbar-nav, .rd-navbar-toggle{
8 | display: none;
9 | }
10 |
11 | .rd-navbar-static{
12 |
13 | .rd-navbar-subpanel{
14 | display: table;
15 | }
16 |
17 | .rd-navbar-outer .rd-navbar-inner{
18 | position: relative;
19 | }
20 |
21 | .rd-navbar-dropdown,
22 | .rd-navbar-megamenu{
23 | @extend %rd-navbar-transition;
24 | position: absolute;
25 | padding: 8px 0;
26 | color: $rd-navbar-default-color;
27 | background: $rd-navbar-contrast-color;
28 | text-align: left;
29 | opacity: 0;
30 | visibility: hidden;
31 | @include transform(translateY(30px));
32 |
33 | li > a{
34 | display: block;
35 | font-size: 14px;
36 | line-height: 24px;
37 | padding: 6px 16px;
38 | }
39 |
40 | li.focus > a, li.opened > a, a:hover{
41 | color: $rd-navbar-white-color;
42 | background: lighten($rd-navbar-contrast-color, 5%);
43 | }
44 | }
45 |
46 | .rd-navbar-dropdown{
47 | width: 270px;
48 | }
49 |
50 | .rd-navbar-megamenu{
51 | margin-top: 10px;
52 | left: 0;
53 | right: 0;
54 | display: table;
55 | table-layout: fixed;
56 | width: 100%;
57 | padding: 16px 8px;
58 |
59 | > li{
60 | display: table-cell;
61 | }
62 | }
63 |
64 | .rd-navbar-nav{
65 | display: block;
66 | text-align: left;
67 |
68 | li.rd-navbar--has-dropdown{
69 | position: relative;
70 | }
71 |
72 | li.focus,
73 | li.opened{
74 | > .rd-navbar-dropdown, > .rd-navbar-megamenu{
75 | opacity: 1;
76 | visibility: visible;
77 | @include transform(translateY(0));
78 | }
79 | }
80 |
81 | > li{
82 | display: inline-block;
83 |
84 | > .rd-navbar-dropdown, > .rd-navbar-megamenu{
85 | top: 100%;
86 | z-index: 1;
87 | }
88 |
89 | > .rd-navbar-dropdown{
90 | left: 50%;
91 | margin-top: 10px;
92 | margin-left: -135px;
93 |
94 | .rd-navbar-dropdown{
95 | left: 100%;
96 | top: -8px;
97 | z-index: 2;
98 | }
99 | }
100 |
101 | > a{
102 | display: block;
103 | font-weight: 500;
104 | font-size: 18px;
105 | line-height: 26px;
106 | padding: 18px 16px;
107 | text-transform: uppercase;
108 | }
109 |
110 | &.active > a, &.opened > a, &.focus > a, > a:hover{
111 | color: $rd-navbar-white-color;
112 | }
113 | }
114 | }
115 | }
116 |
117 | .rd-navbar-fixed {
118 | .rd-navbar-toggle {
119 | display: block;
120 | @include toggle-lines-to-arrow(48px, 24px, $rd-navbar-contrast-color);
121 | }
122 |
123 | .rd-navbar-nav-wrap {
124 | @extend %rd-navbar-transition;
125 | position: fixed;
126 | top: -56px;
127 | left: 0;
128 | width: 232px;
129 | padding: 112px 0 56px;
130 | bottom: -56px;
131 | color: $rd-navbar-default-color;
132 | background: $rd-navbar-white-color;
133 | box-shadow: $rd-navbar-shadow-medium;
134 | z-index: 15;
135 | @include transform(translateX(-105%));
136 |
137 | &.active {
138 | @include transform(translateX(0));
139 | }
140 | }
141 |
142 | .rd-navbar-nav {
143 | display: block;
144 | height: 100%;
145 | overflow: auto;
146 | font-size: 16px;
147 | line-height: 26px;
148 | text-align: left;
149 |
150 | &:before, &:after {
151 | content: '';
152 | display: block;
153 | height: 8px;
154 | }
155 |
156 | li {
157 | > a {
158 | display: block;
159 | padding: 11px 56px 11px 16px;
160 | color: $rd-navbar-contrast-color;
161 | }
162 |
163 | &.opened > a, a:hover {
164 | background: lighten($rd-navbar-contrast-color, 75%);
165 | }
166 |
167 | &.active {
168 | .rd-navbar-submenu-toggle{
169 | color: $rd-navbar-white-color;
170 | }
171 |
172 | > a {
173 | color: $rd-navbar-white-color;
174 | background: $rd-navbar-accent-color;
175 | }
176 | }
177 | }
178 | }
179 |
180 | .rd-navbar-dropdown,
181 | .rd-navbar-megamenu {
182 | display: none;
183 | }
184 |
185 | .rd-navbar-submenu {
186 | position: relative;
187 | @extend %rd-navbar-transition;
188 |
189 | li > a {
190 | padding-left: 32px;
191 | }
192 |
193 | .rd-navbar-dropdown li li > a,
194 | .rd-navbar-megamenu ul li li > a {
195 | padding-left: 48px;
196 | }
197 |
198 | &.opened {
199 | > .rd-navbar-dropdown,
200 | > .rd-navbar-megamenu {
201 | display: block;
202 | }
203 | }
204 | }
205 |
206 | .rd-navbar-submenu-toggle {
207 | @extend %rd-navbar-transition;
208 | position: absolute;
209 | right: 0;
210 | top: 0;
211 | bottom: 0;
212 | font: 400 24px/24px 'Material Icons';
213 | width: 50px;
214 | height: 48px;
215 | text-align: center;
216 | color: $rd-navbar-default-color;
217 | cursor: pointer;
218 |
219 | &:hover {
220 | color: $rd-navbar-contrast-color;
221 | }
222 |
223 | &:before {
224 | content: '\e5cf';
225 | position: absolute;
226 | top: 50%;
227 | left: 0;
228 | right: 0;
229 | text-align: center;
230 | transform: translate(0, -50%);
231 | }
232 | }
233 | }
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-panel.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Toggles
3 | *
4 | * @description Describes style declarations for RD Navbar panel
5 | */
6 |
7 | .rd-navbar-static{
8 | .rd-navbar-panel{
9 | @include clearfix;
10 | padding: 50px 0;
11 | }
12 | }
13 |
14 | .rd-navbar-fixed{
15 | .rd-navbar-panel-canvas{
16 | position: fixed;
17 | height: 56px;
18 | left: 0;
19 | top: 0;
20 | width: 100%;
21 | background: $rd-navbar-white-color;
22 | box-shadow: $rd-navbar-shadow-medium;
23 | z-index: 16;
24 | }
25 |
26 | .rd-navbar-toggle{
27 | position: fixed;
28 | z-index: 17;
29 | top: 4px;
30 | left: 4px;
31 | }
32 | }
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-search.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Search
3 | *
4 | * @description Describes style declarations for RD Navbar search
5 | */
6 |
7 | .rd-navbar-search,
8 | .rd-navbar-search-toggle{
9 | display: none;
10 | }
11 |
12 | .rd-navbar-static{
13 | .rd-navbar-search{
14 | display: block;
15 |
16 | form{
17 | position: relative;
18 | input{
19 | display: block;
20 | font-size: 18px;
21 | line-height: 24px;
22 | padding: 12px 56px 12px 16px;
23 | height: 48px;
24 | color: $rd-navbar-white-color;
25 | background: lighten($rd-navbar-contrast-color, 5%);
26 | }
27 |
28 | button[type="submit"]{
29 | position: absolute;
30 | font-size: 22px;
31 | width: 24px;
32 | height: 24px;
33 | line-height: 24px;
34 | text-align: center;
35 | top: 12px;
36 | right: 16px;
37 |
38 | &:hover{
39 | color: $rd-navbar-white-color;
40 | }
41 | }
42 | }
43 | }
44 | }
45 |
46 | .rd-navbar-fixed{
47 | .rd-navbar-search-toggle{
48 | display: block;
49 | position: fixed;
50 | top: 4px;
51 | right: 56px;
52 | font-family: 'Material Icons';
53 | width: 48px;
54 | height: 48px;
55 | @include toggle-icons-via-rotation(48px, 28px, $rd-navbar-contrast-color, '\e8b6', '\e5cd');
56 | z-index: 18;
57 | }
58 |
59 | .rd-navbar-search{
60 | display: block;
61 |
62 | .form-group{
63 | position: fixed;
64 | top: 0;
65 | padding-top: 4px;
66 | left: 56px;
67 | right: 112px;
68 | height: 56px;
69 | background: $rd-navbar-white-color;
70 | z-index: 17;
71 | @extend %rd-navbar-transition;
72 | visibility: hidden;
73 | opacity: 0;
74 |
75 | input{
76 | width: 100%;
77 | height: 46px;
78 | display: block;
79 | font-size: 22px;
80 | line-height: 46px;
81 | }
82 | }
83 |
84 | &.active{
85 | .form-group{
86 | opacity: 1;
87 | visibility: visible;
88 | }
89 | }
90 |
91 | form{
92 | button[type="submit"]{
93 | display: none;
94 | }
95 | }
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/sources/sass/rd-navbar_components/_rd-navbar-toggles.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * @subsection RD Navbar Toggles
3 | *
4 | * @description Describes style declarations for RD Navbar toggles
5 | */
6 |
7 | @mixin toggle($size: 48px, $font-size: 24px, $color: #111) {
8 | display: inline-block;
9 | position: relative;
10 | width: $size;
11 | height: $size;
12 | font-size: $font-size;
13 | line-height: $size;
14 | text-align: center;
15 | cursor: pointer;
16 | color: $color;
17 | }
18 |
19 | @mixin toggle-lines-to-arrow($size: 48px, $font-size: 24px, $color: #111) {
20 | @include toggle($size, $font-size, $color);
21 |
22 | span {
23 | position: relative;
24 | display: block;
25 | margin: auto;
26 | transition: .3s all ease;
27 | @include transform(rotate(180deg));
28 | &:before,
29 | &:after {
30 | @include transform-origin($font-size/14 center);
31 | @include transform-origin($font-size/14 center);
32 | content: "";
33 | position: absolute;
34 | left: 0;
35 | top: (round($font-size / 6)) * -2;
36 | transition: .3s all ease;
37 | }
38 |
39 | &:after {
40 | top: (round($font-size / 6)) * 2;
41 | }
42 |
43 | &:after,
44 | &:before,
45 | & {
46 | width: $font-size;
47 | height: round($font-size / 6);
48 | background-color: $color;
49 | backface-visibility: hidden;
50 | border-radius: 0;
51 | }
52 | }
53 |
54 | &.active span {
55 | @include transform(rotate(360deg));
56 |
57 | &:before,
58 | &:after {
59 | top: 0;
60 | width: $font-size/1.6;
61 | }
62 |
63 | &:before {
64 | -webkit-transform: rotate3d(0, 0, 1, -40deg);
65 | transform: rotate3d(0, 0, 1, -40deg);
66 | }
67 | &:after {
68 | -webkit-transform: rotate3d(0, 0, 1, 40deg);
69 | transform: rotate3d(0, 0, 1, 40deg);
70 | }
71 | }
72 | }
73 |
74 | @mixin toggle-icons-via-rotation($size: 48px, $font-size: 24px, $color: #111, $icon-before: '\f002', $icon-after: '\f00d') {
75 | span {
76 | @include toggle($size, $font-size, $color);
77 | &, &:before, &:after {
78 | transition: .3s all ease;
79 | }
80 |
81 | &:before, &:after {
82 | position: absolute;
83 | top: 0;
84 | left: 0;
85 | width: 100%;
86 | height: 100%;
87 | }
88 |
89 | &:before {
90 | content: $icon-before;
91 | @include transform(rotate(0deg) scale(1));
92 | opacity: 1;
93 | visibility: visible;
94 | }
95 |
96 | &:after {
97 | content: $icon-after;
98 | @include transform(rotate(-90deg) scale(0));
99 | opacity: 0;
100 | visibility: hidden;
101 | }
102 | }
103 |
104 | &.active {
105 | span {
106 | &:before {
107 | opacity: 0;
108 | visibility: hidden;
109 | @include transform(rotate(90deg) scale(0));
110 | }
111 |
112 | &:after {
113 | @include transform(rotate(0deg) scale(1));
114 | opacity: 1;
115 | visibility: visible;
116 | }
117 | }
118 | }
119 | }
120 |
121 |
--------------------------------------------------------------------------------
/vendor/compiler.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZemezPlugins/rd-navbar/d96902f1d24e2f9d142bbaaf963e96b5651c1336/vendor/compiler.jar
--------------------------------------------------------------------------------
/vendor/watchers.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
44 |
45 |