Update chart header layout according to design (https://github.com/woocommerce/woocommerce-admin/pull/476)

* Update chart header layout according to design

* Add RTL support
This commit is contained in:
Albert Juhé Lluveras 2018-09-26 14:17:45 +02:00 committed by GitHub
parent 80449c6c57
commit 3e3dbad408
1 changed files with 32 additions and 4 deletions

View File

@ -19,8 +19,7 @@
min-height: 50px;
border-bottom: 1px solid $core-grey-light-700;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
width: 100%;
@ -196,14 +195,43 @@
}
.woocommerce-chart__interval-select {
margin: 0;
align-items: start;
border-right: 1px solid $core-grey-light-700;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 0 0 auto;
min-height: 50px;
padding: 0 $gap;
.components-select-control__input {
.rtl & {
margin: 0 auto 0 0;
border-right: 0;
border-left: 1px solid $core-grey-light-700;
@include breakpoint( '<782px' ) {
border-left: 0;
}
}
@include breakpoint( '<782px' ) {
border-right: 0;
min-height: 0;
order: 1;
width: 100%;
}
#wpbody & .components-select-control__input {
@include font-size( 13 );
border: 0;
box-shadow: none;
}
}
.woocommerce-chart__types {
padding: 0 8px;
}
.woocommerce-chart__container {
position: relative;
width: 100%;