496b805e902801b602e1b9fc64c2161d12362866
[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         z-index: 400;
55
56         @media screen and (min-width: 24em) {
57             right: auto;
58         }
59
60         @media screen and (min-width: 53em) {
61             display: block !important;
62             position: static;
63             @include size-px(margin-left, 6);
64         }
65
66         li.menu {
67             background-color: #e2e2e2;
68
69             @media screen and (min-width: 53em) {
70                 float: left;
71             }
72
73             a.menu {
74                 display: block;
75                 @include size-px(line-height, 13);
76                 @include size-px(padding-top, 18);
77                 @include size-px(padding-bottom, 15);
78
79                 @include size-px(border-bottom-width, 3);
80                 border-bottom-style: solid;
81                 border-bottom-color: #e2e2e2;
82                 
83                 @include size-px(padding-left, 13);
84                 @include size-px(padding-right, 13);
85                 color: #0c7076;
86                 @include size-px(font-size, 11);
87                 @include mono;
88             }
89
90             a.hidden-box-trigger:hover {
91                 border-bottom-color: white;
92             }
93         }
94     }
95
96     #lang-menu {
97         display: block;
98         float: right;
99
100         @include size-px(padding-left, 25);
101         @include size-px(padding-right, 20);
102         background: #f7f7f7;
103         @include mono;
104
105         @media screen and (min-width: 15em) {
106             position: relative;
107         }
108
109         #lang-button {
110             display:block;
111             @include size-px(line-height, 17);
112             @include size-px(padding-top, 16);
113             @include size-px(padding-bottom, 16);
114
115             @include size-px(font-size, 10);
116             color: #717171;
117
118             .label {
119                 display: none;
120
121                 @media screen and (min-width: 62.5em) {
122                     display: inline;
123                 }
124
125                 &:after {
126                     @include size-px(padding-left, 10);
127                     content: url("/static/img/arrow-gray.png");
128                     vertical-align: top;
129                 }
130             }
131
132             .lang-flag {
133                 @include size-px(font-size, 13);
134                 @include size-px(line-height, 15);
135             }
136         }
137
138         #lang-menu-items {
139             z-index: 9999;
140
141             button {
142                 @include mono;
143                 display: none;
144                 background: #f7f7f7;
145                 color: #6f6f6f;
146                 cursor: pointer;
147                 width: 100%;
148                 margin: 0;
149                 padding: 0;
150
151                 @include size-px(padding-top, 10);
152                 @include size-px(padding-bottom, 10);
153
154                 @media screen and (min-width: 62.5em) {
155                     @include size-px(padding-top, 5);
156                     @include size-px(padding-bottom, 5);
157                 }
158
159                 border-style: solid;
160                 border-color: #ddd;
161                 border-width: 0;
162                 @include size-px(border-bottom-width, 1);
163
164                 @include size-px(font-size, 13);
165
166                 &.active {
167                     color: #000;
168                 }
169             }
170         }
171
172         &:hover, &.hover {
173             #lang-menu-items {
174                 position: absolute;
175                 padding: 0;
176                 left: 0;
177                 right: 0;
178
179                 @media screen and (min-width: 15em) {
180                     left: auto;
181                     @include size-px(width, 180);
182                     @include size-px(top, 49);
183                 }
184                 @media screen and (min-width: 62.5em) {
185                     width: 100%;
186                 }
187
188                 button {
189                     display: block;
190                 }
191             }
192         }
193     }
194 }