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: 0px;
 102         top: 3px;
 103         margin: 0;
 104         @include size(line-height, 43px);
 105         @include size(font-size, 10px);
 106         list-style: none;
 107
 108         li {
 109             display: inline;
 110
 111             &:after {
 112                 content: " | ";
 113             }
 114             &:last-child:after {
 115                 content: "";
 116             }
 117         }
 118     }
 119
 120     #main-menu {
 121         list-style: none;
 122         padding: 0;
 123         margin: 0;
 124
 125         background-color: #e2e2e2;
 126         position: absolute;
 127         top: 94px;
 128         @include size(width, 975px);
 129
 130         li {
 131             display: inline-block;
 132             @include size(width, 20%);
 133
 134             &.active {
 135                 background-color: white;
 136             }
 137
 138             a {
 139                 text-align: center;
 140                 display: block;
 141                 @include size(line-height, 13px);
 142                 @include size(padding, 18px 0 15px);
 143                 //@include size(border-bottom, 3px solid #e2e2e2);
 144                 color: #0c7076;
 145                 @include size(font-size, 15px);
 146                 @include mono;
 147
 148                 &.active {
 149                     border-bottom-color: white;
 150                 }
 151             }
 152         }
 153     }
 154 }