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