xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision fd02700e79e2fdb77f8a890d6cf45fd1210866ac) 
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    nav > p,
14    .mmissuelist li,
15    .mmissuelist div {
16        color: @ini_nav_menu_color;
17
18        &.noissue {
19            color: @ini_text_webframe;
20
21            * {
22                color: inherit;
23            }
24        }
25    }
26
27    nav {
28        li {
29            color: @ini_nav_menu_color;
30
31            > div {
32                color: @ini_text_webframe;
33            }
34
35            &.toggler {
36                list-style: none;
37                margin-left: 0;
38            }
39        }
40
41        li:not([class]),
42        .li {
43            padding: .15em 0;
44        }
45    }
46
47
48    /* jira itemlist */
49    .mmissuelist {
50        li {
51            &.noissue {
52                list-style-type: none;
53                margin-left: 0;
54            }
55
56            a {
57                display: inline-block;
58            }
59        }
60
61        img {
62            vertical-align: bottom;
63            margin-right: .3rem;
64        }
65
66        .mm__status {
67            padding-left: .3rem;
68            padding-right: .3rem;
69        }
70
71        form {
72            vertical-align: text-top;
73        }
74    }
75
76    > * {
77        margin-left: @menu-margin; // moves *all* sidebar content to the right
78
79        @media @screen_md-lg {
80            margin-left: @menu-margin-lg;
81        }
82    }
83
84    a {
85        &:link,
86        &:visited {
87            opacity: .9;
88            color: @ini_nav_menu_color;
89        }
90
91        * {
92            color: inherit;
93        }
94    }
95
96    // the toggle element
97    a.nav {
98        .display-flex();
99        .align-items();
100
101        cursor: pointer;
102        min-height: @icon-size + @margin-small;
103        opacity: 1;
104        border: 1px solid transparent;
105        border-radius: @fix_border-radius;
106        color: @ini_nav_menu_color;
107        font-size: @font-size-head6;
108        font-weight: normal;
109        margin: -1px 0 (@font-size-head6 / 2) -(@menu-margin - .4); // moves the toggles back to the left (.4 from li margin)
110        transition: @transition color, @transition background-color, @transition border-color;
111
112        @media @screen_md-lg {
113            margin-left: -(@menu-margin-lg + .8);
114        }
115
116        span {
117            display: inline-block;
118            vertical-align: middle;
119            color: inherit;
120        }
121
122        span.lbl {
123            flex-grow: 1;
124
125            // wordbreak to late in IE 10
126            @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
127                width: 100%;
128                box-sizing: border-box;
129                padding-right: 13px;
130            }
131        }
132
133        span.ico {
134            .flex(0 0 auto);
135
136            width: @menu-margin;
137            height: @icon-size;
138            border-right: 1px solid @ini_nav_menu_color;
139            text-align: center;
140            margin-right: 4%;
141            color: inherit;
142
143            // simple fake icon
144            strong {
145                display: inline-block;
146                font-size: @icon-size * 0.5;
147                width: @icon-size * 0.9;
148                height: @icon-size * 0.9;
149                line-height: @icon-size * 0.9;
150                margin: @icon-size * 0.05;
151                vertical-align: baseline;
152                text-align: center;
153                color: inherit;
154                border: 2px solid @ini_nav_menu_color;
155                border-top-right-radius: 50%;
156                border-bottom-left-radius: 50%;
157                transition: @transition border-color;
158            }
159
160            // real icon
161            svg {
162                width: @icon-size;
163                height: @icon-size;
164
165                path {
166                    fill: @ini_nav_menu_color;
167                    transition: @transition all;
168                }
169            }
170        }
171
172        &:hover,
173        &:focus,
174        &:active {
175            background-color: @ini_nav_menu_hover_bg;
176            border-color: @ini_nav_menu_hover_color;
177            color: @ini_nav_menu_hover_color;
178            text-decoration: none;
179
180            span.ico {
181                border-color: inherit;
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    // without wrapping UL
197    nav > a.nav {
198        margin-left: -3.5rem;
199
200        @media @screen_md-lg {
201            margin-left: -2.5rem;
202        }
203    }
204
205
206/* + + + + +  active  + + + + + */
207    span.curid a {
208        font-weight: bold;
209    }
210
211
212/* + + + + +  the panel (hidden by default)  + + + + + */
213    div.nav-panel {
214        display: none;
215        margin-top: .5rem;
216
217        ul {
218            margin-bottom: 1rem;
219
220            ul {
221                margin-bottom: 0;
222            }
223        }
224    }
225}
226
227
228/* + + + + + +  wide page content  border-bottom between a.nav (short width)  + + + + +
229.wide-content {
230    #dokuwiki__aside {
231        a.nav {
232            position: relative;
233
234            &::after {
235                content: '';
236                position: absolute;
237                bottom: -1px;
238                left: 0;
239                width: 100%;
240                height: 1px;
241                border-bottom: solid 1px @ini_border;
242            }
243
244            &:hover,
245            &:focus,
246            &:active {
247                &::after {
248                    display: none;
249                }
250            }
251        }
252    }
253} */
254
255
256/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
257/* min-width: 1440px */
258
259@media @screen_min-xlg {
260    #dokuwiki__aside {
261        nav {
262            li:not([class]),
263            .li {
264                font-size: @font-size-head6;
265
266                * {
267                    font-size: inherit;
268                    font-weight: inherit;
269                }
270
271                a {
272                    font-size: (@font-size-head6 - .05);
273                }
274            }
275        }
276    }
277}
278
279
280/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
281/* max-width: 1023px */
282
283@media @screen_max-md {
284    // show when toggled
285    body.show-mobile-sidebar {
286        .search.main-sidebar {
287            display: block !important;
288            position: relative;
289
290            form {
291                margin-bottom: 1rem;
292
293                .no {
294                    display: block;
295                }
296            }
297        }
298
299        #dokuwiki__aside {
300            > nav {
301                position: relative;
302                z-index: 2;
303
304                &:first-child {
305                    margin-top: 1.2rem;
306                }
307            }
308
309            a.nav {
310                border-radius: 0;
311                border-right-width: 0;
312                border-left-width: 0;
313            }
314
315            .nav-panel,
316            a.nav {
317                padding-right: .8em;
318            }
319        }
320    }
321}
322
323
324/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
325/* max-width: 1439px */
326
327@media @screen_max-xlg {
328    #dokuwiki__aside {
329        nav {
330            li:not([class]),
331            .li {
332                font-size: @font-size-default;
333
334                * {
335                    font-size: inherit;
336                    font-weight: inherit;
337                }
338            }
339        }
340    }
341}
342