ArticleTemplates/assets/scss/modules/cricket/_stats.scss

// /*doc
// ---
// title: Cricket Scorecard
// name: cricket scorecard
// category: Modules
// ---
// <div class="cricket-stats__innings">
// 	<div class="cricket-stats__header">
// 		<div class="cricket-stats__title">
// 			England 1st innings
// 		</div>
// 		<div class="cricket-stats__total">
// 		Total<br><em>354 all out</em>
// 		</div>
// 	</div>
// 	<div class="cricket-stats__table-wrap">
// 		<table class="cricket-stats__table">
// 			<thead class="cricket-stats__table--phone">
// 				<tr>
// 					<th class="cricket-stats__table--title">England 1st innings</th>
// 					<th class="cricket-stats__table--values">Runs</th>
// 				</tr>
// 			</thead>
// 			<thead class="cricket-stats__table--tablet">
// 				<tr>
// 					<th>Batsman</th>
// 					<th>Taken by</th>
// 					<th class="cricket-stats__table--values">Balls</th>
// 					<th class="cricket-stats__table--values">4s</th>
// 					<th class="cricket-stats__table--values">6s</th>
// 					<th class="cricket-stats__table--values">Runs</th>
// 				</tr>
// 			</thead>
// 			<tbody>
// 				<tr>
// 					<td>
// 						K C Brathwaite
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Root b Broad</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td>12</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						D S Smith
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Jordan b Tredwell</td>
// 					<td class="cricket-stats__table--tablet">15</td>
// 					<td class="cricket-stats__table--tablet">15</td>
// 					<td class="cricket-stats__table--tablet">15</td>
// 					<td>15</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						D M Bravo
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Root b Jordan</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td class="cricket-stats__table--tablet">6</td>
// 					<td class="cricket-stats__table--tablet">5</td>
// 					<td>10</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						M N Samuels
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Tradwell b Anderson</td>
// 					<td class="cricket-stats__table--tablet">25</td>
// 					<td class="cricket-stats__table--tablet">25</td>
// 					<td class="cricket-stats__table--tablet">25</td>
// 					<td>25</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						K C Brathwaite
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Root b Broad</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td>12</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						<span class="cricket-stats__table--in-play">D S Smith</span>
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Jordan b Tredwell</td>
// 					<td class="cricket-stats__table--tablet">15</td>
// 					<td class="cricket-stats__table--tablet">15</td>
// 					<td class="cricket-stats__table--tablet">15</td>
// 					<td>15</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						<span class="cricket-stats__table--duck">D M Bravo</span>
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Root b Jordan</td>
// 					<td class="cricket-stats__table--tablet">12</td>
// 					<td class="cricket-stats__table--tablet">6</td>
// 					<td class="cricket-stats__table--tablet">5</td>
// 					<td>10</td>
// 				</tr>
// 				<tr>
// 					<td>
// 						M N Samuels
// 						<span class="cricket-stats__takenby cricket-stats__table--phone">c Root</span>
// 					</td>
// 					<td class="cricket-stats__table--tablet">c Tradwell b Anderson</td>
// 					<td class="cricket-stats__table--tablet">25</td>
// 					<td class="cricket-stats__table--tablet">25</td>
// 					<td class="cricket-stats__table--tablet">25</td>
// 					<td>25</td>
// 				</tr>
// 			</tbody>
// 			<tfoot class="cricket-stats__table--phone">
// 				<tr>
// 					<td class="cricket-stats__table--strong">Total</td>
// 					<td class="cricket-stats__table--strong">367-8</td>
// 				</tr>
// 			</tfoot>
// 		</table>
// 	</div>
// </div>
// */

.cricket-stats__innings {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    background: color(brightness-100);
    padding-bottom: base-px(1);
    margin-bottom: base-px(1);
    border: 1px solid color(tone-sandy-light);
    border-bottom: 2px solid color(tone-sandy-light);
    border-top: 1px solid color(tone-news-accent);
}

.cricket-stats__wrap {
    color: color(brightness-7);
    @include mq($to: col2) {
        margin: 0 base-px(1);
    }
}

.cricket-stats__side {
    border-bottom: 1px solid color(tone-sandy-light);
    margin-bottom: 24px;
    &:last-child {
        border-bottom: 0;
    }
}

.cricket-stats__header {
    display: table-cell;
    vertical-align: top;
    width: 25%;
    box-sizing: border-box;
    padding: base-px(.5) 0 0 base-px(1);
    @include mq($to: col2) {
        display: none;
    }
}

.cricket-stats__title {
    @include meta;
    font-weight: bold;
    line-height: 1;
}

.cricket-stats__total {
    font: 200 2.7rem/1.1 $egyptian-display;
    margin-top: 20px;
    em {
        color: color(tone-news-accent);
        font-style: normal;
        font-size: 2.5rem;
    }
}

.cricket-stats__table-wrap {
    display: table-cell;
    vertical-align: top;
}

.cricket-stats__takenby {
    display: block;
    color: color(brightness-60);
    padding: base-px(.25) 0 base-px(.5);
}

.cricket-stats__table {
    @include meta;
    width: 100%;
    text-align: left;
    font-family: $guardian-sans;
    @include mq($to: col2) {
        &--tablet {
            display: none;
        }
    }
    @include mq($from: col2) {
        &--phone {
            display: none;
        }
    }
    &--values {
        @include mq($to: col2) {
            width: 20%;
        }
        @include mq($from: col2) {
            width: 15%;
        }
    }
    th {
        color: color(brightness-60);
    }
    th.cricket-stats__table--title,
    td.cricket-stats__table--strong {
        font-weight: bold;
        color: color(brightness-0);
    }
    &--title {
        font-family: $egyptian-text;
    }
    th,
    td {
        vertical-align: top;
        padding: base-px(.5) base-px(.5) 0;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        @include mq($to: col2) {
            height: 3.7rem;
        }
        @include mq($from: col2) {
            height: 3.9rem;
        }
    }
    tr {
        border-bottom: 1px solid color(tone-sandy-light);
    }
    tfoot tr {
        border-bottom: 0;
        border-top: 1px solid color(tone-sandy-light);
    }
    tbody tr:last-child {
        border-bottom: 0;
    }
}

.cricket-stats__table--in-play {
    font-weight: bold;
}

.cricket-stats__table--in-play,
.cricket-stats__table--duck {
    display: block;
    position: relative;
    padding-left: 22px;
    height: 22px;
    &::before {
        content: '';
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
        height: 18px;
        width: 18px;
        background-image: url(../img/cricket-dismissal.png);
        background-repeat: no-repeat;
        background-size: auto 40px;
    }
    & + .cricket-stats__takenby {
        margin-top: -7px;
    }
}

.cricket-stats__table--duck::before {
    background-position: -20px 0;
}