.woocommerce-profile-wizard__body { .woocommerce-profile-wizard__step-header { text-align: center; margin: $gap 0 $gap-large; h2 { margin-bottom: $gap-smallest; color: $gray-900; } p { color: $gray-700; display: flex; align-items: center; justify-content: center; .woocommerce-profile-wizard__tooltip-icon { height: 16px; } } } .woocommerce-profile-wizard__header { height: $header-height; border-bottom: 1px solid $studio-gray-5; display: flex; align-items: center; justify-content: center; background: $studio-white; } .woocommerce-profile-wizard__header-subtitle { font-weight: 400; text-align: center; } .woocommerce-profile-wizard__header-subtitle { color: $gray-700; font-size: 16px; line-height: 24px; margin-top: $gap-smaller; margin-bottom: $gap * 2; margin-right: $gap-smaller; display: flex; justify-content: center; } .woocommerce-profile-wizard__intro-paragraph { margin-top: 5px; margin-bottom: 18px; } .woocommerce-profile-wizard__container { margin-top: $gap-larger; margin-left: auto; margin-right: auto; text-align: left; > * { max-width: 504px; margin-left: auto; margin-right: auto; } &.benefits { text-align: center; } @include breakpoint( '<782px' ) { padding-left: $gap; padding-right: $gap; margin-bottom: 56 + $gap; /* 56px is height of footer */ margin-top: 0; } .components-popover__content { > div { padding: $gap $gap-large; } } .woocommerce-profile-wizard__footer { margin: 34px auto; display: flex; justify-content: center; } .woocommerce-profile-wizard__footer-link { display: flex; text-decoration: none; } .woocommerce-profile-wizard__footnote { margin-top: $gap; text-align: center; p { color: $gray-700; text-align: left; margin-bottom: 12px; } } } #woocommerce-layout__primary { text-align: center; margin: 0; width: 100%; } .woocommerce-layout .woocommerce-layout__main { padding-right: 0; } .woocommerce-profile-wizard__error { display: block; padding: $gap $gap-large; font-size: 12px; color: $studio-red-50; } .woocommerce-profile-wizard__benefit { display: flex; svg:first-child { width: 24px; min-width: 24px; margin-right: $gap-large; } .woocommerce-profile-wizard__benefit-title { font-size: 16px; font-weight: 400; margin-top: 0; margin-bottom: $gap-smaller; } .woocommerce-profile-wizard__benefit-content { margin-left: $gap; p { padding-bottom: $gap; margin-top: 0; border-bottom: 1px solid $studio-gray-5; font-size: 14px; } } .woocommerce-profile-wizard__benefit-toggle { padding-top: $gap-larger; margin-left: $gap; } &:last-child p { border-bottom: 0; margin-bottom: 0; } } .woocommerce-profile-wizard__benefits { display: grid; grid-gap: $gap; grid-auto-columns: 1fr; grid-auto-flow: column; @include breakpoint( '<960px' ) { justify-items: center; grid-auto-flow: row; } } .woocommerce-profile-wizard__benefits-logo { display: block; margin: 0 auto; } .woocommerce-profile-wizard__benefit-card { display: flex; flex-direction: column; justify-self: center; background: $studio-gray-0; width: 100%; max-width: 295px; overflow: hidden; text-align: left; .woocommerce-profile-wizard__benefit-card-title { font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: $gap-smaller; } .woocommerce-profile-wizard__benefit-card-content { padding: #{$gap-small * 2} #{$gap * 2} #{$gap * 2} #{$gap * 2}; p { padding: 0; margin: 0; font-size: 14px; } } } .woocommerce-profile-wizard__business-extension { background: #f6f6f6; padding-right: 4px; padding-left: 4px; height: 100%; padding-top: 12px; padding-bottom: 12px; img { box-sizing: unset; max-width: 100px; max-height: 50%; vertical-align: middle; } } .woocommerce-profile-wizard__tracking { .woocommerce-profile-wizard__tracking-checkbox { margin-top: $gap; } .components-form-toggle { display: none; } @include breakpoint( '<782px' ) { .components-form-toggle { display: inline-block; } .components-checkbox-control__input { display: none; } display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; } } .woocommerce-profile-wizard__client { margin: $gap-smaller 0; } .woocommerce-profile-wizard__checkbox { margin-top: 0; margin-bottom: 0; position: relative; padding: $gap-small $gap-large; min-height: 62px; border-bottom: 1px solid $gray-100; display: flex; align-items: center; .components-base-control { position: relative; } .components-base-control__field { width: 100%; margin: 0; } label.components-checkbox-control__label { font-size: $gap; margin-left: 0; } .components-base-control__help { margin-left: $gap-largest + $gap-smaller; font-style: normal; } .components-base-control__help { color: $gray-600; font-size: 14px; line-height: 20px; margin-top: 3px; margin-bottom: 0; } svg.dashicon.components-checkbox-control__checked { left: 1px; top: -1px; } } @include breakpoint( '<600px' ) { svg.dashicon.components-checkbox-control__checked { left: -2px; top: -1px; width: 21px; height: 21px; } } .woocommerce-select-control__control { margin: $gap 0; padding-right: $gap + 24px; box-shadow: $shadow-popover; &.is-active { border-color: var(--wp-admin-theme-color); } .components-base-control__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - #{$gap * 2} - 24px); } &::after { display: block; pointer-events: none; cursor: pointer; position: absolute; float: right; line-height: 56px; font-family: dashicons, sans-serif; font-size: 20px; content: '\f140'; z-index: 1; height: 24px; width: 24px; margin-top: 0; top: 0; right: $gap; bottom: $gap; color: $studio-black; } } #wpadminbar { display: none; } #wpbody { padding-top: 0; } } .woocommerce-profile-wizard__benefits-card.components-card { display: inline-block; max-width: 100%; text-align: center; .woocommerce-profile-wizard__benefits-install-notice { font-size: 14px; color: $studio-gray-40; } } .woocommerce-profile-wizard__plugins-card { .woocommerce-profile-wizard__plugins-actions { text-align: left; margin-left: $gap-largest + $gap-smallest; button.is-button { margin: $gap 0 0; height: 40px; min-width: auto; display: initial; margin-right: $gap-small; } } } .woocommerce-profile-wizard__header { svg > g { transform: initial; } @include breakpoint( '<782px' ) { position: fixed; z-index: 999; width: 100%; bottom: 0; border-top: 1px solid $studio-gray-5; border-bottom: none; } .woocommerce-stepper { margin: 0 $gap 0 $gap; width: 100%; } .woocommerce-stepper__steps { margin: 0; } } .woocommerce-profile-wizard__tooltip-icon { color: $studio-gray-60; display: flex; align-items: center; margin-left: $gap-smallest; cursor: help; } .woocommerce-business-extensions { display: flex; align-items: center; width: 100%; label { display: flex; align-items: center; } .components-checkbox-control__input-container { margin-right: $gap; } .woocommerce-business-extensions__label-subtext { display: block; color: $gray-600; } .woocommerce-business-extensions__popover-wrapper { margin-left: auto; } .woocommerce-business-extensions__benefits { padding: 4px; display: grid; grid-template-columns: 1fr 1fr; max-width: 100%; min-width: 580px; font-size: 14px; @include breakpoint( '<782px' ) { grid-template-columns: 1fr; min-width: 300px; } .woocommerce-business-extensions__benefit { padding: 10px; font-size: 14px; display: inline-flex; i { color: var(--wp-admin-theme-color); margin-right: $gap; } } } }