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