Skip to content
Snippets Groups Projects
Commit 53fe7f65 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-5650: Add css to display the FF in carousel as per numItems

parent aca0a52c
No related branches found
No related tags found
1 merge request!273Feature/istwcms 5650 m26lebla owl carousel replacement
......@@ -447,9 +447,10 @@ $highlighted-fact-round: $global-rounded;
from owl script. Ensures bubbles
are the same height. */
.uw-ff {
&--with-bubbles{
.uw-ff--fact{
&--with-bubbles {
.uw-ff--fact {
border-radius: $highlighted-fact-radius + 10;
&:nth-of-type(odd) {
&::after {
border-left: var(--size-2) solid transparent;
......@@ -479,7 +480,7 @@ are the same height. */
}
}
&__black{
&__black {
.uw-ff--fact {
background-color: var(--uw-black);
......@@ -491,13 +492,14 @@ are the same height. */
&:nth-of-type(even) {
&::after {
border-top: var(--size-3) solid var(--uw-black);
border-top: var(--size-3) solid var(--uw-black);
}
}
}
}
&__white{
.uw-ff--fact{
&__white {
.uw-ff--fact {
background-color: var(--uw-white);
&:nth-of-type(odd) {
......@@ -513,8 +515,9 @@ are the same height. */
}
}
}
&__grey{
.uw-ff--fact{
&__grey {
.uw-ff--fact {
background-color: var(--uw-black-1);
&:nth-of-type(odd) {
......@@ -522,6 +525,7 @@ are the same height. */
border-bottom: var(--size-3) solid var(--uw-black-1);
}
}
&:nth-of-type(even) {
&::after {
border-top: var(--size-3) solid var(--uw-black-1);
......@@ -530,8 +534,8 @@ are the same height. */
}
}
&__gold{
.uw-ff--fact{
&__gold {
.uw-ff--fact {
background-color: var(--uw-gold);
&:nth-of-type(odd) {
......@@ -568,6 +572,7 @@ are the same height. */
.infographic-half-circle {
justify-self: flex-start;
}
.uw-ff--text {
text-align: left;
}
......@@ -583,7 +588,7 @@ are the same height. */
width: auto;
}
.uw-ff--fact{
.uw-ff--fact {
align-items: flex-end;
text-align: right;
}
......@@ -610,7 +615,7 @@ are the same height. */
text-align: center;
}
.highlighted-fact-infographic{
.highlighted-fact-infographic {
align-items: center;
}
......@@ -619,7 +624,7 @@ are the same height. */
width: auto;
}
.infographic-number{
.infographic-number {
margin: 0 auto;
text-align: center;
width: auto;
......@@ -658,8 +663,10 @@ are the same height. */
margin: var(--size-1) 0;
text-wrap: balance;
width: 100%;
&__icon {
display: block;
img {
display: block;
height: 100%;
......@@ -711,6 +718,7 @@ are the same height. */
i {
font-style: normal;
}
strong,
b {
font-weight: bold;
......@@ -718,14 +726,14 @@ are the same height. */
}
}
&--no-carousel{
&--no-carousel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
.uw-ff{
&--fact{
.uw-ff {
&--fact {
@include flex(1 1 auto);
@include flex-grow(1);
margin: var(--size-205) 0;
......@@ -771,6 +779,7 @@ are the same height. */
width: 100%;
}
}
.uw-full-width & {
@media(min-width: $screen-xs) {
......@@ -789,69 +798,109 @@ are the same height. */
}
}
&--carousel{
.flickity-slider {
display: flex;
}
.uw-ff--fact {
&--carousel {
.carousel {
display: flex;
@include flex(1 1 auto);
@include flex-grow(1);
flex-flow: column;
position: relative;
padding: var(--size-4);
.flickity-slider {
display: flex;
}
.uw-ff--fact {
display: flex;
@include flex(1 1 auto);
@include flex-grow(1);
flex-flow: column;
position: relative;
margin-left: var(--size-110);
padding: var(--size-4);
min-height:100%;
&:nth-of-type(odd) {
.uw-ff--fact{
&::after{
bottom: inherit;
top: -1.25rem;
&:nth-of-type(odd) {
.uw-ff--fact {
&::after {
bottom: inherit;
top: -1.25rem;
}
}
}
}
&:nth-of-type(even) {
.uw-ff--fact{
&::after{
bottom: -1.25rem;
top: inherit;
transform: rotate(180deg);
&:nth-of-type(even) {
.uw-ff--fact {
&::after {
bottom: -1.25rem;
top: inherit;
transform: rotate(180deg);
}
}
}
&:first-child {
margin-left: 0;
}
[data-num-per-carousel='1'] & ,
[data-num-per-carousel='2'] & ,
[data-num-per-carousel='3'] & ,
[data-num-per-carousel='4'] & {
width: 100%;
@media(min-width: $screen-md) {
width: 49.5%;
}
}
[data-num-per-carousel='1'] & {
@media(min-width: $screen-md) {
width: 100%
}
}
[data-num-per-carousel='2'] & {
@media(min-width: $screen-lg) {
width: 49.5%
}
}
[data-num-per-carousel='3'] & {
@media(min-width: $screen-lg) {
width: 32.5%
}
}
[data-num-per-carousel='4'] & {
@media(min-width: $screen-lg) {
width: 24.25%
}
}
}
&:first-child {
margin-left: 0;
.flickity-page-dots {
bottom: -3.125rem;
.dot {
height: var(--size-2);
width: var(--size-2);
&.is-selected {
background: var(--uw-black);
}
&:hover,
&:focus {
opacity: 1 !important;
background: var(--gray-5);
}
}
}
}
.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);
}
}
}
.flickity-page-dots {
bottom: -3.125rem;
.dot {
height: var(--size-2);
width: var(--size-2);
&.is-selected {
background:var(--uw-black);
}
&:hover,
&:focus{
opacity: 1 !important;
background: var(--gray-5);
.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);
}
}
}
}
.uw-button--wrap {
display: flex;
width:100%;
......@@ -1017,24 +1066,3 @@ are the same height. */
}
}
}
.uw-ff--carousel .carousel {
display: flex;
flex-flow: column;
.uw-ff {
&--fact {
@include flex(1);
@include flex-grow(1);
margin-left: var(--size-110);
width: 100%;
padding: var(--size-4);
min-height:100%;
@media(min-width: $screen-sm) {
max-width: 49%;
}
@media(min-width: $screen-xl) {
max-width: 32.5%;
}
}
}
}
<div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
<div class="uw-ff--wrapper uw-ff--wrapper__text-{{ ffs.text_align }} {{ ffs.num_per_carousel ? 'uw-ff--carousel' : 'uw-ff--no-carousel' }} {{ ffs.theme }}">
{% if ffs.num_per_carousel >= 1%}
{% embed '@layouts/carousel/carousel.twig' %}
{% block content %}
{% for details in ffs.details %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment