Add loading indicators, error state, and EmptyContent to the revenue report. (#347, woocommerce/woocommerce-admin#348)
* Add loading indiciators for the revenue report.
* Improve accessibility, and fix up some documentation comments.
* Fix top border on mobile
* Add EmptyContent Component and revenue error/empty states. (https://github.com/woocommerce/woocommerce-admin/pull/348)
* Add EmptyContent Component and revenue error/empty states.
* Move relative image handling to ImageAsset, combine secondary and primary action rendering, add some missing isRequired proptypes, add empty error handling.
* Handle PR Feedback: Clean up button css, set a default for illustration, fix deprecation typo, some code cleanup.
2018-09-05 16:45:49 +00:00
|
|
|
.woocommerce-analytics__table-placeholder {
|
|
|
|
.woocommerce-card__body {
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.woocommerce-table__table {
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
tr:last-child {
|
|
|
|
border-bottom-style: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-05-22 08:38:25 +00:00
|
|
|
|
2019-11-21 12:10:37 +00:00
|
|
|
// @todo Once we switch to the Gutenberg `Card` component, we should probably
|
|
|
|
// drop this class and override all cards within the wc-admin scope or make an
|
|
|
|
// exportable card based on the Gutenberg component that houses wc-admin styles.
|
2019-05-22 08:38:25 +00:00
|
|
|
.woocommerce-analytics__card {
|
|
|
|
border-radius: 0;
|
2020-07-17 00:11:42 +00:00
|
|
|
border: 1px solid $gray-400;
|
2019-05-22 08:38:25 +00:00
|
|
|
box-shadow: none;
|
2020-06-22 20:17:17 +00:00
|
|
|
margin-bottom: $gap-large;
|
2019-05-22 08:38:25 +00:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include breakpoint( '<782px' ) {
|
|
|
|
border-left: none;
|
|
|
|
border-right: none;
|
|
|
|
margin-left: -16px;
|
|
|
|
margin-right: -16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
> .woocommerce-card__header {
|
2020-07-17 00:11:42 +00:00
|
|
|
padding: ( $gap - 3 ) $gap;
|
|
|
|
border-bottom: 1px solid $gray-400;
|
2019-05-22 08:38:25 +00:00
|
|
|
border-radius: 0;
|
|
|
|
|
|
|
|
> .woocommerce-card__title-wrapper > .woocommerce-card__title {
|
|
|
|
// EllipsisMenu is 24px, so to match we add 6px padding around the
|
|
|
|
// heading text, which we know is 18px from line-height.
|
|
|
|
padding: 3px 0;
|
|
|
|
@include font-size( 15 );
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|