HTML
27
1
<div class="passengers">2
<h1>Select number of passengers</h1>3
<div class="passenger">4
<p class="passenger__label">Adult <span>(age 12 & up)</span></p>5
<div class="passenger__stepper">6
<button type="button" class="stepper stepper__less">-</button>7
<p class="stepper__display">1</p>8
<button type="button" class="stepper stepper__more">+</button>9
</div>10
</div>11
<div class="passenger">12
<p class="passenger__label">Children <span>(age 2-11yrs)</span></p>13
<div class="passenger__stepper">14
<button type="button" class="stepper stepper__less">-</button>15
<p class="stepper__display">1</p>16
<button type="button" class="stepper stepper__more">+</button>17
</div>18
</div>19
<div class="passenger">20
<p class="passenger__label">Infant <span>(age 1-23mths)</span></p>21
<div class="passenger__stepper">22
<button type="button" class="stepper stepper__less">-</button>23
<p class="stepper__display">1</p>24
<button type="button" class="stepper stepper__more">+</button>25
</div>26
</div>27
</div>CSS
140
1
html {2
box-sizing: border-box;3
}4
5
*,6
*:before,7
*:after {8
box-sizing: inherit;9
}10
11
body {12
background: #f0f0f0;13
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;14
line-height: 1.5;15
min-width: 21.25em;16
margin: 0;17
}18
19
.passengers {20
padding: 1em;21
margin-left: auto;22
margin-right: auto;23
max-width: 60em;24
}25
26
h1 {27
font-size: 1.5em;28
text-align: center;29
margin-bottom: 1em;30
}31
32
.passenger {33
margin-bottom: 1em;34
padding-right: 1.69492%;35
}36
37
@media screen and (min-width: 31em) {38
.passenger {39
width: 32.20339%;40
float: left;41
margin-right: 1.69492%;42
border-right: 1px solid black;43
}44
.passenger:nth-child(3n) {45
float: right;46
margin-right: 0;47
border-right: 0;48
}49
}50
@media screen and (min-width: 31em) {51
.passenger__label {52
text-align: center;53
margin-bottom: 1em;54
}55
}56
@media screen and (max-width: 30.99em) {57
.passenger__label {58
display: inline-block;59
vertical-align: middle;60
width: calc(100% - 10.25em);61
}62
}63
@media screen and (max-width: 24.5em) {64
.passenger__label span {65
display: block;66
}67
}68
@media screen and (min-width: 31em) and (max-width: 39.99em) {69
.passenger__label span {70
display: block;71
}72
}73
.passenger__stepper {74
position: relative;75
display: inline-block;76
}77
.passenger__stepper > * {78
display: inline-block;79
vertical-align: middle;80
}81
82
@media screen and (min-width: 31em) {83
.passenger__stepper {84
display: block;85
max-width: 14em;86
margin: 0 auto;87
width: 100%;88
}89
.passenger__stepper::after {90
content: '';91
display: block;92
clear: both;93
}94
}95
.stepper {96
border: 0;97
outline: 0;98
cursor: pointer;99
font-size: 1.25em;100
background: black;101
color: white;102
width: 2em;103
height: 2em;104
border-radius: 50%;105
box-shadow: 0.125em 0.125em 0 0 white, 0.125em 0.125em 0 1px black;106
}107
.stepper:active {108
box-shadow: 0 0 0 1px white, 0 0 0 1px black;109
transform: translate(0.125rem, 0.125rem);110
transform: translate(0.125rem, 0.125rem);111
}112
113
.stepper__display {114
font-size: 2em;115
margin: 0 0.5em;116
}117
118
@media screen and (min-width: 31em) {119
.stepper__display {120
font-size: 5em;121
float: left;122
line-height: 1.2;123
margin: 0;124
padding-left: 1rem;125
}126
127
.stepper {128
position: absolute;129
right: 1rem;130
}131
132
.stepper__more {133
top: 0;134
}135
136
.stepper__less {137
bottom: 0;138
}139
}140
JS
1
1