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

ISTWCMS-5650: Initial css for the presentation of facts figures in carousel

parent 4ad8a098
No related branches found
No related tags found
1 merge request!273Feature/istwcms 5650 m26lebla owl carousel replacement
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/banners/_banners.scss
+ 3
− 2
View file @ 9735a2e6
......@@ -226,12 +226,10 @@
//}
.carousel {
background: #FAFAFA;
opacity: 0;
transition: all 0.4s;
position: relative;
margin-bottom: 1.5rem;
}
.carousel.is-hidden {
......@@ -294,6 +292,9 @@
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;
......
src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
+ 64
− 65
View file @ 9735a2e6
......@@ -439,7 +439,7 @@ $highlighted-fact-round: $global-rounded;
visibility: hidden;
}
.uw-ff .owl-carousel .owl-item img {
.uw-ff .carousel img {
width: auto;
}
......@@ -790,13 +790,17 @@ are the same height. */
}
&--carousel{
.owl-stage{
.flickity-slider {
display: flex;
}
.owl-item {
.uw-ff--fact {
display: flex;
@include flex(1 1 auto);
@include flex-grow(1);
flex-flow: column;
position: relative;
padding: var(--size-4);
&:nth-of-type(odd) {
.uw-ff--fact{
......@@ -822,8 +826,14 @@ are the same height. */
}
}
.owl-stage-outer {
padding: var(--size-4) 0;
.flickity-viewport {
display: flex;
flex-flow: column;
margin-bottom: var(--size-4);
overflow: inherit;
overflow-x: clip;
overflow-y: visible;
padding-top: var(--size-4);
}
}
}
......@@ -962,74 +972,63 @@ are the same height. */
}
}
.no-js .uw-ff--carousel .owl-carousel {
.uw-ff--carousel .carousel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
flex-flow: column;
.uw-ff {
&--fact {
@include flex(1 1 auto);
@include flex(1);
@include flex-grow(1);
margin: var(--size-205) 0;
margin-left: var(--size-110);
width: 100%;
@media(min-width: $screen-xs) {
width: 50%;
}
@media(min-width: $screen-md) {
width: 30%;
padding: var(--size-4);
min-height:100%;
@media(min-width: $screen-sm) {
max-width: 49%;
}
@media(min-width: $screen-xl) {
width: 25%;
}
.uw-contained-width--wide & {
@media(min-width: $screen-xs) {
width: 45%;
}
@media(min-width: $screen-md) {
width: 45%;
}
@media(min-width: $screen-xl) {
width: 45%;
}
}
.uw-node__sidebar &,
.uw-contained-width--narrow & {
@media(min-width: $screen-xs) {
width: 100%;
}
@media(min-width: $screen-md) {
width: 100%;
}
@media(min-width: $screen-xl) {
width: 100%;
}
}
.uw-full-width & {
@media(min-width: $screen-xs) {
width: 45%;
}
@media(min-width: $screen-md) {
width: 30%;
}
@media(min-width: $screen-xl) {
width: 23%;
}
max-width: 32.5%;
}
//.uw-contained-width--wide & {
// @media(min-width: $screen-xs) {
// width: 45%;
// }
// @media(min-width: $screen-md) {
// width: 45%;
// }
// @media(min-width: $screen-xl) {
// width: 45%;
// }
//}
//
//.uw-node__sidebar &,
//.uw-contained-width--narrow & {
// @media(min-width: $screen-xs) {
// width: 100%;
// }
//
// @media(min-width: $screen-md) {
// width: 100%;
// }
//
// @media(min-width: $screen-xl) {
// width: 100%;
// }
//}
//
//.uw-full-width & {
// @media(min-width: $screen-xs) {
// width: 45%;
// }
//
// @media(min-width: $screen-md) {
// width: 30%;
// }
//
// @media(min-width: $screen-xl) {
// width: 23%;
// }
//}
}
}
}
.no-js.js {
.uw-ff--carousel .owl-carousel.owl-theme {
display: flex !important;
flex-flow: column;
}
}
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