xref: /template/sprintdoc/css/area_main-sidebar-nav.less (revision fa1028ad604270ca8d15fcbaf6a178833305018c) 
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    margin-left: @menu-margin; // moves *all* sidebar content to the right
12
13    // the toggle element
14    h6 {
15        cursor: pointer;
16        font-weight: normal;
17        margin-left: (@menu-margin * -1); // moves the toggles back to the left
18        color: @color-nav;
19        border: 1px solid transparent;
20        border-radius: @fix_border-radius;
21        transition: @transition color, @transition background-color, @transition border-color;
22
23        height: @icon-size + @margin-small;
24        display: flex;
25        flex-direction: row;
26        align-items: center;
27
28        span {
29            display: inline-block;
30            vertical-align: middle;
31        }
32
33        span.lbl {
34            flex-grow: 1;
35        }
36
37        span.ico {
38            width: @menu-margin;
39            height: @icon-size;
40            flex-grow: 0;
41            border-right: 1px solid @color-border;
42            text-align: center;
43            margin-right: @margin-small;
44            color: @color-nav;
45
46            // simple fake icon
47            strong {
48                display: inline-block;
49                font-size: @icon-size * 0.5;
50                width: @icon-size * 0.9;
51                height: @icon-size * 0.9;
52                line-height: @icon-size * 0.9;
53                margin: @icon-size * 0.05;
54                vertical-align: baseline;
55                text-align: center;
56                color: @color-nav;
57                border: 2px solid @color-nav;
58                border-top-right-radius: 50%;
59                border-bottom-left-radius: 50%;
60
61            }
62
63            // real icon
64            svg {
65                width: @icon-size;
66                height: @icon-size;
67                path {
68                    fill: @color-nav;
69                }
70            }
71        }
72
73        &:hover,
74        &:focus,
75        &:active {
76            background-color: @button_color;
77            border-color: @button_background;
78            color: @button_background;
79            text-decoration: none;
80
81            span.ico strong {
82                color: @button_background;
83                border-color: @button_background;
84            }
85
86            span.ico svg path {
87                fill: @button_background;
88            }
89        }
90    }
91
92    // the panel (hidden by default)
93    div.nav-panel {
94        display: none;
95    }
96}
97
98// FIXME check if the stuff below is still relevant
99
100/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
101/* min-width: 1440px */
102
103@media @screen_min-xlg {
104    #dokuwiki__aside.main-sidebar {
105        .nav-main {
106            .li {
107                font-size: @font-size-default;
108                padding: .1em 0;
109
110                * {
111                    font-size: inherit;
112                    font-weight: inherit;
113                }
114            }
115
116            > ul > li > .li {
117                font-size: @font-size-default;
118
119                * {
120                    font-size: inherit;
121                }
122            }
123        }
124    }
125}
126
127/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
128/* max-width: 1199px */
129
130@media @screen_max-xlg {
131    #dokuwiki__aside.main-sidebar {
132        .nav-main {
133            .li {
134                font-size: @font-size-default;
135                padding: .15em 0 .15em .25rem;
136
137                * {
138                    font-size: inherit;
139                    font-weight: inherit;
140                }
141            }
142
143            > ul > li > .li {
144                font-size: @font-size-default;
145
146                > * {
147                    font-size: inherit;
148                }
149            }
150        }
151    }
152}
153