1/**
2 * This file provides the design styles the navigational elements in the sidebar
3 */
4
5#dokuwiki__aside {
6    @icon-size: @font-size-big;
7    @menu-margin: @icon-size + @margin-small * 2;
8
9    @media @screen_md-lg {
10        margin-left: -1.25rem;
11    }
12
13    @media @screen_max-md {
14        display: none;
15    }
16
17    ul {
18        padding-left: 0;
19    }
20
21    nav {
22        &.nav-main {
23            margin-bottom: @nav-margin;
24        }
25
26        > p {
27            color: @ini_nav_menu_color;
28
29            &.noissue {
30                color: @ini_text_webframe;
31
32                * {
33                    color: inherit;
34                }
35            }
36        }
37
38        ul,
39        div.nav {
40            margin-bottom: 0;
41        }
42
43        li {
44            color: @ini_nav_menu_color;
45
46            > div {
47                color: @ini_text_webframe;
48            }
49
50            &.toggler {
51                list-style: none;
52                margin-left: 0;
53            }
54        }
55
56        li:not([class]),
57        .li {
58            padding: .15em 0;
59
60
61            /* + + + + +  active  + + + + + */
62            span.curid {
63                font-weight: bold;
64            }
65        }
66    }
67
68    a {
69        &:link,
70        &:visited {
71            opacity: .9;
72            color: @ini_nav_menu_color;
73        }
74
75        * {
76            color: inherit;
77        }
78    }
79
80    /* + + +  the wrapper around the toggle to reserve space  + + + */
81    div.nav {
82        min-height: @icon-size + @margin-small;
83        border: 1px solid transparent;
84
85        // the toggle element
86        a {
87            cursor: pointer;
88            display: table;
89            width: 100%;
90            min-height: @icon-size + @margin-small;
91            opacity: 1;
92            border: 1px solid transparent;
93            border-radius: @fix_border-radius;
94            color: @ini_nav_menu_color;
95            font-size: @font-size-head6;
96            font-weight: normal;
97            margin: -1px 0 @very-small-spacing;
98            padding-bottom: .4rem;
99            padding-top: .4rem;
100            transition: @transition color, @transition background-color, @transition border-color;
101
102            span {
103                display: inline-block;
104                vertical-align: middle;
105                color: inherit;
106            }
107
108            &:hover,
109            &:focus,
110            &:active {
111                position: relative; // always show label, even with collapsed sidebar
112                width: 100%;
113                background-color: @ini_nav_menu_hover_bg;
114                border-color: @ini_nav_menu_hover_color;
115                color: @ini_nav_menu_hover_color;
116                text-decoration: none;
117
118                span.ico {
119                    &:after {
120                        background-color: @ini_nav_menu_hover_color;
121                    }
122
123                    strong {
124                        border-color: inherit;
125                    }
126
127                    svg {
128                        path {
129                            fill: @ini_nav_menu_hover_color;
130                        }
131                    }
132                }
133            }
134
135            /* + + +  submenu entry is active  + + + */
136            &.is-active {
137                font-weight: bold;
138            }
139
140            /* + + +  toggle: open  + + + */
141            &.is-open {
142                background-color: @ini_nav_menu_hover_color;
143                border-color: @ini_nav_menu_hover_color;
144                color: @ini_nav_menu_hover_bg;
145
146                span.ico {
147                    &:after {
148                        background-color: @ini_nav_menu_hover_bg;
149                    }
150
151                    strong {
152                        border-color: @ini_nav_menu_hover_bg;
153                    }
154
155                    svg {
156                        path {
157                            fill: @ini_nav_menu_hover_bg;
158                        }
159                    }
160                }
161
162                &:hover,
163                &:focus,
164                &:active {
165                    background-color: @ini_nav_menu_hover_bg;
166                    border-color: @ini_nav_menu_hover_color;
167                    color: @ini_nav_menu_hover_color;
168
169                    span.ico {
170                        &:after {
171                            background-color: @ini_nav_menu_hover_color;
172                        }
173
174                        strong {
175                            border-color: inherit;
176                        }
177
178                        svg {
179                            path {
180                                fill: @ini_nav_menu_hover_color;
181                            }
182                        }
183                    }
184                }
185            }
186        }
187
188        span.ico {
189            position: relative;
190            display: table-cell;
191            width: (@menu-margin - .1);
192            min-width: (@menu-margin - .1);
193            height: @icon-size;
194            text-align: center;
195            vertical-align: middle;
196            color: inherit;
197
198            &::after {
199                @border-height: 1.5rem;
200
201                content: '';
202                position: absolute;
203                right: 0;
204                top: 50%;
205                bottom: auto;
206                height: @border-height;
207                width: 1px;
208                background-color: @ini_nav_menu_color;
209                margin-top: -(@border-height / 2);
210
211                // wordbreak too late in IE 10
212                @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
213                    top: 0;
214                    bottom: .5rem;
215                    height: 100%;
216                    margin: 0;
217                }
218            }
219
220            // simple fake icon
221            strong {
222                display: inline-block;
223                width: @icon-size * 0.98;
224                height: @icon-size * 0.98;
225                border: 2px solid fade(@ini_nav_menu_color, 80%);
226                border-top-right-radius: 50%;
227                border-bottom-left-radius: 50%;
228                color: inherit;
229                font-size: @icon-size * 0.5;
230                line-height: @icon-size * 0.9;
231                vertical-align: baseline;
232                text-align: center;
233                margin: @icon-size * 0.05;
234                padding: 0 .05em .05em;
235            }
236
237            // real icon
238            svg {
239                width: @icon-size;
240                height: @icon-size;
241
242                path {
243                    fill: @ini_nav_menu_color;
244                    transition: @transition all;
245                }
246            }
247        }
248
249        span.lbl {
250            display: table-cell;
251            font-size: inherit;
252            padding-left: .5rem;
253        }
254    }
255
256    /* + + + + +  the panel (hidden by default)  + + + + + */
257    div.nav-panel {
258        display: none;
259        margin-top: .5rem;
260        margin-left: @margin-small;
261
262        ul {
263            margin-bottom: 1rem;
264
265            ul {
266                margin-bottom: 0;
267                margin-left: 16px;
268            }
269        }
270
271        ul.toollist li {
272            margin-left: 0;
273        }
274    }
275}
276
277/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
278/* min-width: 1440px */
279@media @screen_min-xlg {
280    #dokuwiki__aside {
281        nav {
282            li:not([class]),
283            .li {
284                font-size: @font-size-head6;
285
286                * {
287                    font-size: inherit;
288                    font-weight: inherit;
289                }
290
291                a {
292                    font-size: (@font-size-head6 - .05);
293                }
294            }
295        }
296    }
297}
298
299/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
300/* max-width: 1440px */
301@media @screen_max-xlg {
302    #dokuwiki__aside {
303        div.nav {
304            a {
305                margin-left: 1px;
306            }
307        }
308    }
309}
310
311/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
312/* max-width: 1023px */
313@media @screen_max-md {
314    #dokuwiki__aside {
315        div.nav {
316            a {
317                margin-left: 0;
318            }
319        }
320    }
321
322    body.show-mobile-sidebar {
323        #dokuwiki__aside {
324            display: block !important;
325            position: absolute;
326            left: 1.25rem; // left margin of content container
327            box-shadow: @box-shadow-right-bottom;
328            min-width: 45%;
329            max-width: 90%;
330            height: auto;
331            background: @ini_background_site;
332
333            > nav {
334                position: relative;
335
336                &:first-child {
337                    margin-top: 1.2rem;
338                }
339
340                a {
341                    font-size: @font-size-small;
342                }
343            }
344
345            a.nav {
346                border-radius: 0;
347                border-right-width: 0;
348                border-left-width: 0;
349            }
350
351            div.nav-panel,
352            a.nav {
353                margin-top: 0;
354                padding-right: .8em;
355            }
356        }
357    }
358}
359
360/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
361/* max-width: 768px */
362@media @screen_max-xs {
363    body.show-mobile-sidebar {
364        .page-wrapper > .tools {
365            top: 2.5rem;
366        }
367
368        #dokuwiki__aside {
369            left: 1.25rem;
370            right: 1.25rem;
371            width: auto;
372            max-width: 100%;
373            margin-top: -1rem;
374        }
375    }
376}
377
378/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
379/* max-width: 480px */
380@media @screen_max-xxs {
381    body.show-mobile-sidebar {
382        #dokuwiki__aside {
383            left: 4px;
384            right: 4px;
385
386            > nav {
387                a {
388                    font-size: @font-size-default;
389                }
390            }
391        }
392    }
393}
394