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