From 16a2025ee75fb9b656404afdb566ab32d8069baa Mon Sep 17 00:00:00 2001
From: = <=>
Date: Wed, 2 Jun 2021 16:04:29 +0500
Subject: [PATCH 01/14] 123
---
.../css/components/2-layout/header.scss | 129 +++++++++---------
.../css/components/2-layout/responsive.scss | 68 +++++++++
.../css/components/2-layout/swiper.scss | 12 +-
.../assets/css/components/3-page/home.scss | 1 +
themes/modern2/assets/css/main.css | 84 ++++++++++++
themes/modern2/assets/js/menu.js | 16 ++-
themes/modern2/pages/index.htm | 42 +++++-
themes/modern2/partials/header.htm | 48 +++++--
themes/modern2/partials/slider.htm | 8 +-
9 files changed, 325 insertions(+), 83 deletions(-)
diff --git a/themes/modern2/assets/css/components/2-layout/header.scss b/themes/modern2/assets/css/components/2-layout/header.scss
index be4f25c79..50a29ec12 100755
--- a/themes/modern2/assets/css/components/2-layout/header.scss
+++ b/themes/modern2/assets/css/components/2-layout/header.scss
@@ -1,68 +1,71 @@
.header {
- position: relative;
- &::before {
- position: absolute;
- content: "";
- top: 0;
- left: 0;
- width: 100%;
- height: 4px;
- background: #00822c;
- }
- &__inner {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20px 0;
- }
- &__logo {
- width: 120px;
- }
- &__search {
- display: flex;
- align-items: center;
- &-input {
- width: 350px;
- position: relative;
- input {
- width: calc(100% - 60px);
- font-family: "roboto";
- padding: 14px 40px 14px 20px;
- font-size: $h4-size;
- line-height: $h4-size;
- color: rgba($color: $text-light-black, $alpha: 0.3);
- border-radius: 5px;
- border: 1px solid #c9c9c9;
- &::placeholder {
- font-family: "roboto";
- font-size: $h4-size;
- line-height: $h4-size;
- color: rgba($color: $text-light-black, $alpha: 0.3);
+ position: relative;
+ .mobileSearch {
+ display: none;
+ }
+ &::before {
+ position: absolute;
+ content: "";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: #00822c;
+ }
+ &__inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 0;
+ }
+ &__logo {
+ width: 120px;
+ }
+ &__search {
+ display: flex;
+ align-items: center;
+ &-input {
+ width: 350px;
+ position: relative;
+ input {
+ width: calc(100% - 60px);
+ font-family: "roboto";
+ padding: 14px 40px 14px 20px;
+ font-size: $h4-size;
+ line-height: $h4-size;
+ color: rgba($color: $text-light-black, $alpha: 0.3);
+ border-radius: 5px;
+ border: 1px solid #c9c9c9;
+ &::placeholder {
+ font-family: "roboto";
+ font-size: $h4-size;
+ line-height: $h4-size;
+ color: rgba($color: $text-light-black, $alpha: 0.3);
+ }
+ }
+ }
+ &-btn {
+ position: absolute;
+ top: 50%;
+ right: 20px;
+ @include transformY;
+ svg {
+ width: 18px;
+ height: 18px;
+ fill: $text-light-black;
+ }
}
- }
}
- &-btn {
- position: absolute;
- top: 50%;
- right: 20px;
- @include transformY;
- svg {
- width: 18px;
- height: 18px;
- fill: $text-light-black;
- }
+ &__slogan {
+ font-family: "Oswald", sans-serif;
+ color: $main-color;
+ font-weight: 700;
+ font-size: 40px;
+ line-height: 40px;
+ margin-right: 20px;
+ letter-spacing: -1.5px;
+ }
+ .hamBtn {
+ display: none;
}
- }
- &__slogan {
- font-family: "Oswald", sans-serif;
- color: $main-color;
- font-weight: 700;
- font-size: 40px;
- line-height: 40px;
- margin-right: 20px;
- letter-spacing: -1.5px;
- }
- .hamBtn {
- display: none;
- }
}
diff --git a/themes/modern2/assets/css/components/2-layout/responsive.scss b/themes/modern2/assets/css/components/2-layout/responsive.scss
index 64fc884f5..1775a9674 100755
--- a/themes/modern2/assets/css/components/2-layout/responsive.scss
+++ b/themes/modern2/assets/css/components/2-layout/responsive.scss
@@ -225,11 +225,69 @@
margin: 0;
}
}
+ .search {
+ &Modal {
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ transform: translateY(-100%);
+ -webkit-transform: translateY(-100%);
+ -moz-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ &__inner {
+ padding: 50px;
+ }
+ &.active {
+ transform: translateY(0);
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ }
+ &Input {
+ position: relative;
+ input {
+ width: calc(100% - 60px);
+ height: 50px;
+ padding: 0 40px 0 20px;
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ line-height: 1;
+ font-weight: 500;
+ color: $text-black;
+ }
+ }
+ }
+ &Logo {
+ width: 100%;
+ max-width: 160px;
+ margin: 30px auto;
+ }
+ &Close {
+ width: 24px;
+ height: 24px;
+ fill: #b4b4b4;
+ }
+ }
.header {
border-bottom: 4px solid #242424;
&__slogan {
display: none;
}
+ .mobileSearch {
+ display: block;
+ svg {
+ width: 22px;
+ height: 22px;
+ fill: #b4b4b4;
+ }
+ }
&__search {
display: none;
}
@@ -296,6 +354,16 @@
&::before {
display: none;
}
+ .dropDown {
+ position: unset;
+ width: unset;
+ background: unset;
+ &__link {
+ color: $text-color-white;
+ text-align: center;
+ padding: 20px 0;
+ }
+ }
}
}
}
diff --git a/themes/modern2/assets/css/components/2-layout/swiper.scss b/themes/modern2/assets/css/components/2-layout/swiper.scss
index 22da993c5..4f2447a7c 100755
--- a/themes/modern2/assets/css/components/2-layout/swiper.scss
+++ b/themes/modern2/assets/css/components/2-layout/swiper.scss
@@ -43,7 +43,7 @@
/* Center slide t ext vertically */
display: -webkit-box;
display: -ms-flexbox;
- display: -webkit-flex;
+ display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
@@ -61,6 +61,16 @@
position: absolute;
transform-origin: 0% 50%;
position: relative;
+ picture {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ img {
+ @include fullImage;
+ }
+ }
}
&-content {
position: absolute;
diff --git a/themes/modern2/assets/css/components/3-page/home.scss b/themes/modern2/assets/css/components/3-page/home.scss
index 1687464d3..14c188714 100755
--- a/themes/modern2/assets/css/components/3-page/home.scss
+++ b/themes/modern2/assets/css/components/3-page/home.scss
@@ -315,6 +315,7 @@
width: calc(50% - 40px);
margin: 0 20px;
position: relative;
+ cursor: pointer;
a.progressive {
position: relative;
display: block;
diff --git a/themes/modern2/assets/css/main.css b/themes/modern2/assets/css/main.css
index f23d5b228..009840133 100755
--- a/themes/modern2/assets/css/main.css
+++ b/themes/modern2/assets/css/main.css
@@ -117,6 +117,9 @@ li {
.header {
position: relative;
}
+.header .mobileSearch {
+ display: none;
+}
.header::before {
position: absolute;
content: "";
@@ -1098,6 +1101,19 @@ li {
transform-origin: 0% 50%;
position: relative;
}
+.swiper-slide-image picture {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.swiper-slide-image picture img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ -o-object-fit: cover;
+}
.swiper-slide-content {
position: absolute;
left: 0;
@@ -1504,6 +1520,7 @@ li {
width: calc(50% - 40px);
margin: 0 20px;
position: relative;
+ cursor: pointer;
}
.event__body-image a.progressive {
position: relative;
@@ -2213,12 +2230,69 @@ li {
margin: 0;
}
+ .searchModal {
+ position: fixed;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ transform: translateY(-100%);
+ -webkit-transform: translateY(-100%);
+ -moz-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ -o-transform: translateY(-100%);
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ }
+ .searchModal__inner {
+ padding: 50px;
+ }
+ .searchModal.active {
+ transform: translateY(0);
+ -webkit-transform: translateY(0);
+ -moz-transform: translateY(0);
+ -ms-transform: translateY(0);
+ -o-transform: translateY(0);
+ }
+ .searchModalInput {
+ position: relative;
+ }
+ .searchModalInput input {
+ width: calc(100% - 60px);
+ height: 50px;
+ padding: 0 40px 0 20px;
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ line-height: 1;
+ font-weight: 500;
+ color: #000;
+ }
+ .searchLogo {
+ width: 100%;
+ max-width: 160px;
+ margin: 30px auto;
+ }
+ .searchClose {
+ width: 24px;
+ height: 24px;
+ fill: #b4b4b4;
+ }
+
.header {
border-bottom: 4px solid #242424;
}
.header__slogan {
display: none;
}
+ .header .mobileSearch {
+ display: block;
+ }
+ .header .mobileSearch svg {
+ width: 22px;
+ height: 22px;
+ fill: #b4b4b4;
+ }
.header__search {
display: none;
}
@@ -2288,6 +2362,16 @@ li {
.subheader__inner .nav__inner-link::before {
display: none;
}
+ .subheader__inner .nav__inner-link .dropDown {
+ position: unset;
+ width: unset;
+ background: unset;
+ }
+ .subheader__inner .nav__inner-link .dropDown__link {
+ color: #ffffff;
+ text-align: center;
+ padding: 20px 0;
+ }
.subheader__inner .language {
position: absolute;
bottom: 0;
diff --git a/themes/modern2/assets/js/menu.js b/themes/modern2/assets/js/menu.js
index bafe612ff..f93450f07 100644
--- a/themes/modern2/assets/js/menu.js
+++ b/themes/modern2/assets/js/menu.js
@@ -3,8 +3,20 @@ var menu = document.getElementById("menu");
var menuBtn = document.getElementById("menuBtn");
var closeMenu = document.getElementById("closeMenu");
menuBtn.onclick = function () {
- menu.classList.add("showMenu");
+ menu.classList.add("showMenu");
};
closeMenu.onclick = function () {
- menu.classList.remove("showMenu");
+ menu.classList.remove("showMenu");
+};
+
+
+
+var searchModal = document.getElementById("searchModal");
+var searchBtn = document.getElementById("menuBtn");
+var searchClose = document.getElementById("searchClose");
+searchBtn.onclick = function () {
+ searchModal.classList.add("active");
+};
+searchClose.onclick = function () {
+ searchModal.classList.remove("active");
};
diff --git a/themes/modern2/pages/index.htm b/themes/modern2/pages/index.htm
index 03d927196..2369d77fb 100644
--- a/themes/modern2/pages/index.htm
+++ b/themes/modern2/pages/index.htm
@@ -125,5 +125,45 @@ random = 0
+
+
+
+
+
+
+
+
+
+
+