From e3b2a035be85497ff8b11d5de23ea8d17da32c53 Mon Sep 17 00:00:00 2001 From: Yaroslav Trach Date: Mon, 6 Mar 2017 11:43:00 +0200 Subject: [PATCH 1/2] [FEATURE] Aligning bottom of HeroImage caption --- dev/styles/main/contentElements/heroImage.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/dev/styles/main/contentElements/heroImage.less b/dev/styles/main/contentElements/heroImage.less index c88cfa3..a0177da 100644 --- a/dev/styles/main/contentElements/heroImage.less +++ b/dev/styles/main/contentElements/heroImage.less @@ -21,18 +21,30 @@ .hero-image__caption-wrp._center-align .hero-image__caption{ margin: auto; } +.hero-image__caption-wrp._center-align._bottom-align .hero-image__caption{ + left: 0; + right: 0; +} .hero-image__caption-wrp._right-align{ text-align: right; } .hero-image__caption-wrp._right-align .hero-image__caption{ float: right; } +.hero-image__caption-wrp._right-align._bottom-align .hero-image__caption{ + right: 0; +} .hero-image__caption{ padding: 20px 60px; color: @main-body-bg; overflow: hidden; -webkit-font-smoothing: antialiased; } +.hero-image__caption-wrp._bottom-align .hero-image__caption{ + position: absolute; + bottom: 0; + float: none; +} .hero-image__caption .hero-image__caption-header{ color: @main-body-bg; font-style: normal; From cddf93e89dd7c7ee2aa39d094cf846ae492b2543 Mon Sep 17 00:00:00 2001 From: Yaroslav Trach Date: Mon, 27 Mar 2017 16:34:16 +0300 Subject: [PATCH 2/2] [FEATURE] Hero image - vertical align (center; bottom) --- .../main/contentElements/heroImage.less | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/dev/styles/main/contentElements/heroImage.less b/dev/styles/main/contentElements/heroImage.less index a0177da..47eee40 100644 --- a/dev/styles/main/contentElements/heroImage.less +++ b/dev/styles/main/contentElements/heroImage.less @@ -2,7 +2,8 @@ // HERO IMAGE ----------------------------------// //--------------------------------------------------// .hero-image{ - overflow: auto; + position: relative; + overflow: hidden; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; @@ -12,38 +13,53 @@ .hero-image__caption-wrp._left-align{ text-align: left; } -.hero-image__caption-wrp._left-align .hero-image__caption{ +.hero-image__caption-wrp._left-align._vertical-top-align .hero-image__caption{ float: left; } +.hero-image__caption-wrp._left-align._vertical-center-align .hero-image__caption{ + left: 0; +} +.hero-image__caption-wrp._left-align._vertical-bottom-align .hero-image__caption{ + left: 0; +} .hero-image__caption-wrp._center-align{ text-align: center; } -.hero-image__caption-wrp._center-align .hero-image__caption{ - margin: auto; +.hero-image__caption-wrp._center-align._vertical-center-align .hero-image__caption{ + left: 0; + right: 0; } -.hero-image__caption-wrp._center-align._bottom-align .hero-image__caption{ +.hero-image__caption-wrp._center-align._vertical-bottom-align .hero-image__caption{ left: 0; right: 0; } .hero-image__caption-wrp._right-align{ text-align: right; } -.hero-image__caption-wrp._right-align .hero-image__caption{ +.hero-image__caption-wrp._right-align._vertical-top-align .hero-image__caption{ float: right; } -.hero-image__caption-wrp._right-align._bottom-align .hero-image__caption{ +.hero-image__caption-wrp._right-align._vertical-center-align .hero-image__caption{ + right: 0; +} +.hero-image__caption-wrp._right-align._vertical-bottom-align .hero-image__caption{ right: 0; } .hero-image__caption{ padding: 20px 60px; color: @main-body-bg; - overflow: hidden; + // overflow: hidden; + max-height: 100%; -webkit-font-smoothing: antialiased; } -.hero-image__caption-wrp._bottom-align .hero-image__caption{ +.hero-image__caption-wrp._vertical-center-align .hero-image__caption{ + position: absolute; + top: 50%; + transform: translate3D(0, -50%, 0); +} +.hero-image__caption-wrp._vertical-bottom-align .hero-image__caption{ position: absolute; bottom: 0; - float: none; } .hero-image__caption .hero-image__caption-header{ color: @main-body-bg; @@ -70,6 +86,11 @@ .slider-container._full-width .swiper-slide-next .hero-image__caption > *{ transition: none; } +@media(max-width: 991px) { + .hero-image__caption{ + max-width: 100%; + } +} @media(min-width: 992px){ .slider-container._full-width .swiper-button-next, .slider-container._full-width .swiper-button-prev{