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 @@ ...@@ -226,12 +226,10 @@
//} //}
.carousel { .carousel {
background: #FAFAFA;
opacity: 0; opacity: 0;
transition: all 0.4s; transition: all 0.4s;
position: relative; position: relative;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.carousel.is-hidden { .carousel.is-hidden {
...@@ -294,6 +292,9 @@ ...@@ -294,6 +292,9 @@
outline: thin dotted; outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
} }
.uw-ff--carousel .flickity-enabled:focus .flickity-viewport {
outline: none;
}
.flickity-button:focus { .flickity-button:focus {
outline: none; 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; ...@@ -439,7 +439,7 @@ $highlighted-fact-round: $global-rounded;
visibility: hidden; visibility: hidden;
} }
.uw-ff .owl-carousel .owl-item img { .uw-ff .carousel img {
width: auto; width: auto;
} }
...@@ -790,13 +790,17 @@ are the same height. */ ...@@ -790,13 +790,17 @@ are the same height. */
} }
&--carousel{ &--carousel{
.owl-stage{ .flickity-slider {
display: flex; display: flex;
} }
.owl-item { .uw-ff--fact {
display: flex; display: flex;
@include flex(1 1 auto);
@include flex-grow(1);
flex-flow: column;
position: relative; position: relative;
padding: var(--size-4);
&:nth-of-type(odd) { &:nth-of-type(odd) {
.uw-ff--fact{ .uw-ff--fact{
...@@ -822,8 +826,14 @@ are the same height. */ ...@@ -822,8 +826,14 @@ are the same height. */
} }
} }
.owl-stage-outer { .flickity-viewport {
padding: var(--size-4) 0; 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. */ ...@@ -962,74 +972,63 @@ are the same height. */
} }
} }
.no-js .uw-ff--carousel .owl-carousel { .uw-ff--carousel .carousel {
display: flex; display: flex;
flex-direction: row; flex-flow: column;
flex-wrap: wrap;
gap: 10px;
.uw-ff { .uw-ff {
&--fact { &--fact {
@include flex(1 1 auto); @include flex(1);
@include flex-grow(1); @include flex-grow(1);
margin: var(--size-205) 0; margin-left: var(--size-110);
width: 100%; width: 100%;
@media(min-width: $screen-xs) { padding: var(--size-4);
width: 50%; min-height:100%;
} @media(min-width: $screen-sm) {
@media(min-width: $screen-md) { max-width: 49%;
width: 30%;
} }
@media(min-width: $screen-xl) { @media(min-width: $screen-xl) {
width: 25%; 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%;
}
} }
//.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