EH22/dokuwiki-template-sprintdoc-modified
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

some style adjustments for the sidebar

Browse source 
There is no need to differentiate between site tools and the navigation
anymore. Instead now it's differentiated between the navigation tools
and the displayed content.
This commit is contained in:
Andreas Gohr 2017-02-16 15:10:50 +01:00
commit 83e6372c7d
5 changed files with 20 additions and 347 deletions
Download patch file Download diff file Expand all files Collapse all files

144
css/area_main-sidebar-nav.less Executable file
View file

@ -0,0 +1,144 @@
/**
* This file provides the design styles the navigational elements in the sidebar
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
* @author Andreas Gohr <gohr@cosmocode.de>
*/
#dokuwiki__aside {
@icon-size: @font-size-big;
@menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
margin-left: @menu-margin; // moves *all* sidebar content to the right
// the toggle element
h6 {
cursor: pointer;
height: @line-height-big;
line-height: @line-height-big;
font-weight: normal;
margin-left: (@menu-margin * -1); // moves the toggles back to the left
color: @color-nav;
border: 1px solid transparent;
border-radius: @fix_border-radius;
// margin-bottom: -.3rem; FIXME
// padding: .7em 0 .7em (@margin-big + 1); FIXME WTF?
transition: @transition color, @transition background-color, @transition border-color;
span {
display: inline-block;
width: @menu-margin;
height: @line-height-big;
border-right: 1px solid @color-border;
text-align: center;
margin-right: @margin-small;
color: @color-nav;
// simple fake icon
strong {
display: inline-block;
font-size: @icon-size * 0.5;
width: @icon-size * 0.9;
height: @icon-size * 0.9;
line-height: @icon-size * 0.9;
margin: @icon-size * 0.05;
vertical-align: baseline;
text-align: center;
color: @color-nav;
border: 2px solid @color-nav;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
}
// real icon
svg {
width: @icon-size;
height: @icon-size;
path {
fill: @color-nav;
}
}
}
&:hover,
&:focus,
&:active {
background-color: @button_color;
border-color: @button_background;
color: @button_background;
text-decoration: none;
span strong {
color: @button_background;
border-color: @button_background;
}
span svg path {
fill: @button_background;
}
}
}
// the panel (hidden by default)
div.nav-panel {
display: none;
}
}
// FIXME check if the stuff below is still relevant
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */
@media @screen_min-xlg {
#dokuwiki__aside.main-sidebar {
.nav-main {
.li {
font-size: @font-size-default;
padding: .1em 0;
* {
font-size: inherit;
font-weight: inherit;
}
}
> ul > li > .li {
font-size: @font-size-default;
* {
font-size: inherit;
}
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */
@media @screen_max-xlg {
#dokuwiki__aside.main-sidebar {
.nav-main {
.li {
font-size: @font-size-default;
padding: .15em 0 .15em .25rem;
* {
font-size: inherit;
font-weight: inherit;
}
}
> ul > li > .li {
font-size: @font-size-default;
> * {
font-size: inherit;
}
}
}
}
}