using button-color + button-background

This commit is contained in:
Silke Pisulla 2017-01-05 10:47:49 +01:00
commit dba38052f8
6 changed files with 62 additions and 42 deletions

View file

@ -21,6 +21,7 @@
}
li {
list-style-type: none;
color: @color-nav;
&:first-of-type {
@ -29,16 +30,26 @@
}
.li {
color: @color-nav;
a {
color: inherit;
display: list-item;
list-style-type: square;
color: @color-nav;
padding-top: .1rem;
padding-bottom: .1rem;
transition: @transition color;
&:hover,
&:focus,
&:active {
color: @button_color;
}
}
}
/* + + + first level + + + */
> li {position: relative;
> li {
position: relative;
list-style-type: none;
margin: 0;
padding: 0 0 .3rem 0;
@ -48,22 +59,20 @@
content: '';
position: absolute;
left: 0;
bottom: 0px;
bottom: 0;
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;
padding: .5rem 0 .5rem (@icon-size + 1);
&::before {
color: @color-nav;
content: counter(nav-counter);
position: absolute;
top: 0;
@ -77,6 +86,7 @@
height: 100%;
width: @icon-size;
overflow: hidden;
color: @color-nav;
text-align: center;
margin-top: auto;
margin-bottom: auto;
@ -90,7 +100,6 @@
width: 1px;
left: (@icon-size + .5);
background-color: @color-border;
transition: @transition background-color;
}
&.opened,
@ -129,6 +138,7 @@
text-align: center;
margin-top: auto;
margin-bottom: auto;
transition: @transition color;
}
&::after {
@ -145,37 +155,41 @@
&:hover,
&:focus,
&:active {
background-color: #fff;
border-color: @color-link;
color: @color-link;
background-color: @button_background;
border-color: @button_color;
color: @button_color;
text-decoration: none;
&::before {
color: @button_color;
}
&::after {
background-color: @button_color;
}
}
}
}
&.opened {
a {
background-color: @color-link;
color: #fff;
background-color: @button_color;
color: @button_background;
&::after,
&::before{
color: #fff;
border-color: #fff;
&::before {
color: @button_background;
}
&:hover,
&:focus,
&:active {
background-color: #fff;
border-color: @color-link;
color: @color-link;
background-color: @button_background;
border-color: @button_color;
color: @button_color;
text-decoration: none;
&::after,
&::before {
color: inherit;
border-color: inherit;
color: @button_color;
}
}
}