assets/main/sass/layout/_navPanel.scss

   1 ///
   2 /// Massively by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Nav Panel */
   8
   9         #navPanelToggle {
  10                 @include icon;
  11                 @include vendor('transition', (
  12                         'color #{_duration(transition)} ease-in-out',
  13                         'background-color #{_duration(transition)} ease-in-out',
  14                         'box-shadow #{_duration(transition)} ease-in-out'
  15                 ));
  16                 display: none;
  17                 position: fixed;
  18                 top: 0.75rem;
  19                 right: 0.75rem;
  20                 border: 0;
  21                 color: _palette(invert, fg-bold);
  22                 font-family: _font(family-heading);
  23                 font-size: 0.9rem;
  24                 font-weight: _font(weight-heading);
  25                 letter-spacing: 0.075em;
  26                 padding: 0.375rem 1.25rem;
  27                 text-transform: uppercase;
  28                 z-index: _misc(z-index-base) + 1;
  29
  30                 &:before {
  31                         content: '\f0c9';
  32                         margin-right: 0.5rem;
  33                 }
  34
  35                 &.alt {
  36                         background-color: transparentize(_palette(bg), 0.125);
  37                         box-shadow: 0 0.125rem 0.75rem 0 transparentize(_palette(invert, bg), 0.75);
  38                         color: _palette(fg-bold);
  39
  40                         &:hover {
  41                                 background-color: _palette(bg);
  42                         }
  43                 }
  44
  45                 @include breakpoint('<=medium') {
  46                         display: block;
  47                 }
  48
  49                 @include breakpoint('<=small') {
  50                         font-size: 0.8rem;
  51                         padding: 0.25rem 1rem;
  52                 }
  53         }
  54
  55         #navPanel {
  56                 @include vendor('transform', 'translateX(20rem)');
  57                 @include vendor('transition', ('transform #{_duration(menu)} ease', 'box-shadow #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
  58                 display: none;
  59                 -webkit-overflow-scrolling: touch;
  60                 background: _palette(bg);
  61                 box-shadow: none;
  62                 color: _palette(fg-bold);
  63                 height: 100%;
  64                 max-width: 80%;
  65                 overflow-y: auto;
  66                 padding: 3rem 2rem;
  67                 position: fixed;
  68                 right: 0;
  69                 top: 0;
  70                 visibility: hidden;
  71                 width: 20rem;
  72                 z-index: _misc(z-index-base) + 2;
  73
  74                 .links {
  75                         list-style: none;
  76                         padding-left: 0;
  77
  78                         li {
  79                                 border-top: solid 2px _palette(border);
  80
  81                                 a {
  82                                         border-bottom: 0;
  83                                         display: block;
  84                                         font-family: _font(family-heading);
  85                                         font-size: 0.9rem;
  86                                         font-size: 0.9rem;
  87                                         font-weight: _font(weight-heading);
  88                                         letter-spacing: 0.075em;
  89                                         padding: 0.75rem 0;
  90                                         text-transform: uppercase;
  91                                 }
  92
  93                                 &:first-child {
  94                                         border-top: 0;
  95                                 }
  96                         }
  97                 }
  98
  99                 .close {
 100                         @include icon;
 101                         @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
 102                         -webkit-tap-highlight-color: rgba(0,0,0,0);
 103                         border: 0;
 104                         color: _palette(fg-light);
 105                         cursor: pointer;
 106                         display: block;
 107                         height: 3.25rem;
 108                         line-height: 3.25rem;
 109                         padding-right: 1.25rem;
 110                         position: absolute;
 111                         right: 0;
 112                         text-align: right;
 113                         top: 0;
 114                         vertical-align: middle;
 115                         width: 7rem;
 116
 117                         &:before {
 118                                 content: '\f00d';
 119                                 font-size: 1.25rem;
 120                         }
 121
 122                         &:hover {
 123                                 color: _palette(fg-bold);
 124                         }
 125
 126                         @include breakpoint('<=small') {
 127                                 height: 4rem;
 128                                 line-height: 4rem;
 129                         }
 130                 }
 131
 132                 @include breakpoint('<=medium') {
 133                         display: block;
 134                 }
 135
 136                 @include breakpoint('<=small') {
 137                         padding: 2.5rem 1.75rem;
 138                 }
 139         }
 140
 141         @include breakpoint('<=medium') {
 142                 body.is-navPanel-visible {
 143                         #wrapper {
 144                                 opacity: 0.5;
 145                         }
 146
 147                         #navPanel {
 148                                 @include vendor('transform', 'translateX(0)');
 149                                 box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.2);
 150                                 visibility: visible;
 151                         }
 152                 }
 153         }