fix: rewards table style on small screens

This commit is contained in:
Sean Yesmunt 2019-01-16 11:16:38 -05:00
parent 3303f02ad3
commit a5f790d1d7
2 changed files with 21 additions and 3 deletions

View file

@ -28,7 +28,7 @@ const RewardListClaimed = (props: Props) => {
<h2 className="card__title">Claimed Rewards</h2>
</header>
<table className="card__content table table--stretch">
<table className="table table--rewards table--stretch">
<thead>
<tr>
<th>{__('Title')}</th>

View file

@ -27,8 +27,8 @@
color: inherit;
}
&:not(:first-of-type) {
padding-right: var(--spacing-vertical-medium);
&:not(:last-of-type) {
padding-right: var(--spacing-vertical-large);
}
.btn:not(.btn--link) {
@ -122,3 +122,21 @@
width: 15%;
}
}
.table--rewards {
td:nth-of-type(1) {
width: 40%;
}
td:nth-of-type(2) {
width: 17.5%;
}
td:nth-of-type(3) {
width: 17.5%;
}
td:nth-of-type(4) {
width: 25%;
}
}