6dd028aceebbd44c337480af85eda9240d0bac50
[experiments/scss-responsive-toggle-menu.git] / scss / modules / _toggle-menu.scss
1 // toggle-menu - An SCSS mixin for pure CSS responsive toggle menus
2 // 
3 // Copyright (C) 2017  Antonio Ospite <ao2@ao2.it>
4 // 
5 // This program is free software: you can redistribute it and/or modify
6 // it under the terms of the GNU General Public License as published by
7 // the Free Software Foundation, either version 3 of the License, or
8 // (at your option) any later version.
9 // 
10 // This program is distributed in the hope that it will be useful,
11 // but WITHOUT ANY WARRANTY; without even the implied warranty of
12 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13 // GNU General Public License for more details.
14 // 
15 // You should have received a copy of the GNU General Public License
16 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
17
18 @mixin _toggle-menu-common($show-menu-id) {
19
20   /* common fallback style for when :target is not supported */
21   .toggle-menu {
22     .toggle-menu__target {
23       display: none;
24     }
25
26     .toggle-menu__button--show {
27       display: none;
28     }
29
30     .toggle-menu__button--hide {
31       display: none;
32     }
33
34     .toggle-menu__list .toggle-menu__item {
35       height: auto;
36     }
37   }
38
39   /* common mobile-first style for when :taget is supported */
40   body:not(:target) .toggle-menu {
41     .toggle-menu__list .toggle-menu__item {
42       overflow: hidden;
43       height: 0;
44     }
45
46     .toggle-menu__button--show {
47       display: block;
48     }
49
50     .toggle-menu__button--hide {
51       display: none;
52     }
53   }
54
55   /* common big screen style for when :target is supported */
56   @media screen and (min-width: 48.25em) {
57     body:not(:target) .toggle-menu {
58       .toggle-menu__list .toggle-menu__item {
59         display: inline-block;
60         overflow: inherit;
61       }
62     }
63   }
64 }
65
66 @mixin _toggle-menu-theme {
67
68   /* toggle-menu theming */
69   .toggle-menu {
70
71     a {
72       color: white;
73       text-decoration: none;
74     }
75
76     .toggle-menu__button {
77       cursor: pointer;
78       line-height: 2em;
79       padding: .5em;
80       font-weight: bold;
81
82       &:after {
83         content: icon(hamburger);
84         font-size: 2em;
85         float: right;
86       }
87     }
88
89     .toggle-menu__button--show {
90       background-color: red;
91     }
92
93     .toggle-menu__button--hide {
94       background-color: darkred;
95       &:after {
96         content: icon(cross);
97       }
98     }
99
100     .toggle-menu__list {
101       background-color: orange;
102       list-style-type: none;
103       margin-top: 0;
104       padding: 0;
105     }
106
107     .toggle-menu__list .toggle-menu__item {
108       a {
109         color: black;
110         padding: .5em 1em;
111         display: block;
112
113       }
114       :hover {
115         background-color: yellow;
116       }
117     }
118   }
119 }
120
121
122 $imported-once: false !default;
123 @mixin toggle-menu-common($show-menu-id) {
124   $imported-once: $imported-once !global;
125   @if ($imported-once == false) {
126     $imported-once: true !global;
127     @include _toggle-menu-common($show-menu-id);
128     @include _toggle-menu-theme;
129   }
130 }
131
132 @mixin toggle-menu($show-menu-id) {
133
134   @include toggle-menu-common($show-menu-id);
135
136   /* mobile-first style for ##{$show-menu-id} when :target is supported */
137   body:not(:target) .toggle-menu {
138     ##{$show-menu-id}:target {
139       ~ .toggle-menu__list .toggle-menu__item {
140         height: auto;
141         -moz-transition: height .25s, line-height .25s;
142         -ms-transition: height .25s, line-height .25s;
143         -o-transition: height .25s, line-height .25s;
144         -webkit-transition: height .25s, line-height .25s;
145         transition: height .25s, line-height .25s;
146       }
147
148       ~ .toggle-menu__button--show {
149         display: none;
150       }
151
152       ~ .toggle-menu__button--hide {
153         display: block;
154       }
155     }
156   }
157
158   /* big screen style for ##{$show-menu-id} when :target is supported */
159   @media screen and (min-width: 48.25em) {
160     body:not(:target) .toggle-menu {
161       ##{$show-menu-id}, ##{$show-menu-id}:target {
162         ~ .toggle-menu__list .toggle-menu__item {
163           height: auto;
164         }
165
166         ~ .toggle-menu__button--show {
167           display: none;
168         }
169
170         ~ .toggle-menu__button--hide {
171           display: none;
172         }
173       }
174     }
175   }
176 }