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