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

SPR-843: Fontello Icons umstellen auf Material Design Icons - togglelink for "page_main-content"

Browse source
This commit is contained in:
Silke Pisulla 2017-03-03 13:05:54 +01:00
commit 3ab406d29e
11 changed files with 279 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

53
css/area_togglelink.less
View file

@ -8,30 +8,50 @@
.togglelink {
&.page_main-content {
position: absolute;
top: 0px;
top: 0;
bottom: -1px;
width: 2rem;
left: -(@margin-default);
z-index: 1;
@media @screen_max-md{
@media @screen_max-md {
display: none;
}
a {
.fontello-double();
.icon-right-bold();
.icon-left-bold();
.display-flex();
.flex-direction();
.justify-content();
width: (@margin-default);
width: @margin-default;
height: 100%;
background-color: @button_background;
border: solid 1px @button_background;
border-radius: @fix_border-radius 0 0 @fix_border-radius;
color: @button_color;
text-decoration: none;
text-align: center;
transition: @transition color, @transition background-color, @transition border-color;
&::before,
&::after {
width: 100%;
opacity: .6;
font-size: 1rem;
line-height: 1;
text-align: center;
margin: 0;
transition: @transition opacity;
}
&::before {
opacity: 1;
font-size: 1.25rem;
}
&:hover,
&:focus,
&:active {
@ -44,10 +64,13 @@
color: inherit;
text-decoration: none;
}
&::after {
opacity: 0;
}
}
}
/* + + + toggle out + + + */
.wide-content & {
left: -1px;
@ -57,17 +80,34 @@
border-color: @button_background;
border-radius: 0 @fix_border-radius @fix_border-radius 0;
&::before {
opacity: .6;
font-size: 1rem;
}
&::after {
opacity: 1;
font-size: 1.25rem;
}
&:hover,
&:focus,
&:active {
background-color: @button_color;
&::before {
opacity: 0;
}
&::after {
opacity: 1;
}
}
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */
@ -77,7 +117,6 @@
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */