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