Commit 0b4f64a5 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-5309:js attempts to get the transition speed

parent 9fcacb61
@charset "UTF-8";
/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) 2022 Animate.css
*/
:root {
--animate-duration: 1s;
--animate-delay: 1s;
--animate-repeat: 1;
}
.animate__animated {
animation-duration: 1s;
animation-duration: var(--animate-duration);
animation-fill-mode: both;
}
.animate__animated.animate__infinite {
animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
animation-iteration-count: 1;
animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
animation-iteration-count: calc(1 * 2);
animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
animation-iteration-count: calc(1 * 3);
animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
animation-delay: 1s;
animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
animation-delay: calc(1s * 2);
animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
animation-delay: calc(1s * 3);
animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
animation-delay: calc(1s * 4);
animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
animation-delay: calc(1s * 5);
animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
animation-duration: calc(1s / 2);
animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
animation-duration: calc(1s * 0.8);
animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
animation-duration: calc(1s * 2);
animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
animation-duration: calc(1s * 3);
animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
.animate__animated {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
.animate__animated[class*='Out'] {
opacity: 0;
}
}
/* Fading entrances */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate__fadeIn {
animation-name: fadeIn;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInDownBig {
animation-name: fadeInDownBig;
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInLeftBig {
animation-name: fadeInLeftBig;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInRightBig {
animation-name: fadeInRightBig;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUpBig {
animation-name: fadeInUpBig;
}
@keyframes fadeInTopLeft {
from {
opacity: 0;
transform: translate3d(-100%, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInTopLeft {
animation-name: fadeInTopLeft;
}
@keyframes fadeInTopRight {
from {
opacity: 0;
transform: translate3d(100%, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInTopRight {
animation-name: fadeInTopRight;
}
@keyframes fadeInBottomLeft {
from {
opacity: 0;
transform: translate3d(-100%, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInBottomLeft {
animation-name: fadeInBottomLeft;
}
@keyframes fadeInBottomRight {
from {
opacity: 0;
transform: translate3d(100%, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInBottomRight {
animation-name: fadeInBottomRight;
}
/* Fading exits */
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animate__fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.animate__fadeOutDown {
animation-name: fadeOutDown;
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.animate__fadeOutDownBig {
animation-name: fadeOutDownBig;
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.animate__fadeOutLeft {
animation-name: fadeOutLeft;
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.animate__fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.animate__fadeOutRightBig {
animation-name: fadeOutRightBig;
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.animate__fadeOutUp {
animation-name: fadeOutUp;
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.animate__fadeOutUpBig {
animation-name: fadeOutUpBig;
}
@keyframes fadeOutTopLeft {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-100%, -100%, 0);
}
}
.animate__fadeOutTopLeft {
animation-name: fadeOutTopLeft;
}
@keyframes fadeOutTopRight {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(100%, -100%, 0);
}
}
.animate__fadeOutTopRight {
animation-name: fadeOutTopRight;
}
@keyframes fadeOutBottomRight {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(100%, 100%, 0);
}
}
.animate__fadeOutBottomRight {
animation-name: fadeOutBottomRight;
}
@keyframes fadeOutBottomLeft {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-100%, 100%, 0);
}
}
.animate__fadeOutBottomLeft {
animation-name: fadeOutBottomLeft;
}
.uw-carousel{
&__banner{
// Used to control the display of the play-pause
&[data-autoplay="1"]{
.uw-owl-nav__banner-control-wrap{
display:block;
}
&.banner-single{
.uw-owl-nav__banner-control-wrap{
display:none;
}
}
}
&[data-autoplay="0"]{
.uw-owl-nav__banner-control-wrap{
display:none;
}
}
.uw-owl-nav__banner-control-wrap {
bottom:1.5rem;
display:none;
font-size: gesso-font-size(3);
left: 0.5rem;
order: 4;
......@@ -37,6 +55,9 @@
background:gesso-color(button, default, background);
border-bottom:1px solid gesso-color(button, default, background);
display:flex;
&.disabled{
display:none;
}
gap:1px;
order:3;
.owl-dot{
......@@ -58,14 +79,12 @@
}
}
.uw-owl-nav__prevnext{
display: flex;
// Replace with display: flex; when theming
// other banners.styles
display:none;
&.disabled{
display:none;
}
// Get code for homepage banner
.replace-with-homepage-banner-class & {
display: flex;
}
flex-flow: column;
opacity:0;
position:absolute;
......@@ -111,18 +130,7 @@
}
}
}
// Used to control the display of the play-pause
&[data-autoplay="1"]{
.uw-owl-nav__banner-control-wrap{
display:block;
}
}
&[data-autoplay="0"]{
.uw-owl-nav__banner-control-wrap{
display:none;
}
}
// CSS classes set by the types of banner chosen
// CSS classes set by the types of banner
// to allow for 4 different styles.
&-full-overlay{
//
......@@ -139,7 +147,31 @@
}
}
.no-js {
.uw-carousel{
&__banner {
&[data-autoplay="1"] {
.uw-owl-nav__banner-control-wrap {
display: none;
}
}
}
}
&.js{
.uw-carousel{
&__banner {
&[data-autoplay="1"] {
.uw-owl-nav__banner-control-wrap {
display: inherit;
}
&.banner-single{
.uw-owl-nav__banner-control-wrap{
display:none;
}
}
}
}
}
}
.uw-owl-nav__dots-js {
align-items: flex-start;
background: gesso-color(button, default, background);
......@@ -172,10 +204,21 @@
.card__banner {
display: none;
}
&.js{
.card__banner:target ~ .card__banner:last-of-type,
.card__banner {
display: inherit;
}
}
/* :last-child works, but .page:last-child will not */
.card__banner:last-of-type,
.card__banner:target {
display: block;
}
&.js{
.card__banner:last-of-type,
.card__banner:target {
display: inherit;
}
}
}
......@@ -11,10 +11,9 @@
$('.uw-carousel__banner').each(function () {
var selector = 'div[data-uuid="' + $(this).attr("data-uuid") + '"] .owl-carousel';
// var item_selector = 'div[data-uuid="' + $(this).attr("data-uuid") + '"] .owl-carousel .animated';
// Get banner carousel.
var owl = $(selector);
// Get the number of items for the carousel, if any.
// For banners we are only ever showing one item at
// a time (for reference Facts & Figures show more).
......@@ -23,7 +22,9 @@
// Get the transition speed for the carousel.
var banner_transition_speed = $(this).attr('data-transition-speed');
// Get the slide speed for the carousel.
//Set the css animation speed for the transitions
// $(item_selector).css('animation-duration' , banner_transition_speed + 'ms !important');
var banner_slide_speed = $(this).attr('data-slide-speed');
// The flag for autoplay.
......@@ -34,6 +35,10 @@
banner_autoplay = false;
}
// Used to hide buttons when single banner
if (owl.children().length <= 1) {
$(this).addClass('banner-single');
}
// Get the loop value.
// Owl carousel setting to loop back to beginning.
......@@ -72,6 +77,7 @@
// Add the carousel to the banner using the id.
owl.owlCarousel({
animateIn: 'fadeIn',
animateOut: 'fadeOut',
autoplay: banner_autoplay,
autoplayTimeout: banner_slide_speed,
......@@ -98,7 +104,7 @@
items: num_of_items
}
}
},
});
});
});
......
Markdown is supported
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