summaryrefslogtreecommitdiff
path: root/assets/css/scss/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/scss/components')
-rw-r--r--assets/css/scss/components/.DS_Storebin0 -> 6148 bytes
-rw-r--r--assets/css/scss/components/_blog.scss148
-rw-r--r--assets/css/scss/components/_cookie-consent.scss17
-rw-r--r--assets/css/scss/components/_fullscreen-menu.scss165
-rw-r--r--assets/css/scss/components/_gallery.scss155
-rw-r--r--assets/css/scss/components/_header.scss772
-rw-r--r--assets/css/scss/components/_masonry.scss97
-rw-r--r--assets/css/scss/components/_portfolio.scss563
-rw-r--r--assets/css/scss/components/_preloader.scss219
-rw-r--r--assets/css/scss/components/_section.scss125
-rw-r--r--assets/css/scss/components/_shop.scss323
11 files changed, 2584 insertions, 0 deletions
diff --git a/assets/css/scss/components/.DS_Store b/assets/css/scss/components/.DS_Store
new file mode 100644
index 0000000..db24788
--- /dev/null
+++ b/assets/css/scss/components/.DS_Store
Binary files differ
diff --git a/assets/css/scss/components/_blog.scss b/assets/css/scss/components/_blog.scss
new file mode 100644
index 0000000..22264ec
--- /dev/null
+++ b/assets/css/scss/components/_blog.scss
@@ -0,0 +1,148 @@
+//
+// Blog Styles //
+//
+@include breakpoint-less(md) {
+ .sidebar-wrapper {
+ display: none;
+ }
+}
+
+.sidebar-box {
+ border: 1px solid $border-grey;
+ margin-bottom: 20px;
+ padding: 30px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 30px;
+ text-align: center;
+ }
+ .list-category {
+ list-style-type: none;
+ padding: 0;
+ li {
+ margin: 0;
+ padding: 7px 0;
+ border-bottom: 1px solid $border-grey;
+ &:first-child {
+ padding-top: 0;
+ }
+ &:last-child {
+ padding-bottom: 0;
+ border: 0;
+ }
+ a {
+ display: block;
+ span {
+ float: right;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+ .popular-post {
+ position: relative;
+ margin-bottom: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ img {
+ float: left;
+ width: 80px;
+ }
+ div {
+ padding-left: 100px;
+ h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 0;
+ text-align: left;
+ }
+ a {
+ @include transition(linear 0.1s);
+ }
+ span {
+ font-size: 14px;
+ }
+ }
+ &:after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+ }
+ .tags {
+ padding: 0;
+ li {
+ display: inline-block;
+ margin: 0 3px 6px 0;
+ a {
+ display: inline-block;
+ background: $button-grey-lighter;
+ padding: 5px 10px;
+ font-size: 14px;
+ &:hover, &:focus {
+ background: $button-grey;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+}
+div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
+ .sidebar-box {
+ border-color: $color-white-02;
+ .list-category {
+ li {
+ border-color: $color-white-02;
+ }
+ }
+ .tags {
+ li {
+ a {
+ background: $color-black-08;
+ color: $color-white-07;
+ &:hover, &:focus {
+ background: $color-black-09;
+ color: $color-white;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Comment box //
+//
+.comment-box {
+ position: relative;
+ margin-bottom: 30px;
+ padding-left: 80px;
+ .comment-user-avatar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: $bg-grey;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 60px;
+ img {
+ width: 60px;
+ height: 60px;
+ }
+ }
+ .comment-content {
+ position: relative;
+ .comment-time {
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-align: right;
+ color: $color-primary-lighter;
+ font-style: italic;
+ font-size: 14px;
+ }
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_cookie-consent.scss b/assets/css/scss/components/_cookie-consent.scss
new file mode 100644
index 0000000..6ce2f5b
--- /dev/null
+++ b/assets/css/scss/components/_cookie-consent.scss
@@ -0,0 +1,17 @@
+//
+// Cookie Consent //
+//
+#cookie-consent {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 997;
+ visibility: visible;
+ opacity: 1;
+ @include transition(ease-out 0.2s);
+ &.consent-hidden {
+ visibility: hidden;
+ opacity: 0;
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_fullscreen-menu.scss b/assets/css/scss/components/_fullscreen-menu.scss
new file mode 100644
index 0000000..c77c23b
--- /dev/null
+++ b/assets/css/scss/components/_fullscreen-menu.scss
@@ -0,0 +1,165 @@
+//
+// Fullscreen Menu Styles //
+//
+.fm-toggle {
+ margin-left: auto;
+ cursor: pointer;
+ @include transition(ease-out 0.2s);
+ .lines {
+ position: relative;
+ display: inline-block;
+ background: $color-black;
+ width: 25px;
+ height: 2px;
+ margin: 0;
+ padding: 0;
+ vertical-align: middle;
+ @include transition(linear 0.12s);
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ background: $color-black;
+ width: 25px;
+ height: 2px;
+ display: inline-block;
+ @include transition(linear 0.12s);
+ }
+ &:before { top: -7px;}
+ &:after { bottom: -7px;}
+ }
+ @include breakpoint-above(lg) {
+ .lines {
+ &:before { @include transform(scaleX(0.8)); @include transform-origin(100% 50%); }
+ &:after { @include transform(scaleX(0.6)); @include transform-origin(100% 50%); }
+ }
+ &:hover {
+ .lines {
+ &:before { @include transform(scaleX(1)); }
+ &:after { @include transform(scaleX(1)); }
+ }
+ }
+ }
+}
+.header {
+ &.dark, &.black, &.absolute-light {
+ .fm-toggle {
+ .lines, .lines:before, .lines:after { background: $color-white; }
+ }
+ }
+}
+
+//
+// Fullscreen Menu //
+//
+.fullscreen-menu {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 996;
+ visibility: hidden;
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ @include transition(ease-out 0.2s);
+ .fm-wrapper {
+ @include transform(scale(0.98));
+ height: 100%;
+ @include transition(ease-out 0.2s);
+ .position-top,
+ .position-middle,
+ .position-bottom {
+ padding: 0 30px;
+ }
+ @include breakpoint-above(md) {
+ .position-top,
+ .position-middle,
+ .position-bottom {
+ padding: 0 50px;
+ }
+ .position-top { top: 50px; }
+ .position-bottom { bottom: 50px; }
+ }
+ .fm-close {
+ position: absolute;
+ top: 50px;
+ right: 50px;
+ cursor: pointer;
+ span {
+ position: relative;
+ display: inline-block;
+ opacity: 0.8;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ @include transition(ease-out 0.18s);
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 14px;
+ height: 2px;
+ border-radius: 2px;
+ @include transition(ease-out 0.18s);
+ }
+ &:before { @include transform(translate(-50%, -50%) rotate(45deg)) }
+ &:after { @include transform(translate(-50%, -50%) rotate(-45deg)) }
+ }
+ &:hover {
+ span {
+ opacity: 1;
+ &:before { @include transform(translate(-50%, -50%) rotate(180deg)) }
+ &:after { @include transform(translate(-50%, -50%) rotate(180deg)) }
+ }
+ }
+ }
+ @include breakpoint-less(md) {
+ .fm-close {
+ top: 30px;
+ right: 30px;
+ }
+ }
+ @include breakpoint-less(sm) {
+ .fm-close {
+ top: 20px;
+ right: 20px;
+ span {
+ width: 50px;
+ height: 50px;
+ }
+ }
+ }
+ }
+ &.fm-show {
+ visibility: visible;
+ opacity: 1;
+ .fm-wrapper {
+ @include transform(scale(1));
+ }
+ }
+}
+div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
+ &.fullscreen-menu {
+ .fm-wrapper {
+ .fm-close {
+ span {
+ background: $color-white-01;
+ &:before, &:after { background: $color-white; }
+ }
+ }
+ }
+ }
+}
+.bg-grey, .bg-grey-lighter, .bg-grey-lightest, div[class^='bg-white'], div[class*=' bg-white'] {
+ &.fullscreen-menu {
+ .fm-wrapper {
+ .fm-close {
+ span {
+ background: $color-black-01;
+ &:before, &:after { background: $color-black; }
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_gallery.scss b/assets/css/scss/components/_gallery.scss
new file mode 100644
index 0000000..11509b6
--- /dev/null
+++ b/assets/css/scss/components/_gallery.scss
@@ -0,0 +1,155 @@
+//
+// Gallery Styles //
+//
+.gallery-wrapper {
+ margin: 0;
+ div[class^="col-"], div[class*=" col-"] {
+ margin: 0;
+ }
+ .gallery-box {
+ .gallery-img {
+ position: relative;
+ overflow: hidden;
+ a {
+ display: block;
+ &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ opacity: 0;
+ background: $color-white-01;
+ width: 100%;
+ height: 100%;
+ @include transition(ease-out 0.12s);
+ }
+ img {
+ @include transform(scale(1));
+ width: 100%;
+ @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+ }
+ &:hover {
+ &:before {
+ opacity: 1;
+ }
+ img {
+ @include transform(scale(1.04));
+ }
+ }
+ .gallery-title {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include transform(translate(-50%,-50%));
+ z-index: 2;
+ background: $color-white;
+ padding: 10px 20px;
+ h1, h2, h3, h4, h5, h6 {
+ display: inline-block;
+ margin: 0;
+ }
+ }
+ }
+ }
+ }
+ //
+ // Gallery box Spacings //
+ //
+ &.spacing-0, &.no-spacing {
+ div[class^="col-"]:not(.row) {
+ margin-bottom: 0;
+ padding: 0;
+ }
+ }
+ &.spacing-6 {
+ div[class^="col-"]:not(.row) {
+ margin-bottom: 6px;
+ padding: 0 3px;
+ }
+ }
+ &.spacing-10 {
+ div[class^="col-"]:not(.row) {
+ margin-bottom: 10px;
+ padding: 0 5px;
+ }
+ }
+ &.spacing-20 {
+ div[class^="col-"]:not(.row) {
+ margin-bottom: 20px;
+ padding: 0 10px;
+ }
+ }
+ &.spacing-30 {
+ div[class^="col-"]:not(.row) {
+ margin-bottom: 30px;
+ padding: 0 15px;
+ }
+ }
+ //
+ // Gallery Image Hover Styles //
+ //
+ &.hover-style-2 {
+ .gallery-box {
+ .gallery-img {
+ a {
+ &:before { background: $color-black-01; }
+ }
+ }
+ }
+ }
+ //
+ // Gallery Image border-radius //
+ //
+ &[class*=' border-radius'], &[class^='border-radius'] {
+ .gallery-box {
+ .gallery-img {
+ @include transform(translate3d(0,0,0));
+ overflow: hidden;
+ }
+ }
+ }
+ &.border-radius-025 {
+ .gallery-box .gallery-img { border-radius: 0.25em; }
+ }
+ &.border-radius-0375 {
+ .gallery-box .gallery-img { border-radius: 0.375em; }
+ }
+ &.border-radius-05 {
+ .gallery-box .gallery-img { border-radius: 0.5em; }
+ }
+ &.border-radius-10 {
+ .gallery-box .gallery-img { border-radius: 1.0em; }
+ }
+ &.border-radius-15 {
+ .gallery-box .gallery-img { border-radius: 1.5em; }
+ }
+ &.border-radius-20 {
+ .gallery-box .gallery-img { border-radius: 2.0em; }
+ }
+ &.border-radius-25 {
+ .gallery-box .gallery-img { border-radius: 2.5em; }
+ }
+ &.border-radius-30 {
+ .gallery-box .gallery-img { border-radius: 3.0em; }
+ }
+}
+
+.container {
+ .gallery-wrapper {
+ &.spacing-0, &.no-spacing { margin: 0; }
+ &.spacing-6 { margin: 0 -3px -6px; }
+ &.spacing-10 { margin: 0 -5px -10px; }
+ &.spacing-20 { margin: 0 -10px -20px; }
+ &.spacing-30 { margin: 0 -15px -30px; }
+ }
+}
+.container-fluid {
+ .gallery-wrapper {
+ &.spacing-0, &.no-spacing { margin: 0 -30px; }
+ &.spacing-6 { margin: 0 -27px; }
+ &.spacing-10 { margin: 0 -25px; }
+ &.spacing-20 { margin: 0 -20px; }
+ &.spacing-30 { margin: 0 -15px; }
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_header.scss b/assets/css/scss/components/_header.scss
new file mode 100644
index 0000000..444bf94
--- /dev/null
+++ b/assets/css/scss/components/_header.scss
@@ -0,0 +1,772 @@
+//
+// Header Menu //
+//
+.header {
+ top: 0;
+ z-index: 993;
+ overflow: visible;
+ background: $color-white;
+ width: 100%;
+ height: 80px;
+ @include transition(ease-in-out 0.2s);
+ &.hide {
+ @include transform(translateY(-100%));
+ }
+ .container, .container-fluid {
+ @include display-flex;
+ align-items: center;
+ height: 100%;
+ }
+ .header-logo {
+ display: inline-block;
+ .logo-light {
+ display: none;
+ }
+ * {
+ @include transition(linear 0.1s);
+ }
+ h1,h2,h3,h4,h5,h6 {
+ margin: 0;
+ }
+ img {
+ width: auto;
+ height: 54px;
+ max-height: 54px;
+ }
+ a {
+ color: $color-dark;
+ &:hover { color: $color-dark; }
+ }
+ }
+ .header-toggle {
+ position: relative;
+ display: inline-block;
+ width: 28px;
+ height: 28px;
+ margin-left: auto;
+ cursor: pointer;
+ span {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ @include transform(translateY(-50%));
+ background: $color-dark;
+ width: 100%;
+ height: 2px;
+ border-radius: 2px;
+ @include transition(linear 0.1s);
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ background: $color-dark;
+ width: 100%;
+ height: 2px;
+ border-radius: 2px;
+ @include transition(linear 0.1s);
+ }
+ &:before { top: -7px; }
+ &:after { bottom: -7px; }
+ }
+ &.toggle-close {
+ span {
+ background: transparent;
+ &:before { top: 0; bottom: 0; @include transform(rotate(-45deg)); }
+ &:after { top: 0; bottom: 0; @include transform(rotate(45deg)); }
+ }
+ }
+ }
+ .header-menu {
+ display: inline-block;
+ font-size: 14px;
+ z-index: 995;
+ .nav {
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+ .nav-item {
+ text-align: left;
+ .nav-link {
+ padding: 0;
+ font-family: $font-family-tertiary;
+ letter-spacing: -0.2px;
+ color: $color-dark;
+ &:hover, &.active {
+ color: $color-dark;
+ }
+ }
+ .nav-dropdown-toggle {
+ position: relative;
+ display: inline-block;
+ &:after {
+ content: '\f107';
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 12px;
+ }
+ }
+ .nav-dropdown {
+ background: $color-white;
+ h1,h2,h3,h4,h5,h6 { color: $color-dark; }
+ a {
+ &:not(.button, .button-circle) {
+ color: $color-primary;
+ &:hover, &:focus { color: $color-dark; }
+ }
+ }
+ .nav-dropdown-item {
+ .nav-subdropdown-toggle {
+ position: absolute;
+ &:after {
+ content: '\f105';
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ }
+ }
+ &.font-2 {
+ .nav {
+ .nav-item {
+ .nav-link {
+ font-size: 13px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ }
+ }
+ }
+ }
+ }
+ .header-menu-extra {
+ a {
+ &:not(.button, .button-circle) {
+ color: $color-dark;
+ &:hover, &:focus { color: $color-dark; }
+ }
+ }
+ }
+ //
+ // Positions //
+ //
+ &.sticky-autohide, &.sticky {
+ position: fixed;
+ top: 0;
+ left: 0;
+ @include box-shadow(0 0 36px 0 rgba(22,25,28,0.17));
+ }
+}
+
+//
+// Header BG Colors //
+//
+.header {
+ &.absolute-dark, &.absolute-light,
+ &.absolute-dark.dark, &.absolute-light.dark,
+ &.absolute-dark.black, &.absolute-light.black {
+ &:not(.sticky-autohide, .sticky) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ background: transparent;
+ @include box-shadow(none);
+ }
+ &.dark, &.black, &.absolute-light {
+ &.border-top, &.border-bottom {
+ border-color: $color-white-01;
+ }
+ }
+ &.absolute-light {
+ .header-logo {
+ .logo-dark {
+ display: none;
+ }
+ .logo-light {
+ display: inline-block;
+ }
+ h1,h2,h3,h4,h5,h6 { color: $color-white; }
+ a {
+ color: $color-white;
+ &:hover { color: $color-white; }
+ }
+ }
+ .header-toggle {
+ span {
+ background: $color-white;
+ &:before, &:after { background: $color-white; }
+ }
+ &.toggle-close {
+ span {
+ background: transparent;
+ }
+ }
+ }
+ @include breakpoint-above(lg) {
+ .header-menu {
+ .nav {
+ .nav-item {
+ .nav-link, .nav-dropdown-toggle {
+ color: $color-white;
+ &:hover, &:focus, &.active { color: $color-white; }
+ }
+ .nav-link {
+ &:before {
+ background: $color-white-015;
+ }
+ }
+ }
+ }
+ }
+ }
+ .header-menu-extra {
+ a {
+ &:not(.button, .button-circle) {
+ color: $color-white;
+ &:hover, &:focus { color: $color-white; }
+ }
+ }
+ }
+ }
+ &.dark, &.black {
+ &:not(.absolute-dark) {
+ .header-logo {
+ .logo-dark {
+ display: none;
+ }
+ .logo-light {
+ display: inline-block;
+ }
+ h1,h2,h3,h4,h5,h6 { color: $color-white; }
+ a {
+ color: $color-white;
+ &:hover { color: $color-white; }
+ }
+ }
+ @include breakpoint-above(lg) {
+ .header-menu {
+ .nav {
+ .nav-item {
+ .nav-link, .nav-dropdown-toggle {
+ color: $color-white;
+ &:hover, &:focus, &.active { color: $color-white; }
+ }
+ .nav-link {
+ &:before {
+ background: $color-white-015;
+ }
+ }
+ }
+ }
+ }
+ }
+ .header-menu-extra {
+ a {
+ &:not(.button, .button-circle) {
+ color: $color-white;
+ &:hover, &:focus { color: $color-white; }
+ }
+ }
+ }
+ .header-toggle {
+ span {
+ background: $color-white;
+ &:before, &:after { background: $color-white; }
+ }
+ &.toggle-close {
+ span {
+ background: transparent;
+ }
+ }
+ }
+ }
+ }
+ &.dark { background: $bg-dark; }
+ &.black { background: $color-black; }
+}
+
+@include breakpoint-above(lg) {
+ .header {
+ //
+ // Sizes //
+ //
+ .header-menu {
+ height: 80px;
+ }
+ &.header-lg {
+ .header-logo {
+ img {
+ height: 64px;
+ max-height: 64px;
+ }
+ }
+ .header-menu {
+ height: 90px;
+ }
+ }
+ &.header-xl {
+ .header-logo {
+ img {
+ height: 74px;
+ max-height: 74px;
+ }
+ }
+ .header-menu {
+ height: 100px;
+ }
+ }
+ //
+ // Alignments //
+ //
+ &:not(.left, .center) {
+ .header-menu {
+ margin-left: auto;
+ }
+ }
+ &.left {
+ .header-logo {
+ margin-right: 30px;
+ }
+ .header-menu {
+ margin-right: auto;
+ }
+ }
+ &.center {
+ .header-logo {
+ margin-right: auto;
+ }
+ .header-menu {
+ .nav {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ @include transform(translateX(-50%));
+ width: auto;
+ text-align: center;
+ }
+ }
+ }
+ .header-menu {
+ .nav {
+ .nav-item {
+ position: relative;
+ display: inline-block;
+ height: 100%;
+ margin: 0 0 0 20px;
+ &:first-child {
+ margin-left: 0;
+ }
+ .nav-link {
+ display: inline-block;
+ line-height: 80px;
+ &:before {
+ position: absolute;
+ right: 0;
+ bottom: 22px;
+ left: 0;
+ content: '';
+ background: $bg-grey;
+ height: 0;
+ @include transition(all 0.14s cubic-bezier(0.165, 0.84, 0.44, 1));
+ }
+ &.d-toggle {
+ padding-right: 14px;
+ }
+ }
+ .nav-dropdown-toggle {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ @include transform(translateY(-50%));
+ color: $color-dark;
+ &:hover {
+ color: $color-dark;
+ }
+ }
+ .nav-dropdown {
+ position: absolute;
+ top: 83px;
+ left: 0;
+ @include transform(translateY(10px));
+ z-index: 995;
+ visibility: hidden;
+ opacity: 0;
+ background: $color-white;
+ width: 240px;
+ border-radius: 0.375em;
+ @include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
+ padding: 15px 0;
+ @include transition(ease-out 0.14s);
+ .nav-dropdown-item {
+ position: relative;
+ display: block;
+ margin: 0;
+ padding: 0 15px;
+ .nav-dropdown-link {
+ position: relative;
+ display: block;
+ border-radius: 0.375em;
+ padding: 7px 15px;
+ @include transition(linear 0.06s);
+ &:hover {
+ background: $bg-grey;
+ }
+ &.sd-toggle {
+ &:after {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ @include transform(translateY(-50%));
+ content: '\f105';
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 12px;
+ }
+ }
+ }
+ .nav-subdropdown-toggle {
+ display: none;
+ }
+ .nav-subdropdown {
+ position: absolute;
+ top: -15px;
+ left: 243px;
+ visibility: hidden;
+ opacity: 0;
+ background: $color-white;
+ width: 240px;
+ border-radius: 0.375em;
+ @include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
+ padding: 15px;
+ @include transition(linear 0.06s);
+ .nav-subdropdown-item {
+ display: block;
+ margin: 0;
+ .nav-subdropdown-link {
+ display: block;
+ border-radius: 0.375em;
+ padding: 7px 15px;
+ @include transition(linear 0.06s);
+ &:hover {
+ background: $bg-grey;
+ }
+ }
+ }
+ }
+ &:hover {
+ .nav-subdropdown {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ }
+ }
+ &:hover {
+ .nav-link {
+ &:before {
+ height: 6px;
+ }
+ }
+ .nav-dropdown {
+ @include transform(translateY(0));
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ }
+ }
+ &.dropdown-dark, &.dropdown-black {
+ .nav {
+ .nav-item {
+ .nav-dropdown {
+ h1,h2,h3,h4,h5,h6 { color: $color-white; }
+ a {
+ &:not(.button, .button-circle) {
+ color: $color-white-08;
+ &:hover, &:focus { color: $color-white; }
+ }
+ }
+ .nav-dropdown-item {
+ .nav-dropdown-link {
+ &:hover {
+ background: $color-white-01;
+ }
+ }
+ .nav-subdropdown {
+ .nav-subdropdown-item {
+ .nav-subdropdown-link {
+ &:hover {
+ background: $color-white-01;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &.dropdown-dark {
+ .nav {
+ .nav-item {
+ .nav-dropdown {
+ background: $color-dark;
+ .nav-dropdown-item {
+ .nav-subdropdown {
+ background: $color-dark;
+ }
+ }
+ }
+ }
+ }
+ }
+ &.dropdown-black {
+ .nav {
+ .nav-item {
+ .nav-dropdown {
+ background: $color-black;
+ .nav-dropdown-item {
+ .nav-subdropdown {
+ background: $color-black;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &.absolute-dark {
+ .header-menu {
+ .nav {
+ .nav-item {
+ .nav-link {
+ &:before {
+ background: $color-black-005;
+ }
+ }
+ }
+ }
+ }
+ }
+ .header-menu-extra {
+ display: inline-block;
+ margin-left: 30px;
+ }
+ .header-toggle {
+ display: none;
+ }
+ &:not(.center, .left) {
+ .header-menu {
+ .nav {
+ .nav-item {
+ &:last-child,
+ &:nth-last-child(2) {
+ .nav-dropdown {
+ right: 0;
+ left: auto;
+ .nav-dropdown-item {
+ .nav-subdropdown {
+ right: 243px;
+ left: auto;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .container-fluid {
+ .header-menu {
+ .nav {
+ .nav-item {
+ .nav-dropdown {
+ right: 0;
+ left: auto;
+ .nav-dropdown-item {
+ .nav-subdropdown {
+ right: 243px;
+ left: auto;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+@include breakpoint-less(md) {
+ .header {
+ height: 70px;
+ .header-menu {
+ position: fixed;
+ top: 0;
+ left: -100%;
+ overflow-y: auto;
+ background: $color-white;
+ width: 300px;
+ height: 100%;
+ @include box-shadow(0 0 36px 0 rgba(22,25,28,0.17));
+ padding: 20px 30px;
+ @include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+ &.show {
+ left: 0;
+ }
+ .nav {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ .nav-item {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: auto;
+ margin: 0;
+ border-bottom: 1px solid $border-grey;
+ padding: 14px 0;
+ &:last-child {
+ border: 0;
+ }
+ .nav-link {
+ display: inline-block;
+ width: auto;
+ height: auto;
+ color: $color-primary;
+ &:hover, &:focus, &.active { color: $color-dark; }
+ }
+ .nav-dropdown-toggle {
+ position: absolute;
+ top: 14px;
+ right: 0;
+ width: 22px;
+ height: 22px;
+ text-align: right;
+ &.active {
+ color: $color-dark;
+ }
+ }
+ .nav-dropdown {
+ display: none;
+ background: $color-white;
+ padding: 8px 0 0 20px;
+ &.show {
+ display: block;
+ }
+ .nav-dropdown-item {
+ position: relative;
+ margin: 0 0 8px;
+ &:last-child {
+ margin: 0;
+ }
+ .nav-dropdown-link {
+ &.active {
+ color: $color-dark;
+ }
+ }
+ .nav-subdropdown-toggle {
+ top: 0;
+ right: 0;
+ width: 21px;
+ height: 21px;
+ text-align: right;
+ &:after {
+ content: '\f107';
+ }
+ }
+ .nav-subdropdown {
+ display: none;
+ padding: 8px 0 0 20px;
+ &.show {
+ display: block;
+ }
+ li {
+ margin: 0 0 8px;
+ &:last-child {
+ margin: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .header-menu-extra {
+ position: absolute;
+ top: 50%;
+ right: 80px;
+ left: auto;
+ @include transform(translateY(-50%));
+ }
+ }
+}
+
+//
+// Header Sizes //
+//
+@include breakpoint-above(lg) {
+ .header-lg {
+ height: 90px;
+ .container-fluid {
+ padding: 0 40px;
+ }
+ .header-menu {
+ .nav {
+ .nav-item {
+ .nav-link {
+ line-height: 90px;
+ &:before {
+ bottom: 27px;
+ }
+ }
+ .nav-dropdown {
+ top: 93px;
+ }
+ }
+ }
+ }
+ }
+ .header-xl {
+ height: 100px;
+ .container-fluid {
+ padding: 0 50px;
+ }
+ .header-menu {
+ .nav {
+ .nav-item {
+ .nav-link {
+ line-height: 100px;
+ &:before {
+ bottom: 32px;
+ }
+ }
+ .nav-dropdown {
+ top: 103px;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Placeholders for Sticky Header //
+//
+.header-placeholder { height: 80px; }
+.header-placeholder-lg { height: 90px; }
+.header-placeholder-xl { height: 100px; }
+@include breakpoint-less(md) {
+ .header-placeholder, .header-placeholder-lg, .header-placeholder-xl { height: 70px; }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_masonry.scss b/assets/css/scss/components/_masonry.scss
new file mode 100644
index 0000000..7952612
--- /dev/null
+++ b/assets/css/scss/components/_masonry.scss
@@ -0,0 +1,97 @@
+//
+// Masonry Styles //
+//
+.masonry {
+ margin: 0 -15px -30px;
+ .masonry-item {
+ margin-bottom: 30px;
+ padding: 0 15px;
+ }
+ //
+ // Masonry - Columns //
+ //
+ &.masonry-column-1 {
+ .masonry-item { width: 100%; }
+ }
+ &.masonry-column-2 {
+ @include breakpoint-above(md) {
+ .masonry-item { width: 50%; }
+ }
+ }
+ &.masonry-column-3 {
+ @include breakpoint-above(md) {
+ .masonry-item { width: 50%; }
+ }
+ @include breakpoint-above(lg) {
+ .masonry-item { width: 33.33%; }
+ }
+ }
+ &.masonry-column-4 {
+ @include breakpoint-above(sm) {
+ .masonry-item { width: 50%; }
+ }
+ @include breakpoint-above(md) {
+ .masonry-item { width: 33.33%; }
+ }
+ @include breakpoint-above(lg) {
+ .masonry-item { width: 25%; }
+ }
+ }
+ &.masonry-column-5 {
+ @extend .column-4;
+ @include breakpoint-above(xl) {
+ .masonry-item { width: 20%; }
+ }
+ }
+ &.masonry-column-6 {
+ @extend .column-4;
+ @include breakpoint-above(xl) {
+ .masonry-item { width: 16.66%; }
+ }
+ }
+ //
+ // Masonry - Item Spacings //
+ //
+ &.masonry-spacing-0 {
+ margin: 0;
+ .masonry-item {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ &.masonry-spacing-6 {
+ margin: 0 -3px -6px;
+ .masonry-item {
+ margin-bottom: 6px;
+ padding: 0 3px;
+ }
+ }
+ &.masonry-spacing-10 {
+ margin: 0 -5px -10px;
+ .masonry-item {
+ margin-bottom: 10px;
+ padding: 0 5px;
+ }
+ }
+ &.masonry-spacing-20 {
+ margin: 0 -10px -20px;
+ .masonry-item {
+ margin-bottom: 20px;
+ padding: 0 10px;
+ }
+ }
+ &.masonry-spacing-40 {
+ margin: 0 -20px -40px;
+ .masonry-item {
+ margin-bottom: 40px;
+ padding: 0 20px;
+ }
+ }
+ &.masonry-spacing-50 {
+ margin: 0 -25px -50px;
+ .masonry-item {
+ margin-bottom: 50px;
+ padding: 0 25px;
+ }
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_portfolio.scss b/assets/css/scss/components/_portfolio.scss
new file mode 100644
index 0000000..4b8d002
--- /dev/null
+++ b/assets/css/scss/components/_portfolio.scss
@@ -0,0 +1,563 @@
+//
+// Portfolio Styles //
+//
+.portfolio-wrapper {
+ &.row {
+ margin: 0;
+ div[class^="col-"], div[class*=" col-"] {
+ margin: 0;
+ }
+ }
+ .portfolio-item {
+ width: 100%;
+ text-align: left;
+ }
+ //
+ // Portfolio Columns //
+ //
+ &.column-1 {
+ .portfolio-item { width: 100%; }
+ }
+ &.column-2 {
+ @include breakpoint-above(md) {
+ .portfolio-item { width: 50%; }
+ }
+ }
+ &.column-3 {
+ @include breakpoint-above(md) {
+ .portfolio-item { width: 50%; }
+ }
+ @include breakpoint-above(lg) {
+ .portfolio-item { width: 33.33%; }
+ }
+ }
+ &.column-4 {
+ @include breakpoint-above(sm) {
+ .portfolio-item { width: 50%; }
+ }
+ @include breakpoint-above(md) {
+ .portfolio-item { width: 33.33%; }
+ }
+ @include breakpoint-above(lg) {
+ .portfolio-item { width: 25%; }
+ }
+ }
+ &.column-5 {
+ @extend .column-4;
+ @include breakpoint-above(xl) {
+ .portfolio-item { width: 20%; }
+ }
+ }
+ &.column-6 {
+ @extend .column-4;
+ @include breakpoint-above(xl) {
+ .portfolio-item { width: 16.66%; }
+ }
+ }
+ //
+ // Portfolio box spacings //
+ //
+ &.spacing-0, &.no-spacing {
+ .portfolio-item { padding: 0; }
+ }
+ &.spacing-6 {
+ .portfolio-item { padding: 3px; }
+ }
+ &.spacing-10 {
+ .portfolio-item { padding: 5px; }
+ }
+ &.spacing-20 {
+ .portfolio-item { padding: 10px; }
+ }
+ &.spacing-30 {
+ .portfolio-item { padding: 15px; }
+ }
+ &.spacing-40 {
+ .portfolio-item { padding: 20px; }
+ }
+ &.spacing-50 {
+ .portfolio-item { padding: 25px; }
+ }
+ //
+ // Portfolio box border-radius //
+ //
+ &[class*=' border-radius'], &[class^='border-radius'] {
+ .portfolio-item {
+ .portfolio-box {
+ @include transform(translate3d(0,0,0));
+ overflow: hidden;
+ }
+ }
+ }
+ &.border-radius-025 {
+ .portfolio-item .portfolio-box { border-radius: 0.25em; }
+ }
+ &.border-radius-0375 {
+ .portfolio-item .portfolio-box { border-radius: 0.375em; }
+ }
+ &.border-radius-05 {
+ .portfolio-item .portfolio-box { border-radius: 0.5em; }
+ }
+ &.border-radius-10 {
+ .portfolio-item .portfolio-box { border-radius: 1.0em; }
+ }
+ &.border-radius-15 {
+ .portfolio-item .portfolio-box { border-radius: 1.5em; }
+ }
+ &.border-radius-20 {
+ .portfolio-item .portfolio-box { border-radius: 2.0em; }
+ }
+ &.border-radius-25 {
+ .portfolio-item .portfolio-box { border-radius: 2.5em; }
+ }
+ &.border-radius-30 {
+ .portfolio-item .portfolio-box { border-radius: 3.0em; }
+ }
+}
+.text-center {
+ .portfolio-item { text-align: center; }
+}
+.text-right {
+ .portfolio-item { text-align: right; }
+}
+
+.container {
+ .portfolio-wrapper {
+ &.spacing-0, &.no-spacing { margin: 0; }
+ &.spacing-6 { margin: -3px; }
+ &.spacing-10 { margin: -5px; }
+ &.spacing-20 { margin: -10px; }
+ &.spacing-30 { margin: -15px; }
+ &.spacing-40 { margin: -20px; }
+ &.spacing-50 { margin: -25px; }
+ }
+}
+.container-fluid {
+ .portfolio-wrapper {
+ margin: 0 -30px;
+ &.spacing-0, &.no-spacing { margin: 0 -30px; }
+ &.spacing-6 { margin: -3px -27px 3px; }
+ &.spacing-10 { margin: -5px -25px 5px; }
+ &.spacing-20 { margin: -10px -20px 10px; }
+ &.spacing-30 { margin: -15px -15px 15px; }
+ &.spacing-40 { margin: -20px -10px 20px; }
+ &.spacing-50 { margin: -25px -5px 25px; }
+ }
+}
+
+//
+// Portfolio Filter Styles //
+//
+.filter {
+ margin-bottom: 70px;
+ ul {
+ margin: 0 -5px;
+ padding: 0;
+ li {
+ display: inline-block;
+ background: $button-grey-lighter;
+ border-radius: 30px;
+ margin: 0 5px;
+ padding: 7px 15px;
+ font: 400 13px $font-family-tertiary;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ cursor: pointer;
+ @include transition(linear 0.1s);
+ &:hover {
+ background: $button-grey;
+ }
+ &.active, &.mixitup-control-active {
+ background: $bg-dark;
+ color: $color-white;
+ }
+ }
+ }
+ //
+ // Filter Font Styles //
+ //
+ &.filter-font-2 {
+ ul {
+ li {
+ font-size: 15px;
+ letter-spacing: -0.2px;
+ text-transform: none;
+ }
+ }
+ }
+ //
+ // Filter Styles //
+ //
+ &.filter-style-2 {
+ ul {
+ margin: 0 -2px;
+ li {
+ background: transparent;
+ margin: 0 2px;
+ color: $color-primary;
+ &:hover, &.active, &.mixitup-control-active {
+ color: $color-dark;
+ }
+ &.active, &.mixitup-control-active {
+ background: $button-grey-lighter;
+ }
+ }
+ }
+ }
+ &.filter-style-3 {
+ ul {
+ margin: 0 -14px -8px;
+ li {
+ position: relative;
+ background: transparent;
+ margin: 0 14px 8px;
+ padding: 0;
+ color: $color-primary;
+ &:after {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: -1px;
+ left: 0;
+ background: $color-dark;
+ height: 1px;
+ @include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
+ }
+ &:hover, &.active, &.mixitup-control-active {
+ color: $color-dark;
+ }
+ &.active, &.mixitup-control-active {
+ &:after {
+ width: 100%;
+ @include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
+ }
+ }
+ }
+ }
+ }
+ &.filter-style-4 {
+ ul {
+ margin: 0 -14px -7px;
+ li {
+ background: transparent;
+ margin: 0 14px 7px;
+ padding: 0;
+ color: $color-primary-lighter;
+ &:hover, &.active, &.mixitup-control-active {
+ background: transparent;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+}
+div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
+ .filter {
+ ul {
+ li {
+ background: transparent;
+ color: $color-white-07;
+ &:hover {
+ background: transparent;
+ color: $color-white;
+ }
+ &.active, &.mixitup-control-active {
+ background: $color-white;
+ color: $color-dark;
+ }
+ }
+ }
+ &.filter-style-2 {
+ ul {
+ li {
+ color: $color-white-07;
+ &:hover, &.active, &.mixitup-control-active {
+ color: $color-white;
+ }
+ &.active, &.mixitup-control-active {
+ background: $color-white;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+ &.filter-style-3 {
+ ul {
+ li {
+ color: $color-white-07;
+ &:after {
+ background: $color-white;
+ }
+ &:hover, &.active, &.mixitup-control-active {
+ color: $color-white;
+ }
+ &.active, &.mixitup-control-active {
+ background: transparent;
+ }
+ }
+ }
+ }
+ &.filter-style-4 {
+ ul {
+ li {
+ background: transparent;
+ color: $color-white-07;
+ &:hover, &.active, &.mixitup-control-active {
+ background: transparent;
+ color: $color-white;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Hover Styles //
+//
+.portfolio-item {
+ .portfolio-box {
+ position: relative;
+ .portfolio-img {
+ position: relative;
+ overflow: hidden;
+ img {
+ @include transform(scale(1));
+ width: 100%;
+ @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+ }
+ }
+ a {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+ .portfolio-title {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ background: $color-black-04;
+ width: 100%;
+ height: 100%;
+ color: $color-white-07;
+ @include transition(ease-out 0.12s);
+ div {
+ position: absolute;
+ left: 30px;
+ bottom: 30px;
+ * {
+ opacity: 0;
+ @include transform(translateY(5px));
+ margin-bottom: 7px;
+ @include transition(ease-out 0.12s);
+ &:first-child { @include transition-delay(0.05s); }
+ &:last-child { @include transition-delay(0.10s); margin-bottom: 0; }
+ }
+ h1,h2,h3,h4,h5,h6 {
+ color: $color-white;
+ }
+ span {
+ display: inline-block;
+ }
+ }
+ }
+ &:hover {
+ .portfolio-img {
+ img {
+ @include transform(scale(1.04));
+ @include filter(blur(1.5px));
+ }
+ }
+ .portfolio-title {
+ opacity: 1;
+ * {
+ opacity: 1;
+ @include transform(translateY(0));
+ }
+ }
+ }
+ }
+}
+
+//
+// Hover Style 2 //
+//
+.hover-style-2 {
+ .portfolio-item {
+ .portfolio-box {
+ .portfolio-title {
+ opacity: 1;
+ background: $color-black-01;
+ div {
+ top: 30px;
+ bottom: auto;
+ * {
+ opacity: 1;
+ @include transform(translateY(0));
+ @include transition(ease-out 0.12s);
+ }
+ }
+ i {
+ position: absolute;
+ right: 30px;
+ bottom: 30px;
+ @include transform(translateY(5px));
+ opacity: 0;
+ color: $color-white;
+ @include transition(ease-out 0.12s);
+ }
+ }
+ &:hover {
+ .portfolio-title {
+ background: $color-black-03;
+ i {
+ @include transform(translateY(0));
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Hover Style 3 //
+//
+.hover-style-3 {
+ .portfolio-item {
+ .portfolio-box {
+ overflow: hidden;
+ .portfolio-title {
+ top: auto;
+ right: auto;
+ bottom: 0;
+ left: 0;
+ @include transform(translateY(100%));
+ opacity: 1;
+ background: $bg-dark;
+ height: auto;
+ padding: 15px 30px;
+ @include transition(transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1));
+ div {
+ position: static;
+ opacity: 1;
+ * {
+ @include transform(translateY(0));
+ opacity: 1;
+ margin-bottom: 0;
+ }
+ h1,h2,h3,h4,h5,h6 {
+ float: left;
+ }
+ span {
+ float: right;
+ display: initial;
+ }
+ }
+ }
+ &:hover {
+ .portfolio-img {
+ img {
+ @include transform(translateY(-20px));
+ @include filter(blur(0));
+ }
+ }
+ .portfolio-title {
+ @include transform(translateY(0));
+ }
+ }
+ }
+ }
+}
+
+//
+// Hover Style 4 //
+//
+.hover-style-4 {
+ .portfolio-item {
+ .portfolio-box {
+ overflow: hidden;
+ .portfolio-title {
+ background: $color-white-01;
+ color: $color-primary;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ bottom: 20px;
+ left: 20px;
+ background: $color-white;
+ @include transition(ease-out 0.12s);
+ }
+ div {
+ top: 50%;
+ bottom: auto;
+ left: 0;
+ @include transform(translateY(-50%));
+ z-index: 1;
+ opacity: 0;
+ width: 100%;
+ padding: 0 50px;
+ text-align: center;
+ @include transition(ease-out 0.12s);
+ h1,h2,h3,h4,h5,h6 {
+ color: $color-dark;
+ }
+ span {
+ margin: 0;
+ }
+ }
+ }
+ &:hover {
+ .portfolio-img {
+ img {
+ @include transform(scale(1));
+ @include filter(blur(0));
+ }
+ }
+ .portfolio-title {
+ div {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Hover Style 5 //
+//
+.hover-style-5 {
+ .portfolio-item {
+ .portfolio-box {
+ .portfolio-title {
+ background: $color-white-09;
+ color: $color-primary;
+ div {
+ top: 50%;
+ left: 50%;
+ bottom: auto;
+ @include transform(translate(-50%,-50%));
+ text-align: center;
+ h1,h2,h3,h4,h5,h6 {
+ color: $color-dark;
+ }
+ }
+ }
+ &:hover {
+ .portfolio-title {
+ div {
+ @include transform(translate(-50%,-50%));
+ }
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_preloader.scss b/assets/css/scss/components/_preloader.scss
new file mode 100644
index 0000000..93f28d0
--- /dev/null
+++ b/assets/css/scss/components/_preloader.scss
@@ -0,0 +1,219 @@
+//
+// Preloader Styles //
+//
+body {
+ &:after {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 998;
+ background: $color-white;
+ width: 100%;
+ height: 100%;
+ }
+ &.loaded {
+ &:after {
+ display: none;
+ }
+ }
+}
+
+.preloader {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ visibility: visible;
+ opacity: 1;
+ background: $color-white;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ div {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include transform(translate(-50%,-50%));
+ }
+ &.dark {
+ background: $color-black;
+ }
+}
+.loaded {
+ .preloader {
+ visibility: hidden;
+ opacity: 0;
+ @include transition(ease-out 0.3s);
+ }
+}
+
+//
+// Preloader 1 //
+//
+.preloader-1 {
+ div {
+ position: relative;
+ width: 70px;
+ height: 70px;
+ .loader-circular {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ transform-origin: center center;
+ width: 70px;
+ height: 70px;
+ margin: auto;
+ animation: loader-one-rotate 2s linear infinite;
+ }
+ .loader-path {
+ fill: none;
+ stroke: $color-dark;
+ stroke-width: 2.5;
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ stroke-linecap: round;
+ stroke-miterlimit: 10;
+ animation: loader-one-dash 1.5s ease-in-out infinite;
+ }
+ }
+ &.dark {
+ div {
+ .loader-path {
+ stroke: $color-white;
+ }
+ }
+ }
+}
+
+@keyframes loader-one-rotate {
+ 100% { transform: rotate(360deg); }
+}
+@keyframes loader-one-dash {
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -35px;
+ }
+ 100% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -124px;
+ }
+}
+
+//
+// Preloader 2 //
+//
+.preloader-2 {
+ div {
+ span {
+ display: inline-block;
+ opacity: 0.2;
+ background: $color-black;
+ background: linear-gradient(to right, $color-black 10%, transparent 40%);
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ @include animation(loader-two 0.6s infinite linear);
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ &:before {
+ background: $color-black;
+ width: 50%;
+ height: 50%;
+ border-radius: 100% 0 0 0;
+ }
+ &:after {
+ right: 0;
+ bottom: 0;
+ background: $color-white;
+ width: 90%;
+ height: 90%;
+ margin: auto;
+ border-radius: 50%;
+ }
+ }
+ }
+ &.dark {
+ div {
+ span {
+ background: $color-white;
+ background: linear-gradient(to right, $color-white 10%, transparent 40%);
+ &:before {
+ background: $color-white;
+ }
+ &:after {
+ background: $color-black;
+ }
+ }
+ }
+ }
+}
+@keyframes loader-two {
+ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-webkit-keyframes loader-two {
+ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+//
+// Preloader 3 //
+//
+.preloader-3 {
+ div {
+ width: 50px;
+ height: 50px;
+ span {
+ position: relative;
+ display: block;
+ &:before, &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: $color-black-01;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ }
+ &:before { @include animation(loader-three-bounceIn 1.2s infinite ease-in-out); }
+ &:after { @include animation(loader-three-bounceOut 1.2s infinite ease-in-out); }
+ }
+ }
+ &.dark {
+ div {
+ span {
+ &:before, &:after {
+ background: $color-white-01;
+ }
+ }
+ }
+ }
+}
+@-webkit-keyframes loader-three-bounceIn {
+ 0%, 100% { -webkit-transform: scale(0); }
+ 50% { -webkit-transform: scale(1.0); }
+}
+@keyframes loader-three-bounceIn {
+ 0%, 100% { -webkit-transform: scale(0); transform: scale(0); }
+ 50% { -webkit-transform: scale(1.0); transform: scale(1.0); }
+}
+@-webkit-keyframes loader-three-bounceOut {
+ 0%, 100% { -webkit-transform: scale(1.0); }
+ 50% { -webkit-transform: scale(0); }
+}
+@keyframes loader-three-bounceOut {
+ 0%, 100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
+ 50% { -webkit-transform: scale(0); transform: scale(0); }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_section.scss b/assets/css/scss/components/_section.scss
new file mode 100644
index 0000000..efc3b95
--- /dev/null
+++ b/assets/css/scss/components/_section.scss
@@ -0,0 +1,125 @@
+//
+// Sections Styles //
+//
+.section-xs {
+ padding: 50px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 50px 30px; }
+ }
+}
+.section-sm {
+ padding: 70px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 70px 30px; }
+ }
+}
+.section, .section-md {
+ padding: 100px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 100px 30px; }
+ }
+}
+.section-lg {
+ padding: 160px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 160px 30px; }
+ }
+}
+.section-xl {
+ padding: 200px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 200px 30px; }
+ }
+}
+.section-2xl {
+ padding: 240px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 240px 30px; }
+ }
+}
+@include breakpoint-less(sm) {
+ .section-xs {
+ padding: 30px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 30px 30px; }
+ }
+ }
+ .section-sm {
+ padding: 50px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 50px 30px; }
+ }
+ }
+ .section, .section-md {
+ padding: 80px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 80px 30px; }
+ }
+ }
+ .section-lg {
+ padding: 120px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 120px 30px; }
+ }
+ }
+ .section-xl {
+ padding: 160px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 160px 30px; }
+ }
+ }
+ .section-2xl {
+ padding: 180px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 180px 30px; }
+ }
+ }
+}
+@include breakpoint-less(xs) {
+ .section, .section-md {
+ padding: 70px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 70px 30px; }
+ }
+ }
+ .section-lg {
+ padding: 100px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 100px 30px; }
+ }
+ }
+ .section-xl {
+ padding: 140px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 120px 30px; }
+ }
+ }
+ .section-2xl {
+ padding: 160px 0;
+ &.bg-image {
+ .container, .container-fluid { padding: 140px 30px; }
+ }
+ }
+}
+.section-xs,
+.section-sm,
+.section, .section-md,
+.section-lg,
+.section-xl,
+.section-2xl {
+ &.bg-image {
+ padding: 0;
+ }
+}
+
+.section-fullscreen {
+ width: 100%;
+ height: 100vh;
+ div[class^='bg-black'], div[class*=' bg-black'],
+ div[class^='bg-white'], div[class*=' bg-white'],
+ div[class^='bg-dark'], div[class*=' bg-dark'],
+ div[class^='bg-grey'], div[class*=' bg-grey'],
+ .container, .container-fluid {
+ height: 100%;
+ }
+} \ No newline at end of file
diff --git a/assets/css/scss/components/_shop.scss b/assets/css/scss/components/_shop.scss
new file mode 100644
index 0000000..2bd5faf
--- /dev/null
+++ b/assets/css/scss/components/_shop.scss
@@ -0,0 +1,323 @@
+//
+// Shop styles //
+//
+.product-box {
+ .product-img {
+ position: relative;
+ @include transform(translate3d(0,0,0));
+ overflow: hidden;
+ .product-img-link {
+ display: block;
+ }
+ img {
+ @include transform(scale(1));
+ @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
+ }
+ .product-badge-left, .product-badge-right {
+ position: absolute;
+ top: 16px;
+ z-index: 2;
+ font-size: 14px;
+ background: $color-black-04;
+ padding: 8px 11px;
+ border-radius: 40px;
+ font: 500 12px $font-family-tertiary;
+ line-height: 1;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ * {
+ color: $color-white;
+ }
+ h1,h2,h3,h4,h5,h6 {
+ margin: 0;
+ }
+ &.red {
+ background: $color-red;
+ }
+ &.green {
+ background: $color-green;
+ }
+ }
+ .product-badge-left {
+ left: 16px;
+ }
+ .product-badge-right {
+ right: 16px;
+ }
+ .add-to-cart {
+ position: absolute;
+ right: 16px;
+ bottom: 16px;
+ left: 16px;
+ @include transform(translateY(4px));
+ z-index: 2;
+ visibility: hidden;
+ opacity: 0;
+ background: $color-white;
+ padding: 16px;
+ text-align: center;
+ @include transition(ease-out 0.16s);
+ a {
+ &:not([class*=' button'], [class^='button']) {
+ color: $color-primary;
+ font: 500 13px $font-family-tertiary;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ &:hover, &:focus { color: $color-dark; }
+ }
+ }
+ }
+ &:hover, &:focus {
+ img {
+ @include transform(scale(1.04));
+ }
+ .add-to-cart {
+ @include transform(translateY(0));
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ }
+ .product-title {
+ position: relative;
+ padding: 24px 0 20px;
+ h1,h2,h3,h4,h5,h6 {
+ margin-bottom: 4px;
+ line-height: 1.4;
+ }
+ .price {
+ span {
+ display: inline-block;
+ }
+ del {
+ opacity: 0.7;
+ margin-right: 4px;
+ }
+ ins {
+ text-decoration: none;
+ }
+ }
+ }
+}
+
+.product-carousel-thumbnails {
+ padding: 6px 0 0;
+ li {
+ list-style-type: none;
+ display: inline-block;
+ margin-right: 2px;
+ a {
+ display: inline-block;
+ opacity: 0.6;
+ @include transition(ease-out 0.16s);
+ img {
+ max-width: 100px;
+ }
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+}
+
+.product-price {
+ del {
+ opacity: 0.7;
+ margin-right: 8px;
+ }
+ ins {
+ text-decoration: none;
+ }
+}
+
+.product-quantity {
+ .qnt {
+ position: relative;
+ display: inline-block;
+ width: auto;
+ margin-right: 30px;
+ input {
+ width: 100px;
+ height: 34px;
+ border: 0;
+ padding: 0;
+ text-align: center;
+ &::-webkit-outer-spin-button,
+ &::-webkit-inner-spin-button {
+ display: none;
+ -webkit-appearance: none;
+ margin: 0;
+ }
+ &[type=number] {
+ -moz-appearance: textfield;
+ }
+ }
+ .dec, .inc {
+ position: absolute;
+ top: 0;
+ background: $bg-grey;
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+ color: transparent;
+ text-align: center;
+ @include transition(linear 0.1s);
+ &:before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include transform(translate(-50%,-50%));
+ background: $color-dark;
+ width: 11px;
+ height: 1px;
+ }
+ &:hover {
+ background: $button-grey;
+ }
+ }
+ .dec {
+ left: 0;
+ }
+ .inc {
+ right: 0;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ @include transform(translate(-50%,-50%));
+ background: $color-dark;
+ width: 1px;
+ height: 11px;
+ }
+ }
+ }
+}
+.product-info-box {
+ border: 1px solid $border-grey;
+ padding: 40px;
+ @include breakpoint-less(md) {
+ padding: 30px;
+ }
+ .nav {
+ justify-content: center;
+ margin: 0 -15px 30px;
+ .nav-item {
+ margin: 0 15px;
+ .nav-link {
+ position: relative;
+ padding: 0 0 1px;
+ font-weight: 400;
+ font-family: $font-family-tertiary;
+ letter-spacing: -0.2px;
+ &:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: $color-dark;
+ height: 1px;
+ @include transition(ease-out 0.24s);
+ @include animation(button-line-out 0.24s ease-out both);
+ }
+ &.active {
+ color: $color-dark;
+ &:before {
+ width: 100%;
+ @include animation(button-line-in 0.24s ease-out both);
+ }
+ }
+ }
+ }
+ }
+ .table {
+ margin: 0;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 0;
+ font-size: 15px;
+ tr {
+ &:first-child {
+ th, td {
+ border: 0;
+ }
+ }
+ }
+ th, td {
+ border-top: 1px solid $border-grey;
+ padding: 14px 20px 14px 0;
+ }
+ th {
+ font-weight: $font-weight-regular;
+ }
+ td {
+ color: $color-primary;
+ }
+ }
+}
+
+.cart-table {
+ margin: 0;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 0;
+ font-size: 14px;
+ thead {
+ th,td {
+ border-bottom: 1px solid $border-grey;
+ font-weight: 600;
+ }
+ }
+ th, td {
+ border-top: 0;
+ border-bottom: 1px solid $border-grey;
+ padding: 20px 20px 20px 0;
+ vertical-align: middle;
+ }
+ th {
+ font-weight: $font-weight-regular;
+ }
+ td {
+ color: $color-primary;
+ }
+ .product-thumbnail {
+ img {
+ max-width: 100px;
+ }
+ }
+ .product-quantity {
+ .qnt {
+ margin: 0;
+ input {
+ margin: 0;
+ }
+ }
+ }
+}
+
+.cart-totals {
+ margin: 0;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 0;
+ font-size: 14px;
+ tr {
+ &:first-child {
+ th, td {
+ border: 0;
+ }
+ }
+ }
+ th, td {
+ border-top: 1px solid $border-grey;
+ padding: 20px 20px 20px 0;
+ }
+ th {
+ font-weight: $font-weight-regular;
+ }
+ td {
+ color: $color-primary;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-22 07:46:27 +0000