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   @media screen and (min-width: 48.25em) {
  56     body:not(:target) .toggle-menu {
  57       .toggle-menu__list .toggle-menu__item {
  58         display: inline-block;
  59         overflow: inherit;
  60       }
  61     }
  62   }
  63 }
  64
  65 @mixin _toggle-menu-theme {
  66
  67   .toggle-menu {
  68
  69     a {
  70       color: white;
  71       text-decoration: none;
  72     }
  73
  74     .toggle-menu__button {
  75       cursor: pointer;
  76       line-height: 2em;
  77       padding: .5em;
  78       font-weight: bold;
  79
  80       &:after {
  81         content: icon(hamburger);
  82         font-size: 2em;
  83         float: right;
  84       }
  85     }
  86
  87     .toggle-menu__button--show {
  88       background-color: red;
  89     }
  90
  91     .toggle-menu__button--hide {
  92       background-color: darkred;
  93       &:after {
  94         content: icon(cross);
  95       }
  96     }
  97
  98     .toggle-menu__list {
  99       background-color: orange;
 100       list-style-type: none;
 101       margin-top: 0;
 102       padding: 0;
 103     }
 104
 105     .toggle-menu__list .toggle-menu__item {
 106       a {
 107         color: black;
 108         padding: .5em 1em;
 109         display: block;
 110
 111       }
 112       :hover {
 113         background-color: yellow;
 114       }
 115     }
 116   }
 117 }
 118
 119
 120 $imported-once: false !default;
 121 @mixin toggle-menu-common($show-menu-id) {
 122   $imported-once: $imported-once !global;
 123   @if ($imported-once == false) {
 124     $imported-once: true !global;
 125     @include _toggle-menu-common($show-menu-id);
 126     @include _toggle-menu-theme;
 127   }
 128 }
 129
 130 @mixin toggle-menu($show-menu-id) {
 131
 132   @include toggle-menu-common($show-menu-id);
 133
 134   /* mobile-first style for ##{$show-menu-id} when :target is supported */
 135   body:not(:target) .toggle-menu {
 136     ##{$show-menu-id}:target {
 137       ~ .toggle-menu__list .toggle-menu__item {
 138         height: auto;
 139         -moz-transition: height .25s, line-height .25s;
 140         -ms-transition: height .25s, line-height .25s;
 141         -o-transition: height .25s, line-height .25s;
 142         -webkit-transition: height .25s, line-height .25s;
 143         transition: height .25s, line-height .25s;
 144       }
 145
 146       ~ .toggle-menu__button--show {
 147         display: none;
 148       }
 149
 150       ~ .toggle-menu__button--hide {
 151         display: block;
 152       }
 153     }
 154   }
 155
 156   /* big screen style for ##{$show-menu-id} when :target is supported */
 157   @media screen and (min-width: 48.25em) {
 158     body:not(:target) .toggle-menu {
 159       ##{$show-menu-id}, ##{$show-menu-id}:target {
 160         ~ .toggle-menu__list .toggle-menu__item {
 161           height: auto;
 162         }
 163
 164         ~ .toggle-menu__button--show {
 165           display: none;
 166         }
 167
 168         ~ .toggle-menu__button--hide {
 169           display: none;
 170         }
 171       }
 172     }
 173   }
 174 }