Make some menus reponsive, some work on book boxes.
[wolnelektury.git] / apps / wolnelektury_core / static / css / main / menu.scss
1 @import "tools";
2
3 #nav-line {
4     background-color: #e2e2e2;
5     position: relative;
6
7     @media screen and (min-width: 62.5em) {
8         @include size-px(width, 975);
9         margin: auto;
10     }
11
12     #show-menu {
13         display: block;
14         float: left;
15         @include size-px(line-height, 13);
16         @include size-px(padding-top, 18);
17         @include size-px(padding-bottom, 18);
18         @include size-px(padding-left, 13);
19         @include size-px(padding-right, 13);
20         color: #0c7076;
21         @include size-px(font-size, 11);
22         @include mono;
23
24         .long {
25             display: none;
26
27             &:after {
28                 @include size-px(padding-left, 10);
29                 content: url("/static/img/arrow-gray.png");
30                 vertical-align: top;
31             }
32         }
33
34         @media screen and (min-width: 20em) {
35             .long { display: inline; }
36             .short { display: none; }
37         }
38
39         @media screen and (min-width: 53em) {
40             display: none;
41         }
42     }
43
44     ul#menu {
45         list-style: none;
46         padding: 0;
47         margin: 0;
48
49         display: none;
50         position: absolute;
51         top: 49px;
52         left: 0;
53         right: 10px;
54
55         @media screen and (min-width: 24em) {
56             right: auto;
57         }
58
59         @media screen and (min-width: 53em) {
60             display: block;
61             position: static;
62             @include size-px(margin-left, 6);
63         }
64
65         li.menu {
66             background-color: #e2e2e2;
67
68             @media screen and (min-width: 53em) {
69                 float: left;
70             }
71
72             a.menu {
73                 display: block;
74                 @include size-px(line-height, 13);
75                 @include size-px(padding-top, 18);
76                 @include size-px(padding-bottom, 15);
77
78                 @include size-px(border-bottom-width, 3);
79                 border-bottom-style: solid;
80                 border-bottom-color: #e2e2e2;
81                 
82                 @include size-px(padding-left, 13);
83                 @include size-px(padding-right, 13);
84                 color: #0c7076;
85                 @include size-px(font-size, 11);
86                 @include mono;
87             }
88
89             a.hidden-box-trigger:hover {
90                 border-bottom-color: white;
91             }
92         }
93     }
94
95     #lang-menu {
96         display: block;
97         float: right;
98
99         @include size-px(padding-left, 25);
100         @include size-px(padding-right, 20);
101         background: #f7f7f7;
102         @include mono;
103
104         @media screen and (min-width: 15em) {
105             position: relative;
106         }
107
108         #lang-button {
109             display:block;
110             @include size-px(line-height, 17);
111             @include size-px(padding-top, 16);
112             @include size-px(padding-bottom, 16);
113
114             @include size-px(font-size, 10);
115             color: #717171;
116
117             .label {
118                 display: none;
119
120                 @media screen and (min-width: 62.5em) {
121                     display: inline;
122                 }
123
124                 &:after {
125                     @include size-px(padding-left, 10);
126                     content: url("/static/img/arrow-gray.png");
127                     vertical-align: top;
128                 }
129             }
130
131             .lang-flag {
132                 @include size-px(font-size, 13);
133                 @include size-px(line-height, 15);
134             }
135         }
136
137         #lang-menu-items {
138             z-index: 9999;
139
140             button {
141                 @include mono;
142                 display: none;
143                 background: #f7f7f7;
144                 color: #6f6f6f;
145                 cursor: pointer;
146                 width: 100%;
147                 margin: 0;
148                 padding: 0;
149
150                 @include size-px(padding-top, 10);
151                 @include size-px(padding-bottom, 10);
152
153                 @media screen and (min-width: 62.5em) {
154                     @include size-px(padding-top, 5);
155                     @include size-px(padding-bottom, 5);
156                 }
157
158                 border-style: solid;
159                 border-color: #ddd;
160                 border-width: 0;
161                 @include size-px(border-bottom-width, 1);
162
163                 @include size-px(font-size, 13);
164
165                 &.active {
166                     color: #000;
167                 }
168             }
169         }
170
171         &:hover, &.hover {
172             #lang-menu-items {
173                 position: absolute;
174                 padding: 0;
175                 left: 0;
176                 right: 0;
177
178                 @media screen and (min-width: 15em) {
179                     left: auto;
180                     @include size-px(width, 180);
181                     @include size-px(top, 49);
182                 }
183                 @media screen and (min-width: 62.5em) {
184                     width: 100%;
185                 }
186
187                 button {
188                     display: block;
189                 }
190             }
191         }
192     }
193 }