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