From 77ac3c62bc42def8b6f308b3ae7aff0af1407dc3 Mon Sep 17 00:00:00 2001 From: Silke Pisulla Date: Fri, 28 Apr 2017 11:10:27 +0200 Subject: [PATCH] SPR-937: Alignment bei schmaler Sidebar --- css/area_main-sidebar-content.less | 63 ------------------- css/area_main-sidebar-nav.less | 97 ++++++++++++------------------ style.ini | 1 - 3 files changed, 39 insertions(+), 122 deletions(-) delete mode 100644 css/area_main-sidebar-content.less diff --git a/css/area_main-sidebar-content.less b/css/area_main-sidebar-content.less deleted file mode 100644 index 1797837..0000000 --- a/css/area_main-sidebar-content.less +++ /dev/null @@ -1,63 +0,0 @@ -/** - * This file provides the design styles the non-navigational elements in the sidebar - */ - - -#dokuwiki__aside { - ul, - ol { - margin-left: -.4rem; - padding-left: 0; - - ul, - ol { - padding-left: 1.8rem; - - @media @screen_md-lg { - padding-left: @menu-margin-lg; - } - - li { - margin-left: 0; - } - } - } -} - - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1023px */ - -@media @screen_max-md { - #dokuwiki__aside { - display: none; - } - - body.show-mobile-sidebar { - #dokuwiki__aside { - display: block !important; - position: absolute; - left: 1.25rem; //left margin of content container - z-index: 200; // above all - box-shadow: @box-shadow-right-bottom; - min-width: 45%; - max-width: 90%; - height: auto; - - &:after { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - width: 100%; - height: 100%; - background: @ini_background_site; - background: -webkit-linear-gradient(left, @ini_background_site, @ini_background); - background: linear-gradient(left, @ini_background_site, @ini_background); - z-index: 0; - } - } - } -} diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index c099b28..b08c4dc 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -10,6 +10,29 @@ @icon-size: @font-size-big; @menu-margin: @icon-size + @margin-small * 2; + @media @screen_md-lg { + margin-left: -1.25rem; + } + + @media @screen_max-md { + display: none; + } + + > ul, + > ol, + > nav { + padding-left: 0; + + ul, + ol { + padding-left: 0; + + li { + margin-left: 0; + } + } + } + nav > p { color: @ini_nav_menu_color; @@ -42,14 +65,6 @@ } } - > * { - margin-left: @menu-margin; // moves *all* sidebar content to the right - - @media @screen_md-lg { - margin-left: @menu-margin-lg; - } - } - a { &:link, &:visited { @@ -81,13 +96,9 @@ color: @ini_nav_menu_color; font-size: @font-size-head6; font-weight: normal; - margin: -1px 0 (@font-size-head6 / 2) -(@menu-margin - .4); // moves the toggles back to the left (.4 from li margin) + margin: -1px 0 (@font-size-head6 / 2); // moves the toggles back to the left (.4 from li margin) transition: @transition color, @transition background-color, @transition border-color; - @media @screen_md-lg { - margin-left: -(@menu-margin-lg + .8); - } - span { display: inline-block; vertical-align: middle; @@ -146,16 +157,14 @@ &:hover, &:focus, &:active { + position: relative; // always show label, even with collapsed sidebar + z-index: 100; + width: 100%; background-color: @ini_nav_menu_hover_bg; border-color: @ini_nav_menu_hover_color; color: @ini_nav_menu_hover_color; text-decoration: none; - // always show label, even with collapsed sidebar - position: absolute; - z-index: 100; - width: 100%; - span.ico { border-color: inherit; @@ -172,16 +181,6 @@ } } - // without wrapping UL - nav > a.nav, - nav div.nav a{ - margin-left: -3.5rem; - - @media @screen_md-lg { - margin-left: -2.5rem; - } - } - /* + + + + + active + + + + + */ span.curid a { @@ -193,6 +192,7 @@ div.nav-panel { display: none; margin-top: .5rem; + margin-left: @menu-margin; ul { margin-bottom: 1rem; @@ -205,34 +205,6 @@ } -/* + + + + + + wide page content border-bottom between a.nav (short width) + + + + + -.wide-content { - #dokuwiki__aside { - a.nav { - position: relative; - - &::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; - width: 100%; - height: 1px; - border-bottom: solid 1px @ini_border; - } - - &:hover, - &:focus, - &:active { - &::after { - display: none; - } - } - } - } -} */ - - /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1440px */ @@ -283,6 +255,16 @@ @media @screen_max-md { body.show-mobile-sidebar { #dokuwiki__aside { + display: block !important; + position: absolute; + left: 1.25rem; // left margin of content container + z-index: 200; // above all + box-shadow: @box-shadow-right-bottom; + min-width: 45%; + max-width: 90%; + height: auto; + background: @ini_background_site; + > nav { position: relative; z-index: 2; @@ -298,7 +280,7 @@ border-left-width: 0; } - .nav-panel, + div.nav-panel, a.nav { padding-right: .8em; } @@ -324,4 +306,3 @@ } } } - diff --git a/style.ini b/style.ini index 4dc2e5d..4ecc0b5 100755 --- a/style.ini +++ b/style.ini @@ -72,7 +72,6 @@ css/area_nav-pagetools.less = all css/area_nav-metabox.less = all css/area_main-sidebar-nav.less = all css/area_main-sidebar-search.less = all -css/area_main-sidebar-content.less = all css/area_main-content.less = all css/area_main-content-secedit.less = all css/area_togglelink.less = all