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