mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-21 16:27:19 +00:00
Make the menu collapse less aggresively
This commit is contained in:
parent
f19400796e
commit
0d9fb09ff2
@ -14,7 +14,10 @@ body{ -webkit-animation: bugfix infinite 1s; }
|
||||
#toggle, .toggle { display: none; }
|
||||
.menu li { list-style: none; float:left; }
|
||||
|
||||
@media only screen and (max-width: $lap-end){
|
||||
$menu-collapse: 790px;
|
||||
|
||||
// @media only screen and (max-width: $lap-end){
|
||||
@media only screen and (max-width: $menu-collapse){
|
||||
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
|
||||
.menu li { display: block; width: 100%; margin: 0; }
|
||||
.menu li a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
@ -90,7 +93,7 @@ header .grid {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $lap-end){
|
||||
@media only screen and (max-width: $menu-collapse){
|
||||
.menu{
|
||||
background: $white;
|
||||
border-top: 1px solid $navigation-color;
|
||||
@ -111,15 +114,21 @@ header .grid {
|
||||
padding: 15px 15px 15px 25px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.toggle::after {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all 0.5s linear);
|
||||
content: attr(data-open);
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
content: "\f0c9";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
padding: 10px 50px;
|
||||
padding: 10px 15px;
|
||||
background: $navigation-color;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
@ -142,17 +151,3 @@ header .grid {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 479px){
|
||||
.toggle {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 10px;
|
||||
}
|
||||
.toggle::after {
|
||||
padding: 10px 15px;
|
||||
font-family: "FontAwesome";
|
||||
content: "\f0c9";
|
||||
}
|
||||
}
|
@ -1,10 +1,10 @@
|
||||
<div class="grid__item three-tenths lap-four-sixths palm-one-whole ha-title">
|
||||
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
|
||||
<a href="{{ root_url }}/" class="site-title">
|
||||
<img width='40' src='{{ root_url }}/images/favicon-192x192.png'> {{ site.title }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid__item seven-tenths lap-two-sixths palm-one-whole">
|
||||
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
|
||||
<nav>
|
||||
{% include site/navigation.html %}
|
||||
</nav>
|
||||
|
Loading…
x
Reference in New Issue
Block a user