FileMaster

Edit File: twenty-twenty-two.scss

/**
* Fonts
*/
@import "fonts";

@import "mixins";
@import "animation";
@import "variables";

$tt2-gray: #f7f7f7;

/**
 * Forms
 */
 @import "forms";

/**
 * Main layout.
 */

.woocommerce-page {

h1.wp-block-post-title {
		font-size: var(--wp--preset--font-size--huge);
	}

h2 {
		font-size: var(--wp--preset--font-size--large);
	}

main {
		.woocommerce {
			@include clearfix();
			max-width: 1000px;
		}
	}
}

.woocommerce {

// Common
	.woocommerce-products-header {
		h1.page-title {
			font-family: var(--wp--preset--font-family--source-serif-pro);
			font-size: var(--wp--custom--typography--font-size--gigantic);
			font-weight: 300;
			line-height: var(--wp--custom--typography--line-height--tiny);
			margin-bottom: var(--wp--custom--spacing--medium);
		}
	}

span.onsale {
		top: -1rem;
		right: -1rem;
		position: absolute;
		background: var(--wp--preset--color--secondary);
		color: inherit;
		border-radius: 2rem;
		line-height: 2.6rem;
		font-size: 0.8rem;
		padding: 0 0.5rem 0 0.5rem;
	}

.quantity {
		input[type="number"] {
			width: 3em;
		}

input[type="number"]::-webkit-inner-spin-button,
		input[type="number"]::-webkit-outer-spin-button {
			opacity: 1;
		}
	}

&.woocommerce-shop .woocommerce-breadcrumb {
		display: none;
	}

.woocommerce-breadcrumb {
		margin-bottom: 1rem;
	}

.woocommerce-NoticeGroup-checkout {
		ul.woocommerce-error[role="alert"] {
			&::before {
				display: none;
			}
			li {
				display: inherit;
				margin-bottom: 1rem;
			}
		}
	}

a.button,
	button[name="add-to-cart"],
	input[name="submit"],
	button.single_add_to_cart_button,
	button[type="submit"]:not(.wp-block-search__button) {
		display: inline-block;
		text-align: center;
		word-break: break-word;
		background-color: var(--wp--preset--color--primary);
		color: #fff;
		border: 1px solid var(--wp--preset--color--black);
		padding: 1rem 2rem;
		margin-top: 1rem;
		text-decoration: none;
		font-size: medium;
		cursor: pointer;

&:hover,
		&:visited {
			color: var(--wp--preset--color--white);
			text-decoration: underline;
		}
	}

// Moved from blocktheme.css to make sure TT2 won't be changed.
	#respond input#submit,
	input.button {
		// Style primary WooCommerce CTAs in theme colors by default.
		background-color: var(--wp--preset--color--foreground, $primary);
		color: var(--wp--preset--color--background, $primarytext);

&:hover {
			background-color: var(--wp--preset--color--foreground, $primary);
			color: var(--wp--preset--color--background, $primarytext);
		}

&.disabled,
		&:disabled,
		&:disabled[disabled],
		&.disabled:hover,
		&:disabled:hover,
		&:disabled[disabled]:hover {
			background-color: var(--wp--preset--color--foreground, $primary);
			color: var(--wp--preset--color--background, $primarytext);
		}
	}

#respond input#submit.alt,
	a.button.alt,
	button.button.alt,
	input.button.alt {
		background-color: var(--wp--preset--color--primary);
		color: #fff;

&:hover {
			background-color: var(--wp--preset--color--primary);
			color: #fff;
			opacity: 1;
		}

&.disabled,
		&:disabled,
		&:disabled[disabled],
		&.disabled:hover,
		&:disabled:hover,
		&:disabled[disabled]:hover {
			background-color: var(--wp--preset--color--primary);
			color: #fff;
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

button.woocommerce-form-login__submit,
	button.single_add_to_cart_button,
	a.checkout-button {
		font-size: 18px;
		padding: 1.5rem 3.5rem;
	}

// Moved from blockthemes.css to make sure TT2 won't be changed.
	button.button,
	a.button {
		background-color: var(--wp--preset--color--foreground, $primary);
		color: var(--wp--preset--color--background, $primarytext);

// Shop page

.woocommerce-result-count {
		margin-top: 0;
		font-size: 0.9rem;
	}

.woocommerce-ordering {
		margin-top: -0.2rem;
		margin-bottom: 3rem;

> label {
			margin-right: 0.25rem;
		}

select {
			padding: 0.2rem 0 0.2rem 0.5rem;
		}
	}

// Products.
	ul.products {

padding-inline-start: 0;

li.product {
			list-style: none;
			margin-top: var(--wp--style--block-gap);
			text-align: center;

a.woocommerce-loop-product__link {
				text-decoration: none;
				display: block;
			}

h2.woocommerce-loop-product__title {
				color: var(--wp--preset--color--primary);
				font-family: var(--wp--preset--font-family--system-font);
				text-decoration: none;
				margin-bottom: 0;
			}

a.add_to_cart_button,
			a.product_type_grouped {
				padding: 0.8rem 2.7rem;

&.loading {
					opacity: 0.5;
				}
			}

}
	}

ul.page-numbers {
		text-align: center;
	}

div.product {
		position: relative;

> span.onsale {
			position: absolute;
			left: -1rem;
			top: -1rem;
			width: 1.8rem;
			z-index: 1;
		}

div.woocommerce-product-gallery {
			position: relative;

.woocommerce-product-gallery__trigger {
				@include woocommerce-product-gallery__trigger;
			}

figure.woocommerce-product-gallery__wrapper,
			div.woocommerce-product-gallery__wrapper {
				margin: 0;
			}

}

.woocommerce-product-gallery__image a {
			display: block;
			line-height: 0;
			outline-offset: -1px;
		}

div.summary {
			font-size: 1rem;

h1.product_title {
				font-size: 2.5rem;
				margin: 0;
			}

figure.woocommerce-product-gallery__wrapper,
			div.woocommerce-product-gallery__wrapper {
				margin: 0;
			}

.woocommerce-product-rating {
				.star-rating {
					display: inline-block;
				}
				.woocommerce-review-link {
					display: inline-block;
					overflow: hidden;
					position: relative;
					top: -0.5em;
					font-size: 1em;
				}
			}
		}

form.cart button[name="add-to-cart"],
		form.cart button.single_add_to_cart_button {
			display: block;
			margin-top: 0.5rem;
			margin-bottom: var(--wp--style--block-gap);
		}

ol.flex-control-thumbs {
			padding-left: 0;
			float: left;

li {
				list-style: none;
				cursor: pointer;
				float: left;
				width: 18%;
				margin-right: 1rem;
			}

}

a.reset_variations {
			margin-left: 0.5em;
		}

table.group_table {
			td {
				padding-right: 0.5rem;
				padding-bottom: 1rem;
			}

margin-bottom: var(--wp--style--block-gap);
		}

.related.products {
			margin-top: 7rem;
		}
	}

.woocommerce-Reviews {
		ol.commentlist {
			list-style: none;
			padding-left: 0;

li.review {
				margin-bottom: var(--wp--style--block-gap);
			}

img.avatar {
				float: left;
			}

p.meta {
				font-size: 1rem;
			}

.comment-text {
				display: flow-root;
				padding-left: var(--wp--style--block-gap);

.star-rating {
					margin-top: 0;
					margin-right: unset;
					margin-left: unset;
				}
			}
		}

.comment-form-rating {
			label {
				display: inline-block;
				padding-right: var(--wp--style--block-gap);
				padding-top: var(--wp--style--block-gap);
			}

p.stars {
				display: inline;
				a::before {
					color: var(--wp--preset--color--secondary);
				}
			}
		}

.comment-form-comment {
			label {
				float: left;
				padding-right: var(--wp--style--block-gap);
			}
		}

#review_form_wrapper {
			margin-top: 5rem;
		}
	}

.star-rating {
		overflow: hidden;
		position: relative;
		height: 1em;
		line-height: 1;
		width: 5.4rem;
		font-family: WooCommerce;
		color: var(--wp--preset--color--secondary);
		margin: 1rem auto 0.7rem auto;

&::before {
			content: "\73\73\73\73\73";
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			font-size: 1rem;
		}

span {
			overflow: hidden;
			float: left;
			top: 0;
			left: 0;
			position: absolute;
			padding-top: 1.5em;
		}

span::before {
			content: "\53\53\53\53\53";
			top: 0;
			position: absolute;
			left: 0;
			font-size: 1rem;
		}
	}

p.stars {
		margin-top: 0;

a {
			position: relative;
			height: 1.3em;
			width: 1.3em;
			text-indent: -999em;
			display: inline-block;
			text-decoration: none;
			box-shadow: none;

&::before {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 1em;
				height: 1em;
				line-height: 1;
				font-family: WooCommerce;
				font-size: 24px;
				content: "\e021";
				text-indent: 0;
			}

&:hover {

~ a::before {
					content: "\e021";
				}
			}
		}

&:hover {

a {

&::before {
					content: "\e020";
				}
			}
		}

&.selected {

a.active {

&::before {
					content: "\e020";
				}

~ a::before {
					content: "\e021";
				}
			}

a:not(.active) {

&::before {
					content: "\e020";
				}
			}
		}
	}

.woocommerce-product-gallery__trigger {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 99;
	}

.return-to-shop {
		a.button {
			background-color: #fff;
			color: var(--wp--preset--color--primary);
			border: 2px solid var(--wp--preset--color--primary);
			padding: 0.7rem 2rem;
		}
	}
}

// Description/Additional info/Reviews tabs.
.woocommerce-tabs {
	padding-top: var(--wp--style--block-gap);
}

ul.wc-tabs {
	padding: 0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #eae9eb;

li {
		background: #eae9eb;
		margin: 0;
		padding: 0.5em 1em 0.5em 1em;
		border-color: #eae9eb;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		float: left;
		border-style: solid;
		border-width: 1px;
		border-left-color: var(--wp--preset--color--background);
		font-weight: 600;
		font-size: var(--wp--preset--font-size--medium);

&:first-child {
			border-left-color: #eae9eb;
			margin-left: 1em;
		}

&.active {
			// Style active tab in theme colors.
			background: var(--wp--preset--color--background, $contentbg);
			border-bottom-color: var(--wp--preset--color--background, $contentbg);
			box-shadow: 0 1px var(--wp--preset--color--background);
		}

a {
			text-decoration: none;
		}
	}
}

.woocommerce-Tabs-panel {
	padding-top: var(--wp--style--block-gap);
	font-size: var(--wp--preset--font-size--small);
	margin-left: 1em;

// Hide repeated heading.
	h2:first-of-type {
		display: none;
	}

// Attributes table styles.
	table.woocommerce-product-attributes {
		tbody {

td, th {
				padding: 0.2rem 0.2rem 0.2rem 0;

p {
					margin: 0;
				}
			}

th {
				text-align: left;
				padding-right: 1rem;
			}
		}
	}
}

/**
 * Form fields
 */
.woocommerce-page {

form {

.input-text {
			border: 1px solid var(--wp--preset--color--black);
			border-radius: 0;
		}

abbr.required {
			text-decoration: none;
		}

ul {
			margin-top: 0;
			margin-bottom: 0;
			list-style-type: none;
			padding-left: 0;
		}
	}

input[type="radio"][name="payment_method"],
	input[type="radio"].shipping_method {
		display: none;

& + label {

&::before {
				content: "";
				display: inline-block;
				width: 1rem;
				height: 1rem;
				border: 2px solid var(--wp--preset--color--black);
				background: var(--wp--preset--color--white);
				margin-left: 4px;
				margin-right: 1.2rem;
				border-radius: 100%;
				transform: translateY(0.2rem);
			}
		}

& ~ .payment_box {
			padding-left: 3rem;
			margin-top: 1rem;
		}

&:checked + label {

&::before {
				background: radial-gradient(circle at center, black 45%, white 0);
			}
		}
	}

label.woocommerce-form__label-for-checkbox {
		font-weight: normal;
		cursor: pointer;

span {

&::before {
				content: "";
				display: inline-block;
				height: 1rem;
				width: 1rem;
				border: 2px solid var(--wp--preset--color--black);
				background: var(--wp--preset--color--white);
				margin-right: 0.5rem;
				transform: translateY(0.2rem);
			}
		}

input[type="checkbox"] {
			display: none;
		}

input[type="checkbox"]:checked + span::before {
			background: var(--wp--preset--color--black);
			box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
		}
	}

table.shop_table_responsive {
		text-align: left;

th,
		td {
			font-size: var(--wp--preset--font-size--small);
			font-weight: normal;
		}

th {
			padding-bottom: 1rem;
		}

tbody {

tr {
				border-top: 1px solid var(--wp--preset--color--black);
			}

td {
				a.button,
				button {
					margin-bottom: 1rem;
					border: none;
					background: #ebe9eb;
					color: var(--wp--preset--color--black);
					padding: 0.5rem 1rem 0.5rem 1rem;

&:hover,
					&:visited {
						color: var(--wp--preset--color--black);
					}
				}

&.woocommerce-orders-table__cell-order-actions {
					a.button {
						display: block;
					}
				}
			}
		}
	}

table.shop_table,
	table.shop_table_responsive {
		tbody {
			.product-name {
				a:not(:hover) {
					text-decoration: none;
				}

a:hover {
					text-decoration: underline;
					text-decoration-thickness: 1px;
				}

.variation {
					dt {
						font-style: italic;
						margin-right: 0.25rem;
						float: left;
					}

dd {
						font-style: normal;

a {
							font-style: normal;
						}
					}
				}
			}
		}
	}

/*
	 * Cart / Checkout
	 */
	.woocommerce-cart-form {

#coupon_code,
		.actions .button {
			margin-right: 0;
		}

table.shop_table_responsive {

td,
			th {
				padding: 1rem 0 0.5rem 1rem;
			}

tbody {

tr:last-of-type {
					border-top: none;
				}

@media only screen and (max-width: 768px) {
					td {
						padding-left: 0;
					}

.product-remove {
						text-align: left !important;
					}

#coupon_code {
						float: left;
						margin-bottom: 1rem;
					}
				}
			}

button[name="apply_coupon"],
			button[name="update_cart"] {
				padding: 1rem 2rem;
				border: 2px solid #ebe9eb;
				margin: 0;
			}

.product-remove {
				font-size: var(--wp--preset--font-size--large);

a {
					text-decoration: none;
				}
			}
		}
	}

.cart-collaterals {
		margin-top: 1.5rem;

h2 {
			text-transform: uppercase;
			font-family: inherit;
		}

table.shop_table_responsive {

tr {
				border-top: none;
			}

th {
				width: 11rem;
			}

td,
			th {
				padding: 1rem 0;
				vertical-align: text-top;
			}
		}

button[name="calc_shipping"] {
			padding: 1rem 2rem;
		}

.woocommerce-Price-amount {
			font-weight: normal;
		}
	}

.woocommerce-checkout,
	&.woocommerce-order-pay {
		display: table;

h3 {
			font-family: inherit;
			font-size: var(--wp--preset--font-size--normal);
			font-weight: 700;
		}

.col2-set {
			width: 43%;
			float: right;
		}

.blockUI.blockOverlay {
			position: relative;
			@include loader();
		}

#customer_details {
			width: 53%;
			float: left;

.col-1,
			.col-2 {
				width: 100%;
				float: none;
			}
		}

@media only screen and (max-width: 768px) {
			.col2-set,
			#customer_details {
				width: 100%;
				float: none;
			}
		}

.woocommerce-billing-fields__field-wrapper,
		.woocommerce-checkout-review-order-table,
		.woocommerce-checkout-payment,
		#payment {
			margin-top: 4rem;
		}

.woocommerce-checkout-review-order-table,
		#order_review .shop_table {
			border-collapse: collapse;
			width: 100%;

thead {
				display: none;
			}

th {
				text-align: left;
				font-weight: normal;
			}

th,
			td {
				padding: 1rem 1rem 1rem 0;
				vertical-align: text-top;
			}

tbody {
				border-bottom: 1px solid #d2ced2;
			}

tr.order-total {
				border-top: 1px solid #d2ced2;
			}

.product-quantity {
				font-weight: normal;
			}

.product-total,
			.cart-subtotal,
			.order-total,
			.tax-rate,
			input[type="radio"].shipping_method:checked + label,
			input[type="hidden"].shipping_method + label {
				.woocommerce-Price-amount {
					font-weight: bold;
				}
			}
		}

button#place_order {
			width: 100%;
			text-transform: uppercase;
		}
	}

form.checkout_coupon {
		background: $tt2-gray;
		padding-left: 1.5rem;
		float: left;
		// 1.5 rem is to account for extra padding we added above.
		width: calc(100% - 1.5rem);

.form-row {
			button[name="apply_coupon"] {
				margin-top: 0;
			}
		}
	}

ul.wc_payment_methods,
	ul.woocommerce-shipping-methods {
		margin-top: 0;
		margin-bottom: 0;
		list-style-type: none;
		padding-left: 0;

input[type="radio"] {
			margin-right: 0.6rem;
		}

li.wc_payment_method {
			margin-bottom: 1rem;
		}
	}

.woocommerce-thankyou-order-received {
		margin-top: 0;
	}

.woocommerce-thankyou-order-received,
	.woocommerce-column__title,
	.woocommerce-customer-details h2 {
		font-family: var(--wp--preset--font-family--source-serif-pro);
	}

.woocommerce-order > * {
		margin-bottom: var(--wp--style--block-gap);
	}

.woocommerce-customer-details {
		address {
			border: 1px solid var(--wp--preset--color--black);
			font-style: inherit;

p[class^="woocommerce-customer-details--"] {
				&:first-of-type {
					margin-top: 2rem;
				}

margin-top: 1rem;
				margin-bottom: 0;
			}

.woocommerce-customer-details--phone::before {
				content: "\01F4DE";
				margin-right: 1rem;
			}

.woocommerce-customer-details--email::before {
				content: "\2709";
				margin-right: 1rem;
				font-size: 1.8rem;
			}
		}
	}

.woocommerce-table--order-details {
		border: 1px solid var(--wp--preset--color--black);

th,
		td {
			text-align: left;
			border-top: 1px solid var(--wp--preset--color--black);
			border-bottom: 1px solid var(--wp--preset--color--black);
			font-weight: normal;
		}

thead th {
			text-transform: uppercase;
		}
	}
}

/**
 * Account section
 */
.woocommerce-account {

.woocommerce-MyAccount-navigation {

li {

a {
				box-shadow: none;
			}

&.is-active {

a {
					color: var(--wp--preset--color--primary);
				}
			}
		}
	}

table.shop_table_responsive.my_account_orders th {
		padding-top: 0;
	}

.woocommerce-form-login {
		max-width: 516px;
		margin: 0 auto;
	}
}

.wp-block-search {
	.wp-block-search__label {
		font-weight: normal;
	}
	.wp-block-search__input {
		padding: 0.9rem 1.1rem;
		border: 1px solid var(--wp--preset--color--black);
	}
	.wp-block-search__button {
		padding: 1rem 1.2rem;
	}
}

.wc-block-product-search {
	form {
		.wc-block-product-search__fields {
			display: flex;
			flex: auto;
			flex-wrap: nowrap;
			max-width: 100%;

.wc-block-product-search__field {
				padding: 0.9rem 1.1rem;
				flex-grow: 1;
				border: 1px solid var(--wp--preset--color--black);
				font-size: inherit;
				font-family: inherit;
			}

.wc-block-product-search__button {
				display: flex;
				background-color: var(--wp--preset--color--primary);
				color: #fff;
				border: 1px solid var(--wp--preset--color--black);
				padding: 1rem 1.2rem;
				margin: 0 0 0 0.7rem;
			}
		}
	}
}

.theme-twentytwentytwo .woocommerce-store-notice {
	color: var(--wp--preset--color--black);
	border-top: 2px solid var(--wp--preset--color--primary);
	background: $tt2-gray;
	padding: 2rem;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	margin: 0;

.woocommerce-store-notice__dismiss-link {
		float: right;
		margin-right: 4rem;
		color: inherit;
	}
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	background: $tt2-gray;
	border-top-color: var(--wp--preset--color--primary);
	border-top-style: solid;
	padding: 1rem 1.5rem;
	margin-bottom: 2rem;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);

&[role="alert"]::before {
		color: var(--wp--preset--color--background);
		background: var(--wp--preset--color--primary);
		border-radius: 5rem;
		font-size: 1rem;
		padding-left: 3px;
		padding-right: 3px;
		margin-right: 1rem;
	}

a.button {
		margin-top: -0.5rem;
		border: none;
		background: #ebe9eb;
		color: var(--wp--preset--color--black);
		padding: 0.5rem 1rem;

&:hover,
		&:visited {
			color: var(--wp--preset--color--black);
		}
	}
}

.woocommerce-error[role="alert"] {
	margin: 0;

&::before {
		content: "X";
		padding-right: 4px;
		padding-left: 4px;
	}

li {
		display: inline-block;
	}
}

.woocommerce-message {
	&[role="alert"]::before {
		content: "\2713";
	}
}

/**
 * Coupon error notice
 */
 .woocommerce-cart {
	td.actions .coupon .coupon-error-notice {
		@include coupon-error-notice-cart();
 	}
}

form.checkout_coupon {
	.coupon-error-notice {
		@include coupon-error-notice-checkout();
	}

.input-text.has-error:focus {
		border-color: var(--wc-red);
	}
}

/**
 * Checkout error message
 */
 .woocommerce-checkout {
	form .form-row.woocommerce-invalid input.input-text {
		border-color: var(--wc-red);
	}

.checkout-inline-error-message {
		@include checkout-inline-error-message();
	}
}

Back