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