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

Make SummaryListPlaceholder height match SummaryNumber height (https://github.com/woocommerce/woocommerce-admin/pull/2088) 

* Make SummaryListPlaceholder height match SummaryNumber height

* Add CHANGELOG message

* Fix mobile
This commit is contained in:
Albert Juhé Lluveras 2019-04-22 09:56:54 +02:00 committed by GitHub
parent 68f97d214c
commit 6b43af2035
2 changed files with 38 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-admin/packages/components/CHANGELOG.md
View File

@ -1,3 +1,6 @@
# unreleased
- Tweaks to `<SummaryListPlaceholder>` height in order to better match `<SummaryNumber>`.
# 2.0.0 # 2.0.0
- Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique. - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique.
- Chart component now accepts data with negative values. - Chart component now accepts data with negative values.

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

@ -23,6 +23,12 @@ $inner-border: $core-grey-light-500;
.woocommerce-summary__item-prev-value { .woocommerce-summary__item-prev-value {
display: block; display: block;
} }
&.is-placeholder {
.woocommerce-summary__item-prev-label {
margin-right: calc( 100% - 80px );
}
}
} }
@mixin reset-wrap() { @mixin reset-wrap() {
@ -35,6 +41,12 @@ $inner-border: $core-grey-light-500;
.woocommerce-summary__item-prev-value { .woocommerce-summary__item-prev-value {
display: inline; display: inline;
} }
&.is-placeholder {
.woocommerce-summary__item-prev-label {
margin-right: 0;
}
}
} }
.woocommerce-summary { .woocommerce-summary {
@ -97,7 +109,7 @@ $inner-border: $core-grey-light-500;
max-height: 100%; max-height: 100%;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
overflow-y: scroll; overflow-y: auto;
border: none; border: none;
} }
@ -215,10 +227,10 @@ $inner-border: $core-grey-light-500;
&.is-dropdown-button { &.is-dropdown-button {
padding: 0; padding: 0;
list-style: none; list-style: none;
border-bottom: 1px solid $outer-border;
border-right: 1px solid $outer-border; border-right: 1px solid $outer-border;
.components-button { .components-button {
border-bottom: 1px solid $outer-border;
text-align: left; text-align: left;
display: block; display: block;
} }
@ -233,6 +245,7 @@ $inner-border: $core-grey-light-500;
@include placeholder(); @include placeholder();
display: inline-block; display: inline-block;
height: 16px; height: 16px;
margin-top: 2.2px;
max-width: 110px; max-width: 110px;
width: 70%; width: 70%;
} }
@ -242,19 +255,31 @@ $inner-border: $core-grey-light-500;
} }
.woocommerce-summary__item-value, .woocommerce-summary__item-value,
.woocommerce-summary__item-delta-value,
.woocommerce-summary__item-prev-label,
.woocommerce-summary__item-prev-value { .woocommerce-summary__item-prev-value {
@include placeholder(); @include placeholder();
display: inline-block; display: inline-block;
height: 16px; height: 16px;
max-width: 140px; min-width: auto;
width: 80%; }
.woocommerce-summary__item-value {
margin-top: 2.2px;
max-width: 60px;
} }
.woocommerce-summary__item-delta-value { .woocommerce-summary__item-delta-value {
@include placeholder(); margin-top: 2.2px;
display: inline-block; width: 50px;
height: 16px; }
width: 20px;
.woocommerce-summary__item-prev-label {
width: 80px;
}
.woocommerce-summary__item-prev-value {
width: 40px;
} }
} }
} }
@ -265,6 +290,7 @@ $inner-border: $core-grey-light-500;
background-color: $core-grey-light-100; background-color: $core-grey-light-100;
border-bottom: 1px solid $outer-border; border-bottom: 1px solid $outer-border;
border-right: 1px solid $inner-border; border-right: 1px solid $inner-border;
line-height: 1.4em;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -359,6 +385,7 @@ $inner-border: $core-grey-light-500;
.woocommerce-summary__item-prev-value { .woocommerce-summary__item-prev-value {
@include font-size( 13 ); @include font-size( 13 );
color: $core-grey-dark-500; color: $core-grey-dark-500;
display: inline-block;
} }
.woocommerce-summary__toggle { .woocommerce-summary__toggle {