better content-togglelink

This commit is contained in:
Silke Pisulla 2017-01-10 15:28:51 +01:00
commit 9d4d2a1a8c
3 changed files with 55 additions and 36 deletions

View file

@ -5,8 +5,9 @@
*/
.breadcrumbs {
padding: (@margin-small + .2) 1.8rem @margin-small;
position: relative;
border-bottom: 1px solid @color-border;
padding: .8rem 1.8rem .4rem;
> p {
font-size: .83rem;
@ -61,7 +62,7 @@
float: right;
display: inline-block;
max-width: 30%;
margin: -.2em 0 0;
margin: -.4em 0 0;
padding: 0;
> li {

View file

@ -5,51 +5,69 @@
*/
#dokuwiki__content {
overflow: visible;
.togglelink {
&.page_main-content {
position: absolute;
top: -1px;
bottom: -1px;
left: -2rem;
z-index: 1;
.togglelink {
&.page_main-content {
position: absolute;
top: -1px;
left: -2rem;
z-index: 1;
a {
.display-flex();
.flex-direction();
.justify-content();
width: 2rem;
height: 100%;
background-color: @button_background;
border: solid 1px @button_background;
border-radius: 2px 0 0 2px;
color: @button_color;
text-decoration: none;
text-align: center;
transition: @transition color, @transition background-color, @transition border-color;
&:hover,
&:focus,
&:active {
background-color: @button_color;
border-color: @button_background;
color: @button_background;
text-decoration: none;
* {
color: inherit;
text-decoration: none;
}
}
}
/* + + + toggle out + + + */
.wide-content & {
left: -1px;
a {
display: block;
width: 2rem;
height: 3.1rem;
background-color: #F6F6F6;
border: solid 1px @color-border;
border-radius: 2px 0 0 2px;
text-decoration: none;
text-align: center;
padding-top: .9em;
transition: @transition color, @transition background-color, @transition border-color;
background-color: @button_background;
border-color: @button_background;
&:hover,
&:focus,
&:active {
background-color: @button_background;
border-color: @button_background;
color: @button_color;
text-decoration: none;
* {
color: inherit;
text-decoration: none;
}
background-color: @button_color;
}
}
}
}
}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */
@media @screen_min-xlg {
#dokuwiki__content .togglelink {
.togglelink {
}
}
@ -59,7 +77,7 @@
/* max-width: 1199px */
@media @screen_max-xlg {
#dokuwiki__content .togglelink {
.togglelink {
}
}

View file

@ -296,6 +296,11 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
?>
<div class="breadcrumbs">
<div class="togglelink page_main-content">
<a href="#">&lt; &gt;<span class="sr-out">auf/zu</span></a>
</div>
<h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>
<?php
@ -327,11 +332,6 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
</div>
<div id="dokuwiki__content" class="page main-content">
<div class="togglelink page_main-content">
<a href="#">&lt; &gt;<span class="sr-out">auf/zu</span></a>
</div>
<div id="meta-box">
<h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_meta_box') ?></h6>