Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix style of dashboard summary number placeholder (https://github.com/woocommerce/woocommerce-admin/pull/1623) 

* Fix style of dashboard summary number placeholder

* Make store performance block to be a normal <div> instead of a Card

* Fix dashboard summary numbers style

* Simplify code
This commit is contained in:
Albert Juhé Lluveras 2019-02-20 10:20:50 +01:00 committed by GitHub
parent aef11ef586
commit 5e4f14a81d
3 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-admin/client/dashboard/store-performance/index.js
View File

@ -22,7 +22,6 @@ import { formatCurrency } from '@woocommerce/currency';
* Internal dependencies
*/
import {
Card,
EllipsisMenu,
MenuItem,
MenuTitle,
@ -160,7 +159,7 @@ class StorePerformance extends Component {
return (
<Fragment>
<SectionHeader title={ __( 'Store Performance', 'wc-admin' ) } menu={ this.renderMenu() } />
<Card className="woocommerce-dashboard__store-performance">{ this.renderList() }</Card>
<div className="woocommerce-dashboard__store-performance">{ this.renderList() }</div>
</Fragment>
);
}

38
plugins/woocommerce-admin/client/dashboard/store-performance/style.scss
View File

@ -1,18 +1,40 @@
/** @format */
.woocommerce-dashboard__store-performance {
border-bottom: 0;
border-right: 0;
margin-bottom: $gap-large;
.woocommerce-card__header {
border-right: 1px solid $core-grey-light-700;
}
.woocommerce-card__body {
padding: 0;
@include breakpoint( '<782px' ) {
border-width: 0;
}
.woocommerce-summary {
background-color: $core-grey-light-100;
margin: 0;
@include breakpoint( '<782px' ) {
&.is-placeholder {
border-top: 0;
}
&:not(.is-placeholder) {
.woocommerce-summary__item-container:first-child {
.woocommerce-summary__item {
border-top: 1px solid $core-grey-light-700;
}
}
}
}
}
.woocommerce-summary__item {
background-color: $white;
&:hover {
background-color: $core-grey-light-200;
}
&:active {
background-color: $core-grey-light-300;
}
}
}

32
plugins/woocommerce-admin/packages/components/src/summary/style.scss
View File

@ -47,6 +47,10 @@ $inner-border: $core-grey-light-500;
box-shadow: inset -1px -1px 0 $outer-border;
@include breakpoint( '<782px' ) {
& {
border-width: 0;
}
&.is-placeholder {
border-top: 0;
}
@ -178,8 +182,7 @@ $inner-border: $core-grey-light-500;
}
@include breakpoint( '<782px' ) {
.woocommerce-summary__item-container.is-dropdown-button,
.woocommerce-summary__item-container:only-child {
.woocommerce-summary__item-container {
margin-left: -16px;
margin-right: -16px;
width: auto;
@ -203,7 +206,6 @@ $inner-border: $core-grey-light-500;
.woocommerce-summary__item-container {
margin-bottom: 0;
width: 100%;
&:last-of-type .woocommerce-summary__item {
// Make sure the last item always uses the outer-border color.
@ -389,27 +391,3 @@ $inner-border: $core-grey-light-500;
}
}
}
.woocommerce-card {
.woocommerce-summary {
background-color: $core-grey-light-100;
border: none;
}
.woocommerce-summary__item {
background-color: $white;
&:hover {
background-color: $core-grey-light-200;
}
&:active {
background-color: $core-grey-light-300;
}
}
.woocommerce-summary__item.is-selected {
margin-top: 0;
box-shadow: none;
}
}