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