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

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