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;
 142         -ms-transition: height .25s;
 143         -o-transition: height .25s;
 144         -webkit-transition: height .25s;
 145         transition: 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 }