133 lines
3.3 KiB
Sass
133 lines
3.3 KiB
Sass
|
|
.navbar
|
|
background-color: $color-bright
|
|
box-sizing: border-box
|
|
padding: 10px 0
|
|
margin-bottom: 50px
|
|
border-bottom: $color-light 0.5px solid
|
|
|
|
& &__wrapper
|
|
display: flex
|
|
justify-content: space-between
|
|
align-items: center
|
|
position: relative
|
|
|
|
& &__logo
|
|
flex-basis: 100px
|
|
|
|
& &__logo-link
|
|
display: inline-block
|
|
|
|
& &__link-list
|
|
margin: 0
|
|
display: flex
|
|
justify-content: space-around
|
|
|
|
& &__link
|
|
margin: 9px
|
|
color: $color-secondary
|
|
|
|
&:active,
|
|
&:hover,
|
|
&:hover:visited
|
|
color: $color-primary
|
|
|
|
&:visited
|
|
color: $color-secondary
|
|
|
|
.current
|
|
color: $color-primary
|
|
font-weight: bold
|
|
|
|
& &__search-box
|
|
margin: 0 12% 0 15px
|
|
display: inline-flex
|
|
flex: 1
|
|
$widget-height: 32px
|
|
& > input[type="search"]
|
|
border-top-right-radius: 0
|
|
border-bottom-right-radius: 0
|
|
margin: 0
|
|
height: $widget-height
|
|
background-color: white !important
|
|
width: 100%
|
|
|
|
& .navbar__search-dropdown
|
|
margin: 0
|
|
margin-left: -1px
|
|
padding: 0
|
|
padding-left: 10px
|
|
color: $color-secondary
|
|
appearance: auto
|
|
background-color: white
|
|
height: $widget-height
|
|
width: 80px
|
|
border-top-left-radius: 0
|
|
border-bottom-left-radius: 0
|
|
|
|
& &__dropdown-btn
|
|
display: none
|
|
padding: 0
|
|
margin: 0
|
|
border: none
|
|
|
|
background-color: transparent
|
|
color: $color-primary
|
|
&:focus,
|
|
&:hover
|
|
background-color: transparent
|
|
color: $color-secondary
|
|
|
|
// Small devices (landscape phones, 576px and up)
|
|
@media (max-width: $small-devices)
|
|
.navbar
|
|
padding: 2px 0
|
|
& &__wrapper
|
|
display: block
|
|
& &__logo-img
|
|
width: 72px
|
|
margin-right: 10px
|
|
position: relative
|
|
top: 7px
|
|
|
|
// dropdown
|
|
& &__link-list
|
|
// display: block
|
|
margin-top: 7px
|
|
max-height: 0
|
|
transition: max-height 0.6s ease-out
|
|
overflow: hidden;
|
|
& &__dropdown-btn
|
|
display: block
|
|
position: absolute
|
|
right: 5px
|
|
top: 3px
|
|
|
|
transform: scale(0.7)
|
|
&:hover + .navbar__link-list
|
|
max-height: 500px
|
|
transition: max-height 0.6s ease-in
|
|
|
|
& &__search-box
|
|
margin: 0
|
|
width: 46vw
|
|
$widget-height: 26px
|
|
& > input[type="search"]
|
|
height: $widget-height
|
|
padding: 4px 6px
|
|
width: 32vw
|
|
& .navbar__search-dropdown
|
|
cursor: pointer
|
|
height: $widget-height
|
|
width: 80px
|
|
padding-left: 5px
|
|
// Medium devices (tablets, 768px and up)
|
|
@media (max-width: $medium-devices)
|
|
pass
|
|
// Large devices (desktops, 992px and up)
|
|
@media (max-width: $large-devices)
|
|
.navbar
|
|
margin-bottom: 20px
|
|
// Extra large devices (large desktops, 1200px and up)
|
|
@media (max-width: $x-large-devices)
|
|
pass
|