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