optimize mobile header
This commit is contained in:
parent
07b55703ef
commit
d1861d023b
3 changed files with 9 additions and 30 deletions
|
@ -8,7 +8,7 @@
|
|||
padding: 0 2.0rem;
|
||||
width: 100%
|
||||
|
||||
.grid
|
||||
.grid
|
||||
@include container
|
||||
|
||||
$main-width: 70%
|
||||
|
@ -18,7 +18,7 @@
|
|||
width: $main-width
|
||||
float: left
|
||||
position: relative
|
||||
|
||||
|
||||
& &__aside
|
||||
width: $aside-width
|
||||
// background-color: $color-bright
|
||||
|
@ -30,11 +30,12 @@
|
|||
justify-content: space-around
|
||||
|
||||
&::after
|
||||
@include clear
|
||||
@include clear
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
.grid
|
||||
padding: 0 0.2rem;
|
||||
& &__aside
|
||||
flex-direction: column !important
|
||||
// Medium devices (tablets, 768px and up)
|
||||
|
@ -58,9 +59,7 @@
|
|||
& &__main--reverse-order
|
||||
transform: scaleY(-1)
|
||||
& &__aside--reverse-order
|
||||
transform: scaleY(-1)
|
||||
transform: scaleY(-1)
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
|
||||
|
||||
|
|
|
@ -85,41 +85,22 @@
|
|||
& &__wrapper
|
||||
display: block
|
||||
& &__logo-img
|
||||
width: 72px
|
||||
max-width: 72px
|
||||
max-height: 26px
|
||||
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
|
||||
width: 80%
|
||||
$widget-height: 26px
|
||||
& > input[type="search"]
|
||||
height: $widget-height
|
||||
padding: 4px 6px
|
||||
width: 32vw
|
||||
& .navbar__search-dropdown
|
||||
cursor: pointer
|
||||
height: $widget-height
|
||||
width: 80px
|
||||
width: 60px
|
||||
padding-left: 5px
|
||||
.dropdown
|
||||
display: inline
|
||||
|
|
|
@ -24,7 +24,6 @@
|
|||
|
||||
</select>
|
||||
</div>
|
||||
<button class="navbar__dropdown-btn">• • •</button>
|
||||
<ul class="navbar__link-list">
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
|
|
Loading…
Add table
Reference in a new issue