Пишем наш код HTML:
Пишем наш стиль:
Смотрим наш результат:
HTML:
<div class="container">
<div class="source"><a target="blank" href="https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern"><span>inspered from </span>Aurélien Salomon</a></div>
<div class="phone">
<div class="phone-footer">
<div class="nav">
<div class="nav-item">
<label for="Home"></label>
<input type="radio" name="nav" value="Home" id="Home" checked="checked"/><span>Home</span>
</div>
<div class="nav-item">
<label for="Likes"></label>
<input type="radio" name="nav" value="Likes" id="Likes"/><span>Likes</span>
</div>
<div class="nav-item">
<label for="Search"></label>
<input type="radio" name="nav" value="Search" id="Search"/><span>Search</span>
</div>
<div class="nav-item">
<label for="Profile"></label>
<input type="radio" name="nav" value="Profile" id="Profile"/><span>Profile</span>
</div>
</div>
</div>
</div>
</div>
Sass:
// variables
$body-bg-color: #414361
$phone-bg-color: #f3f3f3
$phone-footer-bg-color: #fff
$item-colors: (1: #5b37b7, 2: #b73892, 3: #eda600, 4: #1194aa)
// base
html, body
height: 100%
font-family: monospace
margin: 0
padding: 0
// grid
.container
width: 100%
height: 100%
display: flex
justify-content: center
align-items: center
// source
.source
position: fixed
right: 2rem
bottom: 2rem
a
color: #fff
text-decoration: none
span
opacity: .32
// phone
.phone
display: flex
width: 25em
height: 25em
background-color: $phone-bg-color
border-radius: 32px
overflow: hidden
// phone footer
.phone-footer
display: flex
justify-content: center
align-items: center
width: 100%
height: 6em
padding-left: 2em
padding-right: 2em
background-color: $phone-footer-bg-color
margin-top: auto
// nav
.nav
display: flex
width: 100%
justify-content: space-between
&-item
position: relative
display: flex
padding: 8px
border-radius: 16px
@each $index, $color in $item-colors
&:nth-child(#{$index})
background-color: lighten($color, 46%)
label
background-color: $color
span
color: $color
&:before
background-color: $color
*
cursor: pointer
label
position: relative
display: inline-block
width: 1em
height: 1em
background-color: inherit
border-radius: 50%
&:before
content: ""
position: absolute
top: -100%
left: -100%
width: 300%
height: 300%
background-color: transparent
span
font-size: .875em
margin-left: 0
max-width: 0
overflow: hidden
transition-property: max-width, margin-left
transition-duration: .32s
transition-timing-function: ease
&:before
content: ""
opacity: 0
position: fixed
z-index: -1
top: 50%
margin-top: -100rem
left: 50%
margin-left: -100rem
width: 200rem
height: 200rem
transform-origin: center
transform: scale(.1)
border-radius: 50%
transition-property: opacity, transform
transition-duration: .32s
transition-timing-function: ease
input
position: absolute
top: 0
left: 0
visibility: hidden
&:checked + span
max-width: 100vw
margin-left: 4px
&:before
opacity: 1
transform: scale(1)