position + hover
This commit is contained in:
parent
a4152dcdb3
commit
4a6674ad6f
2 changed files with 59 additions and 32 deletions
|
@ -7,10 +7,10 @@
|
|||
|
||||
#dokuwiki__aside.main-sidebar {
|
||||
counter-reset: nav-counter;
|
||||
|
||||
/* + + + + + nav main + + + + + */
|
||||
.nav-main {
|
||||
> ul {
|
||||
|
||||
@icon-size: 2rem;
|
||||
|
||||
margin: 0;
|
||||
|
@ -38,19 +38,31 @@
|
|||
|
||||
|
||||
/* + + + first level + + + */
|
||||
> li {
|
||||
> li {position: relative;
|
||||
list-style-type: none;
|
||||
border-bottom: solid 1px @color-border;
|
||||
margin: 0;
|
||||
padding: 0 0 .3rem 0;
|
||||
counter-increment: nav-counter;
|
||||
|
||||
> .li { //background-color: pink;// hier activ !!!
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: @color-border;
|
||||
transition: @transition background-color;
|
||||
}
|
||||
|
||||
> .li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: .5rem 0 .5rem (@icon-size + 1);
|
||||
margin-top: -1px;
|
||||
|
||||
&::before {
|
||||
//background-color: @color-link;
|
||||
color: @color-nav;
|
||||
content: counter(nav-counter);
|
||||
position: absolute;
|
||||
|
@ -81,20 +93,25 @@
|
|||
transition: @transition background-color;
|
||||
}
|
||||
|
||||
&.opened, &.closed{
|
||||
&.opened,
|
||||
&.closed {
|
||||
padding: 0;
|
||||
&::before, &::after{
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
a{
|
||||
display: block;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
padding: .5rem 0 .8rem (@icon-size + 1);
|
||||
margin-bottom: -.3rem;
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
margin-bottom: -.3rem;
|
||||
padding: .6rem 0 .7rem (@icon-size + 1);
|
||||
transition: @transition color, @transition background-color, @transition border-color;
|
||||
|
||||
&::before {
|
||||
//background-color: @color-link;
|
||||
color: @color-nav;
|
||||
content: counter(nav-counter);
|
||||
position: absolute;
|
||||
top: -.1rem;
|
||||
|
@ -108,6 +125,7 @@
|
|||
height: 100%;
|
||||
width: @icon-size;
|
||||
overflow: hidden;
|
||||
color: @color-nav;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
@ -123,46 +141,55 @@
|
|||
background-color: @color-border;
|
||||
transition: @transition background-color;
|
||||
}
|
||||
&:hover, &:focus, &:active{
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: #fff;
|
||||
border-color: @color-link;
|
||||
color: @color-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.opened{
|
||||
a{
|
||||
&.opened {
|
||||
a {
|
||||
background-color: @color-link;
|
||||
color: #fff;
|
||||
&::after, &::before{
|
||||
|
||||
&::after,
|
||||
&::before{
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
&:hover, &:focus, &:active{
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: #fff;
|
||||
border-color: @color-link;
|
||||
color: @color-link;
|
||||
&::after, &::before{
|
||||
text-decoration: none;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
color: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+ ul{
|
||||
|
||||
+ ul {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.closed + ul{
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&.closed + ul {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -160,7 +160,7 @@
|
|||
.btn-usertools-num () {
|
||||
.num {
|
||||
position: absolute;
|
||||
right: -.4em;
|
||||
right: -.5em;
|
||||
top: -.4em;
|
||||
background-color: @button_color;
|
||||
border-radius: 2px;
|
||||
|
@ -168,7 +168,7 @@
|
|||
font-size: .6rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 100%;
|
||||
line-height: 1;
|
||||
padding: .2em .3em .1em;
|
||||
transition: @transition color, @transition background-color;
|
||||
}
|
||||
|
@ -189,8 +189,8 @@
|
|||
.fontello();
|
||||
.hide-text-show-before();
|
||||
|
||||
color: @color-nav;
|
||||
font-size: 1rem;
|
||||
color: inherit;
|
||||
font-size: 1.3em;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue