xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision 80e39be0482233f6b0a1861fc90918c0d2f67b41) 
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}
272
273/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
274/* min-width: 1440px */
275@media @screen_min-xlg {
276    #dokuwiki__aside {
277        nav {
278            li:not([class]),
279            .li {
280                font-size: @font-size-head6;
281
282                * {
283                    font-size: inherit;
284                    font-weight: inherit;
285                }
286
287                a {
288                    font-size: (@font-size-head6 - .05);
289                }
290            }
291        }
292    }
293}
294
295/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
296/* max-width: 1440px */
297@media @screen_max-xlg {
298    #dokuwiki__aside {
299        div.nav {
300            a {
301                margin-left: 1px;
302            }
303        }
304    }
305}
306
307/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
308/* max-width: 1023px */
309@media @screen_max-md {
310    #dokuwiki__aside {
311        div.nav {
312            a {
313                margin-left: 0;
314            }
315        }
316    }
317
318    body.show-mobile-sidebar {
319        #dokuwiki__aside {
320            display: block !important;
321            position: absolute;
322            left: 1.25rem; // left margin of content container
323            box-shadow: @box-shadow-right-bottom;
324            min-width: 45%;
325            max-width: 90%;
326            height: auto;
327            background: @ini_background_site;
328
329            > nav {
330                position: relative;
331
332                &:first-child {
333                    margin-top: 1.2rem;
334                }
335
336                a {
337                    font-size: @font-size-small;
338                }
339            }
340
341            a.nav {
342                border-radius: 0;
343                border-right-width: 0;
344                border-left-width: 0;
345            }
346
347            div.nav-panel,
348            a.nav {
349                margin-top: 0;
350                padding-right: .8em;
351            }
352        }
353    }
354}
355
356/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
357/* max-width: 768px */
358@media @screen_max-xs {
359    body.show-mobile-sidebar {
360        .page-wrapper > .tools {
361            top: 2.5rem;
362        }
363
364        #dokuwiki__aside {
365            left: 1.25rem;
366            right: 1.25rem;
367            width: auto;
368            max-width: 100%;
369            margin-top: -1rem;
370        }
371    }
372}
373
374/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
375/* max-width: 480px */
376@media @screen_max-xxs {
377    body.show-mobile-sidebar {
378        #dokuwiki__aside {
379            left: 4px;
380            right: 4px;
381
382            > nav {
383                a {
384                    font-size: @font-size-default;
385                }
386            }
387        }
388    }
389}
390