experiment
[wolnelektury.git] / src / wolnelektury / static / scss / book_text / menu.scss
1 %menu-toggle {
2     position: relative;
3     padding: 0;
4     &:before {
5         content: "";
6         position: absolute;
7         top: 8px;
8         height: 5px;
9         border-top: 15px double #ddd;
10         border-bottom: 5px solid #ddd;
11     }
12 }
13
14 #no-menu {
15     @include size(width, $W_NONUMBERS_TINY);
16
17     @include min-screen($S_NONUMBERS_TINY_MAX) {
18         @include size(width, $W_NONUMBERS);
19     }
20
21     @include min-screen($S_NUMBERS) {
22         @include size(width, 44px);
23     }
24
25     /* Button for showing menu */
26     #menu-toggle-on {
27         @extend %menu-toggle;
28         display: block;
29         background: #191919;
30         color: #ddd;
31         text-align: center;
32         z-index: 100;
33         @include size(height, 44px);
34         padding: 0;
35
36         &:before {
37             left: 5px;
38             right: 5px;
39             @include min-screen(240px) {
40                 left: 8px;
41                 right: 8px;
42             }
43         }
44     }
45 }
46
47 #menu-toggle-off {
48     @extend %menu-toggle;
49     height: 24px;
50     &:before {
51         left: 45px;
52         right: 45px;
53     }
54 }
55
56
57 #menu {
58     display: none;
59     width: $W_MENU;
60     height: 100%;
61 }
62
63 #menu, #no-menu {
64     z-index: 101;
65     position: fixed;
66     top: 0;
67     left: 0;
68     overflow-x: hidden;
69     overflow-y: auto;
70     text-align: center;
71     line-height: 1.1em;
72     background: #191919;
73     color: #ddd;
74
75     ul {
76         list-style: none;
77         margin: 0;
78         padding: 0;
79
80         li {
81
82             a {
83                 padding: 10px 0;
84                 color: white;
85                 display: block;
86                 text-decoration: none;
87
88                 &.active {
89                     background: white;
90                     color: black;
91                 }
92
93                 .label {
94                     display: block;
95                     font-size: 12px;
96                 }
97             }
98         }
99
100     }
101 }
102
103 /* body class for showing menu */
104 .menu-showed {
105     #menu {
106         display: block;
107     }
108     #no-menu {
109         display: none;
110     }
111 }
112
113 /* menu showing by default */
114 @include min-screen($S_MENU) {
115     #menu {
116         display: block;
117     }
118     #no-menu {
119         display: none;
120     }
121     /* body class for hiding menu */
122     .menu-hidden {
123         #menu {
124             display: none;
125         }
126         #no-menu {
127             display: block;
128         }
129     }
130 }