apps/wolnelektury_core/static/scss/book_text/menu.scss

   1 %menu-toggle {
   2     position: relative;
   3     padding: 0;
   4     &:before {
   5         content: "";
   6         position: absolute;
   7         top: 8px;
   8         height: 5px;
   9         border-top: 15px double #ddd;
  10         border-bottom: 5px solid #ddd;
  11     }
  12 }
  13
  14 /* Button for showing menu */
  15 #menu-toggle-on {
  16     @extend %menu-toggle;
  17     @include size(width, $W_NONUMBERS_TINY);
  18     position: fixed;
  19     top: 0;
  20     left: 0;
  21     background: #191919;
  22     color: #ddd;
  23     text-align: center;
  24     z-index: 100;
  25     @include size(height, 44px);
  26
  27     @include min-screen($S_NONUMBERS_TINY_MAX) {
  28         @include size(width, $W_NONUMBERS);
  29     }
  30
  31     @include min-screen($S_NUMBERS) {
  32         @include size(width, 44px);
  33     }
  34
  35     &:before {
  36         left: 5px;
  37         right: 5px;
  38         @include min-screen(240px) {
  39             left: 8px;
  40             right: 8px;
  41         }
  42     }
  43 }
  44
  45 #menu-toggle-off {
  46     @extend %menu-toggle;
  47     height: 24px;
  48     &:before {
  49         left: 25px;
  50         right: 25px;
  51     }
  52 }
  53
  54
  55 #menu {
  56     display: none;
  57     z-index: 101;
  58
  59     width: 80px;
  60     position: fixed;
  61     top: 0;
  62     left: 0;
  63     text-align: center;
  64     background: #191919;
  65     height: 100%;
  66
  67     line-height: 1.1em;
  68
  69     ul {
  70         list-style: none;
  71         margin: 0;
  72         padding: 0;
  73
  74         li {
  75
  76             a {
  77                 padding: 10px 0;
  78                 color: white;
  79                 display: block;
  80                 text-decoration: none;
  81
  82                 &.active {
  83                     background: white;
  84                     color: black;
  85                 }
  86
  87                 .label {
  88                     display: block;
  89                     font-size: 12px;
  90                 }
  91             }
  92         }
  93
  94     }
  95 }
  96
  97 /* body class for showing menu */
  98 .menu-showed #menu {
  99     display: block;
 100 }
 101
 102 /* menu showing by default */
 103 @include min-screen(640px) {
 104     #menu {
 105         display: block;
 106     }
 107     /* body class for hiding menu */
 108     .menu-hidden #menu {
 109         display: none;
 110     }
 111 }