apps/wolnelektury_core/static/css/main/menu.scss

   1 @import "tools";
   2
   3 #nav-line {
   4     background-color: #e2e2e2;
   5     position: relative;
   6
   7     @media screen and (min-width: 62.5em) {
   8         @include size-px(width, 975);
   9         margin: auto;
  10     }
  11
  12     #show-menu {
  13         display: block;
  14         float: left;
  15         @include size-px(line-height, 13);
  16         @include size-px(padding-top, 18);
  17         @include size-px(padding-bottom, 18);
  18         @include size-px(padding-left, 13);
  19         @include size-px(padding-right, 13);
  20         color: #0c7076;
  21         @include size-px(font-size, 11);
  22         @include mono;
  23
  24         .long {
  25             display: none;
  26
  27             &:after {
  28                 @include size-px(padding-left, 10);
  29                 content: url("/static/img/arrow-gray.png");
  30                 vertical-align: top;
  31             }
  32         }
  33
  34         @media screen and (min-width: 20em) {
  35             .long { display: inline; }
  36             .short { display: none; }
  37         }
  38
  39         @media screen and (min-width: 53em) {
  40             display: none;
  41         }
  42     }
  43
  44     ul#menu {
  45         list-style: none;
  46         padding: 0;
  47         margin: 0;
  48
  49         display: none;
  50         position: absolute;
  51         top: 49px;
  52         left: 0;
  53         right: 10px;
  54         z-index: 400;
  55
  56         @media screen and (min-width: 24em) {
  57             right: auto;
  58         }
  59
  60         @media screen and (min-width: 53em) {
  61             display: block !important;
  62             position: static;
  63             @include size-px(margin-left, 6);
  64         }
  65
  66         li.menu {
  67             background-color: #e2e2e2;
  68
  69             @media screen and (min-width: 53em) {
  70                 float: left;
  71             }
  72
  73             a.menu {
  74                 display: block;
  75                 @include size-px(line-height, 13);
  76                 @include size-px(padding-top, 18);
  77                 @include size-px(padding-bottom, 15);
  78
  79                 @include size-px(border-bottom-width, 3);
  80                 border-bottom-style: solid;
  81                 border-bottom-color: #e2e2e2;
  82
  83                 @include size-px(padding-left, 13);
  84                 @include size-px(padding-right, 13);
  85                 color: #0c7076;
  86                 @include size-px(font-size, 11);
  87                 @include mono;
  88             }
  89
  90             a.hidden-box-trigger:hover {
  91                 border-bottom-color: white;
  92             }
  93         }
  94     }
  95
  96     #lang-menu {
  97         display: block;
  98         float: right;
  99
 100         @include size-px(padding-left, 25);
 101         @include size-px(padding-right, 20);
 102         background: #f7f7f7;
 103         @include mono;
 104
 105         @media screen and (min-width: 15em) {
 106             position: relative;
 107         }
 108
 109         #lang-button {
 110             display:block;
 111             @include size-px(line-height, 17);
 112             @include size-px(padding-top, 16);
 113             @include size-px(padding-bottom, 16);
 114
 115             @include size-px(font-size, 10);
 116             color: #717171;
 117
 118             .label {
 119                 display: none;
 120
 121                 @media screen and (min-width: 62.5em) {
 122                     display: inline;
 123                 }
 124
 125                 &:after {
 126                     @include size-px(padding-left, 10);
 127                     content: url("/static/img/arrow-gray.png");
 128                     vertical-align: top;
 129                 }
 130             }
 131
 132             .lang-flag {
 133                 @include size-px(font-size, 13);
 134                 @include size-px(line-height, 15);
 135             }
 136         }
 137
 138         #lang-menu-items {
 139             z-index: 9999;
 140
 141             button {
 142                 @include mono;
 143                 display: none;
 144                 background: #f7f7f7;
 145                 color: #6f6f6f;
 146                 cursor: pointer;
 147                 width: 100%;
 148                 margin: 0;
 149                 padding: 0;
 150
 151                 @include size-px(padding-top, 10);
 152                 @include size-px(padding-bottom, 10);
 153
 154                 @media screen and (min-width: 62.5em) {
 155                     @include size-px(padding-top, 5);
 156                     @include size-px(padding-bottom, 5);
 157                 }
 158
 159                 border-style: solid;
 160                 border-color: #ddd;
 161                 border-width: 0;
 162                 @include size-px(border-bottom-width, 1);
 163
 164                 @include size-px(font-size, 13);
 165
 166                 &.active {
 167                     color: #000;
 168                 }
 169             }
 170         }
 171
 172         &:hover, &.hover {
 173             #lang-menu-items {
 174                 position: absolute;
 175                 padding: 0;
 176                 left: 0;
 177                 right: 0;
 178
 179                 @media screen and (min-width: 15em) {
 180                     left: auto;
 181                     @include size-px(width, 180);
 182                     @include size-px(top, 49);
 183                 }
 184                 @media screen and (min-width: 62.5em) {
 185                     width: 100%;
 186                 }
 187
 188                 button {
 189                     display: block;
 190                 }
 191             }
 192         }
 193     }
 194 }