fixes
[wolnelektury.git] / src / wolnelektury / static / scss / book_text / themes.scss
1 nav #menu-themes {
2     display: none;
3 }
4
5 /* Add a missing header. */
6 #themes:before {
7     content: "Motywy";
8 }
9
10
11 @mixin theme-hidden {
12     width: 20px;
13     height: 20px;
14     overflow: hidden;
15     margin-right: -20px;
16     border: none;
17     padding: 0;
18
19     &:before {
20         content: "▲";
21         color: #ccc;
22         text-align: center;
23         display: block;
24     }
25
26     @include min-screen(240px) {
27         width: 30px;
28         margin-right: -30px;
29         &:before {
30             font-size: 2em;
31         }
32     }
33
34     @include min-screen(320px) {
35         width: 44px;
36         margin-right: -44px;
37         &:before {
38             font-size: 2.5em;
39         }
40     }
41
42     &.showing {
43         @include theme-showing;
44     }
45
46 }
47
48 @mixin theme-showing {
49     @include size(width, 120px);
50     height: auto;
51     overflow: visible;
52     @include size(margin-left, 30px);
53     @include size(font-size, 14.4px);
54     text-indent: 0;
55
56     @include size(border-left, 1px solid #DDDDDD);
57     color: #777;
58     @include size(padding, 0 0 0 8px);
59
60     &:before {
61         display: none;
62     }
63 }
64
65 .theme-begin {
66     @include theme-hidden;
67
68     font-size: .9em;
69     position: relative;
70     float: right;
71     margin-bottom: 8px;
72     clear: both;
73     line-height: 1.5em;
74     text-align: left;
75     z-index: 60;
76
77     font-style: normal;
78     font-weight: normal;
79     font-variant: normal;
80     letter-spacing: 0;
81     text-transform: none;
82     text-decoration: none;
83     user-select: none;
84     -webkit-user-select: none;
85     -moz-user-select: none;
86     -ms-user-select: none;
87
88     @include min-screen(600px) {
89         @include theme-showing;
90         margin-right: -160px;
91     }
92
93     &.showing {
94         @include theme-showing;
95     }
96 }
97
98
99 .always-hide-themes {
100     .theme-begin {
101         @include theme-hidden;
102     }
103 }
104
105 .with-other-text {
106     .theme-begin {
107         @include theme-hidden;
108
109         @include min-screen(1200px) {
110             @include theme-showing;
111             margin-right: -160px;
112         }
113     }
114 }