Skip to content
Snippets Groups Projects
Commit ff77a96b authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

ISTWCMS-5650: Add adaptive height to the flickity viewport

parent f023943a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/patterns/03-layouts/carousel/_carousel.scss
+ 77
− 119
View file @ ff77a96b
//@use '../../01-core' as *; .carousel {
// opacity: 0;
//.uw-carousel { transition: all 0.4s;
// display: block; position: relative;
// position: relative; margin-bottom: 1.5rem;
// width: 100%;
//} }
// .flickity-viewport {
//.owl-carousel.owl-theme { transition: all ease 0.4s;
// display: flex !important; }
// flex-flow: column; .carousel.is-hidden {
// display: none;
// .owl-dots{ }
// margin-bottom: var(--size-1);
// .owl-dot { .carousel.flickity-enabled {
// &:hover{ opacity: 1;
// span { }
// background: var(--gray-5) !important; .uw-carousel__banner {
// color: var(--gray-5) !important; .flickity-button {
// } background: transparent;
// } }
// &.active{ /* big previous & next buttons */
// span { .flickity-prev-next-button {
// background: var(--gray-5) !important; top: 40%;
// color: var(--gray-5) !important; width: 5rem;
// } height: 5rem;
// } }
// } /* icon color */
// } .flickity-button-icon {
//} fill: var(--uw-black);
// }
//.owl-stage-outer { /* hide disabled button */
// margin-bottom: var(--size-2); .flickity-button:disabled {
// order: 1; display: none;
//} }
//
//// Style the carousel buttons. /* position dots up a bit */
//.uw-owl-nav{ .flickity-page-dots {
// bottom: -1.5rem;
// &.disabled { display: flex;
// display: none; }
// } /* dots are lines */
// display: flex; .flickity-page-dots .dot {
// justify-content: center; height: 1.5rem;
// order: 3; width: 100%;
// margin: 0;
// button { background: var(--gray-2);
// background: var(--gray-2); border-radius: 0;
// color: var(--uw-black); border-left: 1px;
// display: inline-block; border-bottom: 1px;
// font-family: var(--font-condensedbook); border-color: var(--gray-5);
// font-size: var(--font-size-1); border-style: solid;
// font-weight: 200; opacity:1;
// letter-spacing: 0.055rem; &:first-child {
// margin: 0 var(--size-1); border-left: 0;
// max-width: inherit; }
// padding: var(--size-105); &.is-selected {
// text-decoration: none; background:var(--uw-black);
// text-transform: uppercase; }
// user-select: none; &:hover,
// vertical-align: middle; &:focus{
// white-space: nowrap; background: var(--gray-5);
// width: auto; }
// }
// &:hover {
// background: var(--gray-5) !important; .flickity-button:focus {
// color: var(--uw-white) !important; outline: none;
// } box-shadow: 0 0 0 5px var(--uw-black);
// } .flickity-button-icon {
//} fill: var(--uw-black);
// }
//.owl-dots { }
// order: 2;
// .carousel.is-fullscreen .card__banner {
// &.disabled { height: 100%;
// display: none; }
// } }
//
// button {
// background: var(--gray-5);
// color: var(--uw-white-1);
// display: inline-block;
// font-size: var(--font-size-1);
// height: var(--size-4);
// margin: 0 auto;
// max-width: inherit;
// padding: inherit;
// text-decoration: none;
// user-select: none;
// vertical-align: middle;
// white-space: nowrap;
// width: var(--size-4);
//
// &:hover {
// background-color: transparent;
// }
// }
//}
//
//.owl-theme .owl-dots .owl-dot {
// span{
// border-radius: 50%;
// height: var(--size-2) !important;
// width: var(--size-2) !important;
// }
//
// &:hover{
// span {
// background: var(--gray-5) !important;
// color: var(--gray-5) !important;
// }
// }
// &.active{
// span {
// background: var(--gray-5) !important;
// color: var(--gray-5) !important;
// }
// }
//}
src/patterns/04-components/banners/_banners.scss
+ 0
− 84
View file @ ff77a96b
...@@ -224,87 +224,3 @@ ...@@ -224,87 +224,3 @@
// display: block; // display: block;
// } // }
//} //}
.carousel {
opacity: 0;
transition: all 0.4s;
position: relative;
margin-bottom: 1.5rem;
}
.carousel.is-hidden {
display: none;
}
.carousel.flickity-enabled {
opacity: 1;
}
.uw-carousel__banner {
.flickity-button {
background: transparent;
}
/* big previous & next buttons */
.flickity-prev-next-button {
top: 40%;
width: 5rem;
height: 5rem;
}
/* icon color */
.flickity-button-icon {
fill: var(--uw-black);
}
/* hide disabled button */
.flickity-button:disabled {
display: none;
}
/* position dots up a bit */
.flickity-page-dots {
bottom: -1.5rem;
display: flex;
}
/* dots are lines */
.flickity-page-dots .dot {
height: 1.5rem;
width: 100%;
margin: 0;
background: var(--gray-2);
border-radius: 0;
border-left: 1px;
border-bottom: 1px;
border-color: var(--gray-5);
border-style: solid;
opacity:1;
&:first-child {
border-left: 0;
}
&.is-selected {
background:var(--uw-black);
}
&:hover,
&:focus{
background: var(--gray-5);
}
}
.flickity-enabled:focus .flickity-viewport {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
}
.uw-ff--carousel .flickity-enabled:focus .flickity-viewport {
outline: none;
}
.flickity-button:focus {
outline: none;
box-shadow: 0 0 0 5px var(--uw-black);
.flickity-button-icon {
fill: var(--uw-black);
}
}
.carousel.is-fullscreen .card__banner {
height: 100%;
}
}
src/patterns/04-components/banners/banners.js
+ 1
− 0
View file @ ff77a96b
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
autoPlay: bannerAutoplay ? bannerSlideSpeed : false, autoPlay: bannerAutoplay ? bannerSlideSpeed : false,
draggable: true, draggable: true,
fade: true, fade: true,
adaptiveHeight: true,
cellSelector: '.card__banner', cellSelector: '.card__banner',
pageDots: bannerDots, pageDots: bannerDots,
prevNextButtons: false, prevNextButtons: false,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment