forked from UKSOURCE/hailearning.edu.vn
447 lines
11 KiB
SCSS
447 lines
11 KiB
SCSS
.preloader {
|
|
align-items: center;
|
|
cursor: default;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9999999;
|
|
|
|
.animation-preloader {
|
|
z-index: 1000;
|
|
|
|
.spinner {
|
|
animation: spinner 1s infinite linear;
|
|
border-radius: 50%;
|
|
border: 3px solid rgba(0, 0, 0, 0.2);
|
|
border-top-color: $theme-color;
|
|
height: 9em;
|
|
margin: 0 auto 3.5em auto;
|
|
width: 9em;
|
|
|
|
@media (max-width: 767px) {
|
|
width: 7.5em;
|
|
height: 7.5em;
|
|
margin: 0 auto 1.5em auto;
|
|
}
|
|
}
|
|
|
|
.txt-loading {
|
|
font: bold 5em $heading-font, $body-font;
|
|
text-align: center;
|
|
user-select: none;
|
|
|
|
@media (max-width: 767px) {
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.letters-loading {
|
|
color: $theme-color;
|
|
position: relative;
|
|
|
|
&:nth-child(2):before {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
&:nth-child(3):before {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
&:nth-child(4):before {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
&:nth-child(5):before {
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
&:nth-child(6):before {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
&:nth-child(7):before {
|
|
animation-delay: 1.2s;
|
|
}
|
|
|
|
&:nth-child(8):before {
|
|
animation-delay: 1.4s;
|
|
}
|
|
|
|
&::before {
|
|
animation: letters-loading 4s infinite;
|
|
color: $header-color;
|
|
content: attr(data-text-preloader);
|
|
left: 0;
|
|
opacity: 0;
|
|
font-family: $heading-font;
|
|
position: absolute;
|
|
top: -3px;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 8px;
|
|
color: $theme-color;
|
|
}
|
|
|
|
.loader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
|
|
.row {
|
|
height: 100%;
|
|
}
|
|
|
|
.loader-section {
|
|
padding: 0px;
|
|
|
|
.bg {
|
|
background-color: $bg-color;
|
|
height: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.loaded {
|
|
.animation-preloader {
|
|
opacity: 0;
|
|
transition: 0.3s ease-out;
|
|
}
|
|
|
|
.loader-section {
|
|
.bg {
|
|
width: 0;
|
|
transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.back-to-top {
|
|
background-color: $theme-color;
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 40px;
|
|
border-radius: 100px;
|
|
color: $white;
|
|
font-size: 16px;
|
|
position: fixed;
|
|
display: inline-block;
|
|
z-index: 9999;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
@include transition;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(20px);
|
|
|
|
@include breakpoint (max-sm) {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $white;
|
|
color: $theme-color-2;
|
|
}
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translate(0);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.cursor-outer {
|
|
-webkit-margin-start: -12px;
|
|
margin-inline-start: -12px;
|
|
margin-top: -12px;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid $theme-color;
|
|
background-color: $theme-color;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
z-index: 10000000;
|
|
opacity: 0.34;
|
|
-webkit-transition: all 0.4s ease-out 0s;
|
|
transition: all 0.4s ease-out 0s;
|
|
}
|
|
.cursor-outer.cursor-hover {
|
|
opacity: 0.14;
|
|
}
|
|
.cursor-outer.cursor-big {
|
|
opacity: 0;
|
|
}
|
|
.mouseCursor {
|
|
position: fixed;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
border-radius: 50%;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
visibility: hidden;
|
|
text-align: center;
|
|
}
|
|
.mouseCursor.cursor-big {
|
|
width: 20px;
|
|
height: 20px;
|
|
-webkit-margin-start: -12px;
|
|
margin-inline-start: -12px;
|
|
margin-top: -12px;
|
|
}
|
|
.cursor-inner {
|
|
-webkit-margin-start: -3px;
|
|
margin-inline-start: -3px;
|
|
margin-top: -3px;
|
|
width: 10px;
|
|
height: 10px;
|
|
z-index: 10000001;
|
|
background-color: $theme-color;
|
|
opacity: 1;
|
|
-webkit-transition: all 0.24s ease-out 0s;
|
|
transition: all 0.24s ease-out 0s;
|
|
span {
|
|
color: $text-color;
|
|
line-height: 60px;
|
|
opacity: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.cursor-inner.cursor-big {
|
|
span {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.cursor-inner.cursor-hover {
|
|
-webkit-margin-start: -10px;
|
|
margin-inline-start: -10px;
|
|
margin-top: -10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: $theme-color;
|
|
border: 1px solid #686363;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
|
|
.search-popup {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -2;
|
|
-webkit-transition: all 1s ease;
|
|
-khtml-transition: all 1s ease;
|
|
-moz-transition: all 1s ease;
|
|
-ms-transition: all 1s ease;
|
|
-o-transition: all 1s ease;
|
|
transition: all 1s ease;
|
|
}
|
|
|
|
.search-popup__overlay {
|
|
position: fixed;
|
|
width: 224vw;
|
|
height: 224vw;
|
|
top: calc(90px - 112vw);
|
|
right: calc(50% - 112vw);
|
|
z-index: 3;
|
|
display: block;
|
|
-webkit-border-radius: 50%;
|
|
-khtml-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
-o-border-radius: 50%;
|
|
border-radius: 50%;
|
|
-webkit-transform: scale(0);
|
|
-khtml-transform: scale(0);
|
|
-moz-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
-o-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-transform-origin: center;
|
|
transform-origin: center;
|
|
-webkit-transition: transform 0.8s ease-in-out;
|
|
-khtml-transition: transform 0.8s ease-in-out;
|
|
-moz-transition: transform 0.8s ease-in-out;
|
|
-ms-transition: transform 0.8s ease-in-out;
|
|
-o-transition: transform 0.8s ease-in-out;
|
|
transition: transform 0.8s ease-in-out;
|
|
transition-delay: 0s;
|
|
transition-delay: 0.3s;
|
|
-webkit-transition-delay: 0.3s;
|
|
background-color: #000000;
|
|
opacity: 0.7;
|
|
cursor: url(../../assets/img/close.png), auto;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.search-popup__overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
transform: translateY(-110%);
|
|
}
|
|
}
|
|
|
|
.search-popup__content {
|
|
position: fixed;
|
|
width: 0;
|
|
max-width: 560px;
|
|
padding: 30px 15px;
|
|
left: 50%;
|
|
top: 50%;
|
|
opacity: 0;
|
|
z-index: 3;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-khtml-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%);
|
|
-o-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
-webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
|
|
-khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
|
|
-moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
|
|
-ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
|
|
-o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
|
|
transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
|
|
transition-delay: 0s, 0.8s, 0s;
|
|
transition-delay: 0s, 0.4s, 0s;
|
|
transition-delay: 0.2s;
|
|
-webkit-transition-delay: 0.2s;
|
|
}
|
|
|
|
.search-popup__form {
|
|
position: relative;
|
|
}
|
|
|
|
.search-popup__form input[type=search],
|
|
.search-popup__form input[type=text] {
|
|
width: 100%;
|
|
height: 66px;
|
|
border: none;
|
|
outline: none;
|
|
padding-left: 20px;
|
|
background-color: $white;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: $text-color;
|
|
transition: all 500ms ease;
|
|
}
|
|
|
|
.search-popup__form input[type=search]:focus,
|
|
.search-popup__form input[type=text]:focus {
|
|
color: $header-color;
|
|
}
|
|
|
|
.search-popup__form .search-btn {
|
|
padding: 0;
|
|
width: 66px;
|
|
height: 66px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1px;
|
|
border-radius: 0;
|
|
font-size: 20px;
|
|
color: $white;
|
|
background-color: $theme-color;
|
|
@include transition;
|
|
|
|
&:hover {
|
|
background-color: $black;
|
|
}
|
|
}
|
|
|
|
.search-popup__form .eolexi-btn svg {
|
|
width: 1em;
|
|
height: 1em;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.search-popup.active {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.search-popup.active .search-popup__overlay {
|
|
top: auto;
|
|
bottom: calc(90px - 112vw);
|
|
-webkit-transform: scale(1);
|
|
-khtml-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
transform: scale(1);
|
|
transition-delay: 0s;
|
|
-webkit-transition-delay: 0s;
|
|
opacity: 0.7;
|
|
-webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
|
|
-khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
|
|
-moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
|
|
-ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
|
|
-o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
|
|
transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.search-popup.active .search-popup__overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
transform: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
.search-popup.active .search-popup__content {
|
|
width: 100%;
|
|
opacity: 1;
|
|
transition-delay: 0.7s;
|
|
-webkit-transition-delay: 0.7s;
|
|
}
|
|
|