+// toggle-menu - An SCSS mixin for pure CSS responsive toggle menus
+//
+// Copyright (C) 2017 Antonio Ospite <ao2@ao2.it>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+@mixin _toggle-menu-common($show-menu-id) {
+
+ /* common fallback style for when :target is not supported */
+ .toggle-menu {
+ .toggle-menu__target {
+ display: none;
+ }
+
+ .toggle-menu__button--show {
+ display: none;
+ }
+
+ .toggle-menu__button--hide {
+ display: none;
+ }
+
+ .toggle-menu__list .toggle-menu__item {
+ height: auto;
+ }
+ }
+
+ /* common mobile-first style for when :taget is supported */
+ body:not(:target) .toggle-menu {
+ .toggle-menu__list .toggle-menu__item {
+ overflow: hidden;
+ height: 0;
+ }
+
+ .toggle-menu__button--show {
+ display: block;
+ }
+
+ .toggle-menu__button--hide {
+ display: none;
+ }
+ }
+
+ @media screen and (min-width: 48.25em) {
+ body:not(:target) .toggle-menu {
+ .toggle-menu__list .toggle-menu__item {
+ display: inline-block;
+ overflow: inherit;
+ }
+ }
+ }
+}
+
+@mixin _toggle-menu-theme {
+
+ .toggle-menu {
+
+ a {
+ color: white;
+ text-decoration: none;
+ }
+
+ .toggle-menu__button {
+ cursor: pointer;
+ line-height: 2em;
+ padding: .5em;
+ font-weight: bold;
+
+ &:after {
+ content: icon(hamburger);
+ font-size: 2em;
+ float: right;
+ }
+ }
+
+ .toggle-menu__button--show {
+ background-color: red;
+ }
+
+ .toggle-menu__button--hide {
+ background-color: darkred;
+ &:after {
+ content: icon(cross);
+ }
+ }
+
+ .toggle-menu__list {
+ background-color: orange;
+ list-style-type: none;
+ margin-top: 0;
+ padding: 0;
+ }
+
+ .toggle-menu__list .toggle-menu__item {
+ a {
+ color: black;
+ padding: .5em 1em;
+ display: block;
+
+ }
+ :hover {
+ background-color: yellow;
+ }
+ }
+ }
+}
+
+
+$imported-once: false !default;
+@mixin toggle-menu-common($show-menu-id) {
+ $imported-once: $imported-once !global;
+ @if ($imported-once == false) {
+ $imported-once: true !global;
+ @include _toggle-menu-common($show-menu-id);
+ @include _toggle-menu-theme;
+ }
+}
+
+@mixin toggle-menu($show-menu-id) {
+
+ @include toggle-menu-common($show-menu-id);
+
+ /* mobile-first style for ##{$show-menu-id} when :target is supported */
+ body:not(:target) .toggle-menu {
+ ##{$show-menu-id}:target {
+ ~ .toggle-menu__list .toggle-menu__item {
+ height: auto;
+ -moz-transition: height .25s, line-height .25s;
+ -ms-transition: height .25s, line-height .25s;
+ -o-transition: height .25s, line-height .25s;
+ -webkit-transition: height .25s, line-height .25s;
+ transition: height .25s, line-height .25s;
+ }
+
+ ~ .toggle-menu__button--show {
+ display: none;
+ }
+
+ ~ .toggle-menu__button--hide {
+ display: block;
+ }
+ }
+ }
+
+ /* big screen style for ##{$show-menu-id} when :target is supported */
+ @media screen and (min-width: 48.25em) {
+ body:not(:target) .toggle-menu {
+ ##{$show-menu-id}, ##{$show-menu-id}:target {
+ ~ .toggle-menu__list .toggle-menu__item {
+ height: auto;
+ }
+
+ ~ .toggle-menu__button--show {
+ display: none;
+ }
+
+ ~ .toggle-menu__button--hide {
+ display: none;
+ }
+ }
+ }
+ }
+}