css aside prepared

This commit is contained in:
Silke Pisulla 2017-01-04 12:52:57 +01:00
commit 51068a2880
3 changed files with 232 additions and 0 deletions

121
css/area_main-sidebar.less Normal file
View file

@ -0,0 +1,121 @@
/**
* This file provides the design styles for the sidebar (navmain).
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
#dokuwiki__aside.main-sidebar {
/* + + + + + nav main + + + + + */
.nav-main {
> ul {
@icon-size: 2rem;
margin: 0;
padding: 0;
ul {
margin-left: (@icon-size + .5);
}
li {
color: @color-nav;
&:first-of-type {
padding-top: .3rem;
}
}
.li {
color: @color-nav;
a {
color: inherit;
}
}
/* + + + first level + + + */
> li {
list-style-type: none;
border-bottom: solid 1px @color-border;
margin: 0;
padding: 0 0 .3rem 0;
> .li { //background-color: pink;// hier activ !!!
position: relative;
padding: .5rem 0 .5rem (@icon-size + 1);
&::before { background-color: gold;// test
content: '?';
position: absolute;
top: 0;
left: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
height: 100%;
width: @icon-size;
overflow: hidden;
text-align: center;
margin-top: auto;
margin-bottom: auto;
}
&::after {
content: '';
position: absolute;
top: 15%;
bottom: 15%;
width: 1px;
left: (@icon-size + .5);
background-color: @color-border;
transition: @transition background-color;
}
}
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */
@media @screen_min-xlg {
#dokuwiki__aside.main-sidebar {
.nav-main {
.li {
font-size: .88rem;
padding: .1rem 0;
> * {
font-size: .88rem;
}
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */
@media @screen_max-xlg {
#dokuwiki__aside.main-sidebar {
.nav-main {
.li {
font-size: 1rem;
padding: .15rem .25rem;
> * {
font-size: 1rem;
}
}
}
}
}

109
css/area_sidetools.less Normal file
View file

@ -0,0 +1,109 @@
/**
* This file provides the design styles for the sitetools (nav).
*
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
#dokuwiki__sitetools.nav-sitetools {
@icon-size: 2rem;
h6 { //background-color: pink;// hier activ !!!
position: relative;
width: auto;
height: auto;
color: @color-nav;
font-size: .88rem;
font-weight: normal;
margin: 0;
padding: .5rem 0 .5rem (@icon-size + 1);
&::before {
background-color: gold;
content: '?';
position: absolute;
top: 0;
left: 0;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
height: 100%;
width: @icon-size;
overflow: hidden;
text-align: center;
margin-top: auto;
margin-bottom: auto;
}
&::after {
content: '';
position: absolute;
top: 15%;
bottom: 15%;
width: 1px;
left: (@icon-size + .5);
background-color: @color-border;
transition: @transition background-color;
}
}
/* + + + linklist + + + */
ul {
padding-left: (@icon-size + .5);
}
li {
color: @color-nav;
a {
color: inherit;
}
&:first-of-type {
padding-top: .3rem;
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */
@media @screen_min-xlg {
#dokuwiki__sitetools.nav-sitetools {
li {
font-size: 100%;
padding-top: .1rem;
padding-bottom: .1rem;
> * {
font-size: .88rem;
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */
@media @screen_max-xlg {
#dokuwiki__sitetools.nav-sitetools {
h6 {
font-size: 1rem;
}
li {
font-size: 1rem;
padding-top: .15rem;
padding-bottom: .15rem;
> * {
font-size: 1rem;
}
}
}
}

View file

@ -69,6 +69,8 @@ css/area_nav-breadcrumb.less = all
css/area_nav-usertools.less = all
css/area_sidebar-search.less = all
css/area_nav-pagetools.less = all
css/area_main-sidebar.less = all
css/area_sidetools.less = all
; _____________ plugin styles _____________