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