Merge branch 'spis-master' into 'master'
better content-togglelink See merge request !10
This commit is contained in:
commit
43d4ee93fa
6 changed files with 996 additions and 941 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
|
10
main.php
10
main.php
|
@ -299,6 +299,11 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
|
|||
?>
|
||||
|
||||
<div class="breadcrumbs">
|
||||
|
||||
<div class="togglelink page_main-content">
|
||||
<a href="#">< ><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
|
||||
|
@ -330,11 +335,6 @@ $classWideContent = ($ACT === "show") ? "": "wide-content ";
|
|||
</div>
|
||||
|
||||
<div id="dokuwiki__content" class="page main-content">
|
||||
|
||||
<div class="togglelink page_main-content">
|
||||
<a href="#">< ><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>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue