danak/arakrail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added animations and pageLoad and preLoader

Browse Source
This commit is contained in:
Amir Mohamadi
2020-12-19 13:26:55 +03:30
parent bc5e617778
commit 9433eb84ac
57 changed files with 13099 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/_pages.scss
+516 -108
View File
@@ -27,63 +27,90 @@
///////////////////////////// home page
.home--page {
#slider {
.slider-container {
overflow: hidden;
.hero {
.bg {
//background-image: url("../img/home/hp-s1-i1.jpg");
}
#slider {
overflow: hidden;
.txt--home {
width: 400px;
height: 300px;
position: absolute;
bottom: 20%;
right: 200px;
.hero {
overflow: hidden;
&:lang(en) {
right: auto;
left: 200px;
.bg {
//background-image: url("../img/home/hp-s1-i1.jpg");
}
h1 {
color: #fff;
.txt--home {
width: 400px;
height: 300px;
position: absolute;
bottom: 20%;
right: 200px;
padding: 0 15px;
@media (max-width: 768px) {
right: 0;
}
@media (max-width: 400px) {
width: 100%;
}
&:lang(en) {
font-family: 'anton';
right: auto;
left: 200px;
@media (max-width: 768px) {
left: 0;
}
}
h1 {
color: #fff;
&:lang(en) {
font-family: 'anton';
}
}
p {
color: #fff;
}
}
}
.slick-dots {
bottom: 80px;
li {
button::before {
font-size: 10px;
color: $red;
}
}
}
.slick-arrow {
color: $red;
z-index: 5;
&.slick-prev {
left: 80px;
@media (max-width: 992px) {
left: 40px;
}
}
p {
color: #fff;
&.slick-next {
right: 80px;
@media (max-width: 992px) {
right: 40px;
}
}
}
}
.slick-dots {
bottom: 80px;
li {
button::before {
font-size: 10px;
color: $red;
}
}
}
.slick-arrow {
color: $red;
z-index: 5;
&.slick-prev {
left: 80px;
}
&.slick-next {
right: 80px;
}
}
}
.s1 {
@@ -104,6 +131,13 @@
em {
line-height: 80px;
font-size: 30px;
@extend %defaultTransition;
}
&:hover {
em {
color: $red;
}
}
}
@@ -112,11 +146,18 @@
}
}
.s1-2 {
.s2 {
text-align: center;
@media (max-width: 1200px) {
.section-bg {
height: 450px;
object-fit: cover;
}
}
}
.s2 {
.s3 {
overflow-x: hidden;
.panel {
@@ -124,7 +165,7 @@
}
.parts {
width: 100%;
//width: 100%;
&.p1 {
width: 100%;
@@ -153,9 +194,16 @@
align-items: baseline;
}
}
@media (max-width: 1200px) {
.section-bg {
height: 450px;
object-fit: cover;
}
}
}
.s3 {
.s4 {
.panel {
padding: 100px 100px 200px;
@@ -170,39 +218,59 @@
margin-top: -100px;
padding: 0 100px;
@media (max-width: 992px) {
& {
margin-top: 0;
padding: 0;
}
}
.parts {
&.p2 {
text-align: center;
.imgBox {
.product {
display: block;
background: #fff;
padding-bottom: 20px;
@extend %defaultBoxShadow;
margin-bottom: 30px;
height: 100%;
p {
margin-top: 20px;
}
img {
width: 100%;
@include boxShadow(none);
.imgBox {
@extend %productHoverAnim;
img {
width: 100%;
}
}
}
}
}
}
@media (max-width: 1200px) {
.section-bg {
height: 450px;
object-fit: cover;
}
}
}
.s4 {
.s5 {
position: relative;
padding-bottom: 0;
.txt {
max-width: 600px;
height: 300px;
//height: 300px;
position: absolute;
top: 20%;
top: 50%;
right: 200px;
@include transform(translateY(-50%));
&:lang(en) {
right: auto;
@@ -227,59 +295,27 @@
margin-top: $mt;
color: #fff;
}
}
}
.s5 {
.panel {
background: $theme;
margin-top: 0;
@media (max-width: 992px) {
//top: 50%;
right: 0;
//@include transform(translateY(-50%));
max-width: 100%;
//height: auto;
padding: 0 15px;
.p1 {
text-align: center;
.title {
color: #fff;
&::after {
background: #fff;
}
}
p {
color: #fff;
&:lang(en) {
right: auto;
left: 0;
}
}
.form {
margin-top: 50px;
input, textarea {
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
color: #fff;
&::placeholder {
color: rgba(255, 255, 255, 0.8);
}
&:focus {
@include boxShadow(0 0 5px rgba(#fff, 0.05));
border: 2px solid rgba(#fff, 0.1);
}
}
}
}
.watermark {
text-align: center;
padding-top: 100px;
svg {
width: 100px;
path {
fill: rgba(0, 0, 0, 0.1);
@media (max-width: 1600px) {
& {
.section-bg {
height: 550px;
object-fit: cover;
}
}
}
@@ -325,10 +361,31 @@
color: $theme;
font-family: 'diodrum-bold';
font-size: 40px;
@media (max-width: 450px) {
font-size: 30px;
}
@media (max-width: 300px) {
font-size: 25px;
}
}
p {
margin-top: 50px;
direction: rtl;
&:lang(en) {
direction: ltr;
}
@media (max-width: 992px) {
text-align: right;
&:lang(en) {
text-align: left;
}
}
}
}
@@ -343,6 +400,14 @@
&.p4 {
margin-bottom: 0;
text-align: center;
@media (max-width: 992px) {
text-align: right;
&:lang(en) {
text-align: left;
}
}
}
}
}
@@ -370,6 +435,10 @@
&.active {
border: 1px solid $red;
background: $red;
span {
color: $red;
}
}
span {
@@ -378,6 +447,15 @@
bottom: -40px;
left: 50%;
@include transform(translateX(-50%));
@extend %defaultTransition;
}
&:hover {
border: 1px solid $red;
span {
color: $red;
}
}
}
@@ -403,6 +481,10 @@
justify-content: center;
text-align: right;
&:lang(en) {
text-align: left;
}
p {
margin-top: 30px;
}
@@ -451,6 +533,11 @@
p {
font-family: 'diodrum-bold';
}
@media (max-width: 992px) {
text-align: center;
margin-top: 30px;
}
}
.img {
@@ -512,9 +599,14 @@
justify-content: center;
align-items: center;
margin-top: 100px;
flex-wrap: wrap;
img {
margin: 0 20px;
@media (max-width: 768px) {
margin-bottom: 10px;
}
}
}
}
@@ -533,6 +625,13 @@
text-align: center;
}
}
@media (max-width: 1200px) {
.section-bg {
height: 450px;
object-fit: cover;
}
}
}
}
@@ -551,15 +650,25 @@
.s2 {
text-align: center;
.product {
display: block;
background: #fff;
padding-bottom: 30px;
text-align: right;
height: 100%;
@extend %defaultBoxShadow;
img {
width: 100%;
&:lang(en) {
text-align: left;
}
.imgBox {
@extend %productHoverAnim;
img {
width: 100%;
}
}
h4 {
@@ -569,12 +678,11 @@
p {
padding: 0 15px;
margin-top: 10px;
margin-top: 15px;
}
}
.no-product {
width: 100%;
background: $red;
color: #fff;
padding: 20px;
@@ -652,6 +760,7 @@
///////////////////////////// products page
.product-details--page {
.hero {
.bg {
background-image: url('../img/products/products-hero.jpg');
@@ -663,13 +772,24 @@
.image-preview {
background: $bg;
width: 100%;
//width: 100%;
padding: 100px;
@include transform(translateY(200px));
@extend %defaultBoxShadow;
@media (max-width: 768px) {
padding: 0;
}
img {
width: 50%;
@media (max-width: 1200px) {
width: 80%;
}
@media (max-width: 992px) {
width: 100%;
}
}
}
@@ -768,6 +888,7 @@
.files {
display: flex;
justify-content: center;
flex-wrap: wrap;
.file {
text-align: center;
@@ -874,6 +995,16 @@
}
.no-project {
p {
background: $red;
color: #fff;
padding: 20px;
margin-top: 80px;
text-align: center;
}
}
}
.s2 {
@@ -921,13 +1052,31 @@
padding-bottom: 30px;
margin-top: 0;
@media (max-width: 1200px) {
padding-left: 15px;
}
@media (max-width: 992px) {
flex-wrap: wrap;
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.imgBox {
flex-basis: 30%;
@media (max-width: 992px) {
flex-basis: 100%;
}
.img {
width: 140%;
position: relative;
@media (max-width: 992px) {
width: 100%;
}
&::before {
content: '';
display: block;
@@ -940,6 +1089,13 @@
z-index: -1;
}
&:lang(en) {
&::before {
right: auto;
left: -15px;
}
}
img {
width: 100%;
height: 100%;
@@ -952,14 +1108,27 @@
flex-basis: 70%;
padding: 0 15px;
@media (max-width: 992px) {
flex-basis: 100%;
}
.date-category {
width: 100%;
text-align: right;
margin-bottom: 30px;
&:lang(en) {
text-align: left;
}
.category {
margin-left: 20px;
&:lang(en) {
margin-left: 0;
margin-right: 20px;
}
span {
display: inline-block;
}
@@ -969,6 +1138,14 @@
.btn {
float: left;
margin-top: 50px !important;
@media (max-width: 1400px) {
margin-top: 40px !important;
}
@media (max-width: 1200px) {
margin-top: 30px !important;
}
}
h4 {
@@ -979,7 +1156,6 @@
}
.no-post {
width: 100%;
background: $red;
color: #fff;
padding: 20px;
@@ -1036,6 +1212,52 @@
}
}
}
.content {
direction: rtl;
text-align: right;
&:lang(en) {
direction: ltr;
text-align: left;
}
a {
color: blue;
}
p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
font-family: 'sahel', sans-serif;
direction: unset;
text-align: unset;
&:lang(en) {
font-family: 'diodrum';
direction: unset;
text-align: unset;
}
&[dir="ltr"] {
direction: ltr;
text-align: left;
p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
direction: ltr;
text-align: left;
}
}
&[dir="rtl"] {
direction: rtl;
text-align: right;
p, a, span, b, ul, li, em, h1, h2, h3, h4, h5, h6, strong {
direction: rtl;
text-align: right;
}
}
}
}
}
.s2 {
@@ -1071,6 +1293,11 @@
i {
color: $red;
margin-left: 5px;
&:lang(en) {
margin-left: 0;
margin-right: 5px;
}
}
}
}
@@ -1094,6 +1321,11 @@
display: inline-block;
margin-left: 20px;
&:lang(en) {
margin-left: 0;
margin-right: 20px;
}
a {
&:hover {
i {
@@ -1177,6 +1409,16 @@
}
}
}
.i1 {
width: 100%;
max-width: 325px;
}
.i2 {
width: 100%;
max-width: 768px;
}
}
h2 {
@@ -1225,3 +1467,169 @@
}
}
}
///////////////////////////// calculation page
.calculation--page {
.hero {
.bg {
background-image: url('../img/calculation/hero.jpg');
}
}
.s1 {
}
.s2 {
.app {
.appTitle {
text-align: center;
}
.appMethod {
text-align: center;
margin-bottom: 50px;
background: $red;
padding: 15px;
span {
color: #fff;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: $darkGray;
border-color: $darkGray;
@include boxShadow(-1px 0 0 0 $darkGray);
}
.el-radio-button .el-radio-button__inner {
color: $red;
}
.el-radio-button.is-active .el-radio-button__inner {
color: #fff;
}
}
.appLayout {
padding: 55px;
background: $red;
height: 100%;
@include boxSizing(border-box);
@media (max-width: 1400px) {
padding: 55px 15px;
}
span, p, b, * {
color: #fff;
}
input {
color: $red;
}
button {
color: $red;
span {
color: $red;
}
}
.layoutTitle {
margin-bottom: 50px;
}
.class {
margin-bottom: 40px;
h4 {
margin-bottom: 15px;
}
}
.calculateBtn {
text-align: center;
.btn {
@include borderRadius(5px);
&:hover {
background: $darkGray;
color: #fff;
}
}
}
.el-radio {
margin-bottom: 15px;
}
.el-radio__input.is-checked .el-radio__inner {
background-color: $darkGray;
border-color: $darkGray;
}
.el-form-item__label {
@media (max-width: 600px) {
float: none !important;
&:lang(fa) {
float: none !important;
}
}
}
.el-form-item__content {
margin-left: 200px !important;
@media (max-width: 600px) {
margin-left: 0 !important;
}
&:lang(fa) {
margin-left: 0 !important;
margin-right: 200px !important;
@media (max-width: 600px) {
margin-right: 0 !important;
}
}
}
.el-input--suffix .el-input__inner {
padding-right: 15px;
}
.el-input__inner {
&::placeholder {
color: $darkGray;
}
}
}
.el-input {
//width: auto;
//
//@media (max-width: 600px) {
// width: 100%;
//}
}
.el-select {
width: 100%;
}
.el-radio {
margin-right: 20px;
&:lang(fa) {
margin-right: 0;
margin-left: 20px;
}
}
}
}
}