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

SPR-908: QS - codeverteilung aside

Browse source
This commit is contained in:
Silke Pisulla 2017-03-23 15:04:00 +01:00
commit eeddad9d3c
2 changed files with 55 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

46
css/area_main-sidebar-content.less
View file

@ -1,14 +1,18 @@
/**
* This file provides the design styles the non-navigational elements in the sidebar
*/
#dokuwiki__aside {
// do not indent the first level of lists
// and use less indention in deeper levels
ul, ol {
ul,
ol {
padding-left: 0;
ul, ol {
ul,
ol {
padding-left: @margin-small;
li {
@ -17,3 +21,41 @@
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1023px */
@media @screen_max-md {
#dokuwiki__aside {
display: none;
}
body.show-mobile-sidebar {
#dokuwiki__aside {
display: block !important;
position: absolute;
left: 1.25rem; //left margin of content container
z-index: 200; // above all
box-shadow: @box-shadow-right-bottom;
min-width: 45%;
max-width: 90%;
height: auto;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: @ini_background;
background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
background: linear-gradient(left, @ini_background, @color-content-bg);
z-index: 0;
}
}
}
}

48
css/area_main-sidebar-nav.less
View file

@ -5,6 +5,7 @@
* @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
@ -27,12 +28,10 @@
// the toggle element
a.nav {
.display-flex();
.align-items();
cursor: pointer;
display: flex;
display: -ms-flexbox;
flex-direction: row;
-ms-flex-direction: row;
align-items: center;
height: @icon-size + @margin-small;
opacity: 1;
border: 1px solid transparent;
@ -57,10 +56,11 @@
width: @menu-margin;
height: @icon-size;
flex-grow: 0;
border-right: 1px solid @ini_border;
border-right: 1px solid @ini_nav_menu_color;
text-align: center;
margin-right: @margin-small;
color: inherit;
transition: @transition border-color;
// simple fake icon
strong {
@ -76,6 +76,7 @@
border: 2px solid @ini_nav_menu_color;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
transition: @transition border-color;
}
// real icon
@ -99,8 +100,10 @@
text-decoration: none;
span.ico {
border-color: inherit;
strong {
border-color: @ini_nav_menu_hover_bg;
border-color: inherit;
}
svg {
@ -124,7 +127,7 @@
}
/* + + + + + + wide page content + + + + +
/* + + + + + + wide page content border-bottom between a.nav (short width) + + + + +
.wide-content {
#dokuwiki__aside {
a.nav {
@ -181,11 +184,6 @@
/* max-width: 1023px */
@media @screen_max-md {
// hide on medium and smaller screens
#dokuwiki__aside {
display: none;
}
// show when toggled
body.show-mobile-sidebar {
.search.main-sidebar {
@ -202,30 +200,6 @@
}
#dokuwiki__aside {
display: block !important;
position: absolute;
left: 1.25rem; //left margin of content container
z-index: 200; // above all
box-shadow: @box-shadow-right-bottom;
min-width: 45%;
max-width: 90%;
height: auto;
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: @ini_background;
background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
background: linear-gradient(left, @ini_background, @color-content-bg);
z-index: 0;
}
> nav {
position: relative;
z-index: 2;