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