apps/wolnelektury_core/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 13px 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         @include size(padding-left, 25px);
  89         @include size(padding-right, 20px);
  90         background: #f7f7f7;
  91         @include mono;
  92
  93         @media screen and (min-width: 15em) {
  94             position: relative;
  95         }
  96
  97         #lang-button {
  98             display:block;
  99             @include size(line-height, 17px);
 100             @include size(padding-top, 16px);
 101             @include size(padding-bottom, 16px);
 102
 103             @include size(font-size, 10px);
 104             color: #717171;
 105
 106             .label {
 107                 display: none;
 108
 109                 @media screen and (min-width: 62.5em) {
 110                     display: inline;
 111                 }
 112
 113                 &:after {
 114                     @include size(padding-left, 10px);
 115                     content: url("/static/img/arrow-gray.png");
 116                     vertical-align: top;
 117                 }
 118             }
 119
 120             .lang-flag {
 121                 @include size(font-size, 13px);
 122                 @include size(line-height, 15px);
 123             }
 124         }
 125
 126         #lang-menu-items {
 127             z-index: 9999;
 128
 129             button {
 130                 @include mono;
 131                 display: none;
 132                 background: #f7f7f7;
 133                 color: #6f6f6f;
 134                 cursor: pointer;
 135                 width: 100%;
 136                 margin: 0;
 137                 @include size(padding, 10px 0);
 138
 139                 @media screen and (min-width: 62.5em) {
 140                     @include size(padding, 5px 0);
 141                 }
 142
 143                 border-width: 0;
 144                 @include size(border-bottom, 1px solid #ddd);
 145
 146                 @include size(font-size, 13px);
 147
 148                 &.active {
 149                     color: #000;
 150                 }
 151             }
 152         }
 153
 154         &:hover, &.hover {
 155             #lang-menu-items {
 156                 position: absolute;
 157                 padding: 0;
 158                 left: 0;
 159                 right: 0;
 160
 161                 @media screen and (min-width: 15em) {
 162                     left: auto;
 163                     @include size(width, 180px);
 164                     @include size(top, 49px);
 165                 }
 166                 @media screen and (min-width: 62.5em) {
 167                     width: 100%;
 168                 }
 169
 170                 button {
 171                     display: block;
 172                 }
 173             }
 174         }
 175     }
 176 }