xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision 86e59cb304c137acc395c9a02b1f451ca255d43b) 
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 too 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            }
158
159            // real icon
160            svg {
161                width: @icon-size;
162                height: @icon-size;
163
164                path {
165                    fill: @ini_nav_menu_color;
166                    transition: @transition all;
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            text-decoration: none;
178
179            span.ico {
180                border-color: inherit;
181
182                strong {
183                    border-color: inherit;
184                }
185
186                svg {
187                    path {
188                        fill: @ini_nav_menu_hover_color;
189                    }
190                }
191            }
192        }
193    }
194
195    // without wrapping UL
196    nav > a.nav {
197        margin-left: -3.5rem;
198
199        @media @screen_md-lg {
200            margin-left: -2.5rem;
201        }
202    }
203
204
205/* + + + + +  active  + + + + + */
206    span.curid a {
207        font-weight: bold;
208    }
209
210
211/* + + + + +  the panel (hidden by default)  + + + + + */
212    div.nav-panel {
213        display: none;
214        margin-top: .5rem;
215
216        ul {
217            margin-bottom: 1rem;
218
219            ul {
220                margin-bottom: 0;
221            }
222        }
223    }
224}
225
226
227/* + + + + + +  wide page content  border-bottom between a.nav (short width)  + + + + +
228.wide-content {
229    #dokuwiki__aside {
230        a.nav {
231            position: relative;
232
233            &::after {
234                content: '';
235                position: absolute;
236                bottom: -1px;
237                left: 0;
238                width: 100%;
239                height: 1px;
240                border-bottom: solid 1px @ini_border;
241            }
242
243            &:hover,
244            &:focus,
245            &:active {
246                &::after {
247                    display: none;
248                }
249            }
250        }
251    }
252} */
253
254
255/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
256/* min-width: 1440px */
257
258@media @screen_min-xlg {
259    #dokuwiki__aside {
260        nav {
261            li:not([class]),
262            .li {
263                font-size: @font-size-head6;
264
265                * {
266                    font-size: inherit;
267                    font-weight: inherit;
268                }
269
270                a {
271                    font-size: (@font-size-head6 - .05);
272                }
273            }
274        }
275    }
276}
277
278
279/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
280/* max-width: 1439px */
281
282@media @screen_max-xlg {
283    #dokuwiki__aside {
284        nav {
285            li:not([class]),
286            .li {
287                font-size: @font-size-default;
288
289                * {
290                    font-size: inherit;
291                    font-weight: inherit;
292                }
293            }
294        }
295    }
296}
297
298
299/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
300/* max-width: 1023px */
301
302@media @screen_max-md {
303    body.show-mobile-sidebar {
304        #dokuwiki__aside {
305            > nav {
306                position: relative;
307                z-index: 2;
308
309                &:first-child {
310                    margin-top: 1.2rem;
311                }
312            }
313
314            a.nav {
315                border-radius: 0;
316                border-right-width: 0;
317                border-left-width: 0;
318            }
319
320            .nav-panel,
321            a.nav {
322                padding-right: .8em;
323            }
324        }
325    }
326}
327