.woocommerce-layout .woocommerce-layout__main { @include breakpoint( '<782px' ) { padding-top: 0 !important; } } .woocommerce-profile-wizard__body { background-color: #fff; #woocommerce-layout__primary { margin: 0; width: 100%; } .woocommerce-layout__main { padding-right: 0; } } .woocommerce-profiler-page__content { display: flex; align-items: center; flex-direction: column; @include breakpoint( '<782px' ) { padding: 0 20px; } .woocommerce-profiler-button-container { width: 100%; max-width: 404px; @include breakpoint( '<782px' ) { position: absolute; bottom: 20px; padding: 0 20px; max-width: 100%; } } .woocommerce-profiler-button { display: flex; width: 100%; justify-content: center; padding: 10px 16px; height: 48px; font-size: 14px; font-weight: 500; } .woocommerce-select-control__option { font-size: 13px; height: 40px; min-height: initial; &:hover { background: #eff2fd; color: $gray-900; } } .woocommerce-select-control__listbox { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); border: 1px solid #ccc; margin-top: 8px; top: 40px; } .woocommerce-select-control__control { height: 40px; padding: 12px; border: 1px solid #bbb; label, .woocommerce-select-control__control-input { font-size: 13px; cursor: pointer; } .components-base-control__label { font-size: 13px; line-height: 16px; color: $gray-700; } &.with-value { .woocommerce-select-control__control-input { margin: 0; color: $gray-900; } .components-base-control__label { display: none; } } &.is-active { border: 1px solid var(--wp-admin-theme-color); } } #woocommerce-select-control__listbox-0 { top: 40px !important; } } .woocommerce-profiler-select-control__country { max-width: 404px; margin: auto auto 32px auto; } // Intro opt-in page .woocommerce-profiler-intro-opt-in { min-height: 100vh; display: flex; flex-direction: column; } .woocommerce-profiler-intro-opt-in__content { padding-top: 81px; flex: 1; @include breakpoint( '<782px' ) { padding-top: 70px; } .woocommerce-profiler-heading { max-width: 520px; } .woocommerce-profiler-welcome-image { margin-bottom: 48px; width: 266px; height: 172px; background: url(./assets/images/welcome-desktop.svg) no-repeat center center; @include breakpoint( '<782px' ) { margin-bottom: 40px; background: url(./assets/images/welcome-mobile.svg) no-repeat center center; width: 222px; height: 144px; } } .woocommerce-profiler-setup-store__button { padding: 10px 16px; width: 200px; height: 54px; display: flex; justify-content: center; align-items: center; @include breakpoint( '<782px' ) { width: 100%; margin-top: auto; } } .woocommerce-profiler-intro-opt-in__footer { margin: auto auto 40px; display: flex; justify-content: center; @include breakpoint( '<782px' ) { margin: 16px auto 20px; } .woocommerce-profiler-intro-opt-in__checkbox { input { box-shadow: 0 0 0 2px #fff, 0 0 0 4px $gray-700; outline: 2px solid transparent; width: 16px; height: 16px; } .components-checkbox-control__input-container { width: 16px; height: 16px; margin-left: 5px; } svg.components-checkbox-control__checked { width: 20px; height: 20px; @include breakpoint( '<782px' ) { width: 16px; height: 16px; } } .components-base-control__field { margin-bottom: 0; display: flex; align-items: center; } .components-checkbox-control__label { display: inline-block; color: $gray-700; font-size: 13px; line-height: 16px; max-width: 514px; margin-left: 10px; } .woocommerce-select-control__control-input { font-size: 13px; line-height: 16px; } } a { color: $gray-700; } } } // Business location page .woocommerce-profiler-select-control__country { max-width: 400px; margin: auto auto 32px auto; .woocommerce-select-control__option { font-size: 13px; &:hover { background: #eff2fd; } } .woocommerce-select-control__listbox { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); border: 1px solid #ccc; margin-top: 8px; } .woocommerce-select-control__control { height: 40px; padding: 12px; border: 1px solid #bbb; label, input { font-size: 13px; color: var(--wp-components-color-foreground, #757575); } &.is-active { border: 1px solid #3858e9; } } #woocommerce-select-control__listbox-0 { top: 40px !important; } .woocommerce-profiler-business-location { display: flex; flex-direction: column; .woocommerce-profiler-business-location__content { max-width: 550px; width: 100%; display: flex; align-self: center; & > div { width: 100%; } .components-base-control__field { height: 40px; } .woocommerce-select-control__control-icon { display: none; } .woocommerce-select-control__control.is-active { .components-base-control__label { display: none; } } .woocommerce-select-control.is-searchable .woocommerce-select-control__control-input { margin: 0; padding: 0; } .woocommerce-select-control.is-searchable .components-base-control__label { left: 13px; } } } } // Loader page .woocommerce-profiler-loader { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; @include breakpoint( '<782px' ) { padding: 0 20px; } h1 { padding: 0; margin: 58px 0 0 0; font-size: 28px; font-weight: 500; @include breakpoint( '<782px' ) { font-size: 20px; } } .woocommerce-profiler-loader-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 520px; } .woocommerce-profiler-progress-bar { width: 520px; margin: 16px 0 16px 0; @include breakpoint( '<782px' ) { width: 100%; } } .woocommerce-profiler-progress-bar__container { height: 4px; } .woocommerce-profiler-loader__paragraph { font-size: 16px; line-height: 24px; color: #2f2f2f; opacity: 0.8; text-align: center; @include breakpoint( '<782px' ) { font-size: 14px; line-height: 20px; } } } // User profile page .woocommerce-profiler-user-profile { .woocommerce-profiler-user-profile__content { min-height: 630px; &.is-platform-selector-open { padding-bottom: 145px; } } .woocommerce-user-profile-choices { margin-bottom: 32px; max-width: 404px; width: 100%; } .woocommerce-profiler-heading__title { max-width: 480px; } .woocommerce-user-profile-choices fieldset { display: flex; gap: 18px; flex-direction: column; } .woocommerce-profiler-choice-sub-options { .woocommerce-profiler-question-label { text-transform: uppercase; color: $gray-900; font-weight: 500; font-size: 11px; line-height: 16px; margin: 0 0 8px; } } .woocommerce-profiler-selling-platform { margin-top: 20px; } } .woocommerce-profiler-plugins { display: flex; flex-direction: column; .woocommerce-profiler-plugins__content { display: flex; align-items: center; align-self: center; max-width: 1000px; width: 100%; } .woocommerce-profiler-heading { max-width: 615px; margin: 58px 0 0 0; } .woocommerce-profiler-heading__subtitle { margin: 0 0 48px 0 !important; @include breakpoint( '<782px' ) { margin-top: 12px !important; } } .woocommerce-profiler-plugins__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; flex: 50%; } .woocommerce-profiler-plugins-continue-button { width: 200px; height: 48px; margin-top: 28px; text-align: center; display: block; } .plugin-error { width: 100%; border-left: 4px solid #cc1818; background-color: #fce2e4; padding: 12px; margin: 0 0 28px 0; color: #1e1e1e; button { text-decoration: none; } span { font-weight: bold; } } .woocommerce-profiler-plugins-jetpack-agreement { color: $gray-700; font-size: 12px; a { color: inherit; } } .woocommerce-profiler-plugins-continue-button-container { @include breakpoint( '<782px' ) { position: absolute; bottom: 20px; padding: 0 20px; width: 100%; } .woocommerce-profiler-plugins-continue-button { @include breakpoint( '<782px' ) { width: 100%; } } } } // Business Info Page .woocommerce-profiler-business-information { display: flex; flex-direction: column; .woocommerce-profiler-business-information__content { max-width: 615px; width: 100%; display: flex; align-self: center; & > div { width: 100%; } .woocommerce-profiler-business-information-form { display: flex; flex-direction: column; justify-content: space-between; height: 100%; max-width: 404px; width: 100%; } .woocommerce-profiler-question-label, .woocommerce-profiler-business-info-store-name .components-base-control__label { text-transform: uppercase; color: $gray-900; font-weight: 500; font-size: 11px; line-height: 16px; margin: 0 0 8px; } .woocommerce-profiler-question-label .woocommerce-profiler-question-required { color: #cc1818; padding-left: 3px; } .woocommerce-profiler-business-info-store-name .components-text-control__input { height: 40px; border-color: #bbb; border-radius: 2px; border-width: 1px; } .woocommerce-profiler-select-control__industry { margin-bottom: 20px; } .woocommerce-profiler-question-subtext { color: $gray-700; font-size: 12px; line-height: 16px; font-weight: 400; margin-top: 0; margin-bottom: 20px; } .woocommerce-profiler-select-control__country { max-width: 404px; margin: 0; } .woocommerce-profiler-select-control__country-spacer { margin: auto auto 12px auto; } .woocommerce-profiler-button-container { margin-top: 32px; } .woocommerce-select-control__control-icon { display: none; } .woocommerce-select-control__control.is-active { .components-base-control__label { display: none; } } .woocommerce-select-control.is-searchable .woocommerce-select-control__control-input { margin: 0; padding: 0; } .woocommerce-select-control.is-searchable .components-base-control__label { left: 13px; } .woocommerce-profiler-geolocation-notice { margin: 0; margin-bottom: 0; padding-right: 0; color: $gray-900; @include breakpoint( '<782px' ) { margin-bottom: 100px; } .components-notice__dismiss > svg { height: 16px; fill: #000; } .components-notice__dismiss { height: 16px; margin-right: 8px; } p { font-weight: 400; font-size: 13px; line-height: 20px; margin: 0; .geolocation-notice-geolocated-country { color: #3858e9; text-decoration: none; } } .woocommerce-profiler-geolocation-notice__list { list-style-type: unset; padding-left: 20px; font-weight: 500; line-height: 20px; } } } }