woocommerce/plugins/woocommerce-admin/client/profile-wizard/style.scss

546 lines
9.5 KiB
SCSS
Raw Normal View History

.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 {
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;
}
}
}
Version/1.0 master merge (https://github.com/woocommerce/woocommerce-admin/pull/3797) * Try: Moving Customers to main Woo Menu (https://github.com/woocommerce/woocommerce-admin/pull/3632) * Only add onboarding settings on wc-admin pages when task list should be shown. (https://github.com/woocommerce/woocommerce-admin/pull/3722) * Use cron for unsnoozing admin notes (https://github.com/woocommerce/woocommerce-admin/pull/3662) * Use wp-cron for admin note snoozing. * Remove "unsnooze" scheduled action. * Use correct version. * Avoid using deprecated method for unscheduling actions. * Onboarding: Fix toggle tracking events (https://github.com/woocommerce/woocommerce-admin/pull/3645) * Fix errant wcadmin prefix on event name * Track the onboarding toggle on the option in case enable_onboarding isn't used * Move toggle actions to separate function * Move onboarding actions * Move onboarding filters * Move help tab updates to add_toggle_actions * Only run onboarding actions when enabled * Onboarding: Add tracks events when profiler steps are completed (https://github.com/woocommerce/woocommerce-admin/pull/3726) * Add tracks for store profiler step completion * Record event when profiler is completed * Ensure continue setup loads the onboarding profiler (https://github.com/woocommerce/woocommerce-admin/pull/3646) * 'All that include' option removed when input field is empty (https://github.com/woocommerce/woocommerce-admin/pull/3700) * 'All that include' option removed when input field is empty Added a control to check that when the input field 'Search by customer name' is empty, the 'All that include' option is not appearing. * Const name improved The constant name hasValues was changed to optionsHaveValues (more descriptive) * Fix select text alignment (https://github.com/woocommerce/woocommerce-admin/pull/3723) * Stock panel indicator - cache and use lookup tables. (https://github.com/woocommerce/woocommerce-admin/pull/3729) * Stock panel indicator - cache and use lookup tables. * Revise query, clear transient on product update. * Fix error, ht Josh. * Checklist: Remove sideloaded images to reduce build size, take 2 (https://github.com/woocommerce/woocommerce-admin/pull/3731) * Remove homepage template images. * Use other-small on all industries, adjust text color. * Remove background dim and opacity set to 0 * Fix/3631 (https://github.com/woocommerce/woocommerce-admin/pull/3730) * Added CBD as an industry type CBD was added as an industry type in API * Industries options modified Modified the industries options. Now we are able to choose if we will use an input or not in the option. * API control changed for industries. API control changed for industries. Now it accepts the data type we need. * Added input in Industries list for the option "Other" Added an input for the option "Other" in the industries list * Added suggested changes in review comments. * Added data preparation for recordEvent * Changed variable to snake_case The variable "industriesWithDetail" was changed to "industries_with_detail" (snake_case) * Onboarding: Create homepage without redirect (https://github.com/woocommerce/woocommerce-admin/pull/3727) * Add link to edit homepage instead of redirect * Add busy state to homepage creation button * Publish homepage on create via API * Update homepage notice to show on first post update * Update homepage creation notice per design * Record event on customize homepage * Set homepage to frontpage on creation * Add deactivation note for feature plugin (https://github.com/woocommerce/woocommerce-admin/pull/3687) * Add version deactivation note * Add the note to deactivate if the version is older than the current WC version * Deactivate wc admin feature plugin on action click * Add notes version hooks * change the Package class namespace to exclude from standalone autoloader * add use statement for FeaturePlugin * add note explaining namespace * use wc-admin-deactivate-plugin note name * Rename file and class to WC_Admin_Notes_Deactivate_Plugin Co-authored-by: Ron Rennick <ron@ronandandrea.com> Co-authored-by: Paul Sealock <psealock@gmail.com> * Add Travis tests on GH for release branch (https://github.com/woocommerce/woocommerce-admin/pull/3751) * Add Travis tests on GH for release branch * fix linter errors * ActivityPanels.php -> use public static functions * Remove free text Search option when no query exists (https://github.com/woocommerce/woocommerce-admin/pull/3755) * Revert changes in woocommerce/woocommerce-admin#3700 * Don't add free text search if no query exists * Add tests for Search without query * Add test for showing free text search option * Fix image sideloading for store industries. (https://github.com/woocommerce/woocommerce-admin/pull/3743) * Fix image sideloading for store industries. Data format changed in https://github.com/woocommerce/woocommerce-admin/pull/3730 * Fix industry image sideload in cases where the count is less than requested. * Be backwards compatible with the old industry data format. * Added event props to identify stores with WCS and Jetpack installed (https://github.com/woocommerce/woocommerce-admin/pull/3750) * Added event props to identify stores with WCS and Jetpack installed Also, added Jeckpack connected status * Improved variable name * Simplified method Simplified method. "intersection" check was removed * Tests errors repeared The method "clear_low_out_of_stock_count_transient" now is static. * OBW: fix sideloading image test error (https://github.com/woocommerce/woocommerce-admin/pull/3762) * Release 0.26.0 changes (https://github.com/woocommerce/woocommerce-admin/pull/3753) * add deactivation hook to Package.php (https://github.com/woocommerce/woocommerce-admin/pull/3770) * Add active version functions (https://github.com/woocommerce/woocommerce-admin/pull/3772) * add active version functions to Package.php Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * 0.26.1 changes (https://github.com/woocommerce/woocommerce-admin/pull/3773) * Customers Report: fix missing report param in search (https://github.com/woocommerce/woocommerce-admin/pull/3778) * Product titles include encoded entities (https://github.com/woocommerce/woocommerce-admin/pull/3765) * Stripped HTML from product titles and decoded before displaying them Stripped html from product titles and entities are decoded before displaying them * Stripped HTML from product titles and decoded in Stock report Stripped html from product titles and entities are decoded before displaying them. Now in Stock report * Added support for HTML tags and encoded entities on product titles Added support for HTML tags and encoded entities on filtered product list, dropdown menus and tag names. Also, strip_tags() function was replaced with wp_strip_all_tags() instead. * strip_tags() function was replaced with wp_strip_all_tags() instead. * Added control for a variable Added control for "item->data" before applying wp_strip_all_tags method. * pre-commit changes * Test text corrected * fix linting issues * fix mis-merged changes * Update jsdoc Co-Authored-By: Paul Sealock <psealock@gmail.com> Co-authored-by: Timmy Crawford <timmyc@users.noreply.github.com> Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> Co-authored-by: Fernando <ultimoround@gmail.com> Co-authored-by: edmundcwm <edmundcwm@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-03-02 22:22:32 +00:00
.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 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;
}
}
}
}