@total_onion/onion-library 3.0.49 → 3.2.0

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

@@ -1,276 +0,0 @@
-@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-generic-v3/core-generic-v3.scss

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

package/components/fields-core-root-variables-v3/core-root-variables-v3.scss

@@ -1,47 +0,0 @@
-@use '../fields-core-mixins-v3/core-mixins-v3';
-@use '../../breakpoints';
-
-@mixin coreRootVariablesV3() {
-	@layer base-styles {
-		body {
-			//Font weights
-			--weight-thin: 100;
-			--weight-extra-light: 200;
-			--weight-light: 300;
-			--weight-medium: 400;
-			--weight-demi-bold: 500;
-			--weight-demi-bold-plus: 600;
-			--weight-bold: 700;
-			--weight-extra-bold: 800;
-			--weight-extra-bold-plus: 900;
-			--default-text-colour-mobile: var(--theme-primary-text-colour);
-			--default-text-colour-desktop: var(--theme-primary-text-colour);
-			// When you are in the WP preview - the screen width var now now needs to match the width of the WP editor preview box.
-			.wp-toolbar & {
-				--screen-width-mobile: 360px;
-				--font-reference-mobile: 360px;
-				--screen-width: 360px;
-				--font-reference: 360px;
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					--screen-width-portrait: 768px;
-					--screen-width-landscape: 768px;
-					--screen-width-desktop: 768px;
-					--screen-width-static: 768px;
-					--screen-width: 768px;
-					--font-reference: 768px;
-				}
-				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
-					--screen-width-portrait: 840px;
-					--screen-width-landscape: 840px;
-					--screen-width-desktop: 840px;
-					--screen-width-static: 840px;
-					--screen-width: 840px;
-					--font-reference-portrait: 840px;
-					--font-reference-landscape: 840px;
-					--font-reference-desktop: 840px;
-					--font-reference: 840px;
-				}
-			}
-		}
-	}
-}