From e35789fd1e5bd74a505e5f40b9fe78be00297174 Mon Sep 17 00:00:00 2001 From: Andreas Gohr <gohr@cosmocode.de> Date: Wed, 22 Feb 2017 15:51:32 +0100 Subject: [PATCH] styled the menu button --- css/area_header.less | 42 +++++++++++++++++++++++++++++++++++++++ css/base_structure.less | 2 ++ img/menu.svg | 1 + tpl/main-sidebar-logo.php | 17 ++++++++++------ 4 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 img/menu.svg diff --git a/css/area_header.less b/css/area_header.less index cec19b3..d2342fd 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -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; + } + } + + } + +} diff --git a/css/base_structure.less b/css/base_structure.less index 6ff66bc..b7bcae2 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -153,6 +153,8 @@ } } } + + } .showSidebar { diff --git a/img/menu.svg b/img/menu.svg new file mode 100644 index 0000000..db5d4df --- /dev/null +++ b/img/menu.svg @@ -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> \ No newline at end of file diff --git a/tpl/main-sidebar-logo.php b/tpl/main-sidebar-logo.php index ffdb206..6987875 100755 --- a/tpl/main-sidebar-logo.php +++ b/tpl/main-sidebar-logo.php @@ -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>';