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