Task List: Cleanup styles (https://github.com/woocommerce/woocommerce-admin/pull/4627)
This commit is contained in:
parent
5529156480
commit
c938b66ee7
|
@ -60,6 +60,7 @@
|
||||||
grid-template-columns: auto 24px;
|
grid-template-columns: auto 24px;
|
||||||
|
|
||||||
// IE doesn't support `align-items` on grid container
|
// IE doesn't support `align-items` on grid container
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -157,7 +157,7 @@ function getLinkTypeAndHref( item ) {
|
||||||
function getListItems( props ) {
|
function getListItems( props ) {
|
||||||
return getItems( props ).map( ( item ) => {
|
return getItems( props ).map( ( item ) => {
|
||||||
return {
|
return {
|
||||||
title: item.title,
|
title: <Text as="div" variant="button">{ item.title }</Text>,
|
||||||
before: <Icon icon={ item.icon } />,
|
before: <Icon icon={ item.icon } />,
|
||||||
after: <Icon icon={ chevronRight } />,
|
after: <Icon icon={ chevronRight } />,
|
||||||
...getLinkTypeAndHref( item ),
|
...getLinkTypeAndHref( item ),
|
||||||
|
|
|
@ -313,6 +313,10 @@ class TaskDashboard extends Component {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
task.title = (
|
||||||
|
<Text as="div" variant={ task.completed ? 'body.small' : 'button' }>{ task.title }</Text>
|
||||||
|
);
|
||||||
|
|
||||||
if ( ! task.completed ) {
|
if ( ! task.completed ) {
|
||||||
task.after = task.time ? (
|
task.after = task.time ? (
|
||||||
<span className="woocommerce-task-estimated-time">
|
<span className="woocommerce-task-estimated-time">
|
||||||
|
|
|
@ -15,6 +15,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.woocommerce-list__item.is-complete {
|
||||||
|
.woocommerce-list__item-title {
|
||||||
|
color: $medium-gray-text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.woocommerce-list__item-before .woocommerce-task__icon {
|
.woocommerce-list__item-before .woocommerce-task__icon {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
@ -34,6 +40,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.woocommerce-task-estimated-time {
|
||||||
|
color: $medium-gray-text;
|
||||||
|
}
|
||||||
|
|
||||||
.woocommerce-card.is-narrow {
|
.woocommerce-card.is-narrow {
|
||||||
max-width: 680px;
|
max-width: 680px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
|
@ -149,7 +149,10 @@ List.propTypes = {
|
||||||
/**
|
/**
|
||||||
* Title displayed for the list item.
|
* Title displayed for the list item.
|
||||||
*/
|
*/
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.oneOfType( [
|
||||||
|
PropTypes.string,
|
||||||
|
PropTypes.node,
|
||||||
|
] ),
|
||||||
} )
|
} )
|
||||||
).isRequired,
|
).isRequired,
|
||||||
};
|
};
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: $gap;
|
padding: $gap $gap-large;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white;
|
box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white;
|
||||||
|
@ -25,9 +25,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.woocommerce-list__item-title {
|
.woocommerce-list__item-title {
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
color: $studio-gray-90;
|
color: $studio-gray-90;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue