@total_onion/onion-library 3.2.0 → 3.2.1

package/components/fields-core-cta-v3/core-cta-v3.scss

@@ -0,0 +1,276 @@
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../../breakpoints';
+
+@mixin ctaButtonStyles() {
+	[class*='cmpl-cta-style-'] {
+		border: unset;
+		line-height: 100%;
+		position: relative;
+		display: flex;
+		gap: 1em;
+		justify-content: center;
+		align-items: center;
+		text-decoration-line: unset;
+		text-align: center;
+		transition: background-color 0.1s, border-colour 0.1s;
+
+		&:hover,
+		&:active,
+		&:focus {
+			cursor: pointer;
+		}
+
+		&[disabled] {
+			cursor: not-allowed;
+		}
+		margin-bottom: 0;
+		overflow: hidden;
+	}
+
+	.cmpl-cta-span {
+		width: 100%;
+	}
+
+	.cmpl-cta-icon {
+		width: 1em;
+	}
+
+	@for $i from 1 through 20 {
+		.cmpl-cta-style-#{$i} {
+			justify-self: var(--cta-alignment);
+			justify-content: var(
+				--cta-style-#{$i}-content-vertical-alignment,
+				center
+			);
+			background-image: var(--cta-style#{$i}-image-background);
+			background-size: var(--cta-style#{$i}-image-background-size);
+			background-repeat: var(--cta-style#{$i}-image-background-repeat);
+			background-color: var(--cta-style-#{$i}-mobile-background-colour);
+			color: var(--cta-style-#{$i}-mobile-colour);
+			svg * {
+				fill: currentColor;
+				stroke: currentColor;
+			}
+			border: var(--cta-style-#{$i}-border-width)
+				solid
+				var(--cta-style-#{$i}-mobile-border-colour);
+			border-radius: var(--cta-style-#{$i}-border-radius);
+			font-weight: var(--cta-style-#{$i}-font-weight);
+			letter-spacing: var(--cta-style-#{$i}-letter-spacing);
+			line-height: var(--cta-style-#{$i}-line-height);
+			font-family: var(--cta-style-#{$i}-font-family);
+			text-transform: var(--cta-style-#{$i}-text-transform);
+			font-style: var(--cta-style-#{$i}-font-style);
+			text-align: var(--cta-style-#{$i}-text-align);
+			text-decoration: var(--cta-style-#{$i}-decoration-style);
+			text-decoration-color: var(--cta-style-#{$i}-decoration-colour);
+
+			font-size: clamp(
+				var(--cta-style-font-size-min-mobile, 10px),
+				core-functions-v3.fontSize(
+					var(--cta-style-#{$i}-font-size-mobile),
+					'mobile'
+				),
+				var(--cta-style-font-size-max-mobile, 180px)
+			);
+
+			min-width: var(--cta-style-#{$i}-min-width-mobile);
+			padding: core-functions-v3.fluidSize(
+					var(--cta-style-#{$i}-padding-block-mobile),
+					'mobile'
+				)
+				core-functions-v3.fluidSize(
+					var(--cta-style-#{$i}-padding-inline-mobile),
+					'mobile'
+				);
+			// shadow
+			--box-shadow-offset-x: var(--cta-style-#{$i}-shadow-offset-x, 0);
+			--box-shadow-offset-y: var(--cta-style-#{$i}-shadow-offset-y, 0);
+			--box-shadow-blur: var(--cta-style-#{$i}-shadow-blur, 0);
+			--box-shadow-spread: var(--cta-style-#{$i}-shadow-radius, 0);
+			--box-shadow-colour: var(--cta-style-#{$i}-shadow-colour, 0);
+			--box-shadow-position: var(--cta-style-#{$i}-shadow-position, 0);
+
+			// hover shadow
+			--box-shadow-hover-offset-x: var(
+				--cta-style-#{$i}-shadow-offset-hover-x,
+				0
+			);
+			--box-shadow-hover-offset-y: var(
+				--cta-style-#{$i}-shadow-offset-hover-y,
+				0
+			);
+			--box-shadow-hover-blur: var(
+				--cta-style-#{$i}-shadow-hover-blur,
+				0
+			);
+			--box-shadow-hover-spread: var(
+				--cta-style-#{$i}-shadow-hover-radius,
+				0
+			);
+			--box-shadow-hover-colour: var(
+				--cta-style-#{$i}-shadow-hover-colour,
+				0
+			);
+			--box-shadow-hover-position: var(
+				--cta-style-#{$i}-shadow-hover-position,
+				0
+			);
+			@include core-mixins-v3.boxShadow();
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				font-size: clamp(
+					var(--cta-style-font-size-min-mobile, 10px),
+					core-functions-v3.fontSize(
+						var(--cta-style-#{$i}-font-size-portrait),
+						'portrait'
+					),
+					var(--cta-style-font-size-max-mobile, 180px)
+				);
+				min-width: var(--cta-style-#{$i}-min-width-portrait);
+				padding: core-functions-v3.fluidSize(
+						var(--cta-style-#{$i}-padding-block-portrait),
+						'portrait'
+					)
+					core-functions-v3.fluidSize(
+						var(--cta-style-#{$i}-padding-inline-portrait),
+						'portrait'
+					);
+				background-color: var(--cta-style-#{$i}-background-colour);
+				border: var(--cta-style-#{$i}-border-width) solid
+					var(--cta-style-#{$i}-border-colour);
+				color: var(--cta-style-#{$i}-colour);
+				svg * {
+					fill: currentColor;
+					stroke: currentColor;
+				}
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				font-size: clamp(
+					var(--cta-style-font-size-min-desktop, 10px),
+					core-functions-v3.fontSize(
+						var(--cta-style-#{$i}-font-size-landscape),
+						'landscape'
+					),
+					var(--cta-style-font-size-max-desktop, 180px)
+				);
+				min-width: var(--cta-style-#{$i}-min-width-landscape);
+				padding: core-functions-v3.fluidSize(
+						var(--cta-style-#{$i}-padding-block-landscape),
+						'landscape'
+					)
+					core-functions-v3.fluidSize(
+						var(--cta-style-#{$i}-padding-inline-landscape),
+						'landscape'
+					);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$desktop) {
+				font-size: clamp(
+					var(--cta-style-font-size-min-desktop, 10px),
+					core-functions-v3.fontSize(
+						var(--cta-style-#{$i}-font-size-desktop),
+						'desktop'
+					),
+					var(--cta-style-font-size-max-desktop, 180px)
+				);
+				min-width: var(--cta-style-#{$i}-min-width-desktop);
+				padding: core-functions-v3.fluidSize(
+						var(--cta-style-#{$i}-padding-block-desktop),
+						'desktop'
+					)
+					core-functions-v3.fluidSize(
+						var(--cta-style-#{$i}-padding-inline-desktop),
+						'desktop'
+					);
+			}
+
+			// this makes hover effect available only on desktops, avoiding the hover effect to stuck on mobile after click
+			@media (hover: hover) {
+				&:hover {
+					text-decoration: var(
+						--cta-style-#{$i}-decoration-style-hover
+					);
+					text-decoration-color: var(
+						--cta-style-#{$i}-decoration-colour-hover
+					);
+					border: var(--cta-style-#{$i}-border-width) solid
+						var(--cta-style-#{$i}-mobile-hover-border-colour);
+					background-color: var(
+						--cta-style-#{$i}-mobile-hover-background-colour
+					);
+					color: var(--cta-style-#{$i}-mobile-hover-colour);
+					svg * {
+						fill: currentColor;
+						stroke: currentColor;
+					}
+
+					// for touch devices fix hover state
+					@media (hover: none) {
+						background-color: var(
+							--cta-style-#{$i}-mobile-background-colour
+						);
+					}
+
+					@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+						background-color: var(
+							--cta-style-#{$i}-hover-background-colour
+						);
+						border: var(--cta-style-#{$i}-border-width) solid
+							var(--cta-style-#{$i}-hover-border-colour);
+						color: var(--cta-style-#{$i}-hover-colour);
+						svg * {
+							fill: currentColor;
+							stroke: currentColor;
+						}
+					}
+				}
+			}
+
+			&:active {
+				color: var(--cta-style-#{$i}-active-colour);
+				background-color: var(
+					--cta-style-#{$i}-active-background-colour
+				);
+				border: var(--cta-style-#{$i}-border-width)
+					solid
+					var(--cta-style-#{$i}-active-border-colour);
+			}
+
+			// &:focus {
+			// 	color: var(--cta-style-#{$i}-focus-colour);
+			// 	background-color: var(--cta-style-#{$i}-focus-background-colour);
+			// 	border: var(--cta-style-#{$i}-border-width) solid var(--cta-style-#{$i}-focus-border-colour);
+			// }
+
+			&--inactive,
+			&.cta-style-inactive,
+			&[disabled] {
+				color: var(--cta-style-#{$i}-inactive-colour);
+				background-color: var(
+					--cta-style-#{$i}-inactive-background-colour
+				);
+				border: var(--cta-style-#{$i}-border-width)
+					solid
+					var(--cta-style-#{$i}-inactive-border-colour);
+			}
+
+			&--selected,
+			&.cta-style-selected {
+				color: var(--cta-style-#{$i}-selected-colour);
+				background-color: var(
+					--cta-style-#{$i}-selected-background-colour
+				);
+				border: var(--cta-style-#{$i}-border-width)
+					solid
+					var(--cta-style-#{$i}-selected-border-colour);
+			}
+		}
+	}
+}
+
+@mixin core-cta() {
+	@include ctaButtonStyles();
+}

package/components/fields-core-functions-v3/core-functions-v3.scss

@@ -0,0 +1,30 @@
+@use '../../breakpoints';
+@use 'sass:math';
+
+@function fontSize($size-px, $screen: '') {
+	@if $screen == 'static' {
+		@return calc(
+			(
+					($size-px / var(--desktop-design-reference)) *
+						var(--screen-width-static)
+				) * var(--font-size-multiplier)
+		);
+	} @else {
+		@return calc(
+			(($size-px / var(--design-reference)) * var(--font-reference)) *
+				var(--font-size-multiplier)
+		);
+	}
+}
+@function fluidSize($size-px, $screen: '') {
+	@if $screen == 'static' {
+		@return calc(
+			(($size-px / var(--desktop-design-reference))) *
+				var(--screen-width-static)
+		);
+	} @else {
+		@return calc(
+			(($size-px / var(--design-reference)) * var(--screen-width))
+		);
+	}
+}

package/components/fields-core-generic-v3/core-generic-v3.scss

@@ -0,0 +1,299 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-typography-mixins-v3/core-typography-mixins-v3';
+@use '../../breakpoints';
+
+@mixin coreGenericV3() {
+	@layer base-styles {
+		/* Box sizing rules */
+		*,
+		*::before,
+		*::after {
+			box-sizing: border-box;
+		}
+
+		/* Remove default padding */
+		ul,
+		ol {
+			padding: 0;
+		}
+
+		/* Remove default margin */
+		body,
+		h1,
+		h2,
+		h3,
+		h4,
+		p,
+		ul,
+		ol,
+		li,
+		figure,
+		figcaption,
+		blockquote,
+		dl,
+		dd {
+			margin: 0;
+		}
+
+		/* Box sizing rules */
+		*,
+		*::before,
+		*::after {
+			box-sizing: border-box;
+		}
+
+		//***** TYPOGRAPHY *****\\
+		body {
+			// @include core-typography-mixins-v3.fontSecondary();
+		}
+
+		// h1,
+		// h2,
+		// h3,
+		// h4,
+		// h5,
+		// h6 {
+		// 	margin: 0; //reset default margin
+		// 	font-weight: unset; //reset default font weight
+		// 	margin-top: unset;
+		// 	@include core-typography-mixins-v3.fontPrimary();
+		// }
+		.override-element-styles {
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				font-size: 0;
+			}
+		}
+
+		.standard-content-box-wysiwyg-editor {
+			h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				margin-bottom: var(--heading-block-spacing);
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+			p {
+				margin-bottom: var(--paragraph-block-spacing);
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		p {
+			margin: 0; //reset default margin
+			// @include core-typography-mixins-v3.p();
+		}
+
+		a {
+			text-decoration-skip-ink: auto;
+			color: var(--link-colour);
+			text-decoration: var(--link-decoration-style);
+			text-decoration-color: var(--link-decoration-colour);
+
+			strong,
+			b {
+				font-weight: var(--weight-bold);
+			}
+
+			&:hover {
+				cursor: pointer;
+				color: var(--link-colour-hover);
+				text-decoration: var(--link-decoration-style-hover);
+				text-decoration-color: var(--link-decoration-colour-hover);
+			}
+		}
+
+		button {
+			&:focus {
+				// outline: none;
+				// appearance: none;
+			}
+		}
+
+		blockquote {
+			margin: 0; //reset default margin
+			quotes: '“' '”' '‘' '’';
+			font-weight: bold;
+
+			&::before {
+				content: open-quote;
+			}
+
+			&::after {
+				content: close-quote;
+			}
+		}
+
+		figure,
+		figcaption,
+		dl,
+		dd {
+			margin: 0;
+		}
+
+		q {
+			&::before {
+				content: open-quote;
+			}
+
+			&::after {
+				content: close-quote;
+			}
+		}
+
+		ol {
+			list-style-type: decimal;
+		}
+		ul {
+			list-style-type: disc;
+		}
+		li {
+			// @include core-typography-mixins-v3.p();
+		}
+		ol,
+		ul {
+			padding: 0; //reset default padding
+			margin: 0; //reset default margin
+			// font-family: var(--secondary-font-family);
+			margin-bottom: var(--paragraph-block-spacing);
+			list-style-position: inside;
+			&:last-child {
+				margin-bottom: 0;
+			}
+			li {
+				margin-bottom: var(--list-item-block-spacing);
+				line-height: var(--list-item-line-height);
+				letter-spacing: var(--list-item-letter-spacing);
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		html {
+			min-height: 100%;
+			// container-type: inline-size;
+			&.lock-position {
+				@include core-mixins-v3.lockPosition();
+			}
+		}
+
+		.lazy-fade {
+			opacity: 0;
+		}
+		.loaded:not(.cmpl-block-animations) {
+			opacity: 1;
+		}
+
+		.js-enabled-hide {
+			display: none;
+		}
+
+		body {
+			display: flex;
+			flex-direction: column;
+			scroll-behavior: smooth;
+			text-rendering: optimizeSpeed;
+			margin: 0; //reset default margin
+			padding: 0; //reset default padding
+			height: auto;
+			min-height: 100vh;
+			position: relative;
+			background: var(--body-background-colour);
+			--default-text-colour-mobile: var(--theme-primary-text-colour);
+			color: var(--default-text-colour-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				--default-text-colour-desktop: var(--theme-primary-text-colour);
+				color: var(--default-text-colour-desktop);
+			}
+
+			&.lock-position {
+				@include core-mixins-v3.lockPosition();
+			}
+
+			&.hide-nav {
+				.site-header {
+					display: none;
+				}
+			}
+		}
+
+		.body-container-background-image,
+		.page-container-background-image {
+			&__picture {
+				height: 100%;
+				position: var(--body-background-image-position-type);
+				inset: 0;
+			}
+
+			&__image {
+				height: 100%;
+				object-fit: var(--body-background-image-fit);
+				object-position: var(--body-background-image-position);
+			}
+		}
+
+		.body-container-background-video {
+			position: fixed;
+			object-fit: cover;
+			inset: 0;
+			width: 100%;
+		}
+
+		img {
+			width: 100%;
+			height: auto;
+			display: block;
+		}
+
+		main {
+			height: auto;
+			width: 100%;
+			max-width: var(--global-content-max-width-main);
+			margin-inline: auto;
+			background-image: var(--main-container-background-image);
+			background-repeat: repeat;
+		}
+
+		header,
+		footer,
+		section {
+			width: 100%;
+			max-width: 100%;
+		}
+		section[data-assetkey] {
+			// container-type: inline-size;
+		}
+		.site-footer-block {
+			margin-top: auto;
+		}
+		.grecaptcha-badge {
+			z-index: 50;
+			bottom: 0 !important;
+		}
+
+		/* Remove all animations and transitions for people that prefer not to see them */
+		@media (prefers-reduced-motion: reduce) {
+			* {
+				animation-duration: 0.01ms !important;
+				animation-iteration-count: 1 !important;
+				transition-duration: 0.01ms !important;
+				scroll-behavior: auto !important;
+				transition: 0.01ms !important;
+			}
+		}
+	}
+}