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