added animations and pageLoad and preLoader
This commit is contained in:
Amir Mohamadi
@@ -5,6 +5,10 @@ body {
|
||||
&:lang(en) {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
&.offCanvas-active {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
p, a, span, b {
|
||||
@@ -63,9 +67,20 @@ section {
|
||||
padding: 0 0 100px;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
@include transform(rotateZ(0));
|
||||
}
|
||||
|
||||
100% {
|
||||
@include transform(rotateZ(360deg));
|
||||
}
|
||||
}
|
||||
|
||||
/////// global classes
|
||||
.page {
|
||||
min-height: calc(100vh - 200px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -77,13 +92,76 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
.offCanvas {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 140px;
|
||||
right: -100%;
|
||||
height: calc(100vh - 140px);
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
overflow: scroll;
|
||||
padding-bottom: 100px;
|
||||
@include boxSizing(border-box);
|
||||
@extend %defaultTransition;
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
&.header-small {
|
||||
top: 90px;
|
||||
height: calc(100vh - 90px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
padding: 25px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&.active {
|
||||
a {
|
||||
@include borderRadius(10px);
|
||||
background: $red;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.title {
|
||||
&.t2 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
z-index: 11;
|
||||
@include boxShadow(0 4px 10px rgba(0, 0, 0, 0.07));
|
||||
|
||||
.lang-bar {
|
||||
@@ -181,10 +259,40 @@ section {
|
||||
li {
|
||||
text-align: right;
|
||||
padding: 30px 0;
|
||||
width: auto;
|
||||
@extend %defaultTransition;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin: 0 50px;
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
& {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
& {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 920px) {
|
||||
& {
|
||||
margin: 0 15px;
|
||||
|
||||
a {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
a {
|
||||
font-size: 14px;
|
||||
|
||||
&:lang(en) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -251,6 +359,14 @@ section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-menu-active {
|
||||
background: $red;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -290,6 +406,57 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
ul {
|
||||
li {
|
||||
margin: 0 !important;
|
||||
|
||||
&.menu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
#menuBtn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
|
||||
.bars {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #000;
|
||||
margin-bottom: 3px;
|
||||
@extend %defaultTransition;
|
||||
}
|
||||
|
||||
&.close {
|
||||
.bars {
|
||||
background: $red;
|
||||
|
||||
&.b1 {
|
||||
@include transform(rotate(45deg) translate(4px, 7px));
|
||||
}
|
||||
|
||||
&.b2 {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.b3 {
|
||||
@include transform(rotate(-45deg) translate(3px, -6px));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.header-small {
|
||||
.links {
|
||||
li {
|
||||
@@ -473,13 +640,14 @@ section {
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-background-size: cover;
|
||||
}
|
||||
|
||||
.txt {
|
||||
@@ -541,6 +709,12 @@ section {
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: $red;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -552,6 +726,14 @@ section {
|
||||
margin-top: -80px;
|
||||
z-index: 0;
|
||||
@include boxSizing(border-box);
|
||||
|
||||
@media (max-width: 992px) {
|
||||
padding: 100px 15px !important;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -623,6 +805,12 @@ section {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
& {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -655,6 +843,7 @@ section {
|
||||
|
||||
p {
|
||||
color: red;
|
||||
padding-right: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -688,7 +877,9 @@ section {
|
||||
input, textarea {
|
||||
@extend %appearance;
|
||||
@extend %defaultTransition;
|
||||
width: 100%;
|
||||
width: 95%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border: 2px solid transparent;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
||||
outline: none;
|
||||
@@ -746,14 +937,25 @@ section {
|
||||
&:lang(en) {
|
||||
right: auto;
|
||||
left: -30px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filters {
|
||||
margin: 0 auto 50px;
|
||||
|
||||
@@ -790,3 +992,73 @@ section {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-load {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
direction: ltr !important;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
svg {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.pre-loader {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
direction: ltr !important;
|
||||
|
||||
#preLoadserLogo {
|
||||
width: 100px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loadingCircle {
|
||||
width: 60px;
|
||||
@include animation(loading 1.5s infinite);
|
||||
position: absolute;
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 30px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 0;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $theme;
|
||||
font-size: 30px;
|
||||
font-family: 'diodrum-bold';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tsWords {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user