xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision 686515e66f4c46bcefe01c06a58007c721e4e643) 
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: 1023px */
318
319@media @screen_max-md {
320    body.show-mobile-sidebar {
321        #dokuwiki__aside {
322            display: block !important;
323            position: absolute;
324            left: 1.25rem; // left margin of content container
325            box-shadow: @box-shadow-right-bottom;
326            min-width: 45%;
327            max-width: 90%;
328            height: auto;
329            background: @ini_background_site;
330
331            > nav {
332                position: relative;
333
334                &:first-child {
335                    margin-top: 1.2rem;
336                }
337
338                a {
339                    font-size: @font-size-small;
340                }
341            }
342
343            a.nav {
344                border-radius: 0;
345                border-right-width: 0;
346                border-left-width: 0;
347            }
348
349            div.nav-panel,
350            a.nav {
351                margin-top: 0;
352                padding-right: .8em;
353            }
354        }
355    }
356}
357
358
359/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
360/* max-width: 768px */
361
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/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
380/* max-width: 480px */
381
382@media @screen_max-xxs {
383    body.show-mobile-sidebar {
384        #dokuwiki__aside {
385            left: 4px;
386            right: 4px;
387
388            > nav {
389                a {
390                    font-size: @font-size-default;
391                }
392            }
393        }
394    }
395}
396