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