jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-21 16:27:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the menu collapse less aggresively

Browse Source
This commit is contained in:
Paulus Schoutsen 2014-12-23 23:49:44 -08:00
parent f19400796e
commit 0d9fb09ff2
2 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
sass/oscailte/base/_navigation.scss
View File

@ -14,7 +14,10 @@ body{ -webkit-animation: bugfix infinite 1s; }
#toggle, .toggle { display: none; } #toggle, .toggle { display: none; }
.menu li { list-style: none; float:left; } .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 { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.menu li { display: block; width: 100%; margin: 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; } .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; z-index: 20;
} }
@media only screen and (max-width: $lap-end){ @media only screen and (max-width: $menu-collapse){
.menu{ .menu{
background: $white; background: $white;
border-top: 1px solid $navigation-color; border-top: 1px solid $navigation-color;
@ -111,15 +114,21 @@ header .grid {
padding: 15px 15px 15px 25px; padding: 15px 15px 15px 25px;
} }
.toggle {
position: absolute;
top: 17px;
right: 10px;
}
.toggle::after { .toggle::after {
@include border-radius(2px); @include border-radius(2px);
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(all 0.5s linear); @include transition(all 0.5s linear);
content: attr(data-open); font-family: "FontAwesome";
display: block; content: "\f0c9";
display: inline-block;
width: 100%; width: 100%;
margin: 20px 0; padding: 10px 15px;
padding: 10px 50px;
background: $navigation-color; background: $navigation-color;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
@ -142,17 +151,3 @@ header .grid {
top: 0; 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";
}
}

4
source/_includes/custom/header.html
View File

@ -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"> <a href="{{ root_url }}/" class="site-title">
<img width='40' src='{{ root_url }}/images/favicon-192x192.png'> {{ site.title }} <img width='40' src='{{ root_url }}/images/favicon-192x192.png'> {{ site.title }}
</a> </a>
</div> </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> <nav>
{% include site/navigation.html %} {% include site/navigation.html %}
</nav> </nav>