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:
Timmy Crawford 2018-09-14 09:17:39 -07:00 committed by GitHub
parent 70bb1d28c8
commit 8eb0906287
2 changed files with 24 additions and 23 deletions

View File

@ -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' }
/>
);
}

View File

@ -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;
}
}