SPR-950: Headerstyling in Mobile optimieren

This commit is contained in:
Silke Pisulla 2017-05-08 15:38:25 +02:00
commit 8e5fef321f
4 changed files with 33 additions and 29 deletions

View file

@ -19,7 +19,6 @@
> li {
.btn-usertools-wrapper(); // uniform li
.btn-usertools-num();
position: relative;
float: left;
@ -70,6 +69,7 @@
.num {
top: -.6em;
font-size: @font-size-very-small;
}
}
}

View file

@ -46,7 +46,6 @@
.btn-usertools-num();
float: right;
min-height: 28px;
@media @screen_max-xs {
display: block;
@ -54,6 +53,10 @@
margin-bottom: @headericons-margin-xxs;
}
@media @screen_max-xxs {
margin-bottom: (@headericons-margin-xxs - .2);
}
> span,
> a {
display: block;
@ -69,14 +72,6 @@
padding-top: .14rem;
}
@media @screen_max-xxlg {
min-height: 28px;
}
@media @screen_max-md {
min-height: @toggle-size;
}
@media @screen_only-lg {
min-width: 2rem;
}
@ -118,7 +113,7 @@
@media @screen_max-xs {
position: absolute;
top: @headericons-margin-xxs;
right: 2.9rem;
right: (@toggle-size + @headericons-margin-xxs + @space-max-xlg + .5); // 1.75rem + .45 + .5 + (button login/out margin-right)
overflow: hidden;
white-space: nowrap;
margin: -1px 0 0;
@ -126,7 +121,7 @@
@media @screen_max-xxs {
left: -10px;
right: (@toggle-size + @headericons-margin-xxs);
right: (@toggle-size + @headericons-margin-xxs); // 1.75rem + .45rem
width: auto;
}

View file

@ -25,19 +25,24 @@ ul.page-attributes {
}
}
/* + + + + + usertool icon in header + + + + + */
#dokuwiki__usertools.nav-usertools {
ul {
li {
&.user-task {
.btn-usertools-wrapper();
.btn-usertools-num();
position: relative;
button {
.plugin__do_usertasks {
width: 100%;
min-width: @toggle-size;
min-height: @toggle-size;
border-radius: @ini_default_border_radius;
border: 1px solid @wikiicons-border;
padding: .14rem 0 0 0;
min-width: 2rem;
min-height: 28px;
background-color: @ini_nav_menu_hover_bg;
&::before {
content: ''; // remove when fontello is removed from usertools
@ -55,18 +60,18 @@ ul.page-attributes {
}
}
button {
background-color: @ini_nav_menu_hover_bg;
}
svg {
width: 20px;
height: 20px; // for IE 11
width: 1.2rem;
height: 1.2rem; // for IE 11
margin-bottom: 2px;
path {
fill: @ini_nav_menu_hover_color;
}
@media @screen_max-md {
margin-top: 4px;
}
}
.noopentasks {
@ -87,7 +92,7 @@ ul.page-attributes {
}
}
@media @screen_max-sm {
@media @screen_max-xs {
display: none;
}
} // user-task

View file

@ -4,12 +4,16 @@
.page-attributes {
li.plugin_starred {
.starred svg {
margin-top: .1em;
width: 1.6em;
height: 1.6em;
font-size: 0.82rem;
fill: @ini_nav_menu_hover_color;
.starred {
display: block;
padding-top: .05rem;
svg {
width: 1.6em;
height: 1.6em;
font-size: 0.82rem;
fill: @ini_nav_menu_hover_color;
}
}
a:hover,