src/wolnelektury/static/scss/main/menu.scss

   1 /* ok */
   2
   3 $menu_width: 200px;
   4
   5
   6 /* This is duplication of code for reader menu button. */
   7 %menu-toggle {
   8     position: relative;
   9     padding: 0;
  10     &:before {
  11         content: "";
  12         position: absolute;
  13         top: 8px;
  14         height: 5px;
  15         border-top: 15px double #ddd;
  16         border-bottom: 5px solid #ddd;
  17     }
  18 }
  19
  20
  21 #show-menu {
  22     @extend %menu-toggle;
  23     display: block;
  24     background: #191919;
  25     color: #ddd;
  26     text-align: center;
  27     z-index: 100;
  28     @include size(width, 44px);
  29     @include size(height, 44px);
  30     padding: 0;
  31     position: absolute;
  32     left: 10px;
  33     top: 25px;
  34
  35     &:before {
  36         left: 8px;
  37         right: 8px;
  38     }
  39
  40     @media screen and (min-width: 1024px) {
  41         display: none;
  42     }
  43 }
  44
  45 body.menu-on {
  46     margin-left: $menu_width;
  47     margin-right: -$menu_width;
  48
  49     @media screen and (min-width: 1024px) {
  50         margin-left: 0;
  51         margin-right: 0;
  52     }
  53
  54     #menu {
  55         display: block;
  56     }
  57 }
  58
  59 #menu {
  60     display: none;
  61     position: fixed;
  62     left: 0;
  63     top: 0;
  64     width: $menu_width;
  65     background: #141414;
  66     height: 100%;
  67     overflow-y: auto;
  68     z-index: 90;
  69
  70     @media screen and (min-width: 1024px) {
  71         display: block;
  72         width: 975px;
  73         height: 0;
  74         overflow: visible;
  75         margin: auto;
  76         position: absolute;
  77         top: 0;
  78     }
  79
  80     ul {
  81         list-style: none;
  82         padding: 0;
  83
  84         li {
  85             padding: .5em 1em;
  86
  87             @media screen and (min-width: 1024px) {
  88                 padding: 0;
  89             }
  90         }
  91     }
  92 }
  93
  94
  95
  96
  97 @media screen and (min-width: 1024px) {
  98     #user-info {
  99         @include mono;
 100         position: absolute;
 101         right: 150px;
 102         top: 4px;
 103         @include size(font-size, 10px);
 104         list-style: none;
 105
 106         li {
 107             display: inline;
 108
 109             &:after {
 110                 content: " | ";
 111             }
 112             &:last-child:after {
 113                 content: "";
 114             }
 115         }
 116     }
 117
 118     #main-menu {
 119         list-style: none;
 120         padding: 0;
 121         margin: 0;
 122
 123         background-color: #e2e2e2;
 124         position: absolute;
 125         top: 94px;
 126         @include size(width, 975px);
 127
 128         li {
 129             display: inline-block;
 130             @include size(width, 20%);
 131
 132             &.active {
 133                 background-color: white;
 134             }
 135
 136             a {
 137                 text-align: center;
 138                 display: block;
 139                 @include size(line-height, 13px);
 140                 @include size(padding, 18px 0 15px);
 141                 //@include size(border-bottom, 3px solid #e2e2e2);
 142                 color: #0c7076;
 143                 @include size(font-size, 15px);
 144                 @include mono;
 145
 146                 &.active {
 147                     border-bottom-color: white;
 148                 }
 149             }
 150         }
 151     }
 152 }