woocommerce/plugins/woocommerce-admin/client/task-list/task-item.scss

92 lines
1.5 KiB
SCSS

$foreground-color: var(--wp-admin-theme-color);
$task-alert-yellow: #f0b849;
.woocommerce-task-list__item {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: transparent;
}
&.level-1 {
&::before {
background-color: $alert-red;
}
.gridicons-notice-outline {
fill: $alert-red;
}
}
&.level-2 {
&::before {
background-color: $task-alert-yellow;
}
}
.woocommerce-task-list__item-title {
color: $foreground-color;
}
.woocommerce-task-list__item-before {
display: flex;
align-items: center;
padding: $gap 20px $gap $gap-large;
}
.woocommerce-task-list__item-text {
padding: $gap 0;
.woocommerce-pill {
padding: 1px $gap-smaller;
margin-left: $gap-smaller;
}
}
.woocommerce-task-list__item-after {
margin-left: $gap;
margin-right: $gap-large;
display: flex;
align-items: center;
margin-left: auto;
padding: $gap 0;
}
.woocommerce-task-list__item-before .woocommerce-task__icon {
border-radius: 50%;
width: 32px;
height: 32px;
}
.woocommerce-task-list__item-before .woocommerce-task__icon svg {
fill: $white;
position: relative;
top: 4px;
left: 5px;
}
&.complete {
.woocommerce-task__icon {
background-color: var(--wp-admin-theme-color);
}
.woocommerce-task-list__item-title {
color: $gray-700;
}
.woocommerce-task-list__item-content {
display: none;
}
}
.components-tooltip .components-popover__content {
width: 160px;
white-space: normal;
}
}