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