woocommerce/plugins/woocommerce-admin/client/two-column-tasks/style.scss

347 lines
6.0 KiB
SCSS
Raw Normal View History

.woocommerce-homescreen .woocommerce-task-dashboard__container:empty {
margin-bottom: 0;
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
.woocommerce-task-dashboard__container {
.woocommerce-homescreen-card {
max-width: none;
width: 100%;
}
.wooocommerce-task-card__header-container {
display: flex;
position: relative;
border-bottom: 1px solid $studio-gray-5;
}
.wooocommerce-task-card__header {
width: 100%;
flex: 1;
}
2022-04-06 17:01:26 +00:00
.woocommerce-ellipsis-menu {
position: absolute;
2022-04-06 17:01:26 +00:00
top: $gap;
right: $gap-large;
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
.woocommerce-task-card.is-loading {
.woocommerce-card__body {
border-top: 1px solid $studio-gray-5;
}
.components-card__header {
background: #fff;
height: 130px;
display: block;
.is-placeholder {
margin: 20px;
width: 100%;
height: 90px;
}
}
.wooocommerce-task-card__header {
align-self: inherit;
}
.is-placeholder {
@include placeholder();
display: inline-block;
height: 16px;
}
.woocommerce-card__title {
.is-placeholder {
width: 70%;
height: 28px;
}
}
.woocommerce-task-list__item-before {
.is-placeholder {
height: 36px;
width: 36px;
border-radius: 50%;
}
}
.woocommerce-task-list__item-text {
.is-placeholder {
width: 80%;
}
}
}
}
.woocommerce-task-dashboard__container .woocommerce-task-card.completed {
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
display: block;
.components-card__header {
display: block;
}
h2 {
margin-top: $gap-large;
margin-bottom: $gap-small;
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
.wooocommerce-task-card__header {
display: block;
text-align: center;
}
button.is-secondary {
margin-right: $gap-small;
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
}
.two-columns .woocommerce-task-dashboard__container.two-column-experiment {
.svg-background {
top: 15%;
}
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
.woocommerce-task-dashboard__container.two-column-experiment {
max-width: 1032px;
display: flex;
flex-direction: row;
margin: 0 auto;
justify-content: space-between;
&.woocommerce-task-list__setup_experiment_2 {
margin-bottom: $gap;
}
2022-04-20 13:12:08 +00:00
ul li.complete .woocommerce-task-list__item-title {
font-weight: 600;
color: $gray-600;
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
// Single column mode
@mixin single-column {
ul {
display: block;
li {
display: grid;
grid-template-columns: 48px auto 48px;
border-right: none;
border-bottom: 1px solid #e0e0e0;
}
li.is-active {
box-shadow: inset 5px 0 0 0 var(--wp-admin-theme-color);
transition: box-shadow 0.1s linear;
}
}
.woocommerce-task-list__item-text {
display: block;
padding: 0;
margin-top: 0;
}
.woocommerce-task-header__contents {
@include breakpoint( '<782px') {
max-width: 380px;
}
@include breakpoint('<600px') {
max-width: 100%;
}
max-width: 65%;
}
.svg-background {
right: 6%;
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
&:not(.two-columns) {
@include single-column;
}
2022-04-06 17:01:26 +00:00
&.two-columns .svg-background {
top: 50%;
bottom: 50%;
margin-top: auto;
margin-bottom: auto;
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
ul {
display: flex;
li {
display: block;
width: 100%;
border-right: 1px solid #e0e0e0;
border-top: none;
padding: $gap $gap-large;
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
li:last-child {
border-right: none;
}
li.is-active {
box-shadow: inset 0 -4px 0 0 var(--wp-admin-theme-color);
transition: box-shadow 0.1s linear;
}
li.is-active::after {
background-color: var(--wp-admin-theme-color);
opacity: 0.1;
content: '';
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
}
2022-04-20 13:12:08 +00:00
.woocommerce-task-list__item:not(.complete) .woocommerce-task__icon {
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
border: 1px solid var(--wp-admin-theme-color);
background: transparent;
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
2022-04-20 13:12:08 +00:00
.woocommerce-task-list__item.complete:not(.complete) .woocommerce-task__icon {
border: none;
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
.woocommerce-task-list__item-before {
display: block;
padding: 0;
}
.woocommerce-task-list__item-text {
display: block;
padding: 0;
margin-top: 10px;
}
.numbered-circle {
justify-content: center;
display: flex;
align-items: center;
height: 100%;
width: 100%;
}
@for $i from 1 through 10 {
2022-04-20 13:12:08 +00:00
.woocommerce-task-list__item:not(.complete).index-#{$i} .woocommerce-task__icon::after {
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
content: '#{$i}';
@extend .numbered-circle;
color: var(--wp-admin-theme-color);
font-weight: bold;
}
}
@include breakpoint( '<782px' ) {
@include single-column;
}
2022-06-01 17:10:20 +00:00
@at-root .woocommerce-setup-panel & .woocommerce-task-header__contents-container {
padding: 16px;
}
.woocommerce-task-header__contents-container {
padding: 20px 24px;
position: relative;
flex: 1;
overflow: hidden;
width: 100%;
}
.svg-background {
@include breakpoint('<600px') {
display: none;
}
@include breakpoint( '<782px') {
right: 0.5%;
width: 40%;
}
position: absolute;
z-index: 0;
right: 6%;
max-width: 25%;
max-height: 150px;
width: auto;
height: auto;
.admin-theme-color {
fill: var(--wp-admin-theme-color);
}
.admin-theme-color-darker-10 {
fill: var(--wp-admin-theme-color-darker-10);
}
.admin-theme-color-darker-20 {
fill: var(--wp-admin-theme-color-darker-20);
}
}
.woocommerce-task-header__contents {
@include breakpoint( '<782px') {
max-width: 380px;
}
max-width: 500px;
p,
span {
color: $gray-600;
}
p:first-of-type {
margin-top: $gap-smallest;
}
// This is required in order to have svg image as background.
position: relative;
z-index: 1;
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
.woocommerce-task-header__timer {
display: flex;
align-items: center;
line-height: 22px;
margin-bottom: 0;
img {
margin-right: 6px;
}
}
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
}
.woocommerce-task-dismiss-modal {
Add summary tasks for the new two-column tasklist experiment (https://github.com/woocommerce/woocommerce-admin/pull/7669) * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Sync changelog from 2.8.0-rc.2 (https://github.com/woocommerce/woocommerce-admin/pull/7783) * Remove changelogs that were picked into 2.8.0-beta.2 * Update changelog for 7690 * Update changelog for 7743 * Update changelog for 7734 * Update changelog for 7763, 7771 * Remove changelog for 7763 from 2.8.0 since it was in 2.7.2 * Update changelog for 7798 * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Add two column version of task list with a new design * Show number in the status circle * Set background for the active task * Remove border top * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Update the circle border color * Fix lint issue * Support single column mode * Add box-shadow transition * Fix max width * Set the first card as the default if all tasks are complete * Adjust font-weight for the complete tasks * Use experiment * Remove unnecessary placeholder * Use two-column placeholder * Use the new task REST API * Remove unused code -- these are no longer used as we are using the new task list REST API * Update logic to use the new fields * Update css to fit the homescreen card * Remove unused var * Show keep & dismiss page when tasks are complete (https://github.com/woocommerce/woocommerce-admin/pull/7684) * Add two column version of task list with a new design * Changes in single column * Task list does not render in the left column if two column task list has been rendered already. * Your store today and activity panel does not render if user is running two column experiment * Prompt a modal when hiding the task list * Add completed compoent * Move completed task to task-list * Implement hide and keep list buttons * Fix keep task list button * Rename hideTaskCard to hideTasks and keepTaskCard to keepTasks * Remove unnecessary feature checking logic * Separate && operator for Activity Header and Panel since one of them can be empty * Add changelog Co-authored-by: Matt Sherman <matt.sherman@automattic.com>
2021-10-20 16:16:22 +00:00
width: 565px;
max-width: 100%;
.components-modal__header {
border-bottom: 1px solid #ddd;
}
.woocommerce-usage-modal__message {
box-sizing: border-box;
border-bottom: 1px solid #ddd;
padding: 0 32px;
display: flex;
flex-direction: row;
justify-content: space-between;
background: #fff;
align-items: center;
height: 60px;
z-index: 10;
position: relative;
position: sticky;
top: 0;
margin: 0 -32px 24px;
font-size: 1.2em;
}
.woocommerce-usage-modal__actions {
display: flex;
justify-content: flex-end;
margin-top: $gap;
button {
margin-left: $gap;
}
}
}