dan/api_docs
1
0
Fork 0
mirror of https://github.com/danbulant/api_docs synced 2026-05-22 21:58:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add background to nav button

Browse source
This commit is contained in:
Robert Lord 2014-06-14 19:41:08 -07:00
parent 3a91faa8e6
commit b5419b1e9c
2 changed files with 15 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
source/layouts/layout.erb
View file

@ -42,8 +42,10 @@ under the License.
<body class="<%= page_classes %>">
<a href="#" id="nav-button">
<%= image_tag('navbar.png') %>
<span>NAV</span>
<span>
NAV
<%= image_tag('navbar.png') %>
</span>
</a>
<div class="tocify-wrapper">
<%= image_tag "logo.png" %>

20
source/stylesheets/screen.css.scss
View file

@ -197,12 +197,20 @@ html, body {
// button to show navigation on mobile devices
#nav-button {
span {
display: block;
$side-pad: $main-padding / 2 - 8px;
padding: $side-pad $side-pad $side-pad;
background-color: rgba($main-bg, 0.7);
@include transform-origin(0, 0);
@include transform(rotate(-90deg) translate(-100%, 0));
border-radius: 0 0 0 5px;
}
padding: 0 1.5em 5em 0; // increase touch size area
display: none;
position: fixed;
top: 0;
left: 0;
$side-pad: $main-padding / 2 - 8px;
padding: $side-pad 1.5em 5em $side-pad; // increase touch area size
z-index: 100;
color: #000;
text-decoration: none;
@ -211,13 +219,7 @@ html, body {
line-height: 16px;
img {
height: 16px;
}
span {
position: absolute;
top: 35px;
left: 1px;
line-height: 1;
@include transform(rotate(-90deg));
vertical-align: bottom;
}
@include transition(left ease-in-out 0.3s);