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