TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch '1.1' of https://github.com/merdiano/orient-site into 1.1

This commit is contained in:
root 2022-03-25 09:54:09 +00:00
parent 7d6419cc5c e16199725f
commit 540bb0fc0f
35 changed files with 8620 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
themes/modern2/template/css (old)/ajax-loader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

90
themes/modern2/template/css (old)/components/1-main/mixin.scss Normal file
View File

@ -0,0 +1,90 @@
@mixin transition {
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
@mixin transition-bg {
transition: background 0.2s ease-in-out 0s;
-moz-transition: background 0.2s ease-in-out 0s;
}
@mixin transition-border {
transition: border 0.2s ease-in-out 0s;
-moz-transition: border 0.2s ease-in-out 0s;
}
@mixin fullImage {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
@mixin transformY {
transform: translateY(-50%);
-moz-ransform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
@mixin transformX {
transform: translateX(-50%);
-moz-ransform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
@mixin transform {
transform: translate(-50%, -50%);
-moz-ransform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
@mixin transformReset {
transform: translate(0, 0);
-moz-ransform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
@mixin rotate {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
@mixin rotate180deg {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
@mixin rotate270deg {
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}
@mixin xxsm-xsm {
@media (max-width: 374px) { @content; }
}
@mixin xsm-sm {
@media (max-width: 540px) { @content; }
}
@mixin sm-md {
@media (max-width: 700px) { @content; }
}
@mixin md-lg {
@media (max-width: 768px) { @content; }
}
@mixin lg-xlg {
@media (max-width: 1024px) { @content; }
}
@mixin xlg-xxlg {
@media (max-width: 1400px) { @content; }
}
@mixin xxlg-xxxlg {
@media (max-width: 1640px) { @content; }
}

102
themes/modern2/template/css (old)/components/1-main/nulifier.scss Normal file
View File

@ -0,0 +1,102 @@
/***
====================================================================
Reset
====================================================================
***/
// :root {
// font-size: calc(1vw + 0.6em);
// }
* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
}
button {
outline: none;
}
button:focus {
outline: none;
}
button:focus {
outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: #000;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
a {
text-decoration: none;
cursor: pointer;
color: #000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
font-weight: normal;
margin: 0px;
background: none;
line-height: 1.6em;
}
/* Typography */
h1 {
font-size: 4em;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 34px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 18px;
}
p {
position: relative;
line-height: 1.8em;
}
.auto__container {
position: relative;
max-width: 1440px;
padding: 0px;
margin: 0 auto;
}
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
.mr-top-bot {
margin: 80px 0;
}

16
themes/modern2/template/css (old)/components/1-main/variables.scss Normal file
View File

@ -0,0 +1,16 @@
$main-color: #fd4c24;
$text-light-black: #242424;
$text-black: #000;
$text-color-white: #ffffff;
$text-color-grey: #a2a2a2;
$color-grey: #b4b4b4;
$p-size: 16px;
$p-height: 26px;
$h2-size: 22px;
$h2-height: 28px;
$h3-size: 20px;
$h3-height: 24px;
$h4-size: 16px;
$h4-height: 20px;
$h5-size: 14px;
$h5-height: 20px;

31
themes/modern2/template/css (old)/components/2-layout/footer.scss Normal file
View File

@ -0,0 +1,31 @@
.footer {
background: $text-light-black;
padding: 30px 0;
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
&__copyright {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-white;
a {
color: $text-color-white;
margin-left: 10px;
}
}
&__social {
display: flex;
align-items: center;
&-link {
fill: $text-color-white;
margin: 0 10px;
@include transition;
&:hover {
fill: $main-color;
}
}
}
}

74
themes/modern2/template/css (old)/components/2-layout/header.scss Normal file
View File

@ -0,0 +1,74 @@
.header {
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;
}
}
}
&__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;
}
}
.searchModal {
display: none;
}

433
themes/modern2/template/css (old)/components/2-layout/lightpick.scss Normal file
View File

@ -0,0 +1,433 @@
// Helper Functions
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function lightpick-str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
lightpick-str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
);
}
@return $string;
}
/// Split `$string` between the `$separator` characters
/// @author https://stackoverflow.com/a/42295154/108816
/// @param {String} $string - Initial string
/// @param {String} $separator - Substring to split on
/// @return {List} - Split string
@function lightpick-str-split($string, $separator) {
$split-arr: ();
$index: str-index($string, $separator);
@while $index != null {
$item: str-slice($string, 1, $index - 1);
$split-arr: append($split-arr, $item);
$string: str-slice($string, $index + 1);
$index: str-index($string, $separator);
}
$split-arr: append($split-arr, $string);
@return $split-arr;
}
// SCSS Variables
$lightpick-font: system-ui, Roboto, Helvetica, Arial, sans-serif !default;
$lightpick-line-height: 1.125em !default;
$lightpick-border-radius: 4px !default;
$lightpick-padding: 4px !default;
$lightpick-color: #000 !default;
$lightpick-background-color: #fff !default;
$lightpick-months-background-color: #eee !default;
$lightpick-title-font-size: 16px !default;
$lightpick-title-font-weight: normal !default;
$lightpick-day-of-week-font-size: 11px !default;
$lightpick-day-of-week-font-weight: bold !default;
$lightpick-day-hover-color: #e0e0e0 !default;
$lightpick-day-hover-background-image-color: lightpick-str-replace(
quote(#{$lightpick-day-hover-color}),
"#",
"%23"
);
$lightpick-day-hover-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{$lightpick-day-hover-background-image-color}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
$lightpick-day-disabled-opacity: 0.38 !default;
$lightpick-day-previous-next-opacity: $lightpick-day-disabled-opacity !default;
$lightpick-day-size: 40px !default;
$lightpick-day-font-size: 13px !default;
$lightpick-selected-date-color: #fff !default;
$main-color: #268bd2 !default;
$lightpick-selected-date-background-image-color: lightpick-str-replace(
quote(#{$main-color}),
"#",
"%23"
);
$lightpick-selected-date-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{$lightpick-selected-date-background-image-color}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
$lightpick-selected-date-font-weight: bold !default;
$lightpick-selected-range-background-color: rgba($main-color, 0.1) !default;
$lightpick-selected-range-hover-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{rgba($main-color, 0.5)}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
$lightpick-today-color: #dc322f !default;
$lightpick-today-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{rgba($lightpick-today-color, .5)}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
$lightpick-tooltip-background-color: #fff !default;
$lightpick-tooltip-padding: 4px 8px !default;
$lightpick-tooltip-margin: -(unquote(nth(lightpick-str-split(quote(#{$lightpick-tooltip-padding}), " "), 1))) !default;
$lightpick-tooltip-triangle-size: 4px !default;
$lightpick-tooltip-border-color: rgba(0, 0, 0, 0.12) !default;
$lightpick-tooltip-font-size: 11px !default;
$lightpick-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !default;
$lightpick-dropdown-font-size: 1em !default;
$lightpick-dropdown-font-weight: bold !default;
$lightpick-dropdown-disabled-color: #333 !default;
$lightpick-action-width: 32px !default;
$lightpick-action-height: $lightpick-action-width !default;
$lightpick-action-background-color: #ddd !default;
$lightpick-action-reset-background-color: #aeacad !default;
$lightpick-action-reset-color: #fff !default;
$lightpick-action-apply-background-color: #2495f3 !default;
$lightpick-action-apply-color: #fff !default;
$lightpick-action-border-radius: 5px !default;
$lightpick-action-font-size: 12px !default;
$lightpick-action-close-font-size: 18px !default;
// Styles
.calendar__outer {
width: 100%;
input {
width: 100%;
display: none;
}
}
.lightpick {
position: absolute;
z-index: 99999;
border-radius: $lightpick-border-radius;
// background-color: $lightpick-background-color;
// box-shadow: $lightpick-box-shadow;
color: $lightpick-color;
font-family: $lightpick-font;
line-height: $lightpick-line-height;
width: 100%;
margin-bottom: 80px;
&--inlined {
position: relative;
display: inline-block;
}
&,
& *,
&::after,
&::before {
box-sizing: border-box;
}
&.is-hidden {
display: none;
}
&__months {
display: grid;
background-color: $lightpick-months-background-color;
grid-template-columns: auto;
grid-gap: 1px;
@at-root .lightpick--2-columns #{&} {
grid-template-columns: auto auto;
}
@at-root .lightpick--3-columns #{&} {
grid-template-columns: auto auto auto;
}
@at-root .lightpick--4-columns #{&} {
grid-template-columns: auto auto auto auto;
}
@at-root .lightpick--5-columns #{&} {
grid-template-columns: auto auto auto auto auto;
}
}
&__month {
width: 100%;
background-color: $lightpick-background-color;
&-title-bar {
display: flex;
margin-bottom: $lightpick-padding;
justify-content: space-between;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #242424;
position: relative;
padding: 10px 0;
}
&-title {
margin-top: $lightpick-padding;
margin-bottom: $lightpick-padding;
margin-left: $lightpick-padding;
font-size: $lightpick-title-font-size;
font-weight: 700;
line-height: $lightpick-title-font-size * 1.5;
cursor: default;
padding: 0 $lightpick-padding;
border-radius: $lightpick-border-radius;
& > .lightpick__select {
border: none;
background-color: transparent;
outline: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
&:disabled {
color: $lightpick-dropdown-disabled-color;
}
}
& > .lightpick__select-months {
font-weight: $lightpick-dropdown-font-weight;
font-size: $lightpick-dropdown-font-size;
margin-right: 0;
direction: ltr;
}
}
}
&__toolbar {
display: flex;
// text-align: right;
justify-content: space-between;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 0;
width: 100%;
}
&__previous-action,
&__next-action,
&__close-action {
display: flex;
width: $lightpick-action-width;
height: $lightpick-action-height;
outline: none;
border: none;
background: none;
// border-radius: 50%;
// background-color: $lightpick-action-background-color;
justify-content: center;
align-items: center;
&:active {
color: inherit;
}
}
&__previous-action,
&__next-action {
font-size: 20px;
margin: 0 5px;
}
&__close-action {
font-size: $lightpick-action-close-font-size;
}
&__days-of-the-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
&__day-of-the-week {
display: flex;
justify-content: center;
align-items: center;
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
padding: 10px 0;
}
&__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
&__day {
display: flex;
height: $lightpick-day-size;
padding: 10px 0;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
font-size: $h3-size - 3px;
line-height: $h3-height - 3px;
justify-content: center;
align-items: center;
cursor: default;
&.is-today {
background-image: $lightpick-today-background-image;
background-size: 18.8% auto;
background-position: center bottom;
color: $lightpick-today-color;
}
&:not(.is-disabled):hover {
background-size: contain;
background-image: $lightpick-day-hover-background-image;
}
&.is-disabled {
opacity: $lightpick-day-disabled-opacity;
pointer-events: none;
&.is-forward-selected {
opacity: 1;
&:not(.is-start-date) {
background-color: $lightpick-selected-range-background-color;
background-image: none;
}
}
}
&.disabled-tooltip {
pointer-events: auto;
}
&.is-previous-month,
&.is-next-month {
opacity: $lightpick-day-previous-next-opacity;
}
&#{&}.is-in-range:not(.is-disabled) {
opacity: 1;
}
&.is-in-range {
border-radius: 0;
background-color: $lightpick-selected-range-background-color;
background-image: none;
&:hover {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(38, 139, 210, 0.5)' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
}
}
&.is-start-date.is-in-range,
&.is-end-date.is-in-range.is-flipped {
border-top-left-radius: 50%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 50%;
background-color: $main-color;
background-image: none;
}
&.is-end-date.is-in-range,
&.is-start-date.is-in-range.is-flipped {
border-top-left-radius: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
background-color: $main-color;
background-image: none;
}
&.is-start-date.is-end-date {
background-color: transparent;
background-image: $lightpick-selected-date-background-image;
}
&.is-start-date,
&.is-end-date,
&.is-start-date:hover,
&.is-end-date:hover {
background-image: $lightpick-selected-date-background-image;
background-size: auto;
background-position: center;
color: $lightpick-selected-date-color;
font-weight: $lightpick-selected-date-font-weight;
}
}
&__tooltip {
position: absolute;
margin-top: $lightpick-tooltip-margin;
padding: $lightpick-tooltip-padding;
border-radius: $lightpick-border-radius;
background-color: $lightpick-tooltip-background-color;
box-shadow: $lightpick-box-shadow;
white-space: nowrap;
font-size: $lightpick-tooltip-font-size;
pointer-events: none;
&::before {
position: absolute;
bottom: -($lightpick-tooltip-triangle-size + 1);
left: calc(50% - #{$lightpick-tooltip-triangle-size + 1});
border-top: ($lightpick-tooltip-triangle-size + 1) solid
$lightpick-tooltip-border-color;
border-right: ($lightpick-tooltip-triangle-size + 1) solid transparent;
border-left: ($lightpick-tooltip-triangle-size + 1) solid transparent;
content: "";
}
&::after {
position: absolute;
bottom: -$lightpick-tooltip-triangle-size;
left: calc(50% - #{$lightpick-tooltip-triangle-size});
border-top: $lightpick-tooltip-triangle-size solid
$lightpick-tooltip-background-color;
border-right: $lightpick-tooltip-triangle-size solid transparent;
border-left: $lightpick-tooltip-triangle-size solid transparent;
content: "";
}
}
&__footer {
display: flex;
justify-content: space-between;
}
&__reset-action,
&__apply-action {
border-radius: $lightpick-action-border-radius;
font-size: $lightpick-action-font-size;
border: none;
}
&__reset-action {
color: $lightpick-action-reset-color;
background-color: $lightpick-action-reset-background-color;
}
&__apply-action {
color: $lightpick-action-apply-color;
background-color: $lightpick-action-apply-background-color;
}
}

90
themes/modern2/template/css (old)/components/2-layout/newsCard.scss Normal file
View File

@ -0,0 +1,90 @@
.card {
position: relative;
padding: 25px;
background: $text-color-white;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
&-category {
padding: 5px 10px;
background: $main-color;
font-size: $h5-size;
line-height: $h5-height;
color: $text-color-white;
font-weight: 700;
max-width: 115px;
text-align: center;
margin-bottom: 10px;
}
&-view {
display: flex;
align-items: center;
color: $text-color-grey;
font-weight: 400;
font-size: $h5-size;
line-height: $h5-height - 5px;
svg {
margin-right: 5px;
stroke: $text-color-grey;
width: 21px;
height: 14px;
}
}
&-date {
display: flex;
align-items: center;
font-size: 12px;
line-height: $h5-height;
color: $text-color-grey;
font-weight: 400;
svg {
margin: 0 5px;
width: 4px;
height: 4px;
}
}
}
&__link {
color: $text-black;
font-weight: 500;
font-size: 15px;
line-height: 20px;
margin: 10px 0 0 0;
display: block;
height: 60px;
//overflow: hidden;
//text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
&__box {
padding: 30px 0;
&:last-child {
border-top: 1px solid $text-color-grey;
padding: 30px 0 0 0;
}
&:nth-child(2) {
padding: 0 0 30px 0;
}
}
&.other {
padding: 30px;
.card__header {
&-category {
background: $text-light-black;
color: $text-color-white;
}
}
border-bottom: 1px solid #e6e6e6;
&:last-child {
border-bottom: none;
}
}
}

99
themes/modern2/template/css (old)/components/2-layout/newsSlider.scss Normal file
View File

@ -0,0 +1,99 @@
.newsSlider {
&__outer {
position: relative;
overflow: hidden;
.p2 {
cursor: pointer;
position: absolute;
top: 50%;
left: 0;
@include transformY;
width: 30px;
height: 40px;
background: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.n2 {
cursor: pointer;
position: absolute;
z-index: 1;
top: 50%;
right: 0;
@include transformY;
width: 30px;
height: 40px;
background: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
}
}
.newsSlider__item {
position: relative;
height: 320px;
img {
@include fullImage;
}
&::before {
position: absolute;
content: "";
top: 5px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
background: rgb(0, 0, 0);
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0) 100%
);
z-index: 1;
}
&-content {
flex-direction: column;
justify-content: space-between;
position: absolute;
left: 30px;
top: 30px;
width: calc(100% - 60px);
z-index: 2;
height: calc(100% - 60px);
display: flex;
&-date {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
background: $main-color;
font-size: 14px;
line-height: 18px;
font-weight: 400;
max-width: 145px;
color: $text-color-white;
margin-bottom: 10px;
svg {
margin: 0 4px;
width: 4px;
height: 4px;
fill: $text-color-white;
}
}
&-link {
color: $text-color-white;
font-size: 16px;
line-height: 25px;
font-weight: 700;
display: block;
}
}
}
}
.slick-slider {
margin: 0 -10px;
}
.slick-slide {
padding: 5px;
}

45
themes/modern2/template/css (old)/components/2-layout/partnerSlider.scss Normal file
View File

@ -0,0 +1,45 @@
.partnerSlider {
position: relative;
&__inner {
}
&__item {
margin-right: 5px;
padding: 30px;
border-right: 5px;
border: 1px solid #e6e6e6;
position: relative;
img {
width: 90%;
margin: 0 auto;
}
}
.p1 {
cursor: pointer;
position: absolute;
top: 50%;
left: 0;
@include transformY;
width: 30px;
height: 40px;
background: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.n1 {
cursor: pointer;
position: absolute;
z-index: 1;
top: 50%;
right: 5px;
@include transformY;
width: 30px;
height: 40px;
background: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
}
}

830
themes/modern2/template/css (old)/components/2-layout/responsive.scss Normal file
View File

@ -0,0 +1,830 @@
@include xxlg-xxxlg {
.auto__container {
max-width: 1240px;
}
.swiper {
&-slide {
height: 450px;
}
}
}
@include xlg-xxlg {
.swiper-slide-content-link {
font-size: 18px;
line-height: 25px;
height: 50px;
}
.newsSlider {
&__item {
height: 280px;
}
}
.main__banner {
margin-bottom: 40px;
}
.swiper {
&-slide {
height: 350px;
}
}
.newsSlider .newsSlider__item {
height: 180px;
&-content {
&-date {
max-width: 120px;
margin-bottom: 0;
}
}
}
.header__slogan {
font-size: 28px;
line-height: 1;
}
.auto__container {
max-width: 1040px;
padding: 0 25px;
}
.banner {
margin: 40px 0;
}
.slider {
height: 450px;
&__item {
height: 450px;
}
&__nav {
a {
height: 33.3%;
span {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.event {
margin: 40px 0 70px;
&__header {
margin-bottom: 40px;
}
&__body {
&-row {
margin: 0 -10px;
}
&-image {
margin: 0 10px;
width: calc(50% - 20px);
a.progressive {
height: 200px;
}
}
&-card {
top: 150px;
left: 10px;
width: calc(100% - 20px);
}
&-column {
margin: 0 10px;
width: calc(50% - 30px);
padding: 0 15px;
.card {
padding: 15px 0;
}
}
}
}
.main {
&__body {
&-header {
margin-bottom: 40px;
}
&-column {
a.progressive {
height: 240px;
}
}
&-card {
margin: -50px 15px 0 15px;
}
}
&__sidebar {
&-title {
margin-bottom: 40px;
}
a.progressive {
margin-bottom: 40px;
}
&-tag {
margin-bottom: 40px;
&-link {
padding: 4px 6px;
font-size: 12px;
}
}
}
}
.card {
padding: 15px;
}
.partner {
&__title {
margin-bottom: 40px;
}
}
.heading {
&__row {
margin-bottom: 40px;
}
&__title {
margin-bottom: 40px;
}
&__content {
padding: 15px 0 15px 15px;
width: calc(60% - 15px);
&-header {
margin-bottom: 15px;
}
&-body {
&-para {
height: 90px;
}
}
}
a.progressive {
height: 250px;
}
}
.form {
&__title {
margin-bottom: 40px;
}
&__input {
label {
height: 60px;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.news {
&__inner {
padding: 40px 0;
}
&__image {
margin: 20px 0;
}
&__body {
&-row {
&-image {
margin: 0 10px;
width: calc(50% - 20px);
}
}
}
}
}
@include lg-xlg {
.newsSlider {
&__item {
height: 240px;
}
}
.swiper-container {
.slick-list {
padding: 0 20% 0 0;
}
}
.partner__title {
margin-bottom: 20px;
}
.swiper-slide {
&-content {
padding: 15px;
width: calc(100% - 30px);
&-category {
font-size: 12px;
line-height: 14px;
padding: 8px 12px;
font-weight: 500;
}
&-link {
font-size: 14px;
line-height: 26px;
height: 52px;
width: 75%;
}
}
}
.slider {
&__nav {
display: none;
}
&__inner {
width: 100%;
margin: 0;
}
}
.search {
&Modal {
display: block;
@include transition;
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: 25px;
}
&.active {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
&Input {
position: relative;
max-width: 450px;
margin: 0 auto;
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;
border-radius: 5px;
border: 1px solid #242424;
}
&__btn {
position: absolute;
right: 15px;
background: none;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
svg {
width: 24px;
height: 24px;
fill: #242424;
}
}
}
&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;
}
.hamBtn {
display: block;
width: 35px;
background: none;
height: 25px;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
justify-content: space-between;
span {
width: 100%;
height: 5px;
border-radius: 10px;
background: $text-light-black;
}
}
}
.subheader__inner {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 0;
overflow: hidden;
opacity: 0;
background: rgba($color: #000000, $alpha: 0.5);
z-index: 1000;
@include transition;
.close {
width: 30px;
height: 30px;
position: absolute;
left: 30px;
top: 30px;
display: block;
img {
width: 100%;
height: 100%;
}
}
.nav {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: calc(100% - 50px);
overflow-y: scroll;
background: $text-light-black;
&__inner {
flex-direction: column;
-ms-flex-direction: column;
&-link {
display: block;
text-align: center;
margin-right: 0;
padding: 20px;
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
width: calc(100% - 40px);
&::before {
display: none;
}
.dropDown {
margin-top: 20px;
position: unset;
width: unset;
background: unset;
background: #b4b4b4;
&__link {
color: $text-color-white;
text-align: center;
padding: 20px 0;
&:hover {
background: unset;
}
}
}
}
}
}
.language {
position: absolute;
bottom: 0;
right: 0;
width: 50%;
padding: 15px 0;
justify-content: center;
background: $color-grey;
}
&.showMenu {
width: 100%;
opacity: 1;
}
}
.event {
&__body {
&-image {
width: calc(50% - 20px);
}
&-column {
width: calc(50% - 30px);
}
}
}
.main {
margin-top: 40px;
&__sidebar {
display: none;
}
&__content {
width: 100%;
margin: 0;
}
&__body {
&-card {
margin: -50px 0 0 0;
}
&-column {
a.progressive {
height: 300px;
}
}
}
}
.footer {
&__inner {
flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
}
&__social {
margin-top: 20px;
}
&__copyright {
text-align: center;
}
}
.card.other {
padding: 15px;
}
.mr-top-bot {
margin: 40px 0;
}
.about {
padding: 40px 0;
}
.news {
&__sidebar {
display: none;
}
&__content {
width: 100%;
margin-right: 0;
}
}
.terms {
padding: 40px 0;
&__title {
margin-bottom: 20px;
}
&__para {
margin-bottom: 20px;
}
}
}
@include sm-md {
.newsSlider__outer {
display: none;
}
.swiper-container {
.slick-list {
padding: 0 0 0 0;
}
}
.header__logo {
width: 80px;
img {
width: 100%;
}
}
.marquee {
display: none;
}
.slider {
height: 350px;
&__item {
height: 350px;
}
}
.event {
&__body {
&-row {
margin: 0;
flex-direction: column;
-ms-flex-direction: column;
border: 1px solid #dcdcdc;
}
&-image {
width: 100%;
margin: 15px 0;
a.progressive {
height: auto;
}
}
&-column {
width: calc(100% - 30px);
margin: 0;
padding: 0 15px;
border: none;
.card {
padding: 15px 0;
border-bottom: 1px solid #dcdcdc;
&:last-child {
border-bottom: none;
}
}
}
&-card {
position: unset;
width: 100%;
border: none;
border-bottom: 1px solid #dcdcdc;
}
}
}
.main {
&__body {
&-row {
display: block;
margin: 0;
}
.banner__mobile {
display: block;
width: 100%;
}
&-column {
width: 100%;
margin: 15px 0;
a.progressive {
height: auto;
}
}
}
&__banner {
margin-bottom: 40px;
}
}
.heading {
&__row {
margin-bottom: 20px;
flex-direction: column;
-ms-flex-direction: column;
}
&__image {
width: 100%;
}
&__content {
padding: 20px 0;
width: 100%;
&-body {
&-para {
height: 120px;
}
}
}
a.progressive {
height: auto;
img {
height: unset;
width: 100%;
object-fit: unset;
-o-object-fit: unset;
}
}
}
.form {
&__row {
flex-direction: column;
-ms-flex-direction: column;
}
&__input {
margin-bottom: 20px;
&:first-child {
width: 100%;
margin-right: 0;
}
&:last-child {
width: 100%;
margin-left: 0;
}
label {
height: unset;
}
}
&__btn {
width: 100%;
}
}
.main {
&__inner.contact {
padding: 0;
}
}
.news {
&__body {
&-row {
margin: 0;
flex-direction: column;
-ms-flex-direction: column;
&-image {
margin: 15px 0;
width: 100%;
}
}
img {
width: 100%;
margin: 15px 0;
display: block;
}
}
&__footer {
flex-direction: column;
-ms-flex-direction: column;
}
img {
width: 100%;
margin: 15px 0;
display: block;
}
}
.newsSlider {
.newsSlider__item {
img {
height: 250px;
}
&-content {
position: unset;
padding: 10px;
border: 1px solid #dfdfdf;
width: calc(100% - 20px);
&-link {
color: $text-light-black;
font-size: 12px;
line-height: 16px;
height: 48px;
}
&-date {
font-size: 10px;
width: 100%;
padding: 8px 0;
}
}
}
}
}
@include xsm-sm {
.swiper-slide-content-category {
position: absolute;
top: 12px;
right: 15px;
}
.auto__container {
padding: 0 10px;
}
.slider {
height: 300px;
&__item {
height: 300px;
}
}
.partnerSlider {
overflow: hidden;
&__item {
margin-right: 0;
padding: 5px;
height: unset;
}
}
.footer {
&__social {
flex-wrap: wrap;
justify-content: center;
&-link {
margin: 5px;
}
}
}
.subheader {
z-index: 12;
&__inner {
.close {
width: 20px;
height: 20px;
top: 15px;
left: 15px;
}
}
.nav {
width: calc(100% - 50px);
}
.language {
width: calc(100% - 50px);
}
}
.swiper-slide {
height: 300px;
}
.newsSlider__outer {
display: none;
}
.main {
&__body {
&-card {
margin: 0 0 0 0;
}
}
}
.popUp {
display: flex;
transform: translateY(100%);
position: fixed;
bottom: 0;
left: 0;
background: #f7f7f7;
z-index: 11;
animation: popUp 0.2s linear;
border-radius: 20px 20px 0 0;
padding: 40px 20px;
width: calc(100% - 40px);
@include transition;
&__inner {
width: 100%;
&-header {
display: flex;
align-items: center;
justify-content: space-between;
&-logo {
width: 75px;
img {
width: 100%;
}
}
&-close {
display: flex;
align-items: flex-end;
justify-content: flex-end;
svg {
width: 18px;
height: 18px;
fill: #000;
}
}
}
&-body {
margin: 15px 0;
&-subtitle {
font-size: 16px;
line-height: 20px;
font-weight: 400;
color: #000000;
text-align: center;
}
&-title {
font-size: 20px;
line-height: 24px;
font-weight: 700;
color: #000000;
text-align: center;
margin-bottom: 15px;
}
}
&-footer {
&-btn {
width: 80%;
margin: 0 auto;
padding: 15px 0;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
font-size: 16px;
line-height: 20px;
border-radius: 15px;
background: $main-color;
display: flex;
}
&-close {
text-align: center;
font-size: 16px;
line-height: 20px;
font-weight: 400;
color: $main-color;
margin-top: 15px;
}
}
}
&.active {
transform: translateY(0%);
}
}
@keyframes popUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
}

45
themes/modern2/template/css (old)/components/2-layout/slider.scss Normal file
View File

@ -0,0 +1,45 @@
.animaSlider {
height: 560px;
&__outer {
position: relative;
}
&__item {
height: 560px;
padding: 5px;
&-image {
height: 100%;
width: 66.6%;
-moz-transition: 0.4s linear;
transition: 0.4s linear;
img {
@include fullImage;
}
}
&.slick-slide {
width: 66.6%;
}
&-category {
position: absolute;
left: 30px;
bottom: 30px;
background: $main-color;
color: $text-color-white;
font-weight: 400;
font-size: $h4-size;
line-height: $h4-height;
padding: 5px 20px;
}
&.slick-active {
.animaSlider__item-image {
width: 100%;
img {
}
}
}
}
.slick-list {
padding: 0 33.3% 0 0;
}
}

78
themes/modern2/template/css (old)/components/2-layout/subheader.scss Normal file
View File

@ -0,0 +1,78 @@
.subheader {
background: $text-light-black;
position: relative;
z-index: 2;
.close {
display: none;
}
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
&__inner {
display: flex;
align-items: center;
&-link {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-white;
margin-right: 40px;
padding: 15px 0;
position: relative;
z-index: 1;
&::before {
position: absolute;
bottom: 0;
width: 0;
height: 4px;
background: $main-color;
content: "";
@include transition;
}
&:hover::before {
width: 100%;
}
&.active::before {
width: 100%;
}
.dropDown {
position: absolute;
top: 100%;
left: 0;
width: 200px;
max-height: 0;
overflow: auto;
z-index: 2;
background: $text-color-white;
&__link {
display: block;
padding: 15px;
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-light-black;
@include transition;
&:hover {
background: #f7f7f7;
}
}
}
&:hover .dropDown {
max-height: 2000px;
}
}
}
}
.language {
display: flex;
align-items: center;
&__link {
width: 30px;
height: 20px;
margin-left: 20px;
}
}
}

161
themes/modern2/template/css (old)/components/2-layout/swiper.scss Normal file
View File

@ -0,0 +1,161 @@
.swiper-container {
width: 100%;
height: 100%;
position: relative;
.p3 {
cursor: pointer;
position: absolute;
top: 50%;
left: 0;
@include transformY;
width: 40px;
height: 60px;
background: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.n3 {
cursor: pointer;
position: absolute;
z-index: 1;
top: 50%;
right: 0;
@include transformY;
width: 40px;
height: 60px;
background: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.slick-list {
padding: 0 33.3% 0 0;
}
}
.swiper-slide {
text-align: center;
font-size: 18px;
height: 520px;
/* Center slide t ext vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
overflow: hidden;
@include transition;
&-image {
width: 100%;
height: 100%;
transform-origin: 0% 50%;
position: relative;
picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
@include fullImage;
}
}
}
&-content {
position: absolute;
left: 0;
bottom: 0;
display: none;
width: 100%;
background: rgb(0, 0, 0);
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.022846638655462215) 100%
);
padding: 50px 40px;
&-date {
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 14px;
line-height: 18px;
font-weight: 400;
color: $text-color-white;
margin-bottom: 10px;
svg {
margin: 0 4px;
width: 4px;
height: 4px;
fill: $text-color-white;
}
}
&-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
&-link {
color: $text-color-white;
font-size: 20px;
line-height: 30px;
height: 60px;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
display: block;
text-align: left;
width: 75%;
}
&-category {
font-size: 14px;
line-height: 18px;
font-weight: 700;
color: $text-color-white;
padding: 8px 16px;
background: $main-color;
}
}
&.slick-active .swiper-slide-content {
display: block;
animation: myAnim 1s ease 0s 1 normal forwards;
animation-delay: 0.5s;
}
}
.copy {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
text-align: center;
color: white;
letter-spacing: 0.06em;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes myAnim {
0% {
opacity: 0;
transform: translateY(250px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

16
themes/modern2/template/css (old)/components/3-page/about.scss Normal file
View File

@ -0,0 +1,16 @@
.about {
padding: 80px 0;
&__title {
font-size: $h2-size;
line-height: $h2-height;
font-weight: 700;
color: $text-light-black;
}
&__para {
font-size: $h3-size;
line-height: $h3-height + 14px;
font-weight: 400;
color: $text-light-black;
margin-top: 20px;
}
}

102
themes/modern2/template/css (old)/components/3-page/contact.scss Normal file
View File

@ -0,0 +1,102 @@
.form {
&__title {
font-weight: 700;
color: $text-light-black;
font-size: $h3-size;
line-height: $h3-height;
margin-bottom: 80px;
}
&__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
&__input {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
label {
display: block;
font-size: $h4-size;
line-height: $h4-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 20px;
}
input {
width: calc(100% - 40px);
padding: 0 20px;
height: 60px;
border-radius: 5px;
border: 1px solid #c9c9c9;
font-size: $h4-size;
line-height: $h4-size;
color: $text-light-black;
}
&:last-child {
width: calc(50% - 20px);
margin-left: 20px;
}
&:first-child {
width: calc(50% - 20px);
margin-right: 20px;
}
}
&__input-bg {
width: 100%;
label {
display: block;
font-size: $h4-size;
line-height: $h4-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 20px;
}
input {
width: calc(100% - 40px);
padding: 0 20px;
height: 60px;
border-radius: 5px;
border: 1px solid #c9c9c9;
font-size: $h4-size;
line-height: $h4-size;
color: $text-light-black;
}
}
&__textarea {
width: 100%;
margin-top: 30px;
label {
display: block;
font-size: $h4-size;
line-height: $h4-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 20px;
}
textarea {
width: calc(100% - 40px);
padding: 20px;
border-radius: 5px;
border: 1px solid #c9c9c9;
}
}
&__btn {
width: 250px;
background: $main-color;
text-align: center;
color: $text-color-white;
font-weight: 700;
padding: 14px;
border-radius: 5px;
font-size: $h4-size;
line-height: $h4-height;
margin-top: 30px;
}
}
.main {
&__inner.contact {
padding: 80px 0 160px 0;
}
}

154
themes/modern2/template/css (old)/components/3-page/heading.scss Normal file
View File

@ -0,0 +1,154 @@
.heading {
&__title {
font-weight: 700;
color: $text-light-black;
font-size: $h3-size;
line-height: $h3-height;
margin-bottom: 80px;
}
&__row {
display: flex;
align-items: center;
margin-bottom: 40px;
}
&__image {
width: 40%;
}
a.progressive {
position: relative;
display: block;
overflow: hidden;
outline: none;
height: 320px;
&:not(.replace) {
cursor: default;
}
& img {
@include fullImage;
}
& img.preview {
filter: blur(2vw);
transform: scale(1.05);
}
& img.reveal {
position: absolute;
left: 0;
top: 0;
will-change: transform, opacity;
animation: reveal 1s ease-out;
}
}
&__content {
width: calc(60% - 30px);
height: calc(100% - 60px);
padding: 30px 0 30px 30px;
&-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
&-view {
display: flex;
align-items: center;
color: $text-color-grey;
font-weight: 400;
font-size: $h5-size;
line-height: $h5-height - 5px;
svg {
margin-right: 5px;
stroke: $text-color-grey;
width: 21px;
}
}
&-date {
display: flex;
align-items: center;
font-size: $h5-size;
line-height: $h5-height;
color: $text-color-white;
background: $text-light-black;
font-weight: 400;
padding: 5px 15px;
svg {
margin: 0 5px;
}
}
}
&-body {
&-link {
color: $text-black;
font-weight: 700;
font-size: $h4-size;
line-height: $h4-height;
margin: 10px 0 0 0;
display: block;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 15px;
}
&-para {
font-size: $h4-size;
line-height: $h4-height;
font-weight: 400;
color: $text-light-black;
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
&__footer {
display: flex;
align-items: center;
&-page {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: $text-light-black;
svg {
width: 12px;
height: 12px;
fill: $text-color-white;
}
}
&-input {
width: 80px;
height: 40px;
margin: 0 10px;
input {
text-align: center;
font-size: $h3-size;
line-height: $h3-height;
height: 100%;
width: 100%;
border-radius: 5px;
background: #e6e6e6;
font-weight: 400;
color: $text-light-black;
}
}
span {
font-size: $h3-size;
line-height: $h3-height;
color: $text-light-black;
font-weight: 400;
margin-left: 10px;
}
}
}
.address {
&__inner {
font-size: $h3-size;
line-height: $h3-height;
color: $text-light-black;
font-weight: 400;
margin-bottom: 25px;
span {
font-weight: 700;
}
}
}

394
themes/modern2/template/css (old)/components/3-page/home.scss Normal file
View File

@ -0,0 +1,394 @@
.marquee {
&__outer {
position: relative;
}
width: 100%;
margin: 10px 0;
overflow: hidden;
position: relative;
height: 50px;
background: #00822c;
&__item {
&.slick-slide {
padding: 0;
}
margin: 0 50px;
a {
display: flex;
align-items: center;
height: 50px;
color: #fff;
font-size: 16px;
line-height: 20px;
font-weight: 400;
}
}
&__link {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
background: #ee4037;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
font-size: 14px;
color: $text-color-white;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
&::before {
clip-path: polygon(100% 46%, 0 0, 0 100%);
background: #ee4037;
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 25px;
content: "";
}
}
}
.hero {
&__inner {
overflow: hidden;
}
}
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
}
/* Make it move */
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
// banner start
.banner {
margin: 80px 0;
&__inner {
width: 100%;
height: auto;
img {
width: 100%;
}
}
}
// banner end
.rek__item {
display: block;
img {
width: 100%;
}
}
// main start
.main {
margin-top: 30px;
&__inner {
display: flex;
align-items: stretch;
}
&__content {
width: calc(70% - 25px);
margin-right: 25px;
}
&__body {
&-row {
margin: 0 -20px 50px -20px;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
&-column {
width: calc(50% - 42px);
margin: 0 20px;
a.progressive {
position: relative;
display: block;
overflow: hidden;
outline: none;
height: 300px;
}
a.progressive:not(.replace) {
cursor: default;
}
a.progressive img {
@include fullImage;
}
a.progressive img.preview {
filter: blur(2vw);
transform: scale(1.05);
}
a.progressive img.reveal {
position: absolute;
left: 0;
top: 0;
will-change: transform, opacity;
animation: reveal 1s ease-out;
}
&.border {
border: 1px solid #dcdcdc;
}
}
&-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #e6e6e6;
@include transform;
z-index: -1;
}
&-title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
background: $text-color-white;
}
&-link {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-grey;
background: $text-color-white;
display: block;
}
}
&-card {
margin: -100px 30px 0 30px;
border: 1px solid #dcdcdc;
.card {
border-bottom: 1px solid #dcdcdc;
&:last-child {
border-bottom: none;
}
}
}
&-title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 20px;
}
}
&__banner {
width: 100%;
height: auto;
margin-bottom: 40px;
img {
width: 100%;
}
}
&__sidebar {
margin-left: 25px;
width: calc(30% - 25px);
&-adv {
margin-bottom: 40px;
}
&-title {
font-size: $h4-size;
line-height: $h4-height;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 80px;
color: $text-light-black;
}
.card {
&.other {
padding: 0 0 30px 0;
}
&__link {
height: unset;
text-overflow: unset;
}
}
a.progressive {
position: relative;
display: block;
overflow: hidden;
outline: none;
margin-bottom: 80px;
&:not(.replace) {
cursor: default;
}
& img {
width: 100%;
height: auto;
}
& img.preview {
filter: blur(2vw);
transform: scale(1.05);
}
& img.reveal {
position: absolute;
left: 0;
top: 0;
will-change: transform, opacity;
animation: reveal 1s ease-out;
}
}
&-tag {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: -30px -5px 80px -5px;
&-link {
padding: 8px 9px;
border-right: 5px;
background: #f7f7f6;
font-size: 16px;
line-height: 16px;
color: $text-light-black;
margin: 5px;
}
}
}
}
// main end
.banner__mobile {
display: none;
}
// event start
.event {
margin: 50px 0 80px;
&__header {
margin-bottom: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
&-title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
background: $text-color-white;
}
&-link {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-grey;
background: $text-color-white;
}
&::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #e6e6e6;
@include transform;
z-index: -1;
}
}
&__body {
&-row {
display: flex;
align-items: stretch;
margin: 0 -20px;
}
&-image {
width: calc(50% - 40px);
margin: 0 20px;
position: relative;
cursor: pointer;
a.progressive {
position: relative;
display: block;
overflow: hidden;
outline: none;
height: 330px;
}
a.progressive:not(.replace) {
cursor: default;
}
a.progressive img {
@include fullImage;
}
a.progressive img.preview {
filter: blur(2vw);
transform: scale(1.05);
}
a.progressive img.reveal {
position: absolute;
left: 0;
top: 0;
will-change: transform, opacity;
animation: reveal 1s ease-out;
}
}
&-card {
position: absolute;
top: 210px;
left: 30px;
width: calc(100% - 60px);
border: 1px solid #dcdcdc;
}
&-column {
width: calc(50% - 100px);
margin: 0 20px;
padding: 15px 30px;
border: 1px solid #dcdcdc;
.card {
padding: 30px 0;
border-bottom: 1px solid #dcdcdc;
&:nth-last-child(1) {
border-bottom: none;
}
}
}
}
}
// event end
// partner start
.partner {
margin-bottom: 80px;
&__title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 80px;
}
}
// partner end
.popUp {
display: none;
}
/* progressive image CSS */
@keyframes reveal {
0% {
transform: scale(1.05);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}

112
themes/modern2/template/css (old)/components/3-page/news.scss Normal file
View File

@ -0,0 +1,112 @@
.news {
&__inner {
display: flex;
align-items: stretch;
padding: 80px 0;
}
&__sidebar {
margin-left: 25px;
width: calc(30% - 25px);
&-title {
font-size: $h4-size;
line-height: $h4-height;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 20px;
color: $text-light-black;
}
.card {
padding: 30px 0;
border-bottom: 1px solid #dcdcdc;
&__link {
height: unset;
text-overflow: unset;
}
}
}
&__content {
width: calc(70% - 25px);
margin-right: 25px;
&-header {
display: flex;
align-items: center;
justify-content: space-between;
}
}
&__title {
color: $text-black;
font-weight: 700;
font-size: $h2-size;
line-height: $h2-height;
}
&__date {
display: flex;
align-items: center;
font-size: $h3-size;
line-height: $h3-height;
color: $text-color-grey;
font-weight: 400;
margin-bottom: 20px;
svg {
margin: 0 5px;
}
}
&__image {
width: 100%;
margin: 25px 0;
display: block;
img {
width: 100%;
height: auto;
}
}
&__body {
p {
font-size: $p-size;
line-height: $p-height;
margin-bottom: 20px;
img {
width: 90%;
margin: 30px auto;
display: block;
height: auto;
}
strong {
a {
color: #4285f4;
}
}
}
img {
width: 90%;
margin: 30px auto;
display: block;
height: auto;
}
}
&__footer {
display: flex;
align-items: center;
justify-content: space-between;
&-social {
display: flex;
align-items: center;
&-link {
margin-right: 20px;
fill: $main-color;
svg {
color: $main-color;
}
}
.footer__social-link {
fill: $main-color;
}
}
&-name {
font-size: $h2-size;
line-height: $h2-height;
font-weight: 700;
color: $text-light-black;
}
}
}

17
themes/modern2/template/css (old)/components/3-page/terms.scss Normal file
View File

@ -0,0 +1,17 @@
.terms {
padding: 80px 0;
&__title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-black;
margin-bottom: 40px;
}
&__para {
font-size: $p-size;
line-height: $p-height;
font-weight: 400;
color: $text-black;
margin-bottom: 40px;
}
}

2820
themes/modern2/template/css (old)/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

34
themes/modern2/template/css (old)/main.scss Normal file
View File

@ -0,0 +1,34 @@
// 1-main components
@import "components/1-main/mixin";
@import "components/1-main/nulifier";
@import "components/1-main/variables";
// 2-layout components
@import "components/2-layout/header";
@import "components/2-layout/footer";
@import "components/2-layout/subheader";
@import "../slick/slick";
@import "../slick/slick-theme";
@import "components/2-layout/partnerSlider";
@import "components/2-layout/newsCard";
@import "components/2-layout/lightpick";
@import "components/2-layout/newsSlider";
@import "components/2-layout/swiper";
// 3-page components
@import "components/3-page/home";
@import "components/3-page/heading";
@import "components/3-page/about";
@import "components/3-page/contact";
@import "components/3-page/news";
@import "components/3-page/terms";
@import "components/2-layout/slider";
// responsive
@import "components/2-layout/responsive";

921
themes/modern2/template/css (old)/prepros.config Normal file
View File

@ -0,0 +1,921 @@
{
"version": "7",
"about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
"config": {
"proxy": {
"enable": false,
"target": "",
"useLocalAssets": false
},
"reload": {
"enable": true,
"delay": 0,
"animate": true,
"afterUpload": false
},
"sync": {
"enable": false,
"mouse": true,
"keyboard": true,
"form": true,
"scroll": true
},
"watcher": {
"enable": true,
"maxFiles": 2000,
"usePolling": false,
"pollingInterval": 500,
"extensions": [
".html",
".htm",
".php"
],
"ignore": {
"patterns": [
".*",
"wp-admin",
"wp-includes",
"node_modules",
"Prepros Export",
"bower_components"
],
"exceptions": []
}
},
"exporter": {
"ignore": {
"patterns": [
".*",
"desktop.ini",
"prepros.cfg",
"node_modules",
"Prepros Export",
"prepros.config",
"prepros-6.config",
"*-original.jpg",
"*-original.jpeg",
"*-original.png",
"*-original.svg",
"*.scss",
"*.sass",
"*.less",
"*.pug",
"*.jade",
"*.styl",
"*.haml",
"*.slim",
"*.coffee",
"*.kit",
"*.turf",
"*.ts"
],
"exceptions": []
}
},
"uploader": {
"remotePath": "",
"timeout": 20000,
"autoUpload": false,
"reuseConnection": true,
"connectionType": "ftp",
"history": []
},
"packages": {
"createPackageLock": true
},
"images": {
"preserveOriginal": true
},
"tasks": {
"autoprefixer": {
"cascade": true,
"add": true,
"remove": true,
"supports": true,
"flexbox": true,
"grid": "autoplace",
"browsers": [
"> 2%",
"not dead"
],
"sourceMap": false
},
"babel": {
"sourceMap": false,
"presets": {
"@babel/preset-env": {
"enable": true,
"options": {
"targets": [
"> 2%",
"not dead"
],
"preserveImports": false,
"polyfills": false
}
},
"@babel/preset-react": true,
"@babel/preset-flow": false
},
"plugins": {
"@babel/plugin-proposal-class-static-block": false,
"@babel/plugin-proposal-class-properties": false,
"@babel/plugin-proposal-decorators": {
"enable": false,
"options": {
"decoratorsBeforeExport": true
}
},
"@babel/plugin-proposal-export-namespace-from": false,
"@babel/plugin-proposal-function-sent": false,
"@babel/plugin-proposal-logical-assignment-operators": false,
"@babel/plugin-proposal-nullish-coalescing-operator": false,
"@babel/plugin-proposal-numeric-separator": false,
"@babel/plugin-proposal-optional-chaining": false,
"@babel/plugin-proposal-private-methods": false,
"@babel/plugin-proposal-throw-expressions": false
},
"customPresets": [],
"customPlugins": []
},
"bundle-js": {
"sourceMap": false,
"exclude": [
"node_modules",
"bower_components"
],
"devMode": true,
"globals": [],
"externals": [],
"babel": {
"enable": true,
"options": {
"sourceMap": false,
"presets": {
"@babel/preset-env": {
"enable": true,
"options": {
"targets": [
"> 2%",
"not dead"
],
"preserveImports": false,
"polyfills": false
}
},
"@babel/preset-react": true,
"@babel/preset-flow": false
},
"plugins": {
"@babel/plugin-proposal-class-static-block": false,
"@babel/plugin-proposal-class-properties": false,
"@babel/plugin-proposal-decorators": {
"enable": false,
"options": {
"decoratorsBeforeExport": true
}
},
"@babel/plugin-proposal-export-namespace-from": false,
"@babel/plugin-proposal-function-sent": false,
"@babel/plugin-proposal-logical-assignment-operators": false,
"@babel/plugin-proposal-nullish-coalescing-operator": false,
"@babel/plugin-proposal-numeric-separator": false,
"@babel/plugin-proposal-optional-chaining": false,
"@babel/plugin-proposal-private-methods": false,
"@babel/plugin-proposal-throw-expressions": false
},
"customPresets": [],
"customPlugins": []
}
},
"css": {
"enable": true
},
"fonts": {
"enable": true
}
},
"coffeescript": {
"header": false,
"bare": false,
"sourceMap": false
},
"command": {
"command": "",
"rootDir": ""
},
"concat-js": {
"sourceMap": false,
"rootDir": ""
},
"copy": {
"sourceMap": false
},
"dart-sass": {
"indentType": "space",
"indentWidth": 2,
"linefeed": "lf",
"sourceMap": false,
"allowWildcardImports": false
},
"haml": {
"doubleQuoteAttributes": true
},
"jpg": {
"quality": 90
},
"less": {
"javascriptEnabled": false,
"strictImports": false,
"insecure": false,
"math": "always",
"strictUnits": false,
"dumpLineNumbers": false,
"sourceMap": false
},
"markdown": {
"githubFlavored": true,
"wrapWithHtml": false
},
"minify-css": {
"sourceMap": false
},
"minify-html": {
"caseSensitive": false,
"collapseBooleanAttributes": true,
"collapseInlineTagWhitespace": false,
"collapseWhitespace": true,
"conservativeCollapse": false,
"decodeEntities": false,
"html5": true,
"includeAutoGeneratedTags": true,
"keepClosingSlash": false,
"minifyCSS": true,
"minifyJS": true,
"preserveLineBreaks": false,
"preventAttributesEscaping": false,
"processConditionalComments": false,
"removeAttributeQuotes": false,
"removeComments": true,
"removeEmptyAttributes": false,
"removeEmptyElement": false,
"removeOptionalTags": false,
"removeRedundantAttributes": false,
"removeScriptTypeAttributes": false,
"removeStyleLinkTypeAttributes": false,
"removeTagWhitespace": false,
"sortAttributes": false,
"sortClassName": false,
"useShortDoctype": true
},
"minify-js": {
"parse": {
"bare_returns": false
},
"compress": {
"arrows": true,
"arguments": false,
"booleans": true,
"booleans_as_integers": false,
"collapse_vars": true,
"comparisons": true,
"computed_props": true,
"conditionals": true,
"dead_code": true,
"directives": true,
"drop_console": false,
"drop_debugger": true,
"evaluate": true,
"expression": false,
"global_defs": [],
"hoist_funs": false,
"hoist_props": true,
"hoist_vars": false,
"if_return": true,
"inline": 3,
"join_vars": true,
"keep_fargs": true,
"keep_infinity": false,
"loops": true,
"negate_iife": true,
"properties": true,
"pure_funcs": [],
"pure_getters": false,
"reduce_vars": true,
"sequences": true,
"side_effects": true,
"switches": true,
"top_retain": [],
"typeofs": true,
"unsafe": false,
"unsafe_arrows": false,
"unsafe_comps": false,
"unsafe_Function": false,
"unsafe_math": false,
"unsafe_proto": false,
"unsafe_regexp": false,
"unsafe_undefined": false,
"unused": true,
"reduce_funcs": true
},
"mangle": {
"eval": false,
"reserved": []
},
"output": {
"ascii_only": false,
"braces": false,
"comments": "none",
"inline_script": true,
"keep_numbers": false,
"keep_quoted_props": false,
"preamble": null,
"quote_keys": false,
"quote_style": 0,
"semicolons": true,
"shebang": true,
"webkit": false,
"wrap_iife": false,
"wrap_func_args": true
},
"sourceMap": false,
"toplevel": false,
"ie8": false,
"keep_classnames": false,
"keep_fnames": false,
"safari10": false
},
"node-sass": {
"indentType": "space",
"indentWidth": 2,
"linefeed": "lf",
"outputStyle": "expanded",
"precision": 10,
"sourceMap": false,
"sourceComments": false,
"allowWildcardImports": false
},
"png": {
"quality": 90
},
"postcss-import": {
"ignoreKeywords": [],
"sourceMap": false
},
"postcss-preset-env": {
"stage": 2,
"browsers": [
"> 2%",
"not dead"
],
"sourceMap": false
},
"pug": {
"pretty": true
},
"slim": {
"indent": "space",
"indentSize": 2,
"pretty": true
},
"stylus": {
"useNib": true,
"sourceMap": false,
"linenos": false
},
"svg": {
"cleanupAttrs": true,
"removeDoctype": true,
"removeXMLProcInst": true,
"removeComments": true,
"removeMetadata": true,
"removeTitle": true,
"removeDesc": true,
"removeUselessDefs": true,
"removeEditorsNSData": true,
"removeEmptyAttrs": true,
"removeHiddenElems": true,
"removeEmptyText": true,
"removeEmptyContainers": true,
"removeViewBox": false,
"cleanupEnableBackground": true,
"convertStyleToAttrs": true,
"convertColors": true,
"convertPathData": true,
"convertTransform": true,
"removeUnknownsAndDefaults": true,
"removeNonInheritableGroupAttrs": true,
"removeUselessStrokeAndFill": true,
"removeUnusedNS": true,
"cleanupIDs": true,
"cleanupNumericValues": true,
"moveElemsAttrsToGroup": true,
"moveGroupAttrsToElems": true,
"collapseGroups": true,
"removeRasterImages": false,
"mergePaths": true,
"convertShapeToPath": true,
"sortAttrs": true,
"removeDimensions": true
},
"turf": {
"rootDir": ""
},
"typescript": {
"allowJs": false,
"allowSyntheticDefaultImports": true,
"allowUmdGlobalAccess": false,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"alwaysStrict": false,
"charset": "utf8",
"checkJs": false,
"declaration": false,
"disableSizeLimit": false,
"downlevelIteration": false,
"emitBOM": false,
"emitDecoratorMetadata": false,
"experimentalDecorators": false,
"forceConsistentCasingInFileNames": false,
"importHelpers": false,
"jsx": "React",
"keyofStringsOnly": false,
"lib": [],
"maxNodeModuleJsDepth": 0,
"module": "ES2015",
"moduleResolution": "NodeJs",
"newLine": "LineFeed",
"noFallthroughCasesInSwitch": false,
"noImplicitAny": false,
"noImplicitReturns": false,
"noImplicitThis": false,
"noStrictGenericChecks": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitUseStrict": false,
"noLib": false,
"noResolve": false,
"preserveConstEnums": false,
"jsxFactory": "React.createElement",
"removeComments": false,
"skipLibCheck": false,
"sourceMap": false,
"strict": false,
"strictFunctionTypes": false,
"strictBindCallApply": false,
"strictNullChecks": false,
"strictPropertyInitialization": false,
"suppressExcessPropertyErrors": false,
"suppressImplicitAnyIndexErrors": false,
"target": "ES3",
"resolveJsonModule": false,
"esModuleInterop": false,
"useDefineForClassFields": false
}
},
"fileTypes": {
"sass": {
"extensions": [
".scss",
".sass"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "dart-sass",
"enable": true
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": false
}
],
"output": {
"extension": ".css",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "scss",
"replaceWith": "css"
},
{
"segment": "sass",
"replaceWith": "css"
}
]
}
},
"less": {
"extensions": [
".less"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "less",
"enable": true
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": false
}
],
"output": {
"extension": ".css",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "less",
"replaceWith": "css"
}
]
}
},
"pug": {
"extensions": [
".pug",
".jade"
],
"autoCompile": true,
"tasks": [
{
"task": "pug",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "pug",
"replaceWith": "html"
}
]
}
},
"css": {
"extensions": [
".css"
],
"autoCompile": false,
"sourceMap": false,
"tasks": [
{
"task": "copy",
"enable": true
},
{
"task": "postcss-import",
"enable": false
},
{
"task": "postcss-preset-env",
"enable": false
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": true
}
],
"output": {
"extension": ".css",
"type": "SOURCE_RELATIVE",
"relativePath": "",
"suffix": "-dist",
"alwaysSuffix": false
}
},
"javascript": {
"extensions": [
".js",
".jsx"
],
"autoCompile": false,
"sourceMap": false,
"tasks": [
{
"task": "copy",
"enable": true
},
{
"task": "concat-js",
"enable": false
},
{
"task": "babel",
"enable": false
},
{
"task": "bundle-js",
"enable": false
},
{
"task": "minify-js",
"enable": true
}
],
"output": {
"extension": ".js",
"type": "SOURCE_RELATIVE",
"relativePath": "",
"suffix": "-dist",
"alwaysSuffix": false
}
},
"stylus": {
"extensions": [
".styl"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "stylus",
"enable": true
},
{
"task": "autoprefixer",
"enable": true
},
{
"task": "minify-css",
"enable": false
}
],
"output": {
"extension": ".css",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "stylus",
"replaceWith": "css"
},
{
"segment": "styl",
"replaceWith": "css"
}
]
}
},
"markdown": {
"extensions": [
".md",
".markdown",
".mkd"
],
"autoCompile": false,
"tasks": [
{
"task": "markdown",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "markdown",
"replaceWith": "html"
}
]
}
},
"haml": {
"extensions": [
".haml"
],
"autoCompile": true,
"tasks": [
{
"task": "haml",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "haml",
"replaceWith": "html"
}
]
}
},
"slim": {
"extensions": [
".slim"
],
"autoCompile": true,
"tasks": [
{
"task": "slim",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "slim",
"replaceWith": "html"
}
]
}
},
"coffeescript": {
"extensions": [
".coffee"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "coffeescript",
"enable": true
},
{
"task": "babel",
"enable": false
},
{
"task": "bundle-js",
"enable": false
},
{
"task": "minify-js",
"enable": false
}
],
"output": {
"extension": ".js",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "coffee-script",
"replaceWith": "js"
},
{
"segment": "coffeescript",
"replaceWith": "js"
},
{
"segment": "coffee",
"replaceWith": "js"
}
]
}
},
"turf": {
"extensions": [
".turf",
".kit"
],
"autoCompile": true,
"tasks": [
{
"task": "turf",
"enable": true
},
{
"task": "minify-html",
"enable": false
}
],
"output": {
"extension": ".html",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "turf",
"replaceWith": "html"
}
]
}
},
"typescript": {
"extensions": [
".ts",
".tsx"
],
"autoCompile": true,
"sourceMap": false,
"tasks": [
{
"task": "typescript",
"enable": true
},
{
"task": "babel",
"enable": false
},
{
"task": "bundle-js",
"enable": false
},
{
"task": "minify-js",
"enable": false
}
],
"output": {
"extension": ".js",
"type": "REPLACE_SEGMENTS",
"segments": [
{
"segment": "typescript",
"replaceWith": "js"
},
{
"segment": "ts",
"replaceWith": "js"
}
]
}
},
"jpg": {
"extensions": [
".jpg",
".jpeg"
],
"tasks": [
{
"task": "jpg",
"enable": true
}
],
"output": {
"extension": ".jpg",
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
},
"png": {
"extensions": [
".png"
],
"tasks": [
{
"task": "png",
"enable": true
}
],
"output": {
"extension": ".png",
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
},
"svg": {
"extensions": [
".svg"
],
"tasks": [
{
"task": "svg",
"enable": true
}
],
"output": {
"extension": ".svg",
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
}
},
"files": []
}
}

139
themes/modern2/template/css (old)/style.css Normal file
View File

@ -0,0 +1,139 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: 'Roboto', sans-serif;
}
.right_top-up {
max-width: 42.3rem;
width: 100%;
}
.right_top-title {
display: flex;
justify-content: space-between;
align-items: center;
}
.right_top-title-text {
width: 17rem;
font-size: 2rem;
font-weight: bold;
}
.right_top-line {
border: 0.01rem solid rgba(0, 0, 0, 15%);
max-width: 33%;
width: 100%;
height: 0;
}
.right_top-content-top {
display: flex;
justify-content: space-between;
margin-top: 3rem;
}
.right_top-content-sphere {
text-align: center;
padding: 0.6rem 0;
color: #fff;
background: #FD4C24;
max-width: 11.7rem;
width: 100%;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 1rem;
border: none;
}
.right-top-content-date {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.date,
.time {
color: #a2a2a2;
font-size: 1.4rem;
}
.date {
margin-right: 2.5rem;
position: relative;
}
.date::after {
display: inline-block;
width: 0.4rem;
height: 0.4rem;
content: "";
border: none;
background: #a2a2a2;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 50%;
right: -23%;
}
.right_top-content-bottom {
margin-bottom: 1.5rem;
}
.right_top-content:last-child{
margin-bottom: 4rem;
}
.right_top-content-bottom-text {
text-decoration: none;
color: #000;
font-size: 1.6rem;
font-weight: bold;
}
.hr-line {
width: 100%;
border: 0.01rem solid rgba(0, 0, 0, 15%);
}
/* .hr-line:last-child{
display: none; */
}
@media screen and (min-width: 1400px){
.right_top-line{
max-width: 47%;
}
}
/* ========================================== */
.right_top-title-text-2 {
width: 9.4rem;
}
.right_top-line-2 {
max-width: 40%;
width: 100%;
}
.additional {
text-decoration: none;
color: rgba(0, 0, 0, 30%);
font-size: 1.4rem;
margin-left: 2.1rem;
}
.right-top-content-date-2 {
margin-top: 5rem;
}

140
themes/modern2/template/css/components/1-main/mixin.scss
View File

@ -1,90 +1,126 @@
@mixin transition { @mixin transition {
transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s;
} }
@mixin transition-bg { @mixin transition-bg {
transition: background 0.2s ease-in-out 0s; transition: background 0.2s ease-in-out 0s;
-moz-transition: background 0.2s ease-in-out 0s; -moz-transition: background 0.2s ease-in-out 0s;
} }
@mixin transition-border { @mixin transition-border {
transition: border 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s;
-moz-transition: border 0.2s ease-in-out 0s; -moz-transition: border 0.2s ease-in-out 0s;
} }
@mixin fullImage { @mixin fullImage {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
-o-object-fit: cover; -o-object-fit: cover;
} }
@mixin ImgCon {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
@mixin transformY { @mixin transformY {
transform: translateY(-50%); transform: translateY(-50%);
-moz-ransform: translateY(-50%); -moz-ransform: translateY(-50%);
-o-transform: translateY(-50%); -o-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
} }
@mixin transformX { @mixin transformX {
transform: translateX(-50%); transform: translateX(-50%);
-moz-ransform: translateX(-50%); -moz-ransform: translateX(-50%);
-o-transform: translateX(-50%); -o-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
} }
@mixin transform { @mixin transform {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-moz-ransform: translate(-50%, -50%); -moz-ransform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
} }
@mixin transformReset { @mixin transformReset {
transform: translate(0, 0); transform: translate(0, 0);
-moz-ransform: translate(0, 0); -moz-ransform: translate(0, 0);
-o-transform: translate(0, 0); -o-transform: translate(0, 0);
-ms-transform: translate(0, 0); -ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0); -webkit-transform: translate(0, 0);
} }
@mixin rotate { @mixin rotate {
transform: rotate(90deg); transform: rotate(90deg);
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-o-transform: rotate(90deg); -o-transform: rotate(90deg);
-ms-transform: rotate(90deg); -ms-transform: rotate(90deg);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg);
} }
@mixin rotate180deg { @mixin rotate180deg {
transform: rotate(180deg); transform: rotate(180deg);
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
-o-transform: rotate(180deg); -o-transform: rotate(180deg);
-ms-transform: rotate(180deg); -ms-transform: rotate(180deg);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg);
} }
@mixin rotate270deg { @mixin rotate270deg {
transform: rotate(270deg); transform: rotate(270deg);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-o-transform: rotate(270deg); -o-transform: rotate(270deg);
-ms-transform: rotate(270deg); -ms-transform: rotate(270deg);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
} }
@mixin xxsm-xsm { @mixin xxsm-xsm {
@media (max-width: 374px) { @content; } @media (max-width: 374px) {
@content;
}
} }
@mixin xsm-sm { @mixin xsm-sm {
@media (max-width: 540px) { @content; } @media (max-width: 540px) {
@content;
}
} }
@mixin sm-md { @mixin sm-md {
@media (max-width: 700px) { @content; } @media (max-width: 700px) {
@content;
}
} }
@mixin md-lg { @mixin md-lg {
@media (max-width: 768px) { @content; } @media (max-width: 768px) {
@content;
}
} }
@mixin lg-xlg { @mixin lg-xlg {
@media (max-width: 1024px) { @content; } @media (max-width: 1024px) {
@content;
}
} }
@mixin xlg-xxlg { @mixin xlg-xxlg {
@media (max-width: 1400px) { @content; } @media (max-width: 1400px) {
@content;
}
} }
@mixin xxlg-xxxlg { @mixin xxlg-xxxlg {
@media (max-width: 1640px) { @content; } @media (max-width: 1640px) {
@content;
}
} }

142
themes/modern2/template/css/components/1-main/nulifier.scss
View File

@ -9,25 +9,30 @@
// font-size: calc(1vw + 0.6em); // font-size: calc(1vw + 0.6em);
// } // }
* { * {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
border: none; border: none;
outline: none; outline: none;
} }
button { button {
outline: none; outline: none;
} }
button:focus { button:focus {
outline: none; outline: none;
} }
button:focus { button:focus {
outline: none; outline: none;
} }
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
/*** /***
==================================================================== ====================================================================
Global Settings Global Settings
@ -35,68 +40,79 @@ input::-webkit-inner-spin-button {
***/ ***/
body { body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
line-height: 1.7em; line-height: 1.7em;
font-weight: 400; font-weight: 400;
background: #fff; background: #fff;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased; -moz-font-smoothing: antialiased;
} }
a { a {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
color: #000; color: #000;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
position: relative; position: relative;
font-weight: normal; font-weight: normal;
margin: 0px; margin: 0px;
background: none; background: none;
line-height: 1.6em; line-height: 1.6em;
}
/* Typography */
h1 {
font-size: 4em;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 34px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 18px;
}
p {
position: relative;
line-height: 1.8em;
}
.auto__container {
position: relative;
max-width: 1440px;
padding: 0px;
margin: 0 auto;
}
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
.mr-top-bot {
margin: 80px 0;
} }
/* Typography */
h1 {
font-size: 4em;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 34px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 18px;
}
p {
position: relative;
line-height: 1.8em;
}
.auto__container {
position: relative;
max-width: 1440px;
padding: 0px;
margin: 0 auto;
}
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
.mr-top-bot {
margin: 80px 0;
}

296
themes/modern2/template/css/components/2-layout/responsive.scss
View File

File diff suppressed because it is too large Load Diff

490
themes/modern2/template/css/components/3-page/news.scss
View File

@ -4,9 +4,11 @@
align-items: stretch; align-items: stretch;
padding: 80px 0; padding: 80px 0;
} }
&__sidebar { &__sidebar {
margin-left: 25px; margin-left: 25px;
width: calc(30% - 25px); width: calc(30% - 25px);
&-title { &-title {
font-size: $h4-size; font-size: $h4-size;
line-height: $h4-height; line-height: $h4-height;
@ -15,30 +17,36 @@
margin-bottom: 20px; margin-bottom: 20px;
color: $text-light-black; color: $text-light-black;
} }
.card { .card {
padding: 30px 0; padding: 30px 0;
border-bottom: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
&__link { &__link {
height: unset; height: unset;
text-overflow: unset; text-overflow: unset;
} }
} }
} }
&__content { &__content {
width: calc(70% - 25px); width: calc(70% - 25px);
margin-right: 25px; margin-right: 25px;
&-header { &-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
} }
&__title { &__title {
color: $text-black; color: $text-black;
font-weight: 700; font-weight: 700;
font-size: $h2-size; font-size: $h2-size;
line-height: $h2-height; line-height: $h2-height;
} }
&__date { &__date {
display: flex; display: flex;
align-items: center; align-items: center;
@ -47,36 +55,43 @@
color: $text-color-grey; color: $text-color-grey;
font-weight: 400; font-weight: 400;
margin-bottom: 20px; margin-bottom: 20px;
svg { svg {
margin: 0 5px; margin: 0 5px;
} }
} }
&__image { &__image {
width: 100%; width: 100%;
margin: 25px 0; margin: 25px 0;
display: block; display: block;
img { img {
width: 100%; width: 100%;
height: auto; height: auto;
} }
} }
&__body { &__body {
p { p {
font-size: $p-size; font-size: $p-size;
line-height: $p-height; line-height: $p-height;
margin-bottom: 20px; margin-bottom: 20px;
img { img {
width: 90%; width: 90%;
margin: 30px auto; margin: 30px auto;
display: block; display: block;
height: auto; height: auto;
} }
strong { strong {
a { a {
color: #4285f4; color: #4285f4;
} }
} }
} }
img { img {
width: 90%; width: 90%;
margin: 30px auto; margin: 30px auto;
@ -84,24 +99,30 @@
height: auto; height: auto;
} }
} }
&__footer { &__footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&-social { &-social {
display: flex; display: flex;
align-items: center; align-items: center;
&-link { &-link {
margin-right: 20px; margin-right: 20px;
fill: $main-color; fill: $main-color;
svg { svg {
color: $main-color; color: $main-color;
} }
} }
.footer__social-link { .footer__social-link {
fill: $main-color; fill: $main-color;
} }
} }
&-name { &-name {
font-size: $h2-size; font-size: $h2-size;
line-height: $h2-height; line-height: $h2-height;
@ -110,3 +131,472 @@
} }
} }
} }
.comment {
padding: 30px 0;
&_header {
background: #242424;
border-radius: 5px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 15px 25px;
&-title {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #fff;
span {
font-weight: 700;
font-size: 22px;
line-height: 26px;
margin-right: 5px;
}
}
&-add {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
position: relative;
border: 1px solid #fff;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
}
}
&_group {
display: flex;
align-items: center;
}
&_client {
margin-right: 25px;
display: flex;
align-items: center;
span {
display: block;
width: 20px;
height: 20px;
margin-right: 5px;
img {
@include ImgCon;
margin: 0 !important;
}
}
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
}
.signOut {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
border: 1px solid #fff;
border-radius: 5px;
display: block;
padding: 7px 15px;
text-align: center;
}
&_item {
padding-bottom: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #DCDCDC;
&-header {
display: flex;
align-items: center;
}
&-time {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #A2A2A2;
}
.inner-comment {
padding-left: 30px;
}
}
&_user {
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
&::after {
content: '';
position: absolute;
top: 22px;
right: -15px;
width: 5px;
height: 5px;
background: #DCDCDC;
}
&-img {
background: #F3F5F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
width: 50px;
height: 50px;
font-weight: 400;
font-size: 22px;
line-height: 26px;
color: #242424;
}
&-name {
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #000000;
}
}
&_txt {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #A2A2A2;
margin: 15px 0 30px;
}
&_reply {
font-weight: 400;
font-size: 12px;
line-height: 1.4;
color: #A2A2A2;
border: 1px solid #A2A2A2;
display: inline-block;
padding: 7px 20px;
cursor: pointer;
border-radius: 5px;
@include transition;
&:hover {
background: #242424;
color: #fff;
}
}
.reply_form {
margin-top: 25px;
// display: none;
position: relative;
max-height: 0;
overflow: hidden;
@include transition;
&.active {
display: block;
}
&-input {
width: 100%;
margin-bottom: 20px;
textarea {
width: calc(100% - 35px);
padding: 15px;
border: 1px solid #DCDCDC;
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: "Roboto", sans-serif;
resize: vertical;
min-height: 110px;
max-height: 200px;
&::placeholder {
color: #A2A2A2;
}
}
}
&-buttons {
display: flex;
align-items: center;
margin: 0 -7px;
button[type=submit] {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
background: #242424;
width: calc(50% - 14px);
margin: 0 7px;
text-align: center;
display: block;
border-radius: 5px;
cursor: pointer;
padding: 12px 0;
@include transition;
&:hover {
background: #302c2c;
}
}
button[type=reset] {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #242424;
background: #F3F5F7;
width: calc(50% - 14px);
margin: 0 7px;
text-align: center;
display: block;
border-radius: 5px;
cursor: pointer;
padding: 12px 0;
@include transition;
&:hover {
background: #c8cbce;
}
}
}
}
}
.reg_modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 50;
display: none;
&.active {
display: block;
}
&-form {
position: absolute;
top: 50%;
left: 50%;
@include transform;
z-index: 60;
background: #fff;
border-radius: 10px;
max-width: 760px;
width: calc(100% - 50px);
padding: 50px 0;
.inner {
max-width: 430px;
width: calc(100% - 40px);
margin: 0 auto;
}
}
&-title {
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: #242424;
}
&-txt {
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #A2A2A2;
margin: 12px 0 30px;
}
&-input {
display: block;
position: relative;
width: 100%;
margin-bottom: 24px;
&:nth-child(2) {
margin-bottom: 16px;
}
label {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #242424;
display: block;
margin-bottom: 8px;
}
input {
border: 1px solid #DCDCDC;
padding: 16px;
font-weight: 400;
font-size: 18px;
line-height: 21px;
width: calc(100% - 32px);
&::placeholder {
color: #A2A2A2;
}
}
}
&-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
&-check {
input {
display: none;
&:checked~.check_label {
&::after {
display: block;
}
}
}
label {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #242424;
display: block;
cursor: pointer;
position: relative;
padding-left: 25px;
&::before {
content: '';
position: absolute;
top: 50%;
@include transformY;
left: 0;
width: 15px;
height: 15px;
border: 1px solid #DCDCDC;
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
top: 50%;
@include transformY;
left: 1px;
width: 15px;
height: 15px;
background: #242424;
border-radius: 50%;
display: none;
}
}
}
.forgot {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #000000;
}
.sign {
display: block;
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #FFFFFF;
cursor: pointer;
border-radius: 5px;
background: #242424;
padding: 15px 0;
width: 100%;
margin-bottom: 15px;
}
.google_sign {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #DCDCDC;
border-radius: 5px;
cursor: pointer;
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #242424;
width: 100%;
padding: 10px 0;
background: transparent;
span {
width: 30px;
height: 30px;
margin-right: 10px;
img {
@include ImgCon;
}
}
}
&-signIn {
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #A2A2A2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 25px;
a {
color: #242424;
font-weight: 500;
margin-left: 5px;
display: inline-block;
}
}
}

498
themes/modern2/template/css/main.css
View File

@ -1979,6 +1979,422 @@ li {
color: #242424; color: #242424;
} }
.comment {
padding: 30px 0;
}
.comment_header {
background: #242424;
border-radius: 5px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 15px 25px;
}
.comment_header-title {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #fff;
}
.comment_header-title span {
font-weight: 700;
font-size: 22px;
line-height: 26px;
margin-right: 5px;
}
.comment_header-add {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
position: relative;
border: 1px solid #fff;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
}
.comment_group {
display: flex;
align-items: center;
}
.comment_client {
margin-right: 25px;
display: flex;
align-items: center;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
}
.comment_client span {
display: block;
width: 20px;
height: 20px;
margin-right: 5px;
}
.comment_client span img {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
margin: 0 !important;
}
.comment .signOut {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #FFFFFF;
border: 1px solid #fff;
border-radius: 5px;
display: block;
padding: 7px 15px;
text-align: center;
}
.comment_item {
padding-bottom: 15px;
margin-bottom: 25px;
border-bottom: 1px solid #DCDCDC;
}
.comment_item-header {
display: flex;
align-items: center;
}
.comment_item-time {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #A2A2A2;
}
.comment_item .inner-comment {
padding-left: 30px;
}
.comment_user {
display: flex;
align-items: center;
margin-right: 30px;
position: relative;
}
.comment_user::after {
content: "";
position: absolute;
top: 22px;
right: -15px;
width: 5px;
height: 5px;
background: #DCDCDC;
}
.comment_user-img {
background: #F3F5F7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
width: 50px;
height: 50px;
font-weight: 400;
font-size: 22px;
line-height: 26px;
color: #242424;
}
.comment_user-name {
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #000000;
}
.comment_txt {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #A2A2A2;
margin: 15px 0 30px;
}
.comment_reply {
font-weight: 400;
font-size: 12px;
line-height: 1.4;
color: #A2A2A2;
border: 1px solid #A2A2A2;
display: inline-block;
padding: 7px 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
.comment_reply:hover {
background: #242424;
color: #fff;
}
.comment .reply_form {
margin-top: 25px;
position: relative;
max-height: 0;
overflow: hidden;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
.comment .reply_form.active {
display: block;
}
.comment .reply_form-input {
width: 100%;
margin-bottom: 20px;
}
.comment .reply_form-input textarea {
width: calc(100% - 35px);
padding: 15px;
border: 1px solid #DCDCDC;
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: "Roboto", sans-serif;
resize: vertical;
min-height: 110px;
max-height: 200px;
}
.comment .reply_form-input textarea::placeholder {
color: #A2A2A2;
}
.comment .reply_form-buttons {
display: flex;
align-items: center;
margin: 0 -7px;
}
.comment .reply_form-buttons button[type=submit] {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
background: #242424;
width: calc(50% - 14px);
margin: 0 7px;
text-align: center;
display: block;
border-radius: 5px;
cursor: pointer;
padding: 12px 0;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
.comment .reply_form-buttons button[type=submit]:hover {
background: #302c2c;
}
.comment .reply_form-buttons button[type=reset] {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #242424;
background: #F3F5F7;
width: calc(50% - 14px);
margin: 0 7px;
text-align: center;
display: block;
border-radius: 5px;
cursor: pointer;
padding: 12px 0;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
}
.comment .reply_form-buttons button[type=reset]:hover {
background: #c8cbce;
}
.reg_modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 50;
display: none;
}
.reg_modal.active {
display: block;
}
.reg_modal-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-ransform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 60;
background: #fff;
border-radius: 10px;
max-width: 760px;
width: calc(100% - 50px);
padding: 50px 0;
}
.reg_modal-form .inner {
max-width: 430px;
width: calc(100% - 40px);
margin: 0 auto;
}
.reg_modal-title {
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: #242424;
}
.reg_modal-txt {
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #A2A2A2;
margin: 12px 0 30px;
}
.reg_modal-input {
display: block;
position: relative;
width: 100%;
margin-bottom: 24px;
}
.reg_modal-input:nth-child(2) {
margin-bottom: 16px;
}
.reg_modal-input label {
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: #242424;
display: block;
margin-bottom: 8px;
}
.reg_modal-input input {
border: 1px solid #DCDCDC;
padding: 16px;
font-weight: 400;
font-size: 18px;
line-height: 21px;
width: calc(100% - 32px);
}
.reg_modal-input input::placeholder {
color: #A2A2A2;
}
.reg_modal-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.reg_modal-check input {
display: none;
}
.reg_modal-check input:checked ~ .check_label::after {
display: block;
}
.reg_modal-check label {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #242424;
display: block;
cursor: pointer;
position: relative;
padding-left: 25px;
}
.reg_modal-check label::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
-moz-ransform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left: 0;
width: 15px;
height: 15px;
border: 1px solid #DCDCDC;
border-radius: 50%;
}
.reg_modal-check label::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
-moz-ransform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left: 1px;
width: 15px;
height: 15px;
background: #242424;
border-radius: 50%;
display: none;
}
.reg_modal .forgot {
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #000000;
}
.reg_modal .sign {
display: block;
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #FFFFFF;
cursor: pointer;
border-radius: 5px;
background: #242424;
padding: 15px 0;
width: 100%;
margin-bottom: 15px;
}
.reg_modal .google_sign {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #DCDCDC;
border-radius: 5px;
cursor: pointer;
font-weight: 400;
font-size: 18px;
line-height: 21px;
color: #242424;
width: 100%;
padding: 10px 0;
background: transparent;
}
.reg_modal .google_sign span {
width: 30px;
height: 30px;
margin-right: 10px;
}
.reg_modal .google_sign span img {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
.reg_modal-signIn {
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #A2A2A2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 25px;
}
.reg_modal-signIn a {
color: #242424;
font-weight: 500;
margin-left: 5px;
display: inline-block;
}
.terms { .terms {
padding: 80px 0; padding: 80px 0;
} }
@ -2817,4 +3233,86 @@ li {
transform: translateY(0%); transform: translateY(0%);
} }
} }
.comment_header-title span {
font-size: 18px;
}
.comment_group {
margin-top: 10px;
width: 100%;
flex-direction: column;
align-items: unset;
}
.comment .signOut {
margin-top: 10px;
}
.comment_user::after {
top: 14px;
}
.comment_user-img {
width: 30px;
height: 30px;
font-size: 16px;
margin-right: 5px;
}
.comment_user-name {
font-size: 16px;
}
.comment_item-time {
font-size: 12px;
}
.comment_txt {
font-size: 14px;
margin: 10px 0 20px;
}
.reg_modal-form {
padding: 30px 0;
}
.reg_modal-title {
font-size: 18px;
}
.reg_modal-txt {
font-size: 14px;
margin: 5px 0 15px;
}
.reg_modal-input {
margin-bottom: 15px;
}
.reg_modal-input label {
font-size: 14px;
}
.reg_modal-input input {
padding: 10px;
font-size: 14px;
}
.reg_modal-check label {
padding-left: 15px;
font-size: 12px;
}
.reg_modal-check label::after, .reg_modal-check label::before {
width: 10px;
height: 10px;
}
.reg_modal .forgot {
font-size: 12px;
}
.reg_modal .sign {
font-size: 15px;
padding: 10px 0;
}
.reg_modal .google_sign {
font-size: 15px;
}
.reg_modal .google_sign span {
width: 20px;
height: 20px;
}
.reg_modal-signIn {
font-size: 14px;
flex-direction: column;
}
.reg_modal-signIn a {
margin-left: 0;
margin-top: 5px;
}
} }

12
themes/modern2/template/css/prepros.config
View File

@ -213,10 +213,10 @@
}, },
"dart-sass": { "dart-sass": {
"indentType": "space", "indentType": "space",
"allowWildcardImports": false,
"indentWidth": 2, "indentWidth": 2,
"linefeed": "lf", "linefeed": "lf",
"sourceMap": false, "sourceMap": false
"allowWildcardImports": false
}, },
"haml": { "haml": {
"doubleQuoteAttributes": true "doubleQuoteAttributes": true
@ -301,6 +301,7 @@
"properties": true, "properties": true,
"pure_funcs": [], "pure_funcs": [],
"pure_getters": false, "pure_getters": false,
"reduce_funcs": true,
"reduce_vars": true, "reduce_vars": true,
"sequences": true, "sequences": true,
"side_effects": true, "side_effects": true,
@ -315,8 +316,7 @@
"unsafe_proto": false, "unsafe_proto": false,
"unsafe_regexp": false, "unsafe_regexp": false,
"unsafe_undefined": false, "unsafe_undefined": false,
"unused": true, "unused": true
"reduce_funcs": true
}, },
"mangle": { "mangle": {
"eval": false, "eval": false,
@ -347,13 +347,13 @@
}, },
"node-sass": { "node-sass": {
"indentType": "space", "indentType": "space",
"allowWildcardImports": false,
"indentWidth": 2, "indentWidth": 2,
"linefeed": "lf", "linefeed": "lf",
"outputStyle": "expanded", "outputStyle": "expanded",
"precision": 10, "precision": 10,
"sourceMap": false, "sourceMap": false,
"sourceComments": false, "sourceComments": false
"allowWildcardImports": false
}, },
"png": { "png": {
"quality": 90 "quality": 90

69
themes/modern2/template/css/style.css
View File

@ -17,13 +17,11 @@ body {
width: 100%; width: 100%;
} }
.right_top-title { .right_top-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.right_top-title-text { .right_top-title-text {
width: 17rem; width: 17rem;
font-size: 2rem; font-size: 2rem;
@ -106,8 +104,8 @@ body {
border: 0.01rem solid rgba(0, 0, 0, 15%); border: 0.01rem solid rgba(0, 0, 0, 15%);
} }
/* .hr-line:last-child{ /* .hr-line:last-child{
display: none; */ display: none; } */
}
@media screen and (min-width: 1400px){ @media screen and (min-width: 1400px){
.right_top-line{ .right_top-line{
max-width: 47%; max-width: 47%;
@ -137,3 +135,66 @@ body {
.right-top-content-date-2 { .right-top-content-date-2 {
margin-top: 5rem; margin-top: 5rem;
} }
.event__body-column .card {
padding: 10px 0;
border-bottom: 1px solid #dcdcdc;
}
.card__link {
color: #000;
font-weight: 700;
font-size: 16px;
line-height: 25px;
margin: 5px 0 0 0;
display: block;
height: 49px;
overflow: hidden;
text-overflow: ellipsis;
}
.card {
position: relative;
padding: 21px 30px;
background: #ffffff;
}
.event__header {
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.main {
margin-top: 20px;
}
.event {
margin: 30px 0;
margin-bottom: 70px;
}
.main__banner {
width: 100%;
height: auto;
margin-bottom: 30px;
}
.main__body-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 35px;
position: relative;
}
.partner__title {
font-size: 20px;
line-height: 26px;
font-weight: 700;
color: #242424;
margin-bottom: 30px;
}
.main__body-row {
margin: 0px -20px 50px -20px;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}

BIN
themes/modern2/template/images/google.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
themes/modern2/template/images/svg/user.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1C5.477 1 1 5.477 1 11C1 16.523 5.477 21 11 21C16.523 21 21 16.523 21 11C21 5.477 16.523 1 11 1Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.271 17.346C3.271 17.346 5.5 14.5 11 14.5C16.5 14.5 18.73 17.346 18.73 17.346M11 11C11.7956 11 12.5587 10.6839 13.1213 10.1213C13.6839 9.55871 14 8.79565 14 8C14 7.20435 13.6839 6.44129 13.1213 5.87868C12.5587 5.31607 11.7956 5 11 5C10.2043 5 9.44128 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8C8 8.79565 8.31607 9.55871 8.87868 10.1213C9.44128 10.6839 10.2043 11 11 11Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 773 B

1
themes/modern2/template/js/main.js
View File

@ -149,3 +149,4 @@ if (
); );
// lazyload end // lazyload end

294
themes/modern2/template/news.html
View File

@ -16,8 +16,7 @@
</head> </head>
<body> <body>
<!-- header start <!-- header start ===============================-->
================================================-->
<header class="header"> <header class="header">
<div class="auto__container"> <div class="auto__container">
<div class="header__inner"> <div class="header__inner">
@ -98,10 +97,9 @@
</div> </div>
</div> </div>
</section> </section>
<!-- header end <!-- header end =================================-->
================================================-->
<!-- main start <!-- main start ================================= -->
================================================ -->
<section class="news"> <section class="news">
<div class="auto__container"> <div class="auto__container">
<div class="news__inner"> <div class="news__inner">
@ -262,6 +260,174 @@
Нуры АМАНОВ Нуры АМАНОВ
</div> </div>
</div> </div>
<div class="comment">
<div class="comment_header">
<h2 class="comment_header-title">
<span>
22
</span>
Comments
</h2>
<h4 class="comment_header-add">
Add a comment
</h4>
</div>
<div class="comment_header">
<h2 class="comment_header-title">
<span>
22
</span>
Comments
</h2>
<div class="comment_group">
<div class="comment_client">
<span>
<img src="images/svg/user.svg" alt="user-icon">
</span>
Kakabay Ahyrberdyew
</div>
<a href="#" class="signOut">
Sign out
</a>
</div>
</div>
<div class="comment_item">
<div class="comment_item-header">
<div class="comment_user">
<div class="comment_user-img">
A
</div>
<h4 class="comment_user-name">
Aman Amanow
</h4>
</div>
<div class="comment_item-time">
1h ago
</div>
</div>
<div class="comment_txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim
praesent elementum facilisis leo, vel
</div>
<div class="comment_reply">
Reply
</div>
<form action="#" class="reply_form">
<div class="reply_form-input">
<textarea placeholder="Add a comment ..."></textarea>
</div>
<div class="reply_form-buttons">
<button class="send" type="submit">
Post
</button>
<button class="cancel" type="reset">
Cancel
</button>
</div>
</form>
</div>
<div class="comment_item">
<div class="comment_item-header">
<div class="comment_user">
<div class="comment_user-img">
A
</div>
<h4 class="comment_user-name">
Aman Amanow
</h4>
</div>
<div class="comment_item-time">
1h ago
</div>
</div>
<div class="comment_txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim
praesent elementum facilisis leo, vel
</div>
<div class="comment_reply">
Reply
</div>
<form action="#" class="reply_form">
<div class="reply_form-input">
<textarea placeholder="Add a comment ..."></textarea>
</div>
<div class="reply_form-buttons">
<button class="send" type="submit">
Post
</button>
<button class="cancel" type="reset">
Cancel
</button>
</div>
</form>
<div class="inner-comment">
<div class="comment_item-header">
<div class="comment_user">
<div class="comment_user-img">
A
</div>
<h4 class="comment_user-name">
Aman Amanow
</h4>
</div>
<div class="comment_item-time">
1h ago
</div>
</div>
<div class="comment_txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
enim
praesent elementum facilisis leo, vel
</div>
<div class="comment_reply">
Reply
</div>
<form action="#" class="reply_form">
<div class="reply_form-input">
<textarea placeholder="Add a comment ..."></textarea>
</div>
<div class="reply_form-buttons">
<button class="send" type="submit">
Post
</button>
<button class="cancel" type="reset">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div> </div>
<div class="news__sidebar"> <div class="news__sidebar">
<div class="news__sidebar-title"> <div class="news__sidebar-title">
@ -475,10 +641,9 @@
</div> </div>
</div> </div>
</section> </section>
<!-- main end <!-- main end =================================== -->
================================================ -->
<!-- footer start <!-- footer start =============================== -->
================================================ -->
<footer class="footer"> <footer class="footer">
<div class="auto__container"> <div class="auto__container">
<div class="footer__inner"> <div class="footer__inner">
@ -574,13 +739,118 @@
</div> </div>
</div> </div>
</footer> </footer>
<!-- footer end <!-- footer end ================================= -->
================================================ -->
<!-- Register modal ===================================== -->
<div class="reg_modal">
<form class="reg_modal-form">
<div class="inner">
<h1 class="reg_modal-title">
Sign up to leave a comment
</h1>
<p class="reg_modal-txt">
Pelease enter your details
</p>
<div class="reg_modal-input">
<label for="mail">Email</label>
<input type="text" id="mail" placeholder="Enter your email">
</div>
<div class="reg_modal-input">
<label for="pass">Password</label>
<input type="password" id="pass" placeholder="••••••">
</div>
<div class="reg_modal-row">
<div class="reg_modal-check">
<input type="checkbox" id="remember">
<label for="remember" class="check_label">Remember me</label>
</div>
<a href="#" class="forgot">
Forgot password
</a>
</div>
<button type="submit" class="sign">
Sign up
</button>
<button class="google_sign">
<span>
<img src="images/google.png" alt="google-icon">
</span>
Sign up with google
</button>
<p class="reg_modal-signIn">
Already have an account? <a href="#">Sign in for free</a>
</p>
</div>
</form>
</div>
<!-- Register modal end ================================= -->
<!-- javascript start <!-- javascript start
============================================= --> ============================================= -->
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
<script src="js/main.js"></script>
<!-- javascript end <!-- javascript end
============================================= --> ============================================= -->
<script>
// Accord ==============
let accordion = document.getElementsByClassName("comment_reply");
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
panel.classList.remove("active")
} else {
panel.style.maxHeight = "1000px";
panel.classList.add("active")
}
});
}
// Accord end ==========
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
let add = document.querySelector(".comment_header-add")
let reg_modal = document.querySelector(".reg_modal")
window.onclick = function (e) {
if (reg_modal != undefined) {
if (reg_modal.classList.contains('active') && !e.target.closest('.reg_modal-form')) {
reg_modal.classList.remove('active')
}
}
}
if (add != undefined) {
add.addEventListener('click', function () {
sleep(2).then(() => {
reg_modal.classList.add('active');
});
});
}
</script>
</body> </body>
</html> </html>