@total_onion/onion-library 1.0.0

package/components/block-animated-sections/animated-sections-extra.scss

@@ -0,0 +1,631 @@
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/theme/breakpoints';
+
+$selector: 'animated-sections';
+
+@mixin additionalStyles {
+	&.tgl-fusion-cask-demo {
+		.#{$selector} {
+			//Flags
+			--timeline-nav-opacity: 0.25;
+			//Overlay Content
+			&__content-element {
+				&--from-right {
+					.animated-sections__content-title-content-slide:after {
+						left: core-functions.fluidSize(-10, 'mobile');
+						@include core-mixins.device(breakpoints.$tabPortrait) {
+							left: core-functions.fluidSize(-10, 'portrait');
+						}
+						@include core-mixins.device(breakpoints.$tabLandscape) {
+							left: core-functions.fluidSize(-10, 'desktop');
+						}
+						right: unset;
+					}
+				}
+				&.active {
+					.animated-sections__content-title-content-slide:after {
+						transition-delay: 1s;
+						width: 200%;
+					}
+				}
+			}
+			&__content-inner-content-slide {
+				place-content: baseline;
+				padding: core-functions.fluidSize(40, 'mobile')
+					core-functions.fluidSize(20, 'mobile')
+					core-functions.fluidSize(20, 'mobile');
+
+				height: fit-content;
+				position: relative;
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					max-width: core-functions.fluidSize(387, 'portrait');
+					padding: core-functions.fluidSize(40, 'mobile')
+						core-functions.fluidSize(20, 'mobile');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					position: absolute;
+					height: 100%;
+					max-width: core-functions.fluidSize(429, 'desktop');
+					padding: 0 0 0 core-functions.fluidSize(80, 'desktop');
+					place-content: center;
+				}
+			}
+			&__content-title-content-slide {
+				color: #e5cc9f;
+				position: relative;
+
+				text-transform: uppercase;
+				white-space: nowrap;
+
+				font-size: core-functions.fluidSize(22, 'mobile');
+				margin-bottom: core-functions.fluidSize(20, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					font-size: core-functions.fluidSize(22, 'portrait');
+					margin-bottom: core-functions.fluidSize(30, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					font-size: core-functions.fluidSize(22, 'desktop');
+					margin-bottom: core-functions.fluidSize(40, 'desktop');
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					background: #f1e9c8b2;
+					transition: all 5s;
+					width: core-functions.fluidSize(10, 'mobile');
+					height: core-functions.fluidSize(1, 'mobile');
+					right: core-functions.fluidSize(-10, 'mobile');
+					bottom: core-functions.fluidSize(-10, 'mobile');
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						width: core-functions.fluidSize(10, 'portrait');
+						height: core-functions.fluidSize(1, 'portrait');
+						right: core-functions.fluidSize(-10, 'portrait');
+						bottom: core-functions.fluidSize(-15, 'portrait');
+					}
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						width: core-functions.fluidSize(120, 'desktop');
+						height: core-functions.fluidSize(1, 'desktop');
+						right: core-functions.fluidSize(-10, 'desktop');
+						bottom: core-functions.fluidSize(-20, 'desktop');
+					}
+				}
+			}
+			&__content-text-content-slide {
+				max-width: core-functions.fluidSize(287, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					max-width: core-functions.fluidSize(387, 'portrait');
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					max-width: core-functions.fluidSize(429, 'desktop');
+				}
+
+				p {
+					font-size: core-functions.fluidSize(16, 'mobile');
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						font-size: core-functions.fluidSize(16, 'portrait');
+					}
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						font-size: core-functions.fluidSize(16, 'desktop');
+					}
+
+					color: #f1e9c8;
+				}
+			}
+			//Swiper Content
+			&__swiper-content-wrapper {
+				background: unset;
+				backdrop-filter: blur(10px);
+			}
+			&__swiper-content-overlay {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+
+				&--green {
+					background: #004953;
+					opacity: 30%;
+				}
+
+				&--red {
+					background: #7a0823;
+					opacity: 30%;
+				}
+
+				&--blue {
+					background: #1a344d;
+					opacity: 40%;
+				}
+			}
+			&__swiper-slide-inner {
+				display: flex;
+				flex-direction: column;
+				padding: 0 core-functions.fluidSize(20, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					padding: 0 core-functions.fluidSize(30, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					padding: 0 core-functions.fluidSize(50, 'desktop');
+				}
+			}
+			&__slide-eyebrow-text {
+				color: white;
+				font-weight: 700;
+				text-transform: uppercase;
+				font-size: core-functions.fluidSize(13, 'mobile');
+				margin-bottom: core-functions.fluidSize(40, 'mobile');
+				line-height: core-functions.fluidSize(18, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					font-size: core-functions.fluidSize(14, 'portrait');
+					margin-bottom: core-functions.fluidSize(40, 'portrait');
+					line-height: core-functions.fluidSize(18, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					font-size: core-functions.fluidSize(16, 'desktop');
+					margin-bottom: core-functions.fluidSize(40, 'desktop');
+					line-height: core-functions.fluidSize(20, 'desktop');
+				}
+			}
+			&__slide-title {
+				color: white;
+				font-weight: 700;
+				text-transform: uppercase;
+				font-size: core-functions.fluidSize(32, 'mobile');
+				line-height: core-functions.fluidSize(35, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					line-height: core-functions.fluidSize(50, 'portrait');
+					font-size: core-functions.fluidSize(42, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					font-size: core-functions.fluidSize(66, 'desktop');
+					line-height: core-functions.fluidSize(65, 'desktop');
+				}
+			}
+			&__slide-wysiwyg {
+				color: #f1e9c8;
+				font-size: core-functions.fluidSize(16, 'mobile');
+				max-width: core-functions.fluidSize(420, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					max-width: core-functions.fluidSize(420, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					max-width: core-functions.fluidSize(420, 'desktop');
+				}
+			}
+			&__swiper-content-pagination {
+				position: relative;
+
+				text-align: left;
+
+				margin-top: core-functions.fluidSize(40, 'mobile');
+				padding-left: core-functions.fluidSize(20, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					padding-left: core-functions.fluidSize(30, 'portrait');
+					margin-top: core-functions.fluidSize(40, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					padding-left: core-functions.fluidSize(50, 'desktop');
+					margin-top: core-functions.fluidSize(40, 'desktop');
+				}
+
+				.swiper-pagination-bullet {
+					background: unset;
+					opacity: 1;
+
+					height: core-functions.fluidSize(15, 'mobile');
+					width: core-functions.fluidSize(15, 'mobile');
+					border: solid #f1e9c8 core-functions.fluidSize(1, 'mobile');
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						height: core-functions.fluidSize(15, 'portrait');
+						width: core-functions.fluidSize(15, 'portrait');
+						border: solid #f1e9c8
+							core-functions.fluidSize(1, 'portrait');
+					}
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						height: core-functions.fluidSize(15, 'desktop');
+						width: core-functions.fluidSize(15, 'desktop');
+						border: solid #f1e9c8
+							core-functions.fluidSize(1, 'desktop');
+					}
+
+					&-active {
+						background: #f1e9c8;
+					}
+				}
+
+				&.loading {
+					pointer-events: none;
+				}
+			}
+			//UI Elements
+			&__ui-element-back-button {
+				display: none;
+			}
+			&__ui-element-timeline-nav-wrapper {
+				bottom: 0;
+				left: 0;
+				top: unset;
+				right: unset;
+				width: fit-content;
+				height: fit-content;
+				transform: unset;
+
+				padding-top: core-functions.fluidSize(40, 'mobile');
+				padding-bottom: core-functions.fluidSize(40, 'mobile');
+				padding-left: core-functions.fluidSize(20, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					padding-top: core-functions.fluidSize(40, 'portrait');
+					padding-bottom: core-functions.fluidSize(40, 'portrait');
+					padding-left: core-functions.fluidSize(20, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					padding-top: core-functions.fluidSize(40, 'desktop');
+					padding-bottom: core-functions.fluidSize(40, 'desktop');
+					padding-left: core-functions.fluidSize(20, 'desktop');
+				}
+
+				&:hover {
+					opacity: 1 !important;
+				}
+			}
+			&__ui-element-timeline-names-container {
+				display: none;
+			}
+			&__ui-element-timeline-dots-container {
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					flex-direction: column;
+					align-items: center;
+					height: fit-content;
+					align-self: center;
+				}
+
+				&::before {
+					display: none;
+				}
+			}
+			&__ui-element-timeline-dot {
+				transform: rotate(0deg);
+				border: solid #e5cc9f;
+				background: transparent;
+				cursor: pointer;
+
+				height: core-functions.fluidSize(7, 'mobile');
+				width: core-functions.fluidSize(30, 'mobile');
+				border-width: core-functions.fluidSize(1, 'mobile');
+				margin-right: core-functions.fluidSize(5, 'mobile');
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					height: core-functions.fluidSize(7, 'portrait');
+					width: core-functions.fluidSize(30, 'portrait');
+					border-width: core-functions.fluidSize(1, 'portrait');
+					margin-right: core-functions.fluidSize(5, 'portrait');
+				}
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					margin-right: 0px;
+					width: core-functions.fluidSize(7, 'desktop');
+					height: core-functions.fluidSize(30, 'desktop');
+					border-width: core-functions.fluidSize(1, 'desktop');
+					margin-bottom: core-functions.fluidSize(5, 'desktop');
+				}
+
+				&:last-child {
+					margin-bottom: 0px;
+				}
+
+				&.active {
+					background-color: #e5cc9f;
+				}
+
+				&:hover {
+					background: #e5cc9f;
+				}
+			}
+			&__progress-inner {
+				display: none;
+			}
+		}
+	}
+
+	&.royal-salute-polo-demo {
+		//custom royal salute styles here
+		.#{$selector} {
+			//Flags
+			--timeline-nav-opacity: 1;
+			//Overlay Content
+			&__content-element {
+				display: none;
+
+				&.active {
+					display: block;
+				}
+			}
+			&__content-element-intro-slide,
+			&__content-element-info-slide {
+				transform: translate(0, 0);
+			}
+			&__content-inner-intro-slide,
+			&__content-inner-info-slide {
+				align-items: center;
+				justify-content: center;
+			}
+			&__content-inner-info-slide {
+				svg {
+					margin-bottom: core-functions.fluidSize(35, 'mobile');
+
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						margin-bottom: core-functions.fluidSize(62, 'portrait');
+					}
+
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						margin-bottom: core-functions.fluidSize(62, 'desktop');
+					}
+				}
+			}
+			&__content-inner-content-slide {
+				place-content: center;
+				padding-left: var(--global-inline-spacing);
+			}
+			&__content-overlay-intro-slide,
+			&__content-overlay-info-slide {
+				background-color: #0b1727;
+				opacity: 0.8;
+			}
+			&__content-overlay-content-slide {
+				background-image: linear-gradient(
+					to right,
+					rgba(11, 23, 39, 1) 0%,
+					rgba(11, 23, 39, 0) 100%
+				);
+			}
+			&__content-eyebrow {
+				text-align: center;
+				font-weight: var(--weight-medium);
+				color: var(--gold);
+
+				font-size: core-functions.fluidSize(24, 'mobile');
+				margin-bottom: core-functions.fluidSize(13, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					margin-bottom: core-functions.fluidSize(100, 'portrait');
+					font-size: core-functions.fluidSize(36, 'portrait');
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					margin-bottom: core-functions.fluidSize(100, 'desktop');
+					font-size: core-functions.fluidSize(40, 'desktop');
+				}
+			}
+			&__content-title-intro-slide {
+				margin-bottom: core-functions.fluidSize(40, 'desktop');
+				text-align: center;
+				font-weight: var(--weight-medium);
+				color: var(--gold);
+
+				font-size: core-functions.fluidSize(40, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					font-size: core-functions.fluidSize(40, 'portrait');
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					font-size: core-functions.fluidSize(60, 'desktop');
+				}
+			}
+			&__content-title-content-slide {
+				color: var(--gold);
+
+				margin-bottom: core-functions.fluidSize(30, 'mobile');
+				font-size: core-functions.fluidSize(40, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					margin-bottom: core-functions.fluidSize(30, 'portrait');
+					font-size: core-functions.fluidSize(50, 'portrait');
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					font-size: core-functions.fluidSize(60, 'desktop');
+					margin-bottom: core-functions.fluidSize(30, 'desktop');
+				}
+			}
+			&__content-text-intro-slide,
+			&__content-text-info-slide {
+				text-align: center;
+				text-transform: uppercase;
+
+				p {
+					font-family: var(--font-secondary-bold);
+					font-size: core-functions.fluidSize(14, 'mobile');
+
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						font-size: core-functions.fluidSize(16, 'portrait');
+					}
+
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						font-size: core-functions.fluidSize(18, 'desktop');
+					}
+				}
+			}
+			&__content-text-content-slide {
+				max-width: core-functions.fluidSize(287, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					max-width: core-functions.fluidSize(387, 'portrait');
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					max-width: core-functions.fluidSize(429, 'desktop');
+				}
+
+				p {
+					font-family: var(--font-primary);
+					font-size: core-functions.fluidSize(16, 'mobile');
+
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						font-size: core-functions.fluidSize(22, 'portrait');
+					}
+
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						font-size: core-functions.fluidSize(28, 'desktop');
+					}
+				}
+			}
+			&__content-text-inline-slide {
+				margin-left: calc(
+					(25 / var(--mobile-reference)) * var(--screen-width)
+				);
+				padding-top: calc(
+					(25 / var(--mobile-reference)) * var(--screen-width)
+				);
+				padding-left: var(--global-inline-spacing);
+				color: var(--gold);
+				max-width: core-functions.fluidSize(243, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					max-width: core-functions.fluidSize(343, 'portrait');
+					margin-left: calc(
+						(200 / var(--desktop-reference)) * var(--screen-width)
+					);
+					padding-top: calc(
+						(45 / var(--desktop-reference)) * var(--screen-width)
+					);
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					max-width: core-functions.fluidSize(736, 'desktop');
+				}
+
+				p {
+					font-family: var(--font-primary);
+					font-size: core-functions.fluidSize(10, 'mobile');
+
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						font-size: core-functions.fluidSize(12, 'portrait');
+					}
+
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						font-size: core-functions.fluidSize(22, 'desktop');
+					}
+				}
+			}
+			&__content-button {
+				margin-top: core-functions.fluidSize(40, 'static');
+				text-transform: uppercase;
+				font-family: var(--font-secondary-bold);
+				color: var(--gold);
+
+				cursor: pointer;
+
+				font-size: core-functions.fluidSize(13, 'mobile');
+
+				@include core-mixins.device(breakpoints.$tabPortrait) {
+					font-size: core-functions.fluidSize(16, 'portrait');
+				}
+
+				@include core-mixins.device(breakpoints.$tabLandscape) {
+					font-size: core-functions.fluidSize(18, 'desktop');
+				}
+			}
+			//UI Elements
+			&__ui-element-timeline-dot {
+				background-color: #201a56;
+
+				&.active {
+					color: var(--white);
+				}
+			}
+			&__ui-element-timeline-name {
+				text-transform: uppercase;
+				font-weight: 800;
+
+				&.selected {
+					.animated-sections__timeline-name--icon {
+						margin-right: 0px;
+
+						width: core-functions.fluidSize(75, 'mobile');
+						height: core-functions.fluidSize(100, 'mobile');
+
+						background-size: core-functions.fluidSize(75, 'mobile')
+							core-functions.fluidSize(100, 'mobile');
+						@include core-mixins.device(breakpoints.$tabPortrait) {
+							background-size: core-functions.fluidSize(
+									75,
+									'portrait'
+								)
+								core-functions.fluidSize(100, 'portrait');
+							width: core-functions.fluidSize(75, 'portrait');
+							height: core-functions.fluidSize(100, 'portrait');
+						}
+						@include core-mixins.device(breakpoints.$tabLandscape) {
+							background-size: core-functions.fluidSize(
+									75,
+									'desktop'
+								)
+								core-functions.fluidSize(100, 'desktop');
+							width: core-functions.fluidSize(75, 'desktop');
+							height: core-functions.fluidSize(100, 'desktop');
+						}
+					}
+				}
+
+				&--icon {
+					display: block;
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='100' fill='none'%3E%3Cmask id='a' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M75.25 51.013 37.762.998V1 .998L.25 49.983l37.488 50.015v-.002.002L75.25 51.013Z' clip-rule='evenodd'/%3E%3C/mask%3E%3Cpath fill='%23fff' d='m37.762.998 2.376-1.781-5.346-7.133V.998h2.97ZM75.25 51.013l2.358 1.806 1.368-1.786-1.35-1.801-2.376 1.781ZM37.762 1l-2.874.747L40.732 1h-2.97Zm0-.002 2.874-.747-1.532-5.891-3.7 4.832L37.76.998ZM.25 49.983l-2.358-1.806-1.368 1.787 1.35 1.8L.25 49.983Zm37.488 50.015-2.376 1.781 3.654 4.876 1.59-5.882-2.868-.775Zm0-.002h2.97l-5.837-.774 2.868.774Zm0 .002h-2.97v8.763l5.329-6.957-2.358-1.806ZM35.386 2.779l37.489 50.016 4.753-3.563L40.138-.783l-4.753 3.562ZM40.732 1V.999h-5.94V1h5.94Zm-5.845.747v.001l5.75-1.495-.001-.001-5.749 1.494ZM2.608 51.788 40.12 2.804 35.404-.808-2.108 48.177l4.716 3.611Zm37.507 46.429L2.627 48.202l-4.754 3.562 37.489 50.015 4.753-3.562Zm-5.244 1.005v.002l5.734 1.549v-.002l-5.733-1.55Zm5.838.776v-.002h-5.94v.002h5.94Zm32.183-50.79L35.381 98.192l4.716 3.612 37.511-48.985-4.716-3.611Z' mask='url(%23a)'/%3E%3C/svg%3E");
+					background-repeat: no-repeat;
+					background-position: center;
+					margin: auto;
+
+					width: core-functions.fluidSize(50, 'mobile');
+					height: core-functions.fluidSize(67, 'mobile');
+					background-size: core-functions.fluidSize(50, 'mobile')
+						core-functions.fluidSize(67, 'mobile');
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						width: core-functions.fluidSize(50, 'portrait');
+						height: core-functions.fluidSize(67, 'portrait');
+						background-size: core-functions.fluidSize(
+								50,
+								'portrait'
+							)
+							core-functions.fluidSize(67, 'portrait');
+					}
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						width: core-functions.fluidSize(50, 'desktop');
+						height: core-functions.fluidSize(67, 'desktop');
+						background-size: core-functions.fluidSize(50, 'desktop')
+							core-functions.fluidSize(67, 'desktop');
+					}
+				}
+
+				&--title {
+					max-width: core-functions.fluidSize(121, 'mobile');
+					width: core-functions.fluidSize(121, 'mobile');
+					margin-right: core-functions.fluidSize(12, 'mobile');
+					@include core-mixins.device(breakpoints.$tabPortrait) {
+						max-width: core-functions.fluidSize(121, 'portrait');
+						width: core-functions.fluidSize(121, 'portrait');
+						margin-right: core-functions.fluidSize(12, 'portrait');
+					}
+					@include core-mixins.device(breakpoints.$tabLandscape) {
+						max-width: core-functions.fluidSize(121, 'desktop');
+						width: core-functions.fluidSize(121, 'desktop');
+						margin-right: core-functions.fluidSize(12, 'desktop');
+					}
+				}
+			}
+			&__progress-inner {
+				background: #12203940;
+			}
+			&__progress-bar {
+				background: #937034;
+				// background: var(--gold);
+			}
+
+			//Transition-Overlay
+			&__transition-overlay {
+				background: unset;
+			}
+		}
+	}
+}