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

Fix pagination alignment/451 (https://github.com/woocommerce/woocommerce-admin/pull/541) 

* Fix pagination alignment centering and wrap on mobile

* Match input and button heights for pagination
This commit is contained in:
Joshua T Flowers 2018-10-17 11:42:53 -04:00 committed by GitHub
parent 85e6aad4a3
commit 206e0b5b7e
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
plugins/woocommerce-admin/client/components/pagination/style.scss
View File

@ -7,6 +7,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@include breakpoint( '<782px' ) {
flex-direction: column;
}
input { input {
border-radius: 4px; border-radius: 4px;
} }
@ -27,6 +31,9 @@
.components-button:not(:disabled):not([aria-disabled='true']) { .components-button:not(:disabled):not([aria-disabled='true']) {
color: $black; color: $black;
height: 30px;
width: 32px;
justify-content: center;
} }
.components-icon-button:not(:disabled):not([aria-disabled='true']):hover { .components-icon-button:not(:disabled):not([aria-disabled='true']):hover {
@ -48,17 +55,27 @@
} }
.woocommerce-pagination__page-picker { .woocommerce-pagination__page-picker {
margin-left: $spacing / 2; margin-left: $spacing;
}
.woocommerce-pagination__page-picker-input { @include breakpoint( '<782px' ) {
margin-left: $spacing / 2; margin-top: $gap;
width: 60px; margin-left: 0;
}
.woocommerce-pagination__page-picker-input {
margin-left: $spacing / 2;
width: 60px;
height: 34px;
box-shadow: none;
}
} }
.woocommerce-pagination__per-page-picker { .woocommerce-pagination__per-page-picker {
margin-left: $spacing / 2; margin-left: $spacing;
@include breakpoint( '<782px' ) {
margin-top: $gap;
margin-left: 0;
}
.components-base-control { .components-base-control {
margin-bottom: 0; margin-bottom: 0;
} }
@ -66,10 +83,13 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
margin-bottom: 0;
} }
.components-select-control__input { .components-select-control__input {
width: 60px; width: 60px;
height: 34px;
box-shadow: none;
} }
.components-base-control__label { .components-base-control__label {