workaround problem witch search (collision with migdal)
[wolnelektury.git] / src / wolnelektury / static / scss / main / header.scss
1 @import "../tools";
2
3 $header_bg: #191919;
4 $small_logo: .9;
5
6 #banners {
7   display: inline-block;
8   width: 100%;
9
10   > a {
11     display: block;
12     width: 100%;
13   }
14
15   img {
16     display: block;
17     margin: 0 auto;
18     width: 100%
19   }
20 }
21
22 header#main {
23   @include size(line-height, 20px); /* Make links easier to click when wrapped. */
24   background-color: $header_bg;
25   color: #bbb;
26   position: relative;
27
28   /*text-align: center;*/
29
30   @media screen and (min-width: 1024px) {
31     width: 975px;
32     margin: auto;
33   }
34
35   a {
36     color: #17CFDB;
37   }
38
39   #logo {
40     display: block;
41     margin: auto;
42
43     @include size(width, 173px);
44     @include size(height, 94px);
45
46     img {
47       @include size(width, $small_logo * 173px);
48       @include size(height, $small_logo * 94px);
49       margin-top: (1 - $small_logo) * 94px / 2;
50       margin-left: (1 - $small_logo) * 173px / 2;
51
52       @media screen and (min-width: 768px) {
53         @include size(width, 173px);
54         @include size(height, 94px);
55         margin-top: 0;
56         margin-left: 0;
57       }
58     }
59
60     @media screen and (min-width: 1024px) {
61       margin-left: 0;
62     }
63   }
64
65   #tagline {
66     display: none;
67     position: absolute;
68     @include size(top, 3px);
69     @include size(left, 255px);
70     @include size(font-size, 13px);
71
72     @media screen and (min-width: 1024px) {
73       display: block;
74     }
75   }
76
77   #lang-menu {
78     display: block;
79     position: absolute;
80     top: 0;
81     right: 0;
82
83     @include mono;
84
85     #lang-button {
86       display: block;
87
88       @include size(font-size, 10px);
89       @include size(line-height, 17px);
90       @include size(padding-left, 25px);
91       @include size(padding-right, 20px);
92       @include size(padding-top, 16px);
93       @include size(padding-bottom, 16px);
94
95       .label {
96         &:after {
97           @include size(padding-left, 10px);
98           content: url("/static/img/arrow-gray.png");
99           vertical-align: top;
100         }
101       }
102
103       .lang-flag {
104         @include size(font-size, 13px);
105         @include size(line-height, 15px);
106       }
107     }
108
109     #lang-menu-items {
110       z-index: 9999;
111
112       button {
113         @include mono;
114         display: none;
115         background: #f7f7f7;
116         color: #6f6f6f;
117         cursor: pointer;
118         width: 100%;
119         margin: 0;
120         @include size(padding, 10px 0);
121
122         @media screen and (min-width: 62.5em) {
123           @include size(padding, 5px 0);
124         }
125
126         border-width: 0;
127         @include size(border-bottom, 1px solid #ddd);
128
129         @include size(font-size, 13px);
130
131         &.active {
132           color: #000;
133         }
134       }
135     }
136
137     &:hover, &.hover {
138       #lang-menu-items {
139         position: absolute;
140         padding: 0;
141         right: 0;
142         width: 100%;
143         button {
144           display: block;
145         }
146       }
147     }
148
149   }
150
151   #main-menu-toggle {
152     position: absolute;
153     left: 0;
154     top: 0;
155   }
156
157   /*#user-info {
158     margin-top: 0;
159     @include size(margin-left, 5px);
160     @include size(margin-right, 5px);
161     padding-top: 0;
162     @include mono;
163     @include size(font-size, 10px);
164     position: relative;
165
166     @media screen and (min-width: 24em) {
167       @include size(padding-top, 15px);
168       @include size(margin-left, 180px);
169       text-align: right;
170     }
171     @media screen and (min-width: 62.5em) {
172       position: absolute;
173       top: 0;
174       right: 0;
175       @include size(margin-left, 0);
176       @include size(margin-right, 0);
177     }
178
179     !* We want submenu on far left on small screens. *!
180     .hidden-box-wrapper {
181       position: static;
182       @media screen and (min-width: 24em) {
183         position: relative;
184       }
185     }
186
187     #user-menu {
188       display: none;
189
190       text-align: left;
191       line-height: 1.6em;
192       left: 0;
193       right: 0;
194       top: 2em;
195
196       @media screen and (min-width: 15em) {
197         right: auto;
198         width: 15em;
199       }
200
201       a {
202         color: #0D7E85;
203       }
204     }
205   }*/
206
207   form#search-area {
208     position: relative;
209     clear: both;
210     @include size(height, 45px);
211     background: #444444;
212     color: white;
213
214     @media screen and (min-width: 1024px) {
215       position: absolute;
216       @include size(top, 49px);
217       @include size(left, 240px);
218       @include size(right, 0);
219     }
220
221     #search-field {
222       position: absolute;
223       @include size(top, 5px);
224       @include size(left, 5px);
225       @include size(right, 113px);
226
227       label {
228         @include hidden-label;
229       }
230       input#search {
231         z-index: 200;
232         position: relative;
233         @include size(height, 33px);
234         width: 100%;
235         padding: 0;
236         @include size(padding-left, 13px);
237         @include size(line-height, 32.5px);
238
239         border: none;
240         @include size(border-radius, 5px);
241         @include box-shadow(0 0 6.5px #444444 inset);
242
243         font-family: Georgia, serif;
244         @include size(font-size, 13px);
245         background-color: white;
246         color: black;
247
248         /* styling search placeholder */
249         &::placeholder {
250           font-family: Georgia, serif;
251           font-style: italic;
252           color: #767676;
253         }
254         &::-webkit-input-placeholder {
255           font-family: Georgia, serif;
256           font-style: italic;
257           color: #767676;
258         }
259         &::-moz-placeholder {
260           font-family: Georgia, serif;
261           font-style: italic;
262           color: #767676;
263         }
264       }
265     }
266     button {
267       display: inline-block;
268       position: absolute;
269       top: 0;
270       right: 0;
271       @include size(height, 45px);
272       @include size(width, 94px);
273       margin: 0;
274       padding: 0;
275
276       border: none;
277
278       @include mono;
279       @include size(font-size, 11px);
280       background: #018189;
281       color: white;
282     }
283   }
284 }
285
286 @media screen and (min-width: 1024px) {
287   #whole-header {
288     height: 94px + 49px;
289   }
290
291   #header-wrapper {
292     position: relative;
293     background-color: $header_bg;
294   }
295 }