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: 45px;
  52         right: 45px;
  53     }
  54 }
  55
  56
  57 #menu {
  58     display: none;
  59     width: $W_MENU;
  60     height: 100%;
  61 }
  62
  63 #menu, #no-menu {
  64     z-index: 101;
  65     position: fixed;
  66     top: 0;
  67     left: 0;
  68     overflow-x: hidden;
  69     overflow-y: auto;
  70     text-align: center;
  71     line-height: 1.1em;
  72     background: #191919;
  73     color: #ddd;
  74
  75     ul {
  76         list-style: none;
  77         margin: 0;
  78         padding: 0;
  79
  80         li {
  81
  82             a {
  83                 padding: 10px 0;
  84                 color: white;
  85                 display: block;
  86                 text-decoration: none;
  87
  88                 &.active {
  89                     background: white;
  90                     color: black;
  91                 }
  92
  93                 .label {
  94                     display: block;
  95                     font-size: 12px;
  96                 }
  97             }
  98         }
  99
 100     }
 101 }
 102
 103 /* body class for showing menu */
 104 .menu-showed {
 105     #menu {
 106         display: block;
 107     }
 108     #no-menu {
 109         display: none;
 110     }
 111 }
 112
 113 /* menu showing by default */
 114 @include min-screen($S_MENU) {
 115     #menu {
 116         display: block;
 117     }
 118     #no-menu {
 119         display: none;
 120     }
 121     /* body class for hiding menu */
 122     .menu-hidden {
 123         #menu {
 124             display: none;
 125         }
 126         #no-menu {
 127             display: block;
 128         }
 129     }
 130 }