/** * This file provides the design styles the navigational elements in the sidebar */ #dokuwiki__aside { @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 { padding-left: 0; } nav { &.nav-main { margin-bottom: @nav-margin; } > p { color: @ini_nav_menu_color; &.noissue { color: @ini_text_webframe; * { color: inherit; } } } ul, div.nav { margin-bottom: 0; } li { color: @ini_nav_menu_color; > div { color: @ini_text_webframe; } &.toggler { list-style: none; margin-left: 0; } } li:not([class]), .li { padding: .15em 0; /* + + + + + active + + + + + */ span.curid { font-weight: bold; } } } a { &:link, &:visited { opacity: .9; color: @ini_nav_menu_color; } * { color: inherit; } } /* + + + the wrapper around the toggle to reserve space + + + */ div.nav { min-height: @icon-size + @margin-small; border: 1px solid transparent; // the toggle element a { cursor: pointer; display: table; width: 100%; min-height: @icon-size + @margin-small; opacity: 1; border: 1px solid transparent; border-radius: @fix_border-radius; color: @ini_nav_menu_color; font-size: @font-size-head6; font-weight: normal; margin: -1px 0 @very-small-spacing; padding-bottom: .4rem; padding-top: .4rem; transition: @transition color, @transition background-color, @transition border-color; span { display: inline-block; vertical-align: middle; color: inherit; } &:hover, &:focus, &:active { position: relative; // always show label, even with collapsed sidebar 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; span.ico { &:after { background-color: @ini_nav_menu_hover_color; } strong { border-color: inherit; } svg { path { fill: @ini_nav_menu_hover_color; } } } } /* + + + submenu entry is active + + + */ &.is-active { font-weight: bold; } /* + + + toggle: open + + + */ &.is-open { background-color: @ini_nav_menu_hover_color; border-color: @ini_nav_menu_hover_color; color: @ini_nav_menu_hover_bg; span.ico { &:after { background-color: @ini_nav_menu_hover_bg; } strong { border-color: @ini_nav_menu_hover_bg; } svg { path { fill: @ini_nav_menu_hover_bg; } } } &:hover, &:focus, &:active { background-color: @ini_nav_menu_hover_bg; border-color: @ini_nav_menu_hover_color; color: @ini_nav_menu_hover_color; span.ico { &:after { background-color: @ini_nav_menu_hover_color; } strong { border-color: inherit; } svg { path { fill: @ini_nav_menu_hover_color; } } } } } } span.ico { position: relative; display: table-cell; width: (@menu-margin - .1); min-width: (@menu-margin - .1); height: @icon-size; text-align: center; vertical-align: middle; color: inherit; &::after { @border-height: 1.5rem; content: ''; position: absolute; right: 0; top: 50%; bottom: auto; height: @border-height; width: 1px; background-color: @ini_nav_menu_color; margin-top: -(@border-height / 2); // wordbreak too late in IE 10 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { top: 0; bottom: .5rem; height: 100%; margin: 0; } } // simple fake icon strong { display: inline-block; width: @icon-size * 0.98; height: @icon-size * 0.98; border: 2px solid fade(@ini_nav_menu_color, 80%); border-top-right-radius: 50%; border-bottom-left-radius: 50%; color: inherit; font-size: @icon-size * 0.5; line-height: @icon-size * 0.9; vertical-align: baseline; text-align: center; margin: @icon-size * 0.05; padding: 0 .05em .05em; } // real icon svg { width: @icon-size; height: @icon-size; path { fill: @ini_nav_menu_color; transition: @transition all; } } } span.lbl { display: table-cell; font-size: inherit; padding-left: .5rem; } } /* + + + + + the panel (hidden by default) + + + + + */ div.nav-panel { display: none; margin-top: .5rem; margin-left: @margin-small; ul { margin-bottom: 1rem; ul { margin-bottom: 0; margin-left: 16px; } } ul.toollist li { margin-left: 0; } } } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1440px */ @media @screen_min-xlg { #dokuwiki__aside { nav { li:not([class]), .li { font-size: @font-size-head6; * { font-size: inherit; font-weight: inherit; } a { font-size: (@font-size-head6 - .05); } } } } } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1440px */ @media @screen_max-xlg { #dokuwiki__aside { div.nav { a { margin-left: 1px; } } } } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1023px */ @media @screen_max-md { #dokuwiki__aside { div.nav { a { margin-left: 0; } } } body.show-mobile-sidebar { #dokuwiki__aside { display: block !important; position: absolute; left: 1.25rem; // left margin of content container box-shadow: @box-shadow-right-bottom; min-width: 45%; max-width: 90%; height: auto; background: @ini_background_site; > nav { position: relative; &:first-child { margin-top: 1.2rem; } a { font-size: @font-size-small; } } a.nav { border-radius: 0; border-right-width: 0; border-left-width: 0; } div.nav-panel, a.nav { margin-top: 0; padding-right: .8em; } } } } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 768px */ @media @screen_max-xs { body.show-mobile-sidebar { .page-wrapper > .tools { top: 2.5rem; } #dokuwiki__aside { left: 1.25rem; right: 1.25rem; width: auto; max-width: 100%; margin-top: -1rem; } } } /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 480px */ @media @screen_max-xxs { body.show-mobile-sidebar { #dokuwiki__aside { left: 4px; right: 4px; > nav { a { font-size: @font-size-default; } } } } }