xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision d19c9b956a10733e19b591c2b923392cd41c27cb) 
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#dokuwiki__aside {
8    @icon-size: @font-size-big;
9    @menu-margin: @icon-size + @margin-small*2; // FIXME this is still wrong
10
11    > * {
12        margin-left: @menu-margin; // moves *all* sidebar content to the right
13    }
14
15    // the toggle element
16    a.nav {
17        font-size: @font-size-head6;
18        margin: 0 0 @font-size-head6;
19        cursor: pointer;
20        font-weight: normal;
21        margin-left: (@menu-margin * -1); // moves the toggles back to the left
22        color: @color-nav;
23        border: 1px solid transparent;
24        border-radius: @fix_border-radius;
25        transition: @transition color, @transition background-color, @transition border-color;
26
27        height: @icon-size + @margin-small;
28        display: flex;
29        display: -ms-flexbox;
30        flex-direction: row;
31        -ms-flex-direction: row;
32        align-items: center;
33
34        span {
35            display: inline-block;
36            vertical-align: middle;
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: @color-nav;
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: @color-nav;
63                border: 2px solid @color-nav;
64                border-top-right-radius: 50%;
65                border-bottom-left-radius: 50%;
66
67            }
68
69            // real icon
70            svg {
71                width: @icon-size;
72                height: @icon-size;
73                path {
74                    fill: @color-nav;
75                }
76            }
77        }
78
79        &:hover,
80        &:focus,
81        &:active {
82            background-color: @button_color;
83            border-color: @button_background;
84            color: @button_background;
85            text-decoration: none;
86
87            span.ico strong {
88                color: @button_background;
89                border-color: @button_background;
90            }
91
92            span.ico svg path {
93                fill: @button_background;
94            }
95        }
96    }
97
98    // the panel (hidden by default)
99    div.nav-panel {
100        display: none;
101    }
102}
103
104/**
105 * Sidebar handling in mobile view
106 */
107@media @screen_max-md {
108    // hide on medium and smaller screens
109    #dokuwiki__aside {
110        display: none;
111    }
112
113    // show when toggled
114    body.show-mobile-sidebar {
115
116        #dokuwiki__aside {
117            display: block;
118
119            position: absolute;
120            left: 1.25rem;//left margin of content container
121            z-index: 200; // above all
122            box-shadow: @box-shadow-right-bottom;
123            min-width: 45%;
124            max-width: 90%;
125            height: auto;
126
127            &:after{
128                content: "";
129                position: absolute;
130                top: 0;
131                left:0;
132                bottom:0;
133                right:0;
134                width: 100%;
135                height: 100%;
136                background: @ini_background;
137                background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
138                background: linear-gradient(left, @ini_background, @color-content-bg);
139
140                z-index: 0;
141            }
142
143            > nav{
144                position: relative;
145                //display: block;
146                z-index: 2;
147                &:first-child{
148                    margin-top: 1.2rem;
149                }
150            }
151
152            a.nav {
153                border-radius: 0;
154                border-right-width: 0;
155                border-left-width: 0;
156            }
157            .nav-panel,
158            a.nav{
159                padding-right: .8em;
160            }
161        }
162
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