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

nav-main new hover for icons

Browse source
This commit is contained in:
Silke Pisulla 2017-01-10 14:46:56 +01:00
commit 52928b7b4e
3 changed files with 941 additions and 905 deletions
Download patch file Download diff file Expand all files Collapse all files

46
css/area_main-sidebar.less
View file

@ -8,14 +8,13 @@
#dokuwiki__aside.main-sidebar {
counter-reset: nav-counter;
/* + + + + + nav main + + + + + */
.nav-main {
padding-bottom: 1.8rem;
> ul {
@icon-size: 2rem;
margin: 0;
margin: 0 0 1.8rem;
padding: 0;
ul {
@ -80,18 +79,16 @@
}
&::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(nav-counter);
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;
width: 2.5rem;
overflow: hidden;
color: @color-nav;
text-align: center;
@ -128,24 +125,23 @@
transition: @transition color, @transition background-color, @transition border-color;
&::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(nav-counter);
position: absolute;
top: -.1em;
top: 1px;
bottom: 1px;
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;
width: 2.5rem;
overflow: hidden;
color: @color-nav;
text-align: center;
margin-top: auto;
margin-bottom: auto;
transition: @transition color;
transition: @transition color, @transition background-color;
}
&::after {
@ -184,7 +180,11 @@
color: @button_color;
&::before {
color: @button_color;
background-color: @color-site-bg;
}
&::after {
display: none;
}
&:hover,
@ -196,8 +196,14 @@
text-decoration: none;
&::before {
background-color: @button_color;
color: @button_background;
}
&::after {
display: block;
background-color: @button_background;
}
}
}

39
css/area_sidetools.less
View file

@ -79,18 +79,16 @@
/* + + + icon + + + */
&::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(bar-counter, lower-alpha);
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;
width: 2.5rem;
overflow: hidden;
text-align: center;
margin-top: auto;
@ -136,18 +134,17 @@
transition: @transition color, @transition background-color, @transition border-color;
&::before {
.display-flex();
.flex-direction();
.justify-content();
content: counter(bar-counter, lower-alpha);
position: absolute;
top: -.1em;
top: 1px;
bottom: 1px;
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;
width: 2.5rem;
overflow: hidden;
color: @color-nav;
text-align: center;
@ -192,7 +189,11 @@
color: @button_color;
&::before {
color: @button_color;
background-color: @color-site-bg;
}
&::after {
display: none;
}
&:hover,
@ -204,8 +205,14 @@
text-decoration: none;
&::before {
background-color: @button_color;
color: @button_background;
}
&::after {
display: block;
background-color: @button_background;
}
}
}

23
css/base_mixins.less
View file

@ -244,6 +244,29 @@
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* flex-box */
.display-flex() {
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
}
.flex-direction(@elem:column) {
flex-direction: @elem;
-ms-flex-direction: @elem;
-webkit-flex-direction: @elem;
}
// default "center"
.justify-content(@elem:center) {
justify-content: @elem;
-ms-justify-content: @elem;
-webkit-justify-content: @elem;
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* Screenreader / Hide */
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */