1a555733b2c7a04d000fb8779789b4fd741cb596
[wolnelektury.git] / apps / wolnelektury_core / 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: 25px;
52         right: 25px;
53     }
54 }
55
56
57 #menu {
58     display: none;
59     width: 80px;
60     height: 100%;
61 }
62
63 #menu, #no-menu {
64     z-index: 101;
65     position: fixed;
66     top: 0;
67     left: 0;
68     text-align: center;
69     line-height: 1.1em;
70     background: #191919;
71     color: #ddd;
72
73     ul {
74         list-style: none;
75         margin: 0;
76         padding: 0;
77
78         li {
79
80             a {
81                 padding: 10px 0;
82                 color: white;
83                 display: block;
84                 text-decoration: none;
85
86                 &.active {
87                     background: white;
88                     color: black;
89                 }
90
91                 .label {
92                     display: block;
93                     font-size: 12px;
94                 }
95             }
96         }
97
98     }
99 }
100
101 /* body class for showing menu */
102 .menu-showed {
103     #menu {
104         display: block;
105     }
106     #no-menu {
107         display: none;
108     }
109 }
110
111 /* menu showing by default */
112 @include min-screen($S_MENU) {
113     #menu {
114         display: block;
115     }
116     #no-menu {
117         display: none;
118     }
119     /* body class for hiding menu */
120     .menu-hidden {
121         #menu {
122             display: none;
123         }
124         #no-menu {
125             display: block;
126         }
127     }
128 }