diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..831b3c2 --- /dev/null +++ b/.babelrc @@ -0,0 +1,9 @@ +{ + "presets": [ + "@babel/env", + "@babel/react" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties" + ] +} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..1970ec0 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +!.eslintrc.js +documentation/ +build/ diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..a124ad3 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,23 @@ +module.exports = { + parser: "babel-eslint", + env: { + es6: true, + node: true, + browser: true, + }, + parserOptions: { + ecmaVersion: 6, + sourceType: "module", + ecmaFeatures: { + jsx: true, + }, + }, + plugins: ["react"], + extends: [ + "eslint:recommended", + "plugin:react/recommended", + ], + rules: { + 'prettier/prettier': 0, + }, +}; diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..d3ab64d --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,12 @@ +name: Autocloser +on: [issues] +jobs: + autoclose: + runs-on: ubuntu-latest + steps: + - name: Issue auto-closer + uses: roots/issue-closer-action@v1.1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.weenspace.com/new-issue/react-material\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove WeenSpace? Do you need Angular, React, Vuejs or HTML? You can visit:\nšŸ‘‰  https://www.weenspace.com/bundles\nšŸ‘‰  https://www.weenspace.com\n\n\n
\n\n" + issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by weenspace-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by weenspace-issues\. DO NOT REMOVE --\>) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8ae6df8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,28 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +package-lock.json + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# package +/dist +# compiled css +*.css diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..f851b29 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +Documentation/assets/js diff --git a/Documentation/assets/img/apple-icon.png b/Documentation/assets/img/apple-icon.png new file mode 100644 index 0000000..a20470f Binary files /dev/null and b/Documentation/assets/img/apple-icon.png differ diff --git a/Documentation/assets/img/cover.jpeg b/Documentation/assets/img/cover.jpeg new file mode 100644 index 0000000..e6d76c1 Binary files /dev/null and b/Documentation/assets/img/cover.jpeg differ diff --git a/Documentation/assets/img/faces/marc.jpg b/Documentation/assets/img/faces/marc.jpg new file mode 100644 index 0000000..af6401d Binary files /dev/null and b/Documentation/assets/img/faces/marc.jpg differ diff --git a/Documentation/assets/img/favicon.png b/Documentation/assets/img/favicon.png new file mode 100644 index 0000000..7d8b7d0 Binary files /dev/null and b/Documentation/assets/img/favicon.png differ diff --git a/Documentation/assets/img/mask.png b/Documentation/assets/img/mask.png new file mode 100644 index 0000000..429360d Binary files /dev/null and b/Documentation/assets/img/mask.png differ diff --git a/Documentation/assets/img/new_logo.png b/Documentation/assets/img/new_logo.png new file mode 100644 index 0000000..8e2192b Binary files /dev/null and b/Documentation/assets/img/new_logo.png differ diff --git a/Documentation/assets/img/reactlogo.png b/Documentation/assets/img/reactlogo.png new file mode 100644 index 0000000..d9e1673 Binary files /dev/null and b/Documentation/assets/img/reactlogo.png differ diff --git a/Documentation/assets/img/sidebar-1.jpg b/Documentation/assets/img/sidebar-1.jpg new file mode 100644 index 0000000..25cfd86 Binary files /dev/null and b/Documentation/assets/img/sidebar-1.jpg differ diff --git a/Documentation/assets/img/sidebar-2.jpg b/Documentation/assets/img/sidebar-2.jpg new file mode 100644 index 0000000..cf297c0 Binary files /dev/null and b/Documentation/assets/img/sidebar-2.jpg differ diff --git a/Documentation/assets/img/sidebar-3.jpg b/Documentation/assets/img/sidebar-3.jpg new file mode 100644 index 0000000..bee4815 Binary files /dev/null and b/Documentation/assets/img/sidebar-3.jpg differ diff --git a/Documentation/assets/img/sidebar-4.jpg b/Documentation/assets/img/sidebar-4.jpg new file mode 100644 index 0000000..b4ea5c4 Binary files /dev/null and b/Documentation/assets/img/sidebar-4.jpg differ diff --git a/Documentation/assets/img/tim_80x80.png b/Documentation/assets/img/tim_80x80.png new file mode 100644 index 0000000..1f7aa0d Binary files /dev/null and b/Documentation/assets/img/tim_80x80.png differ diff --git a/Documentation/assets/js/bootstrap.min.js b/Documentation/assets/js/bootstrap.min.js new file mode 100644 index 0000000..5741e97 --- /dev/null +++ b/Documentation/assets/js/bootstrap.min.js @@ -0,0 +1,1710 @@ +/*! + * Bootstrap v3.3.7 (https://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under the MIT license + */ +if ("undefined" == typeof jQuery) + throw new Error("Bootstrap's JavaScript requires jQuery"); ++(function(a) { + "use strict"; + var b = a.fn.jquery.split(" ")[0].split("."); + if ( + (b[0] < 2 && b[1] < 9) || + (1 == b[0] && 9 == b[1] && b[2] < 1) || + b[0] > 3 + ) + throw new Error( + "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4" + ); +})(jQuery), + +(function(a) { + "use strict"; + function b() { + var a = document.createElement("bootstrap"), + b = { + WebkitTransition: "webkitTransitionEnd", + MozTransition: "transitionend", + OTransition: "oTransitionEnd otransitionend", + transition: "transitionend" + }; + for (var c in b) if (void 0 !== a.style[c]) return { end: b[c] }; + return !1; + } + (a.fn.emulateTransitionEnd = function(b) { + var c = !1, + d = this; + a(this).one("bsTransitionEnd", function() { + c = !0; + }); + var e = function() { + c || a(d).trigger(a.support.transition.end); + }; + return setTimeout(e, b), this; + }), + a(function() { + (a.support.transition = b()), + a.support.transition && + (a.event.special.bsTransitionEnd = { + bindType: a.support.transition.end, + delegateType: a.support.transition.end, + handle: function(b) { + if (a(b.target).is(this)) + return b.handleObj.handler.apply(this, arguments); + } + }); + }); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var c = a(this), + e = c.data("bs.alert"); + e || c.data("bs.alert", (e = new d(this))), + "string" == typeof b && e[b].call(c); + }); + } + var c = '[data-dismiss="alert"]', + d = function(b) { + a(b).on("click", c, this.close); + }; + (d.VERSION = "3.3.7"), + (d.TRANSITION_DURATION = 150), + (d.prototype.close = function(b) { + function c() { + g.detach() + .trigger("closed.bs.alert") + .remove(); + } + var e = a(this), + f = e.attr("data-target"); + f || ((f = e.attr("href")), (f = f && f.replace(/.*(?=#[^\s]*$)/, ""))); + var g = a("#" === f ? [] : f); + b && b.preventDefault(), + g.length || (g = e.closest(".alert")), + g.trigger((b = a.Event("close.bs.alert"))), + b.isDefaultPrevented() || + (g.removeClass("in"), + a.support.transition && g.hasClass("fade") + ? g + .one("bsTransitionEnd", c) + .emulateTransitionEnd(d.TRANSITION_DURATION) + : c()); + }); + var e = a.fn.alert; + (a.fn.alert = b), + (a.fn.alert.Constructor = d), + (a.fn.alert.noConflict = function() { + return (a.fn.alert = e), this; + }), + a(document).on("click.bs.alert.data-api", c, d.prototype.close); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var d = a(this), + e = d.data("bs.button"), + f = "object" == typeof b && b; + e || d.data("bs.button", (e = new c(this, f))), + "toggle" == b ? e.toggle() : b && e.setState(b); + }); + } + var c = function(b, d) { + (this.$element = a(b)), + (this.options = a.extend({}, c.DEFAULTS, d)), + (this.isLoading = !1); + }; + (c.VERSION = "3.3.7"), + (c.DEFAULTS = { loadingText: "loading..." }), + (c.prototype.setState = function(b) { + var c = "disabled", + d = this.$element, + e = d.is("input") ? "val" : "html", + f = d.data(); + (b += "Text"), + null == f.resetText && d.data("resetText", d[e]()), + setTimeout( + a.proxy(function() { + d[e](null == f[b] ? this.options[b] : f[b]), + "loadingText" == b + ? ((this.isLoading = !0), + d + .addClass(c) + .attr(c, c) + .prop(c, !0)) + : this.isLoading && + ((this.isLoading = !1), + d + .removeClass(c) + .removeAttr(c) + .prop(c, !1)); + }, this), + 0 + ); + }), + (c.prototype.toggle = function() { + var a = !0, + b = this.$element.closest('[data-toggle="buttons"]'); + if (b.length) { + var c = this.$element.find("input"); + "radio" == c.prop("type") + ? (c.prop("checked") && (a = !1), + b.find(".active").removeClass("active"), + this.$element.addClass("active")) + : "checkbox" == c.prop("type") && + (c.prop("checked") !== this.$element.hasClass("active") && + (a = !1), + this.$element.toggleClass("active")), + c.prop("checked", this.$element.hasClass("active")), + a && c.trigger("change"); + } else + this.$element.attr("aria-pressed", !this.$element.hasClass("active")), + this.$element.toggleClass("active"); + }); + var d = a.fn.button; + (a.fn.button = b), + (a.fn.button.Constructor = c), + (a.fn.button.noConflict = function() { + return (a.fn.button = d), this; + }), + a(document) + .on("click.bs.button.data-api", '[data-toggle^="button"]', function(c) { + var d = a(c.target).closest(".btn"); + b.call(d, "toggle"), + a(c.target).is('input[type="radio"], input[type="checkbox"]') || + (c.preventDefault(), + d.is("input,button") + ? d.trigger("focus") + : d + .find("input:visible,button:visible") + .first() + .trigger("focus")); + }) + .on( + "focus.bs.button.data-api blur.bs.button.data-api", + '[data-toggle^="button"]', + function(b) { + a(b.target) + .closest(".btn") + .toggleClass("focus", /^focus(in)?$/.test(b.type)); + } + ); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var d = a(this), + e = d.data("bs.carousel"), + f = a.extend({}, c.DEFAULTS, d.data(), "object" == typeof b && b), + g = "string" == typeof b ? b : f.slide; + e || d.data("bs.carousel", (e = new c(this, f))), + "number" == typeof b + ? e.to(b) + : g + ? e[g]() + : f.interval && e.pause().cycle(); + }); + } + var c = function(b, c) { + (this.$element = a(b)), + (this.$indicators = this.$element.find(".carousel-indicators")), + (this.options = c), + (this.paused = null), + (this.sliding = null), + (this.interval = null), + (this.$active = null), + (this.$items = null), + this.options.keyboard && + this.$element.on("keydown.bs.carousel", a.proxy(this.keydown, this)), + "hover" == this.options.pause && + !("ontouchstart" in document.documentElement) && + this.$element + .on("mouseenter.bs.carousel", a.proxy(this.pause, this)) + .on("mouseleave.bs.carousel", a.proxy(this.cycle, this)); + }; + (c.VERSION = "3.3.7"), + (c.TRANSITION_DURATION = 600), + (c.DEFAULTS = { interval: 5e3, pause: "hover", wrap: !0, keyboard: !0 }), + (c.prototype.keydown = function(a) { + if (!/input|textarea/i.test(a.target.tagName)) { + switch (a.which) { + case 37: + this.prev(); + break; + case 39: + this.next(); + break; + default: + return; + } + a.preventDefault(); + } + }), + (c.prototype.cycle = function(b) { + return ( + b || (this.paused = !1), + this.interval && clearInterval(this.interval), + this.options.interval && + !this.paused && + (this.interval = setInterval( + a.proxy(this.next, this), + this.options.interval + )), + this + ); + }), + (c.prototype.getItemIndex = function(a) { + return ( + (this.$items = a.parent().children(".item")), + this.$items.index(a || this.$active) + ); + }), + (c.prototype.getItemForDirection = function(a, b) { + var c = this.getItemIndex(b), + d = + ("prev" == a && 0 === c) || + ("next" == a && c == this.$items.length - 1); + if (d && !this.options.wrap) return b; + var e = "prev" == a ? -1 : 1, + f = (c + e) % this.$items.length; + return this.$items.eq(f); + }), + (c.prototype.to = function(a) { + var b = this, + c = this.getItemIndex( + (this.$active = this.$element.find(".item.active")) + ); + if (!(a > this.$items.length - 1 || a < 0)) + return this.sliding + ? this.$element.one("slid.bs.carousel", function() { + b.to(a); + }) + : c == a + ? this.pause().cycle() + : this.slide(a > c ? "next" : "prev", this.$items.eq(a)); + }), + (c.prototype.pause = function(b) { + return ( + b || (this.paused = !0), + this.$element.find(".next, .prev").length && + a.support.transition && + (this.$element.trigger(a.support.transition.end), this.cycle(!0)), + (this.interval = clearInterval(this.interval)), + this + ); + }), + (c.prototype.next = function() { + if (!this.sliding) return this.slide("next"); + }), + (c.prototype.prev = function() { + if (!this.sliding) return this.slide("prev"); + }), + (c.prototype.slide = function(b, d) { + var e = this.$element.find(".item.active"), + f = d || this.getItemForDirection(b, e), + g = this.interval, + h = "next" == b ? "left" : "right", + i = this; + if (f.hasClass("active")) return (this.sliding = !1); + var j = f[0], + k = a.Event("slide.bs.carousel", { relatedTarget: j, direction: h }); + if ((this.$element.trigger(k), !k.isDefaultPrevented())) { + if ( + ((this.sliding = !0), g && this.pause(), this.$indicators.length) + ) { + this.$indicators.find(".active").removeClass("active"); + var l = a(this.$indicators.children()[this.getItemIndex(f)]); + l && l.addClass("active"); + } + var m = a.Event("slid.bs.carousel", { + relatedTarget: j, + direction: h + }); + return ( + a.support.transition && this.$element.hasClass("slide") + ? (f.addClass(b), + f[0].offsetWidth, + e.addClass(h), + f.addClass(h), + e + .one("bsTransitionEnd", function() { + f.removeClass([b, h].join(" ")).addClass("active"), + e.removeClass(["active", h].join(" ")), + (i.sliding = !1), + setTimeout(function() { + i.$element.trigger(m); + }, 0); + }) + .emulateTransitionEnd(c.TRANSITION_DURATION)) + : (e.removeClass("active"), + f.addClass("active"), + (this.sliding = !1), + this.$element.trigger(m)), + g && this.cycle(), + this + ); + } + }); + var d = a.fn.carousel; + (a.fn.carousel = b), + (a.fn.carousel.Constructor = c), + (a.fn.carousel.noConflict = function() { + return (a.fn.carousel = d), this; + }); + var e = function(c) { + var d, + e = a(this), + f = a( + e.attr("data-target") || + ((d = e.attr("href")) && d.replace(/.*(?=#[^\s]+$)/, "")) + ); + if (f.hasClass("carousel")) { + var g = a.extend({}, f.data(), e.data()), + h = e.attr("data-slide-to"); + h && (g.interval = !1), + b.call(f, g), + h && f.data("bs.carousel").to(h), + c.preventDefault(); + } + }; + a(document) + .on("click.bs.carousel.data-api", "[data-slide]", e) + .on("click.bs.carousel.data-api", "[data-slide-to]", e), + a(window).on("load", function() { + a('[data-ride="carousel"]').each(function() { + var c = a(this); + b.call(c, c.data()); + }); + }); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + var c, + d = + b.attr("data-target") || + ((c = b.attr("href")) && c.replace(/.*(?=#[^\s]+$)/, "")); + return a(d); + } + function c(b) { + return this.each(function() { + var c = a(this), + e = c.data("bs.collapse"), + f = a.extend({}, d.DEFAULTS, c.data(), "object" == typeof b && b); + !e && f.toggle && /show|hide/.test(b) && (f.toggle = !1), + e || c.data("bs.collapse", (e = new d(this, f))), + "string" == typeof b && e[b](); + }); + } + var d = function(b, c) { + (this.$element = a(b)), + (this.options = a.extend({}, d.DEFAULTS, c)), + (this.$trigger = a( + '[data-toggle="collapse"][href="#' + + b.id + + '"],[data-toggle="collapse"][data-target="#' + + b.id + + '"]' + )), + (this.transitioning = null), + this.options.parent + ? (this.$parent = this.getParent()) + : this.addAriaAndCollapsedClass(this.$element, this.$trigger), + this.options.toggle && this.toggle(); + }; + (d.VERSION = "3.3.7"), + (d.TRANSITION_DURATION = 350), + (d.DEFAULTS = { toggle: !0 }), + (d.prototype.dimension = function() { + var a = this.$element.hasClass("width"); + return a ? "width" : "height"; + }), + (d.prototype.show = function() { + if (!this.transitioning && !this.$element.hasClass("in")) { + var b, + e = + this.$parent && + this.$parent.children(".panel").children(".in, .collapsing"); + if ( + !( + e && + e.length && + ((b = e.data("bs.collapse")), b && b.transitioning) + ) + ) { + var f = a.Event("show.bs.collapse"); + if ((this.$element.trigger(f), !f.isDefaultPrevented())) { + e && + e.length && + (c.call(e, "hide"), b || e.data("bs.collapse", null)); + var g = this.dimension(); + this.$element + .removeClass("collapse") + .addClass("collapsing") + [g](0) + .attr("aria-expanded", !0), + this.$trigger + .removeClass("collapsed") + .attr("aria-expanded", !0), + (this.transitioning = 1); + var h = function() { + this.$element + .removeClass("collapsing") + .addClass("collapse in") + [g](""), + (this.transitioning = 0), + this.$element.trigger("shown.bs.collapse"); + }; + if (!a.support.transition) return h.call(this); + var i = a.camelCase(["scroll", g].join("-")); + this.$element + .one("bsTransitionEnd", a.proxy(h, this)) + .emulateTransitionEnd(d.TRANSITION_DURATION) + [g](this.$element[0][i]); + } + } + } + }), + (d.prototype.hide = function() { + if (!this.transitioning && this.$element.hasClass("in")) { + var b = a.Event("hide.bs.collapse"); + if ((this.$element.trigger(b), !b.isDefaultPrevented())) { + var c = this.dimension(); + this.$element[c](this.$element[c]())[0].offsetHeight, + this.$element + .addClass("collapsing") + .removeClass("collapse in") + .attr("aria-expanded", !1), + this.$trigger.addClass("collapsed").attr("aria-expanded", !1), + (this.transitioning = 1); + var e = function() { + (this.transitioning = 0), + this.$element + .removeClass("collapsing") + .addClass("collapse") + .trigger("hidden.bs.collapse"); + }; + return a.support.transition + ? void this.$element[c](0) + .one("bsTransitionEnd", a.proxy(e, this)) + .emulateTransitionEnd(d.TRANSITION_DURATION) + : e.call(this); + } + } + }), + (d.prototype.toggle = function() { + this[this.$element.hasClass("in") ? "hide" : "show"](); + }), + (d.prototype.getParent = function() { + return a(this.options.parent) + .find( + '[data-toggle="collapse"][data-parent="' + + this.options.parent + + '"]' + ) + .each( + a.proxy(function(c, d) { + var e = a(d); + this.addAriaAndCollapsedClass(b(e), e); + }, this) + ) + .end(); + }), + (d.prototype.addAriaAndCollapsedClass = function(a, b) { + var c = a.hasClass("in"); + a.attr("aria-expanded", c), + b.toggleClass("collapsed", !c).attr("aria-expanded", c); + }); + var e = a.fn.collapse; + (a.fn.collapse = c), + (a.fn.collapse.Constructor = d), + (a.fn.collapse.noConflict = function() { + return (a.fn.collapse = e), this; + }), + a(document).on( + "click.bs.collapse.data-api", + '[data-toggle="collapse"]', + function(d) { + var e = a(this); + e.attr("data-target") || d.preventDefault(); + var f = b(e), + g = f.data("bs.collapse"), + h = g ? "toggle" : e.data(); + c.call(f, h); + } + ); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + var c = b.attr("data-target"); + c || + ((c = b.attr("href")), + (c = c && /#[A-Za-z]/.test(c) && c.replace(/.*(?=#[^\s]*$)/, ""))); + var d = c && a(c); + return d && d.length ? d : b.parent(); + } + function c(c) { + (c && 3 === c.which) || + (a(e).remove(), + a(f).each(function() { + var d = a(this), + e = b(d), + f = { relatedTarget: this }; + e.hasClass("open") && + ((c && + "click" == c.type && + /input|textarea/i.test(c.target.tagName) && + a.contains(e[0], c.target)) || + (e.trigger((c = a.Event("hide.bs.dropdown", f))), + c.isDefaultPrevented() || + (d.attr("aria-expanded", "false"), + e + .removeClass("open") + .trigger(a.Event("hidden.bs.dropdown", f))))); + })); + } + function d(b) { + return this.each(function() { + var c = a(this), + d = c.data("bs.dropdown"); + d || c.data("bs.dropdown", (d = new g(this))), + "string" == typeof b && d[b].call(c); + }); + } + var e = ".dropdown-backdrop", + f = '[data-toggle="dropdown"]', + g = function(b) { + a(b).on("click.bs.dropdown", this.toggle); + }; + (g.VERSION = "3.3.7"), + (g.prototype.toggle = function(d) { + var e = a(this); + if (!e.is(".disabled, :disabled")) { + var f = b(e), + g = f.hasClass("open"); + if ((c(), !g)) { + "ontouchstart" in document.documentElement && + !f.closest(".navbar-nav").length && + a(document.createElement("div")) + .addClass("dropdown-backdrop") + .insertAfter(a(this)) + .on("click", c); + var h = { relatedTarget: this }; + if ( + (f.trigger((d = a.Event("show.bs.dropdown", h))), + d.isDefaultPrevented()) + ) + return; + e.trigger("focus").attr("aria-expanded", "true"), + f.toggleClass("open").trigger(a.Event("shown.bs.dropdown", h)); + } + return !1; + } + }), + (g.prototype.keydown = function(c) { + if ( + /(38|40|27|32)/.test(c.which) && + !/input|textarea/i.test(c.target.tagName) + ) { + var d = a(this); + if ( + (c.preventDefault(), + c.stopPropagation(), + !d.is(".disabled, :disabled")) + ) { + var e = b(d), + g = e.hasClass("open"); + if ((!g && 27 != c.which) || (g && 27 == c.which)) + return ( + 27 == c.which && e.find(f).trigger("focus"), d.trigger("click") + ); + var h = " li:not(.disabled):visible a", + i = e.find(".dropdown-menu" + h); + if (i.length) { + var j = i.index(c.target); + 38 == c.which && j > 0 && j--, + 40 == c.which && j < i.length - 1 && j++, + ~j || (j = 0), + i.eq(j).trigger("focus"); + } + } + } + }); + var h = a.fn.dropdown; + (a.fn.dropdown = d), + (a.fn.dropdown.Constructor = g), + (a.fn.dropdown.noConflict = function() { + return (a.fn.dropdown = h), this; + }), + a(document) + .on("click.bs.dropdown.data-api", c) + .on("click.bs.dropdown.data-api", ".dropdown form", function(a) { + a.stopPropagation(); + }) + .on("click.bs.dropdown.data-api", f, g.prototype.toggle) + .on("keydown.bs.dropdown.data-api", f, g.prototype.keydown) + .on( + "keydown.bs.dropdown.data-api", + ".dropdown-menu", + g.prototype.keydown + ); + })(jQuery), + +(function(a) { + "use strict"; + function b(b, d) { + return this.each(function() { + var e = a(this), + f = e.data("bs.modal"), + g = a.extend({}, c.DEFAULTS, e.data(), "object" == typeof b && b); + f || e.data("bs.modal", (f = new c(this, g))), + "string" == typeof b ? f[b](d) : g.show && f.show(d); + }); + } + var c = function(b, c) { + (this.options = c), + (this.$body = a(document.body)), + (this.$element = a(b)), + (this.$dialog = this.$element.find(".modal-dialog")), + (this.$backdrop = null), + (this.isShown = null), + (this.originalBodyPad = null), + (this.scrollbarWidth = 0), + (this.ignoreBackdropClick = !1), + this.options.remote && + this.$element.find(".modal-content").load( + this.options.remote, + a.proxy(function() { + this.$element.trigger("loaded.bs.modal"); + }, this) + ); + }; + (c.VERSION = "3.3.7"), + (c.TRANSITION_DURATION = 300), + (c.BACKDROP_TRANSITION_DURATION = 150), + (c.DEFAULTS = { backdrop: !0, keyboard: !0, show: !0 }), + (c.prototype.toggle = function(a) { + return this.isShown ? this.hide() : this.show(a); + }), + (c.prototype.show = function(b) { + var d = this, + e = a.Event("show.bs.modal", { relatedTarget: b }); + this.$element.trigger(e), + this.isShown || + e.isDefaultPrevented() || + ((this.isShown = !0), + this.checkScrollbar(), + this.setScrollbar(), + this.$body.addClass("modal-open"), + this.escape(), + this.resize(), + this.$element.on( + "click.dismiss.bs.modal", + '[data-dismiss="modal"]', + a.proxy(this.hide, this) + ), + this.$dialog.on("mousedown.dismiss.bs.modal", function() { + d.$element.one("mouseup.dismiss.bs.modal", function(b) { + a(b.target).is(d.$element) && (d.ignoreBackdropClick = !0); + }); + }), + this.backdrop(function() { + var e = a.support.transition && d.$element.hasClass("fade"); + d.$element.parent().length || d.$element.appendTo(d.$body), + d.$element.show().scrollTop(0), + d.adjustDialog(), + e && d.$element[0].offsetWidth, + d.$element.addClass("in"), + d.enforceFocus(); + var f = a.Event("shown.bs.modal", { relatedTarget: b }); + e + ? d.$dialog + .one("bsTransitionEnd", function() { + d.$element.trigger("focus").trigger(f); + }) + .emulateTransitionEnd(c.TRANSITION_DURATION) + : d.$element.trigger("focus").trigger(f); + })); + }), + (c.prototype.hide = function(b) { + b && b.preventDefault(), + (b = a.Event("hide.bs.modal")), + this.$element.trigger(b), + this.isShown && + !b.isDefaultPrevented() && + ((this.isShown = !1), + this.escape(), + this.resize(), + a(document).off("focusin.bs.modal"), + this.$element + .removeClass("in") + .off("click.dismiss.bs.modal") + .off("mouseup.dismiss.bs.modal"), + this.$dialog.off("mousedown.dismiss.bs.modal"), + a.support.transition && this.$element.hasClass("fade") + ? this.$element + .one("bsTransitionEnd", a.proxy(this.hideModal, this)) + .emulateTransitionEnd(c.TRANSITION_DURATION) + : this.hideModal()); + }), + (c.prototype.enforceFocus = function() { + a(document) + .off("focusin.bs.modal") + .on( + "focusin.bs.modal", + a.proxy(function(a) { + document === a.target || + this.$element[0] === a.target || + this.$element.has(a.target).length || + this.$element.trigger("focus"); + }, this) + ); + }), + (c.prototype.escape = function() { + this.isShown && this.options.keyboard + ? this.$element.on( + "keydown.dismiss.bs.modal", + a.proxy(function(a) { + 27 == a.which && this.hide(); + }, this) + ) + : this.isShown || this.$element.off("keydown.dismiss.bs.modal"); + }), + (c.prototype.resize = function() { + this.isShown + ? a(window).on("resize.bs.modal", a.proxy(this.handleUpdate, this)) + : a(window).off("resize.bs.modal"); + }), + (c.prototype.hideModal = function() { + var a = this; + this.$element.hide(), + this.backdrop(function() { + a.$body.removeClass("modal-open"), + a.resetAdjustments(), + a.resetScrollbar(), + a.$element.trigger("hidden.bs.modal"); + }); + }), + (c.prototype.removeBackdrop = function() { + this.$backdrop && this.$backdrop.remove(), (this.$backdrop = null); + }), + (c.prototype.backdrop = function(b) { + var d = this, + e = this.$element.hasClass("fade") ? "fade" : ""; + if (this.isShown && this.options.backdrop) { + var f = a.support.transition && e; + if ( + ((this.$backdrop = a(document.createElement("div")) + .addClass("modal-backdrop " + e) + .appendTo(this.$body)), + this.$element.on( + "click.dismiss.bs.modal", + a.proxy(function(a) { + return this.ignoreBackdropClick + ? void (this.ignoreBackdropClick = !1) + : void ( + a.target === a.currentTarget && + ("static" == this.options.backdrop + ? this.$element[0].focus() + : this.hide()) + ); + }, this) + ), + f && this.$backdrop[0].offsetWidth, + this.$backdrop.addClass("in"), + !b) + ) + return; + f + ? this.$backdrop + .one("bsTransitionEnd", b) + .emulateTransitionEnd(c.BACKDROP_TRANSITION_DURATION) + : b(); + } else if (!this.isShown && this.$backdrop) { + this.$backdrop.removeClass("in"); + var g = function() { + d.removeBackdrop(), b && b(); + }; + a.support.transition && this.$element.hasClass("fade") + ? this.$backdrop + .one("bsTransitionEnd", g) + .emulateTransitionEnd(c.BACKDROP_TRANSITION_DURATION) + : g(); + } else b && b(); + }), + (c.prototype.handleUpdate = function() { + this.adjustDialog(); + }), + (c.prototype.adjustDialog = function() { + var a = + this.$element[0].scrollHeight > document.documentElement.clientHeight; + this.$element.css({ + paddingLeft: !this.bodyIsOverflowing && a ? this.scrollbarWidth : "", + paddingRight: this.bodyIsOverflowing && !a ? this.scrollbarWidth : "" + }); + }), + (c.prototype.resetAdjustments = function() { + this.$element.css({ paddingLeft: "", paddingRight: "" }); + }), + (c.prototype.checkScrollbar = function() { + var a = window.innerWidth; + if (!a) { + var b = document.documentElement.getBoundingClientRect(); + a = b.right - Math.abs(b.left); + } + (this.bodyIsOverflowing = document.body.clientWidth < a), + (this.scrollbarWidth = this.measureScrollbar()); + }), + (c.prototype.setScrollbar = function() { + var a = parseInt(this.$body.css("padding-right") || 0, 10); + (this.originalBodyPad = document.body.style.paddingRight || ""), + this.bodyIsOverflowing && + this.$body.css("padding-right", a + this.scrollbarWidth); + }), + (c.prototype.resetScrollbar = function() { + this.$body.css("padding-right", this.originalBodyPad); + }), + (c.prototype.measureScrollbar = function() { + var a = document.createElement("div"); + (a.className = "modal-scrollbar-measure"), this.$body.append(a); + var b = a.offsetWidth - a.clientWidth; + return this.$body[0].removeChild(a), b; + }); + var d = a.fn.modal; + (a.fn.modal = b), + (a.fn.modal.Constructor = c), + (a.fn.modal.noConflict = function() { + return (a.fn.modal = d), this; + }), + a(document).on( + "click.bs.modal.data-api", + '[data-toggle="modal"]', + function(c) { + var d = a(this), + e = d.attr("href"), + f = a( + d.attr("data-target") || (e && e.replace(/.*(?=#[^\s]+$)/, "")) + ), + g = f.data("bs.modal") + ? "toggle" + : a.extend({ remote: !/#/.test(e) && e }, f.data(), d.data()); + d.is("a") && c.preventDefault(), + f.one("show.bs.modal", function(a) { + a.isDefaultPrevented() || + f.one("hidden.bs.modal", function() { + d.is(":visible") && d.trigger("focus"); + }); + }), + b.call(f, g, this); + } + ); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var d = a(this), + e = d.data("bs.tooltip"), + f = "object" == typeof b && b; + (!e && /destroy|hide/.test(b)) || + (e || d.data("bs.tooltip", (e = new c(this, f))), + "string" == typeof b && e[b]()); + }); + } + var c = function(a, b) { + (this.type = null), + (this.options = null), + (this.enabled = null), + (this.timeout = null), + (this.hoverState = null), + (this.$element = null), + (this.inState = null), + this.init("tooltip", a, b); + }; + (c.VERSION = "3.3.7"), + (c.TRANSITION_DURATION = 150), + (c.DEFAULTS = { + animation: !0, + placement: "top", + selector: !1, + template: + '', + trigger: "hover focus", + title: "", + delay: 0, + html: !1, + container: !1, + viewport: { selector: "body", padding: 0 } + }), + (c.prototype.init = function(b, c, d) { + if ( + ((this.enabled = !0), + (this.type = b), + (this.$element = a(c)), + (this.options = this.getOptions(d)), + (this.$viewport = + this.options.viewport && + a( + a.isFunction(this.options.viewport) + ? this.options.viewport.call(this, this.$element) + : this.options.viewport.selector || this.options.viewport + )), + (this.inState = { click: !1, hover: !1, focus: !1 }), + this.$element[0] instanceof document.constructor && + !this.options.selector) + ) + throw new Error( + "`selector` option must be specified when initializing " + + this.type + + " on the window.document object!" + ); + for (var e = this.options.trigger.split(" "), f = e.length; f--; ) { + var g = e[f]; + if ("click" == g) + this.$element.on( + "click." + this.type, + this.options.selector, + a.proxy(this.toggle, this) + ); + else if ("manual" != g) { + var h = "hover" == g ? "mouseenter" : "focusin", + i = "hover" == g ? "mouseleave" : "focusout"; + this.$element.on( + h + "." + this.type, + this.options.selector, + a.proxy(this.enter, this) + ), + this.$element.on( + i + "." + this.type, + this.options.selector, + a.proxy(this.leave, this) + ); + } + } + this.options.selector + ? (this._options = a.extend({}, this.options, { + trigger: "manual", + selector: "" + })) + : this.fixTitle(); + }), + (c.prototype.getDefaults = function() { + return c.DEFAULTS; + }), + (c.prototype.getOptions = function(b) { + return ( + (b = a.extend({}, this.getDefaults(), this.$element.data(), b)), + b.delay && + "number" == typeof b.delay && + (b.delay = { show: b.delay, hide: b.delay }), + b + ); + }), + (c.prototype.getDelegateOptions = function() { + var b = {}, + c = this.getDefaults(); + return ( + this._options && + a.each(this._options, function(a, d) { + c[a] != d && (b[a] = d); + }), + b + ); + }), + (c.prototype.enter = function(b) { + var c = + b instanceof this.constructor + ? b + : a(b.currentTarget).data("bs." + this.type); + return ( + c || + ((c = new this.constructor( + b.currentTarget, + this.getDelegateOptions() + )), + a(b.currentTarget).data("bs." + this.type, c)), + b instanceof a.Event && + (c.inState["focusin" == b.type ? "focus" : "hover"] = !0), + c.tip().hasClass("in") || "in" == c.hoverState + ? void (c.hoverState = "in") + : (clearTimeout(c.timeout), + (c.hoverState = "in"), + c.options.delay && c.options.delay.show + ? void (c.timeout = setTimeout(function() { + "in" == c.hoverState && c.show(); + }, c.options.delay.show)) + : c.show()) + ); + }), + (c.prototype.isInStateTrue = function() { + for (var a in this.inState) if (this.inState[a]) return !0; + return !1; + }), + (c.prototype.leave = function(b) { + var c = + b instanceof this.constructor + ? b + : a(b.currentTarget).data("bs." + this.type); + if ( + (c || + ((c = new this.constructor( + b.currentTarget, + this.getDelegateOptions() + )), + a(b.currentTarget).data("bs." + this.type, c)), + b instanceof a.Event && + (c.inState["focusout" == b.type ? "focus" : "hover"] = !1), + !c.isInStateTrue()) + ) + return ( + clearTimeout(c.timeout), + (c.hoverState = "out"), + c.options.delay && c.options.delay.hide + ? void (c.timeout = setTimeout(function() { + "out" == c.hoverState && c.hide(); + }, c.options.delay.hide)) + : c.hide() + ); + }), + (c.prototype.show = function() { + var b = a.Event("show.bs." + this.type); + if (this.hasContent() && this.enabled) { + this.$element.trigger(b); + var d = a.contains( + this.$element[0].ownerDocument.documentElement, + this.$element[0] + ); + if (b.isDefaultPrevented() || !d) return; + var e = this, + f = this.tip(), + g = this.getUID(this.type); + this.setContent(), + f.attr("id", g), + this.$element.attr("aria-describedby", g), + this.options.animation && f.addClass("fade"); + var h = + "function" == typeof this.options.placement + ? this.options.placement.call(this, f[0], this.$element[0]) + : this.options.placement, + i = /\s?auto?\s?/i, + j = i.test(h); + j && (h = h.replace(i, "") || "top"), + f + .detach() + .css({ top: 0, left: 0, display: "block" }) + .addClass(h) + .data("bs." + this.type, this), + this.options.container + ? f.appendTo(this.options.container) + : f.insertAfter(this.$element), + this.$element.trigger("inserted.bs." + this.type); + var k = this.getPosition(), + l = f[0].offsetWidth, + m = f[0].offsetHeight; + if (j) { + var n = h, + o = this.getPosition(this.$viewport); + (h = + "bottom" == h && k.bottom + m > o.bottom + ? "top" + : "top" == h && k.top - m < o.top + ? "bottom" + : "right" == h && k.right + l > o.width + ? "left" + : "left" == h && k.left - l < o.left + ? "right" + : h), + f.removeClass(n).addClass(h); + } + var p = this.getCalculatedOffset(h, k, l, m); + this.applyPlacement(p, h); + var q = function() { + var a = e.hoverState; + e.$element.trigger("shown.bs." + e.type), + (e.hoverState = null), + "out" == a && e.leave(e); + }; + a.support.transition && this.$tip.hasClass("fade") + ? f + .one("bsTransitionEnd", q) + .emulateTransitionEnd(c.TRANSITION_DURATION) + : q(); + } + }), + (c.prototype.applyPlacement = function(b, c) { + var d = this.tip(), + e = d[0].offsetWidth, + f = d[0].offsetHeight, + g = parseInt(d.css("margin-top"), 10), + h = parseInt(d.css("margin-left"), 10); + isNaN(g) && (g = 0), + isNaN(h) && (h = 0), + (b.top += g), + (b.left += h), + a.offset.setOffset( + d[0], + a.extend( + { + using: function(a) { + d.css({ top: Math.round(a.top), left: Math.round(a.left) }); + } + }, + b + ), + 0 + ), + d.addClass("in"); + var i = d[0].offsetWidth, + j = d[0].offsetHeight; + "top" == c && j != f && (b.top = b.top + f - j); + var k = this.getViewportAdjustedDelta(c, b, i, j); + k.left ? (b.left += k.left) : (b.top += k.top); + var l = /top|bottom/.test(c), + m = l ? 2 * k.left - e + i : 2 * k.top - f + j, + n = l ? "offsetWidth" : "offsetHeight"; + d.offset(b), this.replaceArrow(m, d[0][n], l); + }), + (c.prototype.replaceArrow = function(a, b, c) { + this.arrow() + .css(c ? "left" : "top", 50 * (1 - a / b) + "%") + .css(c ? "top" : "left", ""); + }), + (c.prototype.setContent = function() { + var a = this.tip(), + b = this.getTitle(); + a.find(".tooltip-inner")[this.options.html ? "html" : "text"](b), + a.removeClass("fade in top bottom left right"); + }), + (c.prototype.hide = function(b) { + function d() { + "in" != e.hoverState && f.detach(), + e.$element && + e.$element + .removeAttr("aria-describedby") + .trigger("hidden.bs." + e.type), + b && b(); + } + var e = this, + f = a(this.$tip), + g = a.Event("hide.bs." + this.type); + if ((this.$element.trigger(g), !g.isDefaultPrevented())) + return ( + f.removeClass("in"), + a.support.transition && f.hasClass("fade") + ? f + .one("bsTransitionEnd", d) + .emulateTransitionEnd(c.TRANSITION_DURATION) + : d(), + (this.hoverState = null), + this + ); + }), + (c.prototype.fixTitle = function() { + var a = this.$element; + (a.attr("title") || "string" != typeof a.attr("data-original-title")) && + a + .attr("data-original-title", a.attr("title") || "") + .attr("title", ""); + }), + (c.prototype.hasContent = function() { + return this.getTitle(); + }), + (c.prototype.getPosition = function(b) { + b = b || this.$element; + var c = b[0], + d = "BODY" == c.tagName, + e = c.getBoundingClientRect(); + null == e.width && + (e = a.extend({}, e, { + width: e.right - e.left, + height: e.bottom - e.top + })); + var f = window.SVGElement && c instanceof window.SVGElement, + g = d ? { top: 0, left: 0 } : f ? null : b.offset(), + h = { + scroll: d + ? document.documentElement.scrollTop || document.body.scrollTop + : b.scrollTop() + }, + i = d + ? { width: a(window).width(), height: a(window).height() } + : null; + return a.extend({}, e, h, i, g); + }), + (c.prototype.getCalculatedOffset = function(a, b, c, d) { + return "bottom" == a + ? { top: b.top + b.height, left: b.left + b.width / 2 - c / 2 } + : "top" == a + ? { top: b.top - d, left: b.left + b.width / 2 - c / 2 } + : "left" == a + ? { top: b.top + b.height / 2 - d / 2, left: b.left - c } + : { top: b.top + b.height / 2 - d / 2, left: b.left + b.width }; + }), + (c.prototype.getViewportAdjustedDelta = function(a, b, c, d) { + var e = { top: 0, left: 0 }; + if (!this.$viewport) return e; + var f = (this.options.viewport && this.options.viewport.padding) || 0, + g = this.getPosition(this.$viewport); + if (/right|left/.test(a)) { + var h = b.top - f - g.scroll, + i = b.top + f - g.scroll + d; + h < g.top + ? (e.top = g.top - h) + : i > g.top + g.height && (e.top = g.top + g.height - i); + } else { + var j = b.left - f, + k = b.left + f + c; + j < g.left + ? (e.left = g.left - j) + : k > g.right && (e.left = g.left + g.width - k); + } + return e; + }), + (c.prototype.getTitle = function() { + var a, + b = this.$element, + c = this.options; + return (a = + b.attr("data-original-title") || + ("function" == typeof c.title ? c.title.call(b[0]) : c.title)); + }), + (c.prototype.getUID = function(a) { + do a += ~~(1e6 * Math.random()); + while (document.getElementById(a)); + return a; + }), + (c.prototype.tip = function() { + if ( + !this.$tip && + ((this.$tip = a(this.options.template)), 1 != this.$tip.length) + ) + throw new Error( + this.type + + " `template` option must consist of exactly 1 top-level element!" + ); + return this.$tip; + }), + (c.prototype.arrow = function() { + return (this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")); + }), + (c.prototype.enable = function() { + this.enabled = !0; + }), + (c.prototype.disable = function() { + this.enabled = !1; + }), + (c.prototype.toggleEnabled = function() { + this.enabled = !this.enabled; + }), + (c.prototype.toggle = function(b) { + var c = this; + b && + ((c = a(b.currentTarget).data("bs." + this.type)), + c || + ((c = new this.constructor( + b.currentTarget, + this.getDelegateOptions() + )), + a(b.currentTarget).data("bs." + this.type, c))), + b + ? ((c.inState.click = !c.inState.click), + c.isInStateTrue() ? c.enter(c) : c.leave(c)) + : c.tip().hasClass("in") + ? c.leave(c) + : c.enter(c); + }), + (c.prototype.destroy = function() { + var a = this; + clearTimeout(this.timeout), + this.hide(function() { + a.$element.off("." + a.type).removeData("bs." + a.type), + a.$tip && a.$tip.detach(), + (a.$tip = null), + (a.$arrow = null), + (a.$viewport = null), + (a.$element = null); + }); + }); + var d = a.fn.tooltip; + (a.fn.tooltip = b), + (a.fn.tooltip.Constructor = c), + (a.fn.tooltip.noConflict = function() { + return (a.fn.tooltip = d), this; + }); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var d = a(this), + e = d.data("bs.popover"), + f = "object" == typeof b && b; + (!e && /destroy|hide/.test(b)) || + (e || d.data("bs.popover", (e = new c(this, f))), + "string" == typeof b && e[b]()); + }); + } + var c = function(a, b) { + this.init("popover", a, b); + }; + if (!a.fn.tooltip) throw new Error("Popover requires tooltip.js"); + (c.VERSION = "3.3.7"), + (c.DEFAULTS = a.extend({}, a.fn.tooltip.Constructor.DEFAULTS, { + placement: "right", + trigger: "click", + content: "", + template: + '' + })), + (c.prototype = a.extend({}, a.fn.tooltip.Constructor.prototype)), + (c.prototype.constructor = c), + (c.prototype.getDefaults = function() { + return c.DEFAULTS; + }), + (c.prototype.setContent = function() { + var a = this.tip(), + b = this.getTitle(), + c = this.getContent(); + a.find(".popover-title")[this.options.html ? "html" : "text"](b), + a + .find(".popover-content") + .children() + .detach() + .end() + [ + this.options.html + ? "string" == typeof c + ? "html" + : "append" + : "text" + ](c), + a.removeClass("fade top bottom left right in"), + a.find(".popover-title").html() || a.find(".popover-title").hide(); + }), + (c.prototype.hasContent = function() { + return this.getTitle() || this.getContent(); + }), + (c.prototype.getContent = function() { + var a = this.$element, + b = this.options; + return ( + a.attr("data-content") || + ("function" == typeof b.content ? b.content.call(a[0]) : b.content) + ); + }), + (c.prototype.arrow = function() { + return (this.$arrow = this.$arrow || this.tip().find(".arrow")); + }); + var d = a.fn.popover; + (a.fn.popover = b), + (a.fn.popover.Constructor = c), + (a.fn.popover.noConflict = function() { + return (a.fn.popover = d), this; + }); + })(jQuery), + +(function(a) { + "use strict"; + function b(c, d) { + (this.$body = a(document.body)), + (this.$scrollElement = a(a(c).is(document.body) ? window : c)), + (this.options = a.extend({}, b.DEFAULTS, d)), + (this.selector = (this.options.target || "") + " .nav li > a"), + (this.offsets = []), + (this.targets = []), + (this.activeTarget = null), + (this.scrollHeight = 0), + this.$scrollElement.on( + "scroll.bs.scrollspy", + a.proxy(this.process, this) + ), + this.refresh(), + this.process(); + } + function c(c) { + return this.each(function() { + var d = a(this), + e = d.data("bs.scrollspy"), + f = "object" == typeof c && c; + e || d.data("bs.scrollspy", (e = new b(this, f))), + "string" == typeof c && e[c](); + }); + } + (b.VERSION = "3.3.7"), + (b.DEFAULTS = { offset: 10 }), + (b.prototype.getScrollHeight = function() { + return ( + this.$scrollElement[0].scrollHeight || + Math.max( + this.$body[0].scrollHeight, + document.documentElement.scrollHeight + ) + ); + }), + (b.prototype.refresh = function() { + var b = this, + c = "offset", + d = 0; + (this.offsets = []), + (this.targets = []), + (this.scrollHeight = this.getScrollHeight()), + a.isWindow(this.$scrollElement[0]) || + ((c = "position"), (d = this.$scrollElement.scrollTop())), + this.$body + .find(this.selector) + .map(function() { + var b = a(this), + e = b.data("target") || b.attr("href"), + f = /^#./.test(e) && a(e); + return ( + (f && f.length && f.is(":visible") && [[f[c]().top + d, e]]) || + null + ); + }) + .sort(function(a, b) { + return a[0] - b[0]; + }) + .each(function() { + b.offsets.push(this[0]), b.targets.push(this[1]); + }); + }), + (b.prototype.process = function() { + var a, + b = this.$scrollElement.scrollTop() + this.options.offset, + c = this.getScrollHeight(), + d = this.options.offset + c - this.$scrollElement.height(), + e = this.offsets, + f = this.targets, + g = this.activeTarget; + if ((this.scrollHeight != c && this.refresh(), b >= d)) + return g != (a = f[f.length - 1]) && this.activate(a); + if (g && b < e[0]) return (this.activeTarget = null), this.clear(); + for (a = e.length; a--; ) + g != f[a] && + b >= e[a] && + (void 0 === e[a + 1] || b < e[a + 1]) && + this.activate(f[a]); + }), + (b.prototype.activate = function(b) { + (this.activeTarget = b), this.clear(); + var c = + this.selector + + '[data-target="' + + b + + '"],' + + this.selector + + '[href="' + + b + + '"]', + d = a(c) + .parents("li") + .addClass("active"); + d.parent(".dropdown-menu").length && + (d = d.closest("li.dropdown").addClass("active")), + d.trigger("activate.bs.scrollspy"); + }), + (b.prototype.clear = function() { + a(this.selector) + .parentsUntil(this.options.target, ".active") + .removeClass("active"); + }); + var d = a.fn.scrollspy; + (a.fn.scrollspy = c), + (a.fn.scrollspy.Constructor = b), + (a.fn.scrollspy.noConflict = function() { + return (a.fn.scrollspy = d), this; + }), + a(window).on("load.bs.scrollspy.data-api", function() { + a('[data-spy="scroll"]').each(function() { + var b = a(this); + c.call(b, b.data()); + }); + }); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var d = a(this), + e = d.data("bs.tab"); + e || d.data("bs.tab", (e = new c(this))), + "string" == typeof b && e[b](); + }); + } + var c = function(b) { + this.element = a(b); + }; + (c.VERSION = "3.3.7"), + (c.TRANSITION_DURATION = 150), + (c.prototype.show = function() { + var b = this.element, + c = b.closest("ul:not(.dropdown-menu)"), + d = b.data("target"); + if ( + (d || + ((d = b.attr("href")), (d = d && d.replace(/.*(?=#[^\s]*$)/, ""))), + !b.parent("li").hasClass("active")) + ) { + var e = c.find(".active:last a"), + f = a.Event("hide.bs.tab", { relatedTarget: b[0] }), + g = a.Event("show.bs.tab", { relatedTarget: e[0] }); + if ( + (e.trigger(f), + b.trigger(g), + !g.isDefaultPrevented() && !f.isDefaultPrevented()) + ) { + var h = a(d); + this.activate(b.closest("li"), c), + this.activate(h, h.parent(), function() { + e.trigger({ type: "hidden.bs.tab", relatedTarget: b[0] }), + b.trigger({ type: "shown.bs.tab", relatedTarget: e[0] }); + }); + } + } + }), + (c.prototype.activate = function(b, d, e) { + function f() { + g + .removeClass("active") + .find("> .dropdown-menu > .active") + .removeClass("active") + .end() + .find('[data-toggle="tab"]') + .attr("aria-expanded", !1), + b + .addClass("active") + .find('[data-toggle="tab"]') + .attr("aria-expanded", !0), + h ? (b[0].offsetWidth, b.addClass("in")) : b.removeClass("fade"), + b.parent(".dropdown-menu").length && + b + .closest("li.dropdown") + .addClass("active") + .end() + .find('[data-toggle="tab"]') + .attr("aria-expanded", !0), + e && e(); + } + var g = d.find("> .active"), + h = + e && + a.support.transition && + ((g.length && g.hasClass("fade")) || !!d.find("> .fade").length); + g.length && h + ? g + .one("bsTransitionEnd", f) + .emulateTransitionEnd(c.TRANSITION_DURATION) + : f(), + g.removeClass("in"); + }); + var d = a.fn.tab; + (a.fn.tab = b), + (a.fn.tab.Constructor = c), + (a.fn.tab.noConflict = function() { + return (a.fn.tab = d), this; + }); + var e = function(c) { + c.preventDefault(), b.call(a(this), "show"); + }; + a(document) + .on("click.bs.tab.data-api", '[data-toggle="tab"]', e) + .on("click.bs.tab.data-api", '[data-toggle="pill"]', e); + })(jQuery), + +(function(a) { + "use strict"; + function b(b) { + return this.each(function() { + var d = a(this), + e = d.data("bs.affix"), + f = "object" == typeof b && b; + e || d.data("bs.affix", (e = new c(this, f))), + "string" == typeof b && e[b](); + }); + } + var c = function(b, d) { + (this.options = a.extend({}, c.DEFAULTS, d)), + (this.$target = a(this.options.target) + .on("scroll.bs.affix.data-api", a.proxy(this.checkPosition, this)) + .on( + "click.bs.affix.data-api", + a.proxy(this.checkPositionWithEventLoop, this) + )), + (this.$element = a(b)), + (this.affixed = null), + (this.unpin = null), + (this.pinnedOffset = null), + this.checkPosition(); + }; + (c.VERSION = "3.3.7"), + (c.RESET = "affix affix-top affix-bottom"), + (c.DEFAULTS = { offset: 0, target: window }), + (c.prototype.getState = function(a, b, c, d) { + var e = this.$target.scrollTop(), + f = this.$element.offset(), + g = this.$target.height(); + if (null != c && "top" == this.affixed) return e < c && "top"; + if ("bottom" == this.affixed) + return null != c + ? !(e + this.unpin <= f.top) && "bottom" + : !(e + g <= a - d) && "bottom"; + var h = null == this.affixed, + i = h ? e : f.top, + j = h ? g : b; + return null != c && e <= c + ? "top" + : null != d && i + j >= a - d && "bottom"; + }), + (c.prototype.getPinnedOffset = function() { + if (this.pinnedOffset) return this.pinnedOffset; + this.$element.removeClass(c.RESET).addClass("affix"); + var a = this.$target.scrollTop(), + b = this.$element.offset(); + return (this.pinnedOffset = b.top - a); + }), + (c.prototype.checkPositionWithEventLoop = function() { + setTimeout(a.proxy(this.checkPosition, this), 1); + }), + (c.prototype.checkPosition = function() { + if (this.$element.is(":visible")) { + var b = this.$element.height(), + d = this.options.offset, + e = d.top, + f = d.bottom, + g = Math.max(a(document).height(), a(document.body).height()); + "object" != typeof d && (f = e = d), + "function" == typeof e && (e = d.top(this.$element)), + "function" == typeof f && (f = d.bottom(this.$element)); + var h = this.getState(g, b, e, f); + if (this.affixed != h) { + null != this.unpin && this.$element.css("top", ""); + var i = "affix" + (h ? "-" + h : ""), + j = a.Event(i + ".bs.affix"); + if ((this.$element.trigger(j), j.isDefaultPrevented())) return; + (this.affixed = h), + (this.unpin = "bottom" == h ? this.getPinnedOffset() : null), + this.$element + .removeClass(c.RESET) + .addClass(i) + .trigger(i.replace("affix", "affixed") + ".bs.affix"); + } + "bottom" == h && this.$element.offset({ top: g - b - f }); + } + }); + var d = a.fn.affix; + (a.fn.affix = b), + (a.fn.affix.Constructor = c), + (a.fn.affix.noConflict = function() { + return (a.fn.affix = d), this; + }), + a(window).on("load", function() { + a('[data-spy="affix"]').each(function() { + var c = a(this), + d = c.data(); + (d.offset = d.offset || {}), + null != d.offsetBottom && (d.offset.bottom = d.offsetBottom), + null != d.offsetTop && (d.offset.top = d.offsetTop), + b.call(c, d); + }); + }); + })(jQuery); diff --git a/Documentation/assets/js/jquery-3.2.1.min.js b/Documentation/assets/js/jquery-3.2.1.min.js new file mode 100644 index 0000000..97a0e6d --- /dev/null +++ b/Documentation/assets/js/jquery-3.2.1.min.js @@ -0,0 +1,5376 @@ +/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */ +!(function(a, b) { + "use strict"; + "object" == typeof module && "object" == typeof module.exports + ? (module.exports = a.document + ? b(a, !0) + : function(a) { + if (!a.document) + throw new Error("jQuery requires a window with a document"); + return b(a); + }) + : b(a); +})("undefined" != typeof window ? window : this, function(a, b) { + "use strict"; + var c = [], + d = a.document, + e = Object.getPrototypeOf, + f = c.slice, + g = c.concat, + h = c.push, + i = c.indexOf, + j = {}, + k = j.toString, + l = j.hasOwnProperty, + m = l.toString, + n = m.call(Object), + o = {}; + function p(a, b) { + b = b || d; + var c = b.createElement("script"); + (c.text = a), b.head.appendChild(c).parentNode.removeChild(c); + } + var q = "3.2.1", + r = function(a, b) { + return new r.fn.init(a, b); + }, + s = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, + t = /^-ms-/, + u = /-([a-z])/g, + v = function(a, b) { + return b.toUpperCase(); + }; + (r.fn = r.prototype = { + jquery: q, + constructor: r, + length: 0, + toArray: function() { + return f.call(this); + }, + get: function(a) { + return null == a ? f.call(this) : a < 0 ? this[a + this.length] : this[a]; + }, + pushStack: function(a) { + var b = r.merge(this.constructor(), a); + return (b.prevObject = this), b; + }, + each: function(a) { + return r.each(this, a); + }, + map: function(a) { + return this.pushStack( + r.map(this, function(b, c) { + return a.call(b, c, b); + }) + ); + }, + slice: function() { + return this.pushStack(f.apply(this, arguments)); + }, + first: function() { + return this.eq(0); + }, + last: function() { + return this.eq(-1); + }, + eq: function(a) { + var b = this.length, + c = +a + (a < 0 ? b : 0); + return this.pushStack(c >= 0 && c < b ? [this[c]] : []); + }, + end: function() { + return this.prevObject || this.constructor(); + }, + push: h, + sort: c.sort, + splice: c.splice + }), + (r.extend = r.fn.extend = function() { + var a, + b, + c, + d, + e, + f, + g = arguments[0] || {}, + h = 1, + i = arguments.length, + j = !1; + for ( + "boolean" == typeof g && ((j = g), (g = arguments[h] || {}), h++), + "object" == typeof g || r.isFunction(g) || (g = {}), + h === i && ((g = this), h--); + h < i; + h++ + ) + if (null != (a = arguments[h])) + for (b in a) + (c = g[b]), + (d = a[b]), + g !== d && + (j && d && (r.isPlainObject(d) || (e = Array.isArray(d))) + ? (e + ? ((e = !1), (f = c && Array.isArray(c) ? c : [])) + : (f = c && r.isPlainObject(c) ? c : {}), + (g[b] = r.extend(j, f, d))) + : void 0 !== d && (g[b] = d)); + return g; + }), + r.extend({ + expando: "jQuery" + (q + Math.random()).replace(/\D/g, ""), + isReady: !0, + error: function(a) { + throw new Error(a); + }, + noop: function() {}, + isFunction: function(a) { + return "function" === r.type(a); + }, + isWindow: function(a) { + return null != a && a === a.window; + }, + isNumeric: function(a) { + var b = r.type(a); + return ("number" === b || "string" === b) && !isNaN(a - parseFloat(a)); + }, + isPlainObject: function(a) { + var b, c; + return ( + !(!a || "[object Object]" !== k.call(a)) && + (!(b = e(a)) || + ((c = l.call(b, "constructor") && b.constructor), + "function" == typeof c && m.call(c) === n)) + ); + }, + isEmptyObject: function(a) { + var b; + for (b in a) return !1; + return !0; + }, + type: function(a) { + return null == a + ? a + "" + : "object" == typeof a || "function" == typeof a + ? j[k.call(a)] || "object" + : typeof a; + }, + globalEval: function(a) { + p(a); + }, + camelCase: function(a) { + return a.replace(t, "ms-").replace(u, v); + }, + each: function(a, b) { + var c, + d = 0; + if (w(a)) { + for (c = a.length; d < c; d++) + if (b.call(a[d], d, a[d]) === !1) break; + } else for (d in a) if (b.call(a[d], d, a[d]) === !1) break; + return a; + }, + trim: function(a) { + return null == a ? "" : (a + "").replace(s, ""); + }, + makeArray: function(a, b) { + var c = b || []; + return ( + null != a && + (w(Object(a)) + ? r.merge(c, "string" == typeof a ? [a] : a) + : h.call(c, a)), + c + ); + }, + inArray: function(a, b, c) { + return null == b ? -1 : i.call(b, a, c); + }, + merge: function(a, b) { + for (var c = +b.length, d = 0, e = a.length; d < c; d++) a[e++] = b[d]; + return (a.length = e), a; + }, + grep: function(a, b, c) { + for (var d, e = [], f = 0, g = a.length, h = !c; f < g; f++) + (d = !b(a[f], f)), d !== h && e.push(a[f]); + return e; + }, + map: function(a, b, c) { + var d, + e, + f = 0, + h = []; + if (w(a)) + for (d = a.length; f < d; f++) + (e = b(a[f], f, c)), null != e && h.push(e); + else for (f in a) (e = b(a[f], f, c)), null != e && h.push(e); + return g.apply([], h); + }, + guid: 1, + proxy: function(a, b) { + var c, d, e; + if ( + ("string" == typeof b && ((c = a[b]), (b = a), (a = c)), + r.isFunction(a)) + ) + return ( + (d = f.call(arguments, 2)), + (e = function() { + return a.apply(b || this, d.concat(f.call(arguments))); + }), + (e.guid = a.guid = a.guid || r.guid++), + e + ); + }, + now: Date.now, + support: o + }), + "function" == typeof Symbol && (r.fn[Symbol.iterator] = c[Symbol.iterator]), + r.each( + "Boolean Number String Function Array Date RegExp Object Error Symbol".split( + " " + ), + function(a, b) { + j["[object " + b + "]"] = b.toLowerCase(); + } + ); + function w(a) { + var b = !!a && "length" in a && a.length, + c = r.type(a); + return ( + "function" !== c && + !r.isWindow(a) && + ("array" === c || + 0 === b || + ("number" == typeof b && b > 0 && b - 1 in a)) + ); + } + var x = (function(a) { + var b, + c, + d, + e, + f, + g, + h, + i, + j, + k, + l, + m, + n, + o, + p, + q, + r, + s, + t, + u = "sizzle" + 1 * new Date(), + v = a.document, + w = 0, + x = 0, + y = ha(), + z = ha(), + A = ha(), + B = function(a, b) { + return a === b && (l = !0), 0; + }, + C = {}.hasOwnProperty, + D = [], + E = D.pop, + F = D.push, + G = D.push, + H = D.slice, + I = function(a, b) { + for (var c = 0, d = a.length; c < d; c++) if (a[c] === b) return c; + return -1; + }, + J = + "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped", + K = "[\\x20\\t\\r\\n\\f]", + L = "(?:\\\\.|[\\w-]|[^\0-\\xa0])+", + M = + "\\[" + + K + + "*(" + + L + + ")(?:" + + K + + "*([*^$|!~]?=)" + + K + + "*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|(" + + L + + "))|)" + + K + + "*\\]", + N = + ":(" + + L + + ")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|" + + M + + ")*)|.*)\\)|)", + O = new RegExp(K + "+", "g"), + P = new RegExp("^" + K + "+|((?:^|[^\\\\])(?:\\\\.)*)" + K + "+$", "g"), + Q = new RegExp("^" + K + "*," + K + "*"), + R = new RegExp("^" + K + "*([>+~]|" + K + ")" + K + "*"), + S = new RegExp("=" + K + "*([^\\]'\"]*?)" + K + "*\\]", "g"), + T = new RegExp(N), + U = new RegExp("^" + L + "$"), + V = { + ID: new RegExp("^#(" + L + ")"), + CLASS: new RegExp("^\\.(" + L + ")"), + TAG: new RegExp("^(" + L + "|[*])"), + ATTR: new RegExp("^" + M), + PSEUDO: new RegExp("^" + N), + CHILD: new RegExp( + "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + + K + + "*(even|odd|(([+-]|)(\\d*)n|)" + + K + + "*(?:([+-]|)" + + K + + "*(\\d+)|))" + + K + + "*\\)|)", + "i" + ), + bool: new RegExp("^(?:" + J + ")$", "i"), + needsContext: new RegExp( + "^" + + K + + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" + + K + + "*((?:-\\d)?\\d*)" + + K + + "*\\)|)(?=[^-]|$)", + "i" + ) + }, + W = /^(?:input|select|textarea|button)$/i, + X = /^h\d$/i, + Y = /^[^{]+\{\s*\[native \w/, + Z = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/, + $ = /[+~]/, + _ = new RegExp("\\\\([\\da-f]{1,6}" + K + "?|(" + K + ")|.)", "ig"), + aa = function(a, b, c) { + var d = "0x" + b - 65536; + return d !== d || c + ? b + : d < 0 + ? String.fromCharCode(d + 65536) + : String.fromCharCode((d >> 10) | 55296, (1023 & d) | 56320); + }, + ba = /([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g, + ca = function(a, b) { + return b + ? "\0" === a + ? "\ufffd" + : a.slice(0, -1) + + "\\" + + a.charCodeAt(a.length - 1).toString(16) + + " " + : "\\" + a; + }, + da = function() { + m(); + }, + ea = ta( + function(a) { + return a.disabled === !0 && ("form" in a || "label" in a); + }, + { dir: "parentNode", next: "legend" } + ); + try { + G.apply((D = H.call(v.childNodes)), v.childNodes), + D[v.childNodes.length].nodeType; + } catch (fa) { + G = { + apply: D.length + ? function(a, b) { + F.apply(a, H.call(b)); + } + : function(a, b) { + var c = a.length, + d = 0; + while ((a[c++] = b[d++])); + a.length = c - 1; + } + }; + } + function ga(a, b, d, e) { + var f, + h, + j, + k, + l, + o, + r, + s = b && b.ownerDocument, + w = b ? b.nodeType : 9; + if ( + ((d = d || []), + "string" != typeof a || !a || (1 !== w && 9 !== w && 11 !== w)) + ) + return d; + if ( + !e && + ((b ? b.ownerDocument || b : v) !== n && m(b), (b = b || n), p) + ) { + if (11 !== w && (l = Z.exec(a))) + if ((f = l[1])) { + if (9 === w) { + if (!(j = b.getElementById(f))) return d; + if (j.id === f) return d.push(j), d; + } else if (s && (j = s.getElementById(f)) && t(b, j) && j.id === f) + return d.push(j), d; + } else { + if (l[2]) return G.apply(d, b.getElementsByTagName(a)), d; + if ( + (f = l[3]) && + c.getElementsByClassName && + b.getElementsByClassName + ) + return G.apply(d, b.getElementsByClassName(f)), d; + } + if (c.qsa && !A[a + " "] && (!q || !q.test(a))) { + if (1 !== w) (s = b), (r = a); + else if ("object" !== b.nodeName.toLowerCase()) { + (k = b.getAttribute("id")) + ? (k = k.replace(ba, ca)) + : b.setAttribute("id", (k = u)), + (o = g(a)), + (h = o.length); + while (h--) o[h] = "#" + k + " " + sa(o[h]); + (r = o.join(",")), (s = ($.test(a) && qa(b.parentNode)) || b); + } + if (r) + try { + return G.apply(d, s.querySelectorAll(r)), d; + } catch (x) { + } finally { + k === u && b.removeAttribute("id"); + } + } + } + return i(a.replace(P, "$1"), b, d, e); + } + function ha() { + var a = []; + function b(c, e) { + return ( + a.push(c + " ") > d.cacheLength && delete b[a.shift()], + (b[c + " "] = e) + ); + } + return b; + } + function ia(a) { + return (a[u] = !0), a; + } + function ja(a) { + var b = n.createElement("fieldset"); + try { + return !!a(b); + } catch (c) { + return !1; + } finally { + b.parentNode && b.parentNode.removeChild(b), (b = null); + } + } + function ka(a, b) { + var c = a.split("|"), + e = c.length; + while (e--) d.attrHandle[c[e]] = b; + } + function la(a, b) { + var c = b && a, + d = + c && + 1 === a.nodeType && + 1 === b.nodeType && + a.sourceIndex - b.sourceIndex; + if (d) return d; + if (c) while ((c = c.nextSibling)) if (c === b) return -1; + return a ? 1 : -1; + } + function ma(a) { + return function(b) { + var c = b.nodeName.toLowerCase(); + return "input" === c && b.type === a; + }; + } + function na(a) { + return function(b) { + var c = b.nodeName.toLowerCase(); + return ("input" === c || "button" === c) && b.type === a; + }; + } + function oa(a) { + return function(b) { + return "form" in b + ? b.parentNode && b.disabled === !1 + ? "label" in b + ? "label" in b.parentNode + ? b.parentNode.disabled === a + : b.disabled === a + : b.isDisabled === a || (b.isDisabled !== !a && ea(b) === a) + : b.disabled === a + : "label" in b && b.disabled === a; + }; + } + function pa(a) { + return ia(function(b) { + return ( + (b = +b), + ia(function(c, d) { + var e, + f = a([], c.length, b), + g = f.length; + while (g--) c[(e = f[g])] && (c[e] = !(d[e] = c[e])); + }) + ); + }); + } + function qa(a) { + return a && "undefined" != typeof a.getElementsByTagName && a; + } + (c = ga.support = {}), + (f = ga.isXML = function(a) { + var b = a && (a.ownerDocument || a).documentElement; + return !!b && "HTML" !== b.nodeName; + }), + (m = ga.setDocument = function(a) { + var b, + e, + g = a ? a.ownerDocument || a : v; + return g !== n && 9 === g.nodeType && g.documentElement + ? ((n = g), + (o = n.documentElement), + (p = !f(n)), + v !== n && + (e = n.defaultView) && + e.top !== e && + (e.addEventListener + ? e.addEventListener("unload", da, !1) + : e.attachEvent && e.attachEvent("onunload", da)), + (c.attributes = ja(function(a) { + return (a.className = "i"), !a.getAttribute("className"); + })), + (c.getElementsByTagName = ja(function(a) { + return ( + a.appendChild(n.createComment("")), + !a.getElementsByTagName("*").length + ); + })), + (c.getElementsByClassName = Y.test(n.getElementsByClassName)), + (c.getById = ja(function(a) { + return ( + (o.appendChild(a).id = u), + !n.getElementsByName || !n.getElementsByName(u).length + ); + })), + c.getById + ? ((d.filter.ID = function(a) { + var b = a.replace(_, aa); + return function(a) { + return a.getAttribute("id") === b; + }; + }), + (d.find.ID = function(a, b) { + if ("undefined" != typeof b.getElementById && p) { + var c = b.getElementById(a); + return c ? [c] : []; + } + })) + : ((d.filter.ID = function(a) { + var b = a.replace(_, aa); + return function(a) { + var c = + "undefined" != typeof a.getAttributeNode && + a.getAttributeNode("id"); + return c && c.value === b; + }; + }), + (d.find.ID = function(a, b) { + if ("undefined" != typeof b.getElementById && p) { + var c, + d, + e, + f = b.getElementById(a); + if (f) { + if (((c = f.getAttributeNode("id")), c && c.value === a)) + return [f]; + (e = b.getElementsByName(a)), (d = 0); + while ((f = e[d++])) + if ( + ((c = f.getAttributeNode("id")), c && c.value === a) + ) + return [f]; + } + return []; + } + })), + (d.find.TAG = c.getElementsByTagName + ? function(a, b) { + return "undefined" != typeof b.getElementsByTagName + ? b.getElementsByTagName(a) + : c.qsa + ? b.querySelectorAll(a) + : void 0; + } + : function(a, b) { + var c, + d = [], + e = 0, + f = b.getElementsByTagName(a); + if ("*" === a) { + while ((c = f[e++])) 1 === c.nodeType && d.push(c); + return d; + } + return f; + }), + (d.find.CLASS = + c.getElementsByClassName && + function(a, b) { + if ("undefined" != typeof b.getElementsByClassName && p) + return b.getElementsByClassName(a); + }), + (r = []), + (q = []), + (c.qsa = Y.test(n.querySelectorAll)) && + (ja(function(a) { + (o.appendChild(a).innerHTML = + ""), + a.querySelectorAll("[msallowcapture^='']").length && + q.push("[*^$]=" + K + "*(?:''|\"\")"), + a.querySelectorAll("[selected]").length || + q.push("\\[" + K + "*(?:value|" + J + ")"), + a.querySelectorAll("[id~=" + u + "-]").length || q.push("~="), + a.querySelectorAll(":checked").length || q.push(":checked"), + a.querySelectorAll("a#" + u + "+*").length || + q.push(".#.+[+~]"); + }), + ja(function(a) { + a.innerHTML = + ""; + var b = n.createElement("input"); + b.setAttribute("type", "hidden"), + a.appendChild(b).setAttribute("name", "D"), + a.querySelectorAll("[name=d]").length && + q.push("name" + K + "*[*^$|!~]?="), + 2 !== a.querySelectorAll(":enabled").length && + q.push(":enabled", ":disabled"), + (o.appendChild(a).disabled = !0), + 2 !== a.querySelectorAll(":disabled").length && + q.push(":enabled", ":disabled"), + a.querySelectorAll("*,:x"), + q.push(",.*:"); + })), + (c.matchesSelector = Y.test( + (s = + o.matches || + o.webkitMatchesSelector || + o.mozMatchesSelector || + o.oMatchesSelector || + o.msMatchesSelector) + )) && + ja(function(a) { + (c.disconnectedMatch = s.call(a, "*")), + s.call(a, "[s!='']:x"), + r.push("!=", N); + }), + (q = q.length && new RegExp(q.join("|"))), + (r = r.length && new RegExp(r.join("|"))), + (b = Y.test(o.compareDocumentPosition)), + (t = + b || Y.test(o.contains) + ? function(a, b) { + var c = 9 === a.nodeType ? a.documentElement : a, + d = b && b.parentNode; + return ( + a === d || + !( + !d || + 1 !== d.nodeType || + !(c.contains + ? c.contains(d) + : a.compareDocumentPosition && + 16 & a.compareDocumentPosition(d)) + ) + ); + } + : function(a, b) { + if (b) while ((b = b.parentNode)) if (b === a) return !0; + return !1; + }), + (B = b + ? function(a, b) { + if (a === b) return (l = !0), 0; + var d = + !a.compareDocumentPosition - !b.compareDocumentPosition; + return d + ? d + : ((d = + (a.ownerDocument || a) === (b.ownerDocument || b) + ? a.compareDocumentPosition(b) + : 1), + 1 & d || + (!c.sortDetached && b.compareDocumentPosition(a) === d) + ? a === n || (a.ownerDocument === v && t(v, a)) + ? -1 + : b === n || (b.ownerDocument === v && t(v, b)) + ? 1 + : k + ? I(k, a) - I(k, b) + : 0 + : 4 & d + ? -1 + : 1); + } + : function(a, b) { + if (a === b) return (l = !0), 0; + var c, + d = 0, + e = a.parentNode, + f = b.parentNode, + g = [a], + h = [b]; + if (!e || !f) + return a === n + ? -1 + : b === n + ? 1 + : e + ? -1 + : f + ? 1 + : k + ? I(k, a) - I(k, b) + : 0; + if (e === f) return la(a, b); + c = a; + while ((c = c.parentNode)) g.unshift(c); + c = b; + while ((c = c.parentNode)) h.unshift(c); + while (g[d] === h[d]) d++; + return d + ? la(g[d], h[d]) + : g[d] === v + ? -1 + : h[d] === v + ? 1 + : 0; + }), + n) + : n; + }), + (ga.matches = function(a, b) { + return ga(a, null, null, b); + }), + (ga.matchesSelector = function(a, b) { + if ( + ((a.ownerDocument || a) !== n && m(a), + (b = b.replace(S, "='$1']")), + c.matchesSelector && + p && + !A[b + " "] && + (!r || !r.test(b)) && + (!q || !q.test(b))) + ) + try { + var d = s.call(a, b); + if ( + d || + c.disconnectedMatch || + (a.document && 11 !== a.document.nodeType) + ) + return d; + } catch (e) {} + return ga(b, n, null, [a]).length > 0; + }), + (ga.contains = function(a, b) { + return (a.ownerDocument || a) !== n && m(a), t(a, b); + }), + (ga.attr = function(a, b) { + (a.ownerDocument || a) !== n && m(a); + var e = d.attrHandle[b.toLowerCase()], + f = e && C.call(d.attrHandle, b.toLowerCase()) ? e(a, b, !p) : void 0; + return void 0 !== f + ? f + : c.attributes || !p + ? a.getAttribute(b) + : (f = a.getAttributeNode(b)) && f.specified + ? f.value + : null; + }), + (ga.escape = function(a) { + return (a + "").replace(ba, ca); + }), + (ga.error = function(a) { + throw new Error("Syntax error, unrecognized expression: " + a); + }), + (ga.uniqueSort = function(a) { + var b, + d = [], + e = 0, + f = 0; + if ( + ((l = !c.detectDuplicates), + (k = !c.sortStable && a.slice(0)), + a.sort(B), + l) + ) { + while ((b = a[f++])) b === a[f] && (e = d.push(f)); + while (e--) a.splice(d[e], 1); + } + return (k = null), a; + }), + (e = ga.getText = function(a) { + var b, + c = "", + d = 0, + f = a.nodeType; + if (f) { + if (1 === f || 9 === f || 11 === f) { + if ("string" == typeof a.textContent) return a.textContent; + for (a = a.firstChild; a; a = a.nextSibling) c += e(a); + } else if (3 === f || 4 === f) return a.nodeValue; + } else while ((b = a[d++])) c += e(b); + return c; + }), + (d = ga.selectors = { + cacheLength: 50, + createPseudo: ia, + match: V, + attrHandle: {}, + find: {}, + relative: { + ">": { dir: "parentNode", first: !0 }, + " ": { dir: "parentNode" }, + "+": { dir: "previousSibling", first: !0 }, + "~": { dir: "previousSibling" } + }, + preFilter: { + ATTR: function(a) { + return ( + (a[1] = a[1].replace(_, aa)), + (a[3] = (a[3] || a[4] || a[5] || "").replace(_, aa)), + "~=" === a[2] && (a[3] = " " + a[3] + " "), + a.slice(0, 4) + ); + }, + CHILD: function(a) { + return ( + (a[1] = a[1].toLowerCase()), + "nth" === a[1].slice(0, 3) + ? (a[3] || ga.error(a[0]), + (a[4] = +(a[4] + ? a[5] + (a[6] || 1) + : 2 * ("even" === a[3] || "odd" === a[3]))), + (a[5] = +(a[7] + a[8] || "odd" === a[3]))) + : a[3] && ga.error(a[0]), + a + ); + }, + PSEUDO: function(a) { + var b, + c = !a[6] && a[2]; + return V.CHILD.test(a[0]) + ? null + : (a[3] + ? (a[2] = a[4] || a[5] || "") + : c && + T.test(c) && + (b = g(c, !0)) && + (b = c.indexOf(")", c.length - b) - c.length) && + ((a[0] = a[0].slice(0, b)), (a[2] = c.slice(0, b))), + a.slice(0, 3)); + } + }, + filter: { + TAG: function(a) { + var b = a.replace(_, aa).toLowerCase(); + return "*" === a + ? function() { + return !0; + } + : function(a) { + return a.nodeName && a.nodeName.toLowerCase() === b; + }; + }, + CLASS: function(a) { + var b = y[a + " "]; + return ( + b || + ((b = new RegExp("(^|" + K + ")" + a + "(" + K + "|$)")) && + y(a, function(a) { + return b.test( + ("string" == typeof a.className && a.className) || + ("undefined" != typeof a.getAttribute && + a.getAttribute("class")) || + "" + ); + })) + ); + }, + ATTR: function(a, b, c) { + return function(d) { + var e = ga.attr(d, a); + return null == e + ? "!=" === b + : !b || + ((e += ""), + "=" === b + ? e === c + : "!=" === b + ? e !== c + : "^=" === b + ? c && 0 === e.indexOf(c) + : "*=" === b + ? c && e.indexOf(c) > -1 + : "$=" === b + ? c && e.slice(-c.length) === c + : "~=" === b + ? (" " + e.replace(O, " ") + " ").indexOf(c) > -1 + : "|=" === b && + (e === c || e.slice(0, c.length + 1) === c + "-")); + }; + }, + CHILD: function(a, b, c, d, e) { + var f = "nth" !== a.slice(0, 3), + g = "last" !== a.slice(-4), + h = "of-type" === b; + return 1 === d && 0 === e + ? function(a) { + return !!a.parentNode; + } + : function(b, c, i) { + var j, + k, + l, + m, + n, + o, + p = f !== g ? "nextSibling" : "previousSibling", + q = b.parentNode, + r = h && b.nodeName.toLowerCase(), + s = !i && !h, + t = !1; + if (q) { + if (f) { + while (p) { + m = b; + while ((m = m[p])) + if ( + h + ? m.nodeName.toLowerCase() === r + : 1 === m.nodeType + ) + return !1; + o = p = "only" === a && !o && "nextSibling"; + } + return !0; + } + if (((o = [g ? q.firstChild : q.lastChild]), g && s)) { + (m = q), + (l = m[u] || (m[u] = {})), + (k = l[m.uniqueID] || (l[m.uniqueID] = {})), + (j = k[a] || []), + (n = j[0] === w && j[1]), + (t = n && j[2]), + (m = n && q.childNodes[n]); + while ((m = (++n && m && m[p]) || (t = n = 0) || o.pop())) + if (1 === m.nodeType && ++t && m === b) { + k[a] = [w, n, t]; + break; + } + } else if ( + (s && + ((m = b), + (l = m[u] || (m[u] = {})), + (k = l[m.uniqueID] || (l[m.uniqueID] = {})), + (j = k[a] || []), + (n = j[0] === w && j[1]), + (t = n)), + t === !1) + ) + while ((m = (++n && m && m[p]) || (t = n = 0) || o.pop())) + if ( + (h + ? m.nodeName.toLowerCase() === r + : 1 === m.nodeType) && + ++t && + (s && + ((l = m[u] || (m[u] = {})), + (k = l[m.uniqueID] || (l[m.uniqueID] = {})), + (k[a] = [w, t])), + m === b) + ) + break; + return (t -= e), t === d || (t % d === 0 && t / d >= 0); + } + }; + }, + PSEUDO: function(a, b) { + var c, + e = + d.pseudos[a] || + d.setFilters[a.toLowerCase()] || + ga.error("unsupported pseudo: " + a); + return e[u] + ? e(b) + : e.length > 1 + ? ((c = [a, a, "", b]), + d.setFilters.hasOwnProperty(a.toLowerCase()) + ? ia(function(a, c) { + var d, + f = e(a, b), + g = f.length; + while (g--) (d = I(a, f[g])), (a[d] = !(c[d] = f[g])); + }) + : function(a) { + return e(a, 0, c); + }) + : e; + } + }, + pseudos: { + not: ia(function(a) { + var b = [], + c = [], + d = h(a.replace(P, "$1")); + return d[u] + ? ia(function(a, b, c, e) { + var f, + g = d(a, null, e, []), + h = a.length; + while (h--) (f = g[h]) && (a[h] = !(b[h] = f)); + }) + : function(a, e, f) { + return (b[0] = a), d(b, null, f, c), (b[0] = null), !c.pop(); + }; + }), + has: ia(function(a) { + return function(b) { + return ga(a, b).length > 0; + }; + }), + contains: ia(function(a) { + return ( + (a = a.replace(_, aa)), + function(b) { + return (b.textContent || b.innerText || e(b)).indexOf(a) > -1; + } + ); + }), + lang: ia(function(a) { + return ( + U.test(a || "") || ga.error("unsupported lang: " + a), + (a = a.replace(_, aa).toLowerCase()), + function(b) { + var c; + do + if ( + (c = p + ? b.lang + : b.getAttribute("xml:lang") || b.getAttribute("lang")) + ) + return ( + (c = c.toLowerCase()), c === a || 0 === c.indexOf(a + "-") + ); + while ((b = b.parentNode) && 1 === b.nodeType); + return !1; + } + ); + }), + target: function(b) { + var c = a.location && a.location.hash; + return c && c.slice(1) === b.id; + }, + root: function(a) { + return a === o; + }, + focus: function(a) { + return ( + a === n.activeElement && + (!n.hasFocus || n.hasFocus()) && + !!(a.type || a.href || ~a.tabIndex) + ); + }, + enabled: oa(!1), + disabled: oa(!0), + checked: function(a) { + var b = a.nodeName.toLowerCase(); + return ( + ("input" === b && !!a.checked) || ("option" === b && !!a.selected) + ); + }, + selected: function(a) { + return ( + a.parentNode && a.parentNode.selectedIndex, a.selected === !0 + ); + }, + empty: function(a) { + for (a = a.firstChild; a; a = a.nextSibling) + if (a.nodeType < 6) return !1; + return !0; + }, + parent: function(a) { + return !d.pseudos.empty(a); + }, + header: function(a) { + return X.test(a.nodeName); + }, + input: function(a) { + return W.test(a.nodeName); + }, + button: function(a) { + var b = a.nodeName.toLowerCase(); + return ("input" === b && "button" === a.type) || "button" === b; + }, + text: function(a) { + var b; + return ( + "input" === a.nodeName.toLowerCase() && + "text" === a.type && + (null == (b = a.getAttribute("type")) || + "text" === b.toLowerCase()) + ); + }, + first: pa(function() { + return [0]; + }), + last: pa(function(a, b) { + return [b - 1]; + }), + eq: pa(function(a, b, c) { + return [c < 0 ? c + b : c]; + }), + even: pa(function(a, b) { + for (var c = 0; c < b; c += 2) a.push(c); + return a; + }), + odd: pa(function(a, b) { + for (var c = 1; c < b; c += 2) a.push(c); + return a; + }), + lt: pa(function(a, b, c) { + for (var d = c < 0 ? c + b : c; --d >= 0; ) a.push(d); + return a; + }), + gt: pa(function(a, b, c) { + for (var d = c < 0 ? c + b : c; ++d < b; ) a.push(d); + return a; + }) + } + }), + (d.pseudos.nth = d.pseudos.eq); + for (b in { radio: !0, checkbox: !0, file: !0, password: !0, image: !0 }) + d.pseudos[b] = ma(b); + for (b in { submit: !0, reset: !0 }) d.pseudos[b] = na(b); + function ra() {} + (ra.prototype = d.filters = d.pseudos), + (d.setFilters = new ra()), + (g = ga.tokenize = function(a, b) { + var c, + e, + f, + g, + h, + i, + j, + k = z[a + " "]; + if (k) return b ? 0 : k.slice(0); + (h = a), (i = []), (j = d.preFilter); + while (h) { + (c && !(e = Q.exec(h))) || + (e && (h = h.slice(e[0].length) || h), i.push((f = []))), + (c = !1), + (e = R.exec(h)) && + ((c = e.shift()), + f.push({ value: c, type: e[0].replace(P, " ") }), + (h = h.slice(c.length))); + for (g in d.filter) + !(e = V[g].exec(h)) || + (j[g] && !(e = j[g](e))) || + ((c = e.shift()), + f.push({ value: c, type: g, matches: e }), + (h = h.slice(c.length))); + if (!c) break; + } + return b ? h.length : h ? ga.error(a) : z(a, i).slice(0); + }); + function sa(a) { + for (var b = 0, c = a.length, d = ""; b < c; b++) d += a[b].value; + return d; + } + function ta(a, b, c) { + var d = b.dir, + e = b.next, + f = e || d, + g = c && "parentNode" === f, + h = x++; + return b.first + ? function(b, c, e) { + while ((b = b[d])) if (1 === b.nodeType || g) return a(b, c, e); + return !1; + } + : function(b, c, i) { + var j, + k, + l, + m = [w, h]; + if (i) { + while ((b = b[d])) + if ((1 === b.nodeType || g) && a(b, c, i)) return !0; + } else + while ((b = b[d])) + if (1 === b.nodeType || g) + if ( + ((l = b[u] || (b[u] = {})), + (k = l[b.uniqueID] || (l[b.uniqueID] = {})), + e && e === b.nodeName.toLowerCase()) + ) + b = b[d] || b; + else { + if ((j = k[f]) && j[0] === w && j[1] === h) + return (m[2] = j[2]); + if (((k[f] = m), (m[2] = a(b, c, i)))) return !0; + } + return !1; + }; + } + function ua(a) { + return a.length > 1 + ? function(b, c, d) { + var e = a.length; + while (e--) if (!a[e](b, c, d)) return !1; + return !0; + } + : a[0]; + } + function va(a, b, c) { + for (var d = 0, e = b.length; d < e; d++) ga(a, b[d], c); + return c; + } + function wa(a, b, c, d, e) { + for (var f, g = [], h = 0, i = a.length, j = null != b; h < i; h++) + (f = a[h]) && ((c && !c(f, d, e)) || (g.push(f), j && b.push(h))); + return g; + } + function xa(a, b, c, d, e, f) { + return ( + d && !d[u] && (d = xa(d)), + e && !e[u] && (e = xa(e, f)), + ia(function(f, g, h, i) { + var j, + k, + l, + m = [], + n = [], + o = g.length, + p = f || va(b || "*", h.nodeType ? [h] : h, []), + q = !a || (!f && b) ? p : wa(p, m, a, h, i), + r = c ? (e || (f ? a : o || d) ? [] : g) : q; + if ((c && c(q, r, h, i), d)) { + (j = wa(r, n)), d(j, [], h, i), (k = j.length); + while (k--) (l = j[k]) && (r[n[k]] = !(q[n[k]] = l)); + } + if (f) { + if (e || a) { + if (e) { + (j = []), (k = r.length); + while (k--) (l = r[k]) && j.push((q[k] = l)); + e(null, (r = []), j, i); + } + k = r.length; + while (k--) + (l = r[k]) && + (j = e ? I(f, l) : m[k]) > -1 && + (f[j] = !(g[j] = l)); + } + } else (r = wa(r === g ? r.splice(o, r.length) : r)), e ? e(null, g, r, i) : G.apply(g, r); + }) + ); + } + function ya(a) { + for ( + var b, + c, + e, + f = a.length, + g = d.relative[a[0].type], + h = g || d.relative[" "], + i = g ? 1 : 0, + k = ta( + function(a) { + return a === b; + }, + h, + !0 + ), + l = ta( + function(a) { + return I(b, a) > -1; + }, + h, + !0 + ), + m = [ + function(a, c, d) { + var e = + (!g && (d || c !== j)) || + ((b = c).nodeType ? k(a, c, d) : l(a, c, d)); + return (b = null), e; + } + ]; + i < f; + i++ + ) + if ((c = d.relative[a[i].type])) m = [ta(ua(m), c)]; + else { + if (((c = d.filter[a[i].type].apply(null, a[i].matches)), c[u])) { + for (e = ++i; e < f; e++) if (d.relative[a[e].type]) break; + return xa( + i > 1 && ua(m), + i > 1 && + sa( + a + .slice(0, i - 1) + .concat({ value: " " === a[i - 2].type ? "*" : "" }) + ).replace(P, "$1"), + c, + i < e && ya(a.slice(i, e)), + e < f && ya((a = a.slice(e))), + e < f && sa(a) + ); + } + m.push(c); + } + return ua(m); + } + function za(a, b) { + var c = b.length > 0, + e = a.length > 0, + f = function(f, g, h, i, k) { + var l, + o, + q, + r = 0, + s = "0", + t = f && [], + u = [], + v = j, + x = f || (e && d.find.TAG("*", k)), + y = (w += null == v ? 1 : Math.random() || 0.1), + z = x.length; + for ( + k && (j = g === n || g || k); + s !== z && null != (l = x[s]); + s++ + ) { + if (e && l) { + (o = 0), g || l.ownerDocument === n || (m(l), (h = !p)); + while ((q = a[o++])) + if (q(l, g || n, h)) { + i.push(l); + break; + } + k && (w = y); + } + c && ((l = !q && l) && r--, f && t.push(l)); + } + if (((r += s), c && s !== r)) { + o = 0; + while ((q = b[o++])) q(t, u, g, h); + if (f) { + if (r > 0) while (s--) t[s] || u[s] || (u[s] = E.call(i)); + u = wa(u); + } + G.apply(i, u), + k && !f && u.length > 0 && r + b.length > 1 && ga.uniqueSort(i); + } + return k && ((w = y), (j = v)), t; + }; + return c ? ia(f) : f; + } + return ( + (h = ga.compile = function(a, b) { + var c, + d = [], + e = [], + f = A[a + " "]; + if (!f) { + b || (b = g(a)), (c = b.length); + while (c--) (f = ya(b[c])), f[u] ? d.push(f) : e.push(f); + (f = A(a, za(e, d))), (f.selector = a); + } + return f; + }), + (i = ga.select = function(a, b, c, e) { + var f, + i, + j, + k, + l, + m = "function" == typeof a && a, + n = !e && g((a = m.selector || a)); + if (((c = c || []), 1 === n.length)) { + if ( + ((i = n[0] = n[0].slice(0)), + i.length > 2 && + "ID" === (j = i[0]).type && + 9 === b.nodeType && + p && + d.relative[i[1].type]) + ) { + if ( + ((b = (d.find.ID(j.matches[0].replace(_, aa), b) || [])[0]), !b) + ) + return c; + m && (b = b.parentNode), (a = a.slice(i.shift().value.length)); + } + f = V.needsContext.test(a) ? 0 : i.length; + while (f--) { + if (((j = i[f]), d.relative[(k = j.type)])) break; + if ( + (l = d.find[k]) && + (e = l( + j.matches[0].replace(_, aa), + ($.test(i[0].type) && qa(b.parentNode)) || b + )) + ) { + if ((i.splice(f, 1), (a = e.length && sa(i)), !a)) + return G.apply(c, e), c; + break; + } + } + } + return ( + (m || h(a, n))( + e, + b, + !p, + c, + !b || ($.test(a) && qa(b.parentNode)) || b + ), + c + ); + }), + (c.sortStable = + u + .split("") + .sort(B) + .join("") === u), + (c.detectDuplicates = !!l), + m(), + (c.sortDetached = ja(function(a) { + return 1 & a.compareDocumentPosition(n.createElement("fieldset")); + })), + ja(function(a) { + return ( + (a.innerHTML = ""), + "#" === a.firstChild.getAttribute("href") + ); + }) || + ka("type|href|height|width", function(a, b, c) { + if (!c) return a.getAttribute(b, "type" === b.toLowerCase() ? 1 : 2); + }), + (c.attributes && + ja(function(a) { + return ( + (a.innerHTML = ""), + a.firstChild.setAttribute("value", ""), + "" === a.firstChild.getAttribute("value") + ); + })) || + ka("value", function(a, b, c) { + if (!c && "input" === a.nodeName.toLowerCase()) return a.defaultValue; + }), + ja(function(a) { + return null == a.getAttribute("disabled"); + }) || + ka(J, function(a, b, c) { + var d; + if (!c) + return a[b] === !0 + ? b.toLowerCase() + : (d = a.getAttributeNode(b)) && d.specified + ? d.value + : null; + }), + ga + ); + })(a); + (r.find = x), + (r.expr = x.selectors), + (r.expr[":"] = r.expr.pseudos), + (r.uniqueSort = r.unique = x.uniqueSort), + (r.text = x.getText), + (r.isXMLDoc = x.isXML), + (r.contains = x.contains), + (r.escapeSelector = x.escape); + var y = function(a, b, c) { + var d = [], + e = void 0 !== c; + while ((a = a[b]) && 9 !== a.nodeType) + if (1 === a.nodeType) { + if (e && r(a).is(c)) break; + d.push(a); + } + return d; + }, + z = function(a, b) { + for (var c = []; a; a = a.nextSibling) + 1 === a.nodeType && a !== b && c.push(a); + return c; + }, + A = r.expr.match.needsContext; + function B(a, b) { + return a.nodeName && a.nodeName.toLowerCase() === b.toLowerCase(); + } + var C = /^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i, + D = /^.[^:#\[\.,]*$/; + function E(a, b, c) { + return r.isFunction(b) + ? r.grep(a, function(a, d) { + return !!b.call(a, d, a) !== c; + }) + : b.nodeType + ? r.grep(a, function(a) { + return (a === b) !== c; + }) + : "string" != typeof b + ? r.grep(a, function(a) { + return i.call(b, a) > -1 !== c; + }) + : D.test(b) + ? r.filter(b, a, c) + : ((b = r.filter(b, a)), + r.grep(a, function(a) { + return i.call(b, a) > -1 !== c && 1 === a.nodeType; + })); + } + (r.filter = function(a, b, c) { + var d = b[0]; + return ( + c && (a = ":not(" + a + ")"), + 1 === b.length && 1 === d.nodeType + ? r.find.matchesSelector(d, a) + ? [d] + : [] + : r.find.matches( + a, + r.grep(b, function(a) { + return 1 === a.nodeType; + }) + ) + ); + }), + r.fn.extend({ + find: function(a) { + var b, + c, + d = this.length, + e = this; + if ("string" != typeof a) + return this.pushStack( + r(a).filter(function() { + for (b = 0; b < d; b++) if (r.contains(e[b], this)) return !0; + }) + ); + for (c = this.pushStack([]), b = 0; b < d; b++) r.find(a, e[b], c); + return d > 1 ? r.uniqueSort(c) : c; + }, + filter: function(a) { + return this.pushStack(E(this, a || [], !1)); + }, + not: function(a) { + return this.pushStack(E(this, a || [], !0)); + }, + is: function(a) { + return !!E(this, "string" == typeof a && A.test(a) ? r(a) : a || [], !1) + .length; + } + }); + var F, + G = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/, + H = (r.fn.init = function(a, b, c) { + var e, f; + if (!a) return this; + if (((c = c || F), "string" == typeof a)) { + if ( + ((e = + "<" === a[0] && ">" === a[a.length - 1] && a.length >= 3 + ? [null, a, null] + : G.exec(a)), + !e || (!e[1] && b)) + ) + return !b || b.jquery + ? (b || c).find(a) + : this.constructor(b).find(a); + if (e[1]) { + if ( + ((b = b instanceof r ? b[0] : b), + r.merge( + this, + r.parseHTML(e[1], b && b.nodeType ? b.ownerDocument || b : d, !0) + ), + C.test(e[1]) && r.isPlainObject(b)) + ) + for (e in b) + r.isFunction(this[e]) ? this[e](b[e]) : this.attr(e, b[e]); + return this; + } + return ( + (f = d.getElementById(e[2])), + f && ((this[0] = f), (this.length = 1)), + this + ); + } + return a.nodeType + ? ((this[0] = a), (this.length = 1), this) + : r.isFunction(a) + ? void 0 !== c.ready + ? c.ready(a) + : a(r) + : r.makeArray(a, this); + }); + (H.prototype = r.fn), (F = r(d)); + var I = /^(?:parents|prev(?:Until|All))/, + J = { children: !0, contents: !0, next: !0, prev: !0 }; + r.fn.extend({ + has: function(a) { + var b = r(a, this), + c = b.length; + return this.filter(function() { + for (var a = 0; a < c; a++) if (r.contains(this, b[a])) return !0; + }); + }, + closest: function(a, b) { + var c, + d = 0, + e = this.length, + f = [], + g = "string" != typeof a && r(a); + if (!A.test(a)) + for (; d < e; d++) + for (c = this[d]; c && c !== b; c = c.parentNode) + if ( + c.nodeType < 11 && + (g + ? g.index(c) > -1 + : 1 === c.nodeType && r.find.matchesSelector(c, a)) + ) { + f.push(c); + break; + } + return this.pushStack(f.length > 1 ? r.uniqueSort(f) : f); + }, + index: function(a) { + return a + ? "string" == typeof a + ? i.call(r(a), this[0]) + : i.call(this, a.jquery ? a[0] : a) + : this[0] && this[0].parentNode + ? this.first().prevAll().length + : -1; + }, + add: function(a, b) { + return this.pushStack(r.uniqueSort(r.merge(this.get(), r(a, b)))); + }, + addBack: function(a) { + return this.add(null == a ? this.prevObject : this.prevObject.filter(a)); + } + }); + function K(a, b) { + while ((a = a[b]) && 1 !== a.nodeType); + return a; + } + r.each( + { + parent: function(a) { + var b = a.parentNode; + return b && 11 !== b.nodeType ? b : null; + }, + parents: function(a) { + return y(a, "parentNode"); + }, + parentsUntil: function(a, b, c) { + return y(a, "parentNode", c); + }, + next: function(a) { + return K(a, "nextSibling"); + }, + prev: function(a) { + return K(a, "previousSibling"); + }, + nextAll: function(a) { + return y(a, "nextSibling"); + }, + prevAll: function(a) { + return y(a, "previousSibling"); + }, + nextUntil: function(a, b, c) { + return y(a, "nextSibling", c); + }, + prevUntil: function(a, b, c) { + return y(a, "previousSibling", c); + }, + siblings: function(a) { + return z((a.parentNode || {}).firstChild, a); + }, + children: function(a) { + return z(a.firstChild); + }, + contents: function(a) { + return B(a, "iframe") + ? a.contentDocument + : (B(a, "template") && (a = a.content || a), + r.merge([], a.childNodes)); + } + }, + function(a, b) { + r.fn[a] = function(c, d) { + var e = r.map(this, b, c); + return ( + "Until" !== a.slice(-5) && (d = c), + d && "string" == typeof d && (e = r.filter(d, e)), + this.length > 1 && + (J[a] || r.uniqueSort(e), I.test(a) && e.reverse()), + this.pushStack(e) + ); + }; + } + ); + var L = /[^\x20\t\r\n\f]+/g; + function M(a) { + var b = {}; + return ( + r.each(a.match(L) || [], function(a, c) { + b[c] = !0; + }), + b + ); + } + r.Callbacks = function(a) { + a = "string" == typeof a ? M(a) : r.extend({}, a); + var b, + c, + d, + e, + f = [], + g = [], + h = -1, + i = function() { + for (e = e || a.once, d = b = !0; g.length; h = -1) { + c = g.shift(); + while (++h < f.length) + f[h].apply(c[0], c[1]) === !1 && + a.stopOnFalse && + ((h = f.length), (c = !1)); + } + a.memory || (c = !1), (b = !1), e && (f = c ? [] : ""); + }, + j = { + add: function() { + return ( + f && + (c && !b && ((h = f.length - 1), g.push(c)), + (function d(b) { + r.each(b, function(b, c) { + r.isFunction(c) + ? (a.unique && j.has(c)) || f.push(c) + : c && c.length && "string" !== r.type(c) && d(c); + }); + })(arguments), + c && !b && i()), + this + ); + }, + remove: function() { + return ( + r.each(arguments, function(a, b) { + var c; + while ((c = r.inArray(b, f, c)) > -1) + f.splice(c, 1), c <= h && h--; + }), + this + ); + }, + has: function(a) { + return a ? r.inArray(a, f) > -1 : f.length > 0; + }, + empty: function() { + return f && (f = []), this; + }, + disable: function() { + return (e = g = []), (f = c = ""), this; + }, + disabled: function() { + return !f; + }, + lock: function() { + return (e = g = []), c || b || (f = c = ""), this; + }, + locked: function() { + return !!e; + }, + fireWith: function(a, c) { + return ( + e || + ((c = c || []), + (c = [a, c.slice ? c.slice() : c]), + g.push(c), + b || i()), + this + ); + }, + fire: function() { + return j.fireWith(this, arguments), this; + }, + fired: function() { + return !!d; + } + }; + return j; + }; + function N(a) { + return a; + } + function O(a) { + throw a; + } + function P(a, b, c, d) { + var e; + try { + a && r.isFunction((e = a.promise)) + ? e + .call(a) + .done(b) + .fail(c) + : a && r.isFunction((e = a.then)) + ? e.call(a, b, c) + : b.apply(void 0, [a].slice(d)); + } catch (a) { + c.apply(void 0, [a]); + } + } + r.extend({ + Deferred: function(b) { + var c = [ + [ + "notify", + "progress", + r.Callbacks("memory"), + r.Callbacks("memory"), + 2 + ], + [ + "resolve", + "done", + r.Callbacks("once memory"), + r.Callbacks("once memory"), + 0, + "resolved" + ], + [ + "reject", + "fail", + r.Callbacks("once memory"), + r.Callbacks("once memory"), + 1, + "rejected" + ] + ], + d = "pending", + e = { + state: function() { + return d; + }, + always: function() { + return f.done(arguments).fail(arguments), this; + }, + catch: function(a) { + return e.then(null, a); + }, + pipe: function() { + var a = arguments; + return r + .Deferred(function(b) { + r.each(c, function(c, d) { + var e = r.isFunction(a[d[4]]) && a[d[4]]; + f[d[1]](function() { + var a = e && e.apply(this, arguments); + a && r.isFunction(a.promise) + ? a + .promise() + .progress(b.notify) + .done(b.resolve) + .fail(b.reject) + : b[d[0] + "With"](this, e ? [a] : arguments); + }); + }), + (a = null); + }) + .promise(); + }, + then: function(b, d, e) { + var f = 0; + function g(b, c, d, e) { + return function() { + var h = this, + i = arguments, + j = function() { + var a, j; + if (!(b < f)) { + if (((a = d.apply(h, i)), a === c.promise())) + throw new TypeError("Thenable self-resolution"); + (j = + a && + ("object" == typeof a || "function" == typeof a) && + a.then), + r.isFunction(j) + ? e + ? j.call(a, g(f, c, N, e), g(f, c, O, e)) + : (f++, + j.call( + a, + g(f, c, N, e), + g(f, c, O, e), + g(f, c, N, c.notifyWith) + )) + : (d !== N && ((h = void 0), (i = [a])), + (e || c.resolveWith)(h, i)); + } + }, + k = e + ? j + : function() { + try { + j(); + } catch (a) { + r.Deferred.exceptionHook && + r.Deferred.exceptionHook(a, k.stackTrace), + b + 1 >= f && + (d !== O && ((h = void 0), (i = [a])), + c.rejectWith(h, i)); + } + }; + b + ? k() + : (r.Deferred.getStackHook && + (k.stackTrace = r.Deferred.getStackHook()), + a.setTimeout(k)); + }; + } + return r + .Deferred(function(a) { + c[0][3].add(g(0, a, r.isFunction(e) ? e : N, a.notifyWith)), + c[1][3].add(g(0, a, r.isFunction(b) ? b : N)), + c[2][3].add(g(0, a, r.isFunction(d) ? d : O)); + }) + .promise(); + }, + promise: function(a) { + return null != a ? r.extend(a, e) : e; + } + }, + f = {}; + return ( + r.each(c, function(a, b) { + var g = b[2], + h = b[5]; + (e[b[1]] = g.add), + h && + g.add( + function() { + d = h; + }, + c[3 - a][2].disable, + c[0][2].lock + ), + g.add(b[3].fire), + (f[b[0]] = function() { + return ( + f[b[0] + "With"](this === f ? void 0 : this, arguments), this + ); + }), + (f[b[0] + "With"] = g.fireWith); + }), + e.promise(f), + b && b.call(f, f), + f + ); + }, + when: function(a) { + var b = arguments.length, + c = b, + d = Array(c), + e = f.call(arguments), + g = r.Deferred(), + h = function(a) { + return function(c) { + (d[a] = this), + (e[a] = arguments.length > 1 ? f.call(arguments) : c), + --b || g.resolveWith(d, e); + }; + }; + if ( + b <= 1 && + (P(a, g.done(h(c)).resolve, g.reject, !b), + "pending" === g.state() || r.isFunction(e[c] && e[c].then)) + ) + return g.then(); + while (c--) P(e[c], h(c), g.reject); + return g.promise(); + } + }); + var Q = /^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/; + (r.Deferred.exceptionHook = function(b, c) { + a.console && + a.console.warn && + b && + Q.test(b.name) && + a.console.warn("jQuery.Deferred exception: " + b.message, b.stack, c); + }), + (r.readyException = function(b) { + a.setTimeout(function() { + throw b; + }); + }); + var R = r.Deferred(); + (r.fn.ready = function(a) { + return ( + R.then(a)["catch"](function(a) { + r.readyException(a); + }), + this + ); + }), + r.extend({ + isReady: !1, + readyWait: 1, + ready: function(a) { + (a === !0 ? --r.readyWait : r.isReady) || + ((r.isReady = !0), + (a !== !0 && --r.readyWait > 0) || R.resolveWith(d, [r])); + } + }), + (r.ready.then = R.then); + function S() { + d.removeEventListener("DOMContentLoaded", S), + a.removeEventListener("load", S), + r.ready(); + } + "complete" === d.readyState || + ("loading" !== d.readyState && !d.documentElement.doScroll) + ? a.setTimeout(r.ready) + : (d.addEventListener("DOMContentLoaded", S), + a.addEventListener("load", S)); + var T = function(a, b, c, d, e, f, g) { + var h = 0, + i = a.length, + j = null == c; + if ("object" === r.type(c)) { + e = !0; + for (h in c) T(a, b, h, c[h], !0, f, g); + } else if ( + void 0 !== d && + ((e = !0), + r.isFunction(d) || (g = !0), + j && + (g + ? (b.call(a, d), (b = null)) + : ((j = b), + (b = function(a, b, c) { + return j.call(r(a), c); + }))), + b) + ) + for (; h < i; h++) b(a[h], c, g ? d : d.call(a[h], h, b(a[h], c))); + return e ? a : j ? b.call(a) : i ? b(a[0], c) : f; + }, + U = function(a) { + return 1 === a.nodeType || 9 === a.nodeType || !+a.nodeType; + }; + function V() { + this.expando = r.expando + V.uid++; + } + (V.uid = 1), + (V.prototype = { + cache: function(a) { + var b = a[this.expando]; + return ( + b || + ((b = {}), + U(a) && + (a.nodeType + ? (a[this.expando] = b) + : Object.defineProperty(a, this.expando, { + value: b, + configurable: !0 + }))), + b + ); + }, + set: function(a, b, c) { + var d, + e = this.cache(a); + if ("string" == typeof b) e[r.camelCase(b)] = c; + else for (d in b) e[r.camelCase(d)] = b[d]; + return e; + }, + get: function(a, b) { + return void 0 === b + ? this.cache(a) + : a[this.expando] && a[this.expando][r.camelCase(b)]; + }, + access: function(a, b, c) { + return void 0 === b || (b && "string" == typeof b && void 0 === c) + ? this.get(a, b) + : (this.set(a, b, c), void 0 !== c ? c : b); + }, + remove: function(a, b) { + var c, + d = a[this.expando]; + if (void 0 !== d) { + if (void 0 !== b) { + Array.isArray(b) + ? (b = b.map(r.camelCase)) + : ((b = r.camelCase(b)), (b = b in d ? [b] : b.match(L) || [])), + (c = b.length); + while (c--) delete d[b[c]]; + } + (void 0 === b || r.isEmptyObject(d)) && + (a.nodeType ? (a[this.expando] = void 0) : delete a[this.expando]); + } + }, + hasData: function(a) { + var b = a[this.expando]; + return void 0 !== b && !r.isEmptyObject(b); + } + }); + var W = new V(), + X = new V(), + Y = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/, + Z = /[A-Z]/g; + function $(a) { + return ( + "true" === a || + ("false" !== a && + ("null" === a + ? null + : a === +a + "" + ? +a + : Y.test(a) + ? JSON.parse(a) + : a)) + ); + } + function _(a, b, c) { + var d; + if (void 0 === c && 1 === a.nodeType) + if ( + ((d = "data-" + b.replace(Z, "-$&").toLowerCase()), + (c = a.getAttribute(d)), + "string" == typeof c) + ) { + try { + c = $(c); + } catch (e) {} + X.set(a, b, c); + } else c = void 0; + return c; + } + r.extend({ + hasData: function(a) { + return X.hasData(a) || W.hasData(a); + }, + data: function(a, b, c) { + return X.access(a, b, c); + }, + removeData: function(a, b) { + X.remove(a, b); + }, + _data: function(a, b, c) { + return W.access(a, b, c); + }, + _removeData: function(a, b) { + W.remove(a, b); + } + }), + r.fn.extend({ + data: function(a, b) { + var c, + d, + e, + f = this[0], + g = f && f.attributes; + if (void 0 === a) { + if ( + this.length && + ((e = X.get(f)), 1 === f.nodeType && !W.get(f, "hasDataAttrs")) + ) { + c = g.length; + while (c--) + g[c] && + ((d = g[c].name), + 0 === d.indexOf("data-") && + ((d = r.camelCase(d.slice(5))), _(f, d, e[d]))); + W.set(f, "hasDataAttrs", !0); + } + return e; + } + return "object" == typeof a + ? this.each(function() { + X.set(this, a); + }) + : T( + this, + function(b) { + var c; + if (f && void 0 === b) { + if (((c = X.get(f, a)), void 0 !== c)) return c; + if (((c = _(f, a)), void 0 !== c)) return c; + } else + this.each(function() { + X.set(this, a, b); + }); + }, + null, + b, + arguments.length > 1, + null, + !0 + ); + }, + removeData: function(a) { + return this.each(function() { + X.remove(this, a); + }); + } + }), + r.extend({ + queue: function(a, b, c) { + var d; + if (a) + return ( + (b = (b || "fx") + "queue"), + (d = W.get(a, b)), + c && + (!d || Array.isArray(c) + ? (d = W.access(a, b, r.makeArray(c))) + : d.push(c)), + d || [] + ); + }, + dequeue: function(a, b) { + b = b || "fx"; + var c = r.queue(a, b), + d = c.length, + e = c.shift(), + f = r._queueHooks(a, b), + g = function() { + r.dequeue(a, b); + }; + "inprogress" === e && ((e = c.shift()), d--), + e && + ("fx" === b && c.unshift("inprogress"), + delete f.stop, + e.call(a, g, f)), + !d && f && f.empty.fire(); + }, + _queueHooks: function(a, b) { + var c = b + "queueHooks"; + return ( + W.get(a, c) || + W.access(a, c, { + empty: r.Callbacks("once memory").add(function() { + W.remove(a, [b + "queue", c]); + }) + }) + ); + } + }), + r.fn.extend({ + queue: function(a, b) { + var c = 2; + return ( + "string" != typeof a && ((b = a), (a = "fx"), c--), + arguments.length < c + ? r.queue(this[0], a) + : void 0 === b + ? this + : this.each(function() { + var c = r.queue(this, a, b); + r._queueHooks(this, a), + "fx" === a && "inprogress" !== c[0] && r.dequeue(this, a); + }) + ); + }, + dequeue: function(a) { + return this.each(function() { + r.dequeue(this, a); + }); + }, + clearQueue: function(a) { + return this.queue(a || "fx", []); + }, + promise: function(a, b) { + var c, + d = 1, + e = r.Deferred(), + f = this, + g = this.length, + h = function() { + --d || e.resolveWith(f, [f]); + }; + "string" != typeof a && ((b = a), (a = void 0)), (a = a || "fx"); + while (g--) + (c = W.get(f[g], a + "queueHooks")), + c && c.empty && (d++, c.empty.add(h)); + return h(), e.promise(b); + } + }); + var aa = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source, + ba = new RegExp("^(?:([+-])=|)(" + aa + ")([a-z%]*)$", "i"), + ca = ["Top", "Right", "Bottom", "Left"], + da = function(a, b) { + return ( + (a = b || a), + "none" === a.style.display || + ("" === a.style.display && + r.contains(a.ownerDocument, a) && + "none" === r.css(a, "display")) + ); + }, + ea = function(a, b, c, d) { + var e, + f, + g = {}; + for (f in b) (g[f] = a.style[f]), (a.style[f] = b[f]); + e = c.apply(a, d || []); + for (f in b) a.style[f] = g[f]; + return e; + }; + function fa(a, b, c, d) { + var e, + f = 1, + g = 20, + h = d + ? function() { + return d.cur(); + } + : function() { + return r.css(a, b, ""); + }, + i = h(), + j = (c && c[3]) || (r.cssNumber[b] ? "" : "px"), + k = (r.cssNumber[b] || ("px" !== j && +i)) && ba.exec(r.css(a, b)); + if (k && k[3] !== j) { + (j = j || k[3]), (c = c || []), (k = +i || 1); + do (f = f || ".5"), (k /= f), r.style(a, b, k + j); + while (f !== (f = h() / i) && 1 !== f && --g); + } + return ( + c && + ((k = +k || +i || 0), + (e = c[1] ? k + (c[1] + 1) * c[2] : +c[2]), + d && ((d.unit = j), (d.start = k), (d.end = e))), + e + ); + } + var ga = {}; + function ha(a) { + var b, + c = a.ownerDocument, + d = a.nodeName, + e = ga[d]; + return e + ? e + : ((b = c.body.appendChild(c.createElement(d))), + (e = r.css(b, "display")), + b.parentNode.removeChild(b), + "none" === e && (e = "block"), + (ga[d] = e), + e); + } + function ia(a, b) { + for (var c, d, e = [], f = 0, g = a.length; f < g; f++) + (d = a[f]), + d.style && + ((c = d.style.display), + b + ? ("none" === c && + ((e[f] = W.get(d, "display") || null), + e[f] || (d.style.display = "")), + "" === d.style.display && da(d) && (e[f] = ha(d))) + : "none" !== c && ((e[f] = "none"), W.set(d, "display", c))); + for (f = 0; f < g; f++) null != e[f] && (a[f].style.display = e[f]); + return a; + } + r.fn.extend({ + show: function() { + return ia(this, !0); + }, + hide: function() { + return ia(this); + }, + toggle: function(a) { + return "boolean" == typeof a + ? a + ? this.show() + : this.hide() + : this.each(function() { + da(this) ? r(this).show() : r(this).hide(); + }); + } + }); + var ja = /^(?:checkbox|radio)$/i, + ka = /<([a-z][^\/\0>\x20\t\r\n\f]+)/i, + la = /^$|\/(?:java|ecma)script/i, + ma = { + option: [1, ""], + thead: [1, "", "
"], + col: [2, "", "
"], + tr: [2, "", "
"], + td: [3, "", "
"], + _default: [0, "", ""] + }; + (ma.optgroup = ma.option), + (ma.tbody = ma.tfoot = ma.colgroup = ma.caption = ma.thead), + (ma.th = ma.td); + function na(a, b) { + var c; + return ( + (c = + "undefined" != typeof a.getElementsByTagName + ? a.getElementsByTagName(b || "*") + : "undefined" != typeof a.querySelectorAll + ? a.querySelectorAll(b || "*") + : []), + void 0 === b || (b && B(a, b)) ? r.merge([a], c) : c + ); + } + function oa(a, b) { + for (var c = 0, d = a.length; c < d; c++) + W.set(a[c], "globalEval", !b || W.get(b[c], "globalEval")); + } + var pa = /<|&#?\w+;/; + function qa(a, b, c, d, e) { + for ( + var f, + g, + h, + i, + j, + k, + l = b.createDocumentFragment(), + m = [], + n = 0, + o = a.length; + n < o; + n++ + ) + if (((f = a[n]), f || 0 === f)) + if ("object" === r.type(f)) r.merge(m, f.nodeType ? [f] : f); + else if (pa.test(f)) { + (g = g || l.appendChild(b.createElement("div"))), + (h = (ka.exec(f) || ["", ""])[1].toLowerCase()), + (i = ma[h] || ma._default), + (g.innerHTML = i[1] + r.htmlPrefilter(f) + i[2]), + (k = i[0]); + while (k--) g = g.lastChild; + r.merge(m, g.childNodes), (g = l.firstChild), (g.textContent = ""); + } else m.push(b.createTextNode(f)); + (l.textContent = ""), (n = 0); + while ((f = m[n++])) + if (d && r.inArray(f, d) > -1) e && e.push(f); + else if ( + ((j = r.contains(f.ownerDocument, f)), + (g = na(l.appendChild(f), "script")), + j && oa(g), + c) + ) { + k = 0; + while ((f = g[k++])) la.test(f.type || "") && c.push(f); + } + return l; + } + !(function() { + var a = d.createDocumentFragment(), + b = a.appendChild(d.createElement("div")), + c = d.createElement("input"); + c.setAttribute("type", "radio"), + c.setAttribute("checked", "checked"), + c.setAttribute("name", "t"), + b.appendChild(c), + (o.checkClone = b.cloneNode(!0).cloneNode(!0).lastChild.checked), + (b.innerHTML = ""), + (o.noCloneChecked = !!b.cloneNode(!0).lastChild.defaultValue); + })(); + var ra = d.documentElement, + sa = /^key/, + ta = /^(?:mouse|pointer|contextmenu|drag|drop)|click/, + ua = /^([^.]*)(?:\.(.+)|)/; + function va() { + return !0; + } + function wa() { + return !1; + } + function xa() { + try { + return d.activeElement; + } catch (a) {} + } + function ya(a, b, c, d, e, f) { + var g, h; + if ("object" == typeof b) { + "string" != typeof c && ((d = d || c), (c = void 0)); + for (h in b) ya(a, h, c, d, b[h], f); + return a; + } + if ( + (null == d && null == e + ? ((e = c), (d = c = void 0)) + : null == e && + ("string" == typeof c + ? ((e = d), (d = void 0)) + : ((e = d), (d = c), (c = void 0))), + e === !1) + ) + e = wa; + else if (!e) return a; + return ( + 1 === f && + ((g = e), + (e = function(a) { + return r().off(a), g.apply(this, arguments); + }), + (e.guid = g.guid || (g.guid = r.guid++))), + a.each(function() { + r.event.add(this, b, e, d, c); + }) + ); + } + (r.event = { + global: {}, + add: function(a, b, c, d, e) { + var f, + g, + h, + i, + j, + k, + l, + m, + n, + o, + p, + q = W.get(a); + if (q) { + c.handler && ((f = c), (c = f.handler), (e = f.selector)), + e && r.find.matchesSelector(ra, e), + c.guid || (c.guid = r.guid++), + (i = q.events) || (i = q.events = {}), + (g = q.handle) || + (g = q.handle = function(b) { + return "undefined" != typeof r && r.event.triggered !== b.type + ? r.event.dispatch.apply(a, arguments) + : void 0; + }), + (b = (b || "").match(L) || [""]), + (j = b.length); + while (j--) + (h = ua.exec(b[j]) || []), + (n = p = h[1]), + (o = (h[2] || "").split(".").sort()), + n && + ((l = r.event.special[n] || {}), + (n = (e ? l.delegateType : l.bindType) || n), + (l = r.event.special[n] || {}), + (k = r.extend( + { + type: n, + origType: p, + data: d, + handler: c, + guid: c.guid, + selector: e, + needsContext: e && r.expr.match.needsContext.test(e), + namespace: o.join(".") + }, + f + )), + (m = i[n]) || + ((m = i[n] = []), + (m.delegateCount = 0), + (l.setup && l.setup.call(a, d, o, g) !== !1) || + (a.addEventListener && a.addEventListener(n, g))), + l.add && + (l.add.call(a, k), k.handler.guid || (k.handler.guid = c.guid)), + e ? m.splice(m.delegateCount++, 0, k) : m.push(k), + (r.event.global[n] = !0)); + } + }, + remove: function(a, b, c, d, e) { + var f, + g, + h, + i, + j, + k, + l, + m, + n, + o, + p, + q = W.hasData(a) && W.get(a); + if (q && (i = q.events)) { + (b = (b || "").match(L) || [""]), (j = b.length); + while (j--) + if ( + ((h = ua.exec(b[j]) || []), + (n = p = h[1]), + (o = (h[2] || "").split(".").sort()), + n) + ) { + (l = r.event.special[n] || {}), + (n = (d ? l.delegateType : l.bindType) || n), + (m = i[n] || []), + (h = + h[2] && + new RegExp("(^|\\.)" + o.join("\\.(?:.*\\.|)") + "(\\.|$)")), + (g = f = m.length); + while (f--) + (k = m[f]), + (!e && p !== k.origType) || + (c && c.guid !== k.guid) || + (h && !h.test(k.namespace)) || + (d && d !== k.selector && ("**" !== d || !k.selector)) || + (m.splice(f, 1), + k.selector && m.delegateCount--, + l.remove && l.remove.call(a, k)); + g && + !m.length && + ((l.teardown && l.teardown.call(a, o, q.handle) !== !1) || + r.removeEvent(a, n, q.handle), + delete i[n]); + } else for (n in i) r.event.remove(a, n + b[j], c, d, !0); + r.isEmptyObject(i) && W.remove(a, "handle events"); + } + }, + dispatch: function(a) { + var b = r.event.fix(a), + c, + d, + e, + f, + g, + h, + i = new Array(arguments.length), + j = (W.get(this, "events") || {})[b.type] || [], + k = r.event.special[b.type] || {}; + for (i[0] = b, c = 1; c < arguments.length; c++) i[c] = arguments[c]; + if ( + ((b.delegateTarget = this), + !k.preDispatch || k.preDispatch.call(this, b) !== !1) + ) { + (h = r.event.handlers.call(this, b, j)), (c = 0); + while ((f = h[c++]) && !b.isPropagationStopped()) { + (b.currentTarget = f.elem), (d = 0); + while ((g = f.handlers[d++]) && !b.isImmediatePropagationStopped()) + (b.rnamespace && !b.rnamespace.test(g.namespace)) || + ((b.handleObj = g), + (b.data = g.data), + (e = ( + (r.event.special[g.origType] || {}).handle || g.handler + ).apply(f.elem, i)), + void 0 !== e && + (b.result = e) === !1 && + (b.preventDefault(), b.stopPropagation())); + } + return k.postDispatch && k.postDispatch.call(this, b), b.result; + } + }, + handlers: function(a, b) { + var c, + d, + e, + f, + g, + h = [], + i = b.delegateCount, + j = a.target; + if (i && j.nodeType && !("click" === a.type && a.button >= 1)) + for (; j !== this; j = j.parentNode || this) + if (1 === j.nodeType && ("click" !== a.type || j.disabled !== !0)) { + for (f = [], g = {}, c = 0; c < i; c++) + (d = b[c]), + (e = d.selector + " "), + void 0 === g[e] && + (g[e] = d.needsContext + ? r(e, this).index(j) > -1 + : r.find(e, this, null, [j]).length), + g[e] && f.push(d); + f.length && h.push({ elem: j, handlers: f }); + } + return ( + (j = this), i < b.length && h.push({ elem: j, handlers: b.slice(i) }), h + ); + }, + addProp: function(a, b) { + Object.defineProperty(r.Event.prototype, a, { + enumerable: !0, + configurable: !0, + get: r.isFunction(b) + ? function() { + if (this.originalEvent) return b(this.originalEvent); + } + : function() { + if (this.originalEvent) return this.originalEvent[a]; + }, + set: function(b) { + Object.defineProperty(this, a, { + enumerable: !0, + configurable: !0, + writable: !0, + value: b + }); + } + }); + }, + fix: function(a) { + return a[r.expando] ? a : new r.Event(a); + }, + special: { + load: { noBubble: !0 }, + focus: { + trigger: function() { + if (this !== xa() && this.focus) return this.focus(), !1; + }, + delegateType: "focusin" + }, + blur: { + trigger: function() { + if (this === xa() && this.blur) return this.blur(), !1; + }, + delegateType: "focusout" + }, + click: { + trigger: function() { + if ("checkbox" === this.type && this.click && B(this, "input")) + return this.click(), !1; + }, + _default: function(a) { + return B(a.target, "a"); + } + }, + beforeunload: { + postDispatch: function(a) { + void 0 !== a.result && + a.originalEvent && + (a.originalEvent.returnValue = a.result); + } + } + } + }), + (r.removeEvent = function(a, b, c) { + a.removeEventListener && a.removeEventListener(b, c); + }), + (r.Event = function(a, b) { + return this instanceof r.Event + ? (a && a.type + ? ((this.originalEvent = a), + (this.type = a.type), + (this.isDefaultPrevented = + a.defaultPrevented || + (void 0 === a.defaultPrevented && a.returnValue === !1) + ? va + : wa), + (this.target = + a.target && 3 === a.target.nodeType + ? a.target.parentNode + : a.target), + (this.currentTarget = a.currentTarget), + (this.relatedTarget = a.relatedTarget)) + : (this.type = a), + b && r.extend(this, b), + (this.timeStamp = (a && a.timeStamp) || r.now()), + void (this[r.expando] = !0)) + : new r.Event(a, b); + }), + (r.Event.prototype = { + constructor: r.Event, + isDefaultPrevented: wa, + isPropagationStopped: wa, + isImmediatePropagationStopped: wa, + isSimulated: !1, + preventDefault: function() { + var a = this.originalEvent; + (this.isDefaultPrevented = va), + a && !this.isSimulated && a.preventDefault(); + }, + stopPropagation: function() { + var a = this.originalEvent; + (this.isPropagationStopped = va), + a && !this.isSimulated && a.stopPropagation(); + }, + stopImmediatePropagation: function() { + var a = this.originalEvent; + (this.isImmediatePropagationStopped = va), + a && !this.isSimulated && a.stopImmediatePropagation(), + this.stopPropagation(); + } + }), + r.each( + { + altKey: !0, + bubbles: !0, + cancelable: !0, + changedTouches: !0, + ctrlKey: !0, + detail: !0, + eventPhase: !0, + metaKey: !0, + pageX: !0, + pageY: !0, + shiftKey: !0, + view: !0, + char: !0, + charCode: !0, + key: !0, + keyCode: !0, + button: !0, + buttons: !0, + clientX: !0, + clientY: !0, + offsetX: !0, + offsetY: !0, + pointerId: !0, + pointerType: !0, + screenX: !0, + screenY: !0, + targetTouches: !0, + toElement: !0, + touches: !0, + which: function(a) { + var b = a.button; + return null == a.which && sa.test(a.type) + ? null != a.charCode + ? a.charCode + : a.keyCode + : !a.which && void 0 !== b && ta.test(a.type) + ? 1 & b + ? 1 + : 2 & b + ? 3 + : 4 & b + ? 2 + : 0 + : a.which; + } + }, + r.event.addProp + ), + r.each( + { + mouseenter: "mouseover", + mouseleave: "mouseout", + pointerenter: "pointerover", + pointerleave: "pointerout" + }, + function(a, b) { + r.event.special[a] = { + delegateType: b, + bindType: b, + handle: function(a) { + var c, + d = this, + e = a.relatedTarget, + f = a.handleObj; + return ( + (e && (e === d || r.contains(d, e))) || + ((a.type = f.origType), + (c = f.handler.apply(this, arguments)), + (a.type = b)), + c + ); + } + }; + } + ), + r.fn.extend({ + on: function(a, b, c, d) { + return ya(this, a, b, c, d); + }, + one: function(a, b, c, d) { + return ya(this, a, b, c, d, 1); + }, + off: function(a, b, c) { + var d, e; + if (a && a.preventDefault && a.handleObj) + return ( + (d = a.handleObj), + r(a.delegateTarget).off( + d.namespace ? d.origType + "." + d.namespace : d.origType, + d.selector, + d.handler + ), + this + ); + if ("object" == typeof a) { + for (e in a) this.off(e, b, a[e]); + return this; + } + return ( + (b !== !1 && "function" != typeof b) || ((c = b), (b = void 0)), + c === !1 && (c = wa), + this.each(function() { + r.event.remove(this, a, c, b); + }) + ); + } + }); + var za = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi, + Aa = /\s*$/g; + function Ea(a, b) { + return B(a, "table") && B(11 !== b.nodeType ? b : b.firstChild, "tr") + ? r(">tbody", a)[0] || a + : a; + } + function Fa(a) { + return (a.type = (null !== a.getAttribute("type")) + "/" + a.type), a; + } + function Ga(a) { + var b = Ca.exec(a.type); + return b ? (a.type = b[1]) : a.removeAttribute("type"), a; + } + function Ha(a, b) { + var c, d, e, f, g, h, i, j; + if (1 === b.nodeType) { + if ( + W.hasData(a) && + ((f = W.access(a)), (g = W.set(b, f)), (j = f.events)) + ) { + delete g.handle, (g.events = {}); + for (e in j) + for (c = 0, d = j[e].length; c < d; c++) r.event.add(b, e, j[e][c]); + } + X.hasData(a) && ((h = X.access(a)), (i = r.extend({}, h)), X.set(b, i)); + } + } + function Ia(a, b) { + var c = b.nodeName.toLowerCase(); + "input" === c && ja.test(a.type) + ? (b.checked = a.checked) + : ("input" !== c && "textarea" !== c) || + (b.defaultValue = a.defaultValue); + } + function Ja(a, b, c, d) { + b = g.apply([], b); + var e, + f, + h, + i, + j, + k, + l = 0, + m = a.length, + n = m - 1, + q = b[0], + s = r.isFunction(q); + if (s || (m > 1 && "string" == typeof q && !o.checkClone && Ba.test(q))) + return a.each(function(e) { + var f = a.eq(e); + s && (b[0] = q.call(this, e, f.html())), Ja(f, b, c, d); + }); + if ( + m && + ((e = qa(b, a[0].ownerDocument, !1, a, d)), + (f = e.firstChild), + 1 === e.childNodes.length && (e = f), + f || d) + ) { + for (h = r.map(na(e, "script"), Fa), i = h.length; l < m; l++) + (j = e), + l !== n && + ((j = r.clone(j, !0, !0)), i && r.merge(h, na(j, "script"))), + c.call(a[l], j, l); + if (i) + for (k = h[h.length - 1].ownerDocument, r.map(h, Ga), l = 0; l < i; l++) + (j = h[l]), + la.test(j.type || "") && + !W.access(j, "globalEval") && + r.contains(k, j) && + (j.src + ? r._evalUrl && r._evalUrl(j.src) + : p(j.textContent.replace(Da, ""), k)); + } + return a; + } + function Ka(a, b, c) { + for (var d, e = b ? r.filter(b, a) : a, f = 0; null != (d = e[f]); f++) + c || 1 !== d.nodeType || r.cleanData(na(d)), + d.parentNode && + (c && r.contains(d.ownerDocument, d) && oa(na(d, "script")), + d.parentNode.removeChild(d)); + return a; + } + r.extend({ + htmlPrefilter: function(a) { + return a.replace(za, "<$1>"); + }, + clone: function(a, b, c) { + var d, + e, + f, + g, + h = a.cloneNode(!0), + i = r.contains(a.ownerDocument, a); + if ( + !( + o.noCloneChecked || + (1 !== a.nodeType && 11 !== a.nodeType) || + r.isXMLDoc(a) + ) + ) + for (g = na(h), f = na(a), d = 0, e = f.length; d < e; d++) + Ia(f[d], g[d]); + if (b) + if (c) + for (f = f || na(a), g = g || na(h), d = 0, e = f.length; d < e; d++) + Ha(f[d], g[d]); + else Ha(a, h); + return ( + (g = na(h, "script")), g.length > 0 && oa(g, !i && na(a, "script")), h + ); + }, + cleanData: function(a) { + for (var b, c, d, e = r.event.special, f = 0; void 0 !== (c = a[f]); f++) + if (U(c)) { + if ((b = c[W.expando])) { + if (b.events) + for (d in b.events) + e[d] ? r.event.remove(c, d) : r.removeEvent(c, d, b.handle); + c[W.expando] = void 0; + } + c[X.expando] && (c[X.expando] = void 0); + } + } + }), + r.fn.extend({ + detach: function(a) { + return Ka(this, a, !0); + }, + remove: function(a) { + return Ka(this, a); + }, + text: function(a) { + return T( + this, + function(a) { + return void 0 === a + ? r.text(this) + : this.empty().each(function() { + (1 !== this.nodeType && + 11 !== this.nodeType && + 9 !== this.nodeType) || + (this.textContent = a); + }); + }, + null, + a, + arguments.length + ); + }, + append: function() { + return Ja(this, arguments, function(a) { + if ( + 1 === this.nodeType || + 11 === this.nodeType || + 9 === this.nodeType + ) { + var b = Ea(this, a); + b.appendChild(a); + } + }); + }, + prepend: function() { + return Ja(this, arguments, function(a) { + if ( + 1 === this.nodeType || + 11 === this.nodeType || + 9 === this.nodeType + ) { + var b = Ea(this, a); + b.insertBefore(a, b.firstChild); + } + }); + }, + before: function() { + return Ja(this, arguments, function(a) { + this.parentNode && this.parentNode.insertBefore(a, this); + }); + }, + after: function() { + return Ja(this, arguments, function(a) { + this.parentNode && this.parentNode.insertBefore(a, this.nextSibling); + }); + }, + empty: function() { + for (var a, b = 0; null != (a = this[b]); b++) + 1 === a.nodeType && (r.cleanData(na(a, !1)), (a.textContent = "")); + return this; + }, + clone: function(a, b) { + return ( + (a = null != a && a), + (b = null == b ? a : b), + this.map(function() { + return r.clone(this, a, b); + }) + ); + }, + html: function(a) { + return T( + this, + function(a) { + var b = this[0] || {}, + c = 0, + d = this.length; + if (void 0 === a && 1 === b.nodeType) return b.innerHTML; + if ( + "string" == typeof a && + !Aa.test(a) && + !ma[(ka.exec(a) || ["", ""])[1].toLowerCase()] + ) { + a = r.htmlPrefilter(a); + try { + for (; c < d; c++) + (b = this[c] || {}), + 1 === b.nodeType && + (r.cleanData(na(b, !1)), (b.innerHTML = a)); + b = 0; + } catch (e) {} + } + b && this.empty().append(a); + }, + null, + a, + arguments.length + ); + }, + replaceWith: function() { + var a = []; + return Ja( + this, + arguments, + function(b) { + var c = this.parentNode; + r.inArray(this, a) < 0 && + (r.cleanData(na(this)), c && c.replaceChild(b, this)); + }, + a + ); + } + }), + r.each( + { + appendTo: "append", + prependTo: "prepend", + insertBefore: "before", + insertAfter: "after", + replaceAll: "replaceWith" + }, + function(a, b) { + r.fn[a] = function(a) { + for (var c, d = [], e = r(a), f = e.length - 1, g = 0; g <= f; g++) + (c = g === f ? this : this.clone(!0)), + r(e[g])[b](c), + h.apply(d, c.get()); + return this.pushStack(d); + }; + } + ); + var La = /^margin/, + Ma = new RegExp("^(" + aa + ")(?!px)[a-z%]+$", "i"), + Na = function(b) { + var c = b.ownerDocument.defaultView; + return (c && c.opener) || (c = a), c.getComputedStyle(b); + }; + !(function() { + function b() { + if (i) { + (i.style.cssText = + "box-sizing:border-box;position:relative;display:block;margin:auto;border:1px;padding:1px;top:1%;width:50%"), + (i.innerHTML = ""), + ra.appendChild(h); + var b = a.getComputedStyle(i); + (c = "1%" !== b.top), + (g = "2px" === b.marginLeft), + (e = "4px" === b.width), + (i.style.marginRight = "50%"), + (f = "4px" === b.marginRight), + ra.removeChild(h), + (i = null); + } + } + var c, + e, + f, + g, + h = d.createElement("div"), + i = d.createElement("div"); + i.style && + ((i.style.backgroundClip = "content-box"), + (i.cloneNode(!0).style.backgroundClip = ""), + (o.clearCloneStyle = "content-box" === i.style.backgroundClip), + (h.style.cssText = + "border:0;width:8px;height:0;top:0;left:-9999px;padding:0;margin-top:1px;position:absolute"), + h.appendChild(i), + r.extend(o, { + pixelPosition: function() { + return b(), c; + }, + boxSizingReliable: function() { + return b(), e; + }, + pixelMarginRight: function() { + return b(), f; + }, + reliableMarginLeft: function() { + return b(), g; + } + })); + })(); + function Oa(a, b, c) { + var d, + e, + f, + g, + h = a.style; + return ( + (c = c || Na(a)), + c && + ((g = c.getPropertyValue(b) || c[b]), + "" !== g || r.contains(a.ownerDocument, a) || (g = r.style(a, b)), + !o.pixelMarginRight() && + Ma.test(g) && + La.test(b) && + ((d = h.width), + (e = h.minWidth), + (f = h.maxWidth), + (h.minWidth = h.maxWidth = h.width = g), + (g = c.width), + (h.width = d), + (h.minWidth = e), + (h.maxWidth = f))), + void 0 !== g ? g + "" : g + ); + } + function Pa(a, b) { + return { + get: function() { + return a() + ? void delete this.get + : (this.get = b).apply(this, arguments); + } + }; + } + var Qa = /^(none|table(?!-c[ea]).+)/, + Ra = /^--/, + Sa = { position: "absolute", visibility: "hidden", display: "block" }, + Ta = { letterSpacing: "0", fontWeight: "400" }, + Ua = ["Webkit", "Moz", "ms"], + Va = d.createElement("div").style; + function Wa(a) { + if (a in Va) return a; + var b = a[0].toUpperCase() + a.slice(1), + c = Ua.length; + while (c--) if (((a = Ua[c] + b), a in Va)) return a; + } + function Xa(a) { + var b = r.cssProps[a]; + return b || (b = r.cssProps[a] = Wa(a) || a), b; + } + function Ya(a, b, c) { + var d = ba.exec(b); + return d ? Math.max(0, d[2] - (c || 0)) + (d[3] || "px") : b; + } + function Za(a, b, c, d, e) { + var f, + g = 0; + for ( + f = c === (d ? "border" : "content") ? 4 : "width" === b ? 1 : 0; + f < 4; + f += 2 + ) + "margin" === c && (g += r.css(a, c + ca[f], !0, e)), + d + ? ("content" === c && (g -= r.css(a, "padding" + ca[f], !0, e)), + "margin" !== c && + (g -= r.css(a, "border" + ca[f] + "Width", !0, e))) + : ((g += r.css(a, "padding" + ca[f], !0, e)), + "padding" !== c && + (g += r.css(a, "border" + ca[f] + "Width", !0, e))); + return g; + } + function $a(a, b, c) { + var d, + e = Na(a), + f = Oa(a, b, e), + g = "border-box" === r.css(a, "boxSizing", !1, e); + return Ma.test(f) + ? f + : ((d = g && (o.boxSizingReliable() || f === a.style[b])), + "auto" === f && (f = a["offset" + b[0].toUpperCase() + b.slice(1)]), + (f = parseFloat(f) || 0), + f + Za(a, b, c || (g ? "border" : "content"), d, e) + "px"); + } + r.extend({ + cssHooks: { + opacity: { + get: function(a, b) { + if (b) { + var c = Oa(a, "opacity"); + return "" === c ? "1" : c; + } + } + } + }, + cssNumber: { + animationIterationCount: !0, + columnCount: !0, + fillOpacity: !0, + flexGrow: !0, + flexShrink: !0, + fontWeight: !0, + lineHeight: !0, + opacity: !0, + order: !0, + orphans: !0, + widows: !0, + zIndex: !0, + zoom: !0 + }, + cssProps: { float: "cssFloat" }, + style: function(a, b, c, d) { + if (a && 3 !== a.nodeType && 8 !== a.nodeType && a.style) { + var e, + f, + g, + h = r.camelCase(b), + i = Ra.test(b), + j = a.style; + return ( + i || (b = Xa(h)), + (g = r.cssHooks[b] || r.cssHooks[h]), + void 0 === c + ? g && "get" in g && void 0 !== (e = g.get(a, !1, d)) + ? e + : j[b] + : ((f = typeof c), + "string" === f && + (e = ba.exec(c)) && + e[1] && + ((c = fa(a, b, e)), (f = "number")), + null != c && + c === c && + ("number" === f && + (c += (e && e[3]) || (r.cssNumber[h] ? "" : "px")), + o.clearCloneStyle || + "" !== c || + 0 !== b.indexOf("background") || + (j[b] = "inherit"), + (g && "set" in g && void 0 === (c = g.set(a, c, d))) || + (i ? j.setProperty(b, c) : (j[b] = c))), + void 0) + ); + } + }, + css: function(a, b, c, d) { + var e, + f, + g, + h = r.camelCase(b), + i = Ra.test(b); + return ( + i || (b = Xa(h)), + (g = r.cssHooks[b] || r.cssHooks[h]), + g && "get" in g && (e = g.get(a, !0, c)), + void 0 === e && (e = Oa(a, b, d)), + "normal" === e && b in Ta && (e = Ta[b]), + "" === c || c + ? ((f = parseFloat(e)), c === !0 || isFinite(f) ? f || 0 : e) + : e + ); + } + }), + r.each(["height", "width"], function(a, b) { + r.cssHooks[b] = { + get: function(a, c, d) { + if (c) + return !Qa.test(r.css(a, "display")) || + (a.getClientRects().length && a.getBoundingClientRect().width) + ? $a(a, b, d) + : ea(a, Sa, function() { + return $a(a, b, d); + }); + }, + set: function(a, c, d) { + var e, + f = d && Na(a), + g = + d && + Za(a, b, d, "border-box" === r.css(a, "boxSizing", !1, f), f); + return ( + g && + (e = ba.exec(c)) && + "px" !== (e[3] || "px") && + ((a.style[b] = c), (c = r.css(a, b))), + Ya(a, c, g) + ); + } + }; + }), + (r.cssHooks.marginLeft = Pa(o.reliableMarginLeft, function(a, b) { + if (b) + return ( + (parseFloat(Oa(a, "marginLeft")) || + a.getBoundingClientRect().left - + ea(a, { marginLeft: 0 }, function() { + return a.getBoundingClientRect().left; + })) + "px" + ); + })), + r.each({ margin: "", padding: "", border: "Width" }, function(a, b) { + (r.cssHooks[a + b] = { + expand: function(c) { + for ( + var d = 0, e = {}, f = "string" == typeof c ? c.split(" ") : [c]; + d < 4; + d++ + ) + e[a + ca[d] + b] = f[d] || f[d - 2] || f[0]; + return e; + } + }), + La.test(a) || (r.cssHooks[a + b].set = Ya); + }), + r.fn.extend({ + css: function(a, b) { + return T( + this, + function(a, b, c) { + var d, + e, + f = {}, + g = 0; + if (Array.isArray(b)) { + for (d = Na(a), e = b.length; g < e; g++) + f[b[g]] = r.css(a, b[g], !1, d); + return f; + } + return void 0 !== c ? r.style(a, b, c) : r.css(a, b); + }, + a, + b, + arguments.length > 1 + ); + } + }); + function _a(a, b, c, d, e) { + return new _a.prototype.init(a, b, c, d, e); + } + (r.Tween = _a), + (_a.prototype = { + constructor: _a, + init: function(a, b, c, d, e, f) { + (this.elem = a), + (this.prop = c), + (this.easing = e || r.easing._default), + (this.options = b), + (this.start = this.now = this.cur()), + (this.end = d), + (this.unit = f || (r.cssNumber[c] ? "" : "px")); + }, + cur: function() { + var a = _a.propHooks[this.prop]; + return a && a.get ? a.get(this) : _a.propHooks._default.get(this); + }, + run: function(a) { + var b, + c = _a.propHooks[this.prop]; + return ( + this.options.duration + ? (this.pos = b = r.easing[this.easing]( + a, + this.options.duration * a, + 0, + 1, + this.options.duration + )) + : (this.pos = b = a), + (this.now = (this.end - this.start) * b + this.start), + this.options.step && + this.options.step.call(this.elem, this.now, this), + c && c.set ? c.set(this) : _a.propHooks._default.set(this), + this + ); + } + }), + (_a.prototype.init.prototype = _a.prototype), + (_a.propHooks = { + _default: { + get: function(a) { + var b; + return 1 !== a.elem.nodeType || + (null != a.elem[a.prop] && null == a.elem.style[a.prop]) + ? a.elem[a.prop] + : ((b = r.css(a.elem, a.prop, "")), b && "auto" !== b ? b : 0); + }, + set: function(a) { + r.fx.step[a.prop] + ? r.fx.step[a.prop](a) + : 1 !== a.elem.nodeType || + (null == a.elem.style[r.cssProps[a.prop]] && !r.cssHooks[a.prop]) + ? (a.elem[a.prop] = a.now) + : r.style(a.elem, a.prop, a.now + a.unit); + } + } + }), + (_a.propHooks.scrollTop = _a.propHooks.scrollLeft = { + set: function(a) { + a.elem.nodeType && a.elem.parentNode && (a.elem[a.prop] = a.now); + } + }), + (r.easing = { + linear: function(a) { + return a; + }, + swing: function(a) { + return 0.5 - Math.cos(a * Math.PI) / 2; + }, + _default: "swing" + }), + (r.fx = _a.prototype.init), + (r.fx.step = {}); + var ab, + bb, + cb = /^(?:toggle|show|hide)$/, + db = /queueHooks$/; + function eb() { + bb && + (d.hidden === !1 && a.requestAnimationFrame + ? a.requestAnimationFrame(eb) + : a.setTimeout(eb, r.fx.interval), + r.fx.tick()); + } + function fb() { + return ( + a.setTimeout(function() { + ab = void 0; + }), + (ab = r.now()) + ); + } + function gb(a, b) { + var c, + d = 0, + e = { height: a }; + for (b = b ? 1 : 0; d < 4; d += 2 - b) + (c = ca[d]), (e["margin" + c] = e["padding" + c] = a); + return b && (e.opacity = e.width = a), e; + } + function hb(a, b, c) { + for ( + var d, + e = (kb.tweeners[b] || []).concat(kb.tweeners["*"]), + f = 0, + g = e.length; + f < g; + f++ + ) + if ((d = e[f].call(c, b, a))) return d; + } + function ib(a, b, c) { + var d, + e, + f, + g, + h, + i, + j, + k, + l = "width" in b || "height" in b, + m = this, + n = {}, + o = a.style, + p = a.nodeType && da(a), + q = W.get(a, "fxshow"); + c.queue || + ((g = r._queueHooks(a, "fx")), + null == g.unqueued && + ((g.unqueued = 0), + (h = g.empty.fire), + (g.empty.fire = function() { + g.unqueued || h(); + })), + g.unqueued++, + m.always(function() { + m.always(function() { + g.unqueued--, r.queue(a, "fx").length || g.empty.fire(); + }); + })); + for (d in b) + if (((e = b[d]), cb.test(e))) { + if ( + (delete b[d], (f = f || "toggle" === e), e === (p ? "hide" : "show")) + ) { + if ("show" !== e || !q || void 0 === q[d]) continue; + p = !0; + } + n[d] = (q && q[d]) || r.style(a, d); + } + if (((i = !r.isEmptyObject(b)), i || !r.isEmptyObject(n))) { + l && + 1 === a.nodeType && + ((c.overflow = [o.overflow, o.overflowX, o.overflowY]), + (j = q && q.display), + null == j && (j = W.get(a, "display")), + (k = r.css(a, "display")), + "none" === k && + (j + ? (k = j) + : (ia([a], !0), + (j = a.style.display || j), + (k = r.css(a, "display")), + ia([a]))), + ("inline" === k || ("inline-block" === k && null != j)) && + "none" === r.css(a, "float") && + (i || + (m.done(function() { + o.display = j; + }), + null == j && ((k = o.display), (j = "none" === k ? "" : k))), + (o.display = "inline-block"))), + c.overflow && + ((o.overflow = "hidden"), + m.always(function() { + (o.overflow = c.overflow[0]), + (o.overflowX = c.overflow[1]), + (o.overflowY = c.overflow[2]); + })), + (i = !1); + for (d in n) + i || + (q + ? "hidden" in q && (p = q.hidden) + : (q = W.access(a, "fxshow", { display: j })), + f && (q.hidden = !p), + p && ia([a], !0), + m.done(function() { + p || ia([a]), W.remove(a, "fxshow"); + for (d in n) r.style(a, d, n[d]); + })), + (i = hb(p ? q[d] : 0, d, m)), + d in q || ((q[d] = i.start), p && ((i.end = i.start), (i.start = 0))); + } + } + function jb(a, b) { + var c, d, e, f, g; + for (c in a) + if ( + ((d = r.camelCase(c)), + (e = b[d]), + (f = a[c]), + Array.isArray(f) && ((e = f[1]), (f = a[c] = f[0])), + c !== d && ((a[d] = f), delete a[c]), + (g = r.cssHooks[d]), + g && "expand" in g) + ) { + (f = g.expand(f)), delete a[d]; + for (c in f) c in a || ((a[c] = f[c]), (b[c] = e)); + } else b[d] = e; + } + function kb(a, b, c) { + var d, + e, + f = 0, + g = kb.prefilters.length, + h = r.Deferred().always(function() { + delete i.elem; + }), + i = function() { + if (e) return !1; + for ( + var b = ab || fb(), + c = Math.max(0, j.startTime + j.duration - b), + d = c / j.duration || 0, + f = 1 - d, + g = 0, + i = j.tweens.length; + g < i; + g++ + ) + j.tweens[g].run(f); + return ( + h.notifyWith(a, [j, f, c]), + f < 1 && i + ? c + : (i || h.notifyWith(a, [j, 1, 0]), h.resolveWith(a, [j]), !1) + ); + }, + j = h.promise({ + elem: a, + props: r.extend({}, b), + opts: r.extend(!0, { specialEasing: {}, easing: r.easing._default }, c), + originalProperties: b, + originalOptions: c, + startTime: ab || fb(), + duration: c.duration, + tweens: [], + createTween: function(b, c) { + var d = r.Tween( + a, + j.opts, + b, + c, + j.opts.specialEasing[b] || j.opts.easing + ); + return j.tweens.push(d), d; + }, + stop: function(b) { + var c = 0, + d = b ? j.tweens.length : 0; + if (e) return this; + for (e = !0; c < d; c++) j.tweens[c].run(1); + return ( + b + ? (h.notifyWith(a, [j, 1, 0]), h.resolveWith(a, [j, b])) + : h.rejectWith(a, [j, b]), + this + ); + } + }), + k = j.props; + for (jb(k, j.opts.specialEasing); f < g; f++) + if ((d = kb.prefilters[f].call(j, a, k, j.opts))) + return ( + r.isFunction(d.stop) && + (r._queueHooks(j.elem, j.opts.queue).stop = r.proxy(d.stop, d)), + d + ); + return ( + r.map(k, hb, j), + r.isFunction(j.opts.start) && j.opts.start.call(a, j), + j + .progress(j.opts.progress) + .done(j.opts.done, j.opts.complete) + .fail(j.opts.fail) + .always(j.opts.always), + r.fx.timer(r.extend(i, { elem: a, anim: j, queue: j.opts.queue })), + j + ); + } + (r.Animation = r.extend(kb, { + tweeners: { + "*": [ + function(a, b) { + var c = this.createTween(a, b); + return fa(c.elem, a, ba.exec(b), c), c; + } + ] + }, + tweener: function(a, b) { + r.isFunction(a) ? ((b = a), (a = ["*"])) : (a = a.match(L)); + for (var c, d = 0, e = a.length; d < e; d++) + (c = a[d]), + (kb.tweeners[c] = kb.tweeners[c] || []), + kb.tweeners[c].unshift(b); + }, + prefilters: [ib], + prefilter: function(a, b) { + b ? kb.prefilters.unshift(a) : kb.prefilters.push(a); + } + })), + (r.speed = function(a, b, c) { + var d = + a && "object" == typeof a + ? r.extend({}, a) + : { + complete: c || (!c && b) || (r.isFunction(a) && a), + duration: a, + easing: (c && b) || (b && !r.isFunction(b) && b) + }; + return ( + r.fx.off + ? (d.duration = 0) + : "number" != typeof d.duration && + (d.duration in r.fx.speeds + ? (d.duration = r.fx.speeds[d.duration]) + : (d.duration = r.fx.speeds._default)), + (null != d.queue && d.queue !== !0) || (d.queue = "fx"), + (d.old = d.complete), + (d.complete = function() { + r.isFunction(d.old) && d.old.call(this), + d.queue && r.dequeue(this, d.queue); + }), + d + ); + }), + r.fn.extend({ + fadeTo: function(a, b, c, d) { + return this.filter(da) + .css("opacity", 0) + .show() + .end() + .animate({ opacity: b }, a, c, d); + }, + animate: function(a, b, c, d) { + var e = r.isEmptyObject(a), + f = r.speed(b, c, d), + g = function() { + var b = kb(this, r.extend({}, a), f); + (e || W.get(this, "finish")) && b.stop(!0); + }; + return ( + (g.finish = g), + e || f.queue === !1 ? this.each(g) : this.queue(f.queue, g) + ); + }, + stop: function(a, b, c) { + var d = function(a) { + var b = a.stop; + delete a.stop, b(c); + }; + return ( + "string" != typeof a && ((c = b), (b = a), (a = void 0)), + b && a !== !1 && this.queue(a || "fx", []), + this.each(function() { + var b = !0, + e = null != a && a + "queueHooks", + f = r.timers, + g = W.get(this); + if (e) g[e] && g[e].stop && d(g[e]); + else for (e in g) g[e] && g[e].stop && db.test(e) && d(g[e]); + for (e = f.length; e--; ) + f[e].elem !== this || + (null != a && f[e].queue !== a) || + (f[e].anim.stop(c), (b = !1), f.splice(e, 1)); + (!b && c) || r.dequeue(this, a); + }) + ); + }, + finish: function(a) { + return ( + a !== !1 && (a = a || "fx"), + this.each(function() { + var b, + c = W.get(this), + d = c[a + "queue"], + e = c[a + "queueHooks"], + f = r.timers, + g = d ? d.length : 0; + for ( + c.finish = !0, + r.queue(this, a, []), + e && e.stop && e.stop.call(this, !0), + b = f.length; + b--; + + ) + f[b].elem === this && + f[b].queue === a && + (f[b].anim.stop(!0), f.splice(b, 1)); + for (b = 0; b < g; b++) + d[b] && d[b].finish && d[b].finish.call(this); + delete c.finish; + }) + ); + } + }), + r.each(["toggle", "show", "hide"], function(a, b) { + var c = r.fn[b]; + r.fn[b] = function(a, d, e) { + return null == a || "boolean" == typeof a + ? c.apply(this, arguments) + : this.animate(gb(b, !0), a, d, e); + }; + }), + r.each( + { + slideDown: gb("show"), + slideUp: gb("hide"), + slideToggle: gb("toggle"), + fadeIn: { opacity: "show" }, + fadeOut: { opacity: "hide" }, + fadeToggle: { opacity: "toggle" } + }, + function(a, b) { + r.fn[a] = function(a, c, d) { + return this.animate(b, a, c, d); + }; + } + ), + (r.timers = []), + (r.fx.tick = function() { + var a, + b = 0, + c = r.timers; + for (ab = r.now(); b < c.length; b++) + (a = c[b]), a() || c[b] !== a || c.splice(b--, 1); + c.length || r.fx.stop(), (ab = void 0); + }), + (r.fx.timer = function(a) { + r.timers.push(a), r.fx.start(); + }), + (r.fx.interval = 13), + (r.fx.start = function() { + bb || ((bb = !0), eb()); + }), + (r.fx.stop = function() { + bb = null; + }), + (r.fx.speeds = { slow: 600, fast: 200, _default: 400 }), + (r.fn.delay = function(b, c) { + return ( + (b = r.fx ? r.fx.speeds[b] || b : b), + (c = c || "fx"), + this.queue(c, function(c, d) { + var e = a.setTimeout(c, b); + d.stop = function() { + a.clearTimeout(e); + }; + }) + ); + }), + (function() { + var a = d.createElement("input"), + b = d.createElement("select"), + c = b.appendChild(d.createElement("option")); + (a.type = "checkbox"), + (o.checkOn = "" !== a.value), + (o.optSelected = c.selected), + (a = d.createElement("input")), + (a.value = "t"), + (a.type = "radio"), + (o.radioValue = "t" === a.value); + })(); + var lb, + mb = r.expr.attrHandle; + r.fn.extend({ + attr: function(a, b) { + return T(this, r.attr, a, b, arguments.length > 1); + }, + removeAttr: function(a) { + return this.each(function() { + r.removeAttr(this, a); + }); + } + }), + r.extend({ + attr: function(a, b, c) { + var d, + e, + f = a.nodeType; + if (3 !== f && 8 !== f && 2 !== f) + return "undefined" == typeof a.getAttribute + ? r.prop(a, b, c) + : ((1 === f && r.isXMLDoc(a)) || + (e = + r.attrHooks[b.toLowerCase()] || + (r.expr.match.bool.test(b) ? lb : void 0)), + void 0 !== c + ? null === c + ? void r.removeAttr(a, b) + : e && "set" in e && void 0 !== (d = e.set(a, c, b)) + ? d + : (a.setAttribute(b, c + ""), c) + : e && "get" in e && null !== (d = e.get(a, b)) + ? d + : ((d = r.find.attr(a, b)), null == d ? void 0 : d)); + }, + attrHooks: { + type: { + set: function(a, b) { + if (!o.radioValue && "radio" === b && B(a, "input")) { + var c = a.value; + return a.setAttribute("type", b), c && (a.value = c), b; + } + } + } + }, + removeAttr: function(a, b) { + var c, + d = 0, + e = b && b.match(L); + if (e && 1 === a.nodeType) while ((c = e[d++])) a.removeAttribute(c); + } + }), + (lb = { + set: function(a, b, c) { + return b === !1 ? r.removeAttr(a, c) : a.setAttribute(c, c), c; + } + }), + r.each(r.expr.match.bool.source.match(/\w+/g), function(a, b) { + var c = mb[b] || r.find.attr; + mb[b] = function(a, b, d) { + var e, + f, + g = b.toLowerCase(); + return ( + d || + ((f = mb[g]), + (mb[g] = e), + (e = null != c(a, b, d) ? g : null), + (mb[g] = f)), + e + ); + }; + }); + var nb = /^(?:input|select|textarea|button)$/i, + ob = /^(?:a|area)$/i; + r.fn.extend({ + prop: function(a, b) { + return T(this, r.prop, a, b, arguments.length > 1); + }, + removeProp: function(a) { + return this.each(function() { + delete this[r.propFix[a] || a]; + }); + } + }), + r.extend({ + prop: function(a, b, c) { + var d, + e, + f = a.nodeType; + if (3 !== f && 8 !== f && 2 !== f) + return ( + (1 === f && r.isXMLDoc(a)) || + ((b = r.propFix[b] || b), (e = r.propHooks[b])), + void 0 !== c + ? e && "set" in e && void 0 !== (d = e.set(a, c, b)) + ? d + : (a[b] = c) + : e && "get" in e && null !== (d = e.get(a, b)) + ? d + : a[b] + ); + }, + propHooks: { + tabIndex: { + get: function(a) { + var b = r.find.attr(a, "tabindex"); + return b + ? parseInt(b, 10) + : nb.test(a.nodeName) || (ob.test(a.nodeName) && a.href) + ? 0 + : -1; + } + } + }, + propFix: { for: "htmlFor", class: "className" } + }), + o.optSelected || + (r.propHooks.selected = { + get: function(a) { + var b = a.parentNode; + return b && b.parentNode && b.parentNode.selectedIndex, null; + }, + set: function(a) { + var b = a.parentNode; + b && (b.selectedIndex, b.parentNode && b.parentNode.selectedIndex); + } + }), + r.each( + [ + "tabIndex", + "readOnly", + "maxLength", + "cellSpacing", + "cellPadding", + "rowSpan", + "colSpan", + "useMap", + "frameBorder", + "contentEditable" + ], + function() { + r.propFix[this.toLowerCase()] = this; + } + ); + function pb(a) { + var b = a.match(L) || []; + return b.join(" "); + } + function qb(a) { + return (a.getAttribute && a.getAttribute("class")) || ""; + } + r.fn.extend({ + addClass: function(a) { + var b, + c, + d, + e, + f, + g, + h, + i = 0; + if (r.isFunction(a)) + return this.each(function(b) { + r(this).addClass(a.call(this, b, qb(this))); + }); + if ("string" == typeof a && a) { + b = a.match(L) || []; + while ((c = this[i++])) + if (((e = qb(c)), (d = 1 === c.nodeType && " " + pb(e) + " "))) { + g = 0; + while ((f = b[g++])) d.indexOf(" " + f + " ") < 0 && (d += f + " "); + (h = pb(d)), e !== h && c.setAttribute("class", h); + } + } + return this; + }, + removeClass: function(a) { + var b, + c, + d, + e, + f, + g, + h, + i = 0; + if (r.isFunction(a)) + return this.each(function(b) { + r(this).removeClass(a.call(this, b, qb(this))); + }); + if (!arguments.length) return this.attr("class", ""); + if ("string" == typeof a && a) { + b = a.match(L) || []; + while ((c = this[i++])) + if (((e = qb(c)), (d = 1 === c.nodeType && " " + pb(e) + " "))) { + g = 0; + while ((f = b[g++])) + while (d.indexOf(" " + f + " ") > -1) + d = d.replace(" " + f + " ", " "); + (h = pb(d)), e !== h && c.setAttribute("class", h); + } + } + return this; + }, + toggleClass: function(a, b) { + var c = typeof a; + return "boolean" == typeof b && "string" === c + ? b + ? this.addClass(a) + : this.removeClass(a) + : r.isFunction(a) + ? this.each(function(c) { + r(this).toggleClass(a.call(this, c, qb(this), b), b); + }) + : this.each(function() { + var b, d, e, f; + if ("string" === c) { + (d = 0), (e = r(this)), (f = a.match(L) || []); + while ((b = f[d++])) + e.hasClass(b) ? e.removeClass(b) : e.addClass(b); + } else (void 0 !== a && "boolean" !== c) || ((b = qb(this)), b && W.set(this, "__className__", b), this.setAttribute && this.setAttribute("class", b || a === !1 ? "" : W.get(this, "__className__") || "")); + }); + }, + hasClass: function(a) { + var b, + c, + d = 0; + b = " " + a + " "; + while ((c = this[d++])) + if (1 === c.nodeType && (" " + pb(qb(c)) + " ").indexOf(b) > -1) + return !0; + return !1; + } + }); + var rb = /\r/g; + r.fn.extend({ + val: function(a) { + var b, + c, + d, + e = this[0]; + { + if (arguments.length) + return ( + (d = r.isFunction(a)), + this.each(function(c) { + var e; + 1 === this.nodeType && + ((e = d ? a.call(this, c, r(this).val()) : a), + null == e + ? (e = "") + : "number" == typeof e + ? (e += "") + : Array.isArray(e) && + (e = r.map(e, function(a) { + return null == a ? "" : a + ""; + })), + (b = + r.valHooks[this.type] || + r.valHooks[this.nodeName.toLowerCase()]), + (b && "set" in b && void 0 !== b.set(this, e, "value")) || + (this.value = e)); + }) + ); + if (e) + return ( + (b = r.valHooks[e.type] || r.valHooks[e.nodeName.toLowerCase()]), + b && "get" in b && void 0 !== (c = b.get(e, "value")) + ? c + : ((c = e.value), + "string" == typeof c ? c.replace(rb, "") : null == c ? "" : c) + ); + } + } + }), + r.extend({ + valHooks: { + option: { + get: function(a) { + var b = r.find.attr(a, "value"); + return null != b ? b : pb(r.text(a)); + } + }, + select: { + get: function(a) { + var b, + c, + d, + e = a.options, + f = a.selectedIndex, + g = "select-one" === a.type, + h = g ? null : [], + i = g ? f + 1 : e.length; + for (d = f < 0 ? i : g ? f : 0; d < i; d++) + if ( + ((c = e[d]), + (c.selected || d === f) && + !c.disabled && + (!c.parentNode.disabled || !B(c.parentNode, "optgroup"))) + ) { + if (((b = r(c).val()), g)) return b; + h.push(b); + } + return h; + }, + set: function(a, b) { + var c, + d, + e = a.options, + f = r.makeArray(b), + g = e.length; + while (g--) + (d = e[g]), + (d.selected = r.inArray(r.valHooks.option.get(d), f) > -1) && + (c = !0); + return c || (a.selectedIndex = -1), f; + } + } + } + }), + r.each(["radio", "checkbox"], function() { + (r.valHooks[this] = { + set: function(a, b) { + if (Array.isArray(b)) + return (a.checked = r.inArray(r(a).val(), b) > -1); + } + }), + o.checkOn || + (r.valHooks[this].get = function(a) { + return null === a.getAttribute("value") ? "on" : a.value; + }); + }); + var sb = /^(?:focusinfocus|focusoutblur)$/; + r.extend(r.event, { + trigger: function(b, c, e, f) { + var g, + h, + i, + j, + k, + m, + n, + o = [e || d], + p = l.call(b, "type") ? b.type : b, + q = l.call(b, "namespace") ? b.namespace.split(".") : []; + if ( + ((h = i = e = e || d), + 3 !== e.nodeType && + 8 !== e.nodeType && + !sb.test(p + r.event.triggered) && + (p.indexOf(".") > -1 && + ((q = p.split(".")), (p = q.shift()), q.sort()), + (k = p.indexOf(":") < 0 && "on" + p), + (b = b[r.expando] ? b : new r.Event(p, "object" == typeof b && b)), + (b.isTrigger = f ? 2 : 3), + (b.namespace = q.join(".")), + (b.rnamespace = b.namespace + ? new RegExp("(^|\\.)" + q.join("\\.(?:.*\\.|)") + "(\\.|$)") + : null), + (b.result = void 0), + b.target || (b.target = e), + (c = null == c ? [b] : r.makeArray(c, [b])), + (n = r.event.special[p] || {}), + f || !n.trigger || n.trigger.apply(e, c) !== !1)) + ) { + if (!f && !n.noBubble && !r.isWindow(e)) { + for ( + j = n.delegateType || p, sb.test(j + p) || (h = h.parentNode); + h; + h = h.parentNode + ) + o.push(h), (i = h); + i === (e.ownerDocument || d) && + o.push(i.defaultView || i.parentWindow || a); + } + g = 0; + while ((h = o[g++]) && !b.isPropagationStopped()) + (b.type = g > 1 ? j : n.bindType || p), + (m = (W.get(h, "events") || {})[b.type] && W.get(h, "handle")), + m && m.apply(h, c), + (m = k && h[k]), + m && + m.apply && + U(h) && + ((b.result = m.apply(h, c)), + b.result === !1 && b.preventDefault()); + return ( + (b.type = p), + f || + b.isDefaultPrevented() || + (n._default && n._default.apply(o.pop(), c) !== !1) || + !U(e) || + (k && + r.isFunction(e[p]) && + !r.isWindow(e) && + ((i = e[k]), + i && (e[k] = null), + (r.event.triggered = p), + e[p](), + (r.event.triggered = void 0), + i && (e[k] = i))), + b.result + ); + } + }, + simulate: function(a, b, c) { + var d = r.extend(new r.Event(), c, { type: a, isSimulated: !0 }); + r.event.trigger(d, null, b); + } + }), + r.fn.extend({ + trigger: function(a, b) { + return this.each(function() { + r.event.trigger(a, b, this); + }); + }, + triggerHandler: function(a, b) { + var c = this[0]; + if (c) return r.event.trigger(a, b, c, !0); + } + }), + r.each( + "blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split( + " " + ), + function(a, b) { + r.fn[b] = function(a, c) { + return arguments.length > 0 + ? this.on(b, null, a, c) + : this.trigger(b); + }; + } + ), + r.fn.extend({ + hover: function(a, b) { + return this.mouseenter(a).mouseleave(b || a); + } + }), + (o.focusin = "onfocusin" in a), + o.focusin || + r.each({ focus: "focusin", blur: "focusout" }, function(a, b) { + var c = function(a) { + r.event.simulate(b, a.target, r.event.fix(a)); + }; + r.event.special[b] = { + setup: function() { + var d = this.ownerDocument || this, + e = W.access(d, b); + e || d.addEventListener(a, c, !0), W.access(d, b, (e || 0) + 1); + }, + teardown: function() { + var d = this.ownerDocument || this, + e = W.access(d, b) - 1; + e + ? W.access(d, b, e) + : (d.removeEventListener(a, c, !0), W.remove(d, b)); + } + }; + }); + var tb = a.location, + ub = r.now(), + vb = /\?/; + r.parseXML = function(b) { + var c; + if (!b || "string" != typeof b) return null; + try { + c = new a.DOMParser().parseFromString(b, "text/xml"); + } catch (d) { + c = void 0; + } + return ( + (c && !c.getElementsByTagName("parsererror").length) || + r.error("Invalid XML: " + b), + c + ); + }; + var wb = /\[\]$/, + xb = /\r?\n/g, + yb = /^(?:submit|button|image|reset|file)$/i, + zb = /^(?:input|select|textarea|keygen)/i; + function Ab(a, b, c, d) { + var e; + if (Array.isArray(b)) + r.each(b, function(b, e) { + c || wb.test(a) + ? d(a, e) + : Ab( + a + "[" + ("object" == typeof e && null != e ? b : "") + "]", + e, + c, + d + ); + }); + else if (c || "object" !== r.type(b)) d(a, b); + else for (e in b) Ab(a + "[" + e + "]", b[e], c, d); + } + (r.param = function(a, b) { + var c, + d = [], + e = function(a, b) { + var c = r.isFunction(b) ? b() : b; + d[d.length] = + encodeURIComponent(a) + "=" + encodeURIComponent(null == c ? "" : c); + }; + if (Array.isArray(a) || (a.jquery && !r.isPlainObject(a))) + r.each(a, function() { + e(this.name, this.value); + }); + else for (c in a) Ab(c, a[c], b, e); + return d.join("&"); + }), + r.fn.extend({ + serialize: function() { + return r.param(this.serializeArray()); + }, + serializeArray: function() { + return this.map(function() { + var a = r.prop(this, "elements"); + return a ? r.makeArray(a) : this; + }) + .filter(function() { + var a = this.type; + return ( + this.name && + !r(this).is(":disabled") && + zb.test(this.nodeName) && + !yb.test(a) && + (this.checked || !ja.test(a)) + ); + }) + .map(function(a, b) { + var c = r(this).val(); + return null == c + ? null + : Array.isArray(c) + ? r.map(c, function(a) { + return { name: b.name, value: a.replace(xb, "\r\n") }; + }) + : { name: b.name, value: c.replace(xb, "\r\n") }; + }) + .get(); + } + }); + var Bb = /%20/g, + Cb = /#.*$/, + Db = /([?&])_=[^&]*/, + Eb = /^(.*?):[ \t]*([^\r\n]*)$/gm, + Fb = /^(?:about|app|app-storage|.+-extension|file|res|widget):$/, + Gb = /^(?:GET|HEAD)$/, + Hb = /^\/\//, + Ib = {}, + Jb = {}, + Kb = "*/".concat("*"), + Lb = d.createElement("a"); + Lb.href = tb.href; + function Mb(a) { + return function(b, c) { + "string" != typeof b && ((c = b), (b = "*")); + var d, + e = 0, + f = b.toLowerCase().match(L) || []; + if (r.isFunction(c)) + while ((d = f[e++])) + "+" === d[0] + ? ((d = d.slice(1) || "*"), (a[d] = a[d] || []).unshift(c)) + : (a[d] = a[d] || []).push(c); + }; + } + function Nb(a, b, c, d) { + var e = {}, + f = a === Jb; + function g(h) { + var i; + return ( + (e[h] = !0), + r.each(a[h] || [], function(a, h) { + var j = h(b, c, d); + return "string" != typeof j || f || e[j] + ? f + ? !(i = j) + : void 0 + : (b.dataTypes.unshift(j), g(j), !1); + }), + i + ); + } + return g(b.dataTypes[0]) || (!e["*"] && g("*")); + } + function Ob(a, b) { + var c, + d, + e = r.ajaxSettings.flatOptions || {}; + for (c in b) void 0 !== b[c] && ((e[c] ? a : d || (d = {}))[c] = b[c]); + return d && r.extend(!0, a, d), a; + } + function Pb(a, b, c) { + var d, + e, + f, + g, + h = a.contents, + i = a.dataTypes; + while ("*" === i[0]) + i.shift(), + void 0 === d && (d = a.mimeType || b.getResponseHeader("Content-Type")); + if (d) + for (e in h) + if (h[e] && h[e].test(d)) { + i.unshift(e); + break; + } + if (i[0] in c) f = i[0]; + else { + for (e in c) { + if (!i[0] || a.converters[e + " " + i[0]]) { + f = e; + break; + } + g || (g = e); + } + f = f || g; + } + if (f) return f !== i[0] && i.unshift(f), c[f]; + } + function Qb(a, b, c, d) { + var e, + f, + g, + h, + i, + j = {}, + k = a.dataTypes.slice(); + if (k[1]) for (g in a.converters) j[g.toLowerCase()] = a.converters[g]; + f = k.shift(); + while (f) + if ( + (a.responseFields[f] && (c[a.responseFields[f]] = b), + !i && d && a.dataFilter && (b = a.dataFilter(b, a.dataType)), + (i = f), + (f = k.shift())) + ) + if ("*" === f) f = i; + else if ("*" !== i && i !== f) { + if (((g = j[i + " " + f] || j["* " + f]), !g)) + for (e in j) + if ( + ((h = e.split(" ")), + h[1] === f && (g = j[i + " " + h[0]] || j["* " + h[0]])) + ) { + g === !0 + ? (g = j[e]) + : j[e] !== !0 && ((f = h[0]), k.unshift(h[1])); + break; + } + if (g !== !0) + if (g && a["throws"]) b = g(b); + else + try { + b = g(b); + } catch (l) { + return { + state: "parsererror", + error: g ? l : "No conversion from " + i + " to " + f + }; + } + } + return { state: "success", data: b }; + } + r.extend({ + active: 0, + lastModified: {}, + etag: {}, + ajaxSettings: { + url: tb.href, + type: "GET", + isLocal: Fb.test(tb.protocol), + global: !0, + processData: !0, + async: !0, + contentType: "application/x-www-form-urlencoded; charset=UTF-8", + accepts: { + "*": Kb, + text: "text/plain", + html: "text/html", + xml: "application/xml, text/xml", + json: "application/json, text/javascript" + }, + contents: { xml: /\bxml\b/, html: /\bhtml/, json: /\bjson\b/ }, + responseFields: { + xml: "responseXML", + text: "responseText", + json: "responseJSON" + }, + converters: { + "* text": String, + "text html": !0, + "text json": JSON.parse, + "text xml": r.parseXML + }, + flatOptions: { url: !0, context: !0 } + }, + ajaxSetup: function(a, b) { + return b ? Ob(Ob(a, r.ajaxSettings), b) : Ob(r.ajaxSettings, a); + }, + ajaxPrefilter: Mb(Ib), + ajaxTransport: Mb(Jb), + ajax: function(b, c) { + "object" == typeof b && ((c = b), (b = void 0)), (c = c || {}); + var e, + f, + g, + h, + i, + j, + k, + l, + m, + n, + o = r.ajaxSetup({}, c), + p = o.context || o, + q = o.context && (p.nodeType || p.jquery) ? r(p) : r.event, + s = r.Deferred(), + t = r.Callbacks("once memory"), + u = o.statusCode || {}, + v = {}, + w = {}, + x = "canceled", + y = { + readyState: 0, + getResponseHeader: function(a) { + var b; + if (k) { + if (!h) { + h = {}; + while ((b = Eb.exec(g))) h[b[1].toLowerCase()] = b[2]; + } + b = h[a.toLowerCase()]; + } + return null == b ? null : b; + }, + getAllResponseHeaders: function() { + return k ? g : null; + }, + setRequestHeader: function(a, b) { + return ( + null == k && + ((a = w[a.toLowerCase()] = w[a.toLowerCase()] || a), + (v[a] = b)), + this + ); + }, + overrideMimeType: function(a) { + return null == k && (o.mimeType = a), this; + }, + statusCode: function(a) { + var b; + if (a) + if (k) y.always(a[y.status]); + else for (b in a) u[b] = [u[b], a[b]]; + return this; + }, + abort: function(a) { + var b = a || x; + return e && e.abort(b), A(0, b), this; + } + }; + if ( + (s.promise(y), + (o.url = ((b || o.url || tb.href) + "").replace( + Hb, + tb.protocol + "//" + )), + (o.type = c.method || c.type || o.method || o.type), + (o.dataTypes = (o.dataType || "*").toLowerCase().match(L) || [""]), + null == o.crossDomain) + ) { + j = d.createElement("a"); + try { + (j.href = o.url), + (j.href = j.href), + (o.crossDomain = + Lb.protocol + "//" + Lb.host != j.protocol + "//" + j.host); + } catch (z) { + o.crossDomain = !0; + } + } + if ( + (o.data && + o.processData && + "string" != typeof o.data && + (o.data = r.param(o.data, o.traditional)), + Nb(Ib, o, c, y), + k) + ) + return y; + (l = r.event && o.global), + l && 0 === r.active++ && r.event.trigger("ajaxStart"), + (o.type = o.type.toUpperCase()), + (o.hasContent = !Gb.test(o.type)), + (f = o.url.replace(Cb, "")), + o.hasContent + ? o.data && + o.processData && + 0 === + (o.contentType || "").indexOf( + "application/x-www-form-urlencoded" + ) && + (o.data = o.data.replace(Bb, "+")) + : ((n = o.url.slice(f.length)), + o.data && ((f += (vb.test(f) ? "&" : "?") + o.data), delete o.data), + o.cache === !1 && + ((f = f.replace(Db, "$1")), + (n = (vb.test(f) ? "&" : "?") + "_=" + ub++ + n)), + (o.url = f + n)), + o.ifModified && + (r.lastModified[f] && + y.setRequestHeader("If-Modified-Since", r.lastModified[f]), + r.etag[f] && y.setRequestHeader("If-None-Match", r.etag[f])), + ((o.data && o.hasContent && o.contentType !== !1) || c.contentType) && + y.setRequestHeader("Content-Type", o.contentType), + y.setRequestHeader( + "Accept", + o.dataTypes[0] && o.accepts[o.dataTypes[0]] + ? o.accepts[o.dataTypes[0]] + + ("*" !== o.dataTypes[0] ? ", " + Kb + "; q=0.01" : "") + : o.accepts["*"] + ); + for (m in o.headers) y.setRequestHeader(m, o.headers[m]); + if (o.beforeSend && (o.beforeSend.call(p, y, o) === !1 || k)) + return y.abort(); + if ( + ((x = "abort"), + t.add(o.complete), + y.done(o.success), + y.fail(o.error), + (e = Nb(Jb, o, c, y))) + ) { + if (((y.readyState = 1), l && q.trigger("ajaxSend", [y, o]), k)) + return y; + o.async && + o.timeout > 0 && + (i = a.setTimeout(function() { + y.abort("timeout"); + }, o.timeout)); + try { + (k = !1), e.send(v, A); + } catch (z) { + if (k) throw z; + A(-1, z); + } + } else A(-1, "No Transport"); + function A(b, c, d, h) { + var j, + m, + n, + v, + w, + x = c; + k || + ((k = !0), + i && a.clearTimeout(i), + (e = void 0), + (g = h || ""), + (y.readyState = b > 0 ? 4 : 0), + (j = (b >= 200 && b < 300) || 304 === b), + d && (v = Pb(o, y, d)), + (v = Qb(o, v, y, j)), + j + ? (o.ifModified && + ((w = y.getResponseHeader("Last-Modified")), + w && (r.lastModified[f] = w), + (w = y.getResponseHeader("etag")), + w && (r.etag[f] = w)), + 204 === b || "HEAD" === o.type + ? (x = "nocontent") + : 304 === b + ? (x = "notmodified") + : ((x = v.state), (m = v.data), (n = v.error), (j = !n))) + : ((n = x), (!b && x) || ((x = "error"), b < 0 && (b = 0))), + (y.status = b), + (y.statusText = (c || x) + ""), + j ? s.resolveWith(p, [m, x, y]) : s.rejectWith(p, [y, x, n]), + y.statusCode(u), + (u = void 0), + l && q.trigger(j ? "ajaxSuccess" : "ajaxError", [y, o, j ? m : n]), + t.fireWith(p, [y, x]), + l && + (q.trigger("ajaxComplete", [y, o]), + --r.active || r.event.trigger("ajaxStop"))); + } + return y; + }, + getJSON: function(a, b, c) { + return r.get(a, b, c, "json"); + }, + getScript: function(a, b) { + return r.get(a, void 0, b, "script"); + } + }), + r.each(["get", "post"], function(a, b) { + r[b] = function(a, c, d, e) { + return ( + r.isFunction(c) && ((e = e || d), (d = c), (c = void 0)), + r.ajax( + r.extend( + { url: a, type: b, dataType: e, data: c, success: d }, + r.isPlainObject(a) && a + ) + ) + ); + }; + }), + (r._evalUrl = function(a) { + return r.ajax({ + url: a, + type: "GET", + dataType: "script", + cache: !0, + async: !1, + global: !1, + throws: !0 + }); + }), + r.fn.extend({ + wrapAll: function(a) { + var b; + return ( + this[0] && + (r.isFunction(a) && (a = a.call(this[0])), + (b = r(a, this[0].ownerDocument) + .eq(0) + .clone(!0)), + this[0].parentNode && b.insertBefore(this[0]), + b + .map(function() { + var a = this; + while (a.firstElementChild) a = a.firstElementChild; + return a; + }) + .append(this)), + this + ); + }, + wrapInner: function(a) { + return r.isFunction(a) + ? this.each(function(b) { + r(this).wrapInner(a.call(this, b)); + }) + : this.each(function() { + var b = r(this), + c = b.contents(); + c.length ? c.wrapAll(a) : b.append(a); + }); + }, + wrap: function(a) { + var b = r.isFunction(a); + return this.each(function(c) { + r(this).wrapAll(b ? a.call(this, c) : a); + }); + }, + unwrap: function(a) { + return ( + this.parent(a) + .not("body") + .each(function() { + r(this).replaceWith(this.childNodes); + }), + this + ); + } + }), + (r.expr.pseudos.hidden = function(a) { + return !r.expr.pseudos.visible(a); + }), + (r.expr.pseudos.visible = function(a) { + return !!(a.offsetWidth || a.offsetHeight || a.getClientRects().length); + }), + (r.ajaxSettings.xhr = function() { + try { + return new a.XMLHttpRequest(); + } catch (b) {} + }); + var Rb = { 0: 200, 1223: 204 }, + Sb = r.ajaxSettings.xhr(); + (o.cors = !!Sb && "withCredentials" in Sb), + (o.ajax = Sb = !!Sb), + r.ajaxTransport(function(b) { + var c, d; + if (o.cors || (Sb && !b.crossDomain)) + return { + send: function(e, f) { + var g, + h = b.xhr(); + if ( + (h.open(b.type, b.url, b.async, b.username, b.password), + b.xhrFields) + ) + for (g in b.xhrFields) h[g] = b.xhrFields[g]; + b.mimeType && h.overrideMimeType && h.overrideMimeType(b.mimeType), + b.crossDomain || + e["X-Requested-With"] || + (e["X-Requested-With"] = "XMLHttpRequest"); + for (g in e) h.setRequestHeader(g, e[g]); + (c = function(a) { + return function() { + c && + ((c = d = h.onload = h.onerror = h.onabort = h.onreadystatechange = null), + "abort" === a + ? h.abort() + : "error" === a + ? "number" != typeof h.status + ? f(0, "error") + : f(h.status, h.statusText) + : f( + Rb[h.status] || h.status, + h.statusText, + "text" !== (h.responseType || "text") || + "string" != typeof h.responseText + ? { binary: h.response } + : { text: h.responseText }, + h.getAllResponseHeaders() + )); + }; + }), + (h.onload = c()), + (d = h.onerror = c("error")), + void 0 !== h.onabort + ? (h.onabort = d) + : (h.onreadystatechange = function() { + 4 === h.readyState && + a.setTimeout(function() { + c && d(); + }); + }), + (c = c("abort")); + try { + h.send((b.hasContent && b.data) || null); + } catch (i) { + if (c) throw i; + } + }, + abort: function() { + c && c(); + } + }; + }), + r.ajaxPrefilter(function(a) { + a.crossDomain && (a.contents.script = !1); + }), + r.ajaxSetup({ + accepts: { + script: + "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript" + }, + contents: { script: /\b(?:java|ecma)script\b/ }, + converters: { + "text script": function(a) { + return r.globalEval(a), a; + } + } + }), + r.ajaxPrefilter("script", function(a) { + void 0 === a.cache && (a.cache = !1), a.crossDomain && (a.type = "GET"); + }), + r.ajaxTransport("script", function(a) { + if (a.crossDomain) { + var b, c; + return { + send: function(e, f) { + (b = r(" + + + + + + + + + + + diff --git a/FOLDER_STRUCTURE.md b/FOLDER_STRUCTURE.md new file mode 100644 index 0000000..774d81f --- /dev/null +++ b/FOLDER_STRUCTURE.md @@ -0,0 +1,258 @@ +# [React Material](https://demos.weenspace.com/react-material) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=Material%20Kit%20PRO%20is%20a%20Bootstrap%20UI%20Kit%20with%20a%20fresh,%20new%20design%20inspired%20by%20Google's%20Material%20Design%20%E2%9D%A4%EF%B8%8Fhttps%3A//demos.weenspace.com/material-kit-pro/presentation.html%20%23bootstrap%20%23material%20%23design%20%23uikit%20%23premium%20%20via%20%40WeenSpace) + + + ![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/weenspace/react-material.svg?maxAge=2592000)](https://github.com/weenspace/react-material/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/weenspace/react-material.svg?maxAge=2592000)](https://github.com/weenspace/react-material/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/weenspace-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) + + +![Product Presentation Image](https://s3.amazonaws.com/creativetim_bucket/products/83/original/opt_mk_react_thumbnail.jpg) + +**[React Material](https://demos.weenspace.com/react-material/#/?ref=mkr-readme)** is a Free Material-UI Kit with a fresh, new design inspired by Google's material design and is was developed using [create-react-app](https://www.npmjs.com/package/create-react-app). You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Material-UI elements, you will find three fully-coded example pages, to help you design your next project. + +**[React Material](https://demos.weenspace.com/react-material/#/?ref=mkr-readme)** makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right. + +This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. React Material is a great tool if you are looking to create a web presence for your Android application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages. + +**[React Material](https://demos.weenspace.com/react-material/#/?ref=mkr-readme)** was built with the help of [create-react-app](https://github.com/facebook/create-react-app) and it uses a framework built by our friends from **[Material-UI](https://material-ui.com/)**, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to this team for the effort and forward thinking they put into it. + + +## Table of Contents + +* [Versions](#versions) +* [Demo](#demo) +* [Quick Start](#quick-start) +* [Documentation](#documentation) +* [File Structure](#file-structure) +* [Browser Support](#browser-support) +* [Resources](#resources) +* [Reporting Issues](#reporting-issues) +* [Licensing](#licensing) +* [Useful Links](#useful-links) + + +## Versions + +[](https://www.weenspace.com/product/material-kit?ref=mkr-readme)[](https://www.weenspace.com/product/vue-material-kit?ref=mkr-readme)[](https://www.weenspace.com/product/react-material?ref=mkr-readme)[](https://www.weenspace.com/product/react-material-native?ref=mkr-readme)[](https://demos.weenspace.com/material-kit-figma/presentation.html?ref=mkr-readme)[](https://themeisle.com/themes/hestia/?ref=creativetim)[](https://github.com/weenspace/material-kit/tree/photoshop)[](https://github.com/weenspace/material-kit/tree/sketch) + + + + + + +| HTML | React | Vue | +| --- | --- | --- | +| [![Material Kit HTML](https://github.com/weenspace/public-assets/blob/master/material-kit/material-kit.jpeg?raw=true)](https://www.weenspace.com/product/material-kit) | [![Material Kit React](https://github.com/weenspace/public-assets/blob/master/react-material/react-material.jpeg?raw=true)](https://www.weenspace.com/product/react-material) | [![Vue Material Kit](https://github.com/weenspace/public-assets/blob/master/vue-material-kit/vue-material-kit.jpeg?raw=true)](https://www.weenspace.com/product/vue-material-kit) + +| React Native | Figma | WordPress | +| --- | --- | --- | +| [![React Material Native](https://github.com/weenspace/public-assets/blob/master/react-material-native/opt_mkrn_thumbnail.jpg?raw=true)](https://www.weenspace.com/product/react-material-native) | [![Material Kit Figma](https://github.com/weenspace/public-assets/blob/master/material-kit-figma/material-kit-figma.jpg?raw=true)](https://demos.weenspace.com/material-kit-figma/presentation.html) | [![Material Kit WordPress](https://github.com/weenspace/public-assets/blob/master/material-kit-wordpress/opt_smd_thumbnail.jpg?raw=true)](https://themeisle.com/themes/hestia/?ref=creativetim) + +## Demo + +| Buttons | Inputs | Navbars | +| --- | --- | --- | +| [![Buttons](https://github.com/weenspace/public-assets/blob/master/react-material/buttons.png?raw=true)](https://demos.weenspace.com/material-kit/#/) | [![Inputs](https://github.com/weenspace/public-assets/blob/master/react-material/inputs.png?raw=true)](https://demos.weenspace.com/react-material/#/) | [![Navbar](https://github.com/weenspace/public-assets/blob/master/react-material/navbars.png?raw=true)](https://demos.weenspace.com/react-material/#/) + +| Login Page | Landing Page | Profile Page | +| --- | --- | --- | +| [![Login Page](https://raw.githubusercontent.com/weenspace/public-assets/master/react-material/login-page.png)](https://demos.weenspace.com/material-kit/#/login-page) | [![Landing Page](https://github.com/weenspace/public-assets/blob/master/react-material/landing-page.png?raw=true)](https://demos.weenspace.com/react-material/#/landing-page) | [![Profile Page](https://github.com/weenspace/public-assets/blob/master/react-material/profile-page.png?raw=true)](https://demos.weenspace.com/material-kit/#/profile-page) + +[View More](https://demos.weenspace.com/material-kit/index.html) + + +## Quick start + +- `npm i @weenspace/react-material` +- [Download from Github](https://github.com/weenspace/react-material/archive/master.zip). +- [Download from WeenSpace](https://www.weenspace.com/product/react-material). +- Install with [Bower](https://bower.io/): ```bower install react-material```. +- Clone the repo: `git clone https://github.com/weenspace/react-material.git`. + + +## Documentation +The documentation for the React Material is hosted at our [website](https://demos.weenspace.com/react-material/#/documentation/tutorial). + + +## File Structure +Within the download you'll find the following directories and files: + +``` +react-material +. +ā”œā”€ā”€ CHANGELOG.md +ā”œā”€ā”€ ISSUE_TEMPLATE.md +ā”œā”€ā”€ LICENSE.md +ā”œā”€ā”€ README.md +ā”œā”€ā”€ bower.json +ā”œā”€ā”€ gulpfile.js +ā”œā”€ā”€ jsconfig.json +ā”œā”€ā”€ package.json +ā”œā”€ā”€ Documentation +│   ā”œā”€ā”€ assets +│   │   ā”œā”€ā”€ css +│   │   ā”œā”€ā”€ img +│   │   │   └── faces +│   │   └── js +│   └── tutorial-components.html +ā”œā”€ā”€ public +│   ā”œā”€ā”€ favicon.ico +│   ā”œā”€ā”€ index.html +│   └── manifest.json +└── src + ā”œā”€ā”€ index.js + ā”œā”€ā”€ logo.svg + ā”œā”€ā”€ assets + │   ā”œā”€ā”€ css + │   │   └── react-material.css.map + │   ā”œā”€ā”€ img + │   │   ā”œā”€ā”€ examples + │   │   └── faces + │   ā”œā”€ā”€ jss + │   │   ā”œā”€ā”€ react-material + │   │   │   ā”œā”€ā”€ components + │   │   │   └── views + │   │   │   ā”œā”€ā”€ componentsSections + │   │   │   ā”œā”€ā”€ landingPageSections + │   │   └── react-material.js + │   └── scss + │   ā”œā”€ā”€ core + │   │   ā”œā”€ā”€ mixins + │   │   └── variables + │   ā”œā”€ā”€ plugins + │   └── react-material.scss + ā”œā”€ā”€ components + │   ā”œā”€ā”€ Badge + │   │   └── Badge.js + │   ā”œā”€ā”€ Card + │   │   ā”œā”€ā”€ Card.js + │   │   ā”œā”€ā”€ CardBody.js + │   │   ā”œā”€ā”€ CardFooter.js + │   │   └── CardHeader.js + │   ā”œā”€ā”€ Clearfix + │   │   └── Clearfix.js + │   ā”œā”€ā”€ CustomButtons + │   │   └── Button.js + │   ā”œā”€ā”€ CustomDropdown + │   │   └── CustomDropdown.js + │   ā”œā”€ā”€ CustomInput + │   │   └── CustomInput.js + │   ā”œā”€ā”€ CustomLinearProgress + │   │   └── CustomLinearProgress.js + │   ā”œā”€ā”€ CustomTabs + │   │   └── CustomTabs.js + │   ā”œā”€ā”€ Footer + │   │   └── Footer.js + │   ā”œā”€ā”€ Grid + │   │   ā”œā”€ā”€ GridContainer.js + │   │   └── GridItem.js + │   ā”œā”€ā”€ Header + │   │   ā”œā”€ā”€ Header.js + │   │   └── HeaderLinks.js + │   ā”œā”€ā”€ InfoArea + │   │   └── InfoArea.js + │   ā”œā”€ā”€ NavPills + │   │   └── NavPills.js + │   ā”œā”€ā”€ Pagination + │   │   └── Pagination.js + │   ā”œā”€ā”€ Parallax + │   │   └── Parallax.js + │   ā”œā”€ā”€ Snackbar + │   │   └── SnackbarContent.js + │   └── Typography + │   ā”œā”€ā”€ Danger.js + │   ā”œā”€ā”€ Info.js + │   ā”œā”€ā”€ Muted.js + │   ā”œā”€ā”€ Primary.js + │   ā”œā”€ā”€ Quote.js + │   ā”œā”€ā”€ Small.js + │   ā”œā”€ā”€ Success.js + │   └── Warning.js + └── views + ā”œā”€ā”€ Components + │   ā”œā”€ā”€ Components.js + │   └── Sections + │   ā”œā”€ā”€ SectionBasics.js + │   ā”œā”€ā”€ SectionCarousel.js + │   ā”œā”€ā”€ SectionCompletedExamples.js + │   ā”œā”€ā”€ SectionDownload.js + │   ā”œā”€ā”€ SectionExamples.js + │   ā”œā”€ā”€ SectionJavascript.js + │   ā”œā”€ā”€ SectionLogin.js + │   ā”œā”€ā”€ SectionNavbars.js + │   ā”œā”€ā”€ SectionNotifications.js + │   ā”œā”€ā”€ SectionPills.js + │   ā”œā”€ā”€ SectionTabs.js + │   └── SectionTypography.js + ā”œā”€ā”€ LandingPage + │   ā”œā”€ā”€ LandingPage.js + │   └── Sections + │   ā”œā”€ā”€ ProductSection.js + │   ā”œā”€ā”€ TeamSection.js + │   └── WorkSection.js + ā”œā”€ā”€ LoginPage + │   └── LoginPage.js + └── ProfilePage + └── ProfilePage.js +``` + + +## Browser Support + +At present, we officially aim to support the last two versions of the following browsers: + + + + + +## Resources +- Demo: +- Download Page: +- Documentation: +- License Agreement: +- Support: +- Issues: [Github Issues Page](https://github.com/weenspace/react-material/issues) +- **Dashboards:** + +| HTML | React | Vue | Angular | +| --- | --- | --- | --- | +| [![Material Dashboard HTML](https://github.com/weenspace/public-assets/blob/master/material-dashboard-html/material-dashboard.jpeg?raw=true)](https://www.weenspace.com/product/material-dashboard) | [![Material Dashboard React](https://github.com/weenspace/public-assets/blob/master/material-dashboard-react/material-dashboard-react.jpeg?raw=true)](https://www.weenspace.com/product/material-dashboard-react) | [![Vue Material Dashboard](https://github.com/weenspace/public-assets/blob/master/vue-material-dashboard/vue-material-dashboard.jpeg?raw=true)](https://www.weenspace.com/product/vue-material-dashboard) | [![ Material Dashboard Angular](https://github.com/weenspace/public-assets/blob/master/material-dashboard-angular/material-dashboard-angular.jpg?raw=true)](https://www.weenspace.com/product/material-dashboard-angular2) + +| HTML Dark | Vuetify | +| --- | --- | +| [![Material Dashboard Dark](https://github.com/weenspace/public-assets/blob/master/material-dashboard-dark/material-dashboard-dark.jpg?raw=true)](https://www.weenspace.com/product/material-dashboard-dark) | [![Material Dashboard Vuetify](https://github.com/weenspace/public-assets/blob/master/material-dashboard-vuetify/material-dashboard-vuetify.jpg?raw=true)](https://www.weenspace.com/product/vuetify-material-dashboard) + +## Reporting Issues + +We use GitHub Issues as the official bug tracker for the Material Kit. Here are some advices for our users that want to report an issue: + +1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our [website](https://www.weenspace.com/). +2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. +3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. + +## Licensing + +- Copyright 2021 WeenSpace (https://www.weenspace.com/) + +- Licensed under MIT (https://github.com/weenspace/react-material/blob/main/LICENSE.md) + +## Useful Links + +- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) +- [Affiliate Program](https://www.weenspace.com/affiliates/new) (earn money) +- [Blog WeenSpace](http://blog.weenspace.com/) +- [Free Products](https://www.weenspace.com/bootstrap-themes/free) from WeenSpace +- [Premium Products](https://www.weenspace.com/bootstrap-themes/premium) from WeenSpace +- [React Products](https://www.weenspace.com/bootstrap-themes/react-themes) from WeenSpace +- [Angular Products](https://www.weenspace.com/bootstrap-themes/angular-themes) from WeenSpace +- [VueJS Products](https://www.weenspace.com/bootstrap-themes/vuejs-themes) from WeenSpace +- [More products](https://www.weenspace.com/bootstrap-themes) from WeenSpace +- Check our Bundles [here](https://www.weenspace.com/bundles?ref="mk-github-readme") + +### Social Media + +Twitter: + +Facebook: + +Dribbble: + +Instagram: diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..75ed802 --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,13 @@ + + + diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b5b6f67 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 WeenSpace + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..b5b6f67 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 WeenSpace + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index df8377e..5424873 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,63 @@ -# react-material -ReactJS and Material UI +# [React Material](https://demos.weenspace.com/react-material) + +Quickly build beautiful [React](https://reactjs.org/) apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with [Material Design](https://material.io/design/introduction/). + + ![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/weenspace/react-material.svg?maxAge=2592000)](https://github.com/weenspace/react-material/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/weenspace/react-material.svg?maxAge=2592000)](https://github.com/weenspace/react-material/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/weenspace-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) + + +## Quick start + +Material-UI is available as an [npm package](https://www.npmjs.com/package/@weenspace/react-material). + +```sh +# Using yarn +yarn add @weenspace/react-material + +# Using npm +npm install @weenspace/react-material + +``` + +## Usage + +Here is a quick example to get you started, **it's all you need**: + +```jsx +import * as React from 'react'; +import ReactDOM from 'react-dom'; +import Button from '@weenspace/react-material/Button'; + +function App() { + return ; +} + +ReactDOM.render(, document.querySelector('#app')); +``` + +## Examples + +Are you looking for an example project to get started? + +## Documentation +The documentation for the React Material is hosted at our [website](https://demos.weenspace.com/react-material/#/documentation/tutorial). + +## Premium Themes + +## Changelog + +If you have recently updated, please read the [changelog](https://github.com/WeenSpace/react-material/releases) for details of what has changed. + +## Roadmap +## Reporting Issues + +We use GitHub Issues as the official bug tracker for the Material Kit. Here are some advices for our users that want to report an issue: + +1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our [website](https://www.weenspace.com/). +2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. +3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. + +## Licensing + +- Copyright 2021 WeenSpace (https://www.weenspace.com/) + +- Licensed under MIT (https://github.com/weenspace/react-material/blob/master/LICENSE.md) diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..c1a6c82 --- /dev/null +++ b/bower.json @@ -0,0 +1,25 @@ +{ + "name": "react-material", + "homepage": "https://github.com/WeenSpace/react-material", + "authors": [ + "WeenSpace" + ], + "description": "A Badass Material React UI Components on Material Design", + "main": "dist/index.js", + "keywords": [ + "material", + "design", + "material-ui", + "google", + "twitter" + ], + "license": "WeenSpace License", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "private": true +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..e8faa14 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,74 @@ +const gulp = require("gulp"); +const gap = require("gulp-append-prepend"); + +gulp.task("licenses", async function () { + // this is to add WeenSpace licenses in the production mode for the minified js + gulp + .src("build/static/js/*chunk.js", { base: "./" }) + .pipe( + gap.prependText(`/*! + +========================================================= +* React Material - v2.0.0 +========================================================= + +* Product Page: https://www.weenspace.com/product/now-ui-kit-pro-react +* Copyright 2021 WeenSpace (http://www.weenspace.com) + +* Coded by WeenSpace + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/`) + ) + .pipe(gulp.dest("./", { overwrite: true })); + + // this is to add WeenSpace licenses in the production mode for the minified html + gulp + .src("build/index.html", { base: "./" }) + .pipe( + gap.prependText(``) + ) + .pipe(gulp.dest("./", { overwrite: true })); + + // this is to add WeenSpace licenses in the production mode for the minified css + gulp + .src("build/static/css/*chunk.css", { base: "./" }) + .pipe( + gap.prependText(`/*! + +========================================================= +* React Material - v2.0.0 +========================================================= + +* Product Page: https://www.weenspace.com/product/now-ui-kit-pro-react +* Copyright 2021 WeenSpace (https://www.weenspace.com) + +* Coded by WeenSpace + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/`) + ) + .pipe(gulp.dest("./", { overwrite: true })); + return; +}); diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..256380f --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "baseUrl": "src", + "paths": { + "*": ["src/*"] + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..177518d --- /dev/null +++ b/package.json @@ -0,0 +1,89 @@ +{ + "homepage": "https://weenspace.github.io/react-material", + "name": "@weenspace/react-material", + "version": "1.0.0", + "description": "ReactJS Material UI coded by WeenSpace", + "private": false, + "main": "src/index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/WeenSpace/react-material.git" + }, + "author": "WeenSpace", + "bugs": { + "url": "https://github.com/WeenSpace/react-material" + }, + "keywords": [ + "react", + "material", + "react-components", + "material design" + ], + "license": "MIT", + "dependencies": { + "@babel/core": "7.14.0", + "@material-ui/core": "4.12.3", + "@material-ui/icons": "4.11.2", + "animate.css": "4.1.1", + "classnames": "2.3.1", + "google-maps-react": "^2.0.6", + "moment": "2.29.1", + "node-sass": "6.0.0", + "nouislider": "15.1.0", + "prop-types": "15.7.2", + "react": "17.0.2", + "react-animate-on-scroll": "2.1.5", + "react-datetime": "3.0.4", + "react-dom": "17.0.2", + "react-image-gallery": "1.2.7", + "react-router-dom": "5.2.0", + "react-scripts": "4.0.3", + "react-slick": "0.28.1", + "react-tagsinput": "3.19.0", + "typescript": "4.2.4" + }, + "devDependencies": { + "@babel/cli": "7.13.16", + "@babel/plugin-proposal-class-properties": "7.13.0", + "@babel/preset-env": "7.14.1", + "@babel/preset-react": "7.13.13", + "eslint-config-prettier": "8.3.0", + "eslint-plugin-prettier": "3.4.0", + "eslint-plugin-react": "7.23.2", + "gh-pages": "3.2.3", + "gulp": "4.0.2", + "gulp-append-prepend": "1.0.9", + "prettier": "2.3.0" + }, + "optionalDependencies": { + "typescript": "4.2.4" + }, + "engines": { + "node": ">=14.16.0 <15", + "npm": ">=6.14.0 <7" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [] + }, + "scripts": { + "predeploy": "npm run build", + "deploy-gh": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build && gulp licenses", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "lint:check": "eslint . --ext=js,jsx; exit 0", + "lint:fix": "eslint . --ext=js,jsx --fix; exit 0", + "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", + "build-package-css": "node-sass src/assets/scss/react-material.scss dist/react-material.css", + "build-package": "npm run build-package-css && babel src --out-dir dist", + "compile-sass": "node-sass src/assets/scss/react-material.scss src/assets/css/react-material.css", + "minify-sass": "node-sass src/assets/scss/react-material.scss src/assets/css/react-material.min.css --output-style compressed", + "map-sass": "node-sass src/assets/scss/react-material.scss src/assets/css/react-material.css --source-map true" + } +} diff --git a/public/apple-icon.png b/public/apple-icon.png new file mode 100644 index 0000000..fd94003 Binary files /dev/null and b/public/apple-icon.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..5f32edd Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..349cf0a --- /dev/null +++ b/public/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + React Material + + + +
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/assets/css/react-material.css.map b/src/assets/css/react-material.css.map new file mode 100644 index 0000000..81bd037 --- /dev/null +++ b/src/assets/css/react-material.css.map @@ -0,0 +1,28 @@ +{ + "version": 3, + "file": "react-material.css", + "sources": [ + "../scss/react-material.scss", + "../scss/core/_variables.scss", + "../scss/core/variables/_colors.scss", + "../scss/core/variables/_shadow.scss", + "../scss/core/variables/_bootstrap-material-design-base.scss", + "../scss/core/variables/_brand.scss", + "../scss/core/variables/_functions.scss", + "../scss/core/variables/_variables.scss", + "../scss/core/variables/_bootstrap-material-design.scss", + "../scss/core/_mixins.scss", + "../scss/core/mixins/_colored-shadows.scss", + "../scss/core/_fileupload.scss", + "../scss/core/_keyframes.scss", + "../scss/core/_misc.scss", + "../scss/plugins/_plugin-nouislider.scss", + "../scss/plugins/_plugin-react-datetime.scss", + "../scss/plugins/_plugin-react-image-gallery.scss", + "../../../node_modules/react-image-gallery/styles/scss/image-gallery.scss", + "../scss/plugins/_plugin-react-slick.scss", + "../scss/plugins/_plugin-react-tagsinput.scss" + ], + "names": [], + "mappings": "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" +} \ No newline at end of file diff --git a/src/assets/img/apple-icon.png b/src/assets/img/apple-icon.png new file mode 100644 index 0000000..fd94003 Binary files /dev/null and b/src/assets/img/apple-icon.png differ diff --git a/src/assets/img/arrow-left.cur b/src/assets/img/arrow-left.cur new file mode 100644 index 0000000..7325694 Binary files /dev/null and b/src/assets/img/arrow-left.cur differ diff --git a/src/assets/img/arrow-left.png b/src/assets/img/arrow-left.png new file mode 100644 index 0000000..9f05bb0 Binary files /dev/null and b/src/assets/img/arrow-left.png differ diff --git a/src/assets/img/arrow-right.cur b/src/assets/img/arrow-right.cur new file mode 100644 index 0000000..f74dff0 Binary files /dev/null and b/src/assets/img/arrow-right.cur differ diff --git a/src/assets/img/arrow-right.png b/src/assets/img/arrow-right.png new file mode 100644 index 0000000..a1940e3 Binary files /dev/null and b/src/assets/img/arrow-right.png differ diff --git a/src/assets/img/assets-for-demo/cards-test.png b/src/assets/img/assets-for-demo/cards-test.png new file mode 100644 index 0000000..0725b13 Binary files /dev/null and b/src/assets/img/assets-for-demo/cards-test.png differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-about-us.jpg b/src/assets/img/assets-for-demo/example-pages/ex-about-us.jpg new file mode 100644 index 0000000..3a27db3 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-about-us.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-blog-post.jpg b/src/assets/img/assets-for-demo/example-pages/ex-blog-post.jpg new file mode 100644 index 0000000..bb54909 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-blog-post.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-blog-posts.jpg b/src/assets/img/assets-for-demo/example-pages/ex-blog-posts.jpg new file mode 100644 index 0000000..7e42f0b Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-blog-posts.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-contact.jpg b/src/assets/img/assets-for-demo/example-pages/ex-contact.jpg new file mode 100644 index 0000000..bed2581 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-contact.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-landing.jpg b/src/assets/img/assets-for-demo/example-pages/ex-landing.jpg new file mode 100644 index 0000000..2fe0420 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-landing.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-login.jpg b/src/assets/img/assets-for-demo/example-pages/ex-login.jpg new file mode 100644 index 0000000..535cfa6 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-login.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-pricing.jpg b/src/assets/img/assets-for-demo/example-pages/ex-pricing.jpg new file mode 100644 index 0000000..6bc463a Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-pricing.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-product.jpg b/src/assets/img/assets-for-demo/example-pages/ex-product.jpg new file mode 100644 index 0000000..b120b47 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-product.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-profile.jpg b/src/assets/img/assets-for-demo/example-pages/ex-profile.jpg new file mode 100644 index 0000000..942ee4b Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-profile.jpg differ diff --git a/src/assets/img/assets-for-demo/example-pages/ex-register.jpg b/src/assets/img/assets-for-demo/example-pages/ex-register.jpg new file mode 100644 index 0000000..3ece369 Binary files /dev/null and b/src/assets/img/assets-for-demo/example-pages/ex-register.jpg differ diff --git a/src/assets/img/assets-for-demo/features-5.jpg b/src/assets/img/assets-for-demo/features-5.jpg new file mode 100644 index 0000000..d1fe4a8 Binary files /dev/null and b/src/assets/img/assets-for-demo/features-5.jpg differ diff --git a/src/assets/img/assets-for-demo/ourClients/harvard.jpg b/src/assets/img/assets-for-demo/ourClients/harvard.jpg new file mode 100644 index 0000000..eff4fd7 Binary files /dev/null and b/src/assets/img/assets-for-demo/ourClients/harvard.jpg differ diff --git a/src/assets/img/assets-for-demo/ourClients/microsoft.jpg b/src/assets/img/assets-for-demo/ourClients/microsoft.jpg new file mode 100644 index 0000000..8de1b30 Binary files /dev/null and b/src/assets/img/assets-for-demo/ourClients/microsoft.jpg differ diff --git a/src/assets/img/assets-for-demo/ourClients/stanford.jpg b/src/assets/img/assets-for-demo/ourClients/stanford.jpg new file mode 100644 index 0000000..e828d94 Binary files /dev/null and b/src/assets/img/assets-for-demo/ourClients/stanford.jpg differ diff --git a/src/assets/img/assets-for-demo/ourClients/vodafone.jpg b/src/assets/img/assets-for-demo/ourClients/vodafone.jpg new file mode 100644 index 0000000..2aece85 Binary files /dev/null and b/src/assets/img/assets-for-demo/ourClients/vodafone.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card-with-btn.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card-with-btn.jpg new file mode 100644 index 0000000..2e89264 Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card-with-btn.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card.jpg new file mode 100644 index 0000000..d626c6c Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/ipad-comments.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/ipad-comments.jpg new file mode 100644 index 0000000..4ae9350 Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/ipad-comments.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/ipad-table.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/ipad-table.jpg new file mode 100644 index 0000000..2eb432e Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/ipad-table.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/laptop-basics.png b/src/assets/img/assets-for-demo/presentationViewSectionComponent/laptop-basics.png new file mode 100644 index 0000000..142cb79 Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/laptop-basics.png differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/pin-btn.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/pin-btn.jpg new file mode 100644 index 0000000..b57d4fd Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/pin-btn.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/presentation-ipad.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/presentation-ipad.jpg new file mode 100644 index 0000000..9481525 Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/presentation-ipad.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/responsive.png b/src/assets/img/assets-for-demo/presentationViewSectionComponent/responsive.png new file mode 100644 index 0000000..eb028a1 Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/responsive.png differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/share-btn.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/share-btn.jpg new file mode 100644 index 0000000..08e6615 Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/share-btn.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/social-row.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/social-row.jpg new file mode 100644 index 0000000..8cfa38a Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/social-row.jpg differ diff --git a/src/assets/img/assets-for-demo/presentationViewSectionComponent/table.jpg b/src/assets/img/assets-for-demo/presentationViewSectionComponent/table.jpg new file mode 100644 index 0000000..66dc65d Binary files /dev/null and b/src/assets/img/assets-for-demo/presentationViewSectionComponent/table.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/b_1.jpg b/src/assets/img/assets-for-demo/sections/b_1.jpg new file mode 100644 index 0000000..9d5fadb Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/b_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/b_2.jpg b/src/assets/img/assets-for-demo/sections/b_2.jpg new file mode 100644 index 0000000..c460e76 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/b_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/b_3.jpg b/src/assets/img/assets-for-demo/sections/b_3.jpg new file mode 100644 index 0000000..11b8354 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/b_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/b_4.jpg b/src/assets/img/assets-for-demo/sections/b_4.jpg new file mode 100644 index 0000000..55eae8a Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/b_4.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/f_1.jpg b/src/assets/img/assets-for-demo/sections/f_1.jpg new file mode 100644 index 0000000..d1f9bd3 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/f_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/f_2.jpg b/src/assets/img/assets-for-demo/sections/f_2.jpg new file mode 100644 index 0000000..184b661 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/f_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/f_3.jpg b/src/assets/img/assets-for-demo/sections/f_3.jpg new file mode 100644 index 0000000..7594f49 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/f_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/f_4.jpg b/src/assets/img/assets-for-demo/sections/f_4.jpg new file mode 100644 index 0000000..0850bbb Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/f_4.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/f_5.jpg b/src/assets/img/assets-for-demo/sections/f_5.jpg new file mode 100644 index 0000000..0038b17 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/f_5.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/h_1.jpg b/src/assets/img/assets-for-demo/sections/h_1.jpg new file mode 100644 index 0000000..3cdf3f3 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/h_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/h_2.jpg b/src/assets/img/assets-for-demo/sections/h_2.jpg new file mode 100644 index 0000000..3e6918e Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/h_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/h_3.jpg b/src/assets/img/assets-for-demo/sections/h_3.jpg new file mode 100644 index 0000000..632ccb9 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/h_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/h_4.jpg b/src/assets/img/assets-for-demo/sections/h_4.jpg new file mode 100644 index 0000000..79c7222 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/h_4.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/imgs.js b/src/assets/img/assets-for-demo/sections/imgs.js new file mode 100644 index 0000000..abd87a2 --- /dev/null +++ b/src/assets/img/assets-for-demo/sections/imgs.js @@ -0,0 +1,12 @@ +const imgs = [ + ["h_1", "h_2", "h_3", "h_4"], + ["f_1", "f_2", "f_3", "f_4"], + ["f_5", "b_2", "b_3", "b_4"], + ["b_1", "p_2", "p_3", "p_4"], + ["p_5", "p_1", "pro_2", "pro_3"], + ["m_1", "pro_1", "t_2", "t_3"], + ["team_5", "team_1", "team_2", "team_3"], + ["t_1", "team_4", "pro_4", "m_2"], +]; + +export default imgs; diff --git a/src/assets/img/assets-for-demo/sections/m_1.jpg b/src/assets/img/assets-for-demo/sections/m_1.jpg new file mode 100644 index 0000000..ba8ead1 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/m_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/m_2.jpg b/src/assets/img/assets-for-demo/sections/m_2.jpg new file mode 100644 index 0000000..81eda1a Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/m_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/p_1.jpg b/src/assets/img/assets-for-demo/sections/p_1.jpg new file mode 100644 index 0000000..425b0d0 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/p_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/p_2.jpg b/src/assets/img/assets-for-demo/sections/p_2.jpg new file mode 100644 index 0000000..042ab32 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/p_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/p_3.jpg b/src/assets/img/assets-for-demo/sections/p_3.jpg new file mode 100644 index 0000000..4b90e90 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/p_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/p_4.jpg b/src/assets/img/assets-for-demo/sections/p_4.jpg new file mode 100644 index 0000000..b14849c Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/p_4.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/p_5.jpg b/src/assets/img/assets-for-demo/sections/p_5.jpg new file mode 100644 index 0000000..9acb3b3 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/p_5.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/pro_1.jpg b/src/assets/img/assets-for-demo/sections/pro_1.jpg new file mode 100644 index 0000000..8c9a369 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/pro_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/pro_2.jpg b/src/assets/img/assets-for-demo/sections/pro_2.jpg new file mode 100644 index 0000000..51fbfb6 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/pro_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/pro_3.jpg b/src/assets/img/assets-for-demo/sections/pro_3.jpg new file mode 100644 index 0000000..5707d9d Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/pro_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/pro_4.jpg b/src/assets/img/assets-for-demo/sections/pro_4.jpg new file mode 100644 index 0000000..9c466df Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/pro_4.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/t_1.jpg b/src/assets/img/assets-for-demo/sections/t_1.jpg new file mode 100644 index 0000000..8c7a778 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/t_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/t_2.jpg b/src/assets/img/assets-for-demo/sections/t_2.jpg new file mode 100644 index 0000000..2b8e4fc Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/t_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/t_3.jpg b/src/assets/img/assets-for-demo/sections/t_3.jpg new file mode 100644 index 0000000..98aa704 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/t_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/team_1.jpg b/src/assets/img/assets-for-demo/sections/team_1.jpg new file mode 100644 index 0000000..49fed3c Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/team_1.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/team_2.jpg b/src/assets/img/assets-for-demo/sections/team_2.jpg new file mode 100644 index 0000000..b0505f3 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/team_2.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/team_3.jpg b/src/assets/img/assets-for-demo/sections/team_3.jpg new file mode 100644 index 0000000..e654d2e Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/team_3.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/team_4.jpg b/src/assets/img/assets-for-demo/sections/team_4.jpg new file mode 100644 index 0000000..b046588 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/team_4.jpg differ diff --git a/src/assets/img/assets-for-demo/sections/team_5.jpg b/src/assets/img/assets-for-demo/sections/team_5.jpg new file mode 100644 index 0000000..2946355 Binary files /dev/null and b/src/assets/img/assets-for-demo/sections/team_5.jpg differ diff --git a/src/assets/img/assets-for-demo/test1.jpg b/src/assets/img/assets-for-demo/test1.jpg new file mode 100644 index 0000000..983be32 Binary files /dev/null and b/src/assets/img/assets-for-demo/test1.jpg differ diff --git a/src/assets/img/assets-for-demo/test2.jpg b/src/assets/img/assets-for-demo/test2.jpg new file mode 100644 index 0000000..ecdcc2f Binary files /dev/null and b/src/assets/img/assets-for-demo/test2.jpg differ diff --git a/src/assets/img/assets-for-demo/test3.jpg b/src/assets/img/assets-for-demo/test3.jpg new file mode 100644 index 0000000..1e73922 Binary files /dev/null and b/src/assets/img/assets-for-demo/test3.jpg differ diff --git a/src/assets/img/bg.jpg b/src/assets/img/bg.jpg new file mode 100644 index 0000000..fe8ec2a Binary files /dev/null and b/src/assets/img/bg.jpg differ diff --git a/src/assets/img/bg0.jpg b/src/assets/img/bg0.jpg new file mode 100644 index 0000000..4b3d5f8 Binary files /dev/null and b/src/assets/img/bg0.jpg differ diff --git a/src/assets/img/bg10.jpg b/src/assets/img/bg10.jpg new file mode 100644 index 0000000..424358e Binary files /dev/null and b/src/assets/img/bg10.jpg differ diff --git a/src/assets/img/bg11.jpg b/src/assets/img/bg11.jpg new file mode 100644 index 0000000..75715dd Binary files /dev/null and b/src/assets/img/bg11.jpg differ diff --git a/src/assets/img/bg12.jpg b/src/assets/img/bg12.jpg new file mode 100644 index 0000000..c4ba5df Binary files /dev/null and b/src/assets/img/bg12.jpg differ diff --git a/src/assets/img/bg2.jpg b/src/assets/img/bg2.jpg new file mode 100644 index 0000000..0ac6c05 Binary files /dev/null and b/src/assets/img/bg2.jpg differ diff --git a/src/assets/img/bg3.jpg b/src/assets/img/bg3.jpg new file mode 100644 index 0000000..218da7f Binary files /dev/null and b/src/assets/img/bg3.jpg differ diff --git a/src/assets/img/bg4.jpg b/src/assets/img/bg4.jpg new file mode 100644 index 0000000..9292df2 Binary files /dev/null and b/src/assets/img/bg4.jpg differ diff --git a/src/assets/img/bg5.jpg b/src/assets/img/bg5.jpg new file mode 100644 index 0000000..58350f5 Binary files /dev/null and b/src/assets/img/bg5.jpg differ diff --git a/src/assets/img/bg6.jpg b/src/assets/img/bg6.jpg new file mode 100644 index 0000000..73251ba Binary files /dev/null and b/src/assets/img/bg6.jpg differ diff --git a/src/assets/img/bg7.jpg b/src/assets/img/bg7.jpg new file mode 100644 index 0000000..5936563 Binary files /dev/null and b/src/assets/img/bg7.jpg differ diff --git a/src/assets/img/bg8.jpg b/src/assets/img/bg8.jpg new file mode 100644 index 0000000..939afea Binary files /dev/null and b/src/assets/img/bg8.jpg differ diff --git a/src/assets/img/bg9.jpg b/src/assets/img/bg9.jpg new file mode 100644 index 0000000..a29b720 Binary files /dev/null and b/src/assets/img/bg9.jpg differ diff --git a/src/assets/img/clint-mckoy.jpg b/src/assets/img/clint-mckoy.jpg new file mode 100644 index 0000000..b16d116 Binary files /dev/null and b/src/assets/img/clint-mckoy.jpg differ diff --git a/src/assets/img/dg1.jpg b/src/assets/img/dg1.jpg new file mode 100644 index 0000000..f03004c Binary files /dev/null and b/src/assets/img/dg1.jpg differ diff --git a/src/assets/img/dg10.jpg b/src/assets/img/dg10.jpg new file mode 100644 index 0000000..4ee22ad Binary files /dev/null and b/src/assets/img/dg10.jpg differ diff --git a/src/assets/img/dg2.jpg b/src/assets/img/dg2.jpg new file mode 100644 index 0000000..a22aea3 Binary files /dev/null and b/src/assets/img/dg2.jpg differ diff --git a/src/assets/img/dg3.jpg b/src/assets/img/dg3.jpg new file mode 100644 index 0000000..7a23959 Binary files /dev/null and b/src/assets/img/dg3.jpg differ diff --git a/src/assets/img/dg6.jpg b/src/assets/img/dg6.jpg new file mode 100644 index 0000000..0261586 Binary files /dev/null and b/src/assets/img/dg6.jpg differ diff --git a/src/assets/img/dg9.jpg b/src/assets/img/dg9.jpg new file mode 100644 index 0000000..1598623 Binary files /dev/null and b/src/assets/img/dg9.jpg differ diff --git a/src/assets/img/examples/bg2.jpg b/src/assets/img/examples/bg2.jpg new file mode 100644 index 0000000..bcbd053 Binary files /dev/null and b/src/assets/img/examples/bg2.jpg differ diff --git a/src/assets/img/examples/blog1.jpg b/src/assets/img/examples/blog1.jpg new file mode 100644 index 0000000..dec570a Binary files /dev/null and b/src/assets/img/examples/blog1.jpg differ diff --git a/src/assets/img/examples/blog2.jpg b/src/assets/img/examples/blog2.jpg new file mode 100644 index 0000000..d05e511 Binary files /dev/null and b/src/assets/img/examples/blog2.jpg differ diff --git a/src/assets/img/examples/blog3.jpg b/src/assets/img/examples/blog3.jpg new file mode 100644 index 0000000..640e7e3 Binary files /dev/null and b/src/assets/img/examples/blog3.jpg differ diff --git a/src/assets/img/examples/blog4.jpg b/src/assets/img/examples/blog4.jpg new file mode 100644 index 0000000..24f0f4e Binary files /dev/null and b/src/assets/img/examples/blog4.jpg differ diff --git a/src/assets/img/examples/blog5.jpg b/src/assets/img/examples/blog5.jpg new file mode 100644 index 0000000..41aac59 Binary files /dev/null and b/src/assets/img/examples/blog5.jpg differ diff --git a/src/assets/img/examples/blog6.jpg b/src/assets/img/examples/blog6.jpg new file mode 100644 index 0000000..494bcf0 Binary files /dev/null and b/src/assets/img/examples/blog6.jpg differ diff --git a/src/assets/img/examples/blog7.jpg b/src/assets/img/examples/blog7.jpg new file mode 100644 index 0000000..992e633 Binary files /dev/null and b/src/assets/img/examples/blog7.jpg differ diff --git a/src/assets/img/examples/blog8.jpg b/src/assets/img/examples/blog8.jpg new file mode 100644 index 0000000..b6c6a1b Binary files /dev/null and b/src/assets/img/examples/blog8.jpg differ diff --git a/src/assets/img/examples/card-blog1.jpg b/src/assets/img/examples/card-blog1.jpg new file mode 100644 index 0000000..1fc25da Binary files /dev/null and b/src/assets/img/examples/card-blog1.jpg differ diff --git a/src/assets/img/examples/card-blog2.jpg b/src/assets/img/examples/card-blog2.jpg new file mode 100644 index 0000000..ecf61fb Binary files /dev/null and b/src/assets/img/examples/card-blog2.jpg differ diff --git a/src/assets/img/examples/card-blog3.jpg b/src/assets/img/examples/card-blog3.jpg new file mode 100644 index 0000000..3b55d91 Binary files /dev/null and b/src/assets/img/examples/card-blog3.jpg differ diff --git a/src/assets/img/examples/card-blog4.jpg b/src/assets/img/examples/card-blog4.jpg new file mode 100644 index 0000000..45db5e9 Binary files /dev/null and b/src/assets/img/examples/card-blog4.jpg differ diff --git a/src/assets/img/examples/card-blog5.jpg b/src/assets/img/examples/card-blog5.jpg new file mode 100644 index 0000000..f53ed4d Binary files /dev/null and b/src/assets/img/examples/card-blog5.jpg differ diff --git a/src/assets/img/examples/card-blog6.jpg b/src/assets/img/examples/card-blog6.jpg new file mode 100644 index 0000000..1050308 Binary files /dev/null and b/src/assets/img/examples/card-blog6.jpg differ diff --git a/src/assets/img/examples/card-blog8.jpg b/src/assets/img/examples/card-blog8.jpg new file mode 100644 index 0000000..e623fa8 Binary files /dev/null and b/src/assets/img/examples/card-blog8.jpg differ diff --git a/src/assets/img/examples/card-product1.jpg b/src/assets/img/examples/card-product1.jpg new file mode 100644 index 0000000..033cb83 Binary files /dev/null and b/src/assets/img/examples/card-product1.jpg differ diff --git a/src/assets/img/examples/card-product2.jpg b/src/assets/img/examples/card-product2.jpg new file mode 100644 index 0000000..0eabb8b Binary files /dev/null and b/src/assets/img/examples/card-product2.jpg differ diff --git a/src/assets/img/examples/card-product3.jpg b/src/assets/img/examples/card-product3.jpg new file mode 100644 index 0000000..a0c0800 Binary files /dev/null and b/src/assets/img/examples/card-product3.jpg differ diff --git a/src/assets/img/examples/card-product4.jpg b/src/assets/img/examples/card-product4.jpg new file mode 100644 index 0000000..2056b50 Binary files /dev/null and b/src/assets/img/examples/card-product4.jpg differ diff --git a/src/assets/img/examples/card-profile1.jpg b/src/assets/img/examples/card-profile1.jpg new file mode 100644 index 0000000..21ea18c Binary files /dev/null and b/src/assets/img/examples/card-profile1.jpg differ diff --git a/src/assets/img/examples/card-profile2.jpg b/src/assets/img/examples/card-profile2.jpg new file mode 100644 index 0000000..5fddf83 Binary files /dev/null and b/src/assets/img/examples/card-profile2.jpg differ diff --git a/src/assets/img/examples/card-profile4.jpg b/src/assets/img/examples/card-profile4.jpg new file mode 100644 index 0000000..e09a622 Binary files /dev/null and b/src/assets/img/examples/card-profile4.jpg differ diff --git a/src/assets/img/examples/card-profile5.jpg b/src/assets/img/examples/card-profile5.jpg new file mode 100644 index 0000000..bfc355f Binary files /dev/null and b/src/assets/img/examples/card-profile5.jpg differ diff --git a/src/assets/img/examples/card-profile6.jpg b/src/assets/img/examples/card-profile6.jpg new file mode 100644 index 0000000..5026125 Binary files /dev/null and b/src/assets/img/examples/card-profile6.jpg differ diff --git a/src/assets/img/examples/card-profile7.jpg b/src/assets/img/examples/card-profile7.jpg new file mode 100644 index 0000000..0d540e3 Binary files /dev/null and b/src/assets/img/examples/card-profile7.jpg differ diff --git a/src/assets/img/examples/card-project1.jpg b/src/assets/img/examples/card-project1.jpg new file mode 100644 index 0000000..2b0561e Binary files /dev/null and b/src/assets/img/examples/card-project1.jpg differ diff --git a/src/assets/img/examples/card-project2.jpg b/src/assets/img/examples/card-project2.jpg new file mode 100644 index 0000000..948c787 Binary files /dev/null and b/src/assets/img/examples/card-project2.jpg differ diff --git a/src/assets/img/examples/card-project3.jpg b/src/assets/img/examples/card-project3.jpg new file mode 100644 index 0000000..ea844da Binary files /dev/null and b/src/assets/img/examples/card-project3.jpg differ diff --git a/src/assets/img/examples/card-project4.jpg b/src/assets/img/examples/card-project4.jpg new file mode 100644 index 0000000..e51bf7f Binary files /dev/null and b/src/assets/img/examples/card-project4.jpg differ diff --git a/src/assets/img/examples/card-project5.jpg b/src/assets/img/examples/card-project5.jpg new file mode 100644 index 0000000..6ebd471 Binary files /dev/null and b/src/assets/img/examples/card-project5.jpg differ diff --git a/src/assets/img/examples/card-project6.jpg b/src/assets/img/examples/card-project6.jpg new file mode 100644 index 0000000..dc39a66 Binary files /dev/null and b/src/assets/img/examples/card-project6.jpg differ diff --git a/src/assets/img/examples/city.jpg b/src/assets/img/examples/city.jpg new file mode 100644 index 0000000..7fcd1a9 Binary files /dev/null and b/src/assets/img/examples/city.jpg differ diff --git a/src/assets/img/examples/clark-street-merc.jpg b/src/assets/img/examples/clark-street-merc.jpg new file mode 100644 index 0000000..aa335ba Binary files /dev/null and b/src/assets/img/examples/clark-street-merc.jpg differ diff --git a/src/assets/img/examples/clem-onojegaw.jpg b/src/assets/img/examples/clem-onojegaw.jpg new file mode 100644 index 0000000..1291ce3 Binary files /dev/null and b/src/assets/img/examples/clem-onojegaw.jpg differ diff --git a/src/assets/img/examples/clem-onojeghuo.jpg b/src/assets/img/examples/clem-onojeghuo.jpg new file mode 100644 index 0000000..c161af0 Binary files /dev/null and b/src/assets/img/examples/clem-onojeghuo.jpg differ diff --git a/src/assets/img/examples/clem-onojeghuou.jpg b/src/assets/img/examples/clem-onojeghuou.jpg new file mode 100644 index 0000000..5d60511 Binary files /dev/null and b/src/assets/img/examples/clem-onojeghuou.jpg differ diff --git a/src/assets/img/examples/color1.jpg b/src/assets/img/examples/color1.jpg new file mode 100644 index 0000000..9d9fe46 Binary files /dev/null and b/src/assets/img/examples/color1.jpg differ diff --git a/src/assets/img/examples/color2.jpg b/src/assets/img/examples/color2.jpg new file mode 100644 index 0000000..465d0ea Binary files /dev/null and b/src/assets/img/examples/color2.jpg differ diff --git a/src/assets/img/examples/color3.jpg b/src/assets/img/examples/color3.jpg new file mode 100644 index 0000000..db407e5 Binary files /dev/null and b/src/assets/img/examples/color3.jpg differ diff --git a/src/assets/img/examples/cynthia-del-rio.jpg b/src/assets/img/examples/cynthia-del-rio.jpg new file mode 100644 index 0000000..e051afa Binary files /dev/null and b/src/assets/img/examples/cynthia-del-rio.jpg differ diff --git a/src/assets/img/examples/darren-coleshill.jpg b/src/assets/img/examples/darren-coleshill.jpg new file mode 100644 index 0000000..27394bd Binary files /dev/null and b/src/assets/img/examples/darren-coleshill.jpg differ diff --git a/src/assets/img/examples/dolce.jpg b/src/assets/img/examples/dolce.jpg new file mode 100644 index 0000000..4fdd715 Binary files /dev/null and b/src/assets/img/examples/dolce.jpg differ diff --git a/src/assets/img/examples/ecommerce-header.jpg b/src/assets/img/examples/ecommerce-header.jpg new file mode 100644 index 0000000..a838e2e Binary files /dev/null and b/src/assets/img/examples/ecommerce-header.jpg differ diff --git a/src/assets/img/examples/ecommerce-tips2.jpg b/src/assets/img/examples/ecommerce-tips2.jpg new file mode 100644 index 0000000..468b6bb Binary files /dev/null and b/src/assets/img/examples/ecommerce-tips2.jpg differ diff --git a/src/assets/img/examples/gucci.jpg b/src/assets/img/examples/gucci.jpg new file mode 100644 index 0000000..e348e32 Binary files /dev/null and b/src/assets/img/examples/gucci.jpg differ diff --git a/src/assets/img/examples/mariya-georgieva.jpg b/src/assets/img/examples/mariya-georgieva.jpg new file mode 100644 index 0000000..50d5b3a Binary files /dev/null and b/src/assets/img/examples/mariya-georgieva.jpg differ diff --git a/src/assets/img/examples/office1.jpg b/src/assets/img/examples/office1.jpg new file mode 100644 index 0000000..6c40b35 Binary files /dev/null and b/src/assets/img/examples/office1.jpg differ diff --git a/src/assets/img/examples/office2.jpg b/src/assets/img/examples/office2.jpg new file mode 100644 index 0000000..c0ff963 Binary files /dev/null and b/src/assets/img/examples/office2.jpg differ diff --git a/src/assets/img/examples/office3.jpg b/src/assets/img/examples/office3.jpg new file mode 100644 index 0000000..303bdc7 Binary files /dev/null and b/src/assets/img/examples/office3.jpg differ diff --git a/src/assets/img/examples/office4.jpg b/src/assets/img/examples/office4.jpg new file mode 100644 index 0000000..dc417d7 Binary files /dev/null and b/src/assets/img/examples/office4.jpg differ diff --git a/src/assets/img/examples/office5.jpg b/src/assets/img/examples/office5.jpg new file mode 100644 index 0000000..8831151 Binary files /dev/null and b/src/assets/img/examples/office5.jpg differ diff --git a/src/assets/img/examples/olu-eletu.jpg b/src/assets/img/examples/olu-eletu.jpg new file mode 100644 index 0000000..02de576 Binary files /dev/null and b/src/assets/img/examples/olu-eletu.jpg differ diff --git a/src/assets/img/examples/product1.jpg b/src/assets/img/examples/product1.jpg new file mode 100644 index 0000000..929beed Binary files /dev/null and b/src/assets/img/examples/product1.jpg differ diff --git a/src/assets/img/examples/product2.jpg b/src/assets/img/examples/product2.jpg new file mode 100644 index 0000000..a4a1398 Binary files /dev/null and b/src/assets/img/examples/product2.jpg differ diff --git a/src/assets/img/examples/product3.jpg b/src/assets/img/examples/product3.jpg new file mode 100644 index 0000000..cb88eac Binary files /dev/null and b/src/assets/img/examples/product3.jpg differ diff --git a/src/assets/img/examples/product4.jpg b/src/assets/img/examples/product4.jpg new file mode 100644 index 0000000..2e4472a Binary files /dev/null and b/src/assets/img/examples/product4.jpg differ diff --git a/src/assets/img/examples/profile_city.jpg b/src/assets/img/examples/profile_city.jpg new file mode 100644 index 0000000..d3eb323 Binary files /dev/null and b/src/assets/img/examples/profile_city.jpg differ diff --git a/src/assets/img/examples/slim-emcee-ug-the-poet-truth_from_africa_photography.jpg b/src/assets/img/examples/slim-emcee-ug-the-poet-truth_from_africa_photography.jpg new file mode 100644 index 0000000..17144f8 Binary files /dev/null and b/src/assets/img/examples/slim-emcee-ug-the-poet-truth_from_africa_photography.jpg differ diff --git a/src/assets/img/examples/studio-1.jpg b/src/assets/img/examples/studio-1.jpg new file mode 100644 index 0000000..8bdaac5 Binary files /dev/null and b/src/assets/img/examples/studio-1.jpg differ diff --git a/src/assets/img/examples/studio-2.jpg b/src/assets/img/examples/studio-2.jpg new file mode 100644 index 0000000..e1a2f07 Binary files /dev/null and b/src/assets/img/examples/studio-2.jpg differ diff --git a/src/assets/img/examples/studio-3.jpg b/src/assets/img/examples/studio-3.jpg new file mode 100644 index 0000000..ef5a4f5 Binary files /dev/null and b/src/assets/img/examples/studio-3.jpg differ diff --git a/src/assets/img/examples/studio-4.jpg b/src/assets/img/examples/studio-4.jpg new file mode 100644 index 0000000..465c163 Binary files /dev/null and b/src/assets/img/examples/studio-4.jpg differ diff --git a/src/assets/img/examples/studio-5.jpg b/src/assets/img/examples/studio-5.jpg new file mode 100644 index 0000000..ab453f9 Binary files /dev/null and b/src/assets/img/examples/studio-5.jpg differ diff --git a/src/assets/img/examples/suit-1.jpg b/src/assets/img/examples/suit-1.jpg new file mode 100644 index 0000000..e452c8c Binary files /dev/null and b/src/assets/img/examples/suit-1.jpg differ diff --git a/src/assets/img/examples/suit-2.jpg b/src/assets/img/examples/suit-2.jpg new file mode 100644 index 0000000..ee22d4e Binary files /dev/null and b/src/assets/img/examples/suit-2.jpg differ diff --git a/src/assets/img/examples/suit-3.jpg b/src/assets/img/examples/suit-3.jpg new file mode 100644 index 0000000..672ec7f Binary files /dev/null and b/src/assets/img/examples/suit-3.jpg differ diff --git a/src/assets/img/examples/suit-4.jpg b/src/assets/img/examples/suit-4.jpg new file mode 100644 index 0000000..fdd236a Binary files /dev/null and b/src/assets/img/examples/suit-4.jpg differ diff --git a/src/assets/img/examples/suit-5.jpg b/src/assets/img/examples/suit-5.jpg new file mode 100644 index 0000000..0d464f8 Binary files /dev/null and b/src/assets/img/examples/suit-5.jpg differ diff --git a/src/assets/img/examples/suit-6.jpg b/src/assets/img/examples/suit-6.jpg new file mode 100644 index 0000000..cc0de64 Binary files /dev/null and b/src/assets/img/examples/suit-6.jpg differ diff --git a/src/assets/img/examples/tom-ford.jpg b/src/assets/img/examples/tom-ford.jpg new file mode 100644 index 0000000..877077c Binary files /dev/null and b/src/assets/img/examples/tom-ford.jpg differ diff --git a/src/assets/img/faces/avatar.jpg b/src/assets/img/faces/avatar.jpg new file mode 100644 index 0000000..c66a5b9 Binary files /dev/null and b/src/assets/img/faces/avatar.jpg differ diff --git a/src/assets/img/faces/camp.jpg b/src/assets/img/faces/camp.jpg new file mode 100644 index 0000000..07d52df Binary files /dev/null and b/src/assets/img/faces/camp.jpg differ diff --git a/src/assets/img/faces/card-profile1-square.jpg b/src/assets/img/faces/card-profile1-square.jpg new file mode 100644 index 0000000..2d6288e Binary files /dev/null and b/src/assets/img/faces/card-profile1-square.jpg differ diff --git a/src/assets/img/faces/card-profile2-square.jpg b/src/assets/img/faces/card-profile2-square.jpg new file mode 100644 index 0000000..d2fc099 Binary files /dev/null and b/src/assets/img/faces/card-profile2-square.jpg differ diff --git a/src/assets/img/faces/card-profile4-square.jpg b/src/assets/img/faces/card-profile4-square.jpg new file mode 100644 index 0000000..a9da8c8 Binary files /dev/null and b/src/assets/img/faces/card-profile4-square.jpg differ diff --git a/src/assets/img/faces/card-profile5-square.jpg b/src/assets/img/faces/card-profile5-square.jpg new file mode 100644 index 0000000..bdbb362 Binary files /dev/null and b/src/assets/img/faces/card-profile5-square.jpg differ diff --git a/src/assets/img/faces/card-profile6-square.jpg b/src/assets/img/faces/card-profile6-square.jpg new file mode 100644 index 0000000..4a00e6c Binary files /dev/null and b/src/assets/img/faces/card-profile6-square.jpg differ diff --git a/src/assets/img/faces/christian.jpg b/src/assets/img/faces/christian.jpg new file mode 100644 index 0000000..357ea73 Binary files /dev/null and b/src/assets/img/faces/christian.jpg differ diff --git a/src/assets/img/faces/kendall.jpg b/src/assets/img/faces/kendall.jpg new file mode 100644 index 0000000..63becfb Binary files /dev/null and b/src/assets/img/faces/kendall.jpg differ diff --git a/src/assets/img/faces/marc.jpg b/src/assets/img/faces/marc.jpg new file mode 100644 index 0000000..8ee40d3 Binary files /dev/null and b/src/assets/img/faces/marc.jpg differ diff --git a/src/assets/img/favicon.png b/src/assets/img/favicon.png new file mode 100644 index 0000000..5aab9a0 Binary files /dev/null and b/src/assets/img/favicon.png differ diff --git a/src/assets/img/flags/AD.png b/src/assets/img/flags/AD.png new file mode 100644 index 0000000..df49c85 Binary files /dev/null and b/src/assets/img/flags/AD.png differ diff --git a/src/assets/img/flags/AE.png b/src/assets/img/flags/AE.png new file mode 100644 index 0000000..7fa1c7a Binary files /dev/null and b/src/assets/img/flags/AE.png differ diff --git a/src/assets/img/flags/AG.png b/src/assets/img/flags/AG.png new file mode 100644 index 0000000..23196fa Binary files /dev/null and b/src/assets/img/flags/AG.png differ diff --git a/src/assets/img/flags/AM.png b/src/assets/img/flags/AM.png new file mode 100644 index 0000000..1a0e61d Binary files /dev/null and b/src/assets/img/flags/AM.png differ diff --git a/src/assets/img/flags/AR.png b/src/assets/img/flags/AR.png new file mode 100644 index 0000000..7c258a5 Binary files /dev/null and b/src/assets/img/flags/AR.png differ diff --git a/src/assets/img/flags/AT.png b/src/assets/img/flags/AT.png new file mode 100644 index 0000000..d13a8e1 Binary files /dev/null and b/src/assets/img/flags/AT.png differ diff --git a/src/assets/img/flags/AU.png b/src/assets/img/flags/AU.png new file mode 100644 index 0000000..8e63f7f Binary files /dev/null and b/src/assets/img/flags/AU.png differ diff --git a/src/assets/img/flags/BE.png b/src/assets/img/flags/BE.png new file mode 100644 index 0000000..8762072 Binary files /dev/null and b/src/assets/img/flags/BE.png differ diff --git a/src/assets/img/flags/BF.png b/src/assets/img/flags/BF.png new file mode 100644 index 0000000..0a9c236 Binary files /dev/null and b/src/assets/img/flags/BF.png differ diff --git a/src/assets/img/flags/BG.png b/src/assets/img/flags/BG.png new file mode 100644 index 0000000..eb6c13c Binary files /dev/null and b/src/assets/img/flags/BG.png differ diff --git a/src/assets/img/flags/BO.png b/src/assets/img/flags/BO.png new file mode 100644 index 0000000..a2dbfbc Binary files /dev/null and b/src/assets/img/flags/BO.png differ diff --git a/src/assets/img/flags/BR.png b/src/assets/img/flags/BR.png new file mode 100644 index 0000000..0447540 Binary files /dev/null and b/src/assets/img/flags/BR.png differ diff --git a/src/assets/img/flags/CA.png b/src/assets/img/flags/CA.png new file mode 100644 index 0000000..273cf7a Binary files /dev/null and b/src/assets/img/flags/CA.png differ diff --git a/src/assets/img/flags/CD.png b/src/assets/img/flags/CD.png new file mode 100644 index 0000000..43d4b86 Binary files /dev/null and b/src/assets/img/flags/CD.png differ diff --git a/src/assets/img/flags/CG.png b/src/assets/img/flags/CG.png new file mode 100644 index 0000000..ec2ce3a Binary files /dev/null and b/src/assets/img/flags/CG.png differ diff --git a/src/assets/img/flags/CH.png b/src/assets/img/flags/CH.png new file mode 100644 index 0000000..eb92344 Binary files /dev/null and b/src/assets/img/flags/CH.png differ diff --git a/src/assets/img/flags/CL.png b/src/assets/img/flags/CL.png new file mode 100644 index 0000000..fe3733d Binary files /dev/null and b/src/assets/img/flags/CL.png differ diff --git a/src/assets/img/flags/CM.png b/src/assets/img/flags/CM.png new file mode 100644 index 0000000..9be54c1 Binary files /dev/null and b/src/assets/img/flags/CM.png differ diff --git a/src/assets/img/flags/CN.png b/src/assets/img/flags/CN.png new file mode 100644 index 0000000..3e420a7 Binary files /dev/null and b/src/assets/img/flags/CN.png differ diff --git a/src/assets/img/flags/CO.png b/src/assets/img/flags/CO.png new file mode 100644 index 0000000..2860e60 Binary files /dev/null and b/src/assets/img/flags/CO.png differ diff --git a/src/assets/img/flags/CZ.png b/src/assets/img/flags/CZ.png new file mode 100644 index 0000000..4ba7b9e Binary files /dev/null and b/src/assets/img/flags/CZ.png differ diff --git a/src/assets/img/flags/DE.png b/src/assets/img/flags/DE.png new file mode 100644 index 0000000..23a407b Binary files /dev/null and b/src/assets/img/flags/DE.png differ diff --git a/src/assets/img/flags/DJ.png b/src/assets/img/flags/DJ.png new file mode 100644 index 0000000..f1d3b3a Binary files /dev/null and b/src/assets/img/flags/DJ.png differ diff --git a/src/assets/img/flags/DK.png b/src/assets/img/flags/DK.png new file mode 100644 index 0000000..0e35509 Binary files /dev/null and b/src/assets/img/flags/DK.png differ diff --git a/src/assets/img/flags/DZ.png b/src/assets/img/flags/DZ.png new file mode 100644 index 0000000..32b377b Binary files /dev/null and b/src/assets/img/flags/DZ.png differ diff --git a/src/assets/img/flags/EE.png b/src/assets/img/flags/EE.png new file mode 100644 index 0000000..d8d2fd0 Binary files /dev/null and b/src/assets/img/flags/EE.png differ diff --git a/src/assets/img/flags/EG.png b/src/assets/img/flags/EG.png new file mode 100644 index 0000000..073520a Binary files /dev/null and b/src/assets/img/flags/EG.png differ diff --git a/src/assets/img/flags/ES.png b/src/assets/img/flags/ES.png new file mode 100644 index 0000000..4e456a2 Binary files /dev/null and b/src/assets/img/flags/ES.png differ diff --git a/src/assets/img/flags/FI.png b/src/assets/img/flags/FI.png new file mode 100644 index 0000000..7a623b0 Binary files /dev/null and b/src/assets/img/flags/FI.png differ diff --git a/src/assets/img/flags/FR.png b/src/assets/img/flags/FR.png new file mode 100644 index 0000000..cb92d12 Binary files /dev/null and b/src/assets/img/flags/FR.png differ diff --git a/src/assets/img/flags/GA.png b/src/assets/img/flags/GA.png new file mode 100644 index 0000000..743fa94 Binary files /dev/null and b/src/assets/img/flags/GA.png differ diff --git a/src/assets/img/flags/GB.png b/src/assets/img/flags/GB.png new file mode 100644 index 0000000..04019f5 Binary files /dev/null and b/src/assets/img/flags/GB.png differ diff --git a/src/assets/img/flags/GM.png b/src/assets/img/flags/GM.png new file mode 100644 index 0000000..88335ad Binary files /dev/null and b/src/assets/img/flags/GM.png differ diff --git a/src/assets/img/flags/GT.png b/src/assets/img/flags/GT.png new file mode 100644 index 0000000..2421118 Binary files /dev/null and b/src/assets/img/flags/GT.png differ diff --git a/src/assets/img/flags/HN.png b/src/assets/img/flags/HN.png new file mode 100644 index 0000000..99a5f47 Binary files /dev/null and b/src/assets/img/flags/HN.png differ diff --git a/src/assets/img/flags/HT.png b/src/assets/img/flags/HT.png new file mode 100644 index 0000000..be491ac Binary files /dev/null and b/src/assets/img/flags/HT.png differ diff --git a/src/assets/img/flags/HU.png b/src/assets/img/flags/HU.png new file mode 100644 index 0000000..6272c8e Binary files /dev/null and b/src/assets/img/flags/HU.png differ diff --git a/src/assets/img/flags/ID.png b/src/assets/img/flags/ID.png new file mode 100644 index 0000000..3c7045d Binary files /dev/null and b/src/assets/img/flags/ID.png differ diff --git a/src/assets/img/flags/IE.png b/src/assets/img/flags/IE.png new file mode 100644 index 0000000..c778368 Binary files /dev/null and b/src/assets/img/flags/IE.png differ diff --git a/src/assets/img/flags/IL.png b/src/assets/img/flags/IL.png new file mode 100644 index 0000000..72ae59d Binary files /dev/null and b/src/assets/img/flags/IL.png differ diff --git a/src/assets/img/flags/IN.png b/src/assets/img/flags/IN.png new file mode 100644 index 0000000..c2f3d71 Binary files /dev/null and b/src/assets/img/flags/IN.png differ diff --git a/src/assets/img/flags/IQ.png b/src/assets/img/flags/IQ.png new file mode 100644 index 0000000..82f4d88 Binary files /dev/null and b/src/assets/img/flags/IQ.png differ diff --git a/src/assets/img/flags/IR.png b/src/assets/img/flags/IR.png new file mode 100644 index 0000000..0f662ad Binary files /dev/null and b/src/assets/img/flags/IR.png differ diff --git a/src/assets/img/flags/IT.png b/src/assets/img/flags/IT.png new file mode 100644 index 0000000..c111bc1 Binary files /dev/null and b/src/assets/img/flags/IT.png differ diff --git a/src/assets/img/flags/JM.png b/src/assets/img/flags/JM.png new file mode 100644 index 0000000..c034b85 Binary files /dev/null and b/src/assets/img/flags/JM.png differ diff --git a/src/assets/img/flags/JO.png b/src/assets/img/flags/JO.png new file mode 100644 index 0000000..0510163 Binary files /dev/null and b/src/assets/img/flags/JO.png differ diff --git a/src/assets/img/flags/JP.png b/src/assets/img/flags/JP.png new file mode 100644 index 0000000..9786df2 Binary files /dev/null and b/src/assets/img/flags/JP.png differ diff --git a/src/assets/img/flags/KG.png b/src/assets/img/flags/KG.png new file mode 100644 index 0000000..2db2d50 Binary files /dev/null and b/src/assets/img/flags/KG.png differ diff --git a/src/assets/img/flags/KN.png b/src/assets/img/flags/KN.png new file mode 100644 index 0000000..1b19a8c Binary files /dev/null and b/src/assets/img/flags/KN.png differ diff --git a/src/assets/img/flags/KP.png b/src/assets/img/flags/KP.png new file mode 100644 index 0000000..6cfebc5 Binary files /dev/null and b/src/assets/img/flags/KP.png differ diff --git a/src/assets/img/flags/KR.png b/src/assets/img/flags/KR.png new file mode 100644 index 0000000..736cfa8 Binary files /dev/null and b/src/assets/img/flags/KR.png differ diff --git a/src/assets/img/flags/KW.png b/src/assets/img/flags/KW.png new file mode 100644 index 0000000..a13126e Binary files /dev/null and b/src/assets/img/flags/KW.png differ diff --git a/src/assets/img/flags/KZ.png b/src/assets/img/flags/KZ.png new file mode 100644 index 0000000..a3274ad Binary files /dev/null and b/src/assets/img/flags/KZ.png differ diff --git a/src/assets/img/flags/LA.png b/src/assets/img/flags/LA.png new file mode 100644 index 0000000..7e202b4 Binary files /dev/null and b/src/assets/img/flags/LA.png differ diff --git a/src/assets/img/flags/LB.png b/src/assets/img/flags/LB.png new file mode 100644 index 0000000..f203af8 Binary files /dev/null and b/src/assets/img/flags/LB.png differ diff --git a/src/assets/img/flags/LC.png b/src/assets/img/flags/LC.png new file mode 100644 index 0000000..c0758a1 Binary files /dev/null and b/src/assets/img/flags/LC.png differ diff --git a/src/assets/img/flags/LS.png b/src/assets/img/flags/LS.png new file mode 100644 index 0000000..e69a97b Binary files /dev/null and b/src/assets/img/flags/LS.png differ diff --git a/src/assets/img/flags/LU.png b/src/assets/img/flags/LU.png new file mode 100644 index 0000000..0f98055 Binary files /dev/null and b/src/assets/img/flags/LU.png differ diff --git a/src/assets/img/flags/LV.png b/src/assets/img/flags/LV.png new file mode 100644 index 0000000..6169eb4 Binary files /dev/null and b/src/assets/img/flags/LV.png differ diff --git a/src/assets/img/flags/MG.png b/src/assets/img/flags/MG.png new file mode 100644 index 0000000..55412d5 Binary files /dev/null and b/src/assets/img/flags/MG.png differ diff --git a/src/assets/img/flags/MK.png b/src/assets/img/flags/MK.png new file mode 100644 index 0000000..29a1ed4 Binary files /dev/null and b/src/assets/img/flags/MK.png differ diff --git a/src/assets/img/flags/ML.png b/src/assets/img/flags/ML.png new file mode 100644 index 0000000..6fb3d6a Binary files /dev/null and b/src/assets/img/flags/ML.png differ diff --git a/src/assets/img/flags/MM.png b/src/assets/img/flags/MM.png new file mode 100644 index 0000000..09a0a15 Binary files /dev/null and b/src/assets/img/flags/MM.png differ diff --git a/src/assets/img/flags/MT.png b/src/assets/img/flags/MT.png new file mode 100644 index 0000000..5d694ec Binary files /dev/null and b/src/assets/img/flags/MT.png differ diff --git a/src/assets/img/flags/MX.png b/src/assets/img/flags/MX.png new file mode 100644 index 0000000..4fac84a Binary files /dev/null and b/src/assets/img/flags/MX.png differ diff --git a/src/assets/img/flags/NA.png b/src/assets/img/flags/NA.png new file mode 100644 index 0000000..33aa1a1 Binary files /dev/null and b/src/assets/img/flags/NA.png differ diff --git a/src/assets/img/flags/NE.png b/src/assets/img/flags/NE.png new file mode 100644 index 0000000..fb6fc62 Binary files /dev/null and b/src/assets/img/flags/NE.png differ diff --git a/src/assets/img/flags/NG.png b/src/assets/img/flags/NG.png new file mode 100644 index 0000000..d3c626b Binary files /dev/null and b/src/assets/img/flags/NG.png differ diff --git a/src/assets/img/flags/NI.png b/src/assets/img/flags/NI.png new file mode 100644 index 0000000..fbd68d1 Binary files /dev/null and b/src/assets/img/flags/NI.png differ diff --git a/src/assets/img/flags/NL.png b/src/assets/img/flags/NL.png new file mode 100644 index 0000000..3900749 Binary files /dev/null and b/src/assets/img/flags/NL.png differ diff --git a/src/assets/img/flags/NO.png b/src/assets/img/flags/NO.png new file mode 100644 index 0000000..1068ff8 Binary files /dev/null and b/src/assets/img/flags/NO.png differ diff --git a/src/assets/img/flags/OM.png b/src/assets/img/flags/OM.png new file mode 100644 index 0000000..c783397 Binary files /dev/null and b/src/assets/img/flags/OM.png differ diff --git a/src/assets/img/flags/PA.png b/src/assets/img/flags/PA.png new file mode 100644 index 0000000..b8919ea Binary files /dev/null and b/src/assets/img/flags/PA.png differ diff --git a/src/assets/img/flags/PE.png b/src/assets/img/flags/PE.png new file mode 100644 index 0000000..934198d Binary files /dev/null and b/src/assets/img/flags/PE.png differ diff --git a/src/assets/img/flags/PG.png b/src/assets/img/flags/PG.png new file mode 100644 index 0000000..9fb82cc Binary files /dev/null and b/src/assets/img/flags/PG.png differ diff --git a/src/assets/img/flags/PK.png b/src/assets/img/flags/PK.png new file mode 100644 index 0000000..9214a81 Binary files /dev/null and b/src/assets/img/flags/PK.png differ diff --git a/src/assets/img/flags/PL.png b/src/assets/img/flags/PL.png new file mode 100644 index 0000000..c9dc74d Binary files /dev/null and b/src/assets/img/flags/PL.png differ diff --git a/src/assets/img/flags/PT.png b/src/assets/img/flags/PT.png new file mode 100644 index 0000000..33a3de2 Binary files /dev/null and b/src/assets/img/flags/PT.png differ diff --git a/src/assets/img/flags/PY.png b/src/assets/img/flags/PY.png new file mode 100644 index 0000000..967ec18 Binary files /dev/null and b/src/assets/img/flags/PY.png differ diff --git a/src/assets/img/flags/QA.png b/src/assets/img/flags/QA.png new file mode 100644 index 0000000..c90e17b Binary files /dev/null and b/src/assets/img/flags/QA.png differ diff --git a/src/assets/img/flags/RO.png b/src/assets/img/flags/RO.png new file mode 100644 index 0000000..f113b90 Binary files /dev/null and b/src/assets/img/flags/RO.png differ diff --git a/src/assets/img/flags/RU.png b/src/assets/img/flags/RU.png new file mode 100644 index 0000000..1876d6b Binary files /dev/null and b/src/assets/img/flags/RU.png differ diff --git a/src/assets/img/flags/RW.png b/src/assets/img/flags/RW.png new file mode 100644 index 0000000..fee04a2 Binary files /dev/null and b/src/assets/img/flags/RW.png differ diff --git a/src/assets/img/flags/SA.png b/src/assets/img/flags/SA.png new file mode 100644 index 0000000..bdf39a4 Binary files /dev/null and b/src/assets/img/flags/SA.png differ diff --git a/src/assets/img/flags/SE.png b/src/assets/img/flags/SE.png new file mode 100644 index 0000000..08dc290 Binary files /dev/null and b/src/assets/img/flags/SE.png differ diff --git a/src/assets/img/flags/SG.png b/src/assets/img/flags/SG.png new file mode 100644 index 0000000..9abd1a6 Binary files /dev/null and b/src/assets/img/flags/SG.png differ diff --git a/src/assets/img/flags/SL.png b/src/assets/img/flags/SL.png new file mode 100644 index 0000000..c1b09d7 Binary files /dev/null and b/src/assets/img/flags/SL.png differ diff --git a/src/assets/img/flags/SN.png b/src/assets/img/flags/SN.png new file mode 100644 index 0000000..b28977f Binary files /dev/null and b/src/assets/img/flags/SN.png differ diff --git a/src/assets/img/flags/SO.png b/src/assets/img/flags/SO.png new file mode 100644 index 0000000..f61b0e4 Binary files /dev/null and b/src/assets/img/flags/SO.png differ diff --git a/src/assets/img/flags/SV.png b/src/assets/img/flags/SV.png new file mode 100644 index 0000000..72835ea Binary files /dev/null and b/src/assets/img/flags/SV.png differ diff --git a/src/assets/img/flags/TD.png b/src/assets/img/flags/TD.png new file mode 100644 index 0000000..93b7f9d Binary files /dev/null and b/src/assets/img/flags/TD.png differ diff --git a/src/assets/img/flags/TJ.png b/src/assets/img/flags/TJ.png new file mode 100644 index 0000000..8c7d70e Binary files /dev/null and b/src/assets/img/flags/TJ.png differ diff --git a/src/assets/img/flags/TL.png b/src/assets/img/flags/TL.png new file mode 100644 index 0000000..59acf14 Binary files /dev/null and b/src/assets/img/flags/TL.png differ diff --git a/src/assets/img/flags/TR.png b/src/assets/img/flags/TR.png new file mode 100644 index 0000000..9443f0b Binary files /dev/null and b/src/assets/img/flags/TR.png differ diff --git a/src/assets/img/flags/TZ.png b/src/assets/img/flags/TZ.png new file mode 100644 index 0000000..a848f73 Binary files /dev/null and b/src/assets/img/flags/TZ.png differ diff --git a/src/assets/img/flags/UA.png b/src/assets/img/flags/UA.png new file mode 100644 index 0000000..5526a55 Binary files /dev/null and b/src/assets/img/flags/UA.png differ diff --git a/src/assets/img/flags/US.png b/src/assets/img/flags/US.png new file mode 100644 index 0000000..73f0c7a Binary files /dev/null and b/src/assets/img/flags/US.png differ diff --git a/src/assets/img/flags/VE.png b/src/assets/img/flags/VE.png new file mode 100644 index 0000000..11a43d0 Binary files /dev/null and b/src/assets/img/flags/VE.png differ diff --git a/src/assets/img/flags/VN.png b/src/assets/img/flags/VN.png new file mode 100644 index 0000000..8930265 Binary files /dev/null and b/src/assets/img/flags/VN.png differ diff --git a/src/assets/img/flags/YE.png b/src/assets/img/flags/YE.png new file mode 100644 index 0000000..37ac4f3 Binary files /dev/null and b/src/assets/img/flags/YE.png differ diff --git a/src/assets/img/image_placeholder.jpg b/src/assets/img/image_placeholder.jpg new file mode 100644 index 0000000..ffdb0aa Binary files /dev/null and b/src/assets/img/image_placeholder.jpg differ diff --git a/src/assets/img/loading-bubbles.svg b/src/assets/img/loading-bubbles.svg new file mode 100644 index 0000000..4020b4d --- /dev/null +++ b/src/assets/img/loading-bubbles.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png new file mode 100644 index 0000000..5aab9a0 Binary files /dev/null and b/src/assets/img/logo.png differ diff --git a/src/assets/img/office2.jpg b/src/assets/img/office2.jpg new file mode 100644 index 0000000..ba5d7e4 Binary files /dev/null and b/src/assets/img/office2.jpg differ diff --git a/src/assets/img/placeholder.jpg b/src/assets/img/placeholder.jpg new file mode 100644 index 0000000..065372b Binary files /dev/null and b/src/assets/img/placeholder.jpg differ diff --git a/src/assets/img/product1.jpg b/src/assets/img/product1.jpg new file mode 100644 index 0000000..5821b43 Binary files /dev/null and b/src/assets/img/product1.jpg differ diff --git a/src/assets/img/product2.jpg b/src/assets/img/product2.jpg new file mode 100644 index 0000000..a58c026 Binary files /dev/null and b/src/assets/img/product2.jpg differ diff --git a/src/assets/img/product3.jpg b/src/assets/img/product3.jpg new file mode 100644 index 0000000..7f10d85 Binary files /dev/null and b/src/assets/img/product3.jpg differ diff --git a/src/assets/img/sections/iphone.png b/src/assets/img/sections/iphone.png new file mode 100644 index 0000000..64f9163 Binary files /dev/null and b/src/assets/img/sections/iphone.png differ diff --git a/src/assets/img/sections/iphone2.png b/src/assets/img/sections/iphone2.png new file mode 100644 index 0000000..a997d60 Binary files /dev/null and b/src/assets/img/sections/iphone2.png differ diff --git a/src/assets/jss/react-material.js b/src/assets/jss/react-material.js new file mode 100644 index 0000000..68bce80 --- /dev/null +++ b/src/assets/jss/react-material.js @@ -0,0 +1,497 @@ +/*! + +========================================================= +* React Material - v2.0.0 +========================================================= + +* Product Page: https://www.weenspace.com/product/react-material +* Copyright 2021 WeenSpace (https://www.weenspace.com) + +* Coded by WeenSpace + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/ + +// ############################## +// // // Function that converts from hex color to rgb color +// // // Example: input = #9c27b0 => output = 156, 39, 176 +// // // Example: input = 9c27b0 => output = 156, 39, 176 +// // // Example: input = #999 => output = 153, 153, 153 +// // // Example: input = 999 => output = 153, 153, 153 +// ############################# +const hexToRgb = (input) => { + input = input + ""; + input = input.replace("#", ""); + let hexRegex = /[0-9A-Fa-f]/g; + if (!hexRegex.test(input) || (input.length !== 3 && input.length !== 6)) { + throw new Error("input is not a valid hex color."); + } + if (input.length === 3) { + let first = input[0]; + let second = input[1]; + let last = input[2]; + input = first + first + second + second + last + last; + } + input = input.toUpperCase(input); + let first = input[0] + input[1]; + let second = input[2] + input[3]; + let last = input[4] + input[5]; + return ( + parseInt(first, 16) + + ", " + + parseInt(second, 16) + + ", " + + parseInt(last, 16) + ); +}; + +// ############################## +// // // Variables - Styles that are used on more than one component +// ############################# + +const drawerWidth = 260; + +const primaryColor = [ + "#9c27b0", + "#ab47bc", + "#8e24aa", + "#af2cc5", + "#e1bee7", + "#ba68c8", +]; +const secondaryColor = ["#fafafa"]; +const warningColor = [ + "#ff9800", + "#ffa726", + "#fb8c00", + "#ffa21a", + "#fcf8e3", + "#faf2cc", + "#ffe0b2", + "#ffb74d", +]; +const dangerColor = [ + "#f44336", + "#ef5350", + "#e53935", + "#f55a4e", + "#f2dede", + "#ebcccc", + "ef9a9a", + "#ef5350", +]; +const successColor = [ + "#4caf50", + "#66bb6a", + "#43a047", + "#5cb860", + "#dff0d8", + "#d0e9c6", + "#a5d6a7", + "#66bb6a", +]; +const infoColor = [ + "#00acc1", + "#26c6da", + "#00acc1", + "#00d3ee", + "#d9edf7", + "#c4e3f3", + "#b2ebf2", + "#4dd0e1", +]; +const roseColor = ["#e91e63", "#ec407a", "#d81b60", "#f8bbd0", "#f06292"]; +const grayColor = [ + "#999", + "#3C4858", + "#eee", + "#343434", + "#585858", + "#232323", + "#ddd", + "#6c757d", + "#333", + "#212121", + "#777", + "#D2D2D2", + "#AAA", + "#495057", + "#e5e5e5", + "#555", + "#f9f9f9", + "#ccc", + "#444", + "#f2f2f2", + "#89229b", + "#c0c1c2", + "#9a9a9a", + "#f5f5f5", + "#505050", + "#1f1f1f", +]; +const whiteColor = "#FFF"; +const blackColor = "#000"; +const twitterColor = "#55acee"; +const facebookColor = "#3b5998"; +const googleColor = "#dd4b39"; +const linkedinColor = "#0976b4"; +const pinterestColor = "#cc2127"; +const youtubeColor = "#e52d27"; +const tumblrColor = "#35465c"; +const behanceColor = "#1769ff"; +const dribbbleColor = "#ea4c89"; +const redditColor = "#ff4500"; +const instagramColor = "#125688"; + +const transition = { + transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)", +}; + +const containerFluid = { + paddingRight: "15px", + paddingLeft: "15px", + marginRight: "auto", + marginLeft: "auto", + width: "100%", +}; +const container = { + ...containerFluid, + "@media (min-width: 576px)": { + maxWidth: "540px", + }, + "@media (min-width: 768px)": { + maxWidth: "720px", + }, + "@media (min-width: 992px)": { + maxWidth: "960px", + }, + "@media (min-width: 1200px)": { + maxWidth: "1140px", + }, +}; + +const card = { + display: "inline-block", + position: "relative", + width: "100%", + margin: "25px 0", + boxShadow: "0 1px 4px 0 rgba(" + hexToRgb(blackColor) + ", 0.14)", + borderRadius: "3px", + color: "rgba(" + hexToRgb(blackColor) + ", 0.87)", + background: whiteColor, +}; + +const defaultFont = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: "300", + lineHeight: "1.5em", +}; + +const boxShadow = { + boxShadow: + "0 10px 30px -12px rgba(" + + hexToRgb(blackColor) + + ", 0.42), 0 4px 25px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", +}; +const primaryBoxShadow = { + boxShadow: + "0 12px 20px -10px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.28), 0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 8px -5px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.2)", +}; +const infoBoxShadow = { + boxShadow: + "0 12px 20px -10px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.28), 0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 8px -5px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.2)", +}; +const successBoxShadow = { + boxShadow: + "0 12px 20px -10px rgba(" + + hexToRgb(successColor[0]) + + ", 0.28), 0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 8px -5px rgba(" + + hexToRgb(successColor[0]) + + ", 0.2)", +}; +const warningBoxShadow = { + boxShadow: + "0 12px 20px -10px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.28), 0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 8px -5px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.2)", +}; +const dangerBoxShadow = { + boxShadow: + "0 12px 20px -10px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.28), 0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 8px -5px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.2)", +}; +const roseBoxShadow = { + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(roseColor[0]) + + ", 0.4)", +}; + +const warningCardHeader = { + color: whiteColor, + background: + "linear-gradient(60deg, " + warningColor[1] + ", " + warningColor[2] + ")", + ...warningBoxShadow, +}; +const successCardHeader = { + color: whiteColor, + background: + "linear-gradient(60deg, " + successColor[1] + ", " + successColor[2] + ")", + ...successBoxShadow, +}; +const dangerCardHeader = { + color: whiteColor, + background: + "linear-gradient(60deg, " + dangerColor[1] + ", " + dangerColor[2] + ")", + ...dangerBoxShadow, +}; +const infoCardHeader = { + color: whiteColor, + background: + "linear-gradient(60deg, " + infoColor[1] + ", " + infoColor[2] + ")", + ...infoBoxShadow, +}; +const primaryCardHeader = { + color: whiteColor, + background: + "linear-gradient(60deg, " + primaryColor[1] + ", " + primaryColor[2] + ")", + ...primaryBoxShadow, +}; +const roseCardHeader = { + color: whiteColor, + background: + "linear-gradient(60deg, " + roseColor[1] + ", " + roseColor[2] + ")", + ...roseBoxShadow, +}; +const cardActions = { + margin: "0 20px 10px", + paddingTop: "10px", + borderTop: "1px solid " + grayColor[2], + height: "auto", + ...defaultFont, +}; + +const cardHeader = { + margin: "-30px 15px 0", + borderRadius: "3px", + padding: "15px", +}; + +const defaultBoxShadow = { + border: "0", + borderRadius: "3px", + boxShadow: + "0 10px 20px -12px rgba(" + + hexToRgb(blackColor) + + ", 0.42), 0 3px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + padding: "10px 0", + transition: "all 150ms ease 0s", +}; + +const title = { + color: grayColor[1], + textDecoration: "none", + fontWeight: "700", + marginTop: "30px", + marginBottom: "25px", + minHeight: "32px", + fontFamily: `"Roboto Slab", "Times New Roman", serif`, +}; + +const cardTitle = { + "&, & a": { + ...title, + marginTop: ".625rem", + marginBottom: "0.75rem", + minHeight: "auto", + }, +}; + +const cardLink = { + "& + $cardLink": { + marginLeft: "1.25rem", + }, +}; + +const cardSubtitle = { + marginBottom: "0", + marginTop: "-.375rem", +}; + +const main = { + background: whiteColor, + position: "relative", + zIndex: "3", +}; + +const mainRaised = { + "@media (max-width: 576px)": { + marginTop: "-30px", + }, + "@media (max-width: 830px)": { + marginLeft: "10px", + marginRight: "10px", + }, + margin: "-60px 30px 0px", + borderRadius: "6px", + boxShadow: + "0 16px 24px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 6px 30px 5px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", +}; + +const section = { + backgroundPosition: "50%", + backgroundSize: "cover", +}; + +const sectionDark = { + backgroundColor: grayColor[3], + background: + "radial-gradient(ellipse at center," + + grayColor[4] + + " 0," + + grayColor[5] + + " 100%)", +}; + +const sectionDescription = { + marginTop: "130px", +}; + +const description = { + color: grayColor[0], +}; + +const mlAuto = { + marginLeft: "auto", +}; + +const mrAuto = { + marginRight: "auto", +}; + +const btnLink = { + backgroundColor: "transparent", + boxShdow: "none", + marginTop: "5px", + marginBottom: "5px", +}; +const coloredShadow = { + // some jss/css to make the cards look a bit better on Internet Explorer + "@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)": { + display: "none !important", + }, + transform: "scale(0.94)", + top: "12px", + filter: "blur(12px)", + position: "absolute", + width: "100%", + height: "100%", + backgroundSize: "cover", + zIndex: "-1", + transition: "opacity .45s", + opacity: "0", +}; + +export { + //variables + drawerWidth, + transition, + container, + containerFluid, + boxShadow, + card, + defaultFont, + primaryColor, + secondaryColor, + warningColor, + dangerColor, + successColor, + infoColor, + roseColor, + grayColor, + whiteColor, + blackColor, + twitterColor, + facebookColor, + googleColor, + linkedinColor, + pinterestColor, + youtubeColor, + tumblrColor, + behanceColor, + dribbbleColor, + redditColor, + instagramColor, + primaryBoxShadow, + infoBoxShadow, + successBoxShadow, + warningBoxShadow, + dangerBoxShadow, + roseBoxShadow, + warningCardHeader, + successCardHeader, + dangerCardHeader, + infoCardHeader, + primaryCardHeader, + roseCardHeader, + cardActions, + cardHeader, + defaultBoxShadow, + title, + cardTitle, + description, + cardLink, + cardSubtitle, + main, + mainRaised, + section, + sectionDark, + sectionDescription, + mlAuto, + mrAuto, + btnLink, + coloredShadow, + hexToRgb, +}; diff --git a/src/assets/jss/react-material/buttonGroupStyle.js b/src/assets/jss/react-material/buttonGroupStyle.js new file mode 100644 index 0000000..9d27d30 --- /dev/null +++ b/src/assets/jss/react-material/buttonGroupStyle.js @@ -0,0 +1,37 @@ +const buttonGroupStyle = { + buttonGroup: { + position: "relative", + margin: "10px 1px", + display: "inline-block", + verticalAlign: "middle", + }, + firstButton: { + borderTopRightRadius: "0", + borderBottomRightRadius: "0", + margin: "0", + position: "relative", + float: "left", + "&:hover": { + zIndex: "2", + }, + }, + middleButton: { + borderRadius: "0", + margin: "0", + position: "relative", + float: "left", + "&:hover": { + zIndex: "2", + }, + }, + lastButton: { + borderTopLeftRadius: "0", + borderBottomLeftRadius: "0", + margin: "0", + "&:hover": { + zIndex: "2", + }, + }, +}; + +export default buttonGroupStyle; diff --git a/src/assets/jss/react-material/components/accordionStyle.js b/src/assets/jss/react-material/components/accordionStyle.js new file mode 100644 index 0000000..91c6707 --- /dev/null +++ b/src/assets/jss/react-material/components/accordionStyle.js @@ -0,0 +1,141 @@ +import { + primaryColor, + secondaryColor, + warningColor, + dangerColor, + successColor, + infoColor, + roseColor, + grayColor, +} from "assets/jss/react-material"; + +const accordionStyle = (theme) => ({ + root: { + flexGrow: 1, + marginBottom: "20px", + }, + accordion: { + boxShadow: "none", + "&:before": { + display: "none !important", + }, + }, + accordionExpanded: { + margin: "0 !important", + }, + accordionSummary: { + minHeight: "auto !important", + backgroundColor: "transparent", + borderBottom: "1px solid " + grayColor[6], + padding: "25px 10px 5px 0px", + borderTopLeftRadius: "3px", + borderTopRightRadius: "3px", + color: grayColor[1], + }, + primaryAccordionSummary: { + "&:hover": { + color: primaryColor[0], + }, + }, + secondaryAccordionSummary: { + "&:hover": { + color: secondaryColor[0], + }, + }, + warningAccordionSummary: { + "&:hover": { + color: warningColor[0], + }, + }, + dangerAccordionSummary: { + "&:hover": { + color: dangerColor[0], + }, + }, + successAccordionSummary: { + "&:hover": { + color: successColor[0], + }, + }, + infoAccordionSummary: { + "&:hover": { + color: infoColor[0], + }, + }, + roseAccordionSummary: { + "&:hover": { + color: roseColor[0], + }, + }, + accordionSummaryExpaned: { + "& $accordionSummaryExpandIcon": { + [theme.breakpoints.up("md")]: { + top: "auto !important", + }, + transform: "rotate(180deg)", + [theme.breakpoints.down("sm")]: { + top: "10px !important", + }, + // some jss/css to make the cards look a bit better on Internet Explorer + "@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)": { + display: "inline-block !important", + top: "10px !important", + }, + }, + }, + primaryAccordionSummaryExpaned: { + color: primaryColor[0], + }, + secondaryAccordionSummaryExpaned: { + color: secondaryColor[0], + }, + warningAccordionSummaryExpaned: { + color: warningColor[0], + }, + dangerAccordionSummaryExpaned: { + color: dangerColor[0], + }, + successAccordionSummaryExpaned: { + color: successColor[0], + }, + infoAccordionSummaryExpaned: { + color: infoColor[0], + }, + roseAccordionSummaryExpaned: { + color: roseColor[0], + }, + accordionSummaryContent: { + margin: "0 !important", + }, + accordionSummaryExpandIcon: { + [theme.breakpoints.up("md")]: { + top: "auto !important", + }, + transform: "rotate(0deg)", + color: "inherit", + right: "10px", + position: "absolute", + [theme.breakpoints.down("sm")]: { + top: "10px !important", + }, + // some jss/css to make the cards look a bit better on Internet Explorer + "@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)": { + display: "inline-block !important", + }, + }, + accordionSummaryExpandIconExpanded: {}, + title: { + fontSize: "15px", + fontWeight: "bolder", + marginTop: "0", + marginBottom: "0", + color: "inherit", + }, + accordionDetails: { + display: "block", + padding: "15px 0px 5px", + fontSize: ".875rem", + }, +}); + +export default accordionStyle; diff --git a/src/assets/jss/react-material/components/badgeStyle.js b/src/assets/jss/react-material/components/badgeStyle.js new file mode 100644 index 0000000..89f6cb5 --- /dev/null +++ b/src/assets/jss/react-material/components/badgeStyle.js @@ -0,0 +1,50 @@ +import { + primaryColor, + warningColor, + dangerColor, + successColor, + infoColor, + roseColor, + whiteColor, + grayColor, +} from "assets/jss/react-material"; + +const badgeStyle = { + badge: { + marginRight: "3px", + borderRadius: "12px", + padding: "5px 12px", + textTransform: "uppercase", + fontSize: "10px", + fontWeight: "500", + lineHeight: "1", + color: whiteColor, + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "baseline", + display: "inline-block", + }, + primary: { + backgroundColor: primaryColor[0], + }, + warning: { + backgroundColor: warningColor[0], + }, + danger: { + backgroundColor: dangerColor[0], + }, + success: { + backgroundColor: successColor[0], + }, + info: { + backgroundColor: infoColor[0], + }, + rose: { + backgroundColor: roseColor[0], + }, + gray: { + backgroundColor: grayColor[7], + }, +}; + +export default badgeStyle; diff --git a/src/assets/jss/react-material/components/buttonStyle.js b/src/assets/jss/react-material/components/buttonStyle.js new file mode 100644 index 0000000..93c47d4 --- /dev/null +++ b/src/assets/jss/react-material/components/buttonStyle.js @@ -0,0 +1,743 @@ +import { + grayColor, + roseColor, + primaryColor, + secondaryColor, + infoColor, + successColor, + warningColor, + dangerColor, + blackColor, + whiteColor, + twitterColor, + facebookColor, + googleColor, + linkedinColor, + pinterestColor, + youtubeColor, + tumblrColor, + behanceColor, + dribbbleColor, + redditColor, + instagramColor, + hexToRgb, +} from "assets/jss/react-material"; + +const buttonStyle = { + button: { + minHeight: "auto", + minWidth: "auto", + backgroundColor: grayColor[0], + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(grayColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(grayColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(grayColor[0]) + + ", 0.12)", + border: "none", + borderRadius: "3px", + position: "relative", + padding: "12px 30px", + margin: ".3125rem 1px", + fontSize: "12px", + fontWeight: "400", + textTransform: "uppercase", + letterSpacing: "0", + willChange: "box-shadow, transform", + transition: + "box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)", + lineHeight: "1.42857143", + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "middle", + touchAction: "manipulation", + cursor: "pointer", + "&:hover,&:focus": { + color: whiteColor, + backgroundColor: grayColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(grayColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(grayColor[0]) + + ", 0.2)", + }, + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + position: "relative", + display: "inline-block", + top: "0", + marginTop: "-1em", + marginBottom: "-1em", + fontSize: "1.1rem", + marginRight: "4px", + verticalAlign: "middle", + }, + "& svg": { + position: "relative", + display: "inline-block", + top: "0", + width: "18px", + height: "18px", + marginRight: "4px", + verticalAlign: "middle", + }, + "&$justIcon": { + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + marginTop: "0px", + marginRight: "0px", + position: "absolute", + width: "100%", + transform: "none", + left: "0px", + top: "0px", + height: "100%", + lineHeight: "41px", + fontSize: "20px", + }, + }, + }, + fullWidth: { + width: "100%", + }, + primary: { + backgroundColor: primaryColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: primaryColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.2)", + }, + }, + secondary: { + color: "rgba(" + hexToRgb(blackColor) + ",.87)", + backgroundColor: secondaryColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(secondaryColor[0]) + + ",.14), 0 3px 1px -2px rgba(" + + hexToRgb(secondaryColor[0]) + + ",.2), 0 1px 5px 0 rgba(" + + hexToRgb(secondaryColor[0]) + + ",.12)", + "&:hover,&:focus": { + boxShdow: + "0 14px 26px -12px rgba(" + + hexToRgb(secondaryColor[0]) + + ",.42), 0 4px 23px 0 rgba(" + + hexToRgb(blackColor) + + ",.12), 0 8px 10px -5px rgba(" + + hexToRgb(secondaryColor[0]) + + ",.2)", + color: "rgba(" + hexToRgb(blackColor) + ",.87)", + backgroundColor: grayColor[19], + }, + }, + info: { + backgroundColor: infoColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(infoColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(infoColor[0]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: infoColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.2)", + }, + }, + success: { + backgroundColor: successColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(successColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(successColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(successColor[0]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: successColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(successColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(successColor[0]) + + ", 0.2)", + }, + }, + warning: { + backgroundColor: warningColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(warningColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(warningColor[0]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: warningColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.2)", + }, + }, + danger: { + backgroundColor: dangerColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: dangerColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.2)", + }, + }, + rose: { + backgroundColor: roseColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(roseColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(roseColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(roseColor[0]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: roseColor[0], + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(roseColor[0]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(roseColor[0]) + + ", 0.2)", + }, + }, + white: { + "&,&:focus,&:hover": { + backgroundColor: whiteColor, + color: grayColor[0], + }, + }, + twitter: { + backgroundColor: twitterColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(twitterColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(twitterColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(twitterColor) + + ", 0.12)", + "&:hover,&:focus,&:visited": { + backgroundColor: twitterColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(twitterColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(twitterColor) + + ", 0.2)", + }, + }, + facebook: { + backgroundColor: facebookColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(facebookColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(facebookColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(facebookColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: facebookColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(facebookColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(facebookColor) + + ", 0.2)", + }, + }, + google: { + backgroundColor: googleColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(googleColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(googleColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(googleColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: googleColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(googleColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(googleColor) + + ", 0.2)", + }, + }, + linkedin: { + backgroundColor: linkedinColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(linkedinColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(linkedinColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(linkedinColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: linkedinColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(linkedinColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(linkedinColor) + + ", 0.2)", + }, + }, + pinterest: { + backgroundColor: pinterestColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(pinterestColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(pinterestColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(pinterestColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: pinterestColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(pinterestColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(pinterestColor) + + ", 0.2)", + }, + }, + youtube: { + backgroundColor: youtubeColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(youtubeColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(youtubeColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(youtubeColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: youtubeColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(youtubeColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(youtubeColor) + + ", 0.2)", + }, + }, + tumblr: { + backgroundColor: tumblrColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(tumblrColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(tumblrColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(tumblrColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: tumblrColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(tumblrColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(tumblrColor) + + ", 0.2)", + }, + }, + github: { + backgroundColor: grayColor[8], + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(grayColor[8]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(grayColor[8]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(grayColor[8]) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: grayColor[8], + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(grayColor[8]) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(grayColor[8]) + + ", 0.2)", + }, + }, + behance: { + backgroundColor: behanceColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(behanceColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(behanceColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(behanceColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: behanceColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(behanceColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(behanceColor) + + ", 0.2)", + }, + }, + dribbble: { + backgroundColor: dribbbleColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(dribbbleColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(dribbbleColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(dribbbleColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: dribbbleColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(dribbbleColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(dribbbleColor) + + ", 0.2)", + }, + }, + reddit: { + backgroundColor: redditColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(redditColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(redditColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(redditColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: redditColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(redditColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(redditColor) + + ", 0.2)", + }, + }, + instagram: { + backgroundColor: instagramColor, + color: whiteColor, + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(instagramColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(instagramColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(instagramColor) + + ", 0.12)", + "&:hover,&:focus": { + backgroundColor: instagramColor, + color: whiteColor, + boxShadow: + "0 14px 26px -12px rgba(" + + hexToRgb(instagramColor) + + ", 0.42), 0 4px 23px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(instagramColor) + + ", 0.2)", + }, + }, + simple: { + "&,&:focus,&:hover": { + color: whiteColor, + background: "transparent", + boxShadow: "none", + }, + "&$primary": { + "&,&:focus,&:hover,&:visited": { + color: primaryColor[0], + }, + }, + "&$info": { + "&,&:focus,&:hover,&:visited": { + color: infoColor[0], + }, + }, + "&$success": { + "&,&:focus,&:hover,&:visited": { + color: successColor[0], + }, + }, + "&$warning": { + "&,&:focus,&:hover,&:visited": { + color: warningColor[0], + }, + }, + "&$rose": { + "&,&:focus,&:hover,&:visited": { + color: roseColor[0], + }, + }, + "&$danger": { + "&,&:focus,&:hover,&:visited": { + color: dangerColor[0], + }, + }, + "&$twitter": { + "&,&:focus,&:hover,&:visited": { + color: twitterColor, + }, + }, + "&$facebook": { + "&,&:focus,&:hover,&:visited": { + color: facebookColor, + }, + }, + "&$google": { + "&,&:focus,&:hover,&:visited": { + color: googleColor, + }, + }, + "&$linkedin": { + "&,&:focus,&:hover,&:visited": { + color: linkedinColor, + }, + }, + "&$pinterest": { + "&,&:focus,&:hover,&:visited": { + color: pinterestColor, + }, + }, + "&$youtube": { + "&,&:focus,&:hover,&:visited": { + color: youtubeColor, + }, + }, + "&$tumblr": { + "&,&:focus,&:hover,&:visited": { + color: tumblrColor, + }, + }, + "&$github": { + "&,&:focus,&:hover,&:visited": { + color: grayColor[8], + }, + }, + "&$behance": { + "&,&:focus,&:hover,&:visited": { + color: behanceColor, + }, + }, + "&$dribbble": { + "&,&:focus,&:hover,&:visited": { + color: dribbbleColor, + }, + }, + "&$reddit": { + "&,&:focus,&:hover,&:visited": { + color: redditColor, + }, + }, + "&$instagram": { + "&,&:focus,&:hover,&:visited": { + color: instagramColor, + }, + }, + }, + transparent: { + "&,&:focus,&:hover": { + color: "inherit", + background: "transparent", + boxShadow: "none", + }, + }, + disabled: { + opacity: "0.65", + pointerEvents: "none", + }, + lg: { + "&$justIcon": { + "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": { + marginTop: "-4px", + }, + }, + padding: "1.125rem 2.25rem", + fontSize: "0.875rem", + lineHeight: "1.333333", + borderRadius: "0.2rem", + }, + sm: { + "&$justIcon": { + "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": { + marginTop: "1px", + }, + }, + padding: "0.40625rem 1.25rem", + fontSize: "0.6875rem", + lineHeight: "1.5", + borderRadius: "0.2rem", + }, + round: { + borderRadius: "30px", + }, + block: { + width: "100% !important", + }, + link: { + "&,&:hover,&:focus": { + backgroundColor: "transparent", + color: grayColor[0], + boxShadow: "none", + }, + }, + justIcon: { + paddingLeft: "12px", + paddingRight: "12px", + fontSize: "20px", + height: "41px", + minWidth: "41px", + width: "41px", + "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": { + marginRight: "0px", + }, + "&$lg": { + height: "57px", + minWidth: "57px", + width: "57px", + lineHeight: "56px", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "32px", + lineHeight: "56px", + }, + "& svg": { + width: "32px", + height: "32px", + }, + }, + "&$sm": { + height: "30px", + minWidth: "30px", + width: "30px", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "17px", + lineHeight: "29px", + }, + "& svg": { + width: "17px", + height: "17px", + }, + }, + }, + fileButton: { + // display: "inline-block" + }, +}; + +export default buttonStyle; diff --git a/src/assets/jss/react-material/components/cardAvatarStyle.js b/src/assets/jss/react-material/components/cardAvatarStyle.js new file mode 100644 index 0000000..736dd31 --- /dev/null +++ b/src/assets/jss/react-material/components/cardAvatarStyle.js @@ -0,0 +1,55 @@ +import { blackColor, hexToRgb } from "assets/jss/react-material"; + +const cardAvatarStyle = { + cardAvatar: { + "&$cardAvatarProfile img,&$cardAvatarTestimonial img": { + width: "100%", + height: "auto", + }, + }, + cardAvatarProfile: { + maxWidth: "130px", + maxHeight: "130px", + margin: "-50px auto 0", + borderRadius: "50%", + overflow: "hidden", + padding: "0", + boxShadow: + "0 16px 38px -12px rgba(" + + hexToRgb(blackColor) + + ", 0.56), 0 4px 25px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + "&$cardAvatarPlain": { + marginTop: "0", + }, + }, + cardAvatarPlain: {}, + cardAvatarTestimonial: { + margin: "-50px auto 0", + maxWidth: "100px", + maxHeight: "100px", + borderRadius: "50%", + overflow: "hidden", + padding: "0", + boxShadow: + "0 16px 38px -12px rgba(" + + hexToRgb(blackColor) + + ", 0.56), 0 4px 25px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + "&$cardAvatarPlain": { + marginTop: "0", + }, + }, + cardAvatarTestimonialFooter: { + marginBottom: "-50px", + marginTop: "10px", + }, +}; + +export default cardAvatarStyle; diff --git a/src/assets/jss/react-material/components/cardBodyStyle.js b/src/assets/jss/react-material/components/cardBodyStyle.js new file mode 100644 index 0000000..e6a1868 --- /dev/null +++ b/src/assets/jss/react-material/components/cardBodyStyle.js @@ -0,0 +1,46 @@ +import { whiteColor, hexToRgb } from "assets/jss/react-material"; + +const cardBodyStyle = { + cardBody: { + padding: "0.9375rem 1.875rem", + flex: "1 1 auto", + WebkitBoxFlex: "1", + }, + cardBodyBackground: { + position: "relative", + zIndex: "2", + minHeight: "280px", + paddingTop: "40px", + paddingBottom: "40px", + maxWidth: "440px", + margin: "0 auto", + }, + cardBodyPlain: { + paddingLeft: "5px", + paddingRight: "5px", + }, + cardBodyFormHorizontal: { + paddingLeft: "15px", + paddingRight: "15px", + "& form": { + margin: "0", + }, + }, + cardPricing: { + padding: "15px!important", + margin: "0px!important", + }, + cardSignup: { + padding: "0px 30px 0px 30px", + }, + cardBodyColor: { + borderRadius: "6px", + "& h1,& h2,& h3": { + "& small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + }, + }, +}; + +export default cardBodyStyle; diff --git a/src/assets/jss/react-material/components/cardFooterStyle.js b/src/assets/jss/react-material/components/cardFooterStyle.js new file mode 100644 index 0000000..42f9692 --- /dev/null +++ b/src/assets/jss/react-material/components/cardFooterStyle.js @@ -0,0 +1,25 @@ +const cardFooterStyle = { + cardFooter: { + display: "flex", + alignItems: "center", + backgroundColor: "transparent", + padding: "0.9375rem 1.875rem", + paddingTop: "0", + }, + cardFooterProfile: { + marginTop: "-15px", + }, + cardFooterPlain: { + paddingLeft: "5px", + paddingRight: "5px", + backgroundColor: "transparent", + }, + cardFooterPricing: { + zIndex: "2", + }, + cardFooterTestimonial: { + display: "block", + }, +}; + +export default cardFooterStyle; diff --git a/src/assets/jss/react-material/components/cardHeaderStyle.js b/src/assets/jss/react-material/components/cardHeaderStyle.js new file mode 100644 index 0000000..157c524 --- /dev/null +++ b/src/assets/jss/react-material/components/cardHeaderStyle.js @@ -0,0 +1,77 @@ +import { + warningCardHeader, + successCardHeader, + dangerCardHeader, + infoCardHeader, + primaryCardHeader, + roseCardHeader, + blackColor, + hexToRgb, +} from "assets/jss/react-material"; + +const cardHeaderStyle = { + cardHeader: { + borderRadius: "3px", + padding: "1rem 15px", + marginLeft: "15px", + marginRight: "15px", + marginTop: "-30px", + border: "0", + marginBottom: "0", + }, + cardHeaderPlain: { + marginLeft: "0px", + marginRight: "0px", + "&$cardHeaderImage": { + margin: "0 !important", + }, + }, + cardHeaderImage: { + position: "relative", + padding: "0", + zIndex: "1", + marginLeft: "15px", + marginRight: "15px", + marginTop: "-30px", + borderRadius: "6px", + "& img": { + width: "100%", + borderRadius: "6px", + pointerEvents: "none", + boxShadow: + "0 5px 15px -8px rgba(" + + hexToRgb(blackColor) + + ", 0.24), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + }, + "& a": { + display: "block", + }, + }, + noShadow: { + "& img": { + boxShadow: "none !important", + }, + }, + cardHeaderContact: { + margin: "0 15px", + marginTop: "-20px", + }, + cardHeaderSignup: { + marginLeft: "20px", + marginRight: "20px", + marginTop: "-40px", + padding: "20px 0", + width: "100%", + marginBottom: "15px", + }, + warningCardHeader, + successCardHeader, + dangerCardHeader, + infoCardHeader, + primaryCardHeader, + roseCardHeader, +}; + +export default cardHeaderStyle; diff --git a/src/assets/jss/react-material/components/cardStyle.js b/src/assets/jss/react-material/components/cardStyle.js new file mode 100644 index 0000000..75eb0de --- /dev/null +++ b/src/assets/jss/react-material/components/cardStyle.js @@ -0,0 +1,194 @@ +import { + blackColor, + whiteColor, + grayColor, + roseColor, + primaryColor, + successColor, + dangerColor, + warningColor, + infoColor, + hexToRgb, +} from "assets/jss/react-material"; + +const cardStyle = { + card: { + border: "0", + marginBottom: "30px", + marginTop: "30px", + borderRadius: "6px", + color: "rgba(" + hexToRgb(blackColor) + ", 0.87)", + background: whiteColor, + width: "100%", + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(blackColor) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(blackColor) + + ", 0.12)", + position: "relative", + display: "flex", + flexDirection: "column", + minWidth: "0", + wordWrap: "break-word", + fontSize: ".875rem", + // some jss/css to make the cards look a bit better on Internet Explorer + "@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)": { + display: "inline-block !important", + }, + }, + cardPlain: { + background: "transparent", + boxShadow: "none", + }, + cardProfile: { + marginTop: "30px", + textAlign: "center", + }, + cardBlog: { + marginTop: "60px", + }, + cardRaised: { + boxShadow: + "0 16px 38px -12px rgba(" + + hexToRgb(blackColor) + + ", 0.56), 0 4px 25px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + }, + cardBackground: { + backgroundPosition: "50%", + backgroundSize: "cover", + textAlign: "center", + color: whiteColor, + "& h3": { + color: whiteColor + " !important", + }, + "& p": { + color: "rgba(" + hexToRgb(whiteColor) + ",0.7)!important", + }, + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: '""', + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.56)", + borderRadius: "6px", + }, + "& small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.7) !important", + }, + }, + cardPricing: { + textAlign: "center", + "&:after": { + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7) !important", + }, + "& ul": { + listStyle: "none", + padding: 0, + maxWidth: "240px", + margin: "10px auto", + }, + "& ul li": { + color: grayColor[0], + textAlign: "center", + padding: "12px 0px", + borderBottom: "1px solid rgba(" + hexToRgb(grayColor[0]) + ",0.3)", + }, + "& ul li:last-child": { + border: 0, + }, + "& ul li b": { + color: grayColor[1], + }, + "& h1": { + marginTop: "30px", + }, + "& h1 small": { + display: "inline-flex", + height: 0, + fontSize: "18px", + }, + "& h1 small:first-child": { + position: "relative", + top: "-17px", + fontSize: "26px", + }, + "& ul li svg,& ul li .fab,& ul li .fas,& ul li .far,& ul li .fal,& ul li .material-icons": { + position: "relative", + top: "7px", + }, + }, + cardPricingColor: { + "& ul li": { + color: whiteColor, + borderColor: "rgba(" + hexToRgb(whiteColor) + ",0.3)", + "& b, & svg,& .fab,& .fas,& .far,& .fal,& .material-icons": { + color: whiteColor, + fontWeight: "700", + }, + }, + }, + cardProduct: { + marginTop: "30px", + }, + primary: { + background: + "linear-gradient(60deg," + primaryColor[1] + ", " + primaryColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, + info: { + background: + "linear-gradient(60deg," + infoColor[1] + "," + infoColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, + success: { + background: + "linear-gradient(60deg," + successColor[1] + "," + successColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, + warning: { + background: + "linear-gradient(60deg," + warningColor[1] + "," + warningColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, + danger: { + background: + "linear-gradient(60deg," + dangerColor[1] + "," + dangerColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, + rose: { + background: + "linear-gradient(60deg," + roseColor[1] + "," + roseColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, +}; + +export default cardStyle; diff --git a/src/assets/jss/react-material/components/customDropdownStyle.js b/src/assets/jss/react-material/components/customDropdownStyle.js new file mode 100644 index 0000000..f34a784 --- /dev/null +++ b/src/assets/jss/react-material/components/customDropdownStyle.js @@ -0,0 +1,224 @@ +import { + defaultFont, + primaryColor, + primaryBoxShadow, + infoColor, + infoBoxShadow, + successColor, + successBoxShadow, + warningColor, + warningBoxShadow, + dangerColor, + dangerBoxShadow, + roseColor, + roseBoxShadow, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const customDropdownStyle = (theme) => ({ + popperClose: { + pointerEvents: "none", + display: "none !important", + }, + pooperNav: { + [theme.breakpoints.down("sm")]: { + position: "static !important", + left: "unset !important", + top: "unset !important", + transform: "none !important", + willChange: "none !important", + "& > div": { + boxShadow: "none !important", + marginLeft: "1.5rem", + marginRight: "1.5rem", + transition: "none !important", + marginTop: "0px !important", + marginBottom: "5px !important", + padding: "0px !important", + }, + }, + }, + manager: { + "& > div > button:first-child > span:first-child, & > div > a:first-child > span:first-child": { + width: "100%", + }, + }, + innerManager: { + display: "block", + "& > div > button,& > div > a": { + margin: "0px !important", + color: "inherit !important", + padding: "10px 20px !important", + "& > span:first-child": { + width: "100%", + justifyContent: "flex-start", + }, + }, + }, + target: { + "& > button:first-child > span:first-child, & > a:first-child > span:first-child": { + display: "inline-block", + }, + "& $caret": { + marginLeft: "0px", + }, + }, + dropdown: { + borderRadius: "3px", + border: "0", + boxShadow: "0 2px 5px 0 rgba(" + hexToRgb(blackColor) + ", 0.26)", + top: "100%", + zIndex: "1000", + minWidth: "160px", + padding: "5px 0", + margin: "2px 0 0", + fontSize: "14px", + textAlign: "left", + listStyle: "none", + backgroundColor: whiteColor, + backgroundClip: "padding-box", + }, + menuList: { + padding: "0", + }, + pooperResponsive: { + zIndex: "1200", + [theme.breakpoints.down("sm")]: { + zIndex: "1640", + position: "static", + float: "none", + width: "auto", + marginTop: "0", + backgroundColor: "transparent", + border: "0", + boxShadow: "none", + color: "black", + }, + }, + dropdownItem: { + ...defaultFont, + fontSize: "13px", + padding: "10px 20px", + margin: "0 5px", + borderRadius: "2px", + position: "relative", + transition: "all 150ms linear", + display: "block", + clear: "both", + fontWeight: "400", + height: "100%", + color: grayColor[8], + whiteSpace: "nowrap", + minHeight: "unset", + }, + darkHover: { + "&:hover": { + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(grayColor[9]) + + ", 0.4)", + backgroundColor: grayColor[9], + color: whiteColor, + }, + }, + primaryHover: { + "&:hover": { + backgroundColor: primaryColor[0], + color: whiteColor, + ...primaryBoxShadow, + }, + }, + infoHover: { + "&:hover": { + backgroundColor: infoColor[0], + color: whiteColor, + ...infoBoxShadow, + }, + }, + successHover: { + "&:hover": { + backgroundColor: successColor[0], + color: whiteColor, + ...successBoxShadow, + }, + }, + warningHover: { + "&:hover": { + backgroundColor: warningColor[0], + color: whiteColor, + ...warningBoxShadow, + }, + }, + dangerHover: { + "&:hover": { + backgroundColor: dangerColor[0], + color: whiteColor, + ...dangerBoxShadow, + }, + }, + roseHover: { + "&:hover": { + backgroundColor: roseColor[0], + color: whiteColor, + ...roseBoxShadow, + }, + }, + dropdownItemRTL: { + textAlign: "right", + }, + dropdownDividerItem: { + margin: "5px 0", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.12)", + height: "1px", + overflow: "hidden", + }, + buttonIcon: { + width: "20px", + height: "20px", + }, + caret: { + transition: "all 150ms ease-in", + display: "inline-block", + width: "0", + height: "0", + marginLeft: "4px", + verticalAlign: "middle", + borderTop: "4px solid", + borderRight: "4px solid transparent", + borderLeft: "4px solid transparent", + }, + caretActive: { + transform: "rotate(180deg)", + }, + caretDropup: { + transform: "rotate(180deg)", + }, + caretRTL: { + marginRight: "4px", + }, + dropdownHeader: { + display: "block", + padding: "0.1875rem 1.25rem", + fontSize: "0.75rem", + lineHeight: "1.428571", + color: grayColor[10], + whiteSpace: "nowrap", + fontWeight: "inherit", + marginTop: "10px", + minHeight: "24px", + "&:hover,&:focus": { + backgroundColor: "transparent", + cursor: "auto", + }, + }, + noLiPadding: { + padding: "0", + }, +}); + +export default customDropdownStyle; diff --git a/src/assets/jss/react-material/components/customFileInputStyle.js b/src/assets/jss/react-material/components/customFileInputStyle.js new file mode 100644 index 0000000..1ce6351 --- /dev/null +++ b/src/assets/jss/react-material/components/customFileInputStyle.js @@ -0,0 +1,20 @@ +const customFileInputStyle = { + inputFile: { + opacity: "0", + position: "absolute", + top: "0", + right: "0", + bottom: "0", + left: "0", + width: "100%", + height: "100%", + zIndex: "-1", + }, + inputFileWrapper: { + "& button svg": { + color: "inherit", + }, + }, +}; + +export default customFileInputStyle; diff --git a/src/assets/jss/react-material/components/customInputStyle.js b/src/assets/jss/react-material/components/customInputStyle.js new file mode 100644 index 0000000..2cbced0 --- /dev/null +++ b/src/assets/jss/react-material/components/customInputStyle.js @@ -0,0 +1,102 @@ +import { + primaryColor, + dangerColor, + successColor, + whiteColor, + grayColor, + defaultFont, +} from "assets/jss/react-material"; + +const customInputStyle = { + disabled: { + "&:before": { + backgroundColor: "transparent !important", + }, + }, + underline: { + "&:hover:not($disabled):before,&:before": { + borderBottomColor: grayColor[11] + " !important", + borderBottomWidth: "1px !important", + }, + "&:after": { + borderBottomColor: primaryColor[0], + }, + }, + underlineError: { + "&:after": { + borderBottomColor: dangerColor[0], + }, + }, + underlineSuccess: { + "&:after": { + borderBottomColor: successColor[0], + }, + }, + labelRoot: { + ...defaultFont, + color: grayColor[12] + " !important", + fontWeight: "400", + fontSize: "14px", + lineHeight: "1.42857", + top: "10px", + letterSpacing: "unset", + "& + $underline": { + marginTop: "0px", + }, + }, + labelRootError: { + color: dangerColor[0] + " !important", + }, + labelRootSuccess: { + color: successColor[0] + " !important", + }, + feedback: { + position: "absolute", + bottom: "4px", + right: "0", + zIndex: "2", + display: "block", + width: "24px", + height: "24px", + textAlign: "center", + pointerEvents: "none", + }, + formControl: { + margin: "0 0 17px 0", + paddingTop: "27px", + position: "relative", + "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": { + color: grayColor[13], + }, + }, + whiteUnderline: { + "&:hover:not($disabled):before,&:before": { + borderBottomColor: whiteColor, + }, + "&:after": { + borderBottomColor: whiteColor, + }, + }, + input: { + color: grayColor[13], + height: "unset", + "&,&::placeholder": { + fontSize: "14px", + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: "400", + lineHeight: "1.42857", + opacity: "1", + }, + "&::placeholder": { + color: grayColor[12], + }, + }, + whiteInput: { + "&,&::placeholder": { + color: whiteColor, + opacity: "1", + }, + }, +}; + +export default customInputStyle; diff --git a/src/assets/jss/react-material/components/customLinearProgressStyle.js b/src/assets/jss/react-material/components/customLinearProgressStyle.js new file mode 100644 index 0000000..fab8e85 --- /dev/null +++ b/src/assets/jss/react-material/components/customLinearProgressStyle.js @@ -0,0 +1,65 @@ +import { + primaryColor, + warningColor, + dangerColor, + successColor, + infoColor, + roseColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const customLinearProgressStyle = { + root: { + height: "4px", + marginBottom: "20px", + overflow: "hidden", + }, + bar: { + height: "4px", + }, + primary: { + backgroundColor: primaryColor[0], + }, + warning: { + backgroundColor: warningColor[0], + }, + danger: { + backgroundColor: dangerColor[0], + }, + success: { + backgroundColor: successColor[0], + }, + info: { + backgroundColor: infoColor[0], + }, + rose: { + backgroundColor: roseColor[0], + }, + gray: { + backgroundColor: grayColor[0], + }, + primaryBackground: { + background: "rgba(" + hexToRgb(primaryColor[0]) + ", 0.2)", + }, + warningBackground: { + background: "rgba(" + hexToRgb(warningColor[0]) + ", 0.2)", + }, + dangerBackground: { + background: "rgba(" + hexToRgb(dangerColor[0]) + ", 0.2)", + }, + successBackground: { + background: "rgba(" + hexToRgb(successColor[0]) + ", 0.2)", + }, + infoBackground: { + background: "rgba(" + hexToRgb(infoColor[0]) + ", 0.2)", + }, + roseBackground: { + background: "rgba(" + hexToRgb(roseColor[0]) + ", 0.2)", + }, + grayBackground: { + background: "rgba(" + hexToRgb(grayColor[6]) + ", 0.2)", + }, +}; + +export default customLinearProgressStyle; diff --git a/src/assets/jss/react-material/components/customTabsStyle.js b/src/assets/jss/react-material/components/customTabsStyle.js new file mode 100644 index 0000000..9f9de47 --- /dev/null +++ b/src/assets/jss/react-material/components/customTabsStyle.js @@ -0,0 +1,70 @@ +import { + whiteColor, + defaultFont, + hexToRgb, +} from "assets/jss/react-material"; + +const customTabsStyle = { + cardTitle: { + ...defaultFont, + float: "left", + padding: "10px 10px 10px 0", + lineHeight: "24px", + fontSize: "14px", + color: whiteColor, + }, + cardTitleRTL: { + float: "right", + padding: "10px 0px 10px 10px !important", + }, + displayNone: { + display: "none", + }, + tabsContainer: {}, + tabsContainerRTL: { + float: "right", + }, + tabIcon: { + width: "24px", + height: "24px", + marginRight: "4px", + }, + customTabsRoot: { + minHeight: "unset !important", + }, + customTabSelected: { + backgroundColor: "rgba(" + hexToRgb(whiteColor) + ", 0.2)", + transition: "background-color .4s", + }, + customTabRoot: { + width: "auto", + minWidth: "70px", + borderRadius: "3px", + opacity: "1", + height: "auto", + padding: "10px 15px", + display: "block", + minHeight: "unset", + fontWeight: "500", + fontSize: "12px", + lineHeight: "24px", + }, + customTabWrapper: { + display: "inline-block", + minHeight: "unset !important", + minWidth: "unset !important", + width: "unset !important", + height: "unset !important", + maxWidth: "unset !important", + maxHeight: "unset !important", + "& > svg": { + verticalAlign: "middle", + margin: "-1.55px 5px 0 0 !important", + }, + "&,& *": { + letterSpacing: "normal !important", + }, + }, +}; + +export default customTabsStyle; diff --git a/src/assets/jss/react-material/components/footerStyle.js b/src/assets/jss/react-material/components/footerStyle.js new file mode 100644 index 0000000..34d72ab --- /dev/null +++ b/src/assets/jss/react-material/components/footerStyle.js @@ -0,0 +1,172 @@ +import { + container, + primaryColor, + whiteColor, + btnLink, + grayColor, + twitterColor, + dribbbleColor, + instagramColor, + hexToRgb, +} from "assets/jss/react-material"; + +const footerStyle = { + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + rightLinks: { + float: "right!important", + "& ul": { + marginBottom: 0, + marginTop: 10, + padding: 0, + listStyle: "none", + height: 38, + "& li": { + display: "inline-block", + }, + }, + "& i": { + fontSize: "20px", + }, + }, + footer: { + padding: "0.9375rem 0", + textAlign: "center", + display: "flex", + zIndex: "2", + position: "relative", + "& ul": { + marginBottom: "0", + padding: 0, + listStyle: "none", + }, + }, + big: { + padding: "1.875rem 0", + "& h5, & h4": { + fontWeight: 700, + fontFamily: "Roboto Slab,Times New Roman,serif", + marginBottom: "15px", + }, + "& p": { + color: grayColor[0], + }, + }, + content: { + textAlign: "left", + }, + a: { + color: primaryColor[0], + textDecoration: "none", + backgroundColor: "transparent", + }, + dark: { + background: + "radial-gradient(ellipse at center," + + grayColor[4] + + " 0," + + grayColor[5] + + " 100%)", + backgroundSize: "550% 450%", + color: whiteColor, + "& p": { + color: grayColor[0], + }, + "& i": { + color: whiteColor, + }, + "& a": { + color: whiteColor, + opacity: ".86", + "&:visited": { + color: whiteColor, + }, + "&:focus, &:hover": { + opacity: 1, + }, + }, + "& hr": { + borderColor: "rgba(" + hexToRgb(whiteColor) + ",0.2)", + }, + "& $btnTwitter, & $btnDribbble, & $btnInstagram": { + color: whiteColor, + }, + }, + white: { + backgroundColor: whiteColor, + color: grayColor[1], + textDecoration: "none", + "& a": { + "&:visited": { + color: grayColor[1], + }, + "&:hover, &:focus": { + color: grayColor[20], + }, + }, + }, + container, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + icon: { + width: "18px", + height: "18px", + position: "relative", + top: "3px", + }, + iconSocial: { + width: "41px", + height: "41px", + fontSize: "24px", + minWidth: "41px", + padding: 0, + overflow: "hidden", + position: "relative", + }, + btnTwitter: { + ...btnLink, + color: twitterColor, + }, + btnDribbble: { + ...btnLink, + color: dribbbleColor, + }, + btnInstagram: { + ...btnLink, + color: instagramColor, + }, + footerBrand: { + height: "50px", + padding: "15px 15px", + fontSize: "18px", + lineHeight: "50px", + marginLeft: "-15px", + color: grayColor[1], + textDecoration: "none", + fontWeight: 700, + fontFamily: "Roboto Slab,Times New Roman,serif", + }, + pullCenter: { + display: "inline-block", + float: "none", + }, + clearFix: { + clear: "both", + }, +}; +export default footerStyle; diff --git a/src/assets/jss/react-material/components/headerLinksStyle.js b/src/assets/jss/react-material/components/headerLinksStyle.js new file mode 100644 index 0000000..3ab34dc --- /dev/null +++ b/src/assets/jss/react-material/components/headerLinksStyle.js @@ -0,0 +1,205 @@ +import { + grayColor, + whiteColor, + mlAuto, + hexToRgb, +} from "assets/jss/react-material"; + +import tooltip from "assets/jss/react-material/tooltipsStyle"; + +const headerLinksStyle = (theme) => ({ + list: { + [theme.breakpoints.up("md")]: { + WebkitBoxAlign: "center", + MsFlexAlign: "center", + alignItems: "center", + WebkitBoxOrient: "horizontal", + WebkitBoxDirection: "normal", + MsFlexDirection: "row", + flexDirection: "row", + }, + [theme.breakpoints.down("sm")]: { + display: "block", + }, + marginTop: "0px", + display: "flex", + paddingLeft: "0", + marginBottom: "0", + listStyle: "none", + padding: "0", + }, + listItem: { + float: "left", + color: "inherit", + position: "relative", + display: "block", + width: "auto", + margin: "0", + padding: "0", + [theme.breakpoints.down("sm")]: { + "& ul": { + maxHeight: "400px", + overflow: "scroll", + }, + width: "100%", + "&:not(:last-child)": { + "&:after": { + width: "calc(100% - 30px)", + content: '""', + display: "block", + height: "1px", + marginLeft: "15px", + backgroundColor: grayColor[14], + }, + }, + }, + }, + listItemText: { + padding: "0 !important", + }, + navLink: { + color: "inherit", + position: "relative", + padding: "0.9375rem", + fontWeight: "400", + fontSize: "12px", + textTransform: "uppercase", + lineHeight: "20px", + textDecoration: "none", + margin: "0px", + display: "inline-flex", + "&:hover,&:focus": { + color: "inherit", + }, + "& .fab,& .far,& .fal,& .fas,& .material-icons": { + position: "relative", + top: "2px", + marginTop: "-4px", + marginRight: "4px", + marginBottom: "0px", + fontSize: "1.25rem", + }, + [theme.breakpoints.down("sm")]: { + width: "calc(100% - 30px)", + marginLeft: "15px", + marginBottom: "8px", + marginTop: "8px", + textAlign: "left", + "& > span:first-child": { + justifyContent: "flex-start", + }, + }, + "& svg": { + marginRight: "3px", + width: "20px", + height: "20px", + }, + }, + navLinkJustIcon: { + "& .fab,& .far,& .fal,& .fas,& .material-icons": { + marginRight: "0px", + }, + "& svg": { + marginRight: "0px", + }, + }, + navButton: { + position: "relative", + fontWeight: "400", + fontSize: "12px", + textTransform: "uppercase", + lineHeight: "20px", + textDecoration: "none", + margin: "0px", + display: "inline-flex", + [theme.breakpoints.down("sm")]: { + width: "calc(100% - 30px)", + marginLeft: "15px", + marginBottom: "5px", + marginTop: "5px", + textAlign: "left", + "& > span:first-child": { + justifyContent: "flex-start", + }, + }, + "& $icons": { + marginRight: "3px", + }, + }, + notificationNavLink: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "400", + fontSize: "12px", + textTransform: "uppercase", + lineHeight: "20px", + textDecoration: "none", + margin: "0px", + display: "inline-flex", + }, + registerNavLink: { + position: "relative", + fontWeight: "400", + fontSize: "12px", + textTransform: "uppercase", + lineHeight: "20px", + textDecoration: "none", + margin: "0px", + display: "inline-flex", + }, + navLinkActive: { + "&, &:hover, &:focus,&:active ": { + color: "inherit", + backgroundColor: "rgba(" + hexToRgb(whiteColor) + ", 0.1)", + }, + }, + icons: { + width: "20px", + height: "20px", + marginRight: "14px", + }, + dropdownIcons: { + width: "24px", + height: "24px", + marginRight: "14px", + opacity: "0.5", + marginTop: "-4px", + top: "1px", + verticalAlign: "middle", + fontSize: "24px", + position: "relative", + }, + socialIcons: { + position: "relative", + fontSize: "1.25rem", + maxWidth: "24px", + }, + dropdownLink: { + "&,&:hover,&:focus": { + color: "inherit", + textDecoration: "none", + display: "flex", + padding: "0.75rem 1.25rem 0.75rem 0.75rem", + }, + }, + ...tooltip, + marginRight5: { + marginRight: "5px", + }, + collapse: { + [theme.breakpoints.up("md")]: { + display: "flex !important", + MsFlexPreferredSize: "auto", + flexBasis: "auto", + }, + WebkitBoxFlex: "1", + MsFlexPositive: "1", + flexGrow: "1", + WebkitBoxAlign: "center", + MsFlexAlign: "center", + alignItems: "center", + }, + mlAuto, +}); + +export default headerLinksStyle; diff --git a/src/assets/jss/react-material/components/headerStyle.js b/src/assets/jss/react-material/components/headerStyle.js new file mode 100644 index 0000000..11c709a --- /dev/null +++ b/src/assets/jss/react-material/components/headerStyle.js @@ -0,0 +1,212 @@ +import { + container, + defaultFont, + primaryColor, + infoColor, + successColor, + warningColor, + dangerColor, + roseColor, + transition, + boxShadow, + drawerWidth, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const headerStyle = (theme) => ({ + appBar: { + display: "flex", + border: "0", + borderRadius: "3px", + padding: "0.625rem 0", + marginBottom: "20px", + color: grayColor[15], + width: "100%", + backgroundColor: whiteColor, + boxShadow: + "0 4px 18px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.15)", + transition: "all 150ms ease 0s", + alignItems: "center", + flexFlow: "row nowrap", + justifyContent: "flex-start", + position: "relative", + }, + absolute: { + position: "absolute", + top: "auto", + }, + fixed: { + position: "fixed", + }, + container: { + ...container, + minHeight: "50px", + alignItems: "center", + justifyContent: "space-between", + display: "flex", + flexWrap: "nowrap", + }, + title: { + letterSpacing: "unset", + "&,& a": { + ...defaultFont, + minWidth: "unset", + lineHeight: "30px", + fontSize: "18px", + borderRadius: "3px", + textTransform: "none", + whiteSpace: "nowrap", + color: "inherit", + "&:hover,&:focus": { + color: "inherit", + background: "transparent", + }, + }, + }, + appResponsive: { + margin: "20px 10px", + marginTop: "0px", + }, + primary: { + backgroundColor: primaryColor[0], + color: whiteColor, + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.46)", + }, + info: { + backgroundColor: infoColor[0], + color: whiteColor, + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.46)", + }, + success: { + backgroundColor: successColor[0], + color: whiteColor, + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(successColor[0]) + + ", 0.46)", + }, + warning: { + backgroundColor: warningColor[0], + color: whiteColor, + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.46)", + }, + danger: { + backgroundColor: dangerColor[0], + color: whiteColor, + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.46)", + }, + rose: { + backgroundColor: roseColor[0], + color: whiteColor, + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(roseColor[0]) + + ", 0.46)", + }, + transparent: { + backgroundColor: "transparent !important", + boxShadow: "none", + paddingTop: "25px", + color: whiteColor, + }, + dark: { + color: whiteColor, + backgroundColor: grayColor[9] + " !important", + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 12px -5px rgba(" + + hexToRgb(grayColor[9]) + + ", 0.46)", + }, + white: { + border: "0", + padding: "0.625rem 0", + marginBottom: "20px", + color: grayColor[15], + backgroundColor: whiteColor + " !important", + boxShadow: + "0 4px 18px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.15)", + }, + drawerPaper: { + border: "none", + bottom: "0", + transitionProperty: "top, bottom, width", + transitionDuration: ".2s, .2s, .35s", + transitionTimingFunction: "linear, linear, ease", + width: drawerWidth, + ...boxShadow, + position: "fixed", + display: "block", + top: "0", + height: "100vh", + right: "0", + left: "auto", + visibility: "visible", + overflowY: "visible", + borderTop: "none", + textAlign: "left", + paddingRight: "0px", + paddingLeft: "0", + ...transition, + }, + hidden: { + width: "100%", + }, + collapse: { + [theme.breakpoints.up("md")]: { + display: "flex !important", + MsFlexPreferredSize: "auto", + flexBasis: "auto", + }, + WebkitBoxFlex: "1", + MsFlexPositive: "1", + flexGrow: "1", + WebkitBoxAlign: "center", + MsFlexAlign: "center", + alignItems: "center", + }, + closeButtonDrawer: { + position: "absolute", + right: "8px", + top: "9px", + zIndex: "1", + }, +}); + +export default headerStyle; diff --git a/src/assets/jss/react-material/components/infoStyle.js b/src/assets/jss/react-material/components/infoStyle.js new file mode 100644 index 0000000..0b9cf33 --- /dev/null +++ b/src/assets/jss/react-material/components/infoStyle.js @@ -0,0 +1,76 @@ +import { + primaryColor, + warningColor, + dangerColor, + successColor, + infoColor, + roseColor, + grayColor, + title, +} from "assets/jss/react-material"; + +const infoStyle = { + infoArea: { + maxWidth: "360px", + margin: "0 auto", + padding: "70px 0 30px", + }, + iconWrapper: { + float: "left", + marginTop: "24px", + marginRight: "10px", + }, + primary: { + color: primaryColor[0], + }, + warning: { + color: warningColor[0], + }, + danger: { + color: dangerColor[0], + }, + success: { + color: successColor[0], + }, + info: { + color: infoColor[0], + }, + rose: { + color: roseColor[0], + }, + gray: { + color: grayColor[0], + }, + icon: { + width: "2.25rem", + height: "2.25rem", + fontSize: "2.25rem", + }, + descriptionWrapper: { + color: grayColor[0], + overflow: "hidden", + }, + title: { + ...title, + margin: "1.75rem 0 0.875rem !important", + minHeight: "unset", + }, + description: { + color: grayColor[0], + overflow: "hidden", + marginTop: "0px", + "& p": { + color: grayColor[0], + fontSize: "14px", + }, + }, + iconWrapperVertical: { + float: "none", + }, + iconVertical: { + width: "61px", + height: "61px", + }, +}; + +export default infoStyle; diff --git a/src/assets/jss/react-material/components/instructionStyle.js b/src/assets/jss/react-material/components/instructionStyle.js new file mode 100644 index 0000000..b299235 --- /dev/null +++ b/src/assets/jss/react-material/components/instructionStyle.js @@ -0,0 +1,13 @@ +const instructionStyle = { + instruction: {}, + picture: {}, + image: { + width: "100%", + height: "auto", + borderRadius: "6px", + display: "block", + maxWidth: "100%", + }, +}; + +export default instructionStyle; diff --git a/src/assets/jss/react-material/components/mediaStyle.js b/src/assets/jss/react-material/components/mediaStyle.js new file mode 100644 index 0000000..633051c --- /dev/null +++ b/src/assets/jss/react-material/components/mediaStyle.js @@ -0,0 +1,70 @@ +import { + title, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const mediaStyle = { + media: { + display: "flex", + WebkitBoxAlign: "start", + alignItems: "flex-start", + "& p": { + color: grayColor[0], + fontSize: "1rem", + lineHeight: "1.6em", + }, + "& $media $mediaBody": { + paddingRight: "0px", + }, + }, + mediaLink: { + padding: "10px", + float: "left !important", + }, + mediaAvatar: { + margin: "0 auto", + width: "64px", + height: "64px", + overflow: "hidden", + borderRadius: "50%", + marginRight: "15px", + boxShadow: + "0 6px 10px 0 rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 1px 18px 0 rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 3px 5px -1px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + "& img": { + width: "100%", + }, + }, + mediaBody: { + paddingRight: "10px", + WebkitBoxFlex: "1", + flex: "1", + }, + mediaHeading: { + ...title, + marginTop: "10px", + marginBottom: "10px", + "& small": { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + }, + }, + mediaFooter: { + "& button, & a": { + marginBottom: "20px", + }, + "&:after": { + display: "table", + content: '" "', + clear: "both", + }, + }, +}; + +export default mediaStyle; diff --git a/src/assets/jss/react-material/components/navPillsStyle.js b/src/assets/jss/react-material/components/navPillsStyle.js new file mode 100644 index 0000000..75c8803 --- /dev/null +++ b/src/assets/jss/react-material/components/navPillsStyle.js @@ -0,0 +1,162 @@ +import { + roseColor, + primaryColor, + infoColor, + successColor, + warningColor, + dangerColor, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const navPillsStyle = (theme) => ({ + root: { + marginTop: "20px", + paddingLeft: "0", + marginBottom: "0", + overflow: "visible !important", + }, + flexContainer: { + [theme.breakpoints.down("xs")]: { + display: "flex", + flexWrap: "wrap", + }, + }, + displayNone: { + display: "none !important", + }, + fixed: { + overflow: "visible !important", + }, + horizontalDisplay: { + display: "block", + }, + pills: { + float: "left", + position: "relative", + display: "block", + borderRadius: "30px", + minWidth: "100px", + textAlign: "center", + transition: "all .3s", + padding: "10px 15px", + color: grayColor[15], + height: "auto", + opacity: "1", + maxWidth: "100%", + margin: "0 5px", + minHeight: "unset", + lineHeight: "24px", + textTransform: "uppercase", + fontSize: "12px", + fontWeight: "500", + }, + pillsWithIcons: { + borderRadius: "4px", + }, + tabIcon: { + width: "30px", + height: "30px", + display: "block", + margin: "15px 0 !important", + }, + horizontalPills: { + width: "100%", + float: "none !important", + "& + button": { + margin: "10px 0", + }, + }, + contentWrapper: { + marginTop: "20px", + "& .react-swipeable-view-container > div > div": { + paddingLeft: "15px", + paddingRight: "15px", + }, + }, + primary: { + "&,&:hover": { + color: whiteColor, + backgroundColor: primaryColor[0], + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.4)", + }, + }, + info: { + "&,&:hover": { + color: whiteColor, + backgroundColor: infoColor[0], + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(successColor[0]) + + ", 0.4)", + }, + }, + success: { + "&,&:hover": { + color: whiteColor, + backgroundColor: successColor[0], + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(successColor[0]) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(successColor[0]) + + ", 0.2), 0 1px 5px 0 rgba(" + + hexToRgb(successColor[0]) + + ", 0.12)", + }, + }, + warning: { + "&,&:hover": { + color: whiteColor, + backgroundColor: warningColor[0], + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.4)", + }, + }, + danger: { + "&,&:hover": { + color: whiteColor, + backgroundColor: dangerColor[0], + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.4)", + }, + }, + rose: { + "&,&:hover": { + color: whiteColor, + backgroundColor: roseColor[0], + boxShadow: + "0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 7px 10px -5px rgba(" + + hexToRgb(roseColor[0]) + + ", 0.4)", + }, + }, + alignCenter: { + alignItems: "center", + justifyContent: "center", + }, + tabLabelContainer: { + padding: "unset !important", + }, +}); + +export default navPillsStyle; diff --git a/src/assets/jss/react-material/components/paginationStyle.js b/src/assets/jss/react-material/components/paginationStyle.js new file mode 100644 index 0000000..1c24f2d --- /dev/null +++ b/src/assets/jss/react-material/components/paginationStyle.js @@ -0,0 +1,161 @@ +import { + grayColor, + primaryColor, + infoColor, + successColor, + warningColor, + whiteColor, + dangerColor, + hexToRgb, +} from "assets/jss/react-material"; + +const paginationStyle = { + pagination: { + display: "flex", + paddingLeft: "0", + listStyle: "none", + borderRadius: "0.25rem", + }, + paginationItem: { + display: "inline", + }, + paginationLink: { + ":first-of-type": { + marginleft: "0", + }, + letterSpacing: "unset", + border: "0", + borderRadius: "30px !important", + transition: "all .3s", + padding: "0px 11px", + margin: "0 3px", + minWidth: "30px", + height: "30px", + minHeight: "auto", + lineHeight: "30px", + fontWeight: "400", + fontSize: "12px", + textTransform: "uppercase", + background: "transparent", + position: "relative", + float: "left", + textDecoration: "none", + boxSizing: "border-box", + "&,&:hover,&:focus": { + color: grayColor[0], + }, + "&:hover,&:focus": { + zIndex: "3", + backgroundColor: grayColor[2], + borderColor: grayColor[6], + }, + "&:hover": { + cursor: "pointer", + }, + }, + primary: { + "&,&:hover,&:focus": { + backgroundColor: primaryColor[0], + borderColor: primaryColor[0], + color: whiteColor, + boxShadow: + "0 4px 5px 0 rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.14), 0 1px 10px 0 rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.12), 0 2px 4px -1px rgba(" + + hexToRgb(primaryColor[0]) + + ", 0.2)", + }, + "&:hover,&:focus": { + zIndex: "2", + cursor: "default", + }, + }, + info: { + "&,&:hover,&:focus": { + backgroundColor: infoColor[0], + borderColor: infoColor[0], + color: whiteColor, + boxShadow: + "0 4px 5px 0 rgba(" + + hexToRgb(infoColor[0]) + + ", 0.14), 0 1px 10px 0 rgba(" + + hexToRgb(infoColor[0]) + + ", 0.12), 0 2px 4px -1px rgba(" + + hexToRgb(infoColor[0]) + + ", 0.2)", + }, + "&:hover,&:focus": { + zIndex: "2", + cursor: "default", + }, + }, + success: { + "&,&:hover,&:focus": { + backgroundColor: successColor[0], + borderColor: successColor[0], + color: whiteColor, + boxShadow: + "0 4px 5px 0 rgba(" + + hexToRgb(successColor[0]) + + ", 0.14), 0 1px 10px 0 rgba(" + + hexToRgb(successColor[0]) + + ", 0.12), 0 2px 4px -1px rgba(" + + hexToRgb(successColor[0]) + + ", 0.2)", + }, + "&:hover,&:focus": { + zIndex: "2", + cursor: "default", + }, + }, + warning: { + "&,&:hover,&:focus": { + backgroundColor: warningColor[0], + borderColor: warningColor[0], + color: whiteColor, + boxShadow: + "0 4px 5px 0 rgba(" + + hexToRgb(warningColor[0]) + + ", 0.14), 0 1px 10px 0 rgba(" + + hexToRgb(warningColor[0]) + + ", 0.12), 0 2px 4px -1px rgba(" + + hexToRgb(warningColor[0]) + + ", 0.2)", + }, + "&:hover,&:focus": { + zIndex: "2", + cursor: "default", + }, + }, + danger: { + "&,&:hover,&:focus": { + backgroundColor: dangerColor[0], + borderColor: dangerColor[0], + color: whiteColor, + boxShadow: + "0 4px 5px 0 rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.14), 0 1px 10px 0 rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.12), 0 2px 4px -1px rgba(" + + hexToRgb(dangerColor[0]) + + ", 0.2)", + }, + "&:hover,&:focus": { + zIndex: "2", + cursor: "default", + }, + }, + disabled: { + "&,&:hover,&:focus": { + color: grayColor[10], + cursor: "not-allowed", + backgroundColor: whiteColor, + borderColor: grayColor[6], + }, + }, +}; + +export default paginationStyle; diff --git a/src/assets/jss/react-material/components/parallaxStyle.js b/src/assets/jss/react-material/components/parallaxStyle.js new file mode 100644 index 0000000..806d1f6 --- /dev/null +++ b/src/assets/jss/react-material/components/parallaxStyle.js @@ -0,0 +1,187 @@ +import { + blackColor, + primaryColor, + roseColor, + infoColor, + successColor, + warningColor, + dangerColor, + hexToRgb, +} from "assets/jss/react-material"; + +const parallaxStyle = { + parallax: { + height: "100vh", + maxHeight: "1600px", + overflow: "hidden", + position: "relative", + backgroundPosition: "50%", + backgroundSize: "cover", + margin: "0", + padding: "0", + border: "0", + display: "flex", + alignItems: "center", + }, + filter: {}, + primaryColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(primaryColor[4]) + + ",.56),rgba(" + + hexToRgb(primaryColor[5]) + + ",.95))", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + roseColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(roseColor[3]) + + ",.56),rgba(" + + hexToRgb(roseColor[4]) + + ",.95))", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + darkColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + infoColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(infoColor[6]) + + ",.56),rgba(" + + hexToRgb(infoColor[7]) + + ",.95))", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + successColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(successColor[6]) + + ",.56),rgba(" + + hexToRgb(successColor[7]) + + ",.95))", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + warningColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(warningColor[6]) + + ",.56),rgba(" + + hexToRgb(warningColor[7]) + + ",.95))", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + dangerColor: { + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(dangerColor[6]) + + ",.56),rgba(" + + hexToRgb(dangerColor[7]) + + ",.95))", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + small: { + height: "65vh", + minHeight: "65vh", + maxHeight: "650px", + }, +}; + +export default parallaxStyle; diff --git a/src/assets/jss/react-material/components/snackbarContentStyle.js b/src/assets/jss/react-material/components/snackbarContentStyle.js new file mode 100644 index 0000000..9ff75b2 --- /dev/null +++ b/src/assets/jss/react-material/components/snackbarContentStyle.js @@ -0,0 +1,99 @@ +import { + defaultFont, + primaryBoxShadow, + infoBoxShadow, + successBoxShadow, + warningBoxShadow, + dangerBoxShadow, + container, + blackColor, + whiteColor, + grayColor, + primaryColor, + warningColor, + dangerColor, + successColor, + infoColor, + hexToRgb, +} from "assets/jss/react-material"; + +const snackbarContentStyle = { + root: { + ...defaultFont, + position: "relative", + padding: "20px 15px", + lineHeight: "20px", + marginBottom: "20px", + fontSize: "14px", + backgroundColor: "white", + color: grayColor[15], + borderRadius: "0px", + maxWidth: "100%", + minWidth: "auto", + boxShadow: + "0 12px 20px -10px rgba(" + + hexToRgb(whiteColor) + + ", 0.28), 0 4px 20px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 7px 8px -5px rgba(" + + hexToRgb(whiteColor) + + ", 0.2)", + }, + info: { + backgroundColor: infoColor[3], + color: whiteColor, + ...infoBoxShadow, + }, + success: { + backgroundColor: successColor[3], + color: whiteColor, + ...successBoxShadow, + }, + warning: { + backgroundColor: warningColor[3], + color: whiteColor, + ...warningBoxShadow, + }, + danger: { + backgroundColor: dangerColor[3], + color: whiteColor, + ...dangerBoxShadow, + }, + primary: { + backgroundColor: primaryColor[3], + color: whiteColor, + ...primaryBoxShadow, + }, + message: { + padding: "0", + display: "block", + maxWidth: "89%", + }, + close: { + width: "20px", + height: "20px", + }, + iconButton: { + width: "24px", + height: "24px", + float: "right", + fontSize: "1.5rem", + fontWeight: "500", + lineHeight: "1", + position: "absolute", + right: "-4px", + top: "0", + padding: "0", + }, + icon: { + display: "block", + float: "left", + marginRight: "1.071rem", + }, + container: { + ...container, + position: "relative", + }, +}; + +export default snackbarContentStyle; diff --git a/src/assets/jss/react-material/components/tableStyle.js b/src/assets/jss/react-material/components/tableStyle.js new file mode 100644 index 0000000..2ae9a39 --- /dev/null +++ b/src/assets/jss/react-material/components/tableStyle.js @@ -0,0 +1,121 @@ +import { + warningColor, + primaryColor, + dangerColor, + successColor, + infoColor, + roseColor, + grayColor, + defaultFont, +} from "assets/jss/react-material"; + +const tableStyle = { + warning: { + color: warningColor[0], + }, + primary: { + color: primaryColor[0], + }, + danger: { + color: dangerColor[0], + }, + success: { + color: successColor[0], + }, + info: { + color: infoColor[0], + }, + rose: { + color: roseColor[0], + }, + gray: { + color: grayColor[0], + }, + right: { + textAlign: "right", + }, + table: { + marginBottom: "0", + width: "100%", + maxWidth: "100%", + backgroundColor: "transparent", + borderSpacing: "0", + borderCollapse: "collapse", + overflow: "auto", + "& > tbody > tr, & > thead > tr": { + height: "auto", + }, + }, + tableShoppingHead: { + fontSize: "0.75em !important", + textTransform: "uppercase !important", + }, + tableCell: { + ...defaultFont, + lineHeight: "1.5em", + padding: "12px 8px!important", + verticalAlign: "middle", + fontSize: "0.875rem", + borderBottom: "none", + borderTop: "1px solid " + grayColor[6], + position: "relative", + color: grayColor[1], + }, + tableHeadCell: { + fontSize: "1.063rem", + borderBottomWidth: "1px", + fontWeight: "300", + color: grayColor[15], + borderTopWidth: "0 !important", + }, + tableCellTotal: { + fontWeight: "500", + fontSize: "1.0625rem", + paddingTop: "20px", + textAlign: "right", + }, + tableCellAmount: { + fontSize: "26px", + fontWeight: "300", + marginTop: "5px", + textAlign: "right", + }, + tableResponsive: { + minHeight: "0.1%", + overflowX: "auto", + }, + tableStripedRow: { + backgroundColor: grayColor[16], + }, + tableRowHover: { + "&:hover": { + backgroundColor: grayColor[23], + }, + }, + warningRow: { + backgroundColor: warningColor[4], + "&:hover": { + backgroundColor: warningColor[5], + }, + }, + dangerRow: { + backgroundColor: dangerColor[4], + "&:hover": { + backgroundColor: dangerColor[5], + }, + }, + successRow: { + backgroundColor: successColor[4], + "&:hover": { + backgroundColor: successColor[5], + }, + }, + infoRow: { + backgroundColor: infoColor[4], + "&:hover": { + backgroundColor: infoColor[5], + }, + }, +}; + +export default tableStyle; diff --git a/src/assets/jss/react-material/components/typographyStyle.js b/src/assets/jss/react-material/components/typographyStyle.js new file mode 100644 index 0000000..a07c27e --- /dev/null +++ b/src/assets/jss/react-material/components/typographyStyle.js @@ -0,0 +1,87 @@ +import { + defaultFont, + primaryColor, + infoColor, + successColor, + warningColor, + dangerColor, + roseColor, + grayColor, +} from "assets/jss/react-material"; + +const typographyStyle = { + defaultFontStyle: { + ...defaultFont, + fontSize: "14px", + }, + defaultHeaderMargins: { + marginTop: "20px", + marginBottom: "10px", + }, + quote: { + padding: "10px 20px", + margin: "0 0 20px", + fontSize: "1.25rem", + borderLeft: "5px solid " + grayColor[2], + }, + quoteText: { + margin: "0 0 10px", + fontStyle: "italic", + }, + quoteAuthor: { + display: "block", + fontSize: "80%", + lineHeight: "1.42857143", + color: grayColor[10], + }, + mutedText: { + "&, & *": { + color: grayColor[7], + display: "inline-block", + }, + }, + primaryText: { + "&, & *": { + color: primaryColor[0], + display: "inline-block", + }, + }, + infoText: { + "&, & *": { + color: infoColor[0], + display: "inline-block", + }, + }, + successText: { + "&, & *": { + color: successColor[0], + display: "inline-block", + }, + }, + warningText: { + "&, & *": { + color: warningColor[0], + display: "inline-block", + }, + }, + dangerText: { + "&, & *": { + color: dangerColor[0], + display: "inline-block", + }, + }, + roseText: { + "&, & *": { + color: roseColor[0], + display: "inline-block", + }, + }, + smallText: { + fontSize: "65%", + fontWeight: "400", + lineHeight: "1", + color: grayColor[10], + }, +}; + +export default typographyStyle; diff --git a/src/assets/jss/react-material/customCheckboxRadioSwitchStyle.js b/src/assets/jss/react-material/customCheckboxRadioSwitchStyle.js new file mode 100644 index 0000000..1bd457e --- /dev/null +++ b/src/assets/jss/react-material/customCheckboxRadioSwitchStyle.js @@ -0,0 +1,194 @@ +import { + primaryColor, + dangerColor, + roseColor, + grayColor, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +const customCheckboxRadioSwitch = { + checkRoot: { + padding: "14px", + "&:hover": { + backgroundColor: + "rgba(" + hexToRgb(primaryColor[0]) + ", 0.14) !important", + }, + }, + radioRoot: { + padding: "16px", + "&:hover": { + backgroundColor: + "rgba(" + hexToRgb(primaryColor[0]) + ", 0.14) !important", + }, + }, + labelRoot: { + marginLeft: "-14px", + }, + checkboxAndRadio: { + position: "relative", + display: "block", + marginTop: "10px", + marginBottom: "10px", + }, + checkboxAndRadioHorizontal: { + position: "relative", + display: "block", + "&:first-child": { + marginTop: "10px", + }, + "&:not(:first-child)": { + marginTop: "-14px", + }, + marginTop: "0", + marginBottom: "0", + }, + checked: { + color: primaryColor[0] + "!important", + }, + checkedIcon: { + width: "20px", + height: "20px", + border: "1px solid rgba(" + hexToRgb(blackColor) + ", 0.84)", + borderRadius: "3px", + }, + uncheckedIcon: { + width: "0px", + height: "0px", + padding: "9px", + border: "1px solid rgba(" + hexToRgb(blackColor) + ", .54)", + borderRadius: "3px", + }, + disabledCheckboxAndRadio: { + "& $checkedIcon,& $uncheckedIcon,& $radioChecked,& $radioUnchecked": { + borderColor: blackColor, + opacity: "0.26", + color: blackColor, + }, + }, + label: { + cursor: "pointer", + paddingLeft: "0", + color: grayColor[12], + fontSize: "14px", + lineHeight: "1.428571429", + fontWeight: "400", + display: "inline-flex", + transition: "0.3s ease all", + letterSpacing: "unset", + }, + labelHorizontal: { + color: "rgba(" + hexToRgb(blackColor) + ", 0.26)", + cursor: "pointer", + display: "inline-flex", + fontSize: "14px", + lineHeight: "1.428571429", + fontWeight: "400", + paddingTop: "39px", + marginRight: "0", + "@media (min-width: 992px)": { + float: "right", + }, + }, + labelHorizontalRadioCheckbox: { + paddingTop: "22px", + }, + labelLeftHorizontal: { + color: "rgba(" + hexToRgb(blackColor) + ", 0.26)", + cursor: "pointer", + display: "inline-flex", + fontSize: "14px", + lineHeight: "1.428571429", + fontWeight: "400", + paddingTop: "22px", + marginRight: "0", + }, + labelError: { + color: dangerColor[0], + }, + radio: { + color: primaryColor[0] + "!important", + }, + radioChecked: { + width: "16px", + height: "16px", + border: "1px solid " + primaryColor[0], + borderRadius: "50%", + }, + radioUnchecked: { + width: "0px", + height: "0px", + padding: "7px", + border: "1px solid rgba(" + hexToRgb(blackColor) + ", .54)", + borderRadius: "50%", + }, + inlineChecks: { + marginTop: "8px", + }, + iconCheckbox: { + height: "116px", + width: "116px", + color: grayColor[0], + "& > span:first-child": { + borderWidth: "4px", + borderStyle: "solid", + borderColor: grayColor[17], + textAlign: "center", + verticalAlign: "middle", + borderRadius: "50%", + color: "inherit", + margin: "0 auto 20px", + transition: "all 0.2s", + }, + "&:hover": { + color: roseColor[0], + "& > span:first-child": { + borderColor: roseColor[0], + }, + }, + }, + iconCheckboxChecked: { + color: roseColor[0], + "& > span:first-child": { + borderColor: roseColor[0], + }, + }, + iconCheckboxIcon: { + fontSize: "40px", + lineHeight: "111px", + }, + switchBase: { + color: primaryColor[0] + "!important", + "&:hover": { + backgroundColor: + "rgba(" + hexToRgb(primaryColor[0]) + ", 0.14) !important", + }, + }, + switchIcon: { + boxShadow: "0 1px 3px 1px rgba(" + hexToRgb(blackColor) + ", 0.4)", + color: whiteColor + " !important", + border: "1px solid rgba(" + hexToRgb(blackColor) + ", .54)", + }, + switchIconChecked: { + borderColor: primaryColor[0], + transform: "translateX(0px)!important", + }, + switchBar: { + width: "30px", + height: "15px", + backgroundColor: "rgb(" + hexToRgb(grayColor[24]) + ")", + borderRadius: "15px", + opacity: "0.7!important", + }, + switchChecked: { + "& + $switchBar": { + backgroundColor: "rgba(" + hexToRgb(primaryColor[0]) + ", 1) !important", + }, + "& $switchIcon": { + borderColor: primaryColor[0], + }, + }, +}; + +export default customCheckboxRadioSwitch; diff --git a/src/assets/jss/react-material/customSelectStyle.js b/src/assets/jss/react-material/customSelectStyle.js new file mode 100644 index 0000000..ddec31b --- /dev/null +++ b/src/assets/jss/react-material/customSelectStyle.js @@ -0,0 +1,133 @@ +import { + primaryColor, + primaryBoxShadow, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const customSelectStyle = { + select: { + padding: "12px 0 7px", + fontSize: ".75rem", + fontWeight: "400", + lineHeight: "1.42857", + textDecoration: "none", + textTransform: "uppercase", + color: grayColor[1], + letterSpacing: "0", + "&:focus": { + backgroundColor: "transparent", + }, + "&[aria-owns] + input + svg": { + transform: "rotate(180deg)", + }, + "& + input + svg": { + transition: "all 300ms linear", + }, + }, + selectFormControl: { + margin: "10px 1px 10px 0px !important", + "& > div": { + "&:before": { + borderBottomWidth: "1px !important", + borderBottomColor: grayColor[11] + " !important", + }, + "&:after": { + borderBottomColor: primaryColor[0] + "!important", + }, + }, + }, + selectLabel: { + fontSize: "12px", + textTransform: "uppercase", + color: grayColor[1] + " !important", + top: "8px", + }, + selectMenu: { + "& > div > ul": { + border: "0", + padding: "5px 0", + margin: "0", + boxShadow: "none", + minWidth: "100%", + borderRadius: "4px", + boxSizing: "border-box", + display: "block", + fontSize: "14px", + textAlign: "left", + listStyle: "none", + backgroundColor: whiteColor, + backgroundClip: "padding-box", + }, + "& $selectPaper $selectMenuItemSelectedMultiple": { + backgroundColor: "inherit", + }, + }, + selectMenuItem: { + fontSize: "13px", + padding: "10px 20px", + margin: "0 5px", + borderRadius: "2px", + transition: "all 150ms linear", + display: "block", + clear: "both", + fontWeight: "400", + lineHeight: "2", + whiteSpace: "nowrap", + color: grayColor[8], + paddingRight: "30px", + "&:hover": { + backgroundColor: primaryColor[0], + color: whiteColor, + ...primaryBoxShadow, + }, + }, + selectMenuItemSelected: { + backgroundColor: primaryColor[0] + "!important", + color: whiteColor, + }, + selectMenuItemSelectedMultiple: { + "&:hover": { + backgroundColor: primaryColor[0] + "!important", + color: whiteColor, + ...primaryBoxShadow, + "&:after": { + color: whiteColor, + }, + }, + "&:after": { + top: "16px", + right: "12px", + width: "12px", + height: "5px", + borderLeft: "2px solid currentColor", + transform: "rotate(-45deg)", + opacity: "1", + color: grayColor[1], + position: "absolute", + content: "''", + borderBottom: "2px solid currentColor", + transition: "opacity 90ms cubic-bezier(0,0,.2,.1)", + }, + }, + selectPaper: { + boxSizing: "borderBox", + borderRadius: "4px", + padding: "0", + minWidth: "100%", + display: "block", + border: "0", + boxShadow: "0 2px 5px 0 rgba(" + hexToRgb(blackColor) + ", 0.26)", + backgroundClip: "padding-box", + margin: "2px 0 0", + fontSize: "14px", + textAlign: "left", + listStyle: "none", + backgroundColor: "transparent", + maxHeight: "266px", + }, +}; + +export default customSelectStyle; diff --git a/src/assets/jss/react-material/imagesStyles.js b/src/assets/jss/react-material/imagesStyles.js new file mode 100644 index 0000000..deb33b1 --- /dev/null +++ b/src/assets/jss/react-material/imagesStyles.js @@ -0,0 +1,50 @@ +import { blackColor, hexToRgb } from "assets/jss/react-material"; + +const imagesStyles = { + imgFluid: { + maxWidth: "100%", + height: "auto", + }, + imgRounded: { + borderRadius: "6px !important", + }, + imgRoundedCircle: { + borderRadius: "50% !important", + }, + imgRaised: { + boxShadow: + "0 5px 15px -8px rgba(" + + hexToRgb(blackColor) + + ", 0.24), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + }, + imgGallery: { + width: "100%", + marginBottom: "2.142rem", + }, + imgCardTop: { + width: "100%", + borderTopLeftRadius: "calc(.25rem - 1px)", + borderTopRightRadius: "calc(.25rem - 1px)", + }, + imgCardBottom: { + width: "100%", + borderBottomLeftRadius: "calc(.25rem - 1px)", + borderBottomRightRadius: "calc(.25rem - 1px)", + }, + imgCard: { + width: "100%", + borderRadius: "calc(.25rem - 1px)", + }, + imgCardOverlay: { + position: "absolute", + top: "0", + right: "0", + bottom: "0", + left: "0", + padding: "1.25rem", + }, +}; + +export default imagesStyles; diff --git a/src/assets/jss/react-material/modalStyle.js b/src/assets/jss/react-material/modalStyle.js new file mode 100644 index 0000000..efb3aca --- /dev/null +++ b/src/assets/jss/react-material/modalStyle.js @@ -0,0 +1,165 @@ +import { whiteColor, grayColor } from "assets/jss/react-material"; + +const modalStyle = (theme) => ({ + modalRoot: { + overflow: "auto", + display: "block", + }, + modal: { + [theme.breakpoints.up("sm")]: { + maxWidth: "500px", + margin: "auto", + marginTop: "130px !important", + }, + borderRadius: "6px", + overflow: "visible", + maxHeight: "unset", + width: "100%", + }, + modalHeader: { + borderBottom: "none", + paddingTop: "24px", + paddingRight: "24px", + paddingBottom: "0", + paddingLeft: "24px", + minHeight: "16.43px", + }, + modalTitle: { + margin: "0", + lineHeight: "1.5", + }, + modalCloseButton: { + "&, &:hover": { + color: grayColor[0], + }, + "&:hover": { + opacity: "1", + }, + cursor: "pointer", + padding: "1rem", + margin: "-1rem -1rem -1rem auto", + backgroundColor: "transparent", + border: "0", + WebkitAppearance: "none", + float: "right", + fontSize: "1.5rem", + fontWeight: "500", + lineHeight: "1", + textShadow: "0 1px 0 " + whiteColor, + opacity: ".5", + }, + modalClose: { + width: "16px", + height: "16px", + }, + modalBody: { + paddingTop: "24px", + paddingRight: "24px", + paddingBottom: "16px", + paddingLeft: "24px", + position: "relative", + overflow: "visible", + }, + modalFooter: { + padding: "15px", + textAlign: "right", + paddingTop: "0", + margin: "0", + }, + modalFooterCenter: { + marginLeft: "auto", + marginRight: "auto", + }, + instructionNoticeModal: { + marginBottom: "25px", + }, + imageNoticeModal: { + maxWidth: "150px", + }, + modalLarge: { + [theme.breakpoints.up("md")]: { + maxWidth: "800px", + }, + }, + modalSmall: { + [theme.breakpoints.up("sm")]: { + width: "300px", + margin: "auto", + }, + margin: "0 auto", + }, + modalSmallBody: { + marginTop: "20px", + }, + modalSmallFooterFirstButton: { + margin: "0", + paddingLeft: "16px", + paddingRight: "16px", + width: "auto", + }, + modalSmallFooterSecondButton: { + marginBottom: "0", + marginLeft: "5px", + }, + modalLogin: { + maxWidth: "360px", + overflowY: "visible", + width: "100%", + "& $modalCloseButton": { + color: whiteColor, + top: "-10px", + right: "10px", + textShadow: "none", + position: "relative", + }, + "& $modalHeader": { + borderBottom: "none", + paddingTop: "24px", + paddingRight: "24px", + paddingBottom: "0", + paddingLeft: "24px", + }, + "& $modalBody": { + paddingBottom: "0", + paddingTop: "0", + }, + "& $modalFooter": { + paddingBottom: "0", + paddingTop: "0", + }, + }, + modalLoginCard: { + marginBottom: "0", + margin: "0", + "& $modalHeader": { + paddingTop: "0", + }, + }, + modalSignup: { + maxWidth: "900px", + width: "100%", + "& $modalHeader": { + paddingTop: "0", + }, + "& $modalTitle": { + textAlign: "center", + width: "100%", + marginTop: "0.625rem", + }, + "& $modalBody": { + paddingBottom: "0", + paddingTop: "0", + }, + }, + modalSignupCard: { + padding: "40px 0", + margin: "0", + }, + containerSignup: { + [theme.breakpoints.down("sm")]: { + height: "inherit", // Prevent matUI default from pushing part of model out of screen + }, + }, +}); + +export default modalStyle; diff --git a/src/assets/jss/react-material/popoverStyles.js b/src/assets/jss/react-material/popoverStyles.js new file mode 100644 index 0000000..89c6c1d --- /dev/null +++ b/src/assets/jss/react-material/popoverStyles.js @@ -0,0 +1,59 @@ +import { + whiteColor, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const popoverStyles = { + popover: { + padding: "0", + boxShadow: + "0 16px 24px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 6px 30px 5px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + lineHeight: "1.5em", + background: "rgba(" + hexToRgb(grayColor[15]) + ",0.9)", + border: "none", + borderRadius: "3px", + display: "block", + maxWidth: "276px", + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontStyle: "normal", + fontWeight: "400", + textAlign: "start", + textDecoration: "none", + textShadow: "none", + textTransform: "none", + letterSpacing: "normal", + wordBreak: "normal", + wordSpacing: "normal", + whiteSpace: "normal", + lineBreak: "auto", + fontSize: "0.875rem", + wordWrap: "break-word", + }, + popoverBottom: { + marginTop: "5px", + }, + popoverHeader: { + border: "none", + padding: "15px 15px 5px", + fontSize: "1.125rem", + margin: "0", + color: whiteColor, + borderTopLeftRadius: "calc(0.3rem - 1px)", + borderTopRightRadius: "calc(0.3rem - 1px)", + }, + popoverBody: { + padding: "10px 15px 15px", + lineHeight: "1.4", + color: whiteColor, + }, +}; + +export default popoverStyles; diff --git a/src/assets/jss/react-material/rotatingCards.js b/src/assets/jss/react-material/rotatingCards.js new file mode 100644 index 0000000..4cd9528 --- /dev/null +++ b/src/assets/jss/react-material/rotatingCards.js @@ -0,0 +1,132 @@ +import { + whiteColor, + blackColor, + primaryColor, + roseColor, + infoColor, + warningColor, + dangerColor, + successColor, + hexToRgb, +} from "assets/jss/react-material"; + +const style = { + rotatingCardContainer: { + perspective: "800px", + "& $cardRotate $back": { + transform: "rotateY(180deg)", + zIndex: "5", + textAlign: "center", + width: "100%", + height: "100%", + }, + "&:not($manualRotate):hover $cardRotate": { + transform: "rotateY(180deg)", + }, + "&$manualRotate$activateRotate $cardRotate": { + transform: "rotateY(180deg)", + }, + "& $cardRotate $front": { + zIndex: "2", + position: "relative", + }, + "& $cardRotate $front, & $cardRotate $back": { + backfaceVisibility: "hidden", + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 3px 1px -2px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 1px 5px 0 rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + position: "absolute", + backgroundColor: whiteColor, + borderRadius: "6px", + top: "0", + left: "0", + WebkitBoxPack: "center", + MsFlexPack: "center", + justifyContent: "center", + MsFlexLinePack: "center", + alignContent: "center", + display: "flex", + WebkitBoxOrient: "vertical", + WebkitBoxDirection: "normal", + flexDirection: "column", + }, + }, + activateRotate: {}, + manualRotate: {}, + cardRotate: { + transition: "all 0.8s cubic-bezier(0.34, 1.45, 0.7, 1)", + transformStyle: "preserve-3d", + position: "relative", + background: "transparent", + }, + front: {}, + back: {}, + wrapperBackground: { + backgroundPosition: "50%", + backgroundSize: "cover", + textAlign: "center", + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.56)", + borderRadius: "6px", + }, + }, + cardBodyRotate: { + WebkitBoxPack: "center", + MsFlexPack: "center", + justifyContent: "center", + MsFlexLinePack: "center", + alignContent: "center", + display: "flex", + WebkitBoxOrient: "vertical", + WebkitBoxDirection: "normal", + flexDirection: "column", + }, + wrapperPrimary: { + background: + "linear-gradient(60deg," + primaryColor[1] + "," + primaryColor[2] + ")", + "& h1 small": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + color: whiteColor, + }, + wrapperInfo: { + background: + "linear-gradient(60deg," + infoColor[1] + "," + infoColor[2] + ")", + color: whiteColor, + }, + wrapperSuccess: { + background: + "linear-gradient(60deg," + successColor[1] + "," + successColor[2] + ")", + color: whiteColor, + }, + wrapperWarning: { + background: + "linear-gradient(60deg," + warningColor[1] + "," + warningColor[2] + ")", + color: whiteColor, + }, + wrapperDanger: { + background: + "linear-gradient(60deg," + dangerColor[1] + "," + dangerColor[2] + ")", + color: whiteColor, + }, + wrapperRose: { + background: + "linear-gradient(60deg," + roseColor[1] + "," + roseColor[2] + ")", + color: whiteColor, + }, +}; + +export default style; diff --git a/src/assets/jss/react-material/tooltipsStyle.js b/src/assets/jss/react-material/tooltipsStyle.js new file mode 100644 index 0000000..d0354ea --- /dev/null +++ b/src/assets/jss/react-material/tooltipsStyle.js @@ -0,0 +1,42 @@ +import { + whiteColor, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const tooltipsStyle = { + tooltip: { + padding: "10px 15px", + minWidth: "130px", + color: whiteColor, + lineHeight: "1.7em", + background: "rgba(" + hexToRgb(grayColor[15]) + ",0.9)", + border: "none", + borderRadius: "3px", + boxShadow: + "0 8px 10px 1px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 3px 14px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 5px 5px -3px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + maxWidth: "200px", + textAlign: "center", + fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif', + fontSize: "0.875em", + fontStyle: "normal", + fontWeight: "400", + textShadow: "none", + textTransform: "none", + letterSpacing: "normal", + wordBreak: "normal", + wordSpacing: "normal", + wordWrap: "normal", + whiteSpace: "normal", + lineBreak: "auto", + }, +}; + +export default tooltipsStyle; diff --git a/src/assets/jss/react-material/views/aboutUsSections/contactStyle.js b/src/assets/jss/react-material/views/aboutUsSections/contactStyle.js new file mode 100644 index 0000000..d36125f --- /dev/null +++ b/src/assets/jss/react-material/views/aboutUsSections/contactStyle.js @@ -0,0 +1,31 @@ +import { + title, + description, + mrAuto, + mlAuto, +} from "assets/jss/react-material"; +import customSelectStyle from "assets/jss/react-material/customSelectStyle"; + +const contactStyle = { + title, + mrAuto, + mlAuto, + ...customSelectStyle, + description: { + ...description, + marginBottom: "70px", + }, + textCenter: { + textAlign: "center!important", + }, + selectUnderlineRoot: { + "& > div": { + marginTop: "13px", + }, + }, + aboutUs: { + padding: "80px 0px", + }, +}; + +export default contactStyle; diff --git a/src/assets/jss/react-material/views/aboutUsSections/descriptionStyle.js b/src/assets/jss/react-material/views/aboutUsSections/descriptionStyle.js new file mode 100644 index 0000000..766eddb --- /dev/null +++ b/src/assets/jss/react-material/views/aboutUsSections/descriptionStyle.js @@ -0,0 +1,21 @@ +import { + container, + mrAuto, + mlAuto, + description, +} from "assets/jss/react-material"; + +const descriptionStyle = { + container, + textCenter: { + textAlign: "center", + }, + aboutDescription: { + padding: "70px 0 0 0", + }, + mrAuto, + mlAuto, + description, +}; + +export default descriptionStyle; diff --git a/src/assets/jss/react-material/views/aboutUsSections/officeStyle.js b/src/assets/jss/react-material/views/aboutUsSections/officeStyle.js new file mode 100644 index 0000000..27e5b96 --- /dev/null +++ b/src/assets/jss/react-material/views/aboutUsSections/officeStyle.js @@ -0,0 +1,31 @@ +import { + title, + description, + mrAuto, + mlAuto, +} from "assets/jss/react-material"; +import imagesStyles from "assets/jss/react-material/imagesStyles"; + +const imgRaised = imagesStyles.imgRaised; +const rounded = imagesStyles.imgRounded; +const imgFluid = imagesStyles.imgFluid; + +const servicesStyle = { + title, + description, + mrAuto, + mlAuto, + textCenter: { + textAlign: "center!important", + }, + office: { + "& img": { + margin: "20px 0px", + }, + }, + imgRaised, + rounded, + imgFluid, +}; + +export default servicesStyle; diff --git a/src/assets/jss/react-material/views/aboutUsSections/servicesStyle.js b/src/assets/jss/react-material/views/aboutUsSections/servicesStyle.js new file mode 100644 index 0000000..723e2c3 --- /dev/null +++ b/src/assets/jss/react-material/views/aboutUsSections/servicesStyle.js @@ -0,0 +1,22 @@ +import { + title, + description, + mrAuto, + mlAuto, +} from "assets/jss/react-material"; + +const servicesStyle = { + title, + mrAuto, + mlAuto, + services: { + paddingTop: "10px", + paddingBottom: "80px", + }, + textCenter: { + textAlign: "center", + }, + description, +}; + +export default servicesStyle; diff --git a/src/assets/jss/react-material/views/aboutUsSections/teamStyle.js b/src/assets/jss/react-material/views/aboutUsSections/teamStyle.js new file mode 100644 index 0000000..4f9c037 --- /dev/null +++ b/src/assets/jss/react-material/views/aboutUsSections/teamStyle.js @@ -0,0 +1,40 @@ +import { + mrAuto, + mlAuto, + title, + description, + cardTitle, + grayColor, +} from "assets/jss/react-material"; + +const teamStyle = { + mrAuto, + mlAuto, + title, + description: { + ...description, + marginBottom: "80px", + }, + cardTitle, + cardDescription: { + color: grayColor[0], + }, + team: { + padding: "80px 0px", + }, + textCenter: { + textAlign: "center!important", + }, + img: { + width: "100%", + height: "auto", + }, + textMuted: { + color: grayColor[7] + " !important", + }, + justifyContent: { + justifyContent: "center!important", + }, +}; + +export default teamStyle; diff --git a/src/assets/jss/react-material/views/aboutUsStyle.js b/src/assets/jss/react-material/views/aboutUsStyle.js new file mode 100644 index 0000000..64e9f12 --- /dev/null +++ b/src/assets/jss/react-material/views/aboutUsStyle.js @@ -0,0 +1,67 @@ +import { + container, + title, + main, + mainRaised, + mrAuto, + whiteColor, + mlAuto, +} from "assets/jss/react-material"; + +const aboutUsStyle = { + main, + mainRaised, + mrAuto, + mlAuto, + container: { + ...container, + zIndex: 1, + }, + title: { + ...title, + "&, & + h4": { + color: whiteColor, + }, + }, + textCenter: { + textAlign: "center", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default aboutUsStyle; diff --git a/src/assets/jss/react-material/views/blogPostPageStyle.js b/src/assets/jss/react-material/views/blogPostPageStyle.js new file mode 100644 index 0000000..6d5654a --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostPageStyle.js @@ -0,0 +1,66 @@ +import { + container, + title, + main, + whiteColor, + mainRaised, +} from "assets/jss/react-material"; + +const blogPostPageStyle = { + container: { + ...container, + zIndex: "2", + }, + textCenter: { + textAlign: "center", + }, + title: { + ...title, + color: whiteColor, + }, + subtitle: { + color: whiteColor, + }, + main: { + ...main, + ...mainRaised, + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default blogPostPageStyle; diff --git a/src/assets/jss/react-material/views/blogPostSections/sectionBlogInfoStyle.js b/src/assets/jss/react-material/views/blogPostSections/sectionBlogInfoStyle.js new file mode 100644 index 0000000..77c6781 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostSections/sectionBlogInfoStyle.js @@ -0,0 +1,33 @@ +import { grayColor, cardTitle } from "assets/jss/react-material"; +const sectionBlogInfoStyle = { + section: { + paddingTop: "30px", + paddingBottom: "0", + backgroundPosition: "50%", + backgroundSize: "cover", + padding: "70px 0", + }, + blogTags: { + marginTop: "8px", + }, + buttons: { + marginTop: "0", + marginBottom: "0", + float: "right !important", + }, + card: { + marginTop: "0", + textAlign: "left", + }, + cardTitle, + description: { + fontSize: "1rem", + color: grayColor[0], + }, + pullRight: { + marginTop: "25px", + float: "right", + }, +}; + +export default sectionBlogInfoStyle; diff --git a/src/assets/jss/react-material/views/blogPostSections/sectionCommentsStyle.js b/src/assets/jss/react-material/views/blogPostSections/sectionCommentsStyle.js new file mode 100644 index 0000000..bf1b780 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostSections/sectionCommentsStyle.js @@ -0,0 +1,38 @@ +import { grayColor, title } from "assets/jss/react-material"; + +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; + +const sectionCommentsStyle = { + ...tooltipsStyle, + section: { + backgroundposition: "50%", + backgroundSize: "cover", + padding: "70px 0", + }, + title: { + ...title, + marginBottom: "30px", + textAlign: "center", + }, + footerButtons: { + float: "right", + }, + footerIcons: { + width: "1.1rem", + height: "1.1rem", + position: "relative", + display: "inline-block", + top: "0", + marginTop: "-1em", + marginBottom: "-1em", + marginRight: "3px", + verticalAlign: "middle", + }, + color555: { + "&,& *": { + color: grayColor[15] + " !important", + }, + }, +}; + +export default sectionCommentsStyle; diff --git a/src/assets/jss/react-material/views/blogPostSections/sectionSimilarStoriesStyle.js b/src/assets/jss/react-material/views/blogPostSections/sectionSimilarStoriesStyle.js new file mode 100644 index 0000000..a7b4b40 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostSections/sectionSimilarStoriesStyle.js @@ -0,0 +1,27 @@ +import { + container, + title, + cardTitle, + grayColor, + coloredShadow, +} from "assets/jss/react-material"; + +const sectionSimilarStoriesStyle = { + container, + title, + cardTitle, + coloredShadow, + textCenter: { + textAlign: "center", + }, + section: { + backgroundPosition: "50%", + backgroundSize: "cover", + padding: "70px 0", + }, + description: { + color: grayColor[0], + }, +}; + +export default sectionSimilarStoriesStyle; diff --git a/src/assets/jss/react-material/views/blogPostSections/sectionTextStyle.js b/src/assets/jss/react-material/views/blogPostSections/sectionTextStyle.js new file mode 100644 index 0000000..fdaf7f8 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostSections/sectionTextStyle.js @@ -0,0 +1,30 @@ +import { + grayColor, + container, + title, +} from "assets/jss/react-material"; + +import imagesStyles from "assets/jss/react-material/imagesStyles"; + +const sectionTextStyle = { + container, + title, + section: { + paddingBottom: "0", + backgroundPosition: "50%", + backgroundSize: "cover", + padding: "70px 0", + "& p": { + fontSize: "1.188rem", + lineHeight: "1.5em", + color: grayColor[15], + marginBottom: "30px", + }, + }, + quoteText: { + fontSize: "1.5rem !important", + }, + ...imagesStyles, +}; + +export default sectionTextStyle; diff --git a/src/assets/jss/react-material/views/blogPostsPageStyle.js b/src/assets/jss/react-material/views/blogPostsPageStyle.js new file mode 100644 index 0000000..1fcab19 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostsPageStyle.js @@ -0,0 +1,64 @@ +import { + container, + title, + main, + whiteColor, + mainRaised, +} from "assets/jss/react-material"; + +const blogPostsPageStyle = { + container: { + ...container, + zIndex: "2", + position: "relative", + }, + textCenter: { + textAlign: "center", + }, + title: { + ...title, + color: whiteColor, + }, + main: { + ...main, + ...mainRaised, + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default blogPostsPageStyle; diff --git a/src/assets/jss/react-material/views/blogPostsSections/sectionImageStyle.js b/src/assets/jss/react-material/views/blogPostsSections/sectionImageStyle.js new file mode 100644 index 0000000..97fa703 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostsSections/sectionImageStyle.js @@ -0,0 +1,46 @@ +import { + section, + sectionDark, + cardTitle, + container, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +const sectionImageStyle = { + container: { + ...container, + position: "relative", + zIndex: "2", + }, + section: { + ...section, + ...sectionDark, + padding: "80px 0", + position: "relative", + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7)", + }, + }, + cardTitle: { + ...cardTitle, + color: whiteColor + " !important", + }, + description: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + }, + textLeft: { + textAlign: "left", + }, +}; + +export default sectionImageStyle; diff --git a/src/assets/jss/react-material/views/blogPostsSections/sectionInterestedStyle.js b/src/assets/jss/react-material/views/blogPostsSections/sectionInterestedStyle.js new file mode 100644 index 0000000..7047a40 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostsSections/sectionInterestedStyle.js @@ -0,0 +1,25 @@ +import { + title, + cardTitle, + coloredShadow, + grayColor, +} from "assets/jss/react-material"; + +const sectionInterestedStyle = { + title, + cardTitle, + coloredShadow, + textCenter: { + textAlign: "center", + }, + section: { + backgroundPosition: "50%", + backgroundSize: "cover", + padding: "70px 0", + }, + description: { + color: grayColor[0], + }, +}; + +export default sectionInterestedStyle; diff --git a/src/assets/jss/react-material/views/blogPostsSections/sectionPillsStyle.js b/src/assets/jss/react-material/views/blogPostsSections/sectionPillsStyle.js new file mode 100644 index 0000000..206e590 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostsSections/sectionPillsStyle.js @@ -0,0 +1,43 @@ +import { + whiteColor, + hexToRgb, + cardTitle, +} from "assets/jss/react-material"; + +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; + +const sectionPillsStyle = { + ...tooltipsStyle, + section: { + backgroundPosition: "50%", + backgroundSize: "cover", + padding: "70px 0", + }, + textCenter: { + textAlign: "center", + }, + category: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.7) !important", + marginTop: "10px", + }, + cardTitle: { + ...cardTitle, + color: whiteColor + " !important", + }, + icons: { + width: "1.1rem", + height: "1.1rem", + position: "relative", + display: "inline-block", + top: "0", + marginTop: "-1em", + marginBottom: "-1em", + marginRight: "4px", + verticalAlign: "middle", + }, + tabSpace: { + padding: "20px 0 50px", + }, +}; + +export default sectionPillsStyle; diff --git a/src/assets/jss/react-material/views/blogPostsSections/sectionSubscribeLineStyle.js b/src/assets/jss/react-material/views/blogPostsSections/sectionSubscribeLineStyle.js new file mode 100644 index 0000000..459b706 --- /dev/null +++ b/src/assets/jss/react-material/views/blogPostsSections/sectionSubscribeLineStyle.js @@ -0,0 +1,32 @@ +import { + container, + title, + description, + grayColor, +} from "assets/jss/react-material"; + +const sectionSubscribeLineStyle = { + container, + title, + description, + section: { + padding: "1.875rem 0", + }, + cardClasses: { + marginTop: "30px", + }, + icon: { + color: grayColor[13], + }, + formControl: { + paddingTop: "0px !important", + paddingBottom: "0px !important", + margin: "0px !important", + }, + alignItemsCenter: { + display: "flex", + alignItems: "center", + }, +}; + +export default sectionSubscribeLineStyle; diff --git a/src/assets/jss/react-material/views/componentsSections/basicsStyle.js b/src/assets/jss/react-material/views/componentsSections/basicsStyle.js new file mode 100644 index 0000000..651a7b3 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/basicsStyle.js @@ -0,0 +1,41 @@ +import { + container, + whiteColor, + title, + mlAuto, + mrAuto, +} from "assets/jss/react-material"; +import customCheckboxRadioSwitch from "assets/jss/react-material/customCheckboxRadioSwitchStyle"; +import customSelectStyle from "assets/jss/react-material/customSelectStyle"; + +const basicsStyle = { + mlAuto, + mrAuto, + container, + ...customSelectStyle, + ...customCheckboxRadioSwitch, + sections: { + padding: "70px 0", + }, + title: { + ...title, + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + space50: { + height: "50px", + display: "block", + }, + space70: { + height: "70px", + display: "block", + }, + icons: { + width: "17px", + height: "17px", + color: whiteColor, + }, +}; + +export default basicsStyle; diff --git a/src/assets/jss/react-material/views/componentsSections/carouselStyle.js b/src/assets/jss/react-material/views/componentsSections/carouselStyle.js new file mode 100644 index 0000000..488a587 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/carouselStyle.js @@ -0,0 +1,14 @@ +import { container } from "assets/jss/react-material"; + +const carouselStyle = { + section: { + padding: "70px 0", + }, + container, + marginAuto: { + marginLeft: "auto !important", + marginRight: "auto !important", + }, +}; + +export default carouselStyle; diff --git a/src/assets/jss/react-material/views/componentsSections/contentAreas.js b/src/assets/jss/react-material/views/componentsSections/contentAreas.js new file mode 100644 index 0000000..9bfc903 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/contentAreas.js @@ -0,0 +1,97 @@ +import { + title, + mrAuto, + mlAuto, + grayColor, +} from "assets/jss/react-material"; + +import checkboxes from "assets/jss/react-material/customCheckboxRadioSwitchStyle"; +import buttonGroup from "assets/jss/react-material/buttonGroupStyle"; +import tooltips from "assets/jss/react-material/tooltipsStyle"; + +const contentAreas = { + title, + mrAuto, + mlAuto, + ...checkboxes, + ...buttonGroup, + ...tooltips, + space50: { + height: "50px", + display: "block", + }, + padding0: { + padding: "0 !important", + }, + imgContainer: { + width: "120px", + maxHeight: "160px", + overflow: "hidden", + display: "block", + "& img": { + width: "100%", + }, + }, + description: { + maxWidth: "150px", + }, + tdName: { + minWidth: "200px", + fontWeight: "400", + fontSize: "1.5em", + }, + tdNameAnchor: { + color: grayColor[1], + }, + tdNameSmall: { + color: grayColor[0], + fontSize: "0.75em", + fontWeight: "300", + }, + tdNumber: { + textAlign: "right", + minWidth: "150px", + fontWeight: "300", + fontSize: "1.125em !important", + }, + tdNumberSmall: { + marginRight: "3px", + }, + tdNumberAndButtonGroup: { + lineHeight: "1 !important", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + marginRight: "0", + }, + "& svg": { + marginRight: "0", + }, + }, + customFont: { + fontSize: "16px !important", + }, + actionButton: { + margin: "0px", + padding: "5px", + }, + textCenter: { + textAlign: "center", + }, + textRight: { + textAlign: "right", + }, + floatRight: { + float: "right", + }, + justifyContentCenter: { + WebkitBoxPack: "center !important", + MsFlexPack: "center !important", + justifyContent: "center !important", + }, + signInButton: { + "& button": { + marginRight: "5px", + }, + }, +}; + +export default contentAreas; diff --git a/src/assets/jss/react-material/views/componentsSections/footerStyle.js b/src/assets/jss/react-material/views/componentsSections/footerStyle.js new file mode 100644 index 0000000..7e8788f --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/footerStyle.js @@ -0,0 +1,188 @@ +import { + container, + title, + description, + section, + btnLink, + twitterColor, + dribbbleColor, + instagramColor, + grayColor, +} from "assets/jss/react-material"; + +import imagesStyles from "assets/jss/react-material/imagesStyles"; + +const style = { + ...imagesStyles, + container, + title, + description, + section: { + ...section, + padding: "70px 0px", + }, + socialFeed: { + "& p": { + display: "table-cell", + verticalAlign: "top", + overflow: "hidden", + paddingBottom: "10px", + maxWidth: 300, + }, + "& i": { + fontSize: "20px", + display: "table-cell", + paddingRight: "10px", + }, + }, + img: { + width: "20%", + marginRight: "5%", + marginBottom: "5%", + float: "left", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + aClass: { + textDecoration: "none", + backgroundColor: "transparent", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + footerBrand: { + height: "50px", + padding: "15px 15px", + fontSize: "18px", + lineHeight: "50px", + marginLeft: "-15px", + color: grayColor[1], + textDecoration: "none", + fontWeight: 700, + fontFamily: "Roboto Slab,Times New Roman,serif", + }, + pullCenter: { + display: "inline-block", + float: "none", + }, + rightLinks: { + float: "right!important", + "& ul": { + marginBottom: 0, + padding: 0, + listStyle: "none", + "& li": { + display: "inline-block", + }, + "& a": { + display: "block", + }, + }, + "& i": { + fontSize: "20px", + }, + }, + linksVertical: { + "& li": { + display: "block !important", + marginLeft: "-5px", + marginRight: "-5px", + "& a": { + padding: "5px !important", + }, + }, + }, + footer: { + "& ul li": { + display: "inline-block", + }, + "& h4, & h5": { + color: grayColor[1], + textDecoration: "none", + }, + "& ul:not($socialButtons) li a": { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + "& small": { + fontSize: "75%", + color: grayColor[10], + }, + "& $pullCenter": { + display: "inline-block", + float: "none", + }, + }, + iconSocial: { + width: "41px", + height: "41px", + fontSize: "24px", + minWidth: "41px", + padding: 0, + overflow: "hidden", + position: "relative", + }, + copyRight: { + padding: "15px 0px", + }, + socialButtons: { + "& li": { + display: "inline-block", + }, + }, + btnTwitter: { + ...btnLink, + color: twitterColor, + }, + btnDribbble: { + ...btnLink, + color: dribbbleColor, + }, + btnInstagram: { + ...btnLink, + color: instagramColor, + }, + icon: { + top: "3px", + width: "18px", + height: "18px", + position: "relative", + }, + customFormControl: { + paddingTop: "14px", + }, +}; + +export default style; diff --git a/src/assets/jss/react-material/views/componentsSections/javascriptStyles.js b/src/assets/jss/react-material/views/componentsSections/javascriptStyles.js new file mode 100644 index 0000000..84889d3 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/javascriptStyles.js @@ -0,0 +1,94 @@ +import { + container, + title, + cardTitle, + description, + mlAuto, + mrAuto, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +import modalStyle from "assets/jss/react-material/modalStyle"; +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; +import popoverStyles from "assets/jss/react-material/popoverStyles"; +import customCheckboxRadioSwitch from "assets/jss/react-material/customCheckboxRadioSwitchStyle"; + +const javascriptStyles = (theme) => ({ + container, + description, + cardTitle, + mlAuto, + mrAuto, + ...tooltipsStyle, + ...popoverStyles, + ...modalStyle(theme), + ...customCheckboxRadioSwitch, + section: { + padding: "70px 0 0", + }, + title: { + ...title, + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + icon: { + width: "24px", + height: "24px", + color: grayColor[13], + }, + label: { + color: "rgba(" + hexToRgb(blackColor) + ", 0.26)", + cursor: "pointer", + display: "inline-flex", + fontSize: "14px", + transition: "0.3s ease all", + lineHeight: "1.428571429", + fontWeight: "400", + paddingLeft: "0", + }, + textCenter: { + textAlign: "center", + }, + cardTitleWhite: { + ...cardTitle, + color: whiteColor + " !important", + }, + socialLine: { + marginTop: "1rem", + textAlign: "center", + padding: "0", + }, + socialLineButton: { + "&, &:hover": { color: whiteColor }, + marginLeft: "5px", + marginRight: "5px", + }, + cardLoginHeader: { + marginTop: "-40px", + padding: "20px 0", + width: "100%", + marginBottom: "15px", + }, + cardLoginBody: { + paddingTop: "0", + paddingBottom: "0", + }, + justifyContentCenter: { + WebkitBoxPack: "center !important", + MsFlexPack: "center !important", + justifyContent: "center !important", + }, + infoArea: { + padding: "0px 0px 20px !important", + }, + space50: { + height: "50px", + display: "block", + }, +}); + +export default javascriptStyles; diff --git a/src/assets/jss/react-material/views/componentsSections/navbarsStyle.js b/src/assets/jss/react-material/views/componentsSections/navbarsStyle.js new file mode 100644 index 0000000..c52776f --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/navbarsStyle.js @@ -0,0 +1,58 @@ +import { container, title } from "assets/jss/react-material"; +import headerLinksStyle from "assets/jss/react-material/components/headerLinksStyle"; + +const navbarsStyle = (theme) => ({ + container, + ...headerLinksStyle(theme), + section: { + padding: "70px 0", + paddingBottom: "0", + }, + title: { + ...title, + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + navbar: { + marginBottom: "-20px", + zIndex: "100", + position: "relative", + overflow: "hidden", + "& header": { + borderRadius: "0", + zIndex: "unset", + }, + }, + navigation: { + backgroundPosition: "50%", + backgroundSize: "cover", + marginTop: "0", + minHeight: "740px", + }, + formControl: { + margin: "0 !important", + paddingTop: "7px", + paddingBottom: "7px", + }, + inputRootCustomClasses: { + margin: "0!important", + }, + searchIcon: { + width: "20px", + height: "20px", + color: "inherit", + }, + img: { + width: "40px", + height: "40px", + borderRadius: "50%", + }, + imageDropdownButton: { + padding: "0px", + borderRadius: "50%", + marginLeft: "5px", + }, +}); + +export default navbarsStyle; diff --git a/src/assets/jss/react-material/views/componentsSections/notificationsStyles.js b/src/assets/jss/react-material/views/componentsSections/notificationsStyles.js new file mode 100644 index 0000000..1263876 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/notificationsStyles.js @@ -0,0 +1,30 @@ +import { + container, + title, + whiteColor, + section, +} from "assets/jss/react-material"; + +const notificationsStyles = { + section: { + backgroundColor: whiteColor, + display: "block", + width: "100%", + position: "relative", + padding: "70px 0", + ...section, + }, + title: { + ...title, + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + space70: { + height: "70px", + display: "block", + }, + container, +}; + +export default notificationsStyles; diff --git a/src/assets/jss/react-material/views/componentsSections/pillsStyle.js b/src/assets/jss/react-material/views/componentsSections/pillsStyle.js new file mode 100644 index 0000000..465530c --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/pillsStyle.js @@ -0,0 +1,16 @@ +import { container, title } from "assets/jss/react-material"; + +const pillsStyle = { + section: { + padding: "70px 0", + }, + container, + title: { + ...title, + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, +}; + +export default pillsStyle; diff --git a/src/assets/jss/react-material/views/componentsSections/preFooter.js b/src/assets/jss/react-material/views/componentsSections/preFooter.js new file mode 100644 index 0000000..443bb1a --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/preFooter.js @@ -0,0 +1,115 @@ +import { + container, + title, + mlAuto, + mrAuto, + description, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const styles = { + container, + title, + mrAuto, + mlAuto, + description, + card: {}, + cardBody: { + padding: "15px", + "& form": { + marginBottom: "0", + }, + }, + cardForm: { + margin: "0 0 0 14px", + padding: 0, + top: 10, + }, + socialLine: { + padding: ".9375rem 0px", + "& $border": { + borderRight: "1px solid rgba(" + hexToRgb(blackColor) + ",0.12)", + }, + "& $border:last-child": { + border: 0, + }, + }, + textCenter: { + textAlign: "center !important", + }, + white: { + backgroundColor: whiteColor, + }, + dark: { + background: + "radial-gradient(ellipse at center," + + grayColor[4] + + " 0," + + grayColor[5] + + " 100%)", + backgroundSize: "550% 450%", + "& $border": { + borderColor: "rgba(" + hexToRgb(whiteColor) + ",0.1)", + }, + }, + bigIcons: { + "& a": { + margin: 0, + width: "100% !important", + paddingTop: "45px", + paddingBottom: "45px", + }, + "& button i.fab, & a i.fab": { + fontSize: "25px !important", + lineHeight: "90px !important", + }, + }, + subscribeLine: { + padding: "1.875rem 0px", + "& $card": { + marginTop: "30px", + }, + "& form": { margin: "0px" }, + "& $formFix": { paddingTop: "0px" }, + "&$subscribeLineImage:after": { + position: "absolute", + zIndex: 1, + width: "100%", + height: "100%", + display: "block", + left: 0, + top: 0, + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ",0.66)", + }, + }, + formFix: {}, + subscribeLineWhite: { + backgroundColor: whiteColor, + "& $subscribeButton": { + top: "-6px", + }, + }, + subscribeLineImage: { + position: "relative", + backgroundPosition: "top center", + backgroundSize: "cover", + "& $container": { + zIndex: 2, + position: "relative", + }, + "& $title": { + color: whiteColor, + }, + "& $description": { + color: grayColor[0], + }, + }, + subscribeButton: {}, + border: {}, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/componentsSections/sectionCards.js b/src/assets/jss/react-material/views/componentsSections/sectionCards.js new file mode 100644 index 0000000..2067419 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/sectionCards.js @@ -0,0 +1,206 @@ +import { + container, + coloredShadow, + title, + cardTitle, + description, + mlAuto, + infoColor, + whiteColor, + roseColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +import imageStyles from "assets/jss/react-material/imagesStyles"; + +import rotatingCards from "assets/jss/react-material/rotatingCards"; + +const styles = { + container, + coloredShadow, + title, + mlAuto, + cardTitle, + ...imageStyles, + ...rotatingCards, + sectionGray: { + background: grayColor[14], + }, + sectionWhite: { + background: whiteColor, + }, + cardTitleAbsolute: { + ...cardTitle, + position: "absolute !important", + bottom: "15px !important", + left: "15px !important", + color: whiteColor + " !important", + fontSize: "1.125rem !important", + textShadow: + "0 2px 5px rgba(" + hexToRgb(grayColor[9]) + ", 0.5) !important", + }, + cardTitleWhite: { + "&, & a": { + ...title, + marginTop: ".625rem", + marginBottom: "0", + minHeight: "auto", + color: whiteColor + " !important", + }, + }, + cardCategory: { + marginTop: "10px", + "& svg": { + position: "relative", + top: "8px", + }, + }, + cardCategorySocial: { + marginTop: "10px", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "22px", + position: "relative", + marginTop: "-4px", + top: "2px", + marginRight: "5px", + }, + "& svg": { + position: "relative", + top: "5px", + }, + }, + cardCategorySocialWhite: { + marginTop: "10px", + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "22px", + position: "relative", + marginTop: "-4px", + top: "2px", + marginRight: "5px", + }, + "& svg": { + position: "relative", + top: "5px", + }, + }, + cardCategoryWhite: { + marginTop: "10px", + color: "rgba(" + hexToRgb(whiteColor) + ", 0.7)", + }, + cardCategoryFullWhite: { + marginTop: "10px", + color: whiteColor, + }, + cardDescription: { + ...description, + }, + cardDescriptionWhite: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + author: { + display: "inline-flex", + "& a": { + color: grayColor[1], + }, + }, + authorWhite: { + display: "inline-flex", + "& a": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + }, + }, + avatar: { + width: "30px", + height: "30px", + overflow: "hidden", + borderRadius: "50%", + marginRight: "5px", + }, + statsWhite: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.8)", + display: "inline-flex", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + position: "relative", + top: "3px", + marginRight: "3px", + marginLeft: "3px", + fontSize: "18px", + lineHeight: "18px", + }, + "& svg": { + position: "relative", + top: "3px", + marginRight: "3px", + marginLeft: "3px", + width: "18px", + height: "18px", + }, + }, + stats: { + color: grayColor[0], + display: "flex", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + position: "relative", + top: "3px", + marginRight: "3px", + marginLeft: "3px", + fontSize: "18px", + lineHeight: "18px", + }, + "& svg": { + position: "relative", + top: "3px", + marginRight: "3px", + marginLeft: "3px", + width: "18px", + height: "18px", + }, + }, + justifyContentCenter: { + WebkitBoxPack: "center !important", + MsFlexPack: "center !important", + justifyContent: "center !important", + }, + iconWrapper: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + margin: "10px auto 0", + width: "130px", + height: "130px", + border: "1px solid " + grayColor[14], + borderRadius: "50%", + lineHeight: "174px", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "55px", + lineHeight: "55px", + }, + "& svg": { + width: "55px", + height: "55px", + }, + }, + iconWrapperColor: { + borderColor: "rgba(" + hexToRgb(whiteColor) + ", 0.25)", + }, + iconWhite: { + color: whiteColor, + }, + iconRose: { + color: roseColor[0], + }, + iconInfo: { + color: infoColor[0], + }, + marginTop30: { + marginTop: "30px", + }, + textCenter: { + textAlign: "center", + }, + marginBottom20: { + marginBottom: "20px", + }, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/componentsSections/tabsStyle.js b/src/assets/jss/react-material/views/componentsSections/tabsStyle.js new file mode 100644 index 0000000..72cbbca --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/tabsStyle.js @@ -0,0 +1,13 @@ +import { container } from "assets/jss/react-material"; + +const tabsStyle = { + section: { + padding: "70px 0", + }, + container, + textCenter: { + textAlign: "center", + }, +}; + +export default tabsStyle; diff --git a/src/assets/jss/react-material/views/componentsSections/typographyStyle.js b/src/assets/jss/react-material/views/componentsSections/typographyStyle.js new file mode 100644 index 0000000..b73a1da --- /dev/null +++ b/src/assets/jss/react-material/views/componentsSections/typographyStyle.js @@ -0,0 +1,49 @@ +import { + grayColor, + container, + title, +} from "assets/jss/react-material"; + +import imagesStyles from "assets/jss/react-material/imagesStyles"; + +const typographyStyle = { + section: { + padding: "70px 0", + }, + container, + space50: { + height: "50px", + display: "block", + }, + title: { + ...title, + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + typo: { + paddingLeft: "25%", + marginBottom: "40px", + position: "relative", + width: "100%", + }, + note: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + bottom: "10px", + color: grayColor[21], + display: "block", + fontWeight: "400", + fontSize: "13px", + lineHeight: "13px", + left: "0", + marginLeft: "20px", + position: "absolute", + width: "260px", + }, + marginLeft: { + marginLeft: "auto !important", + }, + ...imagesStyles, +}; + +export default typographyStyle; diff --git a/src/assets/jss/react-material/views/componentsStyle.js b/src/assets/jss/react-material/views/componentsStyle.js new file mode 100644 index 0000000..356bf99 --- /dev/null +++ b/src/assets/jss/react-material/views/componentsStyle.js @@ -0,0 +1,108 @@ +import { + container, + main, + mainRaised, + title, + whiteColor, + grayColor, + section, + hexToRgb, +} from "assets/jss/react-material"; + +const componentsStyle = { + main, + mainRaised, + parallax: { + height: "90vh", + overflow: "hidden", + }, + container: { + ...container, + zIndex: "2", + position: "relative", + }, + brand: { + color: whiteColor, + textAlign: "center", + "& h1": { + fontSize: "4.2rem", + fontWeight: "600", + display: "inline-block", + position: "relative", + }, + "& h3": { + fontSize: "1.313rem", + maxWidth: "500px", + margin: "10px auto 0", + }, + }, + title: { + ...title, + color: whiteColor + " !important", + }, + link: { + textDecoration: "none", + }, + textCenter: { + textAlign: "center", + }, + proBadge: { + position: "absolute", + fontSize: "22px", + textTransform: "uppercase", + fontWeight: "bold", + right: "-90px", + top: "-3px", + padding: "10px 18px", + backgroundColor: whiteColor, + borderRadius: "3px", + color: grayColor[18], + lineHeight: "22px", + boxShadow: "0px 5px 5px -2px rgba(" + hexToRgb(grayColor[25]) + ",0.4)", + }, + section: { + ...section, + padding: "70px 0px", + }, + sectionGray: { + background: grayColor[14], + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default componentsStyle; diff --git a/src/assets/jss/react-material/views/contactUsStyle.js b/src/assets/jss/react-material/views/contactUsStyle.js new file mode 100644 index 0000000..5807891 --- /dev/null +++ b/src/assets/jss/react-material/views/contactUsStyle.js @@ -0,0 +1,75 @@ +import { + container, + title, + main, + mainRaised, + mlAuto, + description, +} from "assets/jss/react-material"; + +const contactUsStyle = { + main, + mainRaised, + title, + mlAuto, + description, + container: { + ...container, + maxWidth: "970px !important", + }, + contactContent: { + paddingBottom: "40px", + paddingTop: "40px", + }, + bigMap: { + height: "55vh", + maxHeight: "550px", + width: "100%", + display: "block", + }, + info: { + paddingBottom: "10px", + paddingTop: 0, + }, + textCenter: { + textAlign: "center !important", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default contactUsStyle; diff --git a/src/assets/jss/react-material/views/ecommerceSections/blogStyle.js b/src/assets/jss/react-material/views/ecommerceSections/blogStyle.js new file mode 100644 index 0000000..533ecee --- /dev/null +++ b/src/assets/jss/react-material/views/ecommerceSections/blogStyle.js @@ -0,0 +1,29 @@ +import { + section, + container, + cardTitle, + grayColor, + roseColor, + coloredShadow, +} from "assets/jss/react-material"; + +const styles = { + cardTitle, + container, + section: { + ...section, + padding: "70px 0px", + }, + coloredShadow, + cardDescription: { + color: grayColor[0], + }, + cardCategory: { + marginTop: "10px", + }, + textRose: { + color: roseColor[0] + " !important", + }, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/ecommerceSections/latestOffersStyle.js b/src/assets/jss/react-material/views/ecommerceSections/latestOffersStyle.js new file mode 100644 index 0000000..fe62131 --- /dev/null +++ b/src/assets/jss/react-material/views/ecommerceSections/latestOffersStyle.js @@ -0,0 +1,49 @@ +import { + section, + container, + cardTitle, + coloredShadow, + grayColor, + dangerColor, + mlAuto, +} from "assets/jss/react-material"; + +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; + +const styles = { + cardTitle, + container, + ...tooltipsStyle, + section: { + ...section, + padding: "70px 0px", + }, + coloredShadow, + cardDescription: { + color: grayColor[0], + textAlign: "center", + }, + mlAuto, + priceContainer: { + display: "inline-flex", + }, + price: { + fontSize: "18px", + color: grayColor[22], + }, + priceOld: { + fontSize: "16px", + textDecoration: "line-through", + }, + priceNew: { + color: dangerColor[0], + }, + stats: { + color: grayColor[0], + }, + textCenter: { + textAlign: "center", + }, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/ecommerceSections/productsStyle.js b/src/assets/jss/react-material/views/ecommerceSections/productsStyle.js new file mode 100644 index 0000000..37c2214 --- /dev/null +++ b/src/assets/jss/react-material/views/ecommerceSections/productsStyle.js @@ -0,0 +1,99 @@ +import { + section, + container, + cardTitle, + coloredShadow, + mlAuto, + mrAuto, + grayColor, +} from "assets/jss/react-material"; + +import customCheckboxRadioSwitch from "assets/jss/react-material/customCheckboxRadioSwitchStyle"; + +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; + +const styles = { + ...customCheckboxRadioSwitch, + ...tooltipsStyle, + checkRoot: { + padding: "14px", + "&:hover": { + backgroundColor: "unset !important", + }, + }, + coloredShadow, + mlAuto, + mrAuto, + cardTitle: { + ...cardTitle, + textAlign: "center", + marginBottom: "0px !important", + }, + cardDescription: { + color: grayColor[0], + textAlign: "center", + }, + container: { + ...container, + }, + description: { + color: grayColor[0], + }, + section: { + ...section, + padding: "70px 0px", + }, + priceContainer: { + display: "inline-flex", + }, + price: { + fontSize: "18px", + color: grayColor[22], + }, + pullRight: { + float: "right", + }, + cardHeaderImage: { + position: "relative", + padding: "0", + zIndex: "1", + marginLeft: "15px", + marginRight: "15px", + marginTop: "-30px", + borderRadius: "6px", + "& img": { + width: "100%", + borderRadius: "6px", + pointerEvents: "none", + }, + "& a": { + display: "block", + }, + }, + justifyContentBetween: { + WebkitBoxPack: "justify!important", + justifyContent: "space-between !important", + }, + customExpandPanel: { + maxHeight: "273px", + overflowY: "scroll", + "& label": { + display: "block", + }, + }, + priceSlider: { + fontWeight: "500", + }, + refineButton: { + margin: "-3px 0", + }, + cardBodyRefine: { + paddingLeft: "15px", + paddingRight: "15px", + }, + textLeft: { + textAlign: "left", + }, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/ecommerceStyle.js b/src/assets/jss/react-material/views/ecommerceStyle.js new file mode 100644 index 0000000..f288b86 --- /dev/null +++ b/src/assets/jss/react-material/views/ecommerceStyle.js @@ -0,0 +1,138 @@ +import { + title, + main, + mainRaised, + mrAuto, + mlAuto, + container, + description, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; +import imagesStyles from "assets/jss/react-material/imagesStyles"; + +const styles = { + ...imagesStyles, + title, + main, + mainRaised, + mrAuto, + mlAuto, + description, + textCenter: { + textAlign: "center !important", + }, + container: { + ...container, + zIndex: "2", + }, + brand: { + "& h1, & h4": { + color: whiteColor, + }, + }, + card: {}, + subscribeButton: {}, + cardBody: { + padding: "15px", + "& form": { + marginBottom: "0", + }, + }, + cardForm: { + margin: "0 0 0 14px", + padding: 0, + top: 10, + }, + subscribeLine: { + padding: "1.875rem 0px", + "& $card": { + marginTop: "30px", + }, + "& form": { margin: "0px" }, + "&$subscribeLineImage:after": { + position: "absolute", + zIndex: 1, + width: "100%", + height: "100%", + display: "block", + left: 0, + top: 0, + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ",0.66)", + }, + }, + subscribeLineImage: { + position: "relative", + backgroundPosition: "top center", + backgroundSize: "cover", + "& $container": { + zIndex: 2, + position: "relative", + }, + "& $title": { + color: whiteColor, + }, + "& $description": { + color: grayColor[0], + }, + }, + socialFeed: { + "& p": { + display: "table-cell", + verticalAlign: "top", + overflow: "hidden", + paddingBottom: "10px", + maxWidth: 300, + }, + "& i": { + fontSize: "20px", + display: "table-cell", + paddingRight: "10px", + }, + }, + img: { + width: "20%", + marginRight: "5%", + marginBottom: "5%", + float: "left", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + aClass: { + textDecoration: "none", + backgroundColor: "transparent", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/errorPageStyles.js b/src/assets/jss/react-material/views/errorPageStyles.js new file mode 100644 index 0000000..011dfd9 --- /dev/null +++ b/src/assets/jss/react-material/views/errorPageStyles.js @@ -0,0 +1,108 @@ +import { + title, + whiteColor, + blackColor, + hexToRgb, +} from "assets/jss/react-material"; + +const errorPageStyles = (theme) => ({ + contentCenter: { + position: "absolute", + top: "50%", + left: "50%", + zIndex: "3", + transform: "translate(-50%,-50%)", + textAlign: "center", + color: whiteColor, + padding: "0 15px", + width: "100%", + maxWidth: "880px", + }, + title: { + ...title, + fontSize: "13.7em", + color: whiteColor, + letterSpacing: "14px !important", + fontWeight: "700", + [theme.breakpoints.down("sm")]: { + fontSize: "7em", + }, + }, + subTitle: { + fontSize: "2.25rem", + marginTop: "0", + marginBottom: "8px", + }, + description: { + fontSize: "1.125rem", + marginTop: "0", + marginBottom: "8px", + }, + pageHeader: { + minHeight: "100vh", + height: "auto", + display: "inherit", + position: "relative", + margin: "0", + padding: "0", + border: "0", + alignItems: "center", + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:before,&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: '""', + }, + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + "&,& *,& *:hover,& *:focus": { + color: "inherit !important", + }, + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + "&,& *,& *:hover,& *:focus": { + color: "inherit !important", + }, + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}); + +export default errorPageStyles; diff --git a/src/assets/jss/react-material/views/landingPageSections/productStyle.js b/src/assets/jss/react-material/views/landingPageSections/productStyle.js new file mode 100644 index 0000000..c79f669 --- /dev/null +++ b/src/assets/jss/react-material/views/landingPageSections/productStyle.js @@ -0,0 +1,20 @@ +import { title, grayColor } from "assets/jss/react-material"; + +const productStyle = { + section: { + padding: "70px 0", + textAlign: "center", + }, + title: { + ...title, + marginBottom: "1rem", + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + description: { + color: grayColor[0], + }, +}; + +export default productStyle; diff --git a/src/assets/jss/react-material/views/landingPageSections/teamStyle.js b/src/assets/jss/react-material/views/landingPageSections/teamStyle.js new file mode 100644 index 0000000..76ffa23 --- /dev/null +++ b/src/assets/jss/react-material/views/landingPageSections/teamStyle.js @@ -0,0 +1,54 @@ +import { + cardTitle, + title, + grayColor, +} from "assets/jss/react-material"; +import imagesStyle from "assets/jss/react-material/imagesStyles"; + +const teamStyle = { + section: { + padding: "70px 0", + textAlign: "center", + }, + title: { + ...title, + marginBottom: "1rem", + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + ...imagesStyle, + itemGrid: { + marginLeft: "auto", + marginRight: "auto", + }, + cardTitle, + smallTitle: { + color: grayColor[7], + }, + description: { + color: grayColor[0], + }, + justifyCenter: { + justifyContent: "center !important", + }, + socials: { + marginTop: "0", + width: "100%", + transform: "none", + left: "0", + top: "0", + height: "100%", + lineHeight: "41px", + fontSize: "20px", + color: grayColor[0], + }, + margin5: { + margin: "5px", + }, + card3: { + textAlign: "center", + }, +}; + +export default teamStyle; diff --git a/src/assets/jss/react-material/views/landingPageSections/workStyle.js b/src/assets/jss/react-material/views/landingPageSections/workStyle.js new file mode 100644 index 0000000..35d1996 --- /dev/null +++ b/src/assets/jss/react-material/views/landingPageSections/workStyle.js @@ -0,0 +1,35 @@ +import { + title, + mrAuto, + mlAuto, + grayColor, +} from "assets/jss/react-material"; + +const workStyle = { + mrAuto, + mlAuto, + section: { + padding: "70px 0", + }, + title: { + ...title, + marginBottom: "1rem", + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + textAlign: "center", + }, + description: { + color: grayColor[0], + textAlign: "center", + }, + textCenter: { + textAlign: "center", + }, + textArea: { + marginRight: "15px", + marginLeft: "15px", + }, +}; + +export default workStyle; diff --git a/src/assets/jss/react-material/views/landingPageStyle.js b/src/assets/jss/react-material/views/landingPageStyle.js new file mode 100644 index 0000000..c3fe334 --- /dev/null +++ b/src/assets/jss/react-material/views/landingPageStyle.js @@ -0,0 +1,73 @@ +import { + container, + title, + main, + whiteColor, + mainRaised, +} from "assets/jss/react-material"; + +const landingPageStyle = { + container: { + color: whiteColor, + ...container, + zIndex: "2", + }, + title: { + ...title, + display: "inline-block", + position: "relative", + marginTop: "30px", + minHeight: "32px", + color: whiteColor, + textDecoration: "none", + }, + subtitle: { + fontSize: "1.313rem", + maxWidth: "500px", + margin: "10px auto 0", + }, + main: { + ...main, + }, + mainRaised: { + ...mainRaised, + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default landingPageStyle; diff --git a/src/assets/jss/react-material/views/loginPageStyle.js b/src/assets/jss/react-material/views/loginPageStyle.js new file mode 100644 index 0000000..08e3cae --- /dev/null +++ b/src/assets/jss/react-material/views/loginPageStyle.js @@ -0,0 +1,122 @@ +import { + container, + description, + cardTitle, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const signupPageStyle = (theme) => ({ + description, + cardTitle: { + ...cardTitle, + color: whiteColor + " !important", + }, + container: { + ...container, + zIndex: "4", + [theme.breakpoints.down("sm")]: { + paddingBottom: "100px", + }, + }, + pageHeader: { + color: whiteColor, + border: "0", + height: "100%", + margin: "0", + display: "flex!important", + padding: "120px 0", + position: "relative", + minHeight: "100vh", + alignItems: "center", + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:before,&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: '""', + }, + }, + form: { + margin: "0", + }, + cardHeader: { + width: "auto", + textAlign: "center", + }, + socialLine: { + marginTop: "1rem", + textAlign: "center", + padding: "0", + }, + inputIconsColor: { + color: grayColor[13], + }, + textCenter: { + textAlign: "center", + }, + iconButtons: { + marginRight: "3px !important", + marginLeft: "3px !important", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + "&,& *,& *:hover,& *:focus": { + color: whiteColor + " !important", + }, + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + "&,& *,& *:hover,& *:focus": { + color: whiteColor + " !important", + }, + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, + footer: { + position: "absolute", + width: "100%", + background: "transparent", + bottom: "0", + color: whiteColor, + zIndex: "2", + }, +}); + +export default signupPageStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/cardsStyle.js b/src/assets/jss/react-material/views/presentationSections/cardsStyle.js new file mode 100644 index 0000000..396038a --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/cardsStyle.js @@ -0,0 +1,46 @@ +import { + container, + section, + sectionDark, + sectionDescription, + title, + whiteColor, + mlAuto, + hexToRgb, +} from "assets/jss/react-material"; + +const cardsStyle = { + section: { + ...section, + padding: "50px 0px", + }, + sectionDark, + container, + sectionDescription, + title: { + ...title, + color: whiteColor, + marginTop: "30px", + marginBottom: "25px", + minHeight: "32px", + }, + description: { + color: "rgba(" + hexToRgb(whiteColor) + ",0.76)", + }, + imageContainer: { + maxWidth: "1040px", + marginTop: "-140px", + position: "relative", + height: "660px", + "& img": { + maxWidth: "1040px", + width: "auto", + position: "absolute", + right: "0px", + top: "0px", + }, + }, + mlAuto, +}; + +export default cardsStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/componentsStyle.js b/src/assets/jss/react-material/views/presentationSections/componentsStyle.js new file mode 100644 index 0000000..5b6e7a7 --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/componentsStyle.js @@ -0,0 +1,139 @@ +import { + container, + title, + mlAuto, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const reusableStylesForImgs = { + position: "absolute", + boxShadow: + "0 8px 10px 1px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 3px 14px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 5px 5px -3px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", +}; + +const componentsStyle = (theme) => ({ + container, + mlAuto, + title: { + ...title, + marginBottom: "5px", + marginTop: "60px", + "& + $description": { + marginTop: "5px", + marginBottom: "30px", + }, + }, + description: { + color: grayColor[0], + }, + imageContainer: { + height: "560px", + position: "relative", + }, + componentsMacbook: { + [theme.breakpoints.down("sm")]: { + maxWidth: "850px!important", + maxHeight: "480px!important", + marginTop: "12vh", + left: "-12px", + }, + [theme.breakpoints.down(768)]: { + maxWidth: "350px!important", + maxHeight: "250px!important", + marginTop: "12vh", + left: "-12px", + }, + width: "auto", + left: "-100px", + top: 0, + height: "100%", + position: "absolute", + }, + shoppingCart: { + [theme.breakpoints.down("md")]: { + display: "none", + }, + ...reusableStylesForImgs, + left: "-13%", + top: "27%", + height: "175px", + borderRadius: "2px", + WebkitAnimation: "Floatingx 14s ease-in-out infinite", + float: "left", + }, + shareButton: { + [theme.breakpoints.down("md")]: { + top: "12%", + }, + [theme.breakpoints.down("sm")]: { + top: "7%", + }, + ...reusableStylesForImgs, + left: "3%", + top: "-3%", + height: "25px", + WebkitAnimation: "Floatingy 11s ease-in-out infinite", + }, + cardImage: { + [theme.breakpoints.down("md")]: { + top: "-2%", + left: "65%", + }, + [theme.breakpoints.down("sm")]: { + top: "-2%", + }, + ...reusableStylesForImgs, + left: "35%", + top: "2%", + height: "125px", + borderRadius: "6px", + WebkitAnimation: "Floatingy 18s ease-in-out infinite", + }, + twitterImage: { + [theme.breakpoints.down("md")]: { + display: "none", + }, + ...reusableStylesForImgs, + left: "90%", + top: "11%", + height: "90px", + borderRadius: "2px", + WebkitAnimation: "Floatingy 10s ease-in-out infinite", + }, + iconsImage: { + [theme.breakpoints.down("md")]: { + left: "47%", + top: "37%", + }, + [theme.breakpoints.down("sm")]: { + left: "-7%", + top: "37%", + }, + ...reusableStylesForImgs, + left: "70%", + top: "67%", + height: "40px", + WebkitAnimation: "Floatingx 16s ease-in-out infinite", + }, + repostImage: { + [theme.breakpoints.down("md")]: { + top: "54%", + }, + ...reusableStylesForImgs, + left: "0%", + top: "68%", + height: "25px", + borderRadius: "3px", + WebkitAnimation: "Floatingy 15s ease-in-out infinite", + }, +}); + +export default componentsStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/contentStyle.js b/src/assets/jss/react-material/views/presentationSections/contentStyle.js new file mode 100644 index 0000000..d2f906d --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/contentStyle.js @@ -0,0 +1,91 @@ +import { + container, + section, + title, + sectionDescription, + mlAuto, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const contentStyle = (theme) => ({ + container, + section: { + ...section, + padding: "70px 0px", + }, + sectionDescription, + title: { + ...title, + color: grayColor[1], + marginTop: "30px", + marginBottom: "5px", + "& + $description": { + marginBottom: "10px", + marginTop: "0px", + }, + }, + description: { + color: grayColor[0], + marginTop: "35px", + marginBottom: "15px", + }, + imageContainer: { + maxWidth: "900px", + position: "relative", + }, + ipadImg: { + width: "100%", + }, + mlAuto, + areaImg: { + height: "300px", + width: "250px", + zIndex: 2, + top: "10%", + left: "60%", + boxShadow: + "0 8px 10px 1px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 3px 14px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 5px 5px -3px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + [theme.breakpoints.down("sm")]: { + maxWidth: "130px", + maxHeight: "170px", + }, + }, + infoImg: { + height: "200px", + width: "300px", + top: "50%", + left: "0%", + boxShadow: + "0 8px 10px 1px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 3px 14px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 5px 5px -3px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + [theme.breakpoints.down("sm")]: { + maxWidth: "170px", + maxHeight: "120px", + }, + }, + animeInfoImg: { + top: "50%", + left: "0%", + position: "absolute", + }, + animeAreaImg: { + top: "10%", + left: "60%", + position: "absolute", + }, +}); + +export default contentStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/descriptionStyle.js b/src/assets/jss/react-material/views/presentationSections/descriptionStyle.js new file mode 100644 index 0000000..cd1b7d3 --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/descriptionStyle.js @@ -0,0 +1,31 @@ +import { + container, + section, + grayColor, +} from "assets/jss/react-material"; + +const descriptionStyle = { + container, + description: { + color: grayColor[0], + textAlign: "center", + }, + section: { + ...section, + padding: "70px 0px", + "& h4$description": { + fontSize: "1.5em", + }, + }, + features: { + textAlign: "center !important", + paddingTop: "30px", + paddingBottom: "0px", + "& p": { + fontSize: "16px", + lineHeight: "1.6em", + }, + }, +}; + +export default descriptionStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/examplesStyle.js b/src/assets/jss/react-material/views/presentationSections/examplesStyle.js new file mode 100644 index 0000000..321e189 --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/examplesStyle.js @@ -0,0 +1,47 @@ +import { + section, + sectionDark, + container, + mlAuto, + mrAuto, + title, + whiteColor, + description, + hexToRgb, +} from "assets/jss/react-material"; + +const examplesStyle = { + section: { + ...section, + padding: "70px 0px", + }, + sectionDark: { + ...sectionDark, + "& $title": { + color: whiteColor, + }, + "& $description": { + color: "rgba(" + hexToRgb(whiteColor) + ",0.76)", + }, + }, + container, + mlAuto, + mrAuto, + sectionDescription: { + textAlign: "center", + marginBottom: "90px", + }, + title: { + ...title, + textAlign: "center", + }, + description, + imgCardExtended: { + transition: "all .2s cubic-bezier(0.4,0,0.2,1)", + "&:hover": { + transform: "translate3d(0, -10px, 0)", + }, + }, +}; + +export default examplesStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/freeDemoStyle.js b/src/assets/jss/react-material/views/presentationSections/freeDemoStyle.js new file mode 100644 index 0000000..7e58bbe --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/freeDemoStyle.js @@ -0,0 +1,84 @@ +import { + title, + description, + section, + container, + mlAuto, + mrAuto, + cardTitle, + card, + dangerColor, + successColor, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const freeDemoStyle = { + container, + mlAuto, + mrAuto, + description, + cardTitle, + title: { + ...title, + marginTop: "15px", + marginBottom: "1rem", + }, + section: { + ...section, + padding: "70px 0px", + }, + iconGithub: { + fontSize: "82px", + color: grayColor[10], + }, + iframeGithub: { + top: "11px", + display: "inline-block", + position: "relative", + marginLeft: "10px", + }, + card: { + ...card, + border: "0px", + marginBottom: "30px", + marginTop: "30px", + borderRadius: "6px", + color: "rgba(" + hexToRgb(blackColor) + ",0.87)", + width: "100%", + "& ul": { + listStyle: "none", + padding: "0px", + maxWidth: "240px", + margin: "10px auto", + }, + "& ul li": { + color: grayColor[0], + padding: "12px 0px", + borderBottom: "1px solid rgba(" + hexToRgb(grayColor[0]) + ",0.3)", + textAlign: "left", + }, + "& ul li b": { + minWidth: "24px", + display: "inline-block", + textAlign: "center", + color: grayColor[1], + }, + }, + cardPricing: { + boxShadow: "none", + }, + cardIcons: { + top: "6px", + position: "relative", + }, + dangerColor: { + color: dangerColor[0], + }, + successColor: { + color: successColor[0], + }, +}; + +export default freeDemoStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/overviewStyle.js b/src/assets/jss/react-material/views/presentationSections/overviewStyle.js new file mode 100644 index 0000000..5ba3fe0 --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/overviewStyle.js @@ -0,0 +1,111 @@ +import { + section, + mrAuto, + mlAuto, + title, + container, + description, + cardTitle, + coloredShadow, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const overviewStyle = { + mrAuto, + mlAuto, + title, + container, + description: { + ...description, + marginBottom: "70px", + }, + section: { + ...section, + padding: "70px 0px", + }, + sectionTestimonials: { + paddingTop: "50px", + paddingBottom: "80px", + textAlign: "center", + "& $cardTitle": { + marginTop: "0px", + }, + }, + features5: { + ...section, + backgroundRepeat: "no-repeat", + position: "relative", + padding: "80px 0px", + textAlign: "center", + "& $title": { + zIndex: "2", + position: "relative", + marginBottom: "30px", + color: whiteColor, + }, + "& p": { + color: whiteColor, + }, + "&:after": { + background: "rgba(" + hexToRgb(blackColor) + ",0.65)", + position: "absolute", + width: "100%", + height: "100%", + content: "''", + zIndex: "0", + left: "0px", + top: "0px", + }, + }, + features: { + textAlign: "center", + paddingTop: "30px", + pddingBottom: "0px", + }, + featuresShow: { + zIndex: 3, + border: "1px solid rgba(" + hexToRgb(whiteColor) + ",0.35)", + borderTop: 0, + borderBottom: 0, + "&:last-of-type": { + borderRight: 0, + }, + "&:first-of-type": { + borderLeft: 0, + }, + "& h4,& p,& svg,& .fab,& .fas,& .far,& .fal,& .material-icons": { + color: whiteColor, + }, + "& p": { + lineHeight: "24px", + fontSize: "16px", + }, + }, + ourClients: { + textAlign: "center", + "& img": { + width: "100%", + maxWidth: "140px", + margin: "0 auto", + display: "inline-block", + }, + }, + cardTitle: { + ...cardTitle, + marginTop: 0, + }, + cardDescription: { + fontSize: "16px", + lineHeight: "1.6em", + color: grayColor[0], + }, + coloredShadow, + alignLeft: { + textAlign: "left", + }, +}; + +export default overviewStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/pricingStyle.js b/src/assets/jss/react-material/views/presentationSections/pricingStyle.js new file mode 100644 index 0000000..d1f7ef3 --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/pricingStyle.js @@ -0,0 +1,97 @@ +import { + section, + container, + mlAuto, + mrAuto, + title, + description, + card, + blackColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const pricingStyle = { + container, + mlAuto, + mrAuto, + title, + section: { + ...section, + padding: "80px 0", + zIndex: 3, + position: "relative", + textAlign: "center", + }, + socialLine: { + padding: ".9375rem 0px", + textAlign: "center", + width: "100%", + }, + marginRight: { + marginRight: "3px", + }, + description: { + ...description, + color: grayColor[0], + }, + card: { + ...card, + marginBottom: "30px", + boxShadow: + "0 2px 2px 0 rgba(" + + hexToRgb(blackColor) + + ",0.14), 0 3px 1px -2px rgba(" + + hexToRgb(blackColor) + + ",0.2), 0 1px 5px 0 rgba(" + + hexToRgb(blackColor) + + ",0.12)", + "& ul": { + listStyle: "none", + padding: 0, + maxWidth: "240px", + margin: "10px auto", + }, + "& ul li": { + color: grayColor[0], + textAlign: "center", + padding: "12px 0px", + borderBottom: "1px solid rgba(" + hexToRgb(grayColor[0]) + ",0.3)", + }, + "& ul li b": { + color: grayColor[1], + }, + "& ul li:last-child": { + border: 0, + }, + }, + cardMargin: { + marginTop: "80px", + }, + cardCategory: { + color: grayColor[0], + marginTop: "10px", + }, + cardTitle: { + marginTop: "30px", + color: grayColor[1], + textDecoration: "none", + fontWeight: "700", + fontFamily: "Roboto Slab,Times New Roman,serif", + "& small": { + position: "relative", + top: "-17px", + fontSize: "26px", + display: "inline-flex", + height: 0, + }, + }, + cardBody: { + padding: "15px", + }, + navPillsContent: { + padding: "20px 0px 50px 0px", + }, +}; + +export default pricingStyle; diff --git a/src/assets/jss/react-material/views/presentationSections/sectionsStyle.js b/src/assets/jss/react-material/views/presentationSections/sectionsStyle.js new file mode 100644 index 0000000..ffa82ad --- /dev/null +++ b/src/assets/jss/react-material/views/presentationSections/sectionsStyle.js @@ -0,0 +1,51 @@ +import { + section, + container, + containerFluid, + title, + description, + mlAuto, + mrAuto, + blackColor, + hexToRgb, +} from "assets/jss/react-material"; + +const sectionStyle = { + sectionSections: { + ...section, + padding: "70px 0px", + paddingBottom: "0px", + marginBottom: "-35px", + "& img": { + width: "100%", + borderRadius: "3px", + boxShadow: + "0 8px 10px 1px rgba(" + + hexToRgb(blackColor) + + ",0.14), 0 3px 14px 2px rgba(" + + hexToRgb(blackColor) + + ",0.12), 0 5px 5px -3px rgba(" + + hexToRgb(blackColor) + + ",0.2)", + transition: "all .2s cubic-bezier(0.4,0,0.2,1)", + "&:hover": { + transform: "scale(1.02)", + }, + }, + }, + container, + containerFluid, + sectionDescription: { + textAlign: "center", + marginBottom: "60px", + }, + title, + description, + mlAuto, + mrAuto, + photoGallery: { + padding: "7.5px", + }, +}; + +export default sectionStyle; diff --git a/src/assets/jss/react-material/views/presentationStyle.js b/src/assets/jss/react-material/views/presentationStyle.js new file mode 100644 index 0000000..2864979 --- /dev/null +++ b/src/assets/jss/react-material/views/presentationStyle.js @@ -0,0 +1,57 @@ +import { + container, + title, + main, + whiteColor, + grayColor, + mainRaised, + hexToRgb, +} from "assets/jss/react-material"; +import footerStyle from "assets/jss/react-material/views/componentsSections/footerStyle"; + +const presentationStyle = { + ...footerStyle, + main: { + ...main, + /*overflow: "hidden"*/ + }, + mainRaised, + parallax: { + height: "90vh", + overflow: "hidden", + }, + container: { + ...container, + zIndex: 1, + }, + title: { + ...title, + color: whiteColor, + }, + brand: { + color: whiteColor, + textAlign: "center", + "& h1": { + fontSize: "4.2rem", + fontWeight: "600", + display: "inline-block", + position: "relative", + }, + }, + proBadge: { + position: "relative", + fontSize: "22px", + textTransform: "uppercase", + fontWeight: "700", + right: "-10px", + padding: "10px 18px", + top: "-30px", + background: whiteColor, + borderRadius: "3px", + color: grayColor[18], + lineHeight: "22px", + boxShadow: "0 5px 5px -2px rgba(" + hexToRgb(grayColor[25]) + ",.4)", + }, +}; + +export default presentationStyle; diff --git a/src/assets/jss/react-material/views/pricingSections/featuresStyle.js b/src/assets/jss/react-material/views/pricingSections/featuresStyle.js new file mode 100644 index 0000000..98d687f --- /dev/null +++ b/src/assets/jss/react-material/views/pricingSections/featuresStyle.js @@ -0,0 +1,15 @@ +import { title, mlAuto, mrAuto } from "assets/jss/react-material"; + +const featuresStyle = { + featuresSection: { + padding: "80px 0px", + }, + textCenter: { + textAlign: "center", + }, + title, + mlAuto, + mrAuto, +}; + +export default featuresStyle; diff --git a/src/assets/jss/react-material/views/pricingSections/pricingStyle.js b/src/assets/jss/react-material/views/pricingSections/pricingStyle.js new file mode 100644 index 0000000..5b8e284 --- /dev/null +++ b/src/assets/jss/react-material/views/pricingSections/pricingStyle.js @@ -0,0 +1,32 @@ +import { + mrAuto, + mlAuto, + cardTitle, + whiteColor, + infoColor, + hexToRgb, +} from "assets/jss/react-material"; + +const pricingStyle = { + mrAuto, + mlAuto, + cardTitle, + cardTitleWhite: { + ...cardTitle, + color: whiteColor + " !important", + "& small": { + color: "rgba(" + hexToRgb(whiteColor) + ",0.8)!important", + }, + }, + textCenter: { + textAlign: "center", + }, + pricingSection: { + padding: "80px 0px", + }, + textInfo: { + color: infoColor[0] + " !important", + }, +}; + +export default pricingStyle; diff --git a/src/assets/jss/react-material/views/pricingStyle.js b/src/assets/jss/react-material/views/pricingStyle.js new file mode 100644 index 0000000..dc055a9 --- /dev/null +++ b/src/assets/jss/react-material/views/pricingStyle.js @@ -0,0 +1,67 @@ +import { + container, + title, + main, + mainRaised, + whiteColor, + mrAuto, + mlAuto, +} from "assets/jss/react-material"; + +const pricingStyle = { + main, + mainRaised, + mrAuto, + mlAuto, + container: { + ...container, + zIndex: 1, + }, + title: { + ...title, + "&, & + h4": { + color: whiteColor, + }, + }, + textCenter: { + textAlign: "center", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default pricingStyle; diff --git a/src/assets/jss/react-material/views/productStyle.js b/src/assets/jss/react-material/views/productStyle.js new file mode 100644 index 0000000..5c9c874 --- /dev/null +++ b/src/assets/jss/react-material/views/productStyle.js @@ -0,0 +1,192 @@ +import { + container, + mlAuto, + section, + main, + mainRaised, + title, + cardTitle, + grayColor, + roseColor, +} from "assets/jss/react-material"; + +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; +import imagesStyles from "assets/jss/react-material/imagesStyles"; +import customSelectStyle from "assets/jss/react-material/customSelectStyle"; + +const productStyle = { + mlAuto, + main, + ...imagesStyles, + ...customSelectStyle, + ...tooltipsStyle, + container: { + ...container, + zIndex: 2, + }, + mainRaised: { + ...mainRaised, + }, + section: { + ...section, + padding: "70px 0px", + }, + title: { + ...title, + marginBottom: 0, + }, + sectionGray: { + background: grayColor[14], + }, + mainPrice: { + margin: "10px 0px 25px", + }, + textCenter: { + textAlign: "center!important", + }, + features: { + paddingTop: "30px", + }, + productPage: { + backgroundColor: grayColor[2], + "& $mainRaised": { + margin: "-40vh 0 0", + padding: "40px", + }, + "& .image-gallery-slide img": { + borderRadius: "3px", + maxWidth: "300px", + height: "auto", + }, + "& .image-gallery-swipe": { + margin: "30px 0px", + overflow: "hidden", + width: "100%", + height: "auto", + textAlign: "center", + }, + "& .image-gallery-thumbnails > .image-gallery-thumbnails-container .image-gallery-thumbnail": { + "&.active > .image-gallery-thumbnail-inner": { + opacity: "1", + borderColor: grayColor[6], + }, + "& > .image-gallery-thumbnail-inner": { + width: "80%", + maxWidth: "85px", + margin: "0 auto", + padding: "8px", + display: "block", + border: "1px solid transparent", + background: "transparent", + borderRadius: "3px", + opacity: ".8", + }, + "& > .image-gallery-thumbnail-inner img": { + borderRadius: "3px", + width: "100%", + height: "auto", + textAlign: "center", + }, + }, + }, + titleRow: { + marginTop: "-8vh", + }, + floatRight: { + float: "right!important", + }, + pageHeader: { + minHeight: "60vh", + maxHeight: "600px", + height: "auto", + backgroundPosition: "top center", + }, + relatedProducts: { + marginTop: "50px", + "& $title": { + marginBottom: "80px", + }, + }, + pickSize: { + marginTop: "50px", + }, + pullRight: { + float: "right", + }, + cardCategory: { + textAlign: "center", + marginTop: "10px", + }, + cardTitle: { + ...cardTitle, + textAlign: "center", + }, + cardDescription: { + textAlign: "center", + color: grayColor[0], + }, + textRose: { + color: roseColor[0], + }, + justifyContentBetween: { + justifyContent: "space-between!important", + }, + socialFeed: { + "& p": { + display: "table-cell", + verticalAlign: "top", + overflow: "hidden", + paddingBottom: "10px", + maxWidth: 300, + }, + "& i": { + fontSize: "20px", + display: "table-cell", + paddingRight: "10px", + }, + }, + img: { + width: "20%", + marginRight: "5%", + marginBottom: "5%", + float: "left", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + top: "3px", + width: "18px", + height: "18px", + position: "relative", + }, +}; + +export default productStyle; diff --git a/src/assets/jss/react-material/views/profilePageStyle.js b/src/assets/jss/react-material/views/profilePageStyle.js new file mode 100644 index 0000000..0b81843 --- /dev/null +++ b/src/assets/jss/react-material/views/profilePageStyle.js @@ -0,0 +1,148 @@ +import { + container, + cardTitle, + title, + mlAuto, + mrAuto, + main, + whiteColor, + mainRaised, + grayColor, +} from "assets/jss/react-material"; + +import imagesStyle from "assets/jss/react-material/imagesStyles"; + +import tooltipsStyle from "assets/jss/react-material/tooltipsStyle"; + +const profilePageStyle = { + container, + ...imagesStyle, + ...tooltipsStyle, + cardTitleWhite: { + ...cardTitle, + color: whiteColor + " !important", + }, + cardTitle, + profile: { + textAlign: "center", + "& img": { + maxWidth: "160px", + width: "100%", + margin: "0 auto", + transform: "translate3d(0, -50%, 0)", + }, + }, + description: { + margin: "1.071rem auto 0", + maxWidth: "600px", + color: grayColor[0], + }, + textCenter: { + textAlign: "center !important", + }, + name: { + marginTop: "-80px", + }, + + main: { + ...main, + }, + mainRaised: { + ...mainRaised, + }, + title: { + ...title, + position: "relative", + marginTop: "30px", + minHeight: "32px", + textDecoration: "none", + }, + follow: { + position: "absolute", + top: "0", + right: "0", + }, + followIcon: { + width: "20px", + height: "20px", + }, + followButton: { + marginTop: "-28px !important", + }, + gridItem: { + ...mlAuto, + ...mrAuto, + }, + collections: { + marginTop: "20px", + }, + cardBody: { + display: "flex", + boxOrient: "vertical", + boxDirection: "normal", + flexDirection: "column", + boxPack: "center", + justifyContent: "center", + }, + badge: { + display: "inline-table", + margin: "0 auto", + }, + listUnstyled: { + paddingLeft: "0", + listStyle: "none", + "& > li": { + padding: "5px 0px", + fontSize: "1em", + }, + }, + profileTabs: { + marginTop: "4.284rem", + marginBottom: "50px", + }, + card: { + textAlign: "left !important", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, + parallax: { + height: "380px", + backgroundPosition: "top center", + }, +}; + +export default profilePageStyle; diff --git a/src/assets/jss/react-material/views/sectionsPageStyle.js b/src/assets/jss/react-material/views/sectionsPageStyle.js new file mode 100644 index 0000000..13400b8 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsPageStyle.js @@ -0,0 +1,9 @@ +import { main } from "assets/jss/react-material"; + +const sectionsPageStyle = { + main: { + ...main, + }, +}; + +export default sectionsPageStyle; diff --git a/src/assets/jss/react-material/views/sectionsSections/blogsStyle.js b/src/assets/jss/react-material/views/sectionsSections/blogsStyle.js new file mode 100644 index 0000000..78ffa30 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/blogsStyle.js @@ -0,0 +1,51 @@ +import { + container, + title, + cardTitle, + coloredShadow, + description, + mlAuto, + mrAuto, + grayColor, +} from "assets/jss/react-material"; + +const blogsSection = { + container, + title, + coloredShadow, + cardTitle, + mlAuto, + mrAuto, + description, + blog: { + padding: "50px 0", + }, + cardCategory: { + marginBottom: "0", + marginTop: "10px", + "& svg,& .fab,& .fas,& .far,& .fal,& .material-icons": { + position: "relative", + top: "8px", + lineHeight: "0", + }, + }, + description1: { + ...description, + lineHeight: "1.313rem", + }, + author: { + "& a": { + color: grayColor[1], + textDecoration: "none", + }, + }, + card: { + marginBottom: "80px", + }, + card4: { + marginBottom: "60px", + textAlign: "center", + }, +}; + +export default blogsSection; diff --git a/src/assets/jss/react-material/views/sectionsSections/contactsStyle.js b/src/assets/jss/react-material/views/sectionsSections/contactsStyle.js new file mode 100644 index 0000000..068b1d6 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/contactsStyle.js @@ -0,0 +1,113 @@ +import { + container, + section, + sectionDark, + mlAuto, + title, + description, + cardTitle, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +import customCheckboxRadioSwitch from "assets/jss/react-material/customCheckboxRadioSwitchStyle"; + +const contactsSection = { + ...customCheckboxRadioSwitch, + container, + mlAuto, + title, + description, + cardTitle, + section: { + ...sectionDark, + ...section, + position: "relative", + "& $container": { + zIndex: "2", + position: "relative", + }, + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7)", + }, + "& $title": { + color: whiteColor, + }, + "& $description": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + }, + "& $infoArea": {}, + }, + contacts: { + padding: "80px 0", + }, + infoArea: { + padding: "0", + margin: "0", + "& svg,& .fab,& .fas,& .far,& .fal,& .material-icons": { + color: whiteColor, + }, + "& h4": { + marginTop: "20px", + color: whiteColor, + }, + }, + card1: { + marginTop: "30px", + "& $cardTitle": { + marginBottom: "0.75rem !important", + color: whiteColor, + }, + }, + textCenter: { + textAlign: "center", + }, + justifyContentBetween: { + WebkitBoxPack: "justify !important", + MsFlexPack: "justify !important", + justifyContent: "space-between !important", + }, + pullRight: { + float: "right", + }, + card2: { + "@media (min-width: 991px)": { + margin: "80px 0 80px 150px", + }, + maxWidth: "560px", + float: "left", + "& $cardTitle": { + marginBottom: "0.75rem !important", + color: whiteColor, + }, + }, + map: { + overflow: "hidden", + width: "100%", + height: "800px", + position: "absolute", + }, + contacts2: { + padding: "0", + height: "800px", + }, + infoArea2: { + padding: "0", + margin: "0", + "& h4": { + fontSize: "1.0625rem", + lineHeight: "1.55em", + }, + }, +}; + +export default contactsSection; diff --git a/src/assets/jss/react-material/views/sectionsSections/featuresStyle.js b/src/assets/jss/react-material/views/sectionsSections/featuresStyle.js new file mode 100644 index 0000000..a05c9dd --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/featuresStyle.js @@ -0,0 +1,105 @@ +import { + container, + mlAuto, + mrAuto, + title, + description, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +const features = { + container, + mlAuto, + mrAuto, + title, + description, + features1: { + textAlign: "center", + padding: "80px 0", + }, + features2: { + padding: "80px 0", + }, + features3: { + padding: "80px 0", + "& $phoneContainer": { + maxWidth: "220px", + margin: "0 auto", + }, + }, + features4: { + padding: "80px 0", + "& $phoneContainer": { + maxWidth: "260px", + margin: "60px auto 0", + }, + }, + features5: { + padding: "80px 0", + backgroundSize: "cover", + backgroundPosition: "50%", + backgroundRepeat: "no-repeat", + position: "relative", + "& $title": { + marginBottom: "30px", + }, + "& $title,& $container": { + position: "relative", + zIndex: "2", + color: whiteColor, + }, + "&:after": { + background: "rgba(" + hexToRgb(blackColor) + ",0.55)", + position: "absolute", + width: "100%", + height: "100%", + content: "''", + zIndex: "0", + left: "0px", + top: "0px", + }, + "& $container": { + "& $gridContainer:last-child": { + "& $gridItem": { + borderBottom: "0", + }, + }, + "& $gridItem": { + border: "1px solid rgba(" + hexToRgb(whiteColor) + ", 0.35)", + borderTop: "0", + borderLeft: "0", + "&:last-child": { + borderRight: "0", + }, + }, + }, + "& $infoArea5": { + textAlign: "center", + maxWidth: "310px", + minHeight: "320px", + "& h4,& p,& svg,& .fab,& .fas,& .far,& .fal,& .material-icons": { + color: whiteColor, + }, + }, + }, + gridContainer: {}, + gridItem: {}, + textCenter: { + textAlign: "center", + }, + phoneContainer: { + "& img": { + width: "100%", + }, + }, + infoArea: { + maxWidth: "none", + margin: "0 auto", + padding: "10px 0 0px", + }, + infoArea5: {}, +}; + +export default features; diff --git a/src/assets/jss/react-material/views/sectionsSections/headersStyle.js b/src/assets/jss/react-material/views/sectionsSections/headersStyle.js new file mode 100644 index 0000000..852638c --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/headersStyle.js @@ -0,0 +1,94 @@ +import headerLinksStyle from "assets/jss/react-material/components/headerLinksStyle"; +import { + container, + mrAuto, + title, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +const headersSection = (theme) => ({ + ...headerLinksStyle(theme), + sectionBlank: { + height: "70px", + display: "block", + }, + container: { + ...container, + zIndex: "2", + position: "relative", + "& h1, & h4, & h6": { + color: whiteColor, + }, + }, + conatinerHeader2: { + ...container, + zIndex: "2", + position: "relative", + "& h1, & h4, & h6": { + color: whiteColor, + }, + paddingTop: "25vh", + }, + title, + pageHeader: { + position: "relative", + height: "100vh", + maxHeight: "1600px", + backgroundPosition: "50%", + backgroundSize: "cover", + margin: "0", + padding: "0", + border: "0", + display: "flex", + WebkitBoxAlign: "center", + MsFlexAlign: "center", + alignItems: "center", + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after,&:before": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + }, + }, + iframeContainer: { + "& > iframe": { + width: "100%", + boxShadow: + "0 16px 38px -12px rgba(" + + hexToRgb(blackColor) + + ", 0.56), 0 4px 25px 0px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2)", + }, + }, + mrAuto, + textCenter: { + textAlign: "center", + }, + card: { + marginTop: "60px", + }, + formControl: { + margin: "0", + padding: "8px 0 0 0", + }, + textRight: { + textAlign: "right", + }, + button: { + margin: "0 !important", + }, +}); + +export default headersSection; diff --git a/src/assets/jss/react-material/views/sectionsSections/pricingStyle.js b/src/assets/jss/react-material/views/sectionsSections/pricingStyle.js new file mode 100644 index 0000000..2f71036 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/pricingStyle.js @@ -0,0 +1,124 @@ +import { + container, + section, + sectionDark, + mlAuto, + mrAuto, + title, + description, + cardTitle, + roseColor, + blackColor, + whiteColor, + grayColor, + hexToRgb, +} from "assets/jss/react-material"; + +const pricingSection = { + container, + mlAuto, + mrAuto, + title, + cardTitle, + description, + cardTitleWhite: { + ...cardTitle, + color: whiteColor + " !important", + }, + sectionGray: { + background: grayColor[14], + }, + section: { + ...section, + ...sectionDark, + position: "relative", + "& $container": { + position: "relative", + zIndex: "2", + }, + "& $description": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.5)", + }, + "& $cardCategory": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + }, + "& $title": { + color: whiteColor, + marginBottom: "10px", + }, + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7)", + }, + }, + pricing1: { + "&$section:after": { + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.8)", + }, + }, + pricing: { + padding: "80px 0", + }, + textCenter: { + textAlign: "center", + }, + sectionSpace: { + height: "70px", + display: "block", + }, + cardCategory: { + ...description, + }, + cardCategoryWhite: { + color: whiteColor, + }, + cardDescription: { + ...description, + }, + justifyContentCenter: { + WebkitBoxPack: "center !important", + MsFlexPack: "center !important", + justifyContent: "center !important", + }, + icon: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + margin: "10px auto 0", + width: "130px", + height: "130px", + border: "1px solid " + grayColor[14], + borderRadius: "50%", + lineHeight: "174px", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "55px", + lineHeight: "55px", + }, + "& svg": { + width: "55px", + height: "55px", + }, + }, + iconWhite: { + color: whiteColor, + }, + iconRose: { + color: roseColor[0], + }, + marginTop30: { + marginTop: "30px", + }, + marginBottom20: { + marginBottom: "20px", + }, + marginBottom30: { + marginBottom: "30px", + }, +}; + +export default pricingSection; diff --git a/src/assets/jss/react-material/views/sectionsSections/projectsStyle.js b/src/assets/jss/react-material/views/sectionsSections/projectsStyle.js new file mode 100644 index 0000000..d4dd1d3 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/projectsStyle.js @@ -0,0 +1,97 @@ +import { + container, + mlAuto, + mrAuto, + title, + cardTitle, + description, + coloredShadow, + whiteColor, + sectionDark, + hexToRgb, +} from "assets/jss/react-material"; + +const projectsSection = { + container, + mlAuto, + mrAuto, + title, + description, + coloredShadow, + cardTitle, + textCenter: { + textAlign: "center", + }, + projects: { + padding: "80px 0", + }, + tabSpace: { + padding: "20px 0 50px 0px", + }, + cardCategory: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.7) !important", + marginTop: "10px", + }, + cardTitleWhite: { + ...cardTitle, + color: whiteColor + " !important", + marginTop: "10px !important", + }, + cardDescription: { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.7) !important", + }, + sectionSpace: { + height: "70px", + display: "block", + }, + marginTop20: { + marginTop: "20px", + }, + card2: { + textAlign: "center", + }, + sectionDark: { + ...sectionDark, + backgroundSize: "550% 450%", + "& $title, & $cardTitle": { + color: whiteColor, + }, + "& $cardCategory": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.5) !important", + }, + "& $cardDescription": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76) !important", + }, + }, + projects3: { + "& $title": { + marginBottom: "80px", + marginTop: "5px", + }, + "& h6": { + marginBottom: "5px", + }, + }, + card4: { + marginTop: "0", + marginBottom: "0", + "& $cardTitle": { + color: whiteColor, + }, + }, + cardBody4: { + paddingTop: "140px", + paddingBottom: "140px", + }, + info4: { + padding: "0", + }, + projects4: { + "& hr": { + margin: "70px auto", + maxWidth: "970px", + }, + }, +}; + +export default projectsSection; diff --git a/src/assets/jss/react-material/views/sectionsSections/teamsStyle.js b/src/assets/jss/react-material/views/sectionsSections/teamsStyle.js new file mode 100644 index 0000000..26ad598 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/teamsStyle.js @@ -0,0 +1,87 @@ +import { + container, + title, + cardTitle, + description, + mlAuto, + mrAuto, + section, + sectionDark, + coloredShadow, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +const teamsSection = { + container, + title, + mlAuto, + mrAuto, + cardTitle, + coloredShadow, + description, + descriptionWhite: { + ...description, + }, + textCenter: { + textAlign: "center", + }, + team: { + padding: "80px 0", + "& h5$description,& h5$descriptionWhite": { + marginBottom: "80px", + }, + }, + section: { + ...sectionDark, + ...section, + position: "relative", + "& $title": { + color: whiteColor, + }, + "& $descriptionWhite": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + }, + "& $container": { + zIndex: "2", + position: "relative", + }, + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7)", + }, + }, + justifyContent: { + WebkitBoxPack: "center !important", + MsFlexPack: "center !important", + justifyContent: "center !important", + }, + cardCategory: { + marginTop: "10px", + }, + btn: { + marginTop: "0 !important", + }, + card3: { + textAlign: "left", + }, + card5: { + textAlign: "left", + "& $cardTitle": { + color: whiteColor, + }, + "& $description": { + color: whiteColor, + }, + }, +}; + +export default teamsSection; diff --git a/src/assets/jss/react-material/views/sectionsSections/testimonialsStyle.js b/src/assets/jss/react-material/views/sectionsSections/testimonialsStyle.js new file mode 100644 index 0000000..5e1c070 --- /dev/null +++ b/src/assets/jss/react-material/views/sectionsSections/testimonialsStyle.js @@ -0,0 +1,108 @@ +import { + container, + sectionDark, + section, + mlAuto, + mrAuto, + title, + description, + cardTitle, + blackColor, + whiteColor, + hexToRgb, +} from "assets/jss/react-material"; + +const testimonialsSection = { + container, + mlAuto, + mrAuto, + title, + description, + cardTitle, + sectionDark: { + ...sectionDark, + "& $cardDescription": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + }, + "& $cardTitle": { + color: whiteColor, + }, + backgroundSize: "550% 450%", + }, + cardDescription: { + ...description, + }, + cardCategory: { + ...description, + }, + sectionImage: { + ...sectionDark, + ...section, + position: "relative", + "& $container": { + zIndex: "2", + position: "relative", + }, + "&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: "''", + backgroundColor: "rgba(" + hexToRgb(blackColor) + ", 0.7)", + }, + "& $title": { + color: whiteColor, + }, + "& $description": { + color: "rgba(" + hexToRgb(whiteColor) + ", 0.76)", + }, + }, + testimonials: { + padding: "80px 0", + "& $cardDescription": { + fontStyle: "italic", + }, + }, + textCenter: { + textAlign: "center", + }, + icon: { + marginTop: "30px", + "& .fab,& .fas,& .far,& .fal,& .material-icons": { + fontSize: "40px", + lineHeight: "40px", + }, + "& svg": { + width: "40px", + height: "40px", + }, + }, + card1: { + "& $cardDescription": { + marginBottom: "50px", + fontStyle: "italic", + }, + }, + starIcons: { + width: "24px", + height: "24px", + }, + testimonial2: { + "& .slick-dots": { + display: "none !important", + }, + }, + card2: { + maxWidth: "650px", + margin: "60px auto", + "& $cardDescription": { + fontStyle: "italic", + }, + }, +}; + +export default testimonialsSection; diff --git a/src/assets/jss/react-material/views/shoppingCartStyle.js b/src/assets/jss/react-material/views/shoppingCartStyle.js new file mode 100644 index 0000000..27c092d --- /dev/null +++ b/src/assets/jss/react-material/views/shoppingCartStyle.js @@ -0,0 +1,125 @@ +import { + container, + title, + cardTitle, + main, + mainRaised, + mrAuto, + whiteColor, + grayColor, + mlAuto, +} from "assets/jss/react-material"; + +import buttonGroup from "assets/jss/react-material/buttonGroupStyle"; +import tooltips from "assets/jss/react-material/tooltipsStyle"; + +const styles = { + main, + mainRaised, + mrAuto, + mlAuto, + cardTitle, + ...buttonGroup, + ...tooltips, + container: { + ...container, + zIndex: 1, + }, + title: { + ...title, + "&, & + h4": { + color: whiteColor, + }, + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, + imgContainer: { + width: "120px", + maxHeight: "160px", + overflow: "hidden", + display: "block", + "& img": { + width: "100%", + }, + }, + description: { + maxWidth: "150px", + }, + tdName: { + minWidth: "200px", + fontWeight: "400", + fontSize: "1.5em", + }, + tdNameAnchor: { + color: grayColor[1], + }, + tdNameSmall: { + color: grayColor[0], + fontSize: "0.75em", + fontWeight: "300", + }, + tdNumber: { + textAlign: "right", + minWidth: "150px", + fontWeight: "300", + fontSize: "1.125em !important", + }, + tdNumberSmall: { + marginRight: "3px", + }, + tdNumberAndButtonGroup: { + lineHeight: "1 !important", + "& svg,& .fab,& .fas,& .far,& .fal,& .material-icons": { + marginRight: "0", + }, + }, + customFont: { + fontSize: "16px !important", + }, + actionButton: { + margin: "0px", + padding: "5px", + }, + textCenter: { + textAlign: "center", + }, + textRight: { + textAlign: "right", + }, +}; + +export default styles; diff --git a/src/assets/jss/react-material/views/signupPageStyle.js b/src/assets/jss/react-material/views/signupPageStyle.js new file mode 100644 index 0000000..241042a --- /dev/null +++ b/src/assets/jss/react-material/views/signupPageStyle.js @@ -0,0 +1,143 @@ +import { + primaryColor, + grayColor, + container, + cardTitle, + whiteColor, + blackColor, + hexToRgb, +} from "assets/jss/react-material"; + +import customCheckboxRadioSwitchStyle from "assets/jss/react-material/customCheckboxRadioSwitchStyle"; + +const signupPageStyle = { + container: { + ...container, + zIndex: "2", + position: "relative", + paddingTop: "20vh", + color: whiteColor, + }, + pageHeader: { + minHeight: "100vh", + height: "auto", + display: "inherit", + position: "relative", + margin: "0", + padding: "0", + border: "0", + alignItems: "center", + "&:before": { + background: "rgba(" + hexToRgb(blackColor) + ", 0.5)", + }, + "&:after": { + background: + "linear-gradient(60deg,rgba(" + + hexToRgb(primaryColor[4]) + + ",.56),rgba(" + + hexToRgb(primaryColor[5]) + + ",.95))", + }, + "&:before,&:after": { + position: "absolute", + zIndex: "1", + width: "100%", + height: "100%", + display: "block", + left: "0", + top: "0", + content: '""', + }, + }, + cardSignup: { + borderRadius: "6px", + boxShadow: + "0 16px 24px 2px rgba(" + + hexToRgb(blackColor) + + ", 0.14), 0 6px 30px 5px rgba(" + + hexToRgb(blackColor) + + ", 0.12), 0 8px 10px -5px rgba(" + + hexToRgb(blackColor) + + ", 0.2);", + marginBottom: "100px", + padding: "40px 0px", + }, + cardTitle: { + ...cardTitle, + textDecoration: "none", + textAlign: "center !important", + marginBottom: "0.75rem", + }, + ...customCheckboxRadioSwitchStyle, + socials: { + marginTop: "0", + position: "absolute", + width: "100%", + transform: "none", + left: "0", + top: "0", + height: "100%", + lineHeight: "41px", + fontSize: "20px", + }, + textCenter: { + textAlign: "center", + }, + inputAdornment: { + marginRight: "18px", + position: "relative", + }, + inputAdornmentIcon: { + color: grayColor[13], + }, + form: { + margin: "0", + }, + infoArea: { + padding: "0px 0px 20px !important", + }, + block: { + color: "inherit", + padding: "0.9375rem", + fontWeight: "500", + fontSize: "12px", + textTransform: "uppercase", + borderRadius: "3px", + textDecoration: "none", + position: "relative", + display: "block", + }, + inlineBlock: { + display: "inline-block", + padding: "0px", + width: "auto", + }, + list: { + marginBottom: "0", + padding: "0", + marginTop: "0", + }, + left: { + float: "left!important", + display: "block", + "&,& *,& *:hover,& *:focus": { + color: whiteColor + " !important", + }, + }, + right: { + padding: "15px 0", + margin: "0", + float: "right", + "&,& *,& *:hover,& *:focus": { + color: whiteColor + " !important", + }, + }, + icon: { + width: "18px", + height: "18px", + top: "3px", + position: "relative", + }, +}; + +export default signupPageStyle; diff --git a/src/assets/scss/core/_fileupload.scss b/src/assets/scss/core/_fileupload.scss new file mode 100644 index 0000000..7a7e365 --- /dev/null +++ b/src/assets/scss/core/_fileupload.scss @@ -0,0 +1,123 @@ +.btn-file { + position: relative; + overflow: hidden; + vertical-align: middle; +} +.btn-file > input { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + margin: 0; + font-size: 23px; + cursor: pointer; + filter: alpha(opacity=0); + opacity: 0; + + direction: ltr; +} +.fileinput { + text-align: center; + display: inline-block; + margin-bottom: 9px; + + input[type="file"] { + display: none; + } +} +.fileinput .form-control { + display: inline-block; + padding-top: 7px; + padding-bottom: 5px; + margin-bottom: 0; + vertical-align: middle; + cursor: text; +} +.fileinput .thumbnail { + display: inline-block; + margin-bottom: 10px; + overflow: hidden; + text-align: center; + vertical-align: middle; + max-width: 360px; + box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.24), + 0 8px 10px -5px rgba(0, 0, 0, 0.2); + + &.img-circle { + border-radius: 50%; + max-width: 100px; + } +} +.fileinput .thumbnail > img { + max-height: 100%; + width: 100%; +} +.fileinput .btn { + vertical-align: middle; +} +.fileinput-exists .fileinput-new, +.fileinput-new .fileinput-exists { + display: none; +} +.fileinput-inline .fileinput-controls { + display: inline; +} +.fileinput-filename { + display: inline-block; + overflow: hidden; + vertical-align: middle; +} +.form-control .fileinput-filename { + vertical-align: bottom; +} +.fileinput.input-group { + display: table; +} +.fileinput.input-group > * { + position: relative; + z-index: 2; +} +.fileinput.input-group > .btn-file { + z-index: 1; +} +.fileinput-new.input-group .btn-file, +.fileinput-new .input-group .btn-file { + border-radius: 0 4px 4px 0; +} +.fileinput-new.input-group .btn-file.btn-xs, +.fileinput-new .input-group .btn-file.btn-xs, +.fileinput-new.input-group .btn-file.btn-sm, +.fileinput-new .input-group .btn-file.btn-sm { + border-radius: 0 3px 3px 0; +} +.fileinput-new.input-group .btn-file.btn-lg, +.fileinput-new .input-group .btn-file.btn-lg { + border-radius: 0 6px 6px 0; +} +.form-group.has-warning .fileinput .fileinput-preview { + color: $brand-warning; +} +.form-group.has-warning .fileinput .thumbnail { + border-color: $brand-warning; +} +.form-group.has-error .fileinput .fileinput-preview { + color: $brand-danger; +} +.form-group.has-error .fileinput .thumbnail { + border-color: $brand-danger; +} +.form-group.has-success .fileinput .fileinput-preview { + color: $brand-success; +} +.form-group.has-success .fileinput .thumbnail { + border-color: $brand-success; +} +.input-group-addon:not(:first-child) { + border-left: 0; +} +.thumbnail { + border: 0 none; + border-radius: 0; + padding: 0; +} diff --git a/src/assets/scss/core/_keyframes.scss b/src/assets/scss/core/_keyframes.scss new file mode 100644 index 0000000..cc81d53 --- /dev/null +++ b/src/assets/scss/core/_keyframes.scss @@ -0,0 +1,11 @@ +@keyframes Floatingx { + from { -webkit-transform: translate(50px, 0px) } + 65% { -webkit-transform: translate(0, 0) } + to { -webkit-transform: translate(50px, -0px) } +} + +@keyframes Floatingy { + from { -webkit-transform: translate(0, 0px) } + 65% { -webkit-transform: translate(50px, 0) } + to { -webkit-transform: translate(0, -0px) } +} diff --git a/src/assets/scss/core/_misc.scss b/src/assets/scss/core/_misc.scss new file mode 100644 index 0000000..36d3fcf --- /dev/null +++ b/src/assets/scss/core/_misc.scss @@ -0,0 +1,251 @@ +html * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +* { + letter-spacing: normal !important; +} +body { + font-size: 1rem; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 300; + line-height: 1.5em; +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: inherit; +} +h1, +h2, +h3 { + margin-top: 20px; + margin-bottom: 10px; +} +h4, +h5, +h6 { + margin-top: 10px; + margin-bottom: 10px; +} +h1 { + font-size: 3.3125rem; + line-height: 1.15em; +} +h2 { + font-size: 2.25rem; + line-height: 1.5em; +} +h3 { + font-size: 1.5625rem; + line-height: 1.4em; +} +h4 { + font-size: 1.125rem; + line-height: 1.5em; +} +h5 { + font-size: 1.0625rem; + line-height: 1.55em; +} +h6 { + font-size: 0.75rem; + text-transform: uppercase; + font-weight: 500; +} +p { + font-size: 14px; + margin: 0 0 10px; +} +b, +strong { + font-weight: 700; +} +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: transparent; +} +body { + background-color: #eee; + color: $black-color; + margin: 0; + font-size: 1rem; + text-align: left; +} + +legend { + border-bottom: 0; +} + +// Prevent highlight on mobile +* { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; + &:focus { + outline: 0; + } +} + +a { + color: $link-color; + text-decoration: none; + background-color: transparent; + &:hover, + &:focus { + color: darken($link-color, 5%); + text-decoration: none; + } +} + +label { + font-size: 14px; + line-height: 1.42857; + color: $checkboxes-text-color; + font-weight: 400; +} +small { + font-size: 75%; + color: #777; + font-weight: 400; +} +img { + vertical-align: middle; + border-style: none; +} +form { + margin-bottom: 1.125rem; +} + +hr { + margin-top: 1rem; + margin-bottom: 1rem; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1rem; +} + +#images h4 { + margin-bottom: 30px; +} + +#root { + overflow: hidden; +} + +#cd-vertical-nav { + position: fixed; + right: -78px; + top: 50%; + bottom: auto; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 4; +} +#cd-vertical-nav ul { + list-style: none; + padding: 0; +} +#cd-vertical-nav li { + text-align: right; +} +#cd-vertical-nav a { + display: inline-block; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + width: 100%; +} +#cd-vertical-nav a:hover span, +#cd-vertical-nav a.is-selected .cd-dot { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); +} +#cd-vertical-nav .cd-dot { + position: relative; + top: 8px; + right: calc(100% - 15px); + height: 10px; + width: 10px; + border-radius: 50%; + background-color: #995581; + -webkit-transition: -webkit-transform 0.2s, background-color 0.5s; + -moz-transition: -moz-transform 0.2s, background-color 0.5s; + transition: transform 0.2s, background-color 0.5s; + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; +} +#cd-vertical-nav a span { + float: right; + display: inline-block; + -webkit-transform: scale(0.6); + -moz-transform: scale(0.6); + -ms-transform: scale(0.6); + -o-transform: scale(0.6); + transform: scale(0.6); +} +#cd-vertical-nav .cd-label { + position: relative; + margin-right: 10px; + padding: 4px 14px; + color: white; + background: rgba(0, 0, 0, 0.53); + font-size: 10px; + border-radius: 20px; + text-transform: uppercase; + font-weight: 600; + opacity: 0; + -webkit-transform-origin: 100% 50%; + -moz-transform-origin: 100% 50%; + -ms-transform-origin: 100% 50%; + -o-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} +#cd-vertical-nav a:after { + content: ""; + display: table; + clear: both; +} + +#cd-vertical-nav a:hover .cd-label { + opacity: 1; + left: -100%; + -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; + -moz-transition: -moz-transform 0.2s, opacity 0.2s; + transition: transform 0.2s, opacity 0.2s; +} diff --git a/src/assets/scss/core/_mixins.scss b/src/assets/scss/core/_mixins.scss new file mode 100644 index 0000000..ca37550 --- /dev/null +++ b/src/assets/scss/core/_mixins.scss @@ -0,0 +1 @@ +@import "mixins/colored-shadows"; diff --git a/src/assets/scss/core/_variables.scss b/src/assets/scss/core/_variables.scss new file mode 100644 index 0000000..bd44bee --- /dev/null +++ b/src/assets/scss/core/_variables.scss @@ -0,0 +1,17 @@ +@import "variables/colors"; +@import "variables/shadow"; + +@import "variables/bootstrap-material-design-base"; + +// Customized BS variables +@import "variables/brand"; + +// import their vars after customization for use below +$enable-flex: true; // fully adopt flexbox layouts +$enable-shadows: true; // enable shadows, set to false to turn off shadows + +// // Core Bootstrap Variables +@import "variables/functions"; +@import "variables/variables"; + +@import "variables/bootstrap-material-design"; diff --git a/src/assets/scss/core/mixins/_colored-shadows.scss b/src/assets/scss/core/mixins/_colored-shadows.scss new file mode 100644 index 0000000..2717da4 --- /dev/null +++ b/src/assets/scss/core/mixins/_colored-shadows.scss @@ -0,0 +1,128 @@ +@mixin shadow-big() { + box-shadow: 0 16px 38px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 4), + 0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-big-image() { + // new box shadow optimized for Tables and Phones + box-shadow: 0 5px 15px -8px rgba(0, 0, 0, $bmd-shadow-ambient-opacity * 2), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-big-navbar() { + box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3), + 0 3px 20px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-big-color($color) { + // new box shadow optimized for Tables and Phones + box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2), + 0 13px 24px -11px rgba($color, 0.6); +} + +@mixin shadow-small-color($color) { + // new box shadow optimized for Tablets and Phones + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 10px -5px rgba($color, 0.4); +} + +@mixin shadow-navbar-color($color) { + // new box shadow optimized for Tablets and Phones + + @if ($color == $white-color) { + box-shadow: 0 4px 18px 0px rgba(0, 0, 0, 0.12), + 0 7px 10px -5px rgba(0, 0, 0, 0.15); + } @else { + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), + 0 7px 12px -5px rgba($color, 0.46); + } +} + +@mixin shadow-2dp() { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 1px 5px 0 rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-4dp() { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-6dp() { + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 1px 18px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 3px 5px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-8dp() { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-16dp() { + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-2dp-color($color) { + box-shadow: 0 2px 2px 0 rgba($color, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba($color, $bmd-shadow-umbra-opacity), + 0 1px 5px 0 rgba($color, $bmd-shadow-ambient-opacity); +} + +@mixin shadow-4dp-color($color) { + box-shadow: 0 4px 5px 0 rgba($color, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba($color, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-8dp-color($color) { + box-shadow: 0 8px 10px 1px rgba($color, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-16dp-color($color) { + box-shadow: 0 16px 24px 2px rgba($color, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin button-shadow-color($color) { + box-shadow: 0 14px 26px -12px rgba($color, $bmd-shadow-penumbra-opacity * 3), + 0 4px 23px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity); +} + +@mixin shadow-z-1() { + box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12); +} + +@mixin shadow-z-1-hover() { + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); +} + +@mixin shadow-z-2() { + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +@mixin shadow-z-3() { + box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); +} + +@mixin shadow-z-4() { + box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), + 0 25px 55px 0 rgba(0, 0, 0, 0.21); +} + +@mixin shadow-z-5() { + box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), + 0 40px 77px 0 rgba(0, 0, 0, 0.22); +} diff --git a/src/assets/scss/core/variables/_bootstrap-material-design-base.scss b/src/assets/scss/core/variables/_bootstrap-material-design-base.scss new file mode 100644 index 0000000..d6aebbe --- /dev/null +++ b/src/assets/scss/core/variables/_bootstrap-material-design-base.scss @@ -0,0 +1,36 @@ +$gray-lighter: rgba($black, 0.12) !default; +$gray-light: #999 !default; +$gray-alpha: 0.54 !default; +$gray: #555 !default; // spec color +$gray-dark: rgba( + $black, + 0.87 +) !default; // used for text color - others use grey-600 which is considerably lighter + +$bmd-font-weight-base: 400; + +// wondering if any of these could still be refactored out, but are definitely in use. +$bmd-inverse: rgba($white, 1) !default; +$bmd-inverse-light: rgba($white, 0.84) !default; +$bmd-inverse-lighter: rgba($white, 0.54) !default; + +$bmd-label-color: $gray-color !default; +$bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary + +$border-radius-base: 3px !default; +$border-radius-small: 2px !default; +$border-radius-large: 6px !default; +$border-radius-huge: 10px !default; +$border-radius-label: 12px !default; +$border-radius-extreme: 30px !default; + +// Typography elements +$mdb-font-family: "Roboto", "Helvetica", "Arial", sans-serif !default; +$mdb-text-color-light: $white !default; +$mdb-text-color-light-hex: $white !default; // for contrast function in inverse +$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default; +$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse +$icon-color: rgba(0, 0, 0, 0.5) !default; + +$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default; +$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default; diff --git a/src/assets/scss/core/variables/_bootstrap-material-design.scss b/src/assets/scss/core/variables/_bootstrap-material-design.scss new file mode 100644 index 0000000..bd10b41 --- /dev/null +++ b/src/assets/scss/core/variables/_bootstrap-material-design.scss @@ -0,0 +1,232 @@ +$bmd-label-color-focus: $brand-primary !default; +$bmd-invalid-underline: $brand-danger !default; +$bmd-readonly-underline: $input-border-color !default; + +//--- +// verified in use with refactoring to v4 + +//--- +//-- unverified below here +$bmd-brand-inverse: $indigo !default; +// Typography elements FIXME: review to see if we actually need these +$icon-color: rgba($black, 0.5) !default; + +// -------------------- +// inputs +$mdb-input-placeholder-color: #aaaaaa !default; +$mdb-input-underline-color: #d2d2d2 !default; + +$mdb-input-font-size-base: 14px !default; +$mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px +$mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px + +$bmd-bmd-label-static-size-ratio: 75 / 100 !default; +$bmd-help-size-ratio: 75 / 100 !default; + +$bmd-form-control-bg-repeat-y: no-repeat !default; +$bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default; +$bmd-form-control-bg-size: 0 100%, 100% 100% !default; +$bmd-form-control-bg-size-active: 100% 100%, 100% 100% !default; + +// expandable +$input-text-button-size: 32px !default; + +// sizing +$bmd-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-base: 1rem !default; + +$bmd-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-lg: 1rem !default; // 16px + +$bmd-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-sm: 0.75rem !default; // 12px + +$text-disabled: #a8a8a8 !default; +$background-disabled: #eaeaea !default; + +$margin-base: 1.071rem !default; + +// Checkboxes +$bmd-checkbox-size: 1.25rem !default; +$bmd-checkbox-animation-ripple: 500ms !default; +$bmd-checkbox-animation-check: 0.3s !default; +$bmd-checkbox-checked-color: $white !default; +$bmd-checkbox-label-padding: 0.3125rem !default; // 5px +$checkboxes-text-color: $mdb-input-placeholder-color !default; + +$bmd-checkbox-border-size: 0.0625rem !default; +$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default; +$bmd-checkbox-border-color-disabled: $gray-lighter !default; //#bdbdbd !default; + +// Toggle +$mdb-toggle-label-color: $mdb-label-color !default; + +// Variables for datetimepicker // +$padding-default-vertical: 10px !default; +$medium-pale-bg: #f1eae0 !default; +$pale-bg: #f9f7f3 !default; + +$font-color: #66615b !default; + +$brand-default: #cecece !default; +$brand-primary: $purple !default; +$brand-success: $green !default; +$brand-danger: $red !default; +$brand-warning: $orange !default; +$brand-info: $cyan !default; +$brand-rose: $pink !default; + +$black-color: #3c4858 !default; + +// Dropdowns + +$dropdown-item-padding-y: 0.625rem; +$dropdown-item-padding-x: 1.25rem; +$dropdown-header-padding-y: 0.1875rem; +$bmd-dropdown-margin-y: 0.3125rem !default; +$bmd-dropdown-header-color: #777 !default; +$bmd-dropdown-link-color: #333 !default; + +// Switches +$bmd-switch-label-padding: 0.3125rem !default; // 5px +$bmd-switch-width: 2.125rem !default; // 34px +$bmd-switch-height: 0.875rem !default; // 14px +$bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px) + +$bmd-switch-handle-checked-bg: $brand-primary !default; +$bmd-switch-handle-unchecked-bg: #f1f1f1 !default; +$bmd-switch-handle-disabled-bg: #bdbdbd !default; +$bmd-switch-unchecked-bg: $gray-lighter !default; +$bmd-switch-checked-bg: desaturate( + lighten($bmd-switch-handle-checked-bg, 28%), + 32% +); // kind of magic recipe +$bmd-switch-disabled-bg: $gray-lighter !default; + +// Popovers and Popups +$bmd-popover-background: rgba(101, 101, 101, 0.9) !default; +$bmd-popover-color: #ececec !default; + +// Radio: +$bmd-radio-border: 0.0625rem !default; // 1px +$bmd-radio-size: 1rem !default; +$bmd-radio-ripple-offset: 1em !default; +$bmd-radio-label-padding: 0.3125rem !default; // 5px + +$bmd-radio-color-off: $bmd-label-color-inner-focus !default; +$bmd-radio-color-on: $brand-primary !default; +$bmd-radio-color-disabled: $gray-lighter; // +$bmd-radio-color-disabled-inverse: rgba( + $white, + 0.3 +); // dark theme spec: Disabled: #FFFFFF, Opacity 30% + +$white-color: #fff !default; +$navbar-color: #555 !default; +$pills-color: $navbar-color !default; +$black-color: #3c4858 !default; +$link-color: $brand-primary; +$white-transparent: rgba($white-color, 0.8); +$transparent: transparent; + +//Popovers +$popover-color: $navbar-color !default; + +//Tooltips +$tooltip-font-size: 0.75rem !default; + +// Background colors +$bg-primary: $brand-primary; +$bg-danger: $brand-danger; +$bg-warning: $brand-warning; +$bg-info: $brand-info; +$bg-rose: $brand-rose; +$bg-success: $brand-success; +$bg-dark: $grey-900; + +//Paddings +$padding-general-y: 0.625rem !default; +$padding-general-x: 0.9375rem !default; +$padding-card-body-y: 0.9375rem !default; +$padding-card-body-x: 1.875rem !default; + +// Buttons: +$mdb-btn-font-size-base: 12px !default; +$mdb-btn-font-size-lg: 14px !default; +$mdb-btn-font-size-sm: 11px !default; +$mdb-btn-font-size-xs: 10px !default; + +$mdb-btn-fab-size: 41px !default; +$mdb-btn-fab-size-lg: 56px !default; +$mdb-btn-fab-size-mini: 29px !default; +$mdb-btn-fab-font-size: 24px !default; +$mdb-btn-just-icon-font-size: 20px !default; + +$mdb-btn-icon-size: 32px !default; +$mdb-btn-icon-size-mini: 17px !default; + +$bmd-line-height: 1.42857143 !default; +$btn-lg-line-height: 1.3333333 !default; + +//Font-weight +$font-weight-light: 300 !default; +$font-weight-default: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-extra-bold: 700 !default; +$font-weight-ultra-bold: 900 !default; + +//Border-radius +$border-radius-base: 3px !default; +$border-radius-small: 2px !default; +$border-radius-large: 6px !default; +$border-radius-huge: 10px !default; +$border-radius-label: 12px !default; +$border-radius-extreme: 30px !default; + +// Animations +$bmd-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; +$bmd-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default; +$bmd-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default; +$bmd-animation-curve-default: $bmd-animation-curve-fast-out-slow-in !default; +$bmd-animation-dropdown-caret: 150ms !default; +$general-transition-time: 300ms !default; + +$slow-transition-time: 370ms !default; +$fast-transition-time: 150ms !default; + +$transition-linear: linear !default; +$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; +$transition-bezier-rotating-card: cubic-bezier(0.34, 1.45, 0.7, 1) !default; +$transition-ease: ease 0s; + +//variables for social +$social-facebook: #3b5998; +$social-twitter: #55acee; +$social-pinterest: #cc2127; +$social-google: #dd4b39; +$social-linkedin: #0976b4; +$social-dribbble: #ea4c89; +$social-github: #333333; +$social-youtube: #e52d27; +$social-instagram: #125688; +$social-reddit: #ff4500; +$social-tumblr: #35465c; +$social-behance: #1769ff; + +// Variables for checkboxes + +$mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default; +$mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default; + +$mdb-checkbox-size: 20px !default; +$mdb-checkbox-animation-ripple: 500ms !default; +$mdb-checkbox-animation-check: 0.3s !default; +$mdb-checkbox-checked-color: $brand-primary !default; + +$mdb-checkbox-label-color: $mdb-label-color !default; +$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default; + +// Radio: +$mdb-radio-label-color: $mdb-label-color !default; +$mdb-radio-color-off: $mdb-label-color-toggle-focus !default; +$mdb-radio-color-on: $brand-primary !default; diff --git a/src/assets/scss/core/variables/_brand.scss b/src/assets/scss/core/variables/_brand.scss new file mode 100644 index 0000000..a311ac8 --- /dev/null +++ b/src/assets/scss/core/variables/_brand.scss @@ -0,0 +1,7 @@ +// Bootstrap brand color customization +$brand-primary: $purple !default; +$brand-success: $green !default; +$brand-danger: $red !default; +$brand-warning: $orange !default; +$brand-info: $cyan !default; +$brand-rose: $pink !default; diff --git a/src/assets/scss/core/variables/_colors-map.scss b/src/assets/scss/core/variables/_colors-map.scss new file mode 100644 index 0000000..b20e34a --- /dev/null +++ b/src/assets/scss/core/variables/_colors-map.scss @@ -0,0 +1,311 @@ +// these might be useful in a switch to sass...at some point. + +//$bmd-colors: ( +// "red": $red, +// "pink": $pink, +// "purple": $purple, +// "deep-purple": $deep-purple, +// "indigo": $indigo, +// "blue": $blue, +// "light-blue": $light-blue, +// "cyan": $cyan, +// "teal": $teal, +// "green": $green, +// "light-green": $light-green, +// "lime": $lime, +// "yellow": $yellow, +// "amber": $amber, +// "orange": $orange, +// "deep-orange": $deep-orange, +// "brown": $brown, +// "grey": $grey, +// "blue-grey": $blue-grey +//); +// +//$bmd-colors-map: ( +// "red-50": (name: "red", color: $red-50, number: "-50"), +// "red-100": (name: "red", color: $red-100, number: "-100"), +// "red-200": (name: "red", color: $red-200, number: "-200"), +// "red-300": (name: "red", color: $red-300, number: "-300"), +// "red-400": (name: "red", color: $red-400, number: "-400"), +// "red-500": (name: "red", color: $red-500, number: "-500"), +// "red-600": (name: "red", color: $red-600, number: "-600"), +// "red-700": (name: "red", color: $red-700, number: "-700"), +// "red-800": (name: "red", color: $red-800, number: "-800"), +// "red-900": (name: "red", color: $red-900, number: "-900"), +// "red-a100": (name: "red", color: $red-a100, number: "-a100"), +// "red-a200": (name: "red", color: $red-a200, number: "-a200"), +// "red-a400": (name: "red", color: $red-a400, number: "-a400"), +// "red-a700": (name: "red", color: $red-a700, number: "-a700"), +// "red": (name: "red", color: $red, number: ""), +// "pink-50": (name: "pink", color: $pink-50, number: "-50"), +// "pink-100": (name: "pink", color: $pink-100, number: "-100"), +// "pink-200": (name: "pink", color: $pink-200, number: "-200"), +// "pink-300": (name: "pink", color: $pink-300, number: "-300"), +// "pink-400": (name: "pink", color: $pink-400, number: "-400"), +// "pink-500": (name: "pink", color: $pink-500, number: "-500"), +// "pink-600": (name: "pink", color: $pink-600, number: "-600"), +// "pink-700": (name: "pink", color: $pink-700, number: "-700"), +// "pink-800": (name: "pink", color: $pink-800, number: "-800"), +// "pink-900": (name: "pink", color: $pink-900, number: "-900"), +// "pink-a100": (name: "pink", color: $pink-a100, number: "-a100"), +// "pink-a200": (name: "pink", color: $pink-a200, number: "-a200"), +// "pink-a400": (name: "pink", color: $pink-a400, number: "-a400"), +// "pink-a700": (name: "pink", color: $pink-a700, number: "-a700"), +// "pink": (name: "pink", color: $pink, number: ""), +// "purple-50": (name: "purple", color: $purple-50, number: "-50"), +// "purple-100": (name: "purple", color: $purple-100, number: "-100"), +// "purple-200": (name: "purple", color: $purple-200, number: "-200"), +// "purple-300": (name: "purple", color: $purple-300, number: "-300"), +// "purple-400": (name: "purple", color: $purple-400, number: "-400"), +// "purple-500": (name: "purple", color: $purple-500, number: "-500"), +// "purple-600": (name: "purple", color: $purple-600, number: "-600"), +// "purple-700": (name: "purple", color: $purple-700, number: "-700"), +// "purple-800": (name: "purple", color: $purple-800, number: "-800"), +// "purple-900": (name: "purple", color: $purple-900, number: "-900"), +// "purple-a100": (name: "purple", color: $purple-a100, number: "-a100"), +// "purple-a200": (name: "purple", color: $purple-a200, number: "-a200"), +// "purple-a400": (name: "purple", color: $purple-a400, number: "-a400"), +// "purple-a700": (name: "purple", color: $purple-a700, number: "-a700"), +// "purple": (name: "purple", color: $purple, number: ""), +// "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"), +// "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"), +// "deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"), +// "deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"), +// "deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"), +// "deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"), +// "deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"), +// "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"), +// "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"), +// "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"), +// "deep-purple-a100": (name: "deep-purple", color: $deep-purple-a100, number: "-a100"), +// "deep-purple-a200": (name: "deep-purple", color: $deep-purple-a200, number: "-a200"), +// "deep-purple-a400": (name: "deep-purple", color: $deep-purple-a400, number: "-a400"), +// "deep-purple-a700": (name: "deep-purple", color: $deep-purple-a700, number: "-a700"), +// "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""), +// "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"), +// "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"), +// "indigo-200": (name: "indigo", color: $indigo-200, number: "-200"), +// "indigo-300": (name: "indigo", color: $indigo-300, number: "-300"), +// "indigo-400": (name: "indigo", color: $indigo-400, number: "-400"), +// "indigo-500": (name: "indigo", color: $indigo-500, number: "-500"), +// "indigo-600": (name: "indigo", color: $indigo-600, number: "-600"), +// "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"), +// "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"), +// "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"), +// "indigo-a100": (name: "indigo", color: $indigo-a100, number: "-a100"), +// "indigo-a200": (name: "indigo", color: $indigo-a200, number: "-a200"), +// "indigo-a400": (name: "indigo", color: $indigo-a400, number: "-a400"), +// "indigo-a700": (name: "indigo", color: $indigo-a700, number: "-a700"), +// "indigo": (name: "indigo", color: $indigo, number: ""), +// "blue-50": (name: "blue", color: $blue-50, number: "-50"), +// "blue-100": (name: "blue", color: $blue-100, number: "-100"), +// "blue-200": (name: "blue", color: $blue-200, number: "-200"), +// "blue-300": (name: "blue", color: $blue-300, number: "-300"), +// "blue-400": (name: "blue", color: $blue-400, number: "-400"), +// "blue-500": (name: "blue", color: $blue-500, number: "-500"), +// "blue-600": (name: "blue", color: $blue-600, number: "-600"), +// "blue-700": (name: "blue", color: $blue-700, number: "-700"), +// "blue-800": (name: "blue", color: $blue-800, number: "-800"), +// "blue-900": (name: "blue", color: $blue-900, number: "-900"), +// "blue-a100": (name: "blue", color: $blue-a100, number: "-a100"), +// "blue-a200": (name: "blue", color: $blue-a200, number: "-a200"), +// "blue-a400": (name: "blue", color: $blue-a400, number: "-a400"), +// "blue-a700": (name: "blue", color: $blue-a700, number: "-a700"), +// "blue": (name: "blue", color: $blue, number: ""), +// "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"), +// "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"), +// "light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"), +// "light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"), +// "light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"), +// "light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"), +// "light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"), +// "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"), +// "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"), +// "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"), +// "light-blue-a100": (name: "light-blue", color: $light-blue-a100, number: "-a100"), +// "light-blue-a200": (name: "light-blue", color: $light-blue-a200, number: "-a200"), +// "light-blue-a400": (name: "light-blue", color: $light-blue-a400, number: "-a400"), +// "light-blue-a700": (name: "light-blue", color: $light-blue-a700, number: "-a700"), +// "light-blue": (name: "light-blue", color: $light-blue, number: ""), +// "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"), +// "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"), +// "cyan-200": (name: "cyan", color: $cyan-200, number: "-200"), +// "cyan-300": (name: "cyan", color: $cyan-300, number: "-300"), +// "cyan-400": (name: "cyan", color: $cyan-400, number: "-400"), +// "cyan-500": (name: "cyan", color: $cyan-500, number: "-500"), +// "cyan-600": (name: "cyan", color: $cyan-600, number: "-600"), +// "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"), +// "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"), +// "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"), +// "cyan-a100": (name: "cyan", color: $cyan-a100, number: "-a100"), +// "cyan-a200": (name: "cyan", color: $cyan-a200, number: "-a200"), +// "cyan-a400": (name: "cyan", color: $cyan-a400, number: "-a400"), +// "cyan-a700": (name: "cyan", color: $cyan-a700, number: "-a700"), +// "cyan": (name: "cyan", color: $cyan, number: ""), +// "teal-50": (name: "teal", color: $teal-50, number: "-50"), +// "teal-100": (name: "teal", color: $teal-100, number: "-100"), +// "teal-200": (name: "teal", color: $teal-200, number: "-200"), +// "teal-300": (name: "teal", color: $teal-300, number: "-300"), +// "teal-400": (name: "teal", color: $teal-400, number: "-400"), +// "teal-500": (name: "teal", color: $teal-500, number: "-500"), +// "teal-600": (name: "teal", color: $teal-600, number: "-600"), +// "teal-700": (name: "teal", color: $teal-700, number: "-700"), +// "teal-800": (name: "teal", color: $teal-800, number: "-800"), +// "teal-900": (name: "teal", color: $teal-900, number: "-900"), +// "teal-a100": (name: "teal", color: $teal-a100, number: "-a100"), +// "teal-a200": (name: "teal", color: $teal-a200, number: "-a200"), +// "teal-a400": (name: "teal", color: $teal-a400, number: "-a400"), +// "teal-a700": (name: "teal", color: $teal-a700, number: "-a700"), +// "teal": (name: "teal", color: $teal, number: ""), +// "green-50": (name: "green", color: $green-50, number: "-50"), +// "green-100": (name: "green", color: $green-100, number: "-100"), +// "green-200": (name: "green", color: $green-200, number: "-200"), +// "green-300": (name: "green", color: $green-300, number: "-300"), +// "green-400": (name: "green", color: $green-400, number: "-400"), +// "green-500": (name: "green", color: $green-500, number: "-500"), +// "green-600": (name: "green", color: $green-600, number: "-600"), +// "green-700": (name: "green", color: $green-700, number: "-700"), +// "green-800": (name: "green", color: $green-800, number: "-800"), +// "green-900": (name: "green", color: $green-900, number: "-900"), +// "green-a100": (name: "green", color: $green-a100, number: "-a100"), +// "green-a200": (name: "green", color: $green-a200, number: "-a200"), +// "green-a400": (name: "green", color: $green-a400, number: "-a400"), +// "green-a700": (name: "green", color: $green-a700, number: "-a700"), +// "green": (name: "green", color: $green, number: ""), +// "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"), +// "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"), +// "light-green-200": (name: "light-green", color: $light-green-200, number: "-200"), +// "light-green-300": (name: "light-green", color: $light-green-300, number: "-300"), +// "light-green-400": (name: "light-green", color: $light-green-400, number: "-400"), +// "light-green-500": (name: "light-green", color: $light-green-500, number: "-500"), +// "light-green-600": (name: "light-green", color: $light-green-600, number: "-600"), +// "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"), +// "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"), +// "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"), +// "light-green-a100": (name: "light-green", color: $light-green-a100, number: "-a100"), +// "light-green-a200": (name: "light-green", color: $light-green-a200, number: "-a200"), +// "light-green-a400": (name: "light-green", color: $light-green-a400, number: "-a400"), +// "light-green-a700": (name: "light-green", color: $light-green-a700, number: "-a700"), +// "light-green": (name: "light-green", color: $light-green, number: ""), +// "lime-50": (name: "lime", color: $lime-50, number: "-50"), +// "lime-100": (name: "lime", color: $lime-100, number: "-100"), +// "lime-200": (name: "lime", color: $lime-200, number: "-200"), +// "lime-300": (name: "lime", color: $lime-300, number: "-300"), +// "lime-400": (name: "lime", color: $lime-400, number: "-400"), +// "lime-500": (name: "lime", color: $lime-500, number: "-500"), +// "lime-600": (name: "lime", color: $lime-600, number: "-600"), +// "lime-700": (name: "lime", color: $lime-700, number: "-700"), +// "lime-800": (name: "lime", color: $lime-800, number: "-800"), +// "lime-900": (name: "lime", color: $lime-900, number: "-900"), +// "lime-a100": (name: "lime", color: $lime-a100, number: "-a100"), +// "lime-a200": (name: "lime", color: $lime-a200, number: "-a200"), +// "lime-a400": (name: "lime", color: $lime-a400, number: "-a400"), +// "lime-a700": (name: "lime", color: $lime-a700, number: "-a700"), +// "lime": (name: "lime", color: $lime, number: ""), +// "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"), +// "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"), +// "yellow-200": (name: "yellow", color: $yellow-200, number: "-200"), +// "yellow-300": (name: "yellow", color: $yellow-300, number: "-300"), +// "yellow-400": (name: "yellow", color: $yellow-400, number: "-400"), +// "yellow-500": (name: "yellow", color: $yellow-500, number: "-500"), +// "yellow-600": (name: "yellow", color: $yellow-600, number: "-600"), +// "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"), +// "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"), +// "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"), +// "yellow-a100": (name: "yellow", color: $yellow-a100, number: "-a100"), +// "yellow-a200": (name: "yellow", color: $yellow-a200, number: "-a200"), +// "yellow-a400": (name: "yellow", color: $yellow-a400, number: "-a400"), +// "yellow-a700": (name: "yellow", color: $yellow-a700, number: "-a700"), +// "yellow": (name: "yellow", color: $yellow, number: ""), +// "amber-50": (name: "amber", color: $amber-50, number: "-50"), +// "amber-100": (name: "amber", color: $amber-100, number: "-100"), +// "amber-200": (name: "amber", color: $amber-200, number: "-200"), +// "amber-300": (name: "amber", color: $amber-300, number: "-300"), +// "amber-400": (name: "amber", color: $amber-400, number: "-400"), +// "amber-500": (name: "amber", color: $amber-500, number: "-500"), +// "amber-600": (name: "amber", color: $amber-600, number: "-600"), +// "amber-700": (name: "amber", color: $amber-700, number: "-700"), +// "amber-800": (name: "amber", color: $amber-800, number: "-800"), +// "amber-900": (name: "amber", color: $amber-900, number: "-900"), +// "amber-a100": (name: "amber", color: $amber-a100, number: "-a100"), +// "amber-a200": (name: "amber", color: $amber-a200, number: "-a200"), +// "amber-a400": (name: "amber", color: $amber-a400, number: "-a400"), +// "amber-a700": (name: "amber", color: $amber-a700, number: "-a700"), +// "amber": (name: "amber", color: $amber, number: ""), +// "orange-50": (name: "orange", color: $orange-50, number: "-50"), +// "orange-100": (name: "orange", color: $orange-100, number: "-100"), +// "orange-200": (name: "orange", color: $orange-200, number: "-200"), +// "orange-300": (name: "orange", color: $orange-300, number: "-300"), +// "orange-400": (name: "orange", color: $orange-400, number: "-400"), +// "orange-500": (name: "orange", color: $orange-500, number: "-500"), +// "orange-600": (name: "orange", color: $orange-600, number: "-600"), +// "orange-700": (name: "orange", color: $orange-700, number: "-700"), +// "orange-800": (name: "orange", color: $orange-800, number: "-800"), +// "orange-900": (name: "orange", color: $orange-900, number: "-900"), +// "orange-a100": (name: "orange", color: $orange-a100, number: "-a100"), +// "orange-a200": (name: "orange", color: $orange-a200, number: "-a200"), +// "orange-a400": (name: "orange", color: $orange-a400, number: "-a400"), +// "orange-a700": (name: "orange", color: $orange-a700, number: "-a700"), +// "orange": (name: "orange", color: $orange, number: ""), +// "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"), +// "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"), +// "deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"), +// "deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"), +// "deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"), +// "deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"), +// "deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"), +// "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"), +// "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"), +// "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"), +// "deep-orange-a100": (name: "deep-orange", color: $deep-orange-a100, number: "-a100"), +// "deep-orange-a200": (name: "deep-orange", color: $deep-orange-a200, number: "-a200"), +// "deep-orange-a400": (name: "deep-orange", color: $deep-orange-a400, number: "-a400"), +// "deep-orange-a700": (name: "deep-orange", color: $deep-orange-a700, number: "-a700"), +// "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""), +// "brown-50": (name: "brown", color: $brown-50, number: "-50"), +// "brown-100": (name: "brown", color: $brown-100, number: "-100"), +// "brown-200": (name: "brown", color: $brown-200, number: "-200"), +// "brown-300": (name: "brown", color: $brown-300, number: "-300"), +// "brown-400": (name: "brown", color: $brown-400, number: "-400"), +// "brown-500": (name: "brown", color: $brown-500, number: "-500"), +// "brown-600": (name: "brown", color: $brown-600, number: "-600"), +// "brown-700": (name: "brown", color: $brown-700, number: "-700"), +// "brown-800": (name: "brown", color: $brown-800, number: "-800"), +// "brown-900": (name: "brown", color: $brown-900, number: "-900"), +// "brown-a100": (name: "brown", color: $brown-a100, number: "-a100"), +// "brown-a200": (name: "brown", color: $brown-a200, number: "-a200"), +// "brown-a400": (name: "brown", color: $brown-a400, number: "-a400"), +// "brown-a700": (name: "brown", color: $brown-a700, number: "-a700"), +// "brown": (name: "brown", color: $brown, number: ""), +// "grey-50": (name: "grey", color: $grey-50, number: "-50"), +// "grey-100": (name: "grey", color: $grey-100, number: "-100"), +// "grey-200": (name: "grey", color: $grey-200, number: "-200"), +// "grey-300": (name: "grey", color: $grey-300, number: "-300"), +// "grey-400": (name: "grey", color: $grey-400, number: "-400"), +// "grey-500": (name: "grey", color: $grey-500, number: "-500"), +// "grey-600": (name: "grey", color: $grey-600, number: "-600"), +// "grey-700": (name: "grey", color: $grey-700, number: "-700"), +// "grey-800": (name: "grey", color: $grey-800, number: "-800"), +// "grey-900": (name: "grey", color: $grey-900, number: "-900"), +// "grey-a100": (name: "grey", color: $grey-a100, number: "-a100"), +// "grey-a200": (name: "grey", color: $grey-a200, number: "-a200"), +// "grey-a400": (name: "grey", color: $grey-a400, number: "-a400"), +// "grey-a700": (name: "grey", color: $grey-a700, number: "-a700"), +// "grey": (name: "grey", color: $grey, number: ""), +// "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"), +// "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"), +// "blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"), +// "blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"), +// "blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"), +// "blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"), +// "blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"), +// "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"), +// "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"), +// "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"), +// "blue-grey-a100": (name: "blue-grey", color: $blue-grey-a100, number: "-a100"), +// "blue-grey-a200": (name: "blue-grey", color: $blue-grey-a200, number: "-a200"), +// "blue-grey-a400": (name: "blue-grey", color: $blue-grey-a400, number: "-a400"), +// "blue-grey-a700": (name: "blue-grey", color: $blue-grey-a700, number: "-a700"), +// "blue-grey": (name: "blue-grey", color: $blue-grey, number: "") +//); diff --git a/src/assets/scss/core/variables/_colors.scss b/src/assets/scss/core/variables/_colors.scss new file mode 100644 index 0000000..864306d --- /dev/null +++ b/src/assets/scss/core/variables/_colors.scss @@ -0,0 +1,315 @@ +$red-50: #ffebee !default; +$red-100: #ffcdd2 !default; +$red-200: #ef9a9a !default; +$red-300: #e57373 !default; +$red-400: #ef5350 !default; +$red-500: #f44336 !default; +$red-600: #e53935 !default; +$red-700: #d32f2f !default; +$red-800: #c62828 !default; +$red-900: #b71c1c !default; +$red-a100: #ff8a80 !default; +$red-a200: #ff5252 !default; +$red-a400: #ff1744 !default; +$red-a700: #d50000 !default; +$red: $red-500 !default; + +$pink-50: #fce4ec !default; +$pink-100: #f8bbd0 !default; +$pink-200: #f48fb1 !default; +$pink-300: #f06292 !default; +$pink-400: #ec407a !default; +$pink-500: #e91e63 !default; +$pink-600: #d81b60 !default; +$pink-700: #c2185b !default; +$pink-800: #ad1457 !default; +$pink-900: #880e4f !default; +$pink-a100: #ff80ab !default; +$pink-a200: #ff4081 !default; +$pink-a400: #f50057 !default; +$pink-a700: #c51162 !default; +$pink: $pink-500 !default; + +$purple-50: #f3e5f5 !default; +$purple-100: #e1bee7 !default; +$purple-200: #ce93d8 !default; +$purple-300: #ba68c8 !default; +$purple-400: #ab47bc !default; +$purple-500: #9c27b0 !default; +$purple-600: #8e24aa !default; +$purple-700: #7b1fa2 !default; +$purple-800: #6a1b9a !default; +$purple-900: #4a148c !default; +$purple-a100: #ea80fc !default; +$purple-a200: #e040fb !default; +$purple-a400: #d500f9 !default; +$purple-a700: #a0f !default; +$purple: $purple-500 !default; + +$deep-purple-50: #ede7f6 !default; +$deep-purple-100: #d1c4e9 !default; +$deep-purple-200: #b39ddb !default; +$deep-purple-300: #9575cd !default; +$deep-purple-400: #7e57c2 !default; +$deep-purple-500: #673ab7 !default; +$deep-purple-600: #5e35b1 !default; +$deep-purple-700: #512da8 !default; +$deep-purple-800: #4527a0 !default; +$deep-purple-900: #311b92 !default; +$deep-purple-a100: #b388ff !default; +$deep-purple-a200: #7c4dff !default; +$deep-purple-a400: #651fff !default; +$deep-purple-a700: #6200ea !default; +$deep-purple: $deep-purple-500 !default; + +$indigo-50: #e8eaf6 !default; +$indigo-100: #c5cae9 !default; +$indigo-200: #9fa8da !default; +$indigo-300: #7986cb !default; +$indigo-400: #5c6bc0 !default; +$indigo-500: #3f51b5 !default; +$indigo-600: #3949ab !default; +$indigo-700: #303f9f !default; +$indigo-800: #283593 !default; +$indigo-900: #1a237e !default; +$indigo-a100: #8c9eff !default; +$indigo-a200: #536dfe !default; +$indigo-a400: #3d5afe !default; +$indigo-a700: #304ffe !default; +$indigo: $indigo-500 !default; + +$blue-50: #e3f2fd !default; +$blue-100: #bbdefb !default; +$blue-200: #90caf9 !default; +$blue-300: #64b5f6 !default; +$blue-400: #42a5f5 !default; +$blue-500: #2196f3 !default; +$blue-600: #1e88e5 !default; +$blue-700: #1976d2 !default; +$blue-800: #1565c0 !default; +$blue-900: #0d47a1 !default; +$blue-a100: #82b1ff !default; +$blue-a200: #448aff !default; +$blue-a400: #2979ff !default; +$blue-a700: #2962ff !default; +$blue: $blue-500 !default; + +$light-blue-50: #e1f5fe !default; +$light-blue-100: #b3e5fc !default; +$light-blue-200: #81d4fa !default; +$light-blue-300: #4fc3f7 !default; +$light-blue-400: #29b6f6 !default; +$light-blue-500: #03a9f4 !default; +$light-blue-600: #039be5 !default; +$light-blue-700: #0288d1 !default; +$light-blue-800: #0277bd !default; +$light-blue-900: #01579b !default; +$light-blue-a100: #80d8ff !default; +$light-blue-a200: #40c4ff !default; +$light-blue-a400: #00b0ff !default; +$light-blue-a700: #0091ea !default; +$light-blue: $light-blue-500 !default; + +$cyan-50: #e0f7fa !default; +$cyan-100: #b2ebf2 !default; +$cyan-200: #80deea !default; +$cyan-300: #4dd0e1 !default; +$cyan-400: #26c6da !default; +$cyan-500: #00bcd4 !default; +$cyan-600: #00acc1 !default; +$cyan-700: #0097a7 !default; +$cyan-800: #00838f !default; +$cyan-900: #006064 !default; +$cyan-a100: #84ffff !default; +$cyan-a200: #18ffff !default; +$cyan-a400: #00e5ff !default; +$cyan-a700: #00b8d4 !default; +$cyan: $cyan-500 !default; + +$teal-50: #e0f2f1 !default; +$teal-100: #b2dfdb !default; +$teal-200: #80cbc4 !default; +$teal-300: #4db6ac !default; +$teal-400: #26a69a !default; +$teal-500: #009688 !default; +$teal-600: #00897b !default; +$teal-700: #00796b !default; +$teal-800: #00695c !default; +$teal-900: #004d40 !default; +$teal-a100: #a7ffeb !default; +$teal-a200: #64ffda !default; +$teal-a400: #1de9b6 !default; +$teal-a700: #00bfa5 !default; +$teal: $teal-500 !default; + +$green-50: #e8f5e9 !default; +$green-100: #c8e6c9 !default; +$green-200: #a5d6a7 !default; +$green-300: #81c784 !default; +$green-400: #66bb6a !default; +$green-500: #4caf50 !default; +$green-600: #43a047 !default; +$green-700: #388e3c !default; +$green-800: #2e7d32 !default; +$green-900: #1b5e20 !default; +$green-a100: #b9f6ca !default; +$green-a200: #69f0ae !default; +$green-a400: #00e676 !default; +$green-a700: #00c853 !default; +$green: $green-500 !default; + +$light-green-50: #f1f8e9 !default; +$light-green-100: #dcedc8 !default; +$light-green-200: #c5e1a5 !default; +$light-green-300: #aed581 !default; +$light-green-400: #9ccc65 !default; +$light-green-500: #8bc34a !default; +$light-green-600: #7cb342 !default; +$light-green-700: #689f38 !default; +$light-green-800: #558b2f !default; +$light-green-900: #33691e !default; +$light-green-a100: #ccff90 !default; +$light-green-a200: #b2ff59 !default; +$light-green-a400: #76ff03 !default; +$light-green-a700: #64dd17 !default; +$light-green: $light-green-500 !default; + +$lime-50: #f9fbe7 !default; +$lime-100: #f0f4c3 !default; +$lime-200: #e6ee9c !default; +$lime-300: #dce775 !default; +$lime-400: #d4e157 !default; +$lime-500: #cddc39 !default; +$lime-600: #c0ca33 !default; +$lime-700: #afb42b !default; +$lime-800: #9e9d24 !default; +$lime-900: #827717 !default; +$lime-a100: #f4ff81 !default; +$lime-a200: #eeff41 !default; +$lime-a400: #c6ff00 !default; +$lime-a700: #aeea00 !default; +$lime: $lime-500 !default; + +$yellow-50: #fffde7 !default; +$yellow-100: #fff9c4 !default; +$yellow-200: #fff59d !default; +$yellow-300: #fff176 !default; +$yellow-400: #ffee58 !default; +$yellow-500: #ffeb3b !default; +$yellow-600: #fdd835 !default; +$yellow-700: #fbc02d !default; +$yellow-800: #f9a825 !default; +$yellow-900: #f57f17 !default; +$yellow-a100: #ffff8d !default; +$yellow-a200: #ff0 !default; +$yellow-a400: #ffea00 !default; +$yellow-a700: #ffd600 !default; +$yellow: $yellow-500 !default; + +$amber-50: #fff8e1 !default; +$amber-100: #ffecb3 !default; +$amber-200: #ffe082 !default; +$amber-300: #ffd54f !default; +$amber-400: #ffca28 !default; +$amber-500: #ffc107 !default; +$amber-600: #ffb300 !default; +$amber-700: #ffa000 !default; +$amber-800: #ff8f00 !default; +$amber-900: #ff6f00 !default; +$amber-a100: #ffe57f !default; +$amber-a200: #ffd740 !default; +$amber-a400: #ffc400 !default; +$amber-a700: #ffab00 !default; +$amber: $amber-500 !default; + +$orange-50: #fff3e0 !default; +$orange-100: #ffe0b2 !default; +$orange-200: #ffcc80 !default; +$orange-300: #ffb74d !default; +$orange-400: #ffa726 !default; +$orange-500: #ff9800 !default; +$orange-600: #fb8c00 !default; +$orange-700: #f57c00 !default; +$orange-800: #ef6c00 !default; +$orange-900: #e65100 !default; +$orange-a100: #ffd180 !default; +$orange-a200: #ffab40 !default; +$orange-a400: #ff9100 !default; +$orange-a700: #ff6d00 !default; +$orange: $orange-500 !default; + +$deep-orange-50: #fbe9e7 !default; +$deep-orange-100: #ffccbc !default; +$deep-orange-200: #ffab91 !default; +$deep-orange-300: #ff8a65 !default; +$deep-orange-400: #ff7043 !default; +$deep-orange-500: #ff5722 !default; +$deep-orange-600: #f4511e !default; +$deep-orange-700: #e64a19 !default; +$deep-orange-800: #d84315 !default; +$deep-orange-900: #bf360c !default; +$deep-orange-a100: #ff9e80 !default; +$deep-orange-a200: #ff6e40 !default; +$deep-orange-a400: #ff3d00 !default; +$deep-orange-a700: #dd2c00 !default; +$deep-orange: $deep-orange-500 !default; + +$brown-50: #efebe9 !default; +$brown-100: #d7ccc8 !default; +$brown-200: #bcaaa4 !default; +$brown-300: #a1887f !default; +$brown-400: #8d6e63 !default; +$brown-500: #795548 !default; +$brown-600: #6d4c41 !default; +$brown-700: #5d4037 !default; +$brown-800: #4e342e !default; +$brown-900: #3e2723 !default; +$brown-a100: #d7ccc8 !default; +$brown-a200: #bcaaa4 !default; +$brown-a400: #8d6e63 !default; +$brown-a700: #5d4037 !default; +$brown: $brown-500 !default; + +$grey-50: #fafafa !default; +$grey-100: #f5f5f5 !default; +$grey-200: #eee !default; +$grey-300: #e0e0e0 !default; +$grey-400: #bdbdbd !default; +$grey-500: #9e9e9e; +$grey-600: #757575 !default; +$grey-700: #616161 !default; +$grey-800: #424242 !default; +$grey-900: #212121 !default; +$grey-a100: #f5f5f5 !default; +$grey-a200: #eee !default; +$grey-a400: #bdbdbd !default; +$grey-a700: #616161 !default; +$grey: $grey-500 !default; + +$blue-grey-50: #eceff1 !default; +$blue-grey-100: #cfd8dc !default; +$blue-grey-200: #b0bec5 !default; +$blue-grey-300: #90a4ae !default; +$blue-grey-400: #78909c !default; +$blue-grey-500: #607d8b !default; +$blue-grey-600: #546e7a !default; +$blue-grey-700: #455a64 !default; +$blue-grey-800: #37474f !default; +$blue-grey-900: #263238 !default; +$blue-grey-a100: #cfd8dc !default; +$blue-grey-a200: #b0bec5 !default; +$blue-grey-a400: #78909c !default; +$blue-grey-a700: #455a64 !default; +$blue-grey: $blue-grey-500 !default; + +$black: #000; +$white: #fff; + +// New colors +$gray-color: #999999 !default; +$black-color: #3c4858 !default; + +$black: #000000; +$rgb-black: "0,0,0" !default; +$white: #ffffff; +$rgb-white: "255,255,255" !default; diff --git a/src/assets/scss/core/variables/_functions.scss b/src/assets/scss/core/variables/_functions.scss new file mode 100644 index 0000000..13b723f --- /dev/null +++ b/src/assets/scss/core/variables/_functions.scss @@ -0,0 +1,91 @@ +// Bootstrap functions +// +// Utility mixins and functions for evalutating source code across our variables, maps, and mixins. + +// Ascending +// Used to evaluate Sass maps like our grid breakpoints. +@mixin _assert-ascending($map, $map-name) { + $prev-key: null; + $prev-num: null; + @each $key, $num in $map { + @if $prev-num == null { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $prev-num >= $num { + @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } + $prev-key: $key; + $prev-num: $num; + } +} + +// Starts at zero +// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0. +@mixin _assert-starts-at-zero($map) { + $values: map-values($map); + $first-value: nth($values, 1); + @if $first-value != 0 { + @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; + } +} + +// Replace `$search` with `$replace` in `$string` +// Used on our SVG icon backgrounds for custom forms. +// +// @author Hugo Giraudel +// @param {String} $string - Initial string +// @param {String} $search - Substring to replace +// @param {String} $replace ('') - New value +// @return {String} - Updated string +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); + } + + @return $string; +} + +// Color contrast +@function color-yiq($color) { + $r: red($color); + $g: green($color); + $b: blue($color); + + $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; + + @if ($yiq >= $yiq-contrasted-threshold) { + @return $yiq-text-dark; + } @else { + @return $yiq-text-light; + } +} + +// Retrieve color Sass maps +@function color($key: "blue") { + @return map-get($colors, $key); +} + +@function theme-color($key: "primary") { + @return map-get($theme-colors, $key); +} + +@function gray($key: "100") { + @return map-get($grays, $key); +} + +// Request a theme color level +@function theme-color-level($color-name: "primary", $level: 0) { + $color: theme-color($color-name); + $color-base: if($level > 0, #000, #fff); + $level: abs($level); + + @return mix($color-base, $color, $level * $theme-color-interval); +} diff --git a/src/assets/scss/core/variables/_shadow.scss b/src/assets/scss/core/variables/_shadow.scss new file mode 100644 index 0000000..ce5e436 --- /dev/null +++ b/src/assets/scss/core/variables/_shadow.scss @@ -0,0 +1,35 @@ +// Shadows (originally from mdl http://www.getmdl.io/) +$bmd-shadow-umbra-opacity: 0.2 !default; +$bmd-shadow-penumbra-opacity: 0.14 !default; +$bmd-shadow-ambient-opacity: 0.12 !default; + +// Declare the following for reuse with both mixins and the bootstrap variables +$bmd-shadow-focus: 0 0 8px rgba($black, 0.18), 0 8px 16px rgba($black, 0.36); + +$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity), + 0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity); + +$bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity), + 0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity); + +$bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity), + 0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity), + 0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity), + 0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity); diff --git a/src/assets/scss/core/variables/_variables.scss b/src/assets/scss/core/variables/_variables.scss new file mode 100644 index 0000000..768fd6b --- /dev/null +++ b/src/assets/scss/core/variables/_variables.scss @@ -0,0 +1,945 @@ +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + +// +// Color system +// + +// stylelint-disable +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; + +$grays: () !default; +$grays: map-merge( + ( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 + ), + $grays +); + +$blue: #007bff !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #ffc107 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; + +$colors: () !default; +$colors: map-merge( + ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 + ), + $colors +); + +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; + +$theme-colors: () !default; +$theme-colors: map-merge( + ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark + ), + $theme-colors +); +// stylelint-enable + +// Set a specific jump point for requesting color jumps +$theme-color-interval: 8% !default; + +// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. +$yiq-contrasted-threshold: 150 !default; + +// Customize the light and dark text colors for use in our YIQ color contrast function. +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-print-styles: true !default; + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +// stylelint-disable +$spacer: 1rem !default; +$spacers: () !default; +$spacers: map-merge( + ( + 0: 0, + 1: ( + $spacer * 0.25 + ), + 2: ( + $spacer * 0.5 + ), + 3: $spacer, + 4: ( + $spacer * 1.5 + ), + 5: ( + $spacer * 3 + ) + ), + $spacers +); + +// This variable affects the `.h-*` and `.w-*` classes. +$sizes: () !default; +$sizes: map-merge( + ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100% + ), + $sizes +); +// stylelint-enable + +// Body +// +// Settings for the `` element. + +$body-bg: $white !default; +$body-color: $gray-900 !default; + +// Links +// +// Style anchor elements. + +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem !default; + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + +@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include _assert-starts-at-zero($grid-breakpoints); + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px +) !default; + +@include _assert-ascending($container-max-widths, "$container-max-widths"); + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; + +// Components +// +// Define common padding and border radius sizes and more. + +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; + +$border-width: 1px !default; +$border-color: $gray-300 !default; + +$border-radius: 0.25rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; + +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; + +$caret-width: 0.3em !default; + +$transition-base: all 0.2s ease-in-out !default; +$transition-fade: opacity 0.15s linear !default; +$transition-collapse: height 0.35s ease !default; + +// Fonts +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol" !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; +// stylelint-enable value-keyword-case + +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-lg: ($font-size-base * 1.25) !default; +$font-size-sm: ($font-size-base * 0.875) !default; + +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; + +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; + +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; + +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: inherit !default; + +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; + +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; + +$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-weight: 300 !default; + +$small-font-size: 80% !default; + +$text-muted: $gray-600 !default; + +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; + +$hr-border-color: rgba($black, 0.1) !default; +$hr-border-width: $border-width !default; + +$mark-padding: 0.2em !default; + +$dt-font-weight: $font-weight-bold !default; + +$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; + +$list-inline-padding: 0.5rem !default; + +$mark-bg: #fcf8e3 !default; + +$hr-margin-y: $spacer !default; + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-cell-padding: 0.75rem !default; +$table-cell-padding-sm: 0.3rem !default; + +$table-bg: transparent !default; +$table-accent-bg: rgba($black, 0.05) !default; +$table-hover-bg: rgba($black, 0.075) !default; +$table-active-bg: $table-hover-bg !default; + +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; + +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; + +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, 0.05) !default; +$table-dark-hover-bg: rgba($white, 0.075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y: 0.375rem !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-line-height: $line-height-base !default; + +$input-btn-focus-width: 0.2rem !default; +$input-btn-focus-color: rgba($component-active-bg, 0.25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; + +$input-btn-padding-y-lg: 0.5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; + +$input-btn-border-width: $border-width !default; + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; + +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; + +$btn-border-width: $input-btn-border-width !default; + +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: 0.65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; + +$btn-link-disabled-color: $gray-600 !default; + +$btn-block-spacing-y: 0.5rem !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; + +$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; + +// Forms + +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; + +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; + +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default; + +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; + +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$input-placeholder-color: $gray-600 !default; + +$input-height-border: $input-border-width * 2 !default; + +$input-height-inner: ($font-size-base * $input-btn-line-height) + + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; + +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc( + #{$input-height-inner-sm} + #{$input-height-border} +) !default; + +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc( + #{$input-height-inner-lg} + #{$input-height-border} +) !default; + +$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; + +$form-text-margin-top: 0.25rem !default; + +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: 0.3rem !default; +$form-check-input-margin-x: 0.25rem !default; + +$form-check-inline-margin-x: 0.75rem !default; +$form-check-inline-input-margin-x: 0.3125rem !default; + +$form-group-margin-bottom: 1rem !default; + +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; + +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; + +$custom-control-indicator-size: 1rem !default; +$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; + +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-disabled-bg: rgba( + theme-color("primary"), + 0.5 +) !default; +$custom-control-indicator-checked-box-shadow: none !default; + +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; + +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten( + $component-active-bg, + 35% +) !default; +$custom-control-indicator-active-box-shadow: none !default; + +$custom-checkbox-indicator-border-radius: $border-radius !default; +$custom-checkbox-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; + +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; + +$custom-radio-indicator-border-radius: 50% !default; +$custom-radio-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; + +$custom-select-padding-y: 0.375rem !default; +$custom-select-padding-x: 0.75rem !default; +$custom-select-height: $input-height !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-line-height: $input-btn-line-height !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-600 !default; +$custom-select-bg: $white !default; +$custom-select-disabled-bg: $gray-200 !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator-color: $gray-800 !default; +$custom-select-indicator: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, 0.075), + 0 0 5px rgba($custom-select-focus-border-color, 0.5) !default; + +$custom-select-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; + +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + +$custom-file-height: $input-height !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-color: $input-border-color !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: $input-group-addon-bg !default; +$custom-file-text: ( + en: "Browse" +) !default; + +// Form validation +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $small-font-size !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: 0.5rem !default; +$dropdown-spacer: 0.125rem !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, 0.15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default; + +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; + +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; + +$dropdown-link-disabled-color: $gray-600 !default; + +$dropdown-item-padding-y: 0.25rem !default; +$dropdown-item-padding-x: 1.5rem !default; + +$dropdown-header-color: $gray-600 !default; + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. + +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; + +// Navs + +$nav-link-padding-y: 0.5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-disabled-color: $gray-600 !default; + +$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; + +$nav-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; + +// Navbar + +$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !default; + +$navbar-nav-link-padding-x: 0.5rem !default; + +$navbar-brand-font-size: $font-size-lg !default; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: ( + $font-size-base * $line-height-base + $nav-link-padding-y * 2 +) !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; + +$navbar-toggler-padding-y: 0.25rem !default; +$navbar-toggler-padding-x: 0.75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; + +$navbar-dark-color: rgba($white, 0.5) !default; +$navbar-dark-hover-color: rgba($white, 0.75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, 0.25) !default; +$navbar-dark-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-dark-toggler-border-color: rgba($white, 0.1) !default; + +$navbar-light-color: rgba($black, 0.5) !default; +$navbar-light-hover-color: rgba($black, 0.7) !default; +$navbar-light-active-color: rgba($black, 0.9) !default; +$navbar-light-disabled-color: rgba($black, 0.3) !default; +$navbar-light-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-light-toggler-border-color: rgba($black, 0.1) !default; + +// Pagination + +$pagination-padding-y: 0.5rem !default; +$pagination-padding-x: 0.75rem !default; +$pagination-padding-y-sm: 0.25rem !default; +$pagination-padding-x-sm: 0.5rem !default; +$pagination-padding-y-lg: 0.75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-line-height: 1.25 !default; + +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; + +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; + +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; + +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; + +// Jumbotron + +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-200 !default; + +// Cards + +$card-spacer-y: 0.75rem !default; +$card-spacer-x: 1.25rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black, 0.125) !default; +$card-inner-border-radius: calc( + #{$card-border-radius} - #{$card-border-width} +) !default; +$card-cap-bg: rgba($black, 0.03) !default; +$card-bg: $white !default; + +$card-img-overlay-padding: 1.25rem !default; + +$card-group-margin: ($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; + +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; + +// Tooltips + +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: 0.9 !default; +$tooltip-padding-y: 0.25rem !default; +$tooltip-padding-x: 0.5rem !default; +$tooltip-margin: 0 !default; + +$tooltip-arrow-width: 0.8rem !default; +$tooltip-arrow-height: 0.4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; + +// Popovers + +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: $border-width !default; +$popover-border-color: rgba($black, 0.2) !default; +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default; + +$popover-header-bg: darken($popover-bg, 3%) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.5rem !default; +$popover-header-padding-x: 0.75rem !default; + +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; + +$popover-arrow-width: 1rem !default; +$popover-arrow-height: 0.5rem !default; +$popover-arrow-color: $popover-bg !default; + +$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; + +// Badges + +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: 0.25em !default; +$badge-padding-x: 0.4em !default; +$badge-border-radius: $border-radius !default; + +$badge-pill-padding-x: 0.6em !default; +// Use a higher than normal value to ensure completely rounded edges when +// customizing padding or font-size on labels. +$badge-pill-border-radius: 10rem !default; + +// Modals + +// Padding applied to the modal body +$modal-inner-padding: 1rem !default; + +$modal-dialog-margin: 0.5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; + +$modal-title-line-height: $line-height-base !default; + +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, 0.2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default; +$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default; + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.5 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; + +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; + +$modal-transition: transform 0.3s ease-out !default; + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-padding-y: 0.75rem !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; + +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; + +// Progress bars + +$progress-height: 1rem !default; +$progress-font-size: ($font-size-base * 0.75) !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: theme-color("primary") !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width 0.6s ease !default; + +// List group + +$list-group-bg: $white !default; +$list-group-border-color: rgba($black, 0.125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; + +$list-group-item-padding-y: 0.75rem !default; +$list-group-item-padding-x: 1.25rem !default; + +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; + +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; + +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; + +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg: $gray-200 !default; + +// Image thumbnails + +$thumbnail-padding: 0.25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border-width: $border-width !default; +$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default; + +// Figures + +$figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-600 !default; + +// Breadcrumbs + +$breadcrumb-padding-y: 0.75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: 0.5rem !default; + +$breadcrumb-margin-bottom: 1rem !default; + +$breadcrumb-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: "/" !default; + +// Carousel + +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: 0.5 !default; + +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; + +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; + +$carousel-control-icon-width: 20px !default; + +$carousel-control-prev-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-control-next-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; + +$carousel-transition: transform 0.6s ease !default; + +// Close + +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; + +// Code + +$code-font-size: 87.5% !default; +$code-color: $pink !default; + +$kbd-padding-y: 0.2rem !default; +$kbd-padding-x: 0.4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; + +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; + +// Printing +$print-page-size: a3 !default; +$print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/src/assets/scss/plugins/_plugin-nouislider.scss b/src/assets/scss/plugins/_plugin-nouislider.scss new file mode 100644 index 0000000..b00336c --- /dev/null +++ b/src/assets/scss/plugins/_plugin-nouislider.scss @@ -0,0 +1,352 @@ +/*! nouislider - 14.0.2 - 6/28/2019 */ +/* Functional styling; + * These styles are required for noUiSlider to function. + * You don't need to change these rules to apply your design. + */ +/* + +This file was modified by Creative-Tim + +*/ +.noUi-target, +.noUi-target * { + -webkit-touch-callout: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-user-select: none; + -ms-touch-action: none; + touch-action: none; + -ms-user-select: none; + -moz-user-select: none; + user-select: none; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-target { + position: relative; + direction: ltr; +} +.noUi-base, +.noUi-connects { + width: 100%; + height: 100%; + position: relative; + z-index: 1; +} +/* Wrapper for all connect elements. + */ +.noUi-connects { + overflow: hidden; + z-index: 0; +} +.noUi-connect, +.noUi-origin { + will-change: transform; + position: absolute; + z-index: 1; + top: 0; + left: 0; + -ms-transform-origin: 0 0; + -webkit-transform-origin: 0 0; + -webkit-transform-style: preserve-3d; + transform-origin: 0 0; + transform-style: flat; +} +.noUi-connect { + height: 100%; + width: 100%; +} +.noUi-origin { + height: 10%; + width: 10%; +} +/* Offset direction + */ +html:not([dir="rtl"]) .noUi-horizontal .noUi-origin { + left: auto; + right: 0; +} +/* Give origins 0 height/width so they don't interfere with clicking the + * connect elements. + */ +.noUi-vertical .noUi-origin { + width: 0; +} +.noUi-horizontal .noUi-origin { + height: 0; +} +.noUi-handle { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; +} +.noUi-touch-area { + height: 100%; + width: 100%; +} +.noUi-state-tap .noUi-connect, +.noUi-state-tap .noUi-origin { + -webkit-transition: transform 0.3s; + transition: transform 0.3s; +} +.noUi-state-drag * { + cursor: inherit !important; +} +/* Slider size and handle placement; + */ +.noUi-horizontal { + height: 2px; + margin: 15px 0; +} +.noUi-horizontal .noUi-handle { + box-sizing: border-box; + width: 14px; + height: 14px; + left: -10px; + top: -6px; + cursor: pointer; + border-radius: 100%; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + border: 1px solid #9c27b0; + background: #fff; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2); +} +.noUi-vertical { + width: 18px; +} +.noUi-vertical .noUi-handle { + width: 15px; + height: 15px; + left: 0px; + top: -7px; +} +html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { + right: -4px; + left: auto; +} +/* Styling; + * Giving the connect element a border radius causes issues with using transform: scale + */ +.noUi-target { + background-color: #c8c8c8; + border-radius: 3px; +} +.noUi-connects { + border-radius: 3px; +} +.noUi-connect { + // background: #3FB8AF; +} +/* Handles and cursors; + */ +.noUi-draggable { + cursor: ew-resize; +} +.noUi-vertical .noUi-draggable { + cursor: ns-resize; +} +.noUi-handle { + border-radius: 3px; + background: #FFF; + cursor: default; + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; +} +.noUi-active { + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; +} +/* Disabled state; + */ +[disabled] .noUi-connect { + background: #B8B8B8; +} +[disabled].noUi-target, +[disabled].noUi-handle, +[disabled] .noUi-handle { + cursor: not-allowed; +} +/* Base; + * + */ +.noUi-pips, +.noUi-pips * { + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-pips { + position: absolute; + color: #999; +} +/* Values; + * + */ +.noUi-value { + position: absolute; + white-space: nowrap; + text-align: center; +} +.noUi-value-sub { + color: #ccc; + font-size: 10px; +} +/* Markings; + * + */ +.noUi-marker { + position: absolute; + background: #CCC; +} +.noUi-marker-sub { + background: #AAA; +} +.noUi-marker-large { + background: #AAA; +} +/* Horizontal layout; + * + */ +.noUi-pips-horizontal { + padding: 10px 0; + height: 80px; + top: 100%; + left: 0; + width: 100%; +} +.noUi-value-horizontal { + -webkit-transform: translate(-50%, 50%); + transform: translate(-50%, 50%); +} +.noUi-rtl .noUi-value-horizontal { + -webkit-transform: translate(50%, 50%); + transform: translate(50%, 50%); +} +.noUi-marker-horizontal.noUi-marker { + margin-left: -1px; + width: 2px; + height: 5px; +} +.noUi-marker-horizontal.noUi-marker-sub { + height: 10px; +} +.noUi-marker-horizontal.noUi-marker-large { + height: 15px; +} +/* Vertical layout; + * + */ +.noUi-pips-vertical { + padding: 0 10px; + height: 100%; + top: 0; + left: 100%; +} +.noUi-value-vertical { + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + padding-left: 25px; +} +.noUi-rtl .noUi-value-vertical { + -webkit-transform: translate(0, 50%); + transform: translate(0, 50%); +} +.noUi-marker-vertical.noUi-marker { + width: 5px; + height: 2px; + margin-top: -1px; +} +.noUi-marker-vertical.noUi-marker-sub { + width: 10px; +} +.noUi-marker-vertical.noUi-marker-large { + width: 15px; +} +.noUi-tooltip { + display: block; + position: absolute; + border: 1px solid #D9D9D9; + border-radius: 3px; + background: #fff; + color: #000; + padding: 5px; + text-align: center; + white-space: nowrap; +} +.noUi-horizontal .noUi-tooltip { + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + left: 50%; + bottom: 120%; +} +.noUi-vertical .noUi-tooltip { + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + top: 50%; + right: 120%; +} + +.noUi-target { + & .noUi-handle { + border: 1px solid #333; + } + + &.slider-primary { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-primary; + } + + & .noUi-handle { + border-color: $brand-primary; + } + } + + &.slider-info { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-info; + } + + & .noUi-handle { + border-color: $brand-info; + } + } + &.slider-success { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-success; + } + + & .noUi-handle { + border-color: $brand-success; + } + } + &.slider-warning { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-warning; + } + + & .noUi-handle { + border-color: $brand-warning; + } + } + &.slider-danger { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-danger; + } + + & .noUi-handle { + border-color: $brand-danger; + } + } + &.slider-rose { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-rose; + } + + & .noUi-handle { + border-color: $brand-rose; + } + } +} diff --git a/src/assets/scss/plugins/_plugin-react-datetime.scss b/src/assets/scss/plugins/_plugin-react-datetime.scss new file mode 100644 index 0000000..f4fc821 --- /dev/null +++ b/src/assets/scss/plugins/_plugin-react-datetime.scss @@ -0,0 +1,382 @@ +/*! +* https://github.com/YouCanBookMe/react-datetime +*/ +.rdt { + position: relative; + .rdtPicker { + -webkit-transition: all 150ms linear; + -moz-transition: all 150ms linear; + -o-transition: all 150ms linear; + -ms-transition: all 150ms linear; + transition: all 150ms linear; + margin-top: -20px; + visibility: hidden; + display: block; + opacity: 0; + } + &.rdtOpen { + .rdtPicker { + opacity: 1; + visibility: visible; + margin-top: 0; + } + } + input.form-control { + border: 0; + background-image: linear-gradient(#9c27b0, #9c27b0), + linear-gradient(#d2d2d2, #d2d2d2); + background-size: 0 2px, 100% 1px; + background-repeat: no-repeat; + background-position: center bottom, center calc(100% - 1px); + background-color: rgba(0, 0, 0, 0); + transition: background 0s ease-out; + float: none; + box-shadow: none; + border-radius: 0; + font-weight: 400; + width: 100%; + height: 36px; + padding: 7px 0; + font-size: 14px; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400; + line-height: 1.42857; + display: block; + width: 100%; + color: #555; + } + input.form-control:focus { + outline: none; + background-image: linear-gradient(#9c27b0, #9c27b0), + linear-gradient(#d2d2d2, #d2d2d2); + background-size: 100% 2px, 100% 1px; + box-shadow: none; + transition-duration: 0.3s; + } +} +.rdtPicker { + display: none; + position: absolute; + width: 260px; + padding: 4px; + margin-top: 1px; + z-index: 99999 !important; + background: #fff; + border-radius: 0.125rem; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + background-clip: padding-box; + min-width: 160px; + + &:before { + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: -5px; + left: 10px; + right: auto; + color: #ffffff; + border-bottom: 0.4em solid; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + } + &:after { + border-bottom: 0.4em solid #ffffff; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + content: ""; + display: inline-block; + position: absolute; + top: -5px; + left: 10px; + } +} + +.rdtPicker { + display: block; + top: 40px; +} +.rdtStatic .rdtPicker { + box-shadow: none; + position: static; +} + +.rdtPicker .rdtTimeToggle { + text-align: center; + padding: 5px; + border-radius: 4px; +} + +.rdtPicker table { + width: 100%; + margin: 0; + border-color: $white-color !important; + border-collapse: collapse; +} +.rdtPicker td, +.rdtPicker th { + text-align: center; + padding: 1px; +} +.rdtPicker td { + cursor: pointer; +} +.rdtDay { + height: 30px; + line-height: 33px; + width: 30px; + text-align: center; + padding: 0px; + border-radius: 50%; + &.rdtToday.rdtActive, + &.rdtActive, + &.rdtActive:hover { + background-color: $brand-primary !important; + color: $white-color; + @include shadow-big-color($brand-primary); + } +} +.rdtDays { + tr { + .dow { + border-bottom: 1px solid #e3e3e3; + text-align: center; + font-size: 12px; + text-transform: uppercase; + font-weight: 400; + padding-bottom: 5px; + padding-top: 10px; + } + .rdtOld, + .rdtNew { + color: $grey-a400; + } + } +} + +.rdtPicker td.rdtDay:hover, +.rdtPicker td.rdtHour:hover, +.rdtPicker td.rdtMinute:hover, +.rdtPicker td.rdtSecond:hover, +.rdtPicker .rdtTimeToggle:hover { + background: #eeeeee; + cursor: pointer; +} +.rdtPicker td.rdtToday { + position: relative; +} +.rdtPicker td.rdtActive.rdtToday:before { + border-bottom-color: #fff; +} +.rdtPicker td.rdtDisabled, +.rdtPicker td.rdtDisabled:hover { + background: none; + color: #999999; + cursor: not-allowed; +} + +.rdtPicker td span.rdtOld { + color: #999999; +} +.rdtPicker td span.rdtDisabled, +.rdtPicker td span.rdtDisabled:hover { + background: none; + color: #999999; + cursor: not-allowed; +} +.rdtPicker .dow { + width: 14.2857%; + border-bottom: none; +} +.rdtPicker th.rdtSwitch { + width: 50px; + padding: 5px; + border-radius: 4px; +} +.rdtPicker th.rdtNext, +.rdtPicker th.rdtPrev { + font-size: 21px; + vertical-align: top; + border-radius: 50%; + line-height: 33px; +} + +.rdtPicker { + .dow, + th.rdtSwitch, + th.rdtNext, + th.rdtPrev, + .rdtTimeToggle { + color: $gray-700; + } +} + +.rdtPicker { + .rdtTimeToggle { + color: $brand-primary; + } +} + +.rdtPicker { + .rdtTime { + th.rdtSwitch { + color: $brand-primary; + } + } +} + +.rdtPrev span, +.rdtNext span { + display: block; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; +} + +.rdtPicker th.rdtDisabled, +.rdtPicker th.rdtDisabled:hover { + background: none; + color: #999999; + cursor: not-allowed; +} +.rdtPicker thead tr:first-child th { + cursor: pointer; +} +.rdtPicker thead tr:first-child th:hover { + background: #eeeeee; +} + +.rdtPicker button { + border: none; + background: none; + cursor: pointer; +} +.rdtPicker button:hover { + background-color: #eee; +} + +.rdtPicker thead button { + width: 100%; + height: 100%; +} + +td.rdtMonth, +td.rdtYear { + height: 50px; + width: 25%; + cursor: pointer; +} +td.rdtMonth:hover, +td.rdtYear:hover { + background: #eee; +} + +.rdtCounters { + display: inline-block; +} + +.rdtCounters { + > div { + float: left; + width: 40px; + font-weight: inherit; + margin: 3px; + border-radius: 50%; + } + .rdtCounterSeparator { + width: 0; + border: 1px solid transparent; + } +} + +.rdtCounter { + height: 100px; +} + +.rdtCounter { + width: 40px; + .rdtCount { + padding: 7px; + height: 40px; + border: 1px solid transparent; + } +} +.rdtCounters { + .rdtCounter:last-child { + .rdtCount { + color: $brand-primary; + border-radius: 50%; + border: 1px solid $brand-primary; + } + } +} + +.rdtCounterSeparator { + padding: 7px; + line-height: 100px; +} +.rdtCounter .rdtBtn { + line-height: 40px; + cursor: pointer; + display: block; + border-radius: 50%; + color: $brand-primary; + -webkit-transition: all 60ms ease-in; + -moz-transition: all 60ms ease-in; + -o-transition: all 60ms ease-in; + -ms-transition: all 60ms ease-in; + transition: all 60ms ease-in; + + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Chrome/Safari/Opera */ + -khtml-user-select: none; /* Konqueror */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; +} +.rdtCounter .rdtBtn:hover { + background: #eee; + // color: #797979; +} +.rdtCounter .rdtCount { + font-size: inherit; + line-height: 25px; +} + +.rdtMilli { + vertical-align: middle; + padding-left: 8px; + width: 48px; +} + +.rdtMilli input { + width: 100%; + font-size: inherit; + margin-top: 37px; +} +.rdtMonths, +.rdtYears { + padding-bottom: 10px; + .rdtMonth, + .rdtYear { + display: inline-block; + width: 56px; + height: 56px; + line-height: 56px; + margin: 3px 3px; + cursor: pointer; + border-radius: 50%; + text-align: center; + + &.rdtActive { + background-color: $brand-primary !important; + color: $white-color; + } + } +} diff --git a/src/assets/scss/plugins/_plugin-react-image-gallery.scss b/src/assets/scss/plugins/_plugin-react-image-gallery.scss new file mode 100644 index 0000000..9587854 --- /dev/null +++ b/src/assets/scss/plugins/_plugin-react-image-gallery.scss @@ -0,0 +1,85 @@ +@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss"; + +.image-gallery-left-nav, +.image-gallery-right-nav { + position: absolute; + cursor: pointer; + z-index: 100; + opacity: 0.5; + bottom: -40%; + top: auto; + padding: 0 !important; + color: #fff; + font-size: 5em; + outline: none; + background-color: transparent; + border: 0; + transform: translateY(-50%); + &:before, + &:hover:before { + color: #3c4858; + text-shadow: none; + } + &:before { + font-family: "Material Icons"; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: "liga"; + -webkit-font-smoothing: antialiased; + } +} +.image-gallery-left-nav { + left: -20px; + &::before { + content: "chevron_left"; + } +} +.image-gallery-right-nav { + right: -20px; + &::before { + content: "chevron_right"; + } +} +.image-gallery-thumbnail { + margin: 0px; + padding: 0px; + cursor: pointer; + position: relative; + line-height: 0px; + width: 125px; + border: none !important; + & + .image-gallery-thumbnail { + margin: 0 !important; + } + img { + max-width: 100%; + cursor: pointer; + position: relative; + margin-top: 10px; + margin-bottom: 10px; + } +} +.image-gallery-thumbnail-label { + display: none !important; +} +.image-gallery-thumbnails { + padding: 0 !important; + overflow: hidden; + width: 100%; +} +.image-gallery-thumbnails-container { + position: relative; + // width: 99999px; + margin: 0px; + padding: 0px; + list-style-type: none; + text-align: center; +} diff --git a/src/assets/scss/plugins/_plugin-react-slick.scss b/src/assets/scss/plugins/_plugin-react-slick.scss new file mode 100644 index 0000000..0643a07 --- /dev/null +++ b/src/assets/scss/plugins/_plugin-react-slick.scss @@ -0,0 +1,254 @@ +/* Slider */ +.slick-slider { + position: relative; + + display: block; + box-sizing: border-box; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; + + @media (min-width: 768px) { + .slick-caption { + display: block !important; + } + } + + .slick-caption { + padding-bottom: 45px; + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + color: #ffffff; + text-align: center; + z-index: 3; + display: none; + } + .slick-slide { + > div:first-child { + position: relative; + } + } + .slick-icons { + position: relative; + top: 5px; + } + .slick-image { + width: 100% !important; + display: inline-flex !important; + } +} + +.slick-list { + position: relative; + + display: block; + overflow: hidden; + + margin: 0; + padding: 0; +} +.slick-list:focus { + outline: none; +} +.slick-list.dragging { + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track { + position: relative; + top: 0; + left: 0; + + display: block; + margin-left: auto; + margin-right: auto; +} +.slick-track:before, +.slick-track:after { + display: table; + + content: ""; +} +.slick-track:after { + clear: both; +} +.slick-loading .slick-track { + visibility: hidden; +} + +.slick-slide { + display: none; + float: left; + + height: 100%; + min-height: 1px; +} +[dir="rtl"] .slick-slide { + float: right; +} +.slick-slide img { + display: block; +} +.slick-slide.slick-loading img { + display: none; +} +.slick-slide.dragging img { + pointer-events: none; +} +.slick-initialized .slick-slide { + display: block; +} +.slick-loading .slick-slide { + visibility: hidden; +} +.slick-vertical .slick-slide { + display: block; + + height: auto; + + border: 1px solid transparent; +} +.slick-arrow.slick-hidden { + display: none; +} +button.slick-arrow.slick-prev, +button.slick-arrow.slick-next { + font-size: 0; + line-height: 0; + position: absolute; + top: 50%; + display: block; + // width: 20px; + height: 100%; + padding: 0; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + cursor: pointer; + border: none; + color: transparent; + outline: none; + background: transparent; + width: 15%; + z-index: 2; + opacity: 0.5; +} +.slick-prev { + left: 0; + &::before { + content: "\f053"; + font-weight: 600; + font-family: Font Awesome\ 5 Free; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + color: white; + font-size: 30px; + width: 100%; + } +} +.slick-next { + right: 0; + &::before { + content: "\f054"; + font-weight: 600; + font-family: Font Awesome\ 5 Free; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + color: #fff; + font-size: 30px; + width: 100%; + } +} +.slick-list { + z-index: 1; +} +.slick-dots { + margin-top: 0; + margin-bottom: 1rem; + position: absolute; + bottom: 5px; + // margin-right: 15%; + // margin-left: 15%; + width: 100%; + padding: 0; + list-style: none; + text-align: center; + z-index: 3; +} +.slick-dots li, +.slick-dots li button { + width: 20px; + height: 20px; + cursor: pointer; +} +.slick-dots li { + position: relative; + display: inline-block; + margin: 0 5px; + padding: 0; +} +.slick-dots li button { + font-size: 0; + line-height: 0; + display: block; + padding: 5px; + color: transparent; + border: 0; + outline: none; + background: transparent; + &::before { + position: absolute; + top: 0; + left: 0; + width: 10px; + height: 10px; + content: "\2022"; + text-align: center; + opacity: 1; + background-color: #fff; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + border-radius: 2px; + transition: all 300ms linear; + } +} +.slick-dots li.slick-active button:before { + width: 15px; + height: 15px; + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); + top: -3px; +} diff --git a/src/assets/scss/plugins/_plugin-react-tagsinput.scss b/src/assets/scss/plugins/_plugin-react-tagsinput.scss new file mode 100644 index 0000000..04e67e4 --- /dev/null +++ b/src/assets/scss/plugins/_plugin-react-tagsinput.scss @@ -0,0 +1,123 @@ +// Based on the original react-tagsinput styles + +.react-tagsinput { + display: inline-block; + padding: 4px 6px; + max-width: 100%; + line-height: 22px; +} + +.react-tagsinput-tag { + cursor: pointer; + margin: 5px 3px 5px 0; + position: relative; + padding: 3px 8px; + border-radius: 12px; + color: #ffffff; + font-weight: 500; + font-size: 0.75em; + text-transform: uppercase; + display: inline-block; + line-height: 1.5em; + padding-left: 0.8em; +} + +.react-tagsinput-remove { + cursor: pointer; + font-weight: bold; +} + +.react-tagsinput-tag a::before { + font-family: Font Awesome\ 5 Free; + content: "\f00d"; + padding: 0px 2px; + font-weight: 900; +} +.react-tagsinput-tag a { + cursor: pointer; + position: absolute; + top: 3px; + right: 0px; + opacity: 0; + background-color: transparent; + color: #ffffff; +} + +.react-tagsinput-input { + background: transparent; + border: 0; + color: #777; + font-family: sans-serif; + font-size: 13px; + font-weight: 400; + margin-bottom: 6px; + margin-top: 1px; + outline: none; + padding: 5px; + width: 80px; +} + +.react-tagsinput { + .react-tagsinput-tag { + -webkit-transition: all 300ms ease 0s; + -moz-transition: all 300ms ease 0s; + -o-transition: all 300ms ease 0s; + -ms-transition: all 300ms ease 0s; + transition: all 300ms ease 0s; + + &:hover { + padding-right: 22px; + + a { + opacity: 1; + padding-right: 4px; + background-color: transparent; + color: #ffffff; + } + } + + // @include badges-color($gray-light); + // + // &.primary{ + // @include badges-color($brand-primary); + // } + // &.info{ + // @include badges-color($brand-info); + // } + // &.success{ + // @include badges-color($brand-success); + // } + // &.warning{ + // @include badges-color($brand-warning); + // } + // &.danger{ + // @include badges-color($brand-danger); + // } + // .rose{ + // @include badges-color($brand-rose); + // } + + &.primary { + background-color: $brand-primary; + } + &.info { + background-color: $brand-info; + } + &.success { + background-color: $brand-success; + } + &.warning { + background-color: $brand-warning; + } + &.danger { + background-color: $brand-danger; + } + &.rose { + background-color: $brand-rose; + } + &.default { + background-color: $gray-light; + } + background-color: $gray-light; + } +} diff --git a/src/assets/scss/react-material.scss b/src/assets/scss/react-material.scss new file mode 100644 index 0000000..af67fb5 --- /dev/null +++ b/src/assets/scss/react-material.scss @@ -0,0 +1,33 @@ +/*! + +========================================================= +* React Material - v2.0.0 based on Material Kit PRO v2.0.2 (Bootstrap 4.0.0 Final Edition) +========================================================= + +* Product Page: https://www.weenspace.com/product/react-material +* Copyright 2021 WeenSpace (https://www.weenspace.com) + +* Coded by WeenSpace + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/ + + +// Core Components +@import "core/variables"; +@import "core/mixins"; +@import "core/fileupload"; +@import "core/keyframes"; + +// Core Plugins +@import "core/misc"; + +// @import "plugins/plugin-datetime-picker"; +@import "plugins/plugin-nouislider"; +@import "plugins/plugin-react-datetime"; +@import "plugins/plugin-react-image-gallery"; +@import "plugins/plugin-react-slick"; +@import "plugins/plugin-react-tagsinput"; diff --git a/src/components/Accordion/Accordion.js b/src/components/Accordion/Accordion.js new file mode 100644 index 0000000..e2bba6f --- /dev/null +++ b/src/components/Accordion/Accordion.js @@ -0,0 +1,109 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Accordion from "@material-ui/core/Accordion"; +import AccordionSummary from "@material-ui/core/AccordionSummary"; +import AccordionDetails from "@material-ui/core/AccordionDetails"; + +// @material-ui/icons +import ExpandMore from "@material-ui/icons/ExpandMore"; + +import styles from "assets/jss/react-material/components/accordionStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomAccordion(props) { + const [active, setActive] = React.useState( + props.active.length === undefined ? [props.active] : props.active + ); + const [single] = React.useState( + props.active.length === undefined ? true : false + ); + const handleChange = (panel) => () => { + let newArray; + + if (single) { + if (active[0] === panel) { + newArray = []; + } else { + newArray = [panel]; + } + } else { + if (active.indexOf(panel) === -1) { + newArray = [...active, panel]; + } else { + newArray = [...active]; + newArray.splice(active.indexOf(panel), 1); + } + } + setActive(newArray); + }; + const { collapses, activeColor } = props; + const classes = useStyles(); + return ( +
+ {collapses.map((prop, key) => { + return ( + + } + classes={{ + root: `${classes.accordionSummary} ${ + classes[activeColor + "AccordionSummary"] + }`, + expanded: `${classes.accordionSummaryExpaned} ${ + classes[activeColor + "AccordionSummaryExpaned"] + }`, + content: classes.accordionSummaryContent, + expandIcon: classes.accordionSummaryExpandIcon, + }} + > +

{prop.title}

+
+ + {prop.content} + +
+ ); + })} +
+ ); +} + +CustomAccordion.defaultProps = { + active: -1, + activeColor: "primary", +}; + +CustomAccordion.propTypes = { + // index of the default active collapse + active: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.arrayOf(PropTypes.number), + ]), + collapses: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string, + content: PropTypes.node, + }) + ).isRequired, + activeColor: PropTypes.oneOf([ + "primary", + "secondary", + "warning", + "danger", + "success", + "info", + "rose", + ]), +}; diff --git a/src/components/Badge/Badge.js b/src/components/Badge/Badge.js new file mode 100644 index 0000000..1504443 --- /dev/null +++ b/src/components/Badge/Badge.js @@ -0,0 +1,41 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import styles from "assets/jss/react-material/components/badgeStyle"; + +const useStyles = makeStyles(styles); + +export default function Badge(props) { + const { color, children, className } = props; + const classes = useStyles(); + const badgeClasses = classNames({ + [classes.badge]: true, + [classes[color]]: true, + [className]: className !== undefined, + }); + return {children}; +} + +Badge.defaultProps = { + color: "gray", +}; + +Badge.propTypes = { + color: PropTypes.oneOf([ + "primary", + "warning", + "danger", + "success", + "info", + "rose", + "gray", + ]), + className: PropTypes.string, + children: PropTypes.node, +}; diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 0000000..27b6100 --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,3 @@ +import Button from "./CustomButtons/Button"; + +export default Button; \ No newline at end of file diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 0000000..44b7bab --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,71 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons + +// core components +import styles from "assets/jss/react-material/components/cardStyle"; + +const useStyles = makeStyles(styles); + +export default function Card(props) { + const { + className, + children, + plain, + profile, + blog, + raised, + background, + pricing, + color, + product, + testimonial, + ...rest + } = props; + const classes = useStyles(); + const cardClasses = classNames({ + [classes.card]: true, + [classes.cardPlain]: plain, + [classes.cardProfile]: profile || testimonial, + [classes.cardBlog]: blog, + [classes.cardRaised]: raised, + [classes.cardBackground]: background, + [classes.cardPricingColor]: + (pricing && color !== undefined) || (pricing && background !== undefined), + [classes[color]]: color, + [classes.cardPricing]: pricing, + [classes.cardProduct]: product, + [className]: className !== undefined, + }); + return ( +
+ {children} +
+ ); +} + +Card.propTypes = { + className: PropTypes.string, + plain: PropTypes.bool, + profile: PropTypes.bool, + blog: PropTypes.bool, + raised: PropTypes.bool, + background: PropTypes.bool, + pricing: PropTypes.bool, + testimonial: PropTypes.bool, + color: PropTypes.oneOf([ + "primary", + "info", + "success", + "warning", + "danger", + "rose", + ]), + product: PropTypes.bool, + children: PropTypes.node, +}; diff --git a/src/components/Card/CardAvatar.js b/src/components/Card/CardAvatar.js new file mode 100644 index 0000000..148d003 --- /dev/null +++ b/src/components/Card/CardAvatar.js @@ -0,0 +1,48 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// core components + +import styles from "assets/jss/react-material/components/cardAvatarStyle"; + +const useStyles = makeStyles(styles); + +export default function CardAvatar(props) { + const { + children, + className, + plain, + profile, + testimonial, + testimonialFooter, + ...rest + } = props; + const classes = useStyles(); + const cardAvatarClasses = classNames({ + [classes.cardAvatar]: true, + [classes.cardAvatarProfile]: profile, + [classes.cardAvatarPlain]: plain, + [classes.cardAvatarTestimonial]: testimonial, + [classes.cardAvatarTestimonialFooter]: testimonialFooter, + [className]: className !== undefined, + }); + return ( +
+ {children} +
+ ); +} + +CardAvatar.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, + profile: PropTypes.bool, + plain: PropTypes.bool, + testimonial: PropTypes.bool, + testimonialFooter: PropTypes.bool, +}; diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js new file mode 100644 index 0000000..0c677ae --- /dev/null +++ b/src/components/Card/CardBody.js @@ -0,0 +1,54 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons + +// core components +import styles from "assets/jss/react-material/components/cardBodyStyle"; + +const useStyles = makeStyles(styles); + +export default function CardBody(props) { + const { + className, + children, + background, + plain, + formHorizontal, + pricing, + signup, + color, + ...rest + } = props; + const classes = useStyles(); + const cardBodyClasses = classNames({ + [classes.cardBody]: true, + [classes.cardBodyBackground]: background, + [classes.cardBodyPlain]: plain, + [classes.cardBodyFormHorizontal]: formHorizontal, + [classes.cardPricing]: pricing, + [classes.cardSignup]: signup, + [classes.cardBodyColor]: color, + [className]: className !== undefined, + }); + return ( +
+ {children} +
+ ); +} + +CardBody.propTypes = { + className: PropTypes.string, + background: PropTypes.bool, + plain: PropTypes.bool, + formHorizontal: PropTypes.bool, + pricing: PropTypes.bool, + signup: PropTypes.bool, + color: PropTypes.bool, + children: PropTypes.node, +}; diff --git a/src/components/Card/CardFooter.js b/src/components/Card/CardFooter.js new file mode 100644 index 0000000..0e3698e --- /dev/null +++ b/src/components/Card/CardFooter.js @@ -0,0 +1,48 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons + +// core components +import styles from "assets/jss/react-material/components/cardFooterStyle"; + +const useStyles = makeStyles(styles); + +export default function CardFooter(props) { + const { + className, + children, + plain, + profile, + pricing, + testimonial, + ...rest + } = props; + const classes = useStyles(); + const cardFooterClasses = classNames({ + [classes.cardFooter]: true, + [classes.cardFooterPlain]: plain, + [classes.cardFooterProfile]: profile || testimonial, + [classes.cardFooterPricing]: pricing, + [classes.cardFooterTestimonial]: testimonial, + [className]: className !== undefined, + }); + return ( +
+ {children} +
+ ); +} + +CardFooter.propTypes = { + className: PropTypes.string, + plain: PropTypes.bool, + profile: PropTypes.bool, + pricing: PropTypes.bool, + testimonial: PropTypes.bool, + children: PropTypes.node, +}; diff --git a/src/components/Card/CardHeader.js b/src/components/Card/CardHeader.js new file mode 100644 index 0000000..c0db451 --- /dev/null +++ b/src/components/Card/CardHeader.js @@ -0,0 +1,61 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons + +// core components +import styles from "assets/jss/react-material/components/cardHeaderStyle"; + +const useStyles = makeStyles(styles); + +export default function CardHeader(props) { + const { + className, + children, + color, + plain, + image, + contact, + signup, + noShadow, + ...rest + } = props; + const classes = useStyles(); + const cardHeaderClasses = classNames({ + [classes.cardHeader]: true, + [classes[color + "CardHeader"]]: color, + [classes.cardHeaderPlain]: plain, + [classes.cardHeaderImage]: image, + [classes.cardHeaderContact]: contact, + [classes.cardHeaderSignup]: signup, + [classes.noShadow]: noShadow, + [className]: className !== undefined, + }); + return ( +
+ {children} +
+ ); +} + +CardHeader.propTypes = { + className: PropTypes.string, + color: PropTypes.oneOf([ + "warning", + "success", + "danger", + "info", + "primary", + "rose", + ]), + plain: PropTypes.bool, + image: PropTypes.bool, + contact: PropTypes.bool, + signup: PropTypes.bool, + noShadow: PropTypes.bool, + children: PropTypes.node, +}; diff --git a/src/components/Clearfix/Clearfix.js b/src/components/Clearfix/Clearfix.js new file mode 100644 index 0000000..a995a41 --- /dev/null +++ b/src/components/Clearfix/Clearfix.js @@ -0,0 +1,23 @@ +import React from "react"; + +// mterial-ui components +import { makeStyles } from "@material-ui/core/styles"; + +const styles = { + clearfix: { + "&:after,&:before": { + display: "table", + content: '" "', + }, + "&:after": { + clear: "both", + }, + }, +}; + +const useStyles = makeStyles(styles); + +export default function Clearfix() { + const classes = useStyles(); + return
; +} diff --git a/src/components/CustomButtons/Button.js b/src/components/CustomButtons/Button.js new file mode 100644 index 0000000..5e9b4fd --- /dev/null +++ b/src/components/CustomButtons/Button.js @@ -0,0 +1,90 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Button from "@material-ui/core/Button"; + +import styles from "assets/jss/react-material/components/buttonStyle"; + +const useStyles = makeStyles(styles); + +const RegularButton = React.forwardRef((props, ref) => { + const { + color, + round, + children, + fullWidth, + disabled, + simple, + size, + block, + link, + justIcon, + fileButton, + className, + ...rest + } = props; + const classes = useStyles(); + const btnClasses = classNames({ + [classes.button]: true, + [classes[size]]: size, + [classes[color]]: color, + [classes.round]: round, + [classes.fullWidth]: fullWidth, + [classes.disabled]: disabled, + [classes.simple]: simple, + [classes.block]: block, + [classes.link]: link, + [classes.justIcon]: justIcon, + [classes.fileButton]: fileButton, + [className]: className, + }); + return ( + + ); +}); + +RegularButton.propTypes = { + color: PropTypes.oneOf([ + "primary", + "secondary", + "info", + "success", + "warning", + "danger", + "rose", + "white", + "twitter", + "facebook", + "google", + "linkedin", + "pinterest", + "youtube", + "tumblr", + "github", + "behance", + "dribbble", + "reddit", + "instagram", + "transparent", + ]), + size: PropTypes.oneOf(["sm", "lg"]), + simple: PropTypes.bool, + round: PropTypes.bool, + fullWidth: PropTypes.bool, + disabled: PropTypes.bool, + block: PropTypes.bool, + link: PropTypes.bool, + justIcon: PropTypes.bool, + fileButton: PropTypes.bool, + children: PropTypes.node, + className: PropTypes.string, +}; + +export default RegularButton; diff --git a/src/components/CustomDropdown/CustomDropdown.js b/src/components/CustomDropdown/CustomDropdown.js new file mode 100644 index 0000000..3102f79 --- /dev/null +++ b/src/components/CustomDropdown/CustomDropdown.js @@ -0,0 +1,216 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import MenuItem from "@material-ui/core/MenuItem"; +import MenuList from "@material-ui/core/MenuList"; +import ClickAwayListener from "@material-ui/core/ClickAwayListener"; +import Paper from "@material-ui/core/Paper"; +import Grow from "@material-ui/core/Grow"; +import Divider from "@material-ui/core/Divider"; +import Popper from "@material-ui/core/Popper"; +// core components +import Button from "components/CustomButtons/Button"; + +import styles from "assets/jss/react-material/components/customDropdownStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomDropdown(props) { + const [anchorEl, setAnchorEl] = React.useState(null); + + const handleClick = (event) => { + if (anchorEl && anchorEl.contains(event.target)) { + setAnchorEl(null); + } else { + setAnchorEl(event.currentTarget); + } + }; + const handleClose = (event) => { + if (anchorEl.contains(event.target)) { + return; + } + setAnchorEl(null); + }; + const handleCloseMenu = (param) => { + setAnchorEl(null); + if (props && props.onClick) { + props.onClick(param); + } + }; + const { + buttonText, + buttonIcon, + dropdownList, + buttonProps, + dropup, + dropdownHeader, + caret, + hoverColor, + dropPlacement, + rtlActive, + noLiPadding, + innerDropDown, + navDropdown, + } = props; + const classes = useStyles(); + const caretClasses = classNames({ + [classes.caret]: true, + [classes.caretDropup]: dropup && !anchorEl, + [classes.caretActive]: Boolean(anchorEl) && !dropup, + [classes.caretRTL]: rtlActive, + }); + const dropdownItem = classNames({ + [classes.dropdownItem]: true, + [classes[hoverColor + "Hover"]]: true, + [classes.noLiPadding]: noLiPadding, + [classes.dropdownItemRTL]: rtlActive, + }); + const dropDownMenu = ( + + {dropdownHeader !== undefined ? ( + handleCloseMenu(dropdownHeader)} + className={classes.dropdownHeader} + > + {dropdownHeader} + + ) : null} + {dropdownList.map((prop, key) => { + if (prop.divider) { + return ( + handleCloseMenu("divider")} + className={classes.dropdownDividerItem} + /> + ); + } else if ( + prop.props !== undefined && + prop.props["data-ref"] === "multi" + ) { + return ( + + {prop} + + ); + } + return ( + handleCloseMenu(prop)} + className={dropdownItem} + > + {prop} + + ); + })} + + ); + return ( +
+
+ +
+ + {() => ( + + + {innerDropDown ? ( + dropDownMenu + ) : ( + + {dropDownMenu} + + )} + + + )} + +
+ ); +} + +CustomDropdown.defaultProps = { + caret: true, + dropup: false, + hoverColor: "primary", +}; + +CustomDropdown.propTypes = { + hoverColor: PropTypes.oneOf([ + "dark", + "primary", + "info", + "success", + "warning", + "danger", + "rose", + ]), + buttonText: PropTypes.node, + buttonIcon: PropTypes.object, + dropdownList: PropTypes.array, + buttonProps: PropTypes.object, + dropup: PropTypes.bool, + dropdownHeader: PropTypes.node, + rtlActive: PropTypes.bool, + caret: PropTypes.bool, + dropPlacement: PropTypes.oneOf([ + "bottom", + "top", + "right", + "left", + "bottom-start", + "bottom-end", + "top-start", + "top-end", + "right-start", + "right-end", + "left-start", + "left-end", + ]), + noLiPadding: PropTypes.bool, + innerDropDown: PropTypes.bool, + navDropdown: PropTypes.bool, + // This is a function that returns the clicked menu item + onClick: PropTypes.func, +}; diff --git a/src/components/CustomFileInput/CustomFileInput.js b/src/components/CustomFileInput/CustomFileInput.js new file mode 100644 index 0000000..ca2f20e --- /dev/null +++ b/src/components/CustomFileInput/CustomFileInput.js @@ -0,0 +1,114 @@ +import React from "react"; +// used for making the prop types of this component +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import CustomInput from "components/CustomInput/CustomInput"; +import Button from "components/CustomButtons/Button"; + +import styles from "assets/jss/react-material/components/customFileInputStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomFileInput(props) { + const [fileNames, setFileNames] = React.useState(""); + // eslint-disable-next-line + const [files, setFiles] = React.useState(null); + let hiddenFile = React.createRef(); + const onFocus = (e) => { + hiddenFile.current.click(e); + }; + // eslint-disable-next-line + const handleSubmit = (e) => { + e.preventDefault(); + // files is the file/image uploaded + // in this function you can save the image (files) on form submit + // you have to call it yourself + }; + const addFile = (e) => { + let fileNames = ""; + let files = e.target.files; + for (let i = 0; i < e.target.files.length; i++) { + fileNames = fileNames + e.target.files[i].name; + if (props.multiple && i !== e.target.files.length - 1) { + fileNames = fileNames + ", "; + } + } + setFiles(files); + setFileNames(fileNames); + if (props.onChange) { + props.onChange(files, fileNames); + } + }; + const { + id, + endButton, + startButton, + inputProps, + formControlProps, + multiple, + } = props; + const classes = useStyles(); + if (inputProps && inputProps.type && inputProps.type === "file") { + inputProps.type = "text"; + } + let buttonStart; + let buttonEnd; + if (startButton) { + buttonStart = ( + + ); + } + if (endButton) { + buttonEnd = ( + + ); + } + return ( +
+ + +
+ ); +} + +CustomFileInput.defaultProps = { + multiple: false, +}; + +CustomFileInput.propTypes = { + id: PropTypes.string, + endButton: PropTypes.object, + startButton: PropTypes.object, + inputProps: PropTypes.object, + formControlProps: PropTypes.object, + multiple: PropTypes.bool, + // it is a function from which you can get the file that was uploaded + // more can be read here: https://github.com/WeenSpace/ct-react-material/issues/64 and here: https://github.com/WeenSpace/ct-react-material/issues/37 + onChange: PropTypes.func, +}; diff --git a/src/components/CustomInput/CustomInput.js b/src/components/CustomInput/CustomInput.js new file mode 100644 index 0000000..351e779 --- /dev/null +++ b/src/components/CustomInput/CustomInput.js @@ -0,0 +1,105 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// nodejs library that concatenates classes +import classNames from "classnames"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import FormControl from "@material-ui/core/FormControl"; +import InputLabel from "@material-ui/core/InputLabel"; +import Input from "@material-ui/core/Input"; +// @material-ui/icons +import Clear from "@material-ui/icons/Clear"; +import Check from "@material-ui/icons/Check"; +// core components + +import styles from "assets/jss/react-material/components/customInputStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomInput(props) { + const { + formControlProps, + labelText, + id, + labelProps, + inputProps, + error, + white, + inputRootCustomClasses, + success, + } = props; + const classes = useStyles(); + const labelClasses = classNames({ + [" " + classes.labelRootError]: error, + [" " + classes.labelRootSuccess]: success && !error, + }); + const underlineClasses = classNames({ + [classes.underlineError]: error, + [classes.underlineSuccess]: success && !error, + [classes.underline]: true, + [classes.whiteUnderline]: white, + }); + const marginTop = classNames({ + [inputRootCustomClasses]: inputRootCustomClasses !== undefined, + }); + const inputClasses = classNames({ + [classes.input]: true, + [classes.whiteInput]: white, + }); + var formControlClasses; + if (formControlProps !== undefined) { + formControlClasses = classNames( + formControlProps.className, + classes.formControl + ); + } else { + formControlClasses = classes.formControl; + } + let newInputProps = { + maxLength: inputProps ? inputProps.maxLength : undefined, + minLength: inputProps ? inputProps.minLength : undefined, + }; + return ( + + {labelText !== undefined ? ( + + {labelText} + + ) : null} + + {error ? ( + + ) : success ? ( + + ) : null} + + ); +} + +CustomInput.propTypes = { + labelText: PropTypes.node, + labelProps: PropTypes.object, + id: PropTypes.string, + inputProps: PropTypes.object, + formControlProps: PropTypes.object, + inputRootCustomClasses: PropTypes.string, + error: PropTypes.bool, + success: PropTypes.bool, + white: PropTypes.bool, +}; diff --git a/src/components/CustomLinearProgress/CustomLinearProgress.js b/src/components/CustomLinearProgress/CustomLinearProgress.js new file mode 100644 index 0000000..1e8a8c0 --- /dev/null +++ b/src/components/CustomLinearProgress/CustomLinearProgress.js @@ -0,0 +1,41 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import LinearProgress from "@material-ui/core/LinearProgress"; + +import styles from "assets/jss/react-material/components/customLinearProgressStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomLinearProgress(props) { + const { color, ...rest } = props; + const classes = useStyles(); + return ( + + ); +} + +CustomLinearProgress.defaultProps = { + color: "gray", +}; + +CustomLinearProgress.propTypes = { + color: PropTypes.oneOf([ + "primary", + "warning", + "danger", + "success", + "info", + "rose", + "gray", + ]), +}; diff --git a/src/components/CustomTabs/CustomTabs.js b/src/components/CustomTabs/CustomTabs.js new file mode 100644 index 0000000..53c644e --- /dev/null +++ b/src/components/CustomTabs/CustomTabs.js @@ -0,0 +1,126 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// import Card from "@material-ui/core/Card"; +// import CardContent from "@material-ui/core/Card/CardContent"; +// import CardHeader from "@material-ui/core/Card/CardHeader"; +import Tabs from "@material-ui/core/Tabs"; +import Tab from "@material-ui/core/Tab"; + +// core components +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import styles from "assets/jss/react-material/components/customTabsStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomTabs(props) { + const [value, setValue] = React.useState(0); + const handleChange = (event, value) => { + setValue(value); + }; + const { headerColor, title, tabs, rtlActive, plainTabs } = props; + const classes = useStyles(); + const cardTitle = classNames({ + [classes.cardTitle]: true, + [classes.cardTitleRTL]: rtlActive, + }); + const tabsContainer = classNames({ + [classes.tabsContainer]: true, + [classes.tabsContainerRTL]: rtlActive, + }); + return ( + + + {title !== undefined ? ( +
{"title"}
+ ) : null} + + {tabs.map((prop, key) => { + var icon = {}; + if (prop.tabIcon !== undefined) { + icon = { + icon: , + }; + } else { + icon = {}; + } + return ( + } + {...icon} + label={prop.tabName} + /> + ); + })} + +
+ {/* */} + + {tabs.map((prop, key) => { + if (key === value) { + return
{prop.tabContent}
; + } + return null; + })} +
+
+ ); +} + +CustomTabs.defaultProps = { + headerColor: "purple", +}; + +CustomTabs.propTypes = { + headerColor: PropTypes.oneOf([ + "warning", + "success", + "danger", + "info", + "primary", + "rose", + ]), + title: PropTypes.string, + tabs: PropTypes.arrayOf( + PropTypes.shape({ + tabName: PropTypes.string.isRequired, + tabIcon: PropTypes.object, + tabContent: PropTypes.node.isRequired, + }) + ), + rtlActive: PropTypes.bool, + plainTabs: PropTypes.bool, +}; diff --git a/src/components/CustomUpload/ImageUpload.js b/src/components/CustomUpload/ImageUpload.js new file mode 100644 index 0000000..940ec6b --- /dev/null +++ b/src/components/CustomUpload/ImageUpload.js @@ -0,0 +1,83 @@ +import React from "react"; +// used for making the prop types of this component +import PropTypes from "prop-types"; + +// core components +import Button from "components/CustomButtons/Button"; + +import defaultImage from "assets/img/image_placeholder.jpg"; +import defaultAvatar from "assets/img/placeholder.jpg"; + +export default function ImageUpload(props) { + const [file, setFile] = React.useState(null); + const [imagePreviewUrl, setImagePreviewUrl] = React.useState( + props.avatar ? defaultAvatar : defaultImage + ); + let fileInput = React.createRef(); + const handleImageChange = (e) => { + e.preventDefault(); + let reader = new FileReader(); + let file = e.target.files[0]; + reader.onloadend = () => { + setFile(file); + setImagePreviewUrl(reader.result); + if (props.onChange) { + props.onChange(file); + } + }; + if (file) { + reader.readAsDataURL(file); + } + }; + // eslint-disable-next-line + const handleSubmit = (e) => { + e.preventDefault(); + // file is the file/image uploaded + // in this function you can save the image (file) on form submit + // you have to call it yourself + }; + const handleClick = () => { + fileInput.current.click(); + }; + const handleRemove = () => { + setFile(null); + setImagePreviewUrl(props.avatar ? defaultAvatar : defaultImage); + fileInput.current.value = null; + }; + let { avatar, addButtonProps, changeButtonProps, removeButtonProps } = props; + return ( +
+ +
+ ... +
+
+ {file === null ? ( + + ) : ( + + + {avatar ?
: null} + +
+ )} +
+
+ ); +} + +ImageUpload.propTypes = { + avatar: PropTypes.bool, + addButtonProps: PropTypes.object, + changeButtonProps: PropTypes.object, + removeButtonProps: PropTypes.object, + // it is a function from which you can get the files and fileNames that were uploaded + // more can be read here: https://github.com/WeenSpace/ct-react-material/issues/64 + onChange: PropTypes.func, +}; diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..71fd4da --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,55 @@ +/* eslint-disable */ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; + +import styles from "assets/jss/react-material/components/footerStyle"; + +const useStyles = makeStyles(styles); + +export default function Footer(props) { + const { children, content, theme, big, className } = props; + const classes = useStyles(); + const themeType = + theme === "transparent" || theme == undefined ? false : true; + const footerClasses = classNames({ + [classes.footer]: true, + [classes[theme]]: themeType, + [classes.big]: big || children !== undefined, + [className]: className !== undefined, + }); + const aClasses = classNames({ + [classes.a]: true, + }); + + return ( +
+
+ {children !== undefined ? ( +
+
{children}
+
+
+ ) : ( + " " + )} + {content} +
+
+
+ ); +} + +Footer.propTypes = { + theme: PropTypes.oneOf(["dark", "white", "transparent"]), + big: PropTypes.bool, + content: PropTypes.node.isRequired, +}; diff --git a/src/components/Grid/GridContainer.js b/src/components/Grid/GridContainer.js new file mode 100644 index 0000000..3dffb41 --- /dev/null +++ b/src/components/Grid/GridContainer.js @@ -0,0 +1,36 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Grid from "@material-ui/core/Grid"; + +const styles = { + grid: { + marginRight: "-15px", + marginLeft: "-15px", + width: "auto", + }, +}; + +const useStyles = makeStyles(styles); + +export default function GridContainer(props) { + const { children, className, ...rest } = props; + const classes = useStyles(); + return ( + + {children} + + ); +} + +GridContainer.defaultProps = { + className: "", +}; + +GridContainer.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/Grid/GridItem.js b/src/components/Grid/GridItem.js new file mode 100644 index 0000000..4d5631c --- /dev/null +++ b/src/components/Grid/GridItem.js @@ -0,0 +1,38 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Grid from "@material-ui/core/Grid"; + +const styles = { + grid: { + position: "relative", + width: "100%", + minHeight: "1px", + paddingRight: "15px", + paddingLeft: "15px", + /* flexBasis: "auto" */ + }, +}; + +const useStyles = makeStyles(styles); + +export default function GridItem(props) { + const { children, className, ...rest } = props; + const classes = useStyles(); + return ( + + {children} + + ); +} + +GridItem.defaultProps = { + className: "", +}; + +GridItem.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 0000000..db800bd --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,150 @@ +import React from "react"; +import { Link } from "react-router-dom"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import IconButton from "@material-ui/core/IconButton"; +import Button from "@material-ui/core/Button"; +import Hidden from "@material-ui/core/Hidden"; +import Drawer from "@material-ui/core/Drawer"; +// @material-ui/icons +import Menu from "@material-ui/icons/Menu"; +import Close from "@material-ui/icons/Close"; +// core components +import styles from "assets/jss/react-material/components/headerStyle"; + +const useStyles = makeStyles(styles); + +export default function Header(props) { + const [mobileOpen, setMobileOpen] = React.useState(false); + const classes = useStyles(); + React.useEffect(() => { + if (props.changeColorOnScroll) { + window.addEventListener("scroll", headerColorChange); + } + return function cleanup() { + if (props.changeColorOnScroll) { + window.removeEventListener("scroll", headerColorChange); + } + }; + }); + const handleDrawerToggle = () => { + setMobileOpen(!mobileOpen); + }; + const headerColorChange = () => { + const { color, changeColorOnScroll } = props; + + const windowsScrollTop = window.pageYOffset; + if (windowsScrollTop > changeColorOnScroll.height) { + document.body + .getElementsByTagName("header")[0] + .classList.remove(classes[color]); + document.body + .getElementsByTagName("header")[0] + .classList.add(classes[changeColorOnScroll.color]); + } else { + document.body + .getElementsByTagName("header")[0] + .classList.add(classes[color]); + document.body + .getElementsByTagName("header")[0] + .classList.remove(classes[changeColorOnScroll.color]); + } + }; + const { color, links, brand, fixed, absolute } = props; + const appBarClasses = classNames({ + [classes.appBar]: true, + [classes[color]]: color, + [classes.absolute]: absolute, + [classes.fixed]: fixed, + }); + return ( + + + + +
{links}
+
+ + + + + + + + + + + +
{links}
+
+
+ + ); +} + +Header.defaultProp = { + color: "white", +}; + +Header.propTypes = { + color: PropTypes.oneOf([ + "primary", + "info", + "success", + "warning", + "danger", + "transparent", + "white", + "rose", + "dark", + ]), + links: PropTypes.node, + brand: PropTypes.string, + fixed: PropTypes.bool, + absolute: PropTypes.bool, + // this will cause the sidebar to change the color from + // props.color (see above) to changeColorOnScroll.color + // when the window.pageYOffset is heigher or equal to + // changeColorOnScroll.height and then when it is smaller than + // changeColorOnScroll.height change it back to + // props.color (see above) + changeColorOnScroll: PropTypes.shape({ + height: PropTypes.number.isRequired, + color: PropTypes.oneOf([ + "primary", + "info", + "success", + "warning", + "danger", + "transparent", + "white", + "rose", + "dark", + ]).isRequired, + }), +}; diff --git a/src/components/Header/HeaderLinks.js b/src/components/Header/HeaderLinks.js new file mode 100644 index 0000000..986e189 --- /dev/null +++ b/src/components/Header/HeaderLinks.js @@ -0,0 +1,277 @@ +/* eslint-disable */ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// react components for routing our app without refresh +import { Link } from "react-router-dom"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import Icon from "@material-ui/core/Icon"; + +// @material-ui/icons +import Apps from "@material-ui/icons/Apps"; +import ShoppingCart from "@material-ui/icons/ShoppingCart"; +import ViewDay from "@material-ui/icons/ViewDay"; +import Dns from "@material-ui/icons/Dns"; +import Build from "@material-ui/icons/Build"; +import ListIcon from "@material-ui/icons/List"; +import People from "@material-ui/icons/People"; +import Assignment from "@material-ui/icons/Assignment"; +import MonetizationOn from "@material-ui/icons/MonetizationOn"; +import Chat from "@material-ui/icons/Chat"; +import Call from "@material-ui/icons/Call"; +import ViewCarousel from "@material-ui/icons/ViewCarousel"; +import AccountBalance from "@material-ui/icons/AccountBalance"; +import ArtTrack from "@material-ui/icons/ArtTrack"; +import ViewQuilt from "@material-ui/icons/ViewQuilt"; +import LocationOn from "@material-ui/icons/LocationOn"; +import Fingerprint from "@material-ui/icons/Fingerprint"; +import AttachMoney from "@material-ui/icons/AttachMoney"; +import Store from "@material-ui/icons/Store"; +import AccountCircle from "@material-ui/icons/AccountCircle"; +import PersonAdd from "@material-ui/icons/PersonAdd"; +import Layers from "@material-ui/icons/Layers"; +import ShoppingBasket from "@material-ui/icons/ShoppingBasket"; +import LineStyle from "@material-ui/icons/LineStyle"; +import Error from "@material-ui/icons/Error"; + +// core components +import CustomDropdown from "components/CustomDropdown/CustomDropdown"; +import Button from "components/CustomButtons/Button"; + +import styles from "assets/jss/react-material/components/headerLinksStyle"; + +const useStyles = makeStyles(styles); + +export default function HeaderLinks(props) { + const easeInOutQuad = (t, b, c, d) => { + t /= d / 2; + if (t < 1) return (c / 2) * t * t + b; + t--; + return (-c / 2) * (t * (t - 2) - 1) + b; + }; + + const smoothScroll = (e, target) => { + if (window.location.pathname === "/sections") { + var isMobile = navigator.userAgent.match( + /(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i + ); + if (isMobile) { + // if we are on mobile device the scroll into view will be managed by the browser + } else { + e.preventDefault(); + var targetScroll = document.getElementById(target); + scrollGo(document.documentElement, targetScroll.offsetTop, 1250); + } + } + }; + const scrollGo = (element, to, duration) => { + var start = element.scrollTop, + change = to - start, + currentTime = 0, + increment = 20; + + var animateScroll = function () { + currentTime += increment; + var val = easeInOutQuad(currentTime, start, change, duration); + element.scrollTop = val; + if (currentTime < duration) { + setTimeout(animateScroll, increment); + } + }; + animateScroll(); + }; + var onClickSections = {}; + + const { dropdownHoverColor } = props; + const classes = useStyles(); + return ( + + + + Presentation Page + , + + + All components + , + + content_paste + Documentation + , + ]} + /> + + + smoothScroll(e, "headers")} + > + Headers + , + smoothScroll(e, "features")} + > + Features + , + smoothScroll(e, "blogs")} + > + Blogs + , + smoothScroll(e, "teams")} + > + Teams + , + smoothScroll(e, "projects")} + > + Projects + , + smoothScroll(e, "pricing")} + > + Pricing + , + smoothScroll(e, "testimonials")} + > + Testimonials + , + smoothScroll(e, "contacts")} + > + Contacts + , + ]} + /> + + + + About Us + , + + Blog Post + , + + Blog Posts + , + + Contact Us + , + + Landing Page + , + + Login Page + , + + Pricing Page + , + + Shopping Cart + , + + Ecommerce Page + , + + Product Page + , + + Profile Page + , + + Signup Page + , + + Error Page + , + ]} + /> + + + + + + ); +} + +HeaderLinks.defaultProps = { + hoverColor: "primary", +}; + +HeaderLinks.propTypes = { + dropdownHoverColor: PropTypes.oneOf([ + "dark", + "primary", + "info", + "success", + "warning", + "danger", + "rose", + ]), +}; diff --git a/src/components/InfoArea/InfoArea.js b/src/components/InfoArea/InfoArea.js new file mode 100644 index 0000000..8eeb102 --- /dev/null +++ b/src/components/InfoArea/InfoArea.js @@ -0,0 +1,69 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Icon from "@material-ui/core/Icon"; + +import styles from "assets/jss/react-material/components/infoStyle"; + +const useStyles = makeStyles(styles); + +export default function InfoArea(props) { + const { title, description, iconColor, vertical, className } = props; + const classes = useStyles(); + const iconWrapper = classNames({ + [classes.iconWrapper]: true, + [classes[iconColor]]: true, + [classes.iconWrapperVertical]: vertical, + }); + const iconClasses = classNames({ + [classes.icon]: true, + [classes.iconVertical]: vertical, + }); + const infoAreaClasses = classNames({ + [classes.infoArea]: true, + [className]: className !== undefined, + }); + let icon = null; + switch (typeof props.icon) { + case "string": + icon = {props.icon}; + break; + default: + icon = ; + break; + } + return ( +
+
{icon}
+
+

{title}

+
{description}
+
+
+ ); +} + +InfoArea.defaultProps = { + iconColor: "gray", +}; + +InfoArea.propTypes = { + icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, + title: PropTypes.string.isRequired, + description: PropTypes.node.isRequired, + iconColor: PropTypes.oneOf([ + "primary", + "warning", + "danger", + "success", + "info", + "rose", + "gray", + ]), + vertical: PropTypes.bool, + className: PropTypes.string, +}; diff --git a/src/components/Instruction/Instruction.js b/src/components/Instruction/Instruction.js new file mode 100644 index 0000000..1856105 --- /dev/null +++ b/src/components/Instruction/Instruction.js @@ -0,0 +1,55 @@ +import React from "react"; +import PropTypes from "prop-types"; +import cx from "classnames"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; + +import styles from "assets/jss/react-material/components/instructionStyle"; + +const useStyles = makeStyles(styles); + +export default function Instruction(props) { + const { title, text, image, className, imageClassName, imageAlt } = props; + const classes = useStyles(); + const instructionClasses = cx({ + [classes.instruction]: true, + [className]: className !== undefined, + }); + const pictureClasses = cx({ + [classes.picture]: true, + [imageClassName]: imageClassName !== undefined, + }); + return ( +
+ + + {title} +

{text}

+
+ +
+ {imageAlt} +
+
+
+
+ ); +} + +Instruction.defaultProps = { + imageAlt: "...", +}; + +Instruction.propTypes = { + title: PropTypes.node.isRequired, + text: PropTypes.node.isRequired, + image: PropTypes.string.isRequired, + imageAlt: PropTypes.string, + className: PropTypes.string, + imageClassName: PropTypes.string, +}; diff --git a/src/components/Media/Media.js b/src/components/Media/Media.js new file mode 100644 index 0000000..5d8e0a3 --- /dev/null +++ b/src/components/Media/Media.js @@ -0,0 +1,61 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// core components + +import styles from "assets/jss/react-material/components/mediaStyle"; + +const useStyles = makeStyles(styles); + +export default function Media(props) { + const { + avatarLink, + avatar, + avatarAlt, + title, + body, + footer, + innerMedias, + ...rest + } = props; + const classes = useStyles(); + return ( +
+ +
+ {avatarAlt} +
+
+
+ {title !== undefined ? ( +

{title}

+ ) : null} + {body} +
{footer}
+ {innerMedias !== undefined + ? innerMedias.map((prop) => { + return prop; + }) + : null} +
+
+ ); +} + +Media.defaultProps = { + avatarLink: "#pablo", + avatarAlt: "...", +}; + +Media.propTypes = { + avatarLink: PropTypes.string, + avatar: PropTypes.string, + avatarAlt: PropTypes.string, + title: PropTypes.node, + body: PropTypes.node, + footer: PropTypes.node, + innerMedias: PropTypes.arrayOf(PropTypes.object), +}; diff --git a/src/components/NavPills/NavPills.js b/src/components/NavPills/NavPills.js new file mode 100644 index 0000000..fe0631a --- /dev/null +++ b/src/components/NavPills/NavPills.js @@ -0,0 +1,123 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Tab from "@material-ui/core/Tab"; +import Tabs from "@material-ui/core/Tabs"; + +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; + +import styles from "assets/jss/react-material/components/navPillsStyle"; + +const useStyles = makeStyles(styles); + +export default function NavPills(props) { + const [active, setActive] = React.useState(props.active); + const handleChange = (event, active) => { + setActive(active); + }; + const { tabs, color, horizontal, alignCenter } = props; + const classes = useStyles(); + const flexContainerClasses = classNames({ + [classes.flexContainer]: true, + [classes.horizontalDisplay]: horizontal !== undefined, + }); + const tabButtons = ( + + {tabs.map((prop, key) => { + var icon = {}; + if (prop.tabIcon !== undefined) { + icon["icon"] = ; + } + const pillsClasses = classNames({ + [classes.pills]: true, + [classes.horizontalPills]: horizontal !== undefined, + [classes.pillsWithIcons]: prop.tabIcon !== undefined, + }); + return ( + + ); + })} + + ); + const tabContent = ( +
+ {tabs.map((prop, key) => { + if (key === active) { + return ( +
+ {prop.tabContent} +
+ ); + } + return null; + })} +
+ ); + return horizontal !== undefined ? ( + + {tabButtons} + {tabContent} + + ) : ( +
+ {tabButtons} + {tabContent} +
+ ); +} + +NavPills.defaultProps = { + active: 0, + color: "primary", +}; + +NavPills.propTypes = { + // index of the default active pill + active: PropTypes.number, + tabs: PropTypes.arrayOf( + PropTypes.shape({ + tabButton: PropTypes.string, + tabIcon: PropTypes.object, + tabContent: PropTypes.node, + }) + ).isRequired, + color: PropTypes.oneOf([ + "primary", + "warning", + "danger", + "success", + "info", + "rose", + ]), + horizontal: PropTypes.shape({ + tabsGrid: PropTypes.object, + contentGrid: PropTypes.object, + }), + alignCenter: PropTypes.bool, +}; diff --git a/src/components/PageChange/PageChange.js b/src/components/PageChange/PageChange.js new file mode 100644 index 0000000..1fd7894 --- /dev/null +++ b/src/components/PageChange/PageChange.js @@ -0,0 +1,54 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import CircularProgress from "@material-ui/core/CircularProgress"; + +// core components +import { + infoColor, + whiteColor, + title, +} from "assets/jss/react-material"; + + + +const useStyles = makeStyles({ + progress: { + color: infoColor[0], + width: "6rem !important", + height: "6rem !important", + }, + wrapperDiv: { + margin: "100px auto", + padding: "0px", + maxWidth: "360px", + textAlign: "center", + position: "relative", + zIndex: "9999", + top: "0", + }, + iconWrapper: { + display: "block", + }, + title: { + ...title, + color: whiteColor, + }, +}); + +export default function PageChange(props) { + const classes = useStyles(); + return ( +
+
+
+ +
+

+ Loading page contents for: {props.path} +

+
+
+ ); +} diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js new file mode 100644 index 0000000..159f1d2 --- /dev/null +++ b/src/components/Pagination/Pagination.js @@ -0,0 +1,69 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// nodejs library that concatenates classes +import classNames from "classnames"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Button from "@material-ui/core/Button"; + +import styles from "assets/jss/react-material/components/paginationStyle"; + +const useStyles = makeStyles(styles); + +export default function Pagination(props) { + const { pages, color, className } = props; + const classes = useStyles(); + const paginationClasses = classNames(classes.pagination, className); + return ( +
    + {pages.map((prop, key) => { + const paginationLink = classNames({ + [classes.paginationLink]: true, + [classes[color]]: prop.active, + [classes.disabled]: prop.disabled, + }); + return ( +
  • + {prop.onClick !== undefined ? ( + + ) : ( + + )} +
  • + ); + })} +
+ ); +} + +Pagination.defaultProps = { + color: "primary", +}; + +Pagination.propTypes = { + pages: PropTypes.arrayOf( + PropTypes.shape({ + active: PropTypes.bool, + disabled: PropTypes.bool, + text: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) + .isRequired, + onClick: PropTypes.func, + }) + ).isRequired, + color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]), + className: PropTypes.string, +}; diff --git a/src/components/Parallax/Parallax.js b/src/components/Parallax/Parallax.js new file mode 100644 index 0000000..e2c6057 --- /dev/null +++ b/src/components/Parallax/Parallax.js @@ -0,0 +1,75 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// core components +import styles from "assets/jss/react-material/components/parallaxStyle"; + +const useStyles = makeStyles(styles); + +export default function Parallax(props) { + let windowScrollTop; + if (window.innerWidth >= 768) { + windowScrollTop = window.pageYOffset / 3; + } else { + windowScrollTop = 0; + } + const [transform, setTransform] = React.useState( + "translate3d(0," + windowScrollTop + "px,0)" + ); + React.useEffect(() => { + if (window.innerWidth >= 768) { + window.addEventListener("scroll", resetTransform); + } + return function cleanup() { + if (window.innerWidth >= 768) { + window.removeEventListener("scroll", resetTransform); + } + }; + }); + const resetTransform = () => { + var windowScrollTop = window.pageYOffset / 3; + setTransform("translate3d(0," + windowScrollTop + "px,0)"); + }; + const { filter, className, children, style, image, small } = props; + const classes = useStyles(); + const parallaxClasses = classNames({ + [classes.parallax]: true, + [classes[filter + "Color"]]: filter !== undefined, + [classes.small]: small, + [className]: className !== undefined, + }); + return ( +
+ {children} +
+ ); +} + +Parallax.propTypes = { + className: PropTypes.string, + filter: PropTypes.oneOf([ + "primary", + "rose", + "dark", + "info", + "success", + "warning", + "danger", + ]), + children: PropTypes.node, + style: PropTypes.string, + image: PropTypes.string, + small: PropTypes.bool, +}; diff --git a/src/components/Snackbar/SnackbarContent.js b/src/components/Snackbar/SnackbarContent.js new file mode 100644 index 0000000..fd2bfa6 --- /dev/null +++ b/src/components/Snackbar/SnackbarContent.js @@ -0,0 +1,72 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Snack from "@material-ui/core/SnackbarContent"; +import IconButton from "@material-ui/core/IconButton"; +import Icon from "@material-ui/core/Icon"; +// @material-ui/icons +import Close from "@material-ui/icons/Close"; +// core components + +import styles from "assets/jss/react-material/components/snackbarContentStyle"; + +const useStyles = makeStyles(styles); + +export default function SnackbarContent(props) { + const { message, color, close, icon } = props; + const classes = useStyles(); + var action = []; + const closeAlert = () => { + setAlert(null); + }; + if (close !== undefined) { + action = [ + + + , + ]; + } + let snackIcon = null; + switch (typeof icon) { + case "object": + snackIcon = ; + break; + case "string": + snackIcon = {props.icon}; + break; + default: + snackIcon = null; + break; + } + const [alert, setAlert] = React.useState( + + {snackIcon} + {message} + {close !== undefined ? action : null} +
+ } + classes={{ + root: classes.root + " " + classes[color], + message: classes.message + " " + classes.container, + }} + /> + ); + return alert; +} + +SnackbarContent.propTypes = { + message: PropTypes.node.isRequired, + color: PropTypes.oneOf(["info", "success", "warning", "danger", "primary"]), + close: PropTypes.bool, + icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), +}; diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js new file mode 100644 index 0000000..eb7979e --- /dev/null +++ b/src/components/Table/Table.js @@ -0,0 +1,197 @@ +import React from "react"; +import cx from "classnames"; +import PropTypes from "prop-types"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; + +import styles from "assets/jss/react-material/components/tableStyle"; + +const useStyles = makeStyles(styles); + +export default function CustomTable(props) { + const { + tableHead, + tableData, + tableHeaderColor, + hover, + colorsColls, + coloredColls, + customCellClasses, + customClassesForCells, + striped, + tableShopping, + customHeadCellClasses, + customHeadClassesForCells, + } = props; + const classes = useStyles(); + return ( +
+ + {tableHead !== undefined ? ( + + + {tableHead.map((prop, key) => { + const tableCellClasses = + classes.tableHeadCell + + " " + + classes.tableCell + + " " + + cx({ + [customHeadCellClasses[ + customHeadClassesForCells.indexOf(key) + ]]: customHeadClassesForCells.indexOf(key) !== -1, + [classes.tableShoppingHead]: tableShopping, + }); + return ( + + {prop} + + ); + })} + + + ) : null} + + {tableData.map((prop, key) => { + var rowColor = ""; + var rowColored = false; + if (prop.color !== undefined) { + rowColor = prop.color; + rowColored = true; + prop = prop.data; + } + const tableRowClasses = cx({ + [classes.tableRowHover]: hover, + [classes[rowColor + "Row"]]: rowColored, + [classes.tableStripedRow]: striped && key % 2 === 0, + }); + if (prop.total) { + return ( + + + + Total + + + {prop.amount} + + {tableHead.length - (prop.colspan - 0 + 2) > 0 ? ( + + ) : null} + + ); + } + if (prop.purchase) { + return ( + + + + Total + + + {prop.amount} + + + {prop.col.text} + + + ); + } + return ( + + {prop.map((prop, key) => { + const tableCellClasses = + classes.tableCell + + " " + + cx({ + [classes[colorsColls[coloredColls.indexOf(key)]]]: + coloredColls.indexOf(key) !== -1, + [customCellClasses[customClassesForCells.indexOf(key)]]: + customClassesForCells.indexOf(key) !== -1, + }); + return ( + + {prop} + + ); + })} + + ); + })} + +
+
+ ); +} + +CustomTable.defaultProps = { + tableHeaderColor: "gray", + hover: false, + colorsColls: [], + coloredColls: [], + striped: false, + customCellClasses: [], + customClassesForCells: [], + customHeadCellClasses: [], + customHeadClassesForCells: [], +}; + +CustomTable.propTypes = { + tableHeaderColor: PropTypes.oneOf([ + "warning", + "primary", + "danger", + "success", + "info", + "rose", + "gray", + ]), + tableHead: PropTypes.arrayOf(PropTypes.string), + // Of(PropTypes.arrayOf(PropTypes.node)) || Of(PropTypes.object), + tableData: PropTypes.array, + hover: PropTypes.bool, + coloredColls: PropTypes.arrayOf(PropTypes.number), + // Of(["warning","primary","danger","success","info","rose","gray"]) - colorsColls + colorsColls: PropTypes.array, + customCellClasses: PropTypes.arrayOf(PropTypes.string), + customClassesForCells: PropTypes.arrayOf(PropTypes.number), + customHeadCellClasses: PropTypes.arrayOf(PropTypes.string), + customHeadClassesForCells: PropTypes.arrayOf(PropTypes.number), + striped: PropTypes.bool, + // this will cause some changes in font + tableShopping: PropTypes.bool, +}; diff --git a/src/components/Typography/Danger.js b/src/components/Typography/Danger.js new file mode 100644 index 0000000..eeef79a --- /dev/null +++ b/src/components/Typography/Danger.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Danger(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Danger.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Info.js b/src/components/Typography/Info.js new file mode 100644 index 0000000..2ba0511 --- /dev/null +++ b/src/components/Typography/Info.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Info(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Info.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Muted.js b/src/components/Typography/Muted.js new file mode 100644 index 0000000..ba4409b --- /dev/null +++ b/src/components/Typography/Muted.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Muted(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Muted.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Primary.js b/src/components/Typography/Primary.js new file mode 100644 index 0000000..18c86ef --- /dev/null +++ b/src/components/Typography/Primary.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Primary(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Primary.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Quote.js b/src/components/Typography/Quote.js new file mode 100644 index 0000000..c94110d --- /dev/null +++ b/src/components/Typography/Quote.js @@ -0,0 +1,38 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Quote(props) { + const { text, author, authorClassName, textClassName } = props; + const classes = useStyles(); + const quoteClasses = classNames(classes.defaultFontStyle, classes.quote); + const quoteTextClasses = classNames({ + [classes.quoteText]: true, + [textClassName]: textClassName !== undefined, + }); + const quoteAuthorClasses = classNames({ + [classes.quoteAuthor]: true, + [authorClassName]: authorClassName !== undefined, + }); + return ( +
+

{text}

+ {author} +
+ ); +} + +Quote.propTypes = { + text: PropTypes.node, + author: PropTypes.node, + textClassName: PropTypes.string, + authorClassName: PropTypes.string, +}; diff --git a/src/components/Typography/Rose.js b/src/components/Typography/Rose.js new file mode 100644 index 0000000..2be61a2 --- /dev/null +++ b/src/components/Typography/Rose.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Rose(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Rose.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Small.js b/src/components/Typography/Small.js new file mode 100644 index 0000000..80aac1a --- /dev/null +++ b/src/components/Typography/Small.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Small(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Small.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Success.js b/src/components/Typography/Success.js new file mode 100644 index 0000000..64d8d7d --- /dev/null +++ b/src/components/Typography/Success.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Success(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Success.propTypes = { + children: PropTypes.node, +}; diff --git a/src/components/Typography/Warning.js b/src/components/Typography/Warning.js new file mode 100644 index 0000000..2ecba1d --- /dev/null +++ b/src/components/Typography/Warning.js @@ -0,0 +1,23 @@ +import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// core components +import styles from "assets/jss/react-material/components/typographyStyle"; + +const useStyles = makeStyles(styles); + +export default function Warning(props) { + const { children } = props; + const classes = useStyles(); + return ( +
+ {children} +
+ ); +} + +Warning.propTypes = { + children: PropTypes.node, +}; diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..9ef4acb --- /dev/null +++ b/src/index.js @@ -0,0 +1,66 @@ +/*! + +========================================================= +* React Material - v2.0.0 +========================================================= + +* Product Page: https://www.weenspace.com/product/react-material +* Copyright 2021 WeenSpace (https://www.weenspace.com) + +* Coded by WeenSpace + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/ +import React from "react"; +import ReactDOM from "react-dom"; +import { createBrowserHistory } from "history"; +import { Router, Route, Switch } from "react-router"; + +import "assets/scss/react-material.scss?v=1.0.0"; + +// pages for this product +import AboutUsPage from "views/AboutUsPage/AboutUsPage"; +import BlogPostPage from "views/BlogPostPage/BlogPostPage"; +import BlogPostsPage from "views/BlogPostsPage/BlogPostsPage"; +import ComponentsPage from "views/ComponentsPage/ComponentsPage"; +import ContactUsPage from "views/ContactUsPage/ContactUsPage"; +import EcommercePage from "views/EcommercePage/EcommercePage"; +import LandingPage from "views/LandingPage/LandingPage"; +import LoginPage from "views/LoginPage/LoginPage"; +import PresentationPage from "views/PresentationPage/PresentationPage"; +import PricingPage from "views/PricingPage/PricingPage"; +import ProfilePage from "views/ProfilePage/ProfilePage"; +import ProductPage from "views/ProductPage/ProductPage"; +import SectionsPage from "views/SectionsPage/SectionsPage"; +import ShoppingCartPage from "views/ShoppingCartPage/ShoppingCartPage"; +import SignupPage from "views/SignupPage/SignupPage"; +import ErrorPage from "views/ErrorPage/ErrorPage"; + +var hist = createBrowserHistory(); + +ReactDOM.render( + + + + + + + + + + + + + + + + + + + + , + document.getElementById("root") +); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/views/AboutUsPage/AboutUsPage.js b/src/views/AboutUsPage/AboutUsPage.js new file mode 100644 index 0000000..3639693 --- /dev/null +++ b/src/views/AboutUsPage/AboutUsPage.js @@ -0,0 +1,140 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Parallax from "components/Parallax/Parallax"; +import Footer from "components/Footer/Footer"; +// sections for this page +import HeaderLinks from "components/Header/HeaderLinks"; +import SectionDescription from "views/AboutUsPage/Sections/SectionDescription"; +import SectionTeam from "views/AboutUsPage/Sections/SectionTeam"; +import SectionServices from "views/AboutUsPage/Sections/SectionServices"; +import SectionOffice from "views/AboutUsPage/Sections/SectionOffice"; +import SectionContact from "views/AboutUsPage/Sections/SectionContact"; + +import aboutUsStyle from "assets/jss/react-material/views/aboutUsStyle"; + +const useStyles = makeStyles(aboutUsStyle); + +export default function AboutUsPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 300, + color: "info", + }} + /> + +
+ + +

About Us

+

+ Meet the amazing team behind this project and find out more + about how we work. +

+
+
+
+
+
+
+ + + + + +
+
+
+ } + /> + + ); +} diff --git a/src/views/AboutUsPage/Sections/SectionContact.js b/src/views/AboutUsPage/Sections/SectionContact.js new file mode 100644 index 0000000..dcb775d --- /dev/null +++ b/src/views/AboutUsPage/Sections/SectionContact.js @@ -0,0 +1,142 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import FormControl from "@material-ui/core/FormControl"; +import MenuItem from "@material-ui/core/MenuItem"; +import Select from "@material-ui/core/Select"; +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import CustomInput from "components/CustomInput/CustomInput"; +import Button from "components/CustomButtons/Button"; + +import contactStyle from "assets/jss/react-material/views/aboutUsSections/contactStyle"; + +const useStyles = makeStyles(contactStyle); + +export default function SectionContact() { + const [specialitySelect, setSpecialitySelect] = React.useState("1"); + const handleSpeciality = (event) => { + setSpecialitySelect(event.target.value); + }; + const classes = useStyles(); + return ( +
+ + +

+ Want to work with us? +

+

+ Divide details about your product or agency work into parts. Write a + few lines about each one and contact us about any further + collaboration. We will get back to you in a couple of hours. +

+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ ); +} diff --git a/src/views/AboutUsPage/Sections/SectionDescription.js b/src/views/AboutUsPage/Sections/SectionDescription.js new file mode 100644 index 0000000..a22ba4f --- /dev/null +++ b/src/views/AboutUsPage/Sections/SectionDescription.js @@ -0,0 +1,35 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import descriptionStyle from "assets/jss/react-material/views/aboutUsSections/descriptionStyle"; + +const useStyles = makeStyles(descriptionStyle); + +export default function SectionDescription() { + const classes = useStyles(); + return ( +
+ + +
+ This is the paragraph where you can write more details about your + product. Keep you user engaged by providing meaningful information. + Remember that by this time, the user is curious, otherwise he wouldn + {"'"}t scroll to get here. Add a button if you want the user to see + more. +
+
+
+
+ ); +} diff --git a/src/views/AboutUsPage/Sections/SectionOffice.js b/src/views/AboutUsPage/Sections/SectionOffice.js new file mode 100644 index 0000000..9b8e0f1 --- /dev/null +++ b/src/views/AboutUsPage/Sections/SectionOffice.js @@ -0,0 +1,98 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import officeStyle from "assets/jss/react-material/views/aboutUsSections/officeStyle"; + +// office +import office1 from "assets/img/examples/office1.jpg"; +import office2 from "assets/img/examples/office2.jpg"; +import office3 from "assets/img/examples/office3.jpg"; +import office4 from "assets/img/examples/office4.jpg"; +import office5 from "assets/img/examples/office5.jpg"; + +const useStyles = makeStyles(officeStyle); + +export default function SectionOffice() { + const classes = useStyles(); + return ( +
+ + +

Our office is our second home

+

+ Here are some pictures from our office. You can see the place looks + like a palace and is fully equiped with everything you need to get + the job done. +

+
+
+ + + office1 + + + office2 + + + office3 + + + office4 + + + office5 + + +
+ ); +} diff --git a/src/views/AboutUsPage/Sections/SectionServices.js b/src/views/AboutUsPage/Sections/SectionServices.js new file mode 100644 index 0000000..0ce1252 --- /dev/null +++ b/src/views/AboutUsPage/Sections/SectionServices.js @@ -0,0 +1,94 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import Gesture from "@material-ui/icons/Gesture"; +import Build from "@material-ui/icons/Build"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; + +import servicesStyle from "assets/jss/react-material/views/aboutUsSections/servicesStyle"; + +const useStyles = makeStyles(servicesStyle); + +export default function SectionServices() { + const classes = useStyles(); + return ( +
+ + +

We build awesome products

+
+ This is the paragraph where you can write more details about your + product. Keep you user engaged by providing meaningful information. +
+
+
+ + + +

+ The moment you use Material Kit, you know you’ve never felt + anything like it. With a single use, this powerfull UI Kit + lets you do more than ever before.{" "} +

+ Find more... + + } + icon={Gesture} + iconColor="rose" + /> +
+ + +

+ Divide details about your product or agency work into parts. + Write a few lines about each one. A paragraph describing a + feature will be enough.{" "} +

+ Find more... + + } + icon={Build} + iconColor="rose" + /> +
+ + +

+ Divide details about your product or agency work into parts. + Write a few lines about each one. A paragraph describing a + feature will be enough.{" "} +

+ Find more... + + } + icon="mode_edit" + iconColor="rose" + /> +
+
+
+ ); +} diff --git a/src/views/AboutUsPage/Sections/SectionTeam.js b/src/views/AboutUsPage/Sections/SectionTeam.js new file mode 100644 index 0000000..0ccb7e2 --- /dev/null +++ b/src/views/AboutUsPage/Sections/SectionTeam.js @@ -0,0 +1,170 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardAvatar from "components/Card/CardAvatar"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import Button from "components/CustomButtons/Button"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import teamStyle from "assets/jss/react-material/views/aboutUsSections/teamStyle"; + +import FaceMarc from "assets/img/faces/marc.jpg"; +import FaceChristian from "assets/img/faces/christian.jpg"; +import FaceKendall from "assets/img/faces/kendall.jpg"; +import FaceAvatar from "assets/img/faces/avatar.jpg"; + +const useStyles = makeStyles(teamStyle); + +export default function SectionTeam() { + const classes = useStyles(); + return ( +
+ + +

We are nerd rockstars

+
+ This is the paragraph where you can write more details about your + team. Keep you user engaged by providing meaningful information. +
+
+
+ + + + + + profile-pic + + + +

Alec Thompson

+
CEO / Co-Founder
+

+ And I love you like Kanye loves Kanye. We need to restart the + human foundation. +

+
+ + + + + +
+
+ + + + + profile-pic + + + +

Tania Andrew

+
DESIGNER
+

+ Don{"'"}t be scared of the truth because we need to restart the + human foundation. And I love you like Kanye loves Kanye. +

+
+ + + + + +
+
+ + + + + profile-pic + + + +

Christian Mike

+
Web Developer
+

+ I love you like Kanye loves Kanye. Don{"'"}t be scared of the + truth because we need to restart the human foundation. +

+
+ + + + +
+
+ + + + + profile-pic + + + +

Rebecca Stormvile

+
WEB DEVELOPER
+

+ And I love you like Kanye loves Kanye. We really need to restart + the human foundation. +

+
+ + + + + +
+
+
+
+ ); +} diff --git a/src/views/BlogPostPage/BlogPostPage.js b/src/views/BlogPostPage/BlogPostPage.js new file mode 100644 index 0000000..0aebcce --- /dev/null +++ b/src/views/BlogPostPage/BlogPostPage.js @@ -0,0 +1,133 @@ +/*eslint-disable*/ import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import FormatAlignLeft from "@material-ui/icons/FormatAlignLeft"; +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Parallax from "components/Parallax/Parallax"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +// sections for this page +import SectionText from "./Sections/SectionText"; +import SectionBlogInfo from "./Sections/SectionBlogInfo"; +import SectionComments from "./Sections/SectionComments"; +import SectionSimilarStories from "./Sections/SectionSimilarStories"; + +import blogPostPageStyle from "assets/jss/react-material/views/blogPostPageStyle"; + +const useStyles = makeStyles(blogPostPageStyle); + +export default function BlogPostPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 300, + color: "info", + }} + /> + +
+ + +

+ How We Built the Most Successful Castle Ever +

+

+ The last 48 hours of my life were total madness. This is what I + did. +

+
+ +
+
+
+
+
+
+ + + +
+
+ +
+ } + /> + + ); +} diff --git a/src/views/BlogPostPage/Sections/SectionBlogInfo.js b/src/views/BlogPostPage/Sections/SectionBlogInfo.js new file mode 100644 index 0000000..9f4ecbd --- /dev/null +++ b/src/views/BlogPostPage/Sections/SectionBlogInfo.js @@ -0,0 +1,73 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Badge from "components/Badge/Badge"; +import Button from "components/CustomButtons/Button"; +import Card from "components/Card/Card"; +import CardAvatar from "components/Card/CardAvatar"; + +import profileImage from "assets/img/faces/card-profile1-square.jpg"; + +import sectionBlogInfoStyle from "assets/jss/react-material/views/blogPostSections/sectionBlogInfoStyle"; + +const useStyles = makeStyles(sectionBlogInfoStyle); + +export default function SectionBlogInfo() { + const classes = useStyles(); + return ( +
+ + + + +
+ Tags: + Photography + Stories + Castle +
+
+ + + + + +
+
+ + + + + ... + + + +

Alec Thompson

+

+ I{"'"}ve been trying to figure out the bed design for the + master bedroom at our Hidden Hills compound...I like good + music from Youtube. +

+
+ + + +
+
+
+
+
+ ); +} diff --git a/src/views/BlogPostPage/Sections/SectionComments.js b/src/views/BlogPostPage/Sections/SectionComments.js new file mode 100644 index 0000000..15771bb --- /dev/null +++ b/src/views/BlogPostPage/Sections/SectionComments.js @@ -0,0 +1,182 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Tooltip from "@material-ui/core/Tooltip"; +// @material-ui/icons +import Reply from "@material-ui/icons/Reply"; +import Favorite from "@material-ui/icons/Favorite"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Media from "components/Media/Media"; +import Button from "components/CustomButtons/Button"; +import CustomInput from "components/CustomInput/CustomInput"; + +import profile4 from "assets/img/faces/card-profile4-square.jpg"; +import profile1 from "assets/img/faces/card-profile1-square.jpg"; +import profile6 from "assets/img/faces/card-profile6-square.jpg"; + +import sectionCommentsStyle from "assets/jss/react-material/views/blogPostSections/sectionCommentsStyle"; + +const useStyles = makeStyles(sectionCommentsStyle); + +export default function SectionComments() { + const classes = useStyles(); + return ( +
+ + +
+

3 Comments

+ + Tina Andrew Ā· 7 minutes ago + + } + body={ +

+ Chance too good. God level bars. I{"'"}m so proud of + @LifeOfDesiigner #1 song in the country. Panda! Don{"'"}t be + scared of the truth because we need to restart the human + foundation in truth I stand with the most humility. We are so + blessed! +

+ } + footer={ +
+ + + + + +
+ } + /> + + John Camber Ā· Yesterday + + } + body={ + +

+ Hello guys, nice to have you on the platform! There will be + a lot of great stuff coming soon. We will keep you posted + for the latest news. +

+

+ Don{"'"}t forget, You{"'"}re Awesome! +

+
+ } + footer={ +
+ + + + + +
+ } + innerMedias={[ + + Tina Andrew Ā· 12 Hours Ago + + } + body={ + +

+ Hello guys, nice to have you on the platform! There will + be a lot of great stuff coming soon. We will keep you + posted for the latest news. +

+

+ Don{"'"}t forget, You{"'"}re Awesome! +

+
+ } + footer={ + + + + } + />, + ]} + /> +
+

Post your comment

+ + } + footer={ + + } + /> +
+
+
+ ); +} diff --git a/src/views/BlogPostPage/Sections/SectionSimilarStories.js b/src/views/BlogPostPage/Sections/SectionSimilarStories.js new file mode 100644 index 0000000..b780721 --- /dev/null +++ b/src/views/BlogPostPage/Sections/SectionSimilarStories.js @@ -0,0 +1,141 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import TrendingUp from "@material-ui/icons/TrendingUp"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import Info from "components/Typography/Info"; +import Success from "components/Typography/Success"; +import Danger from "components/Typography/Danger"; + +import blog6 from "assets/img/examples/blog6.jpg"; +import blog8 from "assets/img/examples/blog8.jpg"; +import blog7 from "assets/img/examples/blog7.jpg"; + +import sectionSimilarStoriesStyle from "assets/jss/react-material/views/blogPostSections/sectionSimilarStoriesStyle"; + +const useStyles = makeStyles(sectionSimilarStoriesStyle); + +export default function SectionSimilarStories() { + const classes = useStyles(); + return ( +
+
+ + +

+ Similar Stories +

+
+ + + + + + ... + +
+ + + +
ENTERPRISE
+
+

+ + Autodesk looks to future of 3D printing with Project + Escher + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. + Read More +

+
+ + + + + + + ... + +
+ + + +
STARTUPS
+
+

+ + Lyft launching cross-platform service this week + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. + Read More +

+
+ + + + + + + ... + +
+ + + +
+ ENTERPRISE +
+
+

+ + 6 insights into the French Fashion landscape + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. + Read More +

+
+ + + + + +
+
+ ); +} diff --git a/src/views/BlogPostPage/Sections/SectionText.js b/src/views/BlogPostPage/Sections/SectionText.js new file mode 100644 index 0000000..80831da --- /dev/null +++ b/src/views/BlogPostPage/Sections/SectionText.js @@ -0,0 +1,99 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Quote from "components/Typography/Quote"; +// core components + +import blog4 from "assets/img/examples/blog4.jpg"; +import blog3 from "assets/img/examples/blog3.jpg"; +import blog1 from "assets/img/examples/blog1.jpg"; + +import sectionTextStyle from "assets/jss/react-material/views/blogPostSections/sectionTextStyle"; + +const useStyles = makeStyles(sectionTextStyle); + +export default function SectionText() { + const classes = useStyles(); + const imgClasses = classNames( + classes.imgRaised, + classes.imgRounded, + classes.imgFluid + ); + return ( +
+ + +

+ The Castle Looks Different at Night... +

+

+ This is the paragraph where you can write more details about your + product. Keep you user engaged by providing meaningful information. + Remember that by this time, the user is curious, otherwise he wouldn + {"'"}t scroll to get here. Add a button if you want the user to see + more. We are here to make life better. +
+
+ And now I look and look around and there’s so many Kanyes I{"'"}ve + been trying to figure out the bed design for the master bedroom at + our Hidden Hills compound... and thank you for turning my personal + jean jacket into a couture piece. +

+ +
+ + + + ... + + + ... + + + ... + + + + +

Rest of the Story:

+

+ We are here to make life better. And now I look and look around and + there’s so many Kanyes I{"'"}ve been trying to figure out the bed + design for the master bedroom at our Hidden Hills compound... and + thank you for turning my personal jean jacket into a couture piece. +
I speak yell scream directly at the old guard on behalf of the + future. daytime All respect prayers and love to Phife’s family Thank + you for so much inspiration. +

+

+ Thank you Anna for the invite thank you to the whole Vogue team And + I love you like Kanye loves Kanye Pand Pand Panda I{"'"}ve been + trying to figure out the bed design for the master bedroom at our + Hidden Hills compound...The Pablo pop up was almost a pop up of + influence. All respect prayers and love to Phife’s family Thank you + for so much inspiration daytime I love this new Ferg album! The Life + of Pablo is now available for purchase I have a dream. Thank you to + everybody who made The Life of Pablo the number 1 album in the + world! I{"'"}m so proud of the nr #1 song in the country. Panda! + Good music 2016! +

+

+ I love this new Ferg album! The Life of Pablo is now available for + purchase I have a dream. Thank you to everybody who made The Life of + Pablo the number 1 album in the world! I{"'"}m so proud of the nr #1 + song in the country. Panda! Good music 2016! +

+
+
+
+ ); +} diff --git a/src/views/BlogPostsPage/BlogPostsPage.js b/src/views/BlogPostsPage/BlogPostsPage.js new file mode 100644 index 0000000..35fbde9 --- /dev/null +++ b/src/views/BlogPostsPage/BlogPostsPage.js @@ -0,0 +1,122 @@ +/*eslint-disable*/ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Parallax from "components/Parallax/Parallax"; +// sections for this page +import SectionPills from "./Sections/SectionPills"; +import SectionInterested from "./Sections/SectionInterested"; +import SectionImage from "./Sections/SectionImage"; +import SubscribeLine from "./Sections/SubscribeLine"; + +import blogPostsPageStyle from "assets/jss/react-material/views/blogPostsPageStyle"; + +const useStyles = makeStyles(blogPostsPageStyle); + +export default function BlogPostsPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 400, + color: "info", + }} + /> + +
+ + +

+ A Place for Entrepreneurs to Share and Discover New Stories +

+
+
+
+
+
+
+ + +
+ + +
+
+ } + /> +
+ ); +} diff --git a/src/views/BlogPostsPage/Sections/SectionImage.js b/src/views/BlogPostsPage/Sections/SectionImage.js new file mode 100644 index 0000000..c18dace --- /dev/null +++ b/src/views/BlogPostsPage/Sections/SectionImage.js @@ -0,0 +1,112 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import Muted from "components/Typography/Muted"; +import Button from "components/CustomButtons/Button"; + +import bg10 from "assets/img/bg10.jpg"; + +import cardProfile1 from "assets/img/faces/card-profile1-square.jpg"; +import cardProfile4 from "assets/img/faces/card-profile4-square.jpg"; + +import sectionImageStyle from "assets/jss/react-material/views/blogPostsSections/sectionImageStyle"; + +const useStyles = makeStyles(sectionImageStyle); + +export default function SectionImage() { + const classes = useStyles(); + return ( +
+
+ + + + + + + + ... + + + + + +

Alec Thompson

+ +
AUTHOR OF THE MONTH
+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth... +

+
+ + + + + +
+
+
+
+ + + + + + + ... + + + + + +

Kendall Andrew

+ +
AUTHOR OF THE WEEK
+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth... +

+
+ + + + + + +
+
+
+
+
+
+
+ ); +} diff --git a/src/views/BlogPostsPage/Sections/SectionInterested.js b/src/views/BlogPostsPage/Sections/SectionInterested.js new file mode 100644 index 0000000..ef576db --- /dev/null +++ b/src/views/BlogPostsPage/Sections/SectionInterested.js @@ -0,0 +1,134 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import TrendingUp from "@material-ui/icons/TrendingUp"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import Info from "components/Typography/Info"; +import Success from "components/Typography/Success"; +import Danger from "components/Typography/Danger"; + +import bg5 from "assets/img/bg5.jpg"; +import blog5 from "assets/img/examples/blog5.jpg"; +import blog6 from "assets/img/examples/blog6.jpg"; + +import sectionInterestedStyle from "assets/jss/react-material/views/blogPostsSections/sectionInterestedStyle"; + +const useStyles = makeStyles(sectionInterestedStyle); + +export default function SectionInterested() { + const classes = useStyles(); + return ( +
+

+ You may also be interested in +

+
+ + + + + + ... + +
+ + + +
ENTERPRISE
+
+

+ + Autodesk looks to future of 3D printing with Project Escher + +

+

+ Like so many organizations these days, Autodesk is a company in + transition. It was until recently a traditional boxed software + company selling licenses. + Read More +

+
+ + + + + + + ... + +
+ + + +
STARTUPS
+
+

+ + Lyft launching cross-platform service this week + +

+

+ Like so many organizations these days, Autodesk is a company in + transition. It was until recently a traditional boxed software + company selling licenses. + Read More +

+
+ + + + + + + ... + +
+ + + +
+ ENTERPRISE +
+
+

+ + 6 insights into the French Fashion landscape + +

+

+ Like so many organizations these days, Autodesk is a company in + transition. It was until recently a traditional boxed software + company selling licenses. + Read More +

+
+ + + +
+ ); +} diff --git a/src/views/BlogPostsPage/Sections/SectionPills.js b/src/views/BlogPostsPage/Sections/SectionPills.js new file mode 100644 index 0000000..df80580 --- /dev/null +++ b/src/views/BlogPostsPage/Sections/SectionPills.js @@ -0,0 +1,143 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Tooltip from "@material-ui/core/Tooltip"; +// @material-ui/icons +import FormatAlignLeft from "@material-ui/icons/FormatAlignLeft"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import NavPills from "components/NavPills/NavPills"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import Button from "components/CustomButtons/Button"; + +import office2 from "assets/img/examples/office2.jpg"; +import blog8 from "assets/img/examples/blog8.jpg"; +import cardProject6 from "assets/img/examples/card-project6.jpg"; + +import sectionPillsStyle from "assets/jss/react-material/views/blogPostsSections/sectionPillsStyle"; + +const useStyles = makeStyles(sectionPillsStyle); + +export default function SectionPills() { + const classes = useStyles(); + return ( +
+ + + +
+ + + + + + +
WORLDS
+ +

+ The Best Productivity Apps on Market +

+
+

+ Don{"'"}t be scared of the truth because we need to restart the + human foundation in truth And I love you like Kanye loves Kanye + I love Rick Owens’ bed design but the back is... +

+ +
+
+
+ + + +
BUSINESS
+ +

+ Working on Wallstreet is Not So Easy +

+
+

+ Don{"'"}t be scared of the truth because we need to restart the + human foundation in truth And I love you like Kanye loves Kanye + I love Rick Owens’ bed design but the back is... +

+ +
+
+
+ + + +
MARKETING
+ +

+ 0 to 100.000 Customers in 6 months +

+
+

+ Don{"'"}t be scared of the truth because we need to restart the + human foundation in truth And I love you like Kanye loves Kanye + I love Rick Owens’ bed design but the back is... +

+ + + + +
+
+
+
+
+ ); +} diff --git a/src/views/BlogPostsPage/Sections/SubscribeLine.js b/src/views/BlogPostsPage/Sections/SubscribeLine.js new file mode 100644 index 0000000..f32b308 --- /dev/null +++ b/src/views/BlogPostsPage/Sections/SubscribeLine.js @@ -0,0 +1,73 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import InputAdornment from "@material-ui/core/InputAdornment"; +// @material-ui/icons +import Mail from "@material-ui/icons/Mail"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import Button from "components/CustomButtons/Button"; +import CustomInput from "components/CustomInput/CustomInput"; + +import sectionSubscribeLineStyle from "assets/jss/react-material/views/blogPostsSections/sectionSubscribeLineStyle"; + +const useStyles = makeStyles(sectionSubscribeLineStyle); + +export default function SubscribeLine() { + const classes = useStyles(); + return ( +
+
+ + +

Get Tips & Tricks every Week!

+

+ Join our newsletter and get news in your inbox every week! We hate + spam too, so no worries about this. +

+
+ + + +
+ + + + + + ), + placeholder: "Your Email...", + }} + /> + + + + + +
+
+
+
+
+
+
+ ); +} diff --git a/src/views/ComponentsPage/ComponentsPage.js b/src/views/ComponentsPage/ComponentsPage.js new file mode 100644 index 0000000..c5303c6 --- /dev/null +++ b/src/views/ComponentsPage/ComponentsPage.js @@ -0,0 +1,343 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Parallax from "components/Parallax/Parallax"; +import HeaderLinks from "components/Header/HeaderLinks"; +// sections for this page +import SectionBasics from "./Sections/SectionBasics"; +import SectionNavbars from "./Sections/SectionNavbars"; +import SectionTabs from "./Sections/SectionTabs"; +import SectionPills from "./Sections/SectionPills"; +import SectionNotifications from "./Sections/SectionNotifications"; +import SectionPreFooter from "./Sections/SectionPreFooter"; +import SectionFooter from "./Sections/SectionFooter"; +import SectionTypography from "./Sections/SectionTypography"; +import SectionCards from "./Sections/SectionCards"; +import SectionJavascript from "./Sections/SectionJavascript"; +import SectionCarousel from "./Sections/SectionCarousel"; + +import componentsStyle from "assets/jss/react-material/views/componentsStyle"; + +const useStyles = makeStyles(componentsStyle); + +export default function Components() { + React.useEffect(() => { + var href = window.location.href.substring( + window.location.href.lastIndexOf("#") + 1 + ); + if (window.location.href.lastIndexOf("#") > 0) { + document.getElementById(href).scrollIntoView(); + } + window.addEventListener("scroll", updateView); + updateView(); + return function cleanup() { + window.removeEventListener("scroll", updateView); + }; + }); + const easeInOutQuad = (t, b, c, d) => { + t /= d / 2; + if (t < 1) return (c / 2) * t * t + b; + t--; + return (-c / 2) * (t * (t - 2) - 1) + b; + }; + const updateView = () => { + var contentSections = document.getElementsByClassName("cd-section"); + var navigationItems = document + .getElementById("cd-vertical-nav") + .getElementsByTagName("a"); + + for (let i = 0; i < contentSections.length; i++) { + var activeSection = + parseInt(navigationItems[i].getAttribute("data-number"), 10) - 1; + if ( + contentSections[i].offsetTop - + window.innerHeight / 2 + + document.getElementById("main-panel").offsetTop < + window.pageYOffset && + contentSections[i].offsetTop + + contentSections[i].scrollHeight - + window.innerHeight / 2 + + document.getElementById("main-panel").offsetTop > + window.pageYOffset + ) { + navigationItems[activeSection].classList.add("is-selected"); + } else { + navigationItems[activeSection].classList.remove("is-selected"); + } + } + }; + const smoothScroll = (target) => { + var targetScroll = document.getElementById(target); + scrollTo(document.documentElement, targetScroll.offsetTop, 900); + }; + const scrollTo = (element, to, duration) => { + var start = element.scrollTop, + change = to - start + document.getElementById("main-panel").offsetTop, + currentTime = 0, + increment = 20; + + var animateScroll = function () { + currentTime += increment; + var val = easeInOutQuad(currentTime, start, change, duration); + element.scrollTop = val; + if (currentTime < duration) { + setTimeout(animateScroll, increment); + } + }; + animateScroll(); + }; + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 400, + color: "info", + }} + /> + +
+ + +
+

+ React Material{" "} + PRO +

+

All Components

+
+
+
+
+
+ +
+ + + + + +
+ + +
+ + + + +
+ +
+ } + /> +
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionBasics.js b/src/views/ComponentsPage/Sections/SectionBasics.js new file mode 100644 index 0000000..5106d29 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionBasics.js @@ -0,0 +1,1172 @@ +import React from "react"; +// plugin that creates slider +import Slider from "nouislider"; +// react component plugin for creating beatiful tags on an input +import TagsInput from "react-tagsinput"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import FormControl from "@material-ui/core/FormControl"; +import Checkbox from "@material-ui/core/Checkbox"; +import Radio from "@material-ui/core/Radio"; +import Switch from "@material-ui/core/Switch"; +import Select from "@material-ui/core/Select"; +import MenuItem from "@material-ui/core/MenuItem"; +import InputLabel from "@material-ui/core/InputLabel"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +import People from "@material-ui/icons/People"; +import Check from "@material-ui/icons/Check"; +import FiberManualRecord from "@material-ui/icons/FiberManualRecord"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +import CustomInput from "components/CustomInput/CustomInput"; +import CustomLinearProgress from "components/CustomLinearProgress/CustomLinearProgress"; +import Paginations from "components/Pagination/Pagination"; +import Badge from "components/Badge/Badge"; +import CustomDropdown from "components/CustomDropdown/CustomDropdown"; + +import basicsStyle from "assets/jss/react-material/views/componentsSections/basicsStyle"; + +const useStyles = makeStyles(basicsStyle); + +export default function SectionBasics() { + const [checked, setChecked] = React.useState([24, 22]); + const [selectedEnabled, setSelectedEnabled] = React.useState("b"); + const [checkedA, setCheckedA] = React.useState(true); + const [checkedB, setCheckedB] = React.useState(false); + const [simpleSelect, setSimpleSelect] = React.useState(""); + const [multipleSelect, setMultipleSelect] = React.useState([]); + const [tags, setTags] = React.useState([ + "amsterdam", + "washington", + "sydney", + "beijing", + ]); + React.useEffect(() => { + if ( + !document + .getElementById("sliderRegular") + .classList.contains("noUi-target") + ) { + Slider.create(document.getElementById("sliderRegular"), { + start: [40], + connect: [true, false], + step: 1, + range: { min: 0, max: 100 }, + }); + } + if ( + !document.getElementById("sliderDouble").classList.contains("noUi-target") + ) { + Slider.create(document.getElementById("sliderDouble"), { + start: [20, 60], + connect: [false, true, false], + step: 1, + range: { min: 0, max: 100 }, + }); + } + return function cleanup() {}; + }); + const handleToggle = (value) => { + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + setChecked(newChecked); + }; + const handleSimple = (event) => { + setSimpleSelect(event.target.value); + }; + const handleMultiple = (event) => { + setMultipleSelect(event.target.value); + }; + const handleTags = (regularTags) => { + setTags(regularTags); + }; + const classes = useStyles(); + return ( +
+
+
+

Basic Elements

+
+
+
+

+ Buttons +
+ Pick your style +

+
+ + + + + + + + + +
+

+ Pick your size +

+
+ + + + + + + +
+

+ Pick your color +

+
+ + + + + + + + + + + +
+
+
+
+

Social Buttons

+
+ + +

+ Default +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+   +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+   +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+ Simple +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+   +

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+
+

Inputs

+
+ + + + + + + + + + + + + + + + + + ), + }} + /> + + + + + + ), + }} + /> + + +
+
+
+ + +
+

Checkboxes

+
+
+ handleToggle(21)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label, root: classes.labelRoot }} + label="Unchecked" + /> +
+
+ handleToggle(22)} + checked={checked.indexOf(22) !== -1 ? true : false} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label, root: classes.labelRoot }} + label="Checked" + /> +
+
+ } + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ + label: classes.label, + disabled: classes.disabledCheckboxAndRadio, + root: classes.labelRoot, + }} + label="Disabled Unchecked" + /> +
+
+ } + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ + label: classes.label, + disabled: classes.disabledCheckboxAndRadio, + root: classes.labelRoot, + }} + label="Disabled Checked" + /> +
+
+ +
+

Radio Buttons

+
+
+ setSelectedEnabled("a")} + value="a" + name="radio button enabled" + aria-label="A" + icon={ + + } + checkedIcon={ + + } + classes={{ + checked: classes.radio, + root: classes.radioRoot, + }} + /> + } + classes={{ + label: classes.label, + root: classes.labelRoot, + }} + label="First Radio" + /> +
+
+ setSelectedEnabled("b")} + value="b" + name="radio button enabled" + aria-label="B" + icon={ + + } + checkedIcon={ + + } + classes={{ + checked: classes.radio, + root: classes.radioRoot, + }} + /> + } + classes={{ + label: classes.label, + root: classes.labelRoot, + }} + label="Second Radio" + /> +
+
+ + } + checkedIcon={ + + } + classes={{ + checked: classes.radio, + disabled: classes.disabledCheckboxAndRadio, + root: classes.radioRoot, + }} + /> + } + classes={{ + label: classes.label, + root: classes.labelRoot, + }} + label="Disabled Unchecked Radio" + /> +
+
+ + } + checkedIcon={ + + } + classes={{ + checked: classes.radio, + disabled: classes.disabledCheckboxAndRadio, + root: classes.radioRoot, + }} + /> + } + classes={{ label: classes.label, root: classes.labelRoot }} + label="Disabled Checked Radio" + /> +
+
+ +
+

Toggle Buttons

+
+
+ setCheckedA(event.target.checked)} + value="checkedA" + classes={{ + switchBase: classes.switchBase, + checked: classes.switchChecked, + thumb: classes.switchIcon, + track: classes.switchBar, + }} + /> + } + classes={{ + label: classes.label, + root: classes.labelRoot, + }} + label="Toggle is on" + /> +
+
+ setCheckedB(event.target.checked)} + value="checkedB" + classes={{ + switchBase: classes.switchBase, + checked: classes.switchChecked, + thumb: classes.switchIcon, + track: classes.switchBar, + }} + /> + } + classes={{ + label: classes.label, + root: classes.labelRoot, + }} + label="Toggle is off" + /> +
+
+
+
+
+
+ + +
+

Customizable Select

+
+ + + + + Single Select + + + + + + + + Multiple Select + + + + + +
+ +
+

Dropdown & Dropup

+
+ + + , + ]} + />, + ]} + /> + + + + + + + + +
+
+
+
+
+ + +
+

Textarea

+
+ +
+ +
+

Tags

+
+ +
+
+
+
+ + +
+

Progress Bars

+
+ + + + + +
+ +
+

Pagination

+
+ + +
+
+
+
+ + +
+

Sliders

+
+
+
+
+ + +
+

Badges

+
+ default + primary + info + success + warning + danger + rose +
+ +
+
+
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionCards.js b/src/views/ComponentsPage/Sections/SectionCards.js new file mode 100644 index 0000000..277ecff --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionCards.js @@ -0,0 +1,1501 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Icon from "@material-ui/core/Icon"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +import Share from "@material-ui/icons/Share"; +import ChatBubble from "@material-ui/icons/ChatBubble"; +import Schedule from "@material-ui/icons/Schedule"; +import TrendingUp from "@material-ui/icons/TrendingUp"; +import Subject from "@material-ui/icons/Subject"; +import WatchLater from "@material-ui/icons/WatchLater"; +import People from "@material-ui/icons/People"; +import Business from "@material-ui/icons/Business"; +import Check from "@material-ui/icons/Check"; +import Close from "@material-ui/icons/Close"; +import Delete from "@material-ui/icons/Delete"; +import Bookmark from "@material-ui/icons/Bookmark"; +import Refresh from "@material-ui/icons/Refresh"; +import Receipt from "@material-ui/icons/Receipt"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import CardAvatar from "components/Card/CardAvatar"; +import Info from "components/Typography/Info"; +import Danger from "components/Typography/Danger"; +import Success from "components/Typography/Success"; +import Warning from "components/Typography/Warning"; +import Rose from "components/Typography/Rose"; +import Button from "components/CustomButtons/Button"; + +import styles from "assets/jss/react-material/views/componentsSections/sectionCards"; + +import cardBlog1 from "assets/img/examples/card-blog1.jpg"; +import cardBlog2 from "assets/img/examples/card-blog2.jpg"; +import cardBlog3 from "assets/img/examples/card-blog3.jpg"; +import cardBlog5 from "assets/img/examples/card-blog5.jpg"; +import cardBlog6 from "assets/img/examples/card-blog6.jpg"; +import cardProfile1 from "assets/img/examples/card-profile1.jpg"; +import cardProfile4 from "assets/img/examples/card-profile4.jpg"; +import blog1 from "assets/img/examples/blog1.jpg"; +import blog5 from "assets/img/examples/blog5.jpg"; +import blog6 from "assets/img/examples/blog6.jpg"; +import blog8 from "assets/img/examples/blog8.jpg"; +import avatar from "assets/img/faces/avatar.jpg"; +import christian from "assets/img/faces/christian.jpg"; +import marc from "assets/img/faces/marc.jpg"; +import office1 from "assets/img/examples/office1.jpg"; +import color1 from "assets/img/examples/color1.jpg"; +import color2 from "assets/img/examples/color2.jpg"; +import color3 from "assets/img/examples/color3.jpg"; + +const useStyles = makeStyles(styles); + +export default function SectionCards() { + const [activeRotate1, setActiveRotate1] = React.useState(""); + const [activeRotate2, setActiveRotate2] = React.useState(""); + const [activeRotate3, setActiveRotate3] = React.useState(""); + const classes = useStyles(); + React.useEffect(() => { + if (window) { + window.addEventListener("resize", addStylesForRotatingCards); + } + addStylesForRotatingCards(); + return function cleanup() { + if (window) { + window.removeEventListener("resize", addStylesForRotatingCards); + } + }; + }); + const addStylesForRotatingCards = () => { + var rotatingCards = document.getElementsByClassName(classes.cardRotate); + for (let i = 0; i < rotatingCards.length; i++) { + var rotatingCard = rotatingCards[i]; + var cardFront = rotatingCard.getElementsByClassName(classes.front)[0]; + var cardBack = rotatingCard.getElementsByClassName(classes.back)[0]; + cardFront.style.height = "unset"; + cardFront.style.width = "unset"; + cardBack.style.height = "unset"; + cardBack.style.width = "unset"; + var rotatingWrapper = rotatingCard.parentElement; + var cardWidth = rotatingCard.parentElement.offsetWidth; + var cardHeight = rotatingCard.children[0].children[0].offsetHeight; + rotatingWrapper.style.height = cardHeight + "px"; + rotatingWrapper.style["margin-bottom"] = 30 + "px"; + cardFront.style.height = "unset"; + cardFront.style.width = "unset"; + cardBack.style.height = "unset"; + cardBack.style.width = "unset"; + cardFront.style.height = cardHeight + 35 + "px"; + cardFront.style.width = cardWidth + "px"; + cardBack.style.height = cardHeight + 35 + "px"; + cardBack.style.width = cardWidth + "px"; + } + }; + return ( +
+
+
+ {/* BLOG CARDS START */} +
+
+
+

Cards

+

Blog Cards

+
+ + + + + e.preventDefault()}> + ... +
+ This Summer Will be Awesome +
+
+
+ + + +
FASHION
+
+
+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +
+
+ + + +
+ + Twitter +
+

+ e.preventDefault()}> + {'"'}You Don{"'"}t Have to Sacrifice Joy to Build a + Fabulous Business and Life{'"'} + +

+
+ + +
+ + 2.4K Ā· + + 45 +
+
+
+ + + + + +
+ TRENDING +
+
+

+ e.preventDefault()}> + To Grow Your Business Start Focusing on Your Employees + +

+
+ + +
+ + 345 Ā· + + 45 +
+
+
+ + + e.preventDefault()}> + ... + +
+ + + +
Legal
+
+

+ e.preventDefault()}> + 5 Common Legal Mistakes That Can Trip-Up Your Startup + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +

+
+ + +
+ 5 min read +
+
+ + + + + + e.preventDefault()}> + ... + +
+ + + +
+ TRENDING +
+
+

+ e.preventDefault()}> + To Grow Your Business Start Focusing on Your Employees + +

+
+ + +
+ 5 min read +
+
+ + + +
+ + TechCrunch +
+

+ e.preventDefault()}> + {'"'}Focus on Your Employees{'"'} + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +

+
+ +
+
+
+ + +
+
+ {/* BLOG CARDS END */} + {/* PROFILE CARDS START */} +
+
+
+

Profile Cards

+
+ + + + + e.preventDefault()}> + ... +
+ Tania Andrew +
+
+
+ + + +
WEB DESIGNER
+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +

+
+ + + + + + + + + + + e.preventDefault()}> + ... + +
+ + +

Alec Thompson

+
+ CEO / CO-FOUNDER +
+
+ + + + + + + + + + + e.preventDefault()}> + ... + + + +
+ CEO / CO-FOUNDER +
+

Alec Thompson

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +

+ +
+
+
+ +
+
+ {/* PROFILE CARDS END */} + {/* PRODUCT CARDS START */} +
+
+
+

Full Background Cards

+
+ + + + +
+ PRODUCTIVITY APPS +
+ e.preventDefault()}> +

+ The Best Productivity Apps on Market +

+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +

+ + +
+
+
+ + + +
MATERIALS
+ e.preventDefault()}> +

+ The Sculpture Where Details Matter +

+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design but + the back is... +

+ +
+
+
+
+
+
+ {/* PRODUCT CARDS END */} + {/* PRICING CARDS START */} +
+
+
+

Pricing Cards

+
+ + + + +
+ SMALL COMPANY +
+
+ +
+

+ $29 +

+

+ This is good if your company size is between 2 and 10 + Persons. +

+ +
+
+
+ + + +
+ +
+

+ $69 +

+

+ This is good if your company size is between 11 and 99 + Persons. +

+ +
+
+
+ + + +
PREMIUM
+

+ $89 +

+
    +
  • + 100 Projects +
  • +
  • + 5 Team Members +
  • +
  • + 55 Personal Contacts +
  • +
  • + 5.000 Messages +
  • +
+ +
+
+
+ + + + +
PLATINUM
+
+

+ $89 +

+
    +
  • + + + {" "} + Sharing Tools +
  • +
  • + + + {" "} + Design Tools +
  • +
  • + + + {" "} + Private Messages +
  • +
  • + + + {" "} + Personal Brand +
  • +
+ +
+
+
+
+
+
+ {/* PRICING CARDS END */} +
+ + {/* MORPHING CARDS START */} +
+
+
+

Morphing Cards

+

Rotating Cards

+
+ + +
+ +
+ +
+ Full Background Card +
+ e.preventDefault()}> +

+ This Background Card Will Rotate on Hover +

+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design + but the back is... +

+
+
+
+ +
Manage Post
+

+ As an Admin, you have shortcuts to edit, view or + delete the posts. +

+
+ + + +
+
+
+
+
+
+ +
+ +
+ + +
+ + TechCrunch +
+
+

+ e.preventDefault()}> + This Card is Doing a Full Rotation on Hover... + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design + but the back is... +

+
+
+
+ +
Do more...
+

+ You can read this article or share it with your + friends and family on different networks... +

+
+ + + + +
+
+
+
+
+
+ +
+ +
+ +
+ Dribbble +
+

+ e.preventDefault()}> + {'"'}Dribbble just acquired Crew, a very interesting + startup...{'"'} + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design + but the back is... +

+
+ + +
+ + 2.4K Ā· + + 45 +
+
+
+ +
+
+
+
+
+

Manual Rotating Cards

+
+ + +
+ +
+ + +
+ Manual Rotating + Card +
+
+

+ e.preventDefault()}> + {'"'}This card is doing a full rotation, click on + the rotate button{'"'} + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design + but the back is... +

+
+ +
+
+
+
+ +
Do more...
+

+ You can read this article or share it with your + friends and family on different networks... +

+
+ + + + +
+
+ +
+
+
+
+
+ +
+ +
+ +
+ Full Background Card +
+ e.preventDefault()}> +

+ This card is doing a full rotation, click on the + rotate button +

+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human... +

+
+ +
+
+
+
+ +
Manage Post
+

+ As an Admin, you have shortcuts to edit, view or + delete the posts. +

+
+ + + +
+
+ +
+
+
+
+
+
+ +
+ +
+ +
+ Manual Rotating Card +
+

+ e.preventDefault()}> + {'"'}This card is doing a full rotation, click on + the rotate button{'"'} + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you + like Kanye loves Kanye I love Rick Owens’ bed design + but the back is... +

+
+ +
+
+
+
+ +
Do more...
+

+ You can read this article or share it with your + friends and family on different networks... +

+
+ + + + +
+
+ +
+
+
+
+
+
+
+
+
+ {/* MORPHING CARDS END */} + {/* DYNAMIC COLORED SHADOWS START */} +
+ + +
+

Dynamic Shadowsā„¢

+

+ Material Kit PRO is coming with the famous colored shadows. + That means each image from the cards is getting an unique + color shadow. You don{"'"}t have to do anything to activate + them, just enjoy the new look of your website. +

+
+
+
+
+ + + + + e.preventDefault()}> + ... + +
+ + + +
DYNAMIC SHADOWS
+
+

+ e.preventDefault()}> + The image from this card is getting a yellow shadow + +

+
+ + + + + + e.preventDefault()}> + ... + +
+ + + +
DYNAMIC SHADOWS
+
+

+ e.preventDefault()}> + The image from this card is getting a pink shadow + +

+
+ + + + + + e.preventDefault()}> + ... + + + {/* DYNAMIC COLORED SHADOWS END */} +
+
+ {/* BLOG PLAIN CARDS START */} +
+
+
+

Plain Card

+
+ + + + + e.preventDefault()}> + ... +
+ This Summer Will be Awesome +
+
+
+ + + +
FASHION
+
+
+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you like + Kanye loves Kanye I love Rick Owens’ bed design but the + back is... +
+
+ + + +
+ + Twitter +
+

+ e.preventDefault()}> + {'"'}You Don{"'"}t Have to Sacrifice Joy to Build a + Fabulous Business and Life{'"'} + +

+
+ + +
+ + 2.4K Ā· + + 45 +
+
+
+ + + + + e.preventDefault()}> + ... + +
+ + + +
Legal
+
+

+ e.preventDefault()}> + 5 Common Legal Mistakes That Can Trip-Up Your Startup + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you like + Kanye loves Kanye I love Rick Owens’ bed design but the + back is... +

+
+ + +
+ 5 min read +
+
+ + + + + + e.preventDefault()}> + ... + +
+ + + +
+ TRENDING +
+
+

+ e.preventDefault()}> + To Grow Your Business Start Focusing on Your Employees + +

+
+ + +
+ 5 min read +
+
+ + + +
+ The Next Web +
+

+ e.preventDefault()}> + {'"'}Focus on Your Employees{'"'} + +

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you like + Kanye loves Kanye I love Rick Owens’ bed design but the + back is... +

+
+ +
+
+
+ + +
+
+ {/* BLOG PLAIN CARDS END */} + {/* PROFILE PLAIN CARDS START */} +
+
+ + + + + e.preventDefault()}> + ... +
+ Tania Andrew +
+
+
+ + + +
WEB DESIGNER
+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you like + Kanye loves Kanye I love Rick Owens’ bed design but the + back is... +

+
+ + + + + + + + + + + e.preventDefault()}> + ... + +
+ + +

Alec Thompson

+
+ CEO / CO-FOUNDER +
+
+ + + + + + + + + + + e.preventDefault()}> + ... + + + +
+ CEO / CO-FOUNDER +
+

Alec Thompson

+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth And I love you like + Kanye loves Kanye I love Rick Owens’ bed design but the + back is... +

+ +
+
+
+ +
+
+ {/* PROFILE PLAIN CARDS END */} +
+
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionCarousel.js b/src/views/ComponentsPage/Sections/SectionCarousel.js new file mode 100644 index 0000000..de5f12a --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionCarousel.js @@ -0,0 +1,76 @@ +import React from "react"; +// react component for creating beautiful carousel +import Carousel from "react-slick"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import LocationOn from "@material-ui/icons/LocationOn"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; + +import carouselStyle from "assets/jss/react-material/views/componentsSections/carouselStyle"; + +import image1 from "assets/img/bg.jpg"; +import image2 from "assets/img/bg2.jpg"; +import image3 from "assets/img/bg3.jpg"; + +const useStyles = makeStyles(carouselStyle); + +export default function SectionCarousel() { + const classes = useStyles(); + const settings = { + dots: true, + infinite: true, + speed: 1000, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + }; + return ( + + ); +} diff --git a/src/views/ComponentsPage/Sections/SectionContentAreas.js b/src/views/ComponentsPage/Sections/SectionContentAreas.js new file mode 100644 index 0000000..9587fa9 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionContentAreas.js @@ -0,0 +1,847 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Checkbox from "@material-ui/core/Checkbox"; +import Tooltip from "@material-ui/core/Tooltip"; +// @material-ui/core icons +import Person from "@material-ui/icons/Person"; +import Edit from "@material-ui/icons/Edit"; +import Close from "@material-ui/icons/Close"; +import Check from "@material-ui/icons/Check"; +import Remove from "@material-ui/icons/Remove"; +import Add from "@material-ui/icons/Add"; +import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; +import Reply from "@material-ui/icons/Reply"; +import Favorite from "@material-ui/icons/Favorite"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Table from "components/Table/Table"; +import Button from "components/CustomButtons/Button"; +import Media from "components/Media/Media"; +import CustomInput from "components/CustomInput/CustomInput"; +import Paginations from "components/Pagination/Pagination"; + +import style from "assets/jss/react-material/views/componentsSections/contentAreas"; + +import avatar from "assets/img/faces/avatar.jpg"; +import kendall from "assets/img/faces/kendall.jpg"; +import marc from "assets/img/faces/marc.jpg"; +import placeholder from "assets/img/placeholder.jpg"; +import product1 from "assets/img/product1.jpg"; +import product2 from "assets/img/product2.jpg"; +import product3 from "assets/img/product3.jpg"; + +const useStyles = makeStyles(style); + +export default function SectionContentAreas() { + const [checked, setChecked] = React.useState([1, 3, 5]); + const handleToggle = (value) => { + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + setChecked(newChecked); + }; + const classes = useStyles(); + const fillButtons = [ + { color: "info", icon: Person }, + { color: "success", icon: Edit }, + { color: "danger", icon: Close }, + ].map((prop, key) => { + return ( + + ); + }); + const simpleButtons = [ + { color: "info", icon: Person }, + { color: "success", icon: Edit }, + { color: "danger", icon: Close }, + ].map((prop, key) => { + return ( + + ); + }); + const roundButtons = [ + { color: "info", icon: Person }, + { color: "success", icon: Edit }, + { color: "danger", icon: Close }, + ].map((prop, key) => { + return ( + + ); + }); + return ( +
+

Content Areas

+
+
+

Tables

+
+ + +

Simple Table

+
+ +

+ Simple With Actions +

+ +

+ Striped With Checkboxes +

+
handleToggle(1)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + />, + "Moleskine Agenda", + "Office", + "25", + "€ 49", + "€ 1,225", + ], + [ + "2", + handleToggle(2)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + />, + "Stabilo Pen", + "Office", + "30", + "€ 10", + "€ 300", + ], + [ + "3", + handleToggle(3)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + />, + "A4 Paper Pack", + "Office", + "50", + "€ 10.99", + "€ 109", + ], + [ + "4", + handleToggle(4)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + />, + "Apple iPad", + "Communication", + "10", + "€ 499.00", + "€ 4,990", + ], + [ + "5", + handleToggle(5)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + />, + "Apple iPhone", + "Communication", + "10", + "€ 599.00", + "€ 5,999", + ], + { + total: true, + colspan: "5", + amount: ( + + €12,999 + + ), + }, + ]} + customCellClasses={[ + classes.textCenter, + classes.padding0, + classes.textRight, + classes.textRight, + ]} + customClassesForCells={[0, 1, 5, 6]} + customHeadCellClasses={[ + classes.textCenter, + classes.textRight, + classes.textRight, + ]} + customHeadClassesForCells={[0, 5, 6]} + /> + + + + +

Shopping Cart Table

+
+ +
+ ... + , + + + Spring Jacket + +
+ + by Dolce&Gabbana + +
, + "Red", + "M", + + € 549 + , + + 1{` `} +
+ + +
+
, + + € 549 + , + + + , + ], + [ +
+ ... +
, + + + Short Pants{" "} + +
+ by Gucci +
, + "Purple", + "M", + + € 499 + , + + 2{` `} +
+ + +
+
, + + € 998 + , + + + , + ], + [ +
+ ... +
, + + + Pencil Skirt + +
+ by Valentino +
, + "White", + "XL", + + € 799 + , + + 1{` `} +
+ + +
+
, + + € 799 + , + + + , + ], + { + purchase: true, + colspan: "3", + amount: ( + + €2,346 + + ), + col: { + colspan: 3, + text: ( + + ), + }, + }, + ]} + tableShopping + customHeadCellClasses={[ + classes.textCenter, + classes.description, + classes.description, + classes.textCenter, + classes.textRight, + classes.textRight, + ]} + customHeadClassesForCells={[0, 2, 3, 4, 5, 6]} + customCellClasses={[ + classes.tdName, + classes.customFont, + classes.customFont, + classes.tdNumber + " " + classes.textCenter, + classes.tdNumber + " " + classes.tdNumberAndButtonGroup, + classes.tdNumber + " " + classes.textCenter, + ]} + customClassesForCells={[1, 2, 3, 4, 5, 6]} + /> + + + +
+
+
+

Comments

+
+ + +
+

+ 10 Comments +

+ + Tina Andrew Ā· 7 minutes ago + + } + body={ + +

+ Chance too good. God level bars. I{"'"}m so proud of + @LifeOfDesiigner #1 song in the country. Panda! Don{"'"}t + be scared of the truth because we need to restart the + human foundation in truth I stand with the most humility. + We are so blessed! +

+

+ All praises and blessings to the families of people who + never gave up on dreams. Don{"'"}t forget, You{"'"}re + Awesome! +

+
+ } + footer={ +
+ + + + +
+ } + innerMedias={[ + + } + footer={ + + } + />, + ]} + /> + + John Camber Ā· Yesterday + + } + body={ + +

+ Hello guys, nice to have you on the platform! There will + be a lot of great stuff coming soon. We will keep you + posted for the latest news. +

+

+ Don{"'"}t forget, You{"'"}re Awesome! +

+
+ } + footer={ +
+ + + + + +
+ } + innerMedias={[ + + Tina Andrew Ā· 2 Days Ago + + } + body={ + +

+ Hello guys, nice to have you on the platform! There + will be a lot of great stuff coming soon. We will keep + you posted for the latest news. +

+

+ Don{"'"}t forget, You{"'"}re Awesome! +

+
+ } + footer={ +
+ + + + +
+ } + />, + ]} + /> + + Rosa Thompson Ā· 2 Days Ago + + } + body={ + +

+ Hello guys, nice to have you on the platform! There will + be a lot of great stuff coming soon. We will keep you + posted for the latest news. +

+

+ Don{"'"}t forget, You{"'"}re Awesome! +

+
+ } + footer={ +
+ + + + +
+ } + /> +
+ +
+
+

+ Post your comment
+ - Logged In User - +

+ + } + footer={ + + } + /> +

+ Post your comment
+ - Not Logged In User - +

+ + + + + + + + + + +
+ } + footer={ +
+
SIGN IN WITH
+ + + + +
+ } + /> + + +
+ + ); +} diff --git a/src/views/ComponentsPage/Sections/SectionFooter.js b/src/views/ComponentsPage/Sections/SectionFooter.js new file mode 100644 index 0000000..e5fabbd --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionFooter.js @@ -0,0 +1,739 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Mail from "@material-ui/icons/Mail"; +import Favorite from "@material-ui/icons/Favorite"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +import CustomInput from "components/CustomInput/CustomInput"; +import Footer from "components/Footer/Footer"; + +import face1 from "assets/img/faces/card-profile6-square.jpg"; +import face2 from "assets/img/faces/christian.jpg"; +import face3 from "assets/img/faces/card-profile4-square.jpg"; +import face4 from "assets/img/faces/card-profile1-square.jpg"; +import face5 from "assets/img/faces/marc.jpg"; +import face6 from "assets/img/faces/kendall.jpg"; +import face7 from "assets/img/faces/card-profile5-square.jpg"; +import face8 from "assets/img/faces/card-profile2-square.jpg"; + +import styles from "assets/jss/react-material/views/componentsSections/footerStyle"; + +const useStyles = makeStyles(styles); + +export default function SectionFooter() { + const classes = useStyles(); + return ( +
+
+
+

Footer Areas

+
+
+
+
+ } + /> +
+
+
+ } + /> +
+
+
+ + +
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+ + } + /> +
+
+ +
+
+
+ Copyright © {1900 + new Date().getYear()}{" "} + + WeenSpace + {" "} + All Rights Reserved. + + } + > +
+ + +
About Us
+ +
+ +
Market
+ +
+ +
Social Feed
+
+
+ +

+ How to handle ethical disagreements with your clients. +

+
+
+ +

+ The tangible benefits of designing at 1x pixel density. +

+
+
+ +

+ A collection of 25 stunning sites that you can use for + inspiration. +

+
+
+
+ +
Follow Us
+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
Numbers Don{"'"}t Lie
+

+ 14.521 Freelancers +

+

+ 1.423.183 Transactions +

+
+
+
+
+
+
+ + + + ); +} diff --git a/src/views/ComponentsPage/Sections/SectionJavascript.js b/src/views/ComponentsPage/Sections/SectionJavascript.js new file mode 100644 index 0000000..9cd411c --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionJavascript.js @@ -0,0 +1,969 @@ +/*eslint-disable*/ +import React from "react"; +// react plugin for creating date-time-picker +import Datetime from "react-datetime"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Slide from "@material-ui/core/Slide"; +import Dialog from "@material-ui/core/Dialog"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import DialogContent from "@material-ui/core/DialogContent"; +import DialogActions from "@material-ui/core/DialogActions"; +import InputLabel from "@material-ui/core/InputLabel"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import FormControl from "@material-ui/core/FormControl"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import Tooltip from "@material-ui/core/Tooltip"; +import Popover from "@material-ui/core/Popover"; +import Checkbox from "@material-ui/core/Checkbox"; +import Icon from "@material-ui/core/Icon"; +// @material-ui/icons +import LibraryBooks from "@material-ui/icons/LibraryBooks"; +import Close from "@material-ui/icons/Close"; +import Notifications from "@material-ui/icons/Notifications"; +import AccountCircle from "@material-ui/icons/AccountCircle"; +import Assignment from "@material-ui/icons/Assignment"; +import Mail from "@material-ui/icons/Mail"; +import Face from "@material-ui/icons/Face"; +import Timeline from "@material-ui/icons/Timeline"; +import Code from "@material-ui/icons/Code"; +import Group from "@material-ui/icons/Group"; +import Email from "@material-ui/icons/Email"; +import Check from "@material-ui/icons/Check"; +import AttachFile from "@material-ui/icons/AttachFile"; +import Layers from "@material-ui/icons/Layers"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +import Instruction from "components/Instruction/Instruction"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CustomInput from "components/CustomInput/CustomInput"; +import CustomFileInput from "components/CustomFileInput/CustomFileInput"; +import InfoArea from "components/InfoArea/InfoArea"; +import Accordion from "components/Accordion/Accordion"; +import ImageUpload from "components/CustomUpload/ImageUpload"; + +import javascriptStyles from "assets/jss/react-material/views/componentsSections/javascriptStyles"; + +import dg1 from "assets/img/dg1.jpg"; +import dg2 from "assets/img/dg2.jpg"; + +const useStyles = makeStyles(javascriptStyles); + +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); + +Transition.displayName = "Transition"; + +export default function SectionJavascript() { + const [anchorElLeft, setAnchorElLeft] = React.useState(null); + const [anchorElTop, setAnchorElTop] = React.useState(null); + const [anchorElBottom, setAnchorElBottom] = React.useState(null); + const [anchorElRight, setAnchorElRight] = React.useState(null); + const [checked, setChecked] = React.useState([]); + const [classicModal, setClassicModal] = React.useState(false); + const [noticeModal, setNoticeModal] = React.useState(false); + const [smallModal, setSmallModal] = React.useState(false); + const [loginModal, setLoginModal] = React.useState(false); + const [signupModal, setSignupModal] = React.useState(false); + const handleToggle = (value) => { + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + setChecked(newChecked); + }; + const classes = useStyles(); + return ( +
+
+
+

Javascript components

+
+ + +
+

Modal

+
+ + + + setClassicModal(false)} + aria-labelledby="classic-modal-slide-title" + aria-describedby="classic-modal-slide-description" + > + + +

Modal title

+
+ +

+ Far far away, behind the word mountains, far from the + countries Vokalia and Consonantia, there live the blind + texts. Separated they live in Bookmarksgrove right at the + coast of the Semantics, a large language ocean. A small + river named Duden flows by their place and supplies it + with the necessary regelialia. It is a paradisematic + country, in which roasted parts of sentences fly into your + mouth. Even the all-powerful Pointing has no control about + the blind texts it is an almost unorthographic life One + day however a small line of blind text by the name of + Lorem Ipsum decided to leave for the far World of Grammar. +

+
+ + + + +
+
+ + {/* BUTTON NOTICE MODAL */} + + {/* NOTICE MODAL START */} + setNoticeModal(false)} + aria-labelledby="notice-modal-slide-title" + aria-describedby="notice-modal-slide-description" + > + + +

+ How Do You Become an Affiliate? +

+
+ + + The first step is to create an account at{" "} + + WeenSpace + + . You can choose a social network or go for the + classic version, whatever works best for you. + + } + image={dg1} + className={classes.instructionNoticeModal} + imageClassName={classes.imageNoticeModal} + /> + + The first step is to create an account at{" "} + + WeenSpace + + . You can choose a social network or go for the + classic version, whatever works best for you. + + } + image={dg2} + className={classes.instructionNoticeModal} + imageClassName={classes.imageNoticeModal} + /> +

+ If you have more questions, don{"'"}t hesitate to contact + us or send us a tweet @creativetim. We{"'"}re here to + help! +

+
+ + + +
+ {/* NOTICE MODAL END */} +
+ + {/* BUTTON SMALL MODAL */} + + {/* SMALL MODAL START */} + setSmallModal(false)} + aria-labelledby="small-modal-slide-title" + aria-describedby="small-modal-slide-description" + > + + + + +
Are you sure you want to do this?
+
+ + + + +
+ {/* SMALL MODAL END */} +
+
+ + + {/* BUTTON LOGIN MODAL */} + + {/* LOGIN MODAL START */} + setLoginModal(false)} + aria-labelledby="login-modal-slide-title" + aria-describedby="login-modal-slide-description" + > + + + + +
Log in
+
+ + + +
+
+
+ +
+

+ Or Be Classical +

+ + + + + ), + placeholder: "First Name...", + }} + /> + + + + ), + placeholder: "Email...", + }} + /> + + + lock_outline + + + ), + placeholder: "Password...", + }} + /> + + +
+ + + +
+
+ {/* LOGIN MODAL END */} +
+ + {/* BUTTON SIGNUP MODAL */} + + {/* SIGNUP MODAL START */} + setSignupModal(false)} + aria-labelledby="signup-modal-slide-title" + aria-describedby="signup-modal-slide-description" + > + + + +

+ Register +

+
+ + + + + We{"'"}ve created the marketing campaign of the + website. It was a very interesting + collaboration. +

+ } + icon={Timeline} + iconColor="rose" + /> + + We{"'"}ve developed the website with HTML5 and + CSS3. The client has access to the code using + GitHub. +

+ } + icon={Code} + iconColor="primary" + /> + + There is also a Fully Customizable CMS Admin + Dashboard for this product. +

+ } + icon={Group} + iconColor="info" + /> +
+ +
+ + {` `} + + {` `} + + {` `} +

+ or be classical +

+
+
+ + + + ), + placeholder: "First Name...", + }} + /> + + + + ), + placeholder: "Email...", + }} + /> + + + lock_outline + + + ), + placeholder: "Password...", + }} + /> + handleToggle(1)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + label={ + + I agree to the{" "} + terms and conditions. + + } + /> +
+ +
+ +
+
+
+
+
+ {/* SIGNUP MODAL END */} +
+
+ +
+

Datetime Picker

+
+ + + + Datetime Picker + +
+ + + + Date Picker +
+ + + + Time Picker +
+ + + +
+
+
+
+ +
+

Popovers

+
+ + setAnchorElLeft(null)} + anchorOrigin={{ + vertical: "center", + horizontal: "left", + }} + transformOrigin={{ + vertical: "center", + horizontal: "right", + }} + > +

Popover on left

+
+ Here will be some very useful information about his popover. + Here will be some very useful information about his popover. +
+
+ + setAnchorElTop(null)} + anchorOrigin={{ + vertical: "top", + horizontal: "center", + }} + transformOrigin={{ + vertical: "bottom", + horizontal: "center", + }} + > +

Popover on top

+
+ Here will be some very useful information about his popover. +
+
+ + setAnchorElBottom(null)} + anchorOrigin={{ + vertical: "bottom", + horizontal: "center", + }} + transformOrigin={{ + vertical: "top", + horizontal: "center", + }} + > +

Popover on bottom

+
+ Here will be some very useful information about his popover. +
+
+ + setAnchorElRight(null)} + anchorOrigin={{ + vertical: "center", + horizontal: "right", + }} + transformOrigin={{ + vertical: "center", + horizontal: "left", + }} + > +

Popover on right

+
+ Here will be some very useful information about his popover. +
+
+
+
+
+

Tooltips

+
+ + + + + + + + + + + + +
+
+
+
+

Collapse

+
+ + + + + +
+
+
+
+

File Uploader

+
+ + +

Regular Image

+ +
+ +

Avatar

+ +
+ +

Simple Material Input

+ + , + }} + /> + , + }} + /> +
+
+
+
+

Carousel

+
+
+
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionNavbars.js b/src/views/ComponentsPage/Sections/SectionNavbars.js new file mode 100644 index 0000000..eed91b5 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionNavbars.js @@ -0,0 +1,419 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Search from "@material-ui/icons/Search"; +import Email from "@material-ui/icons/Email"; +import Face from "@material-ui/icons/Face"; +import Settings from "@material-ui/icons/Settings"; +import AccountCircle from "@material-ui/icons/AccountCircle"; +import Explore from "@material-ui/icons/Explore"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Header from "components/Header/Header"; +import CustomInput from "components/CustomInput/CustomInput"; +import CustomDropdown from "components/CustomDropdown/CustomDropdown"; +import Button from "components/CustomButtons/Button"; + +import navbarsStyle from "assets/jss/react-material/views/componentsSections/navbarsStyle"; + +import image from "assets/img/bg.jpg"; +import profileImage from "assets/img/faces/avatar.jpg"; + +const useStyles = makeStyles(navbarsStyle); + +export default function SectionNavbars() { + const classes = useStyles(); + return ( + +
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionNotifications.js b/src/views/ComponentsPage/Sections/SectionNotifications.js new file mode 100644 index 0000000..5ee0d89 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionNotifications.js @@ -0,0 +1,72 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import Check from "@material-ui/icons/Check"; +import Warning from "@material-ui/icons/Warning"; +// core components +import SnackbarContent from "components/Snackbar/SnackbarContent"; +import Clearfix from "components/Clearfix/Clearfix"; +import notificationsStyles from "assets/jss/react-material/views/componentsSections/notificationsStyles"; + +const useStyles = makeStyles(notificationsStyles); + +export default function SectionNotifications() { + const classes = useStyles(); + return ( +
+
+
+
+

Notifications

+
+
+ + INFO ALERT: You{"'"}ve got some friends nearby, stop looking + at your phone and find them... + + } + close + color="info" + icon="info_outline" + /> + + SUCCESS ALERT: You{"'"}ve got some friends nearby, stop + looking at your phone and find them... + + } + close + color="success" + icon={Check} + /> + + WARNING ALERT: You{"'"}ve got some friends nearby, stop + looking at your phone and find them... + + } + close + color="warning" + icon={Warning} + /> + + DANGER ALERT: You{"'"}ve got some friends nearby, stop + looking at your phone and find them... + + } + close + color="danger" + icon="info_outline" + /> + +
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionPills.js b/src/views/ComponentsPage/Sections/SectionPills.js new file mode 100644 index 0000000..f938749 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionPills.js @@ -0,0 +1,316 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons +import Dashboard from "@material-ui/icons/Dashboard"; +import Schedule from "@material-ui/icons/Schedule"; +import List from "@material-ui/icons/List"; + +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import NavPills from "components/NavPills/NavPills"; +import pillsStyle from "assets/jss/react-material/views/componentsSections/pillsStyle"; + +const useStyles = makeStyles(pillsStyle); + +export default function SectionPills() { + const classes = useStyles(); + return ( +
+
+ +
+
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionPreFooter.js b/src/views/ComponentsPage/Sections/SectionPreFooter.js new file mode 100644 index 0000000..b707448 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionPreFooter.js @@ -0,0 +1,362 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CustomInput from "components/CustomInput/CustomInput"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import InputAdornment from "@material-ui/core/InputAdornment"; +// @material-ui icons +import Mail from "@material-ui/icons/Mail"; + +import bg7 from "assets/img/bg7.jpg"; + +import styles from "assets/jss/react-material/views/componentsSections/preFooter"; + +const useStyles = makeStyles(styles); + +export default function SectionPreFooter() { + const classes = useStyles(); + return ( +
+
+
+

Pre-Footer Areas

+
+
+
+
+ + +

Thank you for your support!

+
+ + + + +
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ + +
+

Subscribe to our Newsletter

+

+ Join our newsletter and get news in your inbox every week! We + hate spam too, so no worries about this. +

+
+ + +
+ + + + + + ), + placeholder: "Your Email...", + }} + /> + + + + + + +
+
+
+
+
+
+
+
+
+
+ + +

Get Tips & Tricks every Week!

+

+ Join our newsletter and get news in your inbox every week! We + hate spam too, so no worries about this. +

+
+ + + +
+ + + + + + ), + placeholder: "Your Email...", + }} + /> + + + + + + +
+
+
+
+
+
+
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionTabs.js b/src/views/ComponentsPage/Sections/SectionTabs.js new file mode 100644 index 0000000..2df6a94 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionTabs.js @@ -0,0 +1,145 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons +import Face from "@material-ui/icons/Face"; +import Chat from "@material-ui/icons/Chat"; +import Build from "@material-ui/icons/Build"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import CustomTabs from "components/CustomTabs/CustomTabs"; +import tabsStyle from "assets/jss/react-material/views/componentsSections/tabsStyle"; + +const useStyles = makeStyles(tabsStyle); + +export default function SectionTabs() { + const classes = useStyles(); + return ( +
+
+ +
+
+ ); +} diff --git a/src/views/ComponentsPage/Sections/SectionTypography.js b/src/views/ComponentsPage/Sections/SectionTypography.js new file mode 100644 index 0000000..cc61c66 --- /dev/null +++ b/src/views/ComponentsPage/Sections/SectionTypography.js @@ -0,0 +1,207 @@ +import React from "react"; + +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons + +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Small from "components/Typography/Small"; +import Danger from "components/Typography/Danger"; +import Warning from "components/Typography/Warning"; +import Success from "components/Typography/Success"; +import Info from "components/Typography/Info"; +import Primary from "components/Typography/Primary"; +import Muted from "components/Typography/Muted"; +import Quote from "components/Typography/Quote"; +import SectionContentAreas from "./SectionContentAreas"; + +import typographyStyle from "assets/jss/react-material/views/componentsSections/typographyStyle"; + +import image from "assets/img/faces/avatar.jpg"; + +const useStyles = makeStyles(typographyStyle); + +export default function SectionTypography() { + const classes = useStyles(); + return ( +
+
+
+
+

Typography

+
+ +
+
Header 1
+

The Life of Material Kit

+
+
+
Header 2
+

The Life of Material Kit

+
+
+
Header 3
+

The Life of Material Kit

+
+
+
Header 4
+

The Life of Material Kit

+
+
+
Header 5
+
The Life of Material Kit
+
+
+
Header 6
+
The Life of Material Kit
+
+
+
Header 1
+

The Life of Material Kit

+
+
+
Header 2
+

The Life of Material Kit

+
+
+
Header 3
+

The Life of Material Kit

+
+
+
Header 4
+

The Life of Material Kit

+
+
+
Paragraph
+

+ I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers. I understand + culture. I am the nucleus. I think that’s a responsibility that + I have, to push possibilities, to show people, this is the level + that things could be at. +

+
+
+
Quote
+ +
+
+
Muted Text
+ + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... + +
+
+
Primary Text
+ + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... + +
+
+
Info Text
+ + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... + +
+
+
Success Text
+ + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... + +
+
+
Warning Text
+ + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... + +
+
+
Danger Text
+ + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... + +
+
+
Small Tag
+

+ Header with small subtitle +
+ + Use {'"'}Small{'"'} tag for the headers + +

+
+
+
+
+
+
+

Images

+
+
+ + +

Rounded Image

+ ... +
+ +

Circle Image

+ ... +
+ +

Rounded Raised

+ ... +
+ +

Circle Raised

+ ... +
+
+ +
+
+ +
+
+ ); +} diff --git a/src/views/ContactUsPage/ContactUsPage.js b/src/views/ContactUsPage/ContactUsPage.js new file mode 100644 index 0000000..40cf3bd --- /dev/null +++ b/src/views/ContactUsPage/ContactUsPage.js @@ -0,0 +1,296 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +import PinDrop from "@material-ui/icons/PinDrop"; +import Phone from "@material-ui/icons/Phone"; +import BusinessCenter from "@material-ui/icons/BusinessCenter"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; +import CustomInput from "components/CustomInput/CustomInput"; +import Button from "components/CustomButtons/Button"; +import Footer from "components/Footer/Footer"; + +import contactUsStyle from "assets/jss/react-material/views/contactUsStyle"; + +const CustomSkinMap = () => { + const mapRef = React.useRef(null); + React.useEffect(() => { + let google = window.google; + let map = mapRef.current; + let lat = "44.43353"; + let lng = "26.093928"; + const myLatlng = new google.maps.LatLng(lat, lng); + const mapOptions = { + zoom: 14, + center: myLatlng, + scrollwheel: false, + zoomControl: true, + styles: [ + { + featureType: "water", + stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: "#0088ff" }], + }, + { + featureType: "road", + elementType: "geometry.fill", + stylers: [ + { hue: "#ff0000" }, + { saturation: -100 }, + { lightness: 99 }, + ], + }, + { + featureType: "road", + elementType: "geometry.stroke", + stylers: [{ color: "#808080" }, { lightness: 54 }], + }, + { + featureType: "landscape.man_made", + elementType: "geometry.fill", + stylers: [{ color: "#ece2d9" }], + }, + { + featureType: "poi.park", + elementType: "geometry.fill", + stylers: [{ color: "#ccdca1" }], + }, + { + featureType: "road", + elementType: "labels.text.fill", + stylers: [{ color: "#767676" }], + }, + { + featureType: "road", + elementType: "labels.text.stroke", + stylers: [{ color: "#ffffff" }], + }, + { featureType: "poi", stylers: [{ visibility: "off" }] }, + { + featureType: "landscape.natural", + elementType: "geometry.fill", + stylers: [{ visibility: "on" }, { color: "#b8cb93" }], + }, + { featureType: "poi.park", stylers: [{ visibility: "on" }] }, + { + featureType: "poi.sports_complex", + stylers: [{ visibility: "on" }], + }, + { featureType: "poi.medical", stylers: [{ visibility: "on" }] }, + { + featureType: "poi.business", + stylers: [{ visibility: "simplified" }], + }, + ], + }; + + map = new google.maps.Map(map, mapOptions); + + const marker = new google.maps.Marker({ + position: myLatlng, + map: map, + animation: google.maps.Animation.DROP, + title: "React Material!", + }); + + const contentString = + '

React Material

' + + "

A premium Kit for React, Material-UI, and React Hooks.

"; + + const infowindow = new google.maps.InfoWindow({ + content: contentString, + }); + + google.maps.event.addListener(marker, "click", function () { + infowindow.open(map, marker); + }); + }); + return ( + <> +
+ + ); +}; + +const useStyles = makeStyles(contactUsStyle); + +export default function ContactUsPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="dark" + /> +
+ +
+
+
+
+

Send us a message

+ + +

+ You can contact us with anything related to our Products. We + {"'"}ll get in touch with you as soon as possible. +
+
+

+
+ + + + +
+ +
+ +
+ + + Bld Mihail Kogalniceanu, nr. 8,
7652 Bucharest,{" "} +
Romania +

+ } + icon={PinDrop} + iconColor="primary" + /> + + Michael Jordan
+40 762 321 762
Mon - Fri, + 8:00-22:00 +

+ } + icon={Phone} + iconColor="primary" + /> + + WeenSpace Ltd.
VAT Ā· EN2341241
IBAN Ā· + EN8732ENGB2300099123
Bank Ā· Great Britain Bank +

+ } + icon={BusinessCenter} + iconColor="primary" + /> +
+
+
+
+
+
+ } + /> +
+ ); +} diff --git a/src/views/EcommercePage/EcommercePage.js b/src/views/EcommercePage/EcommercePage.js new file mode 100644 index 0000000..273e2b5 --- /dev/null +++ b/src/views/EcommercePage/EcommercePage.js @@ -0,0 +1,335 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import Header from "components/Header/Header"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Parallax from "components/Parallax/Parallax"; +import Button from "components/CustomButtons/Button"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CustomInput from "components/CustomInput/CustomInput"; +import Footer from "components/Footer/Footer"; +// sections for this page +import HeaderLinks from "components/Header/HeaderLinks"; +import SectionLatestOffers from "views/EcommercePage/Sections/SectionLatestOffers"; +import SectionProducts from "views/EcommercePage/Sections/SectionProducts"; +import SectionBlog from "views/EcommercePage/Sections/SectionBlog"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import InputAdornment from "@material-ui/core/InputAdornment"; +// @material-ui icons +import Mail from "@material-ui/icons/Mail"; + +import ecommerceHeader from "assets/img/examples/ecommerce-header.jpg"; +import face1 from "assets/img/faces/card-profile6-square.jpg"; +import face2 from "assets/img/faces/christian.jpg"; +import face3 from "assets/img/faces/card-profile4-square.jpg"; +import face4 from "assets/img/faces/card-profile1-square.jpg"; +import face5 from "assets/img/faces/marc.jpg"; +import face6 from "assets/img/faces/kendall.jpg"; +import face7 from "assets/img/faces/card-profile5-square.jpg"; +import face8 from "assets/img/faces/card-profile2-square.jpg"; + +import styles from "assets/jss/react-material/views/ecommerceStyle"; + +const useStyles = makeStyles(styles); + +export default function EcommercePage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 300, + color: "info", + }} + /> + +
+ + +
+

Ecommerce Page!

+

+ Free global delivery for all products. Use coupon{" "} + 25summer for an extra 25% Off +

+
+
+
+
+
+ +
+ + +
+ +
+
+ + +
+

Subscribe to our Newsletter

+

+ Join our newsletter and get news in your inbox every week! We + hate spam too, so no worries about this. +

+
+ + +
+ + + + + + ), + placeholder: "Your Email...", + }} + /> + + + + + + +
+
+
+
+
+
+ +
+ } + > + + +
About Us
+

+ WeenSpace is a startup that creates design tools that make the + web development process faster and easier.{" "} +

+

+ We love the web and care deeply for how users interact with a + digital product. We power businesses and individuals to create + better looking web projects around the world.{" "} +

+
+ +
Social Feed
+
+
+ +

How to handle ethical disagreements with your clients.

+
+
+ +

The tangible benefits of designing at 1x pixel density.

+
+
+ +

+ A collection of 25 stunning sites that you can use for + inspiration. +

+
+
+
+ +
Instagram Feed
+
+ ... + ... + ... + ... + ... + ... + ... + ... +
+
+
+
+ + ); +} diff --git a/src/views/EcommercePage/Sections/SectionBlog.js b/src/views/EcommercePage/Sections/SectionBlog.js new file mode 100644 index 0000000..9fc6e4c --- /dev/null +++ b/src/views/EcommercePage/Sections/SectionBlog.js @@ -0,0 +1,122 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import dg6 from "assets/img/dg6.jpg"; +import dg10 from "assets/img/dg10.jpg"; +import dg9 from "assets/img/dg9.jpg"; + +import styles from "assets/jss/react-material/views/ecommerceSections/blogStyle"; + +const useStyles = makeStyles(styles); + +export default function SectionBlog() { + const classes = useStyles(); + return ( +
+
+

Latest Articles

+ + + + + + ... + +
+ + +
+ Trends +
+

+ + Learn how to wear your scarf with a floral print shirt + +

+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+
+ + + + + + + ... + +
+ + +
+ Fashion Week +
+

+ + Katy Perry was wearing a Dolce & Gabanna arc dress + +

+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+
+ + + + + + + ... + +
+ + +
+ Fashion Week +
+

+ + Check the latest fashion events and which are the trends + +

+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+
+ + + +
+
+ ); +} diff --git a/src/views/EcommercePage/Sections/SectionLatestOffers.js b/src/views/EcommercePage/Sections/SectionLatestOffers.js new file mode 100644 index 0000000..b0e8e58 --- /dev/null +++ b/src/views/EcommercePage/Sections/SectionLatestOffers.js @@ -0,0 +1,172 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import Button from "components/CustomButtons/Button"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Tooltip from "@material-ui/core/Tooltip"; +// @material-ui icons +import Favorite from "@material-ui/icons/Favorite"; + +import styles from "assets/jss/react-material/views/ecommerceSections/latestOffersStyle"; + +import gucci from "assets/img/examples/gucci.jpg"; +import tomFord from "assets/img/examples/tom-ford.jpg"; +import dolce from "assets/img/examples/dolce.jpg"; + +const useStyles = makeStyles(styles); + +export default function SectionLatestOffers() { + const classes = useStyles(); + return ( +
+
+

Latest Offers

+ + + + + + ... + +
+ + +

Gucci

+

+ The structured shoulders and sleek detailing ensure a sharp + silhouette. Team it with a silk pocket square and leather + loafers. +

+
+ +
+ + {" "} + €1,430 + + + {" "} + €743 + +
+
+ + + +
+
+ + + + + + + ... + +
+ + +

Dolce & Gabbana

+

+ The structured shoulders and sleek detailing ensure a sharp + silhouette. Team it with a silk pocket square and leather + loafers. +

+
+ +
+ + {" "} + €1,430 + + + {" "} + €743 + +
+
+ + + +
+
+ + + + + + + ... + +
+ + +

Dolce & Gabbana

+

+ The structured shoulders and sleek detailing ensure a sharp + silhouette. Team it with a silk pocket square and leather + loafers. +

+
+ +
+ + {" "} + €1,430 + + + {" "} + €743 + +
+
+ + + +
+
+ + + +
+
+ ); +} diff --git a/src/views/EcommercePage/Sections/SectionProducts.js b/src/views/EcommercePage/Sections/SectionProducts.js new file mode 100644 index 0000000..20d7fc3 --- /dev/null +++ b/src/views/EcommercePage/Sections/SectionProducts.js @@ -0,0 +1,1264 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// plugin that creates slider +import Slider from "nouislider"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Checkbox from "@material-ui/core/Checkbox"; +import Tooltip from "@material-ui/core/Tooltip"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +// @material-ui icons +import Favorite from "@material-ui/icons/Favorite"; +import FavoriteBorder from "@material-ui/icons/FavoriteBorder"; +import Cached from "@material-ui/icons/Cached"; +import Subject from "@material-ui/icons/Subject"; +import Check from "@material-ui/icons/Check"; +// core components +import Accordion from "components/Accordion/Accordion"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import Button from "components/CustomButtons/Button"; +import Clearfix from "components/Clearfix/Clearfix"; + +import suit1 from "assets/img/examples/suit-1.jpg"; +import suit2 from "assets/img/examples/suit-2.jpg"; +import suit3 from "assets/img/examples/suit-3.jpg"; +import suit4 from "assets/img/examples/suit-4.jpg"; +import suit5 from "assets/img/examples/suit-5.jpg"; +import suit6 from "assets/img/examples/suit-6.jpg"; +import color1 from "assets/img/examples/color1.jpg"; +import color3 from "assets/img/examples/color3.jpg"; +import color2 from "assets/img/examples/color2.jpg"; +import dg3 from "assets/img/dg3.jpg"; +import dg1 from "assets/img/dg1.jpg"; + +import styles from "assets/jss/react-material/views/ecommerceSections/productsStyle"; + +const useStyles = makeStyles(styles); + +export default function SectionProducts() { + const [checked, setChecked] = React.useState([1, 9, 27]); + const [priceRange, setPriceRange] = React.useState([101, 790]); + React.useEffect(() => { + if ( + !document + .getElementById("sliderRegular") + .classList.contains("noUi-target") + ) { + Slider.create(document.getElementById("sliderRegular"), { + start: priceRange, + connect: true, + range: { min: 30, max: 900 }, + step: 1, + }).on("update", function (values) { + setPriceRange([Math.round(values[0]), Math.round(values[1])]); + }); + } + return function cleanup() {}; + }); + const handleToggle = (value) => { + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + setChecked(newChecked); + }; + const classes = useStyles(); + return ( +
+
+

Find what you need

+ + + + +

+ Refine + + + + +

+ + + €{priceRange[0]} + + + €{priceRange[1]} + +
+
+
+ + ), + }, + { + title: "Clothing", + content: ( +
+
+ handleToggle(1)} + checked={ + checked.indexOf(1) !== -1 ? true : false + } + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Blazers" + /> + handleToggle(2)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Casual Shirts" + /> + handleToggle(3)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Formal Shirts" + /> + handleToggle(4)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Jeans" + /> + handleToggle(5)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Polos" + /> + handleToggle(6)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Pyjamas" + /> + handleToggle(7)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Shorts" + /> + handleToggle(8)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Trousers" + /> +
+
+ ), + }, + { + title: "Designer", + content: ( +
+
+ handleToggle(9)} + checked={ + checked.indexOf(9) !== -1 ? true : false + } + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="All" + /> + handleToggle(10)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Polo Ralph Lauren" + /> + handleToggle(11)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Wooyoungmi" + /> + handleToggle(12)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Alexander McQueen" + /> + handleToggle(13)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Tom Ford" + /> + handleToggle(14)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="AMI" + /> + handleToggle(15)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Berena" + /> + handleToggle(16)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Thom Sweeney" + /> + handleToggle(17)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Burberry Prorsum" + /> + handleToggle(18)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Calvin Klein" + /> + handleToggle(19)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Kingsman" + /> + handleToggle(20)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Club Monaco" + /> + handleToggle(21)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Dolce & Gabbana" + /> + handleToggle(22)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Gucci" + /> + handleToggle(23)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Biglioli" + /> + handleToggle(24)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Lanvin" + /> + handleToggle(25)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Loro Piana" + /> + handleToggle(26)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Massimo Alba" + /> +
+
+ ), + }, + { + title: "Colour", + content: ( +
+
+ handleToggle(27)} + checked={ + checked.indexOf(27) !== -1 ? true : false + } + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="All" + /> + handleToggle(28)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Black" + /> + handleToggle(29)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Blue" + /> + handleToggle(30)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Brown" + /> + handleToggle(31)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Gray" + /> + handleToggle(32)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Green" + /> + handleToggle(33)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Neutrals" + /> + handleToggle(34)} + checkedIcon={ + + } + icon={ + + } + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="Purple" + /> +
+
+ ), + }, + ]} + /> + + + + + + + + + + .. + + + + +

Polo Ralph Lauren

+
+

+ Impeccably tailored in Italy from lightweight navy wool. +

+
+ +
+ €800 +
+ + + +
+
+
+ + + + + .. + + + + +

Wooyoungmi

+
+

+ Dark-grey slub wool, pintucked notch lapels. +

+
+ +
+ €555 +
+ + + +
+
+
+ + + + + .. + + + + +

Tom Ford

+
+

+ Immaculate tailoring is TOM FORD{"'"}s forte. +

+
+ +
+ €879 +
+ + + +
+
+
+ + + + + .. + + + + +

Thom Sweeney

+
+

+ It{"'"}s made from lightweight grey wool woven. +

+
+ +
+ €680 +
+ + + +
+
+
+ + + + + .. + + + + +

Kingsman

+
+

+ Crafted from khaki cotton and fully canvassed. +

+
+ +
+ €725 +
+ + + +
+
+
+ + + + + .. + + + + +

Boglioli

+
+

+ Masterfully crafted in Northern Italy. +

+
+ +
+ €699 +
+ + + +
+
+
+ + + +
+
+ +
+

News in fashion

+ + + + +
+ Productivity Apps +
+ +

+ The best trends in fashion 2021 +

+
+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+ +
+
+
+ + + +
+ FASHION NEWS +
+ +

+ Kanye joins the Yeezy team at Adidas +

+
+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+ +
+
+
+ + + +
+ Productivity Apps +
+ +

+ Learn how to use the new colors of 2021 +

+
+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+ +
+
+
+ + + +
+ Tutorials +
+ +

Trending colors of 2021

+
+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+ +
+
+
+ + + +
+ Productivity Style +
+ +

Fashion & Style 2021

+
+

+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye loves + Kanye I love Rick Owens’ bed design but the back is... +

+ +
+
+
+
+
+
+ ); +} diff --git a/src/views/ErrorPage/ErrorPage.js b/src/views/ErrorPage/ErrorPage.js new file mode 100644 index 0000000..322029d --- /dev/null +++ b/src/views/ErrorPage/ErrorPage.js @@ -0,0 +1,114 @@ +/*eslint-disable*/ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; + +import errorPageStyle from "assets/jss/react-material/views/errorPageStyles"; + +import image from "assets/img/clint-mckoy.jpg"; + +const useStyles = makeStyles(errorPageStyle); + +export default function ErrorPage({ ...rest }) { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + {...rest} + /> +
+ {/*
*/} +
+ + +

404

+

Page not found :(

+

+ Ooooups! Looks like you got lost. +

+
+
+
+ {/*
*/} +
+
+ } + /> +
+ ); +} diff --git a/src/views/LandingPage/LandingPage.js b/src/views/LandingPage/LandingPage.js new file mode 100644 index 0000000..e0e2189 --- /dev/null +++ b/src/views/LandingPage/LandingPage.js @@ -0,0 +1,136 @@ +/*eslint-disable*/ import React from "react"; +// nodejs library to set properties for components +import PropTypes from "prop-types"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Parallax from "components/Parallax/Parallax"; + +import landingPageStyle from "assets/jss/react-material/views/landingPageStyle"; + +// Sections for this page +import SectionProduct from "./Sections/SectionProduct"; +import SectionTeam from "./Sections/SectionTeam"; +import SectionWork from "./Sections/SectionWork"; + +const useStyles = makeStyles(landingPageStyle); + +export default function LandingPage({ ...rest }) { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + changeColorOnScroll={{ + height: 300, + color: "info", + }} + {...rest} + /> + +
+ + +

Your Story Starts With Us.

+

+ Every landing page needs a small description after the big bold + title, that{"'"}s why we added this text here. Add here all the + information that can make you or your product create the first + impression. +

+
+ +
+
+
+
+
+
+ + + +
+
+
+ } + /> +
+ ); +} diff --git a/src/views/LandingPage/Sections/SectionProduct.js b/src/views/LandingPage/Sections/SectionProduct.js new file mode 100644 index 0000000..ac2d8ec --- /dev/null +++ b/src/views/LandingPage/Sections/SectionProduct.js @@ -0,0 +1,67 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons +import Chat from "@material-ui/icons/Chat"; +import VerifiedUser from "@material-ui/icons/VerifiedUser"; +import Fingerprint from "@material-ui/icons/Fingerprint"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; + +import productStyle from "assets/jss/react-material/views/landingPageSections/productStyle"; + +const useStyles = makeStyles(productStyle); + +export default function SectionProduct() { + const classes = useStyles(); + return ( +
+ + +

Let{"'"}s talk product

+
+ This is the paragraph where you can write more details about your + product. Keep you user engaged by providing meaningful information. + Remember that by this time, the user is curious, otherwise he wouldn + {"'"}t scroll to get here. Add a button if you want the user to see + more. +
+
+
+
+ + + + + + + + + + + +
+
+ ); +} diff --git a/src/views/LandingPage/Sections/SectionTeam.js b/src/views/LandingPage/Sections/SectionTeam.js new file mode 100644 index 0000000..e5a6b08 --- /dev/null +++ b/src/views/LandingPage/Sections/SectionTeam.js @@ -0,0 +1,220 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +// import from "@material-ui/icons/"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import Muted from "components/Typography/Muted"; +import Button from "components/CustomButtons/Button"; + +import cardProfile1Square from "assets/img/faces/card-profile1-square.jpg"; +import cardProfile2Square from "assets/img/faces/card-profile2-square.jpg"; +import cardProfile4Square from "assets/img/faces/card-profile4-square.jpg"; +import cardProfile6Square from "assets/img/faces/card-profile6-square.jpg"; + +import teamsStyle from "assets/jss/react-material/views/sectionsSections/teamsStyle"; +import teamStyle from "assets/jss/react-material/views/landingPageSections/teamStyle"; + +const style = { + ...teamsStyle, + ...teamStyle, + justifyContentCenter: { + justifyContent: "center", + }, +}; + +const useStyles = makeStyles(style); + +export default function SectionTeam() { + const classes = useStyles(); + return ( +
+

Here is our team

+
+ + + + + + + e.preventDefault()}> + ... + +
+ + + + +

Alec Thompson

+ +
FOUNDER
+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth... +

+
+ + + + + +
+ + + + + + + + + e.preventDefault()}> + ... + +
+ + + + +

Kendall Andrew

+ +
GRAPHIC DESIGNER
+
+

+ Don{"'"}t be scared of the truth because we need to + restart the human foundation in truth... +

+
+ + + + + + +
+ + + + + + + + + e.preventDefault()}> + ... + +
+ + + + +

Gina Andrew

+ +
WEB DESIGNER
+
+

+ I love you like Kanye loves Kanye. Don{"'"}t be scared of + the truth. +

+
+ + + + + +
+ + + + + + + + + e.preventDefault()}> + ... + +
+ + + + +

George West

+ +
BACKEND HACKER
+
+

+ I love you like Kanye loves Kanye. Don{"'"}t be scared of + the truth. +

+
+ + + + + +
+ + + + +
+
+ ); +} diff --git a/src/views/LandingPage/Sections/SectionWork.js b/src/views/LandingPage/Sections/SectionWork.js new file mode 100644 index 0000000..7b7f140 --- /dev/null +++ b/src/views/LandingPage/Sections/SectionWork.js @@ -0,0 +1,76 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// @material-ui/icons + +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import CustomInput from "components/CustomInput/CustomInput"; +import Button from "components/CustomButtons/Button"; + +import workStyle from "assets/jss/react-material/views/landingPageSections/workStyle"; + +const useStyles = makeStyles(workStyle); + +export default function SectionWork() { + const classes = useStyles(); + return ( +
+ + +

Work with us

+

+ Divide details about your product or agency work into parts. Write a + few lines about each one and contact us about any further + collaboration. We will responde get back to you in a couple of + hours. +

+
+ + + + + + + + + + + + + +
+
+
+ ); +} diff --git a/src/views/LoginPage/LoginPage.js b/src/views/LoginPage/LoginPage.js new file mode 100644 index 0000000..0ff503c --- /dev/null +++ b/src/views/LoginPage/LoginPage.js @@ -0,0 +1,214 @@ +/*eslint-disable*/ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import Icon from "@material-ui/core/Icon"; +// @material-ui/icons +import Email from "@material-ui/icons/Email"; +import Favorite from "@material-ui/icons/Favorite"; +import Face from "@material-ui/icons/Face"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import CustomInput from "components/CustomInput/CustomInput"; + +import loginPageStyle from "assets/jss/react-material/views/loginPageStyle"; + +import image from "assets/img/bg7.jpg"; + +const useStyles = makeStyles(loginPageStyle); + +export default function LoginPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + /> +
+
+ + + +
+ +

Login

+
+ + + +
+
+

+ Or Be Classical +

+ + + + + ), + }} + /> + + + + ), + }} + /> + + + lock_utline + + + ), + autoComplete: "off", + }} + /> + +
+ +
+ +
+
+
+
+
+ } + /> +
+
+ ); +} diff --git a/src/views/PresentationPage/PresentationPage.js b/src/views/PresentationPage/PresentationPage.js new file mode 100644 index 0000000..43c1dc2 --- /dev/null +++ b/src/views/PresentationPage/PresentationPage.js @@ -0,0 +1,171 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Parallax from "components/Parallax/Parallax"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; +// sections for this page +import SectionDescription from "views/PresentationPage/Sections/SectionDescription"; +import SectionComponents from "views/PresentationPage/Sections/SectionComponents"; +import SectionCards from "views/PresentationPage/Sections/SectionCards"; +import SectionContent from "views/PresentationPage/Sections/SectionContent"; +import SectionSections from "views/PresentationPage/Sections/SectionSections"; +import SectionExamples from "views/PresentationPage/Sections/SectionExamples"; +import SectionFreeDemo from "views/PresentationPage/Sections/SectionFreeDemo"; +import SectionOverview from "views/PresentationPage/Sections/SectionOverview"; +import SectionPricing from "views/PresentationPage/Sections/SectionPricing"; + +import presentationStyle from "assets/jss/react-material/views/presentationStyle"; + +const useStyles = makeStyles(presentationStyle); + +export default function PresentationPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 400, + color: "info", + }} + /> + +
+ + +
+

+ React Material +

+

+ A Badass Material React UI Component based on Material Design. +

+
+
+
+
+
+
+ + + + + + + + +
+ +
+ } + /> +
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionCards.js b/src/views/PresentationPage/Sections/SectionCards.js new file mode 100644 index 0000000..15d4b34 --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionCards.js @@ -0,0 +1,47 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import cardsStyle from "assets/jss/react-material/views/presentationSections/cardsStyle"; + +import cardsTest from "assets/img/assets-for-demo/cards-test.png"; + +const useStyles = makeStyles(cardsStyle); + +export default function SectionCards() { + const classes = useStyles(); + return ( +
+
+ + +
+ views +
+
+ +
+

Unconventional Cards

+
+ One Card for Every Problem +
+
+ We love cards and everybody on the web seems to. We have gone + above and beyond with options for you to organise your + information. From cards designed for blog posts, to product + cards or user profiles, you will have many options to choose + from. All the cards follow the material principles and have a + design that stands out. +
+
+
+
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionComponents.js b/src/views/PresentationPage/Sections/SectionComponents.js new file mode 100644 index 0000000..ee918cb --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionComponents.js @@ -0,0 +1,83 @@ +import React from "react"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import componentsStyle from "assets/jss/react-material/views/presentationSections/componentsStyle"; + +import macbookImage from "assets/img/assets-for-demo/presentationViewSectionComponent/laptop-basics.png"; +import shoppingCartImage from "assets/img/assets-for-demo/presentationViewSectionComponent/table.jpg"; +import shareButtonImage from "assets/img/assets-for-demo/presentationViewSectionComponent/share-btn.jpg"; +import cardImage from "assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card-with-btn.jpg"; +import twitterImage from "assets/img/assets-for-demo/presentationViewSectionComponent/coloured-card.jpg"; +import iconsImage from "assets/img/assets-for-demo/presentationViewSectionComponent/social-row.jpg"; +import repostImage from "assets/img/assets-for-demo/presentationViewSectionComponent/pin-btn.jpg"; + +const useStyles = makeStyles(componentsStyle); + +export default function SectionComponents() { + const classes = useStyles(); + return ( +
+
+ + +

Basic Components

+
+ The core elements of your website +
+
+ We re-styled every Bootstrap element to make it resemble Material + Design and also fit with each other. All the Bootstrap components + that you need in a development have been re-design with the new + look. Besides the numerous basic elements, we have also created + additional classes. All these items will help you take your + project to the next level. +
+
+ +
+ macbook + macbook + macbook + macbook + macbook + macbook + macbook +
+
+
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionContent.js b/src/views/PresentationPage/Sections/SectionContent.js new file mode 100644 index 0000000..c291844 --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionContent.js @@ -0,0 +1,72 @@ +import React from "react"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// library used for cool animations +import ScrollAnimation from "react-animate-on-scroll"; +import "animate.css/animate.min.css"; + +import contentStyle from "assets/jss/react-material/views/presentationSections/contentStyle"; +// images +import presentationiPad from "assets/img/assets-for-demo/presentationViewSectionComponent/presentation-ipad.jpg"; +import presentationiPadComments from "assets/img/assets-for-demo/presentationViewSectionComponent/ipad-comments.jpg"; +import presentationiPadTable from "assets/img/assets-for-demo/presentationViewSectionComponent/ipad-table.jpg"; + +const useStyles = makeStyles(contentStyle); + +export default function SectionContent() { + const classes = useStyles(); + return ( +
+
+ + +
+

Content Areas

+
+ For Areas that Need More Space +
+
+ If you need elements such as tables, comments, description + areas, tabs and many others, we{"'"}ve got you covered. We took + into consideration multiple use cases and came up with some + specific elements that you will love to use. They{"'"}re + beautiful and easy to use for the end user navigating your + website.{" "} +
+
+
+ +
+
+ + iPad comments + +
+
+ + iPad table + +
+ iPad +
+
+
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionDescription.js b/src/views/PresentationPage/Sections/SectionDescription.js new file mode 100644 index 0000000..3a64f6a --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionDescription.js @@ -0,0 +1,68 @@ +import React from "react"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; + +// @material-ui icons +import Apps from "@material-ui/icons/Apps"; +import ViewDay from "@material-ui/icons/ViewDay"; +import ViewCarousel from "@material-ui/icons/ViewCarousel"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import descriptionStyle from "assets/jss/react-material/views/presentationSections/descriptionStyle"; + +const useStyles = makeStyles(descriptionStyle); + +export default function SectionDescription() { + const classes = useStyles(); + return ( +
+
+ + +

+ React Material is a Material React UI components with a fresh, new + design inspired by Google{"'"}s Material Design. You asked for it, + so we built it. It{"'"}s a great pleasure to introduce to you the + material concepts in an easy to use and beautiful set of + components. +

+
+
+
+ + + + + + + + + + + +
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionExamples.js b/src/views/PresentationPage/Sections/SectionExamples.js new file mode 100644 index 0000000..4741dde --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionExamples.js @@ -0,0 +1,161 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// react components for routing our app without refresh +import { Link } from "react-router-dom"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import examplesStyle from "assets/jss/react-material/views/presentationSections/examplesStyle"; +import imagesStyles from "assets/jss/react-material/imagesStyles"; + +import exAboutUs from "assets/img/assets-for-demo/example-pages/ex-about-us.jpg"; +import exLanding from "assets/img/assets-for-demo/example-pages/ex-landing.jpg"; +import exContact from "assets/img/assets-for-demo/example-pages/ex-contact.jpg"; +import exBlogPost from "assets/img/assets-for-demo/example-pages/ex-blog-post.jpg"; +import exProductPage from "assets/img/assets-for-demo/example-pages/ex-product.jpg"; +import exLoginPage from "assets/img/assets-for-demo/example-pages/ex-login.jpg"; +import exPricing from "assets/img/assets-for-demo/example-pages/ex-pricing.jpg"; +import exSignup from "assets/img/assets-for-demo/example-pages/ex-register.jpg"; +import exProfile from "assets/img/assets-for-demo/example-pages/ex-profile.jpg"; +import exBlog from "assets/img/assets-for-demo/example-pages/ex-blog-posts.jpg"; + +const styles = { + ...examplesStyle, + ...imagesStyles, +}; + +const useStyles = makeStyles(styles); + +export default function SectionExamples() { + const classes = useStyles(); + return ( +
+
+ +
+

Example Pages

+
+ The easiest way to get started is to use one of our pre-built + example pages. From landing pages to e-commerce or blog pages, you + will be able jump start your development. Show your clients a + quick prototype and get inspired for your next project! +
+
+
+ + +

About Us

+ + + About us + + +

Landing Page

+ + + Landing Page + + +

Contact Us

+ + + Contact us + + +
+ +

Blog Post

+ + + Blog Post + + +

Product Page

+ + + Product Pge + + +

Login Page

+ + + Login Page + + +
+ +

Pricing Pge

+ + + Pricing Page + + +

Signup Page

+ + + Signup Page + + +

Profile Page

+ + + Profile Page + + +

Blog Posts

+ + + Blog Posts + + +
+
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionFreeDemo.js b/src/views/PresentationPage/Sections/SectionFreeDemo.js new file mode 100644 index 0000000..6d50161 --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionFreeDemo.js @@ -0,0 +1,162 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui icons +import Close from "@material-ui/icons/Close"; +import Check from "@material-ui/icons/Check"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import Button from "components/CustomButtons/Button"; + +import freeDemoStyle from "assets/jss/react-material/views/presentationSections/freeDemoStyle"; + +const useStyles = makeStyles(freeDemoStyle); + +export default function SectionFreeDemo() { + const classes = useStyles(); + return ( +
+
+ + +
+
+
+
+

Free Demo

+
+ Do you want to test and see the benefits of this kit before + purchasing it? You can give the demo version a try. It features + enough basic components for you to get a feel of the design and + also test the quality of the code. Get it free on GitHub! +
+
+ + + + + + + +

Free Demo

+
    +
  • + 60 Components +
  • +
  • + 3 Example Pages +
  • +
  • + {" "} + Unconventional Cards +
  • +
  • + {" "} + Sections +
  • +
  • + {" "} + Photoshop for Prototype +
  • +
  • + {" "} + Premium Support +
  • +
+
+
+
+ + + +

PRO Version

+
    +
  • + 1000+ Components +
  • +
  • + 12 Example Pages +
  • +
  • + {" "} + Unconventional Cards +
  • +
  • + {" "} + Sections +
  • +
  • + {" "} + Photoshop for Prototype +
  • +
  • + {" "} + Premium Support +
  • +
+
+
+
+
+
+ +
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionOverview.js b/src/views/PresentationPage/Sections/SectionOverview.js new file mode 100644 index 0000000..957d724 --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionOverview.js @@ -0,0 +1,261 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +// @material-ui icons +import Grid from "@material-ui/icons/GridOn"; +import PhoneLink from "@material-ui/icons/Phonelink"; +import AccessTime from "@material-ui/icons/AccessTime"; +import AttachMoney from "@material-ui/icons/AttachMoney"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +// images +import Vodafone from "assets/img/assets-for-demo/ourClients/vodafone.jpg"; +import Microsoft from "assets/img/assets-for-demo/ourClients/microsoft.jpg"; +import Harvard from "assets/img/assets-for-demo/ourClients/harvard.jpg"; +import Standford from "assets/img/assets-for-demo/ourClients/stanford.jpg"; +import profilePic1 from "assets/img/assets-for-demo/test1.jpg"; +import profilePic2 from "assets/img/assets-for-demo/test2.jpg"; +import profilePic3 from "assets/img/assets-for-demo/test3.jpg"; + +import overviewStyle from "assets/jss/react-material/views/presentationSections/overviewStyle"; + +const useStyles = makeStyles(overviewStyle); + +export default function SectionOverview() { + const classes = useStyles(); + return ( +
+
+ +

Your work will get much easier

+
+
+ + + + Enjoy the fluid grid system based on 12 columns. Material + Kit PRO is built over Bootstrap and has all the benefits + that the framework comes with. +

+ } + icon={Grid} + iconColor="gray" + vertical={true} + /> +
+ + + This Material UI kit is built mobile-first and looks amazing + on any device. Regardless of the screen size, the website + content will naturally fit the given resolution. +

+ } + icon={PhoneLink} + iconColor="gray" + vertical={true} + /> +
+ + + Using the Material Kit PRO will save you large amount of + time. You don{"'"}t have to worry about customising the + basic Bootstrap design or generating new components. +

+ } + icon={AccessTime} + iconColor="gray" + vertical={true} + /> +
+ + + Creating your design from scratch with dedicated designers + can be very expensive. Using a kit is the best option to + start your development while bootstrapping your budget. +

+ } + icon={AttachMoney} + iconColor="gray" + vertical={true} + /> +
+
+
+
+
+
+ + +

Trusted by 330.000+ People

+
+ The UI Kits, Templates and Dashboards that we{"'"}ve created are + used by + 330,000+ web developers in over{" "} + 576.000 Web Projects. This is what some of them think: +
+
+
+ + + + + + + + ... + +
+
+ + + + +

Khaldi Yass

+

+ {'"'}As soon as I saw this kit, everything else isn + {"'"}t the same anymore, I just can{"'"}t describe it + guys! Thank you for this work!{'"'} +

+
+
+ + + + + + + + + + ... + +
+
+ + + + +

Josh Murray

+

+ {'"'}Great kit! Used this for a client already and he is + over the moon. Keep up the good work WeenSpace! 10/10 + for design, colours, and the feel of the kit. + {'"'} +

+
+
+ + + + + + + + + + ... + +
+
+ + + + +

Michael Onubogu

+

+ {'"'}Damn Daniel!!! This Material UI Kit is fresh AF! + Amazing work!{'"'} +

+
+
+ + + + +
+ + + vodafone + + + microsoft + + + harvard + + + stanford + + +
+
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionPricing.js b/src/views/PresentationPage/Sections/SectionPricing.js new file mode 100644 index 0000000..6e74d32 --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionPricing.js @@ -0,0 +1,74 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import ShoppingCart from "@material-ui/icons/ShoppingCart"; +import Store from "@material-ui/icons/Store"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Button from "components/CustomButtons/Button"; + +import pricingStyle from "assets/jss/react-material/views/presentationSections/pricingStyle"; + +const useStyles = makeStyles(pricingStyle); + +export default function SectionPricing() { + const classes = useStyles(); + return ( +
+
+ + +

+ Ready to grab React Material? +

+ {" "} + +
+
+
+ + +

Thank you for sharing!

+ + + +
+
+
+
+
+
+
+ ); +} diff --git a/src/views/PresentationPage/Sections/SectionSections.js b/src/views/PresentationPage/Sections/SectionSections.js new file mode 100644 index 0000000..444320f --- /dev/null +++ b/src/views/PresentationPage/Sections/SectionSections.js @@ -0,0 +1,86 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// react components for routing our app without refresh +import { Link } from "react-router-dom"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +// core components +import Button from "components/CustomButtons/Button"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import sectionsStyle from "assets/jss/react-material/views/presentationSections/sectionsStyle"; + +// images array used in rendering a function for this section +import imgs from "assets/img/assets-for-demo/sections/imgs"; + +const useStyles = makeStyles(sectionsStyle); + +export default function SectionSections() { + const renderContainerFluid = (cssClass) => { + return imgs.map((row) => { + return ( + + {row.map((el, index) => { + return ( + + {el} + + ); + })} + + ); + }); + }; + const classes = useStyles(); + return ( +
+
+ + +
+

Ready to Use Sections

+
+ Build your page section by section! We have created multiple + options for you to put together and customise into pixel perfect + pages. From headers to footers, you will be able to choose the + best combination for your project. +
+ + + +
+
+
+
+
+ {renderContainerFluid(classes.photoGallery)} +
+
+ ); +} diff --git a/src/views/PricingPage/PricingPage.js b/src/views/PricingPage/PricingPage.js new file mode 100644 index 0000000..5405d42 --- /dev/null +++ b/src/views/PricingPage/PricingPage.js @@ -0,0 +1,133 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Parallax from "components/Parallax/Parallax"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Footer from "components/Footer/Footer"; +// sections for this page +import SectionPricing from "views/PricingPage/Sections/SectionPricing"; +import SectionFeatures from "views/PricingPage/Sections/SectionFeatures"; + +import pricingStyle from "assets/jss/react-material/views/pricingStyle"; + +const useStyles = makeStyles(pricingStyle); + +export default function PricingPage() { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 300, + color: "info", + }} + /> + + +
+ + +

Let{"'"}s get started

+

+ To get started, you will need to choose a plan for your needs. + You can opt in for the monthly of annual options and go with one + fo the three listed below. +

+
+
+
+
+
+
+ +
+ +
+
+
+ } + /> +
+ ); +} diff --git a/src/views/PricingPage/Sections/SectionFeatures.js b/src/views/PricingPage/Sections/SectionFeatures.js new file mode 100644 index 0000000..3715fdf --- /dev/null +++ b/src/views/PricingPage/Sections/SectionFeatures.js @@ -0,0 +1,63 @@ +import React from "react"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui icons +import CardMembership from "@material-ui/icons/CardMembership"; +import CardGiftCard from "@material-ui/icons/CardGiftcard"; +import AttachMoney from "@material-ui/icons/AttachMoney"; +import QuestionAnswer from "@material-ui/icons/QuestionAnswer"; + +import featuresStyle from "assets/jss/react-material/views/pricingSections/featuresStyle"; + +const useStyles = makeStyles(featuresStyle); + +export default function SectionFeatures() { + const classes = useStyles(); + return ( +
+
+

Frequently Asked Questions

+
+ + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/views/PricingPage/Sections/SectionPricing.js b/src/views/PricingPage/Sections/SectionPricing.js new file mode 100644 index 0000000..8c8d8ac --- /dev/null +++ b/src/views/PricingPage/Sections/SectionPricing.js @@ -0,0 +1,139 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import NavPills from "components/NavPills/NavPills"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import Button from "components/CustomButtons/Button"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; + +import pricingStyle from "assets/jss/react-material/views/pricingSections/pricingStyle"; + +const useStyles = makeStyles(pricingStyle); + +export default function SectionPricing() { + const classes = useStyles(); + return ( +
+ + + + + + + + + +
+ Free +
+

+ $0 /mo +

+
    +
  • + 1 Project +
  • +
  • + 5 Team Members +
  • +
  • + 55 Personal Contacts +
  • +
  • + 5.000 Messages +
  • +
+ +
+
+
+ + + +
Premium
+

+ $89 /mo +

+
    +
  • + 500 Project +
  • +
  • + 50 Team Members +
  • +
  • + 125 Personal Contacts +
  • +
  • + 15.000 Messages +
  • +
+ +
+
+
+ + + +
+ Platinum +
+

+ $199 /mo +

+
    +
  • + 1000 Project +
  • +
  • + 100 Team Members +
  • +
  • + 550 Personal Contacts +
  • +
  • + 50.000 Messages +
  • +
+ +
+
+
+
+
+ ); +} diff --git a/src/views/ProductPage/ProductPage.js b/src/views/ProductPage/ProductPage.js new file mode 100644 index 0000000..7e71acd --- /dev/null +++ b/src/views/ProductPage/ProductPage.js @@ -0,0 +1,538 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// react component used to create nice image meadia player +import ImageGallery from "react-image-gallery"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import FormControl from "@material-ui/core/FormControl"; +import Select from "@material-ui/core/Select"; +import MenuItem from "@material-ui/core/MenuItem"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import ShoppingCart from "@material-ui/icons/ShoppingCart"; +import LocalShipping from "@material-ui/icons/LocalShipping"; +import VerifiedUser from "@material-ui/icons/VerifiedUser"; +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import HeaderLinks from "components/Header/HeaderLinks"; +import Parallax from "components/Parallax/Parallax"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Footer from "components/Footer/Footer"; +import Button from "components/CustomButtons/Button"; +import Accordion from "components/Accordion/Accordion"; +import InfoArea from "components/InfoArea/InfoArea"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import Tooltip from "@material-ui/core/Tooltip"; + +import productStyle from "assets/jss/react-material/views/productStyle"; + +// images +import cardProduct1 from "assets/img/examples/card-product1.jpg"; +import cardProduct3 from "assets/img/examples/card-product3.jpg"; +import cardProduct4 from "assets/img/examples/card-product4.jpg"; +import cardProduct2 from "assets/img/examples/card-product2.jpg"; +import product1 from "assets/img/examples/product1.jpg"; +import product2 from "assets/img/examples/product2.jpg"; +import product3 from "assets/img/examples/product3.jpg"; +import product4 from "assets/img/examples/product4.jpg"; + +const useStyles = makeStyles(productStyle); + +export default function ProductPage() { + const [colorSelect, setColorSelect] = React.useState("0"); + const [sizeSelect, setSizeSelect] = React.useState("0"); + const classes = useStyles(); + const images = [ + { + original: product3, + thumbnail: product3, + }, + { + original: product4, + thumbnail: product4, + }, + { + original: product1, + thumbnail: product1, + }, + { + original: product2, + thumbnail: product2, + }, + ]; + return ( +
+
} + fixed + color="transparent" + changeColorOnScroll={{ + height: 100, + color: "rose", + }} + /> + +
+ + + + + +
+
+
+
+
+ + + { + return ( + + + + +
+
+ + + + + + + + + + + +
+
+

+ You may also be interested in: +

+ + + + + + cardProduct + + + +
+ Trending +
+

Dolce & Gabbana

+
+ Dolce & Gabbana{"'"}s {"'"}Greta{"'"} tote has been + crafted in Italy from hard-wearing red textured-leather. +
+
+ +
+

$1,459

+
+
+ + + +
+
+
+
+ + + + + cardProduct3 + + + +
Popular
+

Balmain

+
+ Balmain{"'"}s mid-rise skinny jeans are cut with stretch + to ensure they retain their second-skin fit but move + comfortably. +
+
+ +
+

$459

+
+
+ + + +
+
+
+
+ + + + + cardProduct4 + + + +
Popular
+

Balenciaga

+
+ Balenciaga{"'"}s black textured-leather wallet is finished + with the label{"'"}s iconic {"'"}Giant{"'"} studs. This is + where you can... +
+
+ +
+

$590

+
+
+ + + +
+
+
+
+ + + + + cardProduct2 + + + +
+ Trending +
+

Dolce & Gabbana

+
+ Dolce & Gabbana{"'"}s {"'"}Greta{"'"} tote has been + crafted in Italy from hard-wearing red textured-leather. +
+
+ +
+

$1,459

+
+
+ + + +
+
+
+
+
+
+
+
+
+ } + /> +
+ ); +} diff --git a/src/views/ProfilePage/ProfilePage.js b/src/views/ProfilePage/ProfilePage.js new file mode 100644 index 0000000..66a7662 --- /dev/null +++ b/src/views/ProfilePage/ProfilePage.js @@ -0,0 +1,548 @@ +/*eslint-disable*/ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Tooltip from "@material-ui/core/Tooltip"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Camera from "@material-ui/icons/Camera"; +import Palette from "@material-ui/icons/Palette"; +import People from "@material-ui/icons/People"; +import Add from "@material-ui/icons/Add"; +import Favorite from "@material-ui/icons/Favorite"; +// core components +import Header from "components/Header/Header"; +import Footer from "components/Footer/Footer"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import HeaderLinks from "components/Header/HeaderLinks"; +import NavPills from "components/NavPills/NavPills"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import Badge from "components/Badge/Badge"; +import Muted from "components/Typography/Muted"; +import Parallax from "components/Parallax/Parallax"; +import Clearfix from "components/Clearfix/Clearfix"; +import Button from "components/CustomButtons/Button"; + +import christian from "assets/img/faces/christian.jpg"; +import oluEletu from "assets/img/examples/olu-eletu.jpg"; +import clemOnojeghuo from "assets/img/examples/clem-onojeghuo.jpg"; +import cynthiaDelRio from "assets/img/examples/cynthia-del-rio.jpg"; +import mariyaGeorgieva from "assets/img/examples/mariya-georgieva.jpg"; +import clemOnojegaw from "assets/img/examples/clem-onojegaw.jpg"; +import darrenColeshill from "assets/img/examples/darren-coleshill.jpg"; +import avatar from "assets/img/faces/avatar.jpg"; +import marc from "assets/img/faces/marc.jpg"; +import kendall from "assets/img/faces/kendall.jpg"; +import cardProfile2Square from "assets/img/faces/card-profile2-square.jpg"; + +import profilePageStyle from "assets/jss/react-material/views/profilePageStyle"; + +const useStyles = makeStyles(profilePageStyle); + +export default function ProfilePage({ ...rest }) { + React.useEffect(() => { + window.scrollTo(0, 0); + document.body.scrollTop = 0; + }); + const classes = useStyles(); + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + return ( +
+
} + fixed + changeColorOnScroll={{ + height: 200, + color: "info", + }} + {...rest} + /> + +
+
+ + +
+
+ ... +
+
+

Christian Louboutin

+
DESIGNER
+ + + +
+
+
+ + + +
+
+
+
+

+ An artist of considerable range, Chet Faker — the name taken by + Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs + and records all of his own music, giving it a warm, intimate feel + with a solid groove structure.{" "} +

+
+
+ + +

Latest Collections

+ + + + + + Spring 2016 + + +

+ Stilleto +

+
+
+
+
+ + + + + Spring 2016 + + +

+ High Heels +

+
+
+
+
+ + + + + Summer 2016 + + +

+ Flats +

+
+
+
+
+ + + + + Winter 2016 + + +

+ Men{"'"}s Sneakers +

+
+
+
+
+
+
+ +

Stats

+
    +
  • + 60 Products +
  • +
  • + 4 Collections +
  • +
  • + 331 Influencers +
  • +
  • + 1.2K Likes +
  • +
+
+

About this work

+

+ French luxury footwear and fashion. The footwear has + incorporated shiny, red-lacquered soles that have + become his signature. +

+
+

Focus

+ Footwear + Luxury +
+ + ), + }, + { + tabButton: "Connections", + tabIcon: People, + tabContent: ( +
+ + + + + + + + ... + +
+ + + + +

+ Gigi Hadid +

+ +
MODEL
+
+

+ Don{"'"}t be scared of the truth because we + need to restart the human foundation in + truth... +

+
+
+ + + + + + + + + + ... + +
+ + + + +

+ Marc Jacobs +

+ +
DESIGNER
+
+

+ Don{"'"}t be scared of the truth because we + need to restart the human foundation in + truth... +

+
+
+ + + + + + + + + + + + ... + +
+ + + + +

+ Kendall Jenner +

+ +
MODEL
+
+

+ I love you like Kanye loves Kanye. Don + {"'"}t be scared of the truth. +

+
+
+ + + + + + + + + + ... + +
+ + + + +

+ George West +

+ +
MODEL/DJ
+
+

+ I love you like Kanye loves Kanye. +

+
+
+ + + + +
+ ), + }, + { + tabButton: "Media", + tabIcon: Camera, + tabContent: ( + + + ... + ... + + + ... + ... + ... + + + ), + }, + ]} + /> +
+ +
+
+
+ } + /> +
+ ); +} diff --git a/src/views/SectionsPage/Sections/SectionBlogs.js b/src/views/SectionsPage/Sections/SectionBlogs.js new file mode 100644 index 0000000..32dfd95 --- /dev/null +++ b/src/views/SectionsPage/Sections/SectionBlogs.js @@ -0,0 +1,537 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import TrendingUp from "@material-ui/icons/TrendingUp"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CardHeader from "components/Card/CardHeader"; +import Info from "components/Typography/Info"; +import Danger from "components/Typography/Danger"; +import Success from "components/Typography/Success"; +import Button from "components/CustomButtons/Button"; + +import blogsStyle from "assets/jss/react-material/views/sectionsSections/blogsStyle"; + +import cardBlog4 from "assets/img/examples/card-blog4.jpg"; +import office2 from "assets/img/office2.jpg"; +import blog5 from "assets/img/examples/blog5.jpg"; +import blog6 from "assets/img/examples/blog6.jpg"; +import blog7 from "assets/img/examples/blog7.jpg"; +import blog8 from "assets/img/examples/blog8.jpg"; +import bg5 from "assets/img/bg5.jpg"; + +const useStyles = makeStyles(blogsStyle); + +export default function SectionBlogs({ ...rest }) { + const classes = useStyles(); + return ( +
+ {/* Blogs 1 START */} +
+
+ + +

Latest Blogposts

+
+ + + + + e.preventDefault()}> + ... + +
+ + + + +
ENTERPRISE
+
+

+ e.preventDefault()}> + Autodesk looks to future of 3D printing with Project + Escher + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. Today, it’s + moving to a subscription model. Yet its own business model + disruption is only part of the story — and… + e.preventDefault()}> + {" "} + Read More{" "} + +

+

+ by{" "} + e.preventDefault()}> + Mike Butcher + {" "} + , 2 days ago +

+
+ + + + + + +
+ + TRENDING +
+
+

+ e.preventDefault()}> + 6 insights into the French Fashion landscape + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. Today, it’s + moving to a subscription model. Yet its own business model + disruption is only part of the story — and… + e.preventDefault()}> + {" "} + Read More{" "} + +

+

+ by{" "} + e.preventDefault()}> + Mike Butcher + {" "} + , 2 days ago +

+
+ + + e.preventDefault()}> + ... + +
+ + + + + + +
+
+ {/* Blogs 1 END */} + {/* Blogs 2 START */} +
+
+ + +

Latest Blogposts 2

+
+ + + + + e.preventDefault()}> + ... + +
+ + + +
ENTERPRISE
+
+

+ e.preventDefault()}> + Autodesk looks to future of 3D printing with Project + Escher + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a + traditional boxed software company selling licenses. + e.preventDefault()}> + {" "} + Read More{" "} + +

+
+ + + + + + e.preventDefault()}> + ... + +
+ + + +
STARTUPS
+
+

+ e.preventDefault()}> + Lyft launching cross-platform service this week + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a + traditional boxed software company selling licenses. + e.preventDefault()}> + {" "} + Read More{" "} + +

+
+ + + + + + e.preventDefault()}> + ... + +
+ + + +
+ + ENTERPRISE +
+
+

+ e.preventDefault()}> + 6 insights into the French Fashion landscape + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a + traditional boxed software company selling licenses. + e.preventDefault()}> + {" "} + Read More{" "} + +

+
+ + + + + +
+
+ {/* Blogs 2 END */} + {/* Blogs 3 START */} +
+
+ + +

Latest Blogposts 3

+
+ + + + + e.preventDefault()}> + ... + +
+
+ + + + +
ENTERPRISE
+
+

+ e.preventDefault()}> + Autodesk looks to future of 3D printing with Project + Escher + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. Today, it’s + moving to a subscription model. Yet its own business model + disruption is only part of the story — and… + e.preventDefault()}> + {" "} + Read More{" "} + +

+

+ by{" "} + e.preventDefault()}> + Mike Butcher + {" "} + , 2 days ago +

+
+ + + + + + + e.preventDefault()}> + ... + +
+
+ + + + +
+ + TRENDING +
+
+

+ e.preventDefault()}> + 6 insights into the French Fashion landscape + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. Today, it’s + moving to a subscription model. Yet its own business model + disruption is only part of the story — and… + e.preventDefault()}> + {" "} + Read More{" "} + +

+

+ by{" "} + e.preventDefault()}> + Mike Butcher + {" "} + , 2 days ago +

+
+ + + + + + + e.preventDefault()}> + ... + +
+
+ + + + +
STARTUPS
+
+

+ e.preventDefault()}> + Lyft launching cross-platform service this week + +

+

+ Like so many organizations these days, Autodesk is a + company in transition. It was until recently a traditional + boxed software company selling licenses. Today, it’s + moving to a subscription model. Yet its own business model + disruption is only part of the story — and… + e.preventDefault()}> + {" "} + Read More{" "} + +

+

+ by{" "} + e.preventDefault()}> + Megan Rose + {" "} + , 2 days ago +

+
+ + + + +
+
+ {/* Blogs 3 END */} + {/* Blogs 4 START */} +
+
+ + +

Latest Blogposts 4

+
+ + + e.preventDefault()}> + ... + +
+ + + +
FASHION
+
+

+ e.preventDefault()}> + Autodesk looks to future of 3D + +

+
+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye + loves Kanye I love Rick Owens’ bed design but the back is + too high for the beams and angle of the ceiling I also + wanted to point out that it’s the first album to go number 1 + off of streaming... +
+ +
+ + + + e.preventDefault()}> + ... + +
+ + + +
LIFESTYLE
+
+

+ e.preventDefault()}> + We will breathe clean air and exercise + +

+
+ Don{"'"}t be scared of the truth because we need to restart + the human foundation in truth And I love you like Kanye + loves Kanye I love Rick Owens’ bed design but the back is + too high for the beams and angle of the ceiling I also + wanted to point out that it’s the first album to go number 1 + off of streaming... +
+ +
+ + + +
+
+ {/* Blogs 4 END */} +
+ ); +} diff --git a/src/views/SectionsPage/Sections/SectionContacts.js b/src/views/SectionsPage/Sections/SectionContacts.js new file mode 100644 index 0000000..48eb963 --- /dev/null +++ b/src/views/SectionsPage/Sections/SectionContacts.js @@ -0,0 +1,366 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import Checkbox from "@material-ui/core/Checkbox"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +// @material-ui/icons +import PinDrop from "@material-ui/icons/PinDrop"; +import Phone from "@material-ui/icons/Phone"; +import Check from "@material-ui/icons/Check"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; +import Card from "components/Card/Card"; +import CardHeader from "components/Card/CardHeader"; +import CardBody from "components/Card/CardBody"; +import CardFooter from "components/Card/CardFooter"; +import CustomInput from "components/CustomInput/CustomInput"; +import Button from "components/CustomButtons/Button"; + +import contactsStyle from "assets/jss/react-material/views/sectionsSections/contactsStyle"; + +import city from "assets/img/examples/city.jpg"; + +const useStyles = makeStyles(contactsStyle); + +const RegularMap = () => { + const mapRef = React.useRef(null); + React.useEffect(() => { + let google = window.google; + let map = mapRef.current; + let lat = "44.43353"; + let lng = "26.093928"; + const myLatlng = new google.maps.LatLng(lat, lng); + const mapOptions = { + zoom: 14, + center: myLatlng, + scrollwheel: false, + zoomControl: true, + styles: [ + { + featureType: "water", + stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: "#0088ff" }], + }, + { + featureType: "road", + elementType: "geometry.fill", + stylers: [ + { hue: "#ff0000" }, + { saturation: -100 }, + { lightness: 99 }, + ], + }, + { + featureType: "road", + elementType: "geometry.stroke", + stylers: [{ color: "#808080" }, { lightness: 54 }], + }, + { + featureType: "landscape.man_made", + elementType: "geometry.fill", + stylers: [{ color: "#ece2d9" }], + }, + { + featureType: "poi.park", + elementType: "geometry.fill", + stylers: [{ color: "#ccdca1" }], + }, + { + featureType: "road", + elementType: "labels.text.fill", + stylers: [{ color: "#767676" }], + }, + { + featureType: "road", + elementType: "labels.text.stroke", + stylers: [{ color: "#ffffff" }], + }, + { featureType: "poi", stylers: [{ visibility: "off" }] }, + { + featureType: "landscape.natural", + elementType: "geometry.fill", + stylers: [{ visibility: "on" }, { color: "#b8cb93" }], + }, + { featureType: "poi.park", stylers: [{ visibility: "on" }] }, + { + featureType: "poi.sports_complex", + stylers: [{ visibility: "on" }], + }, + { featureType: "poi.medical", stylers: [{ visibility: "on" }] }, + { + featureType: "poi.business", + stylers: [{ visibility: "simplified" }], + }, + ], + }; + + map = new google.maps.Map(map, mapOptions); + + const marker = new google.maps.Marker({ + position: myLatlng, + map: map, + animation: google.maps.Animation.DROP, + title: "React Material!", + }); + + const contentString = + '

React Material

' + + "

A premium Kit for React, Material-UI, and React Hooks.

"; + + const infowindow = new google.maps.InfoWindow({ + content: contentString, + }); + + google.maps.event.addListener(marker, "click", function () { + infowindow.open(map, marker); + }); + }); + return ( + <> +
+ + ); +}; + +export default function SectionContacts({ ...rest }) { + const [checked, setChecked] = React.useState([]); + const handleToggle = (value) => { + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + setChecked(newChecked); + }; + const classes = useStyles(); + return ( +
+ {/* Contact us 1 START */} +
+
+ + +

Get in Touch

+
+ You need more information? Check what other persons are saying + about our product. They are very happy with their purchase. +
+ + Bld Mihail Kogalniceanu, nr. 8, +
7652 Bucharest, +
Romania + + } + icon={PinDrop} + /> + + Michael Jordan +
+40 762 321 762 +
Mon - Fri, 8:00-22:00 + + } + icon={Phone} + /> +
+ + +
+ +

Contact Us

+
+ + + + + + + + + + + + + + handleToggle(1)} + checkedIcon={ + + } + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="I'm not a robot" + /> + + + +
+
+
+
+
+ {/* Contact us 1 END */} + {/* Contact us 2 START */} +
+
+ +
+ + +
+ +

Contact Us

+
+ + + + + Michael Jordan +
+40 762 321 762 +
Mon - Fri, 8:00-22:00 + + } + icon={Phone} + iconColor="rose" + /> +
+ + + Bld Mihail Kogalniceanu, nr. 8, +
7652 Bucharest, +
Romania + + } + icon={PinDrop} + iconColor="rose" + /> +
+
+ + + + + + + + + +
+ + handleToggle(2)} + checkedIcon={} + icon={} + classes={{ + checked: classes.checked, + root: classes.checkRoot, + }} + /> + } + classes={{ label: classes.label }} + label="I'm not a robot" + /> + + + +
+
+
+ {/* Contact us 2 END */} +
+ ); +} diff --git a/src/views/SectionsPage/Sections/SectionFeatures.js b/src/views/SectionsPage/Sections/SectionFeatures.js new file mode 100644 index 0000000..06a6582 --- /dev/null +++ b/src/views/SectionsPage/Sections/SectionFeatures.js @@ -0,0 +1,380 @@ +import React from "react"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +// @material-ui/icons +import Chat from "@material-ui/icons/Chat"; +import VerifiedUser from "@material-ui/icons/VerifiedUser"; +import Fingerprint from "@material-ui/icons/Fingerprint"; +import GroupWork from "@material-ui/icons/GroupWork"; +import Airplay from "@material-ui/icons/Airplay"; +import LocationOn from "@material-ui/icons/LocationOn"; +import Extension from "@material-ui/icons/Extension"; +import ChildFriendly from "@material-ui/icons/ChildFriendly"; +import WatchLater from "@material-ui/icons/WatchLater"; +import Code from "@material-ui/icons/Code"; +import FormatPaint from "@material-ui/icons/FormatPaint"; +import Dashboard from "@material-ui/icons/Dashboard"; +import ViewCarousel from "@material-ui/icons/ViewCarousel"; +import AccessTime from "@material-ui/icons/AccessTime"; +import AttachMoney from "@material-ui/icons/AttachMoney"; +// core components +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import InfoArea from "components/InfoArea/InfoArea"; + +import featuresStyle from "assets/jss/react-material/views/sectionsSections/featuresStyle"; + +import iphone from "assets/img/sections/iphone.png"; +import iphone2 from "assets/img/sections/iphone2.png"; +import bg9 from "assets/img/bg9.jpg"; + +const useStyles = makeStyles(featuresStyle); + +export default function SectionFeatures({ ...rest }) { + const classes = useStyles(); + return ( +
+
+ {/* Feature 1 START */} +
+ + +

Why our product is the best

+
+ This is the paragraph where you can write more details about + your product. Keep you user engaged by providing meaningful + information. Remember that by this time, the user is curious, + otherwise he wouldn{"'"}t scroll to get here. Add a button if + you want the user to see more. +
+
+
+ + + + + + + + + + + +
+ {/* Feature 1 END */} + {/* Feature 2 START */} +
+ + +

Why our product is the best

+
+ This is the paragraph where you can write more details about + your product. Keep you user engaged by providing meaningful + information. +
+
+
+ + + +

+ The moment you use Material Kit, you know you’ve never + felt anything like it. With a single use, this powerfull + UI Kit lets you do more than ever before. +

+ e.preventDefault()}> + Find more... + + + } + iconColor="info" + /> +
+ + +

+ Divide details about your product or agency work into + parts. Write a few lines about each one. A paragraph + describing a feature will be enough. +

+ e.preventDefault()}> + Find more... + + + } + iconColor="danger" + /> +
+ + +

+ Divide details about your product or agency work into + parts. Write a few lines about each one. A paragraph + describing a feature will be enough. +

+ e.preventDefault()}> + Find more... + + + } + iconColor="success" + /> +
+
+
+ {/* Feature 2 END */} + {/* Feature 3 START */} +
+ + +
+ ... +
+
+ +

Your life will be much easier

+ + + +
+
+
+ {/* Feature 3 END */} + {/* Feature 4 START */} +
+ + +

Your life will be much easier

+
+ This is the paragraph where you can write more details about + your product. Keep you user engaged by providing meaningful + information. +
+
+
+ + + + + + +
+ ... +
+
+ + + + +
+
+ {/* Feature 4 END */} +
+ {/* Feature 5 START */} +
+ + +

Your life will be much easier

+
+
+ + + + The moment you use Material Kit, you know you’ve never + felt anything like it. With a single use, this powerfull + UI Kit lets you do more than ever before. +

+ } + iconColor="info" + /> +
+ + + Divide details about your product or agency work into + parts. Write a few lines about each one. A paragraph + describing a feature will be enough. +

+ } + iconColor="danger" + /> +
+ + + Divide details about your product or agency work into + parts. Write a few lines about each one. A paragraph + describing a feature will be enough. +

+ } + iconColor="primary" + /> +
+
+ + + + The moment you use Material Kit, you know you’ve never + felt anything like it. With a single use, this powerfull + UI Kit lets you do more than ever before. +

+ } + /> +
+ + + The moment you use Material Kit, you know you’ve never + felt anything like it. With a single use, this powerfull + UI Kit lets you do more than ever before. +

+ } + /> +
+ + + The moment you use Material Kit, you know you’ve never + felt anything like it. With a single use, this powerfull + UI Kit lets you do more than ever before. +

+ } + /> +
+
+
+
+
+ {/* Feature 5 END */} +
+ ); +} diff --git a/src/views/SectionsPage/Sections/SectionHeaders.js b/src/views/SectionsPage/Sections/SectionHeaders.js new file mode 100644 index 0000000..58b62e4 --- /dev/null +++ b/src/views/SectionsPage/Sections/SectionHeaders.js @@ -0,0 +1,526 @@ +import React from "react"; +// nodejs library that concatenates classes +import classNames from "classnames"; +// react component for creating beautiful carousel +import Carousel from "react-slick"; +// @material-ui/core components +import { makeStyles } from "@material-ui/core/styles"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +// @material-ui/icons +import Share from "@material-ui/icons/Share"; +import ShoppingCart from "@material-ui/icons/ShoppingCart"; +// core components +import Header from "components/Header/Header"; +import Button from "components/CustomButtons/Button"; +import GridContainer from "components/Grid/GridContainer"; +import GridItem from "components/Grid/GridItem"; +import Card from "components/Card/Card"; +import CardBody from "components/Card/CardBody"; +import CustomInput from "components/CustomInput/CustomInput"; + +import headersStyle from "assets/jss/react-material/views/sectionsSections/headersStyle"; + +import bg12 from "assets/img/bg12.jpg"; +import office2 from "assets/img/examples/office2.jpg"; +import dg1 from "assets/img/dg1.jpg"; +import dg2 from "assets/img/dg2.jpg"; +import dg3 from "assets/img/dg3.jpg"; + +const useStyles = makeStyles(headersStyle); + +export default function SectionHeaders({ ...rest }) { + const classes = useStyles(); + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: false, + }; + return ( + // we've set the className to cd-section so we can make smooth scroll to it +
+
+ {/* HEADER 1 START */} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ } + /> +
+
+ + +

Tesla Model 3.

+

+ There{"'"}s no doubt that Tesla is delighted with the + interest, but the data also raises a few questions. How long + will it take for Tesla to fulfill all those extra orders? +

+
+ +
+ +
+