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 $toggle-menu-transition-delay: .25s;
  19
  20 @mixin _toggle-menu-common($show-menu-id) {
  21
  22   /* common fallback style for when :target is not supported */
  23   .toggle-menu {
  24     .toggle-menu__target {
  25       display: none;
  26     }
  27
  28     .toggle-menu__button--show {
  29       display: none;
  30     }
  31
  32     .toggle-menu__button--hide {
  33       display: none;
  34     }
  35
  36     .toggle-menu__list .toggle-menu__item {
  37       height: auto;
  38     }
  39   }
  40
  41   /* common mobile-first style for when :taget is supported */
  42   body:not(:target) .toggle-menu {
  43     .toggle-menu__list .toggle-menu__item {
  44       overflow: hidden;
  45       height: 0;
  46       -moz-transition: height $toggle-menu-transition-delay;
  47       -ms-transition: height $toggle-menu-transition-delay;
  48       -o-transition: height $toggle-menu-transition-delay;
  49       -webkit-transition: height $toggle-menu-transition-delay;
  50       transition: height $toggle-menu-transition-delay;
  51     }
  52
  53     .toggle-menu__button--show {
  54       display: block;
  55     }
  56
  57     .toggle-menu__button--hide {
  58       display: none;
  59     }
  60   }
  61
  62   /* common big screen style for when :target is supported */
  63   @media screen and (min-width: 48.25em) {
  64     body:not(:target) .toggle-menu {
  65       .toggle-menu__list .toggle-menu__item {
  66         display: inline-block;
  67         overflow: inherit;
  68       }
  69     }
  70   }
  71 }
  72
  73 @mixin _toggle-menu-theme {
  74
  75   /* toggle-menu theming */
  76   .toggle-menu {
  77
  78     a {
  79       color: white;
  80       text-decoration: none;
  81     }
  82
  83     .toggle-menu__button {
  84       cursor: pointer;
  85       line-height: 2em;
  86       padding: .5em;
  87       font-weight: bold;
  88
  89       &:after {
  90         content: icon(hamburger);
  91         font-size: 2em;
  92         float: right;
  93       }
  94     }
  95
  96     .toggle-menu__button--show {
  97       background-color: red;
  98     }
  99
 100     .toggle-menu__button--hide {
 101       background-color: darkred;
 102       &:after {
 103         content: icon(cross);
 104       }
 105     }
 106
 107     .toggle-menu__list {
 108       background-color: orange;
 109       list-style-type: none;
 110       margin-top: 0;
 111       padding: 0;
 112     }
 113
 114     .toggle-menu__list .toggle-menu__item {
 115       a {
 116         color: black;
 117         padding: .5em 1em;
 118         display: block;
 119
 120       }
 121       :hover {
 122         background-color: yellow;
 123       }
 124     }
 125   }
 126 }
 127
 128
 129 $imported-once: false !default;
 130 @mixin toggle-menu-common($show-menu-id) {
 131   $imported-once: $imported-once !global;
 132   @if ($imported-once == false) {
 133     $imported-once: true !global;
 134     @include _toggle-menu-common($show-menu-id);
 135     @include _toggle-menu-theme;
 136   }
 137 }
 138
 139 @mixin toggle-menu($show-menu-id) {
 140
 141   @include toggle-menu-common($show-menu-id);
 142
 143   /* mobile-first style for ##{$show-menu-id} when :target is supported */
 144   body:not(:target) .toggle-menu {
 145     ##{$show-menu-id}:target {
 146       ~ .toggle-menu__list .toggle-menu__item {
 147         // NOTE: for the transition animation to work 'height' cannot be auto.
 148         height: 2em;
 149         -moz-transition: height $toggle-menu-transition-delay;
 150         -ms-transition: height $toggle-menu-transition-delay;
 151         -o-transition: height $toggle-menu-transition-delay;
 152         -webkit-transition: height $toggle-menu-transition-delay;
 153         transition: height $toggle-menu-transition-delay;
 154       }
 155
 156       ~ .toggle-menu__button--show {
 157         display: none;
 158       }
 159
 160       ~ .toggle-menu__button--hide {
 161         display: block;
 162       }
 163     }
 164   }
 165
 166   /* big screen style for ##{$show-menu-id} when :target is supported */
 167   @media screen and (min-width: 48.25em) {
 168     body:not(:target) .toggle-menu {
 169       ##{$show-menu-id}, ##{$show-menu-id}:target {
 170         ~ .toggle-menu__list .toggle-menu__item {
 171           height: auto;
 172         }
 173
 174         ~ .toggle-menu__button--show {
 175           display: none;
 176         }
 177
 178         ~ .toggle-menu__button--hide {
 179           display: none;
 180         }
 181       }
 182     }
 183   }
 184 }