From e173f9c7e62aadf6e0979378440ede18235badbe Mon Sep 17 00:00:00 2001 From: prashant-webkul Date: Mon, 13 Aug 2018 14:39:40 +0530 Subject: [PATCH] Slider animations and transition working. --- .../assets/js/components/image-slider.vue | 5 +- .../src/Resources/assets/sass/_variables.scss | 1 + .../Shop/src/Resources/assets/sass/app.scss | 184 ++++++++++-------- 3 files changed, 107 insertions(+), 83 deletions(-) diff --git a/packages/Webkul/Shop/src/Resources/assets/js/components/image-slider.vue b/packages/Webkul/Shop/src/Resources/assets/js/components/image-slider.vue index c574d2997..219ac0f5a 100644 --- a/packages/Webkul/Shop/src/Resources/assets/js/components/image-slider.vue +++ b/packages/Webkul/Shop/src/Resources/assets/js/components/image-slider.vue @@ -3,12 +3,10 @@
@@ -42,7 +40,7 @@ export default { }; }, - mounted(){ + mounted() { this.getProps(); }, @@ -121,4 +119,5 @@ export default { opacity: 0; } + \ No newline at end of file diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss index 6659ef51f..94e53d359 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss @@ -13,6 +13,7 @@ $offer-color: #ff6472; $sign-up-text-color: #5e5e5e; $login-text: #3a3a3a; $background-color: #ffffff; +$color-black : black; $forgot-password-color: #0031f0; $profile-content-color: #5e5e5e; //customer variables ends here diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss index 4c0a1c166..c914ee305 100644 --- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss +++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss @@ -170,31 +170,6 @@ body { font-size: 16px; display: block; - // .menu-bar { - // display: flex; - // flex-direction: row; - // justify-content: flex-start; - // align-items: center; - // height: 48px; - // width: 80%; - // margin-left: auto; - // margin-right: auto; - - // li { - // display: flex; - // flex-direction: row; - // align-items: center; - // justify-content: center; - // // background-color: blue; - // height: 100%; - // margin: 2.5%; - // } - // li:last-child { - // margin-left: auto; - // color: $offer-color; - // } - // } - ul.nav { display: block; font-size:16px; @@ -304,63 +279,53 @@ body { } } -.slider-block { +section.slider-block { display: block; - width: 80%; - height: 500px; - margin-left: auto; - margin-right: auto; margin-bottom: 5%; - .slider-content { + div.slider-content { + width: 80%; + height: 500px; + margin-left: auto; + margin-right: auto; + ul.slider-images { li{ + //both rules are equivalent to display none position: absolute; - display: none; - width: 80%; - object-fit: fill; + visibility: hidden; } li.show { display:block; - height: 500px; + visibility: visible; + width: 80%; + animation-name: example; + animation-duration: 4s; + } + + @keyframes example { + 0% {opacity: 0.1;} + 100% {opacity: 1;} } li img { - width: 100%; height: 500px; - object-fit: fill; + width:100%; } - - - // li img { - // position: absolute; - // display: none; - // width: 80%; - // height: 500px; - // object-fit: fill; - // } - - // li img.show { - // display:block; - // height: 500px; - // } - } - .slider-control { - - display: inline-block; - vertical-align: middle; + div.slider-control { + display: block; position: absolute; - right: 10%; - margin-right: 10px; - margin-bottom: 1.8%; user-select: none; + bottom: 2%; + right: 11%; + .dark-left-icon { - background-color: white; + background-color: $background-color; height: 48px; width: 48px; max-height: 100%; @@ -368,7 +333,7 @@ body { } .light-right-icon { - background-color: black; + background-color: $color-black; height: 48px; width: 48px; max-height: 100%; @@ -654,7 +619,7 @@ body { align-content: center; justify-content: flex-start; border: 1px solid #e8e8e8; - background: #ffffff; + background: $background-color; width: 25%; height: 100%; text-transform: capitalize; @@ -680,7 +645,7 @@ body { border-bottom: none; } li.active { - color: #0031f0; + color: $forgot-password-color; } } @@ -946,20 +911,60 @@ body { } } } - .slider-block { - display: block; - width: 100%; - margin-bottom: 5%; - .slider-content { + section.slider-block { + + div.slider-content { + width:100%; + ul.slider-images { - li img { + + li{ + position: absolute; + display: none; + } + + li.show { + display:block; width: 100%; - object-fit: fill; + } + + li img { + height: 500px; + width:100%; + } + } + + div.slider-control { + display: inline-block; + position: absolute; + user-select: none; + width: 100%; + right: 0; + bottom: 50%; + + .dark-left-icon { + background-color: $background-color; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; + margin-left: 5%; + } + + .light-right-icon { + background-color: $color-black; + float:right; + height: 48px; + width: 48px; + max-height: 100%; + max-width: 100%; + margin-right: 5%; } } } } + .main-container-wrapper { margin-left: 4%; margin-right: 4%; @@ -1155,6 +1160,7 @@ body { } } + @media all and (min-width: 481px) and (max-width: 920px) { .header { // border: 1px solid black; @@ -1328,22 +1334,40 @@ body { } } } - .slider-block { - display: block; - width: 92%; - margin-left: auto; - margin-right: auto; - margin-bottom: 5%; - .slider-content { + section.slider-block { + + div.slider-content { + width:92%; + ul.slider-images { - li img { - width: 100%; - object-fit: fill; + + li{ + position: absolute; + display: none; } + + li.show { + display:block; + width: 92%; + } + + li img { + height: 500px; + width:100%; + } + } + + div.slider-control { + display: inline-block; + position: absolute; + user-select: none; + bottom: 1em; + right: 5.5%; } } } + .main-container-wrapper { margin-left: 4%; margin-right: 4%;