xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision cb7cc643bf8e0ff0a632314222134a32ded8ae21) 
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
113        span.ico {
114            width: @menu-margin;
115            height: @icon-size;
116            flex-grow: 0;
117            border-right: 1px solid @ini_nav_menu_color;
118            text-align: center;
119            margin-right: @margin-small;
120            color: inherit;
121
122            // simple fake icon
123            strong {
124                display: inline-block;
125                font-size: @icon-size * 0.5;
126                width: @icon-size * 0.9;
127                height: @icon-size * 0.9;
128                line-height: @icon-size * 0.9;
129                margin: @icon-size * 0.05;
130                vertical-align: baseline;
131                text-align: center;
132                color: inherit;
133                border: 2px solid @ini_nav_menu_color;
134                border-top-right-radius: 50%;
135                border-bottom-left-radius: 50%;
136                transition: @transition border-color;
137            }
138
139            // real icon
140            svg {
141                width: @icon-size;
142                height: @icon-size;
143
144                path {
145                    fill: @ini_nav_menu_color;
146                    transition: @transition all;
147                }
148            }
149        }
150
151        &:hover,
152        &:focus,
153        &:active {
154            background-color: @ini_nav_menu_hover_bg;
155            border-color: @ini_nav_menu_hover_color;
156            color: @ini_nav_menu_hover_color;
157            text-decoration: none;
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    // the panel (hidden by default)
176    div.nav-panel {
177        display: none;
178        margin-top: .5rem;
179
180        ul {
181            margin-bottom: 1rem;
182
183            ul {
184                margin-bottom: 0;
185            }
186        }
187    }
188}
189
190
191/* + + + + + +  wide page content  border-bottom between a.nav (short width)  + + + + +
192.wide-content {
193    #dokuwiki__aside {
194        a.nav {
195            position: relative;
196
197            &::after {
198                content: '';
199                position: absolute;
200                bottom: -1px;
201                left: 0;
202                width: 100%;
203                height: 1px;
204                border-bottom: solid 1px @ini_border;
205            }
206
207            &:hover,
208            &:focus,
209            &:active {
210                &::after {
211                    display: none;
212                }
213            }
214        }
215    }
216} */
217
218
219/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
220/* min-width: 1440px */
221
222@media @screen_min-xlg {
223    #dokuwiki__aside {
224        nav {
225            li:not([class]),
226            .li {
227                font-size: @font-size-head6;
228                padding: .15em 0;
229
230                * {
231                    font-size: inherit;
232                    font-weight: inherit;
233                }
234
235                a {
236                    font-size: (@font-size-head6 - .05);
237                }
238            }
239        }
240    }
241}
242
243
244/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
245/* max-width: 1023px */
246
247@media @screen_max-md {
248    // show when toggled
249    body.show-mobile-sidebar {
250        .search.main-sidebar {
251            display: block !important;
252            position: relative;
253
254            form {
255                margin-bottom: 1rem;
256
257                .no {
258                    display: block;
259                }
260            }
261        }
262
263        #dokuwiki__aside {
264            > nav {
265                position: relative;
266                z-index: 2;
267
268                &:first-child {
269                    margin-top: 1.2rem;
270                }
271            }
272
273            a.nav {
274                border-radius: 0;
275                border-right-width: 0;
276                border-left-width: 0;
277            }
278
279            .nav-panel,
280            a.nav {
281                padding-right: .8em;
282            }
283        }
284    }
285}
286
287
288/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
289/* max-width: 1439px */
290
291@media @screen_max-xlg {
292    #dokuwiki__aside {
293        nav {
294            li:not([class]),
295            .li {
296                font-size: @font-size-default;
297                padding: .15em 0 .15em .25rem;
298
299                * {
300                    font-size: inherit;
301                    font-weight: inherit;
302                }
303            }
304        }
305    }
306}
307