@total_onion/onion-library 1.0.3 → 1.0.5

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

@@ -1,631 +0,0 @@
-@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;
-			}
-		}
-	}
-}