assets/main/sass/layout/_sidebar.scss

   1 ///
   2 /// Editorial 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 /* Sidebar */
   8
   9         #search {
  10                 form {
  11                         @include icon;
  12                         position: relative;
  13
  14                         &:before {
  15                                 @include vendor('transform', 'scaleX(-1)');
  16                                 color: _palette(fg);
  17                                 content: '\f002';
  18                                 cursor: default;
  19                                 display: block;
  20                                 font-size: 1.5em;
  21                                 height: _size(element-height) / 1.375;
  22                                 line-height: _size(element-height) / 1.375;
  23                                 opacity: 0.325;
  24                                 position: absolute;
  25                                 right: 0;
  26                                 text-align: center;
  27                                 top: 0;
  28                                 width: _size(element-height) / 1.375;
  29                         }
  30
  31                         input[type="text"] {
  32                                 padding-right: _size(element-height);
  33                         }
  34                 }
  35         }
  36
  37         #sidebar {
  38                 $pad: 2em / 0.9;
  39
  40                 @include vendor('flex-grow', '0');
  41                 @include vendor('flex-shrink', '0');
  42                 @include vendor('transition', (
  43                         'margin-left 0.5s ease',
  44                         'box-shadow 0.5s ease'
  45                 ));
  46                 background-color: _palette(bg-alt);
  47                 font-size: 0.9em;
  48                 position: relative;
  49                 width: _size(sidebar-width);
  50
  51                 h2 {
  52                         font-size: (1.25em / 0.9);
  53                 }
  54
  55                 > .inner {
  56                         @include padding($pad, $pad, (0, 0, $pad, 0));
  57                         position: relative;
  58                         width: _size(sidebar-width);
  59
  60                         > * {
  61                                 border-bottom: solid 2px _palette(border);
  62                                 margin: 0 0 (_size(element-margin) * 1.75) 0;
  63                                 padding: 0 0 (_size(element-margin) * 1.75) 0;
  64
  65                                 > :last-child {
  66                                         margin-bottom: 0;
  67                                 }
  68
  69                                 &:last-child {
  70                                         border-bottom: 0;
  71                                         margin-bottom: 0;
  72                                         padding-bottom: 0;
  73                                 }
  74                         }
  75
  76                         > .alt {
  77                                 background-color: darken(_palette(bg-alt), 2);
  78                                 border-bottom: 0;
  79                                 margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
  80                                 padding: $pad;
  81                                 width: calc(100% + #{$pad * 2});
  82                         }
  83                 }
  84
  85                 .toggle {
  86                         @include icon;
  87                         @include vendor('transition', 'left 0.5s ease');
  88                         -webkit-tap-highlight-color: rgba(255,255,255,0);
  89                         border: 0;
  90                         display: block;
  91                         height: 7.5em;
  92                         left: _size(sidebar-width);
  93                         line-height: 7.5em;
  94                         outline: 0;
  95                         overflow: hidden;
  96                         position: absolute;
  97                         text-align: center;
  98                         text-indent: 7.5em;
  99                         top: 0;
 100                         width: 6em;
 101                         z-index: _misc(z-index-base);
 102
 103                         &:before {
 104                                 content: '\f0c9';
 105                                 font-size: 2rem;
 106                                 height: inherit;
 107                                 left: 0;
 108                                 line-height: inherit;
 109                                 position: absolute;
 110                                 text-indent: 0;
 111                                 top: 0;
 112                                 width: inherit;
 113                         }
 114                 }
 115
 116                 &.inactive {
 117                         margin-left: (_size(sidebar-width) * -1);
 118                 }
 119
 120                 @include breakpoint('<=xlarge') {
 121                         $pad: 1.5em / 0.9;
 122
 123                         width: _size(sidebar-width-alt);
 124
 125                         > .inner {
 126                                 @include padding($pad, $pad, (0, 0, $pad, 0));
 127                                 width: _size(sidebar-width-alt);
 128
 129                                 > .alt {
 130                                         margin: ($pad * -1) 0 ($pad * 2) ($pad * -1);
 131                                         padding: $pad;
 132                                         width: calc(100% + #{$pad * 2});
 133                                 }
 134                         }
 135
 136                         .toggle {
 137                                 height: 6.25em;
 138                                 left: _size(sidebar-width-alt);
 139                                 line-height: 6.25em;
 140                                 text-indent: 5em;
 141                                 width: 5em;
 142
 143                                 &:before {
 144                                         font-size: 1.5rem;
 145                                 }
 146                         }
 147
 148                         &.inactive {
 149                                 margin-left: (_size(sidebar-width-alt) * -1);
 150                         }
 151                 }
 152
 153                 @include breakpoint('<=large') {
 154                         box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
 155                         height: 100%;
 156                         left: 0;
 157                         position: fixed;
 158                         top: 0;
 159                         z-index: _misc(z-index-base);
 160
 161                         &.inactive {
 162                                 box-shadow: none;
 163                         }
 164
 165                         > .inner {
 166                                 -webkit-overflow-scrolling: touch;
 167                                 height: 100%;
 168                                 left: 0;
 169                                 overflow-x: hidden;
 170                                 overflow-y: auto;
 171                                 position: absolute;
 172                                 top: 0;
 173
 174                                 &:after {
 175                                         content: '';
 176                                         display: block;
 177                                         height: 4em;
 178                                         width: 100%;
 179                                 }
 180                         }
 181
 182                         .toggle {
 183                                 text-indent: 6em;
 184                                 width: 6em;
 185
 186                                 &:before {
 187                                         font-size: 1.5rem;
 188                                         margin-left: (-0.875em / 2);
 189                                 }
 190                         }
 191
 192                         body.is-preload & {
 193                                 display: none;
 194                         }
 195                 }
 196
 197                 @include breakpoint('<=small') {
 198                         .toggle {
 199                                 text-indent: 7.25em;
 200                                 width: 7.25em;
 201
 202                                 &:before {
 203                                         color: _palette(fg);
 204                                         margin-left: (-0.125em / 2);
 205                                         margin-top: (-0.5em / 2);
 206                                         font-size: 1.1rem;
 207                                         z-index: 1;
 208                                 }
 209
 210                                 &:after {
 211                                         background: transparentize(lighten(_palette(fg), 35), 0.25);
 212                                         border-radius: _size(border-radius);
 213                                         content: '';
 214                                         height: 3.5em;
 215                                         left: 1em;
 216                                         position: absolute;
 217                                         top: 1em;
 218                                         width: 5em;
 219                                 }
 220                         }
 221                 }
 222         }