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