FileMaster

Edit File: style.scss

$root: ".woocommerce-setup-guide";

@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";

// Adds animation to placeholder section
// Copied from WC-admin
// https://github.com/woocommerce/woocommerce-admin/blob/9f68059c7df466ee7a559c555bcb5a7b9e421e6d/packages/style-build/abstracts/_mixins.scss#L22-L35
@mixin placeholder($lighten-percentage: 30%) {
	animation: loading-fade 1.6s ease-in-out infinite;
	background-color: $gray-100;
	color: transparent;

&::after {
		content: "\00a0";
	}

@media screen and (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

// This is to fix breaking changes in checkbox control UI in WP 6.6.
// Code is copied from https://github.com/WordPress/gutenberg/pull/60475.
:root {
	--checkbox-input-size: 24px; // Width & height for small viewports.

@include break-small() {
		--checkbox-input-size: 20px;
	}

--checkbox-input-margin: #{$grid-unit-10};
}

#{$root} {

&__body {

&.woocommerce-admin-full-screen {
			margin-top: 0;

.woocommerce-layout__primary {
				margin-top: 60px;
			}

.woocommerce-layout__header,
			.woocommerce-navigation {
				display: none;
			}

.woocommerce-layout__main {

.woocommerce-layout__header {
					top: 0;
					left: 0;
					width: 100%;
					display: block;
					border-bottom: 1px solid #dcdcde;
				}
			}
		}

@media screen and (max-width: #{ ($break-small - 1) }) {

#wpbody {
				padding-top: 0;
			}
		}

.wrap {
			margin: 0;
		}

#wpcontent {
			padding: 0;
		}

.woocommerce-layout {

&__main {
				display: block;
			}

.woocommerce-spinner {
				display: none;
			}

.woocommerce-list__item-content {
				white-space: break-spaces;
			}
		}

.pinterest-for-woocommerce-connection,
		.pinterest-for-woocommerce-settings,
		.pinterest-for-woocommerce-catalog,
		.pinterest-for-woocommerce-setup-guide {
			#{$root} {

&__main {

.woocommerce-stepper {

&__steps {
							align-items: center;
							display: flex;
							height: 60px;
							justify-content: center;
							margin: 0 auto;
							max-width: 850px;
							position: relative;

&::before {
								background: #fff;
								border-bottom: 1px solid #dcdcde;
								content: "";
								display: block;
								height: 100%;
								left: 50%;
								position: absolute;
								top: 0;
								transform: translateX(-50%);
								width: 100vw;
								z-index: -1;
							}
						}

&__step {
							padding-left: 12px;
							padding-right: 12px;

&-divider {
								align-self: center;
								margin-top: 0;
								flex-grow: 0;
								width: 100px;
							}
						}
					}
				}

&__container {
					color: #000;
					max-width: 1032px;

@include break-medium() {
						margin: var(--large-gap) auto;
						padding-left: 16px;
						padding-right: 16px;

}

> div {

&:not(:first-child) {
							margin-top: calc(var(--large-gap) + (var(--main-gap) / 2));
						}
					}

.components-card__body.is-size-large {
						padding: var(--large-gap);
					}

.components-card__footer {
						padding-left: var(--large-gap);
						padding-right: var(--large-gap);
					}

.components-button.is-link.is-destructive {
						color: #cc1818;

&:hover:not(:disabled) {
							color: #710d0d;
						}
					}

.pinterest-for-woocommerce-sync-settings .woocommerce-spinner {
						display: block;
						margin: auto;
						width: 15px;
						min-width: 15px;
						height: 15px;
					}
				}

&__step {

&-header {
						margin: 16px auto 40px;
						max-width: 490px;
						text-align: center;

@include break-medium() {
							margin: 0 auto var(--large-gap);
							min-height: 120px;
						}

> div {
							margin: 12px 0;
						}

&__subtitle {
							text-transform: uppercase;
						}

&__description {
							color: #191e23;
						}
					}

&-overview {
						margin-top: var(--large-gap);

> div {
							margin: 8px 0;
						}

&__description {
							color: #191e23;
						}

&__link {

a {
								text-decoration: none;

&:hover {
									text-decoration: underline;
								}
							}
						}
					}

&-columns {

@include break-medium() {
							column-gap: 24px;
							display: grid;
							grid-template-columns: 328px auto;
						}
					}

&-column {
						position: relative;
						margin-bottom: var(--large-gap);

@include break-medium() {
							margin-bottom: 0;
						}

.woocommerce-spinner {
							display: block;
						}

.pinterest-tooltip-link {
							color: #fff;
						}
					}

&-modal {

&__buttons {

button + button {
								margin-left: 12px;
							}
						}
					}
				}

&__ad-credits {

&__divider {
						margin: 20px 0;
					}

.image-block {
						align-items: center;
						display: flex;
						flex: 0 0 32px;

svg {
							height: 100%;
							width: 100%;
						}
					}

.content-block {
						color: #757575;
					}
				}

&__setup-pins {

.components-tooltip {
						background: unset;
						padding: 0;

.components-popover__content {
							background: #000;
							border-radius: 2px;
							border-width: 0;
							box-shadow: none;
							color: #f0f0f0;
							font-size: 12px;
							line-height: 1.4;
							outline: none;
							padding: 4px 8px;

width: 180px;
							white-space: normal;
							text-align: left;

/*
							`font-family` is overwritten when using
							dashicon as the hovering anchor.
							*/
							font-family: $default-font;
						}
					}
				}

&__setup-account {

.connection-info {
						// Set minimum height to the height of the spinner preloader.
						min-height: 40px;

.logo {
							display: flex;
							justify-self: start;
						}

.connection-info__placeholder {

@include placeholder();
							width: 50%;
							min-width: 10em;
							display: inline-block;
						}

.connection-info__preloader {
							flex: 1;
						}

.account-label {

p {
								font-weight: 600;

.account-type {
									font-weight: 400; // normal
								}
							}
						}
					}

.business-connection {

p {
							margin-bottom: 0.5em;

&:last-child {
								margin-bottom: 0;
							}
						}
					}

.components-flex {

> * {
							margin: 0 6px;

&:first-child {
								margin-left: 0;
							}

&:last-child {
								margin-right: 0;
							}
						}
					}

.components-base-control__field {
						margin-bottom: 0;

.components-input-control__container {
							margin-left: 0;
						}

select.components-select-control__input {
							min-height: 36px;
						}
					}
				}

&__claim-website {

.components-card__body {

> :not(:last-child) {
							margin-bottom: var(--main-gap);
						}

> :first-child {
							margin-bottom: $grid-unit-10;
						}
					}

.components-notice.is-error {
						margin: 0;
					}
				}

&__setup-tracking {

.text-margin {
						margin: 1em 0;
					}

.components-base-control {

&__help {
							margin: 0.2em 0 1.5em 0;
						}

&:last-child .components-base-control {

&__help {
								margin-bottom: 0;
							}
						}
					}
				}

&__checkbox {

&-heading {
						margin: 24px 0;

&:first-child {
							margin-top: 0;
						}
					}

&-group {
						align-items: center;
						display: flex;
						margin-bottom: 16px;

&:last-child {
							margin-bottom: 0;
						}

.components-base-control {

&__field,
							&__help {
								margin: 0;
							}

&__help {
								margin-left: 12px;

.components-button {
									display: inline-block;
									text-decoration: none;

&:not(:hover) {
										color: inherit;
									}
								}
							}
						}
					}

&-readonly {

.components-base-control__field {
							color: $gray-700;
							pointer-events: none;
						}
					}
				}

&__with-help-description {
					margin-bottom: 6px;
				}

&__help-description {
					color: $gray-700;
					margin-bottom: 16px;
				}

&__footer-button {
					display: block;
					margin-top: var(--large-gap);
					text-align: right;
				}
			}
		}
	}
}

.pinterest-for-woocommerce-prelaunch-notice {
	max-width: 824px;
	margin: auto auto;
	padding: 1em 2em;
}

.pinterest-for-woocommerce-landing-page {
	max-width: 824px;
	margin: 24px auto;

.components-flex {
		flex-direction: column;

@include break-medium() {
			flex-direction: row;
		}
	}

&__welcome-section {

.components-flex {
			align-items: flex-end;

@include break-medium() {
				padding-top: 36px;
			}

&__block {
				margin: 0;

&.content-block {
					padding: 20px 32px;
					flex: 0 0 50%;

@include break-medium() {

padding: 20px 64px 64px 64px;
					}

p:not(:last-child) {
						margin-bottom: 16px;
					}
				}

&.image-block {
					align-items: center;
					display: flex;
					margin-top: 32px;

@include break-medium() {
						margin-top: 0;
					}

img {
						height: 100%;
						object-fit: cover;
						width: 100%;
					}
				}
			}
		}
	}

&__credits-section {

.components-flex {
			padding: 20px 64px;

&__block {
				margin: 0;

&.content-block {
					flex: 0 0 85%;

@include break-medium() {
						padding-left: 20px;
					}
				}

&.image-block {
					align-items: center;
					display: flex;
					margin-bottom: 32px;

@include break-medium() {
						margin-bottom: 0;
					}

img {
						padding: 12px;
						height: 100%;
						object-fit: cover;
						width: 100%;
					}
				}
			}
		}

&__tac-modal {
			width: 600px;

.components-modal__header {
				border-bottom: 1px solid #ddd;
			}

a,
			p {

display: block;
				margin-bottom: 16px;
			}
		}
	}

&__features-section {

.components-flex {
			gap: 64px;
			padding: 32px;

@include break-medium() {
				padding: 50px 64px;
			}

&__block {
				text-align: center;
				margin: 0;

img {
					border-radius: 100px;
					height: 100px;
					margin-bottom: 32px;
					object-fit: cover;
					width: 100px;
				}

p:not(:last-child) {
					margin-bottom: 16px;
				}
			}
		}
	}

&__faq-section {

h2 {
			font-weight: 700;
		}
	}
}

.pinterest-for-woocommerce-catalog-sync {

&__container {

@include break-medium() {
			margin: var(--large-gap) auto;
		}
	}

&__state {

margin-bottom: 0;

@media ( max-width: #{ ($break-medium - 1) } ) {

tr {
				display: flex;
				flex-direction: column;
				padding-top: 10px;
				padding-bottom: 10px;
			}

th {
				padding-bottom: 0;
			}

th,
			td {
				padding-left: 0;
				padding-right: 0;
				border: 0;
			}
		}

.woocommerce-table__header {
			display: none;
		}

.components-card__footer {
			flex-direction: row;

.components-external-link {
				text-decoration: none;

&:hover {
					text-decoration: underline;
				}
			}
		}

th:first-child {
			width: 1%;
			min-width: 175px;
			white-space: nowrap;

.is-placeholder {
				max-width: 100%;
				width: 100%;
			}
		}

td {
			color: #757575;

.is-placeholder {
				max-width: 60%;
			}
		}

.woocommerce-summary {
			background: none;
			border: 0;
			box-shadow: none;
			margin: 0;

&__item {
				background: none;

&-container {

&:last-child {

>div {
							border-right: 0;
						}
					}
				}

&-delta {
					display: none;
				}
			}
		}

svg.dashicon {
			margin-bottom: -5px;
		}

& &-footer {
			flex-direction: column;
			align-items: flex-start;

&-credits {
				color: #757575;
			}
		}

}

&__ad-credits {
		flex-direction: row;
		margin: 0;
		padding: 16px 20px;

.components-external-link {
			text-decoration: none;

&:hover {
				text-decoration: underline;
			}
		}

&__icon {
			margin-right: 8px;

> * {
				stroke: #000;
			}
		}

.components-notice__content {
			display: flex;
			justify-items: flex-start;

.components-visually-hidden {
				display: none;
			}
		}
	}

&__issues {

margin-top: 40px;

&.woocommerce-card {
			border: 1px solid rgb(226, 228, 231);
			box-shadow: none;
		}

.woocommerce-card {

&__header {
				padding: 16px 24px;
				border-bottom: 1px solid rgb(226, 228, 231);
			}

&__title {
				font-size: 20px;
				line-height: 28px;
			}

&__body {
				padding: 0;
			}
		}

th:first-child {
			text-align: center;
			white-space: nowrap;
			width: 1%;
		}
	}

&__onboarding-modal,
	&__onboarding-generic-modal {

width: 500px;

.components-modal {

&__content {

margin-top: 160px;

.components-modal__header {
					align-items: flex-start;
					height: 160px;

img {
						height: 160px;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
					}

button {
						margin-top: 15px;
					}
				}
			}
		}

p {
			margin-bottom: 16px;

&:not(:nth-of-type(1)) {
				color: #757575;
			}
		}

& &__error {
			align-items: flex-start;
			color: #757575;

.dashicon {
				color: #f0b849;
				font-size: 24px;
			}
		}
	}

.error-text {

color: #d63b44;

svg {
			fill: #d63b44;
		}
	}

.warning-text {

color: #f0b849;

svg {
			fill: #f0b849;
		}
	}

.success-text {

color: #23a713;

svg {
			fill: #23a713;
		}
	}
}

.pinterest-for-woocommerce-settings-checkbox-disabled {
	color: $gray-700;
	pointer-events: none;
}

.pinterest-for-woocommerce-account-setup .woocommerce-setup-guide__ad-credits {
	align-items: flex-start;
}

Back