Chart: Add styling needed to not be wrapped by card. (https://github.com/woocommerce/woocommerce-admin/pull/408)
* Chart: Add styling needed to not be wrapped by card. * Add negative top margin back * Fix placeholder css.
This commit is contained in:
parent
70bb1d28c8
commit
8eb0906287
|
@ -338,18 +338,16 @@ export class RevenueReport extends Component {
|
|||
} );
|
||||
|
||||
return (
|
||||
<Card title="">
|
||||
<Chart
|
||||
data={ chartData }
|
||||
title={ selectedChart.label }
|
||||
interval={ currentInterval }
|
||||
allowedIntervals={ allowedIntervals }
|
||||
tooltipFormat={ formats.tooltipFormat }
|
||||
xFormat={ formats.xFormat }
|
||||
x2Format={ formats.x2Format }
|
||||
dateParser={ '%Y-%m-%dT%H:%M:%S' }
|
||||
/>
|
||||
</Card>
|
||||
<Chart
|
||||
data={ chartData }
|
||||
title={ selectedChart.label }
|
||||
interval={ currentInterval }
|
||||
allowedIntervals={ allowedIntervals }
|
||||
tooltipFormat={ formats.tooltipFormat }
|
||||
xFormat={ formats.xFormat }
|
||||
x2Format={ formats.x2Format }
|
||||
dateParser={ '%Y-%m-%dT%H:%M:%S' }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,15 +1,22 @@
|
|||
/** @format */
|
||||
.woocommerce-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin: -$gap;
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
margin-top: -$gap;
|
||||
margin-bottom: $gap-large;
|
||||
background: white;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
border-top: 0;
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
margin-bottom: $gap-small;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.woocommerce-chart__header {
|
||||
min-height: 50px;
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
border-bottom: 1px solid $core-grey-light-700;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
@ -181,13 +188,9 @@
|
|||
|
||||
&.is-placeholder {
|
||||
@include placeholder();
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: $gap;
|
||||
border: 1px solid $core-grey-light-700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue