styled the menu button

This commit is contained in:
Andreas Gohr 2017-02-22 15:51:32 +01:00
parent 4055de39fa
commit e35789fd1e
4 changed files with 56 additions and 6 deletions

View file

@ -3,3 +3,45 @@
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
#dokuwiki__header {
.menu-togglelink {
border: 1px solid @color-border;
border-radius: @border-radius;
text-align: center;
margin: @very-small-spacing -(@very-small-spacing) 0 0;
font-size: @font-size-small;
min-height: 2em;
min-width: 2em;
box-sizing: border-box;
line-height: 2em;
cursor: pointer;
background-color: #fff;
text-decoration: none;
transition: @transition color, @transition background-color, @transition border-color;
svg {
height: @font-size-default + (@font-scale-factor * 4);
width: @font-size-default + (@font-scale-factor * 4);
vertical-align: middle;
path {
fill: @color-nav
}
}
&:hover,
&:active,
&:focus {
background-color: @button_color;
border-color: @button_background;
svg path {
fill: @button_background;
}
}
}
}

View file

@ -153,6 +153,8 @@
}
}
}
}
.showSidebar {

1
img/menu.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>

After

(image error) Size: 143 B

View file

@ -1,9 +1,14 @@
<?php
if (!defined('DOKU_INC')) die();
if(!defined('DOKU_INC')) die();
echo '<div class="menu-togglelink mobile-only"><a href=\'#\'>MOB</a></div>';
echo '<div class="logo">';
echo '<div class="menu-togglelink mobile-only">';
echo '<a href="#">';
echo inlineSVG(__DIR__ . '/../img/menu.svg');
echo '<span class="sr-out">'.tpl_getLang('a11y_sidebartoggle').'</span>';
echo '</a>';
echo '</div>';
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
echo "<hr class=\"structure\" /></div>";
echo '<div class="logo">';
\dokuwiki\template\sprintdoc\Template::getInstance()->mainLogo();
echo '<hr class="structure" />';
echo '</div>';