API links fixes.
[wolnelektury.git] / src / wolnelektury / static / scss / main / menu.scss
1 /* ok */
2
3 $menu_width: 200px;
4
5
6 /* This is duplication of code for reader menu button. */
7 %menu-toggle {
8     position: relative;
9     padding: 0;
10     &:before {
11         content: "";
12         position: absolute;
13         top: 8px;
14         height: 5px;
15         border-top: 15px double #ddd;
16         border-bottom: 5px solid #ddd;
17     }
18 }
19
20
21 #show-menu {
22     @extend %menu-toggle;
23     display: block;
24     background: #191919;
25     color: #ddd;
26     text-align: center;
27     z-index: 100;
28     @include size(width, 44px);
29     @include size(height, 44px);
30     padding: 0;
31     position: absolute;
32     left: 10px;
33     top: 25px;
34
35     &:before {
36         left: 8px;
37         right: 8px;
38     }
39
40     @media screen and (min-width: 1024px) {
41         display: none;
42     }
43 }
44
45 body.menu-on {
46     margin-left: $menu_width;
47     margin-right: -$menu_width;
48
49     @media screen and (min-width: 1024px) {
50         margin-left: 0;
51         margin-right: 0;
52     }
53
54     #menu {
55         display: block;
56     }
57 }
58
59 #menu {
60     display: none;
61     position: fixed;
62     left: 0;
63     top: 0;
64     width: $menu_width;
65     background: #141414;
66     height: 100%;
67     overflow-y: auto;
68     z-index: 90;
69
70     @media screen and (min-width: 1024px) {
71         display: block;
72         width: 975px;
73         height: 0;
74         overflow: visible;
75         margin: auto;
76         position: absolute;
77         top: 0;
78     }
79
80     ul {
81         list-style: none;
82         padding: 0;
83
84         li {
85             padding: .5em 1em;
86
87             @media screen and (min-width: 1024px) {
88                 padding: 0;
89             }
90         }
91     }
92 }
93
94
95
96
97 @media screen and (min-width: 1024px) {
98     #user-info {
99         @include mono;
100         position: absolute;
101         right: 150px;
102         top: 4px;
103         @include size(font-size, 10px);
104         list-style: none;
105
106         li {
107             display: inline;
108
109             &:after {
110                 content: " | ";
111             }
112             &:last-child:after {
113                 content: "";
114             }
115         }
116     }
117
118     #main-menu {
119         list-style: none;
120         padding: 0;
121         margin: 0;
122
123         background-color: #e2e2e2;
124         position: absolute;
125         top: 94px;
126         @include size(width, 975px);
127
128         li {
129             display: inline-block;
130             @include size(width, 20%);
131
132             &.active {
133                 background-color: white;
134             }
135
136             a {
137                 text-align: center;
138                 display: block;
139                 @include size(line-height, 13px);
140                 @include size(padding, 18px 0 15px);
141                 //@include size(border-bottom, 3px solid #e2e2e2);
142                 color: #0c7076;
143                 @include size(font-size, 15px);
144                 @include mono;
145
146                 &.active {
147                     border-bottom-color: white;
148                 }
149             }
150         }
151     }
152 }