ec7e7de05658fec2129c5f3d38d4ebf4b00ba486
[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: 0px;
102         top: 3px;
103         margin: 0;
104         @include size(line-height, 43px);
105         @include size(font-size, 10px);
106         list-style: none;
107
108         li {
109             display: inline;
110
111             &:after {
112                 content: " | ";
113             }
114             &:last-child:after {
115                 content: "";
116             }
117         }
118     }
119
120     #main-menu {
121         list-style: none;
122         padding: 0;
123         margin: 0;
124
125         background-color: #e2e2e2;
126         position: absolute;
127         top: 94px;
128         @include size(width, 975px);
129
130         li {
131             display: inline-block;
132             @include size(width, 16.6%);
133
134             &.active {
135                 background-color: white;
136             }
137
138             a {
139                 text-align: center;
140                 display: block;
141                 @include size(line-height, 13px);
142                 @include size(padding, 18px 0 15px);
143                 //@include size(border-bottom, 3px solid #e2e2e2);
144                 color: #0c7076;
145                 @include size(font-size, 15px);
146                 @include mono;
147
148                 &.active {
149                     border-bottom-color: white;
150                 }
151             }
152         }
153     }
154 }