Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix task list style conflict

This commit is contained in:
Fernando Marichal 2022-04-20 10:12:08 -03:00
parent 85324ea2cf
commit 5dbc394784
8 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/js/experimental/src/experimental-list/style.scss
View File

@ -134,7 +134,7 @@ a.woocommerce-experimental-list__item {
fill: $chevron-color;
}
&.is-complete {
&.complete {
.woocommerce-task__icon {
background-color: var(--wp-admin-theme-color);
}

2
packages/js/experimental/src/experimental-list/task-item/index.tsx
View File

@ -130,7 +130,7 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
}, [ expanded ] );
const className = classnames( 'woocommerce-task-list__item', {
'is-complete': completed,
complete: completed,
expanded: isTaskExpanded,
'level-2': level === 2 && ! completed,
'level-1': level === 1 && ! completed,

4
packages/js/experimental/src/experimental-list/task-item/style.scss
View File

@ -121,7 +121,7 @@ $task-alert-yellow: #f0b849;
left: 5px;
}
&.is-complete {
&.complete {
.woocommerce-task__icon {
background-color: var(--wp-admin-theme-color);
}
@ -136,7 +136,7 @@ $task-alert-yellow: #f0b849;
}
}
&:not(.is-complete) {
&:not(.complete) {
.woocommerce-task__icon {
border: 1px solid $gray-100;
background: $white;

2
plugins/woocommerce-admin/client/tasks/tasks.scss
View File

@ -236,7 +236,7 @@
}
.woocommerce-task-list__setup_experiment_1 {
.woocommerce-experimental-list .woocommerce-experimental-list__item.is-complete {
.woocommerce-experimental-list .woocommerce-experimental-list__item.complete {
text-decoration: line-through;
.woocommerce-task-list__item-title {

4
plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss
View File

@ -63,14 +63,14 @@
pointer-events: none;
}
&:not(.is-complete)
&:not(.complete)
.woocommerce-task-list__item-before
.woocommerce-task__icon {
border-color: $gray-300;
}
}
.woocommerce-task-list__item.is-complete .woocommerce-task__icon {
.woocommerce-task-list__item.complete .woocommerce-task__icon {
background-color: $alert-green;
}

3
plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx
View File

@ -220,8 +220,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( {
const className = classnames(
'woocommerce-task-list__item',
{
'is-complete':
task.isComplete,
complete: task.isComplete,
'is-disabled':
task.isDisabled,
}

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

@ -103,7 +103,7 @@
margin: 0 auto;
justify-content: space-between;
ul li.is-complete .woocommerce-task-list__item-title {
ul li.complete .woocommerce-task-list__item-title {
font-weight: 600;
color: $gray-600;
}
@ -178,11 +178,11 @@
height: 100%;
}
}
.woocommerce-task-list__item:not(.is-complete) .woocommerce-task__icon {
.woocommerce-task-list__item:not(.complete) .woocommerce-task__icon {
border: 1px solid var(--wp-admin-theme-color);
background: transparent;
}
.woocommerce-task-list__item.is-complete:not(.complete) .woocommerce-task__icon {
.woocommerce-task-list__item.complete:not(.complete) .woocommerce-task__icon {
border: none;
}
@ -206,7 +206,7 @@
}
@for $i from 1 through 10 {
.woocommerce-task-list__item:not(.is-complete).index-#{$i} .woocommerce-task__icon::after {
.woocommerce-task-list__item:not(.complete).index-#{$i} .woocommerce-task__icon::after {
content: '#{$i}';
@extend .numbered-circle;
color: var(--wp-admin-theme-color);

2
plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx
View File

@ -291,7 +291,7 @@ export const TaskList: React.FC< TaskListProps > = ( {
const className = classnames(
'woocommerce-task-list__item index-' + index,
{
'is-complete': task.isComplete,
complete: task.isComplete,
'is-active': task.id === activeTaskId,
}
);