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