380ba22438ee0dcfb97374ff2073f6d307219466
[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 /* Button for showing menu */
15 #menu-toggle-on {
16     @extend %menu-toggle;
17     @include size(width, $W_NONUMBERS_TINY);
18     position: fixed;
19     top: 0;
20     left: 0;
21     background: #191919;
22     color: #ddd;
23     text-align: center;
24     z-index: 100;
25     @include size(height, 44px);
26
27     @include min-screen($S_NONUMBERS_TINY_MAX) {
28         @include size(width, $W_NONUMBERS);
29     }
30
31     @include min-screen($S_NUMBERS) {
32         @include size(width, 44px);
33     }
34
35     &:before {
36         left: 5px;
37         right: 5px;
38         @include min-screen(240px) {
39             left: 8px;
40             right: 8px;
41         }
42     }
43 }
44
45 #menu-toggle-off {
46     @extend %menu-toggle;
47     height: 24px;
48     &:before {
49         left: 25px;
50         right: 25px;
51     }
52 }
53
54
55 #menu {
56     display: none;
57     z-index: 101;
58
59     width: 80px;
60     position: fixed;
61     top: 0;
62     left: 0;
63     text-align: center;
64     background: #191919;
65     height: 100%;
66
67     line-height: 1.1em;
68
69     ul {
70         list-style: none;
71         margin: 0;
72         padding: 0;
73
74         li {
75
76             a {
77                 padding: 10px 0;
78                 color: white;
79                 display: block;
80                 text-decoration: none;
81
82                 &.active {
83                     background: white;
84                     color: black;
85                 }
86
87                 .label {
88                     display: block;
89                     font-size: 12px;
90                 }
91             }
92         }
93
94     }
95 }
96
97 /* body class for showing menu */
98 .menu-showed #menu {
99     display: block;
100 }
101
102 /* menu showing by default */
103 @include min-screen(640px) {
104     #menu {
105         display: block;
106     }
107     /* body class for hiding menu */
108     .menu-hidden #menu {
109         display: none;
110     }
111 }