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