xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision 4055de39fa1d13689fd492775c7237dab417a8bd) 
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    // show when toggled
112    #dokuwiki__aside.show {
113        display: block;
114
115        position: absolute;
116        left: 0;
117        z-index: 200; // above all
118
119
120        border-right: @ini_border 1px solid;
121        box-shadow: @box-shadow;;
122
123        max-width: 100%;
124        min-width: 45%;
125        height: 100%;
126
127        background-color: @ini_background;
128    }
129}
130
131
132
133// FIXME check if the stuff below is still relevant
134
135/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
136/* min-width: 1440px */
137
138@media @screen_min-xlg {
139    #dokuwiki__aside.main-sidebar {
140        .nav-main {
141            .li {
142                font-size: @font-size-default;
143                padding: .1em 0;
144
145                * {
146                    font-size: inherit;
147                    font-weight: inherit;
148                }
149            }
150
151            > ul > li > .li {
152                font-size: @font-size-default;
153
154                * {
155                    font-size: inherit;
156                }
157            }
158        }
159    }
160
161
162}
163
164/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
165/* max-width: 1199px */
166
167@media @screen_max-xlg {
168    #dokuwiki__aside.main-sidebar {
169        .nav-main {
170            .li {
171                font-size: @font-size-default;
172                padding: .15em 0 .15em .25rem;
173
174                * {
175                    font-size: inherit;
176                    font-weight: inherit;
177                }
178            }
179
180            > ul > li > .li {
181                font-size: @font-size-default;
182
183                > * {
184                    font-size: inherit;
185                }
186            }
187        }
188    }
189}
190