.woocommerce-profile-wizard__body { .woocommerce-profile-wizard__container a { color: $studio-pink-50; } .woocommerce-card { margin-top: $gap; h1, h2, h3 { color: $studio-gray-80; } color: $studio-gray-60; text-align: left; button.is-button { display: flex; margin: $gap-smaller auto 0; width: 310px; max-width: 100%; justify-content: center; } .business-competitors .woocommerce-select-control__listbox { max-height: unset; } } .woocommerce-profile-wizard__card-actions { text-align: center; .components-button { margin-top: $gap-small; } } .woocommerce-profile-wizard__header { height: 56px; border-bottom: 1px solid $studio-gray-5; display: flex; align-items: center; justify-content: center; background: $studio-white; } .woocommerce-profile-wizard__header-title, .woocommerce-profile-wizard__header-subtitle { font-weight: 400; text-align: center; } .woocommerce-profile-wizard__header-title { color: $studio-gray-80; font-size: 24px; line-height: 32px; margin-bottom: $gap-smaller; } .woocommerce-profile-wizard__header-subtitle { color: $studio-gray-60; 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; } p, div { font-size: 16px; line-height: 24px; font-weight: 400; } .components-popover__content { white-space: pre; font-size: 16px; > div { padding: 11px 16px; } } .woocommerce-card ~ p { font-size: 12px; color: $gray-600; } .woocommerce-profile-wizard__footer { margin: 34px auto; display: flex; justify-content: center; } .woocommerce-profile-wizard__footer-link { display: flex; text-decoration: none; font-size: 14px; color: var(--wp-admin-theme-color); } } #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; 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; 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-group { margin: #{-$gap} #{-$gap} 0 -#{$gap}; .woocommerce-profile-wizard__checkbox { margin-top: 0; margin-bottom: 0; position: relative; padding: $gap-large $gap; min-height: 56px; .components-base-control { position: relative; } .components-base-control__field { margin: 0; } label.components-checkbox-control__label { color: $studio-gray-80; margin-left: $gap-small; } .components-base-control__help { margin-left: $gap-largest + $gap-smaller; font-style: normal; } .components-base-control__help { color: $studio-gray-60; font-size: 14px; line-height: 20px; margin-top: 3px; margin-bottom: 0; } &:last-of-type { &::after { display: none; } } } .woocommerce-profile-wizard__text { margin: 0 16px 10px; } 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.woocommerce-card { display: inline-block; max-width: 100%; text-align: center; .woocommerce-card__body { padding: $gap-large * 2; } .woocommerce-profile-wizard__header-title { margin-top: $gap-large; margin-bottom: $gap-large; } .woocommerce-profile-wizard__card-actions { margin-top: $gap; display: inline-flex; .components-button { width: auto; &:first-child { margin-right: $gap; } } } .woocommerce-profile-wizard__benefits-install-notice { margin-top: $gap-large; margin-bottom: 0; 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__submit { margin-bottom: $gap-small; } .woocommerce-profile-wizard__tooltip-icon { color: $studio-gray-60; display: flex; align-items: center; margin-left: 8px; cursor: help; } .components-modal__frame.woocommerce-profile-wizard__usage-modal { width: 600px; max-width: 100%; .components-modal__header { border-bottom: 0; margin-bottom: 0; } .woocommerce-profile-wizard__usage-wrapper { flex-grow: 1; display: flex; flex-direction: column; a { color: $studio-gray-60; } button.is-primary { align-self: flex-end; } } } .woocommerce-business-extensions { margin-left: -$gap; margin-right: -$gap; padding: $gap-large $gap; border-top: 1px solid $gray-100; border-bottom: 1px solid $gray-100; display: flex; align-items: center; label { display: flex; color: $gray-900; align-items: center; } .components-checkbox-control__input-container { margin-right: $gap; } .woocommerce-business-extensions__label-subtext { display: block; color: $gray-600; font-size: 14px; } .woocommerce-business-extensions__popover-wrapper { margin-left: auto; } .woocommerce-business-extensions__benefits { padding: 4px; display: grid; grid-template-columns: 1fr; max-width: 592px; font-size: 14px; .woocommerce-business-extensions__benefit { padding: 10px; font-size: 14px; display: inline-flex; i { color: var(--wp-admin-theme-color); margin-right: $gap; } } } }