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

   1 @import "tools";
   2
   3 #nav-line {
   4     background-color: #e2e2e2;
   5     @include size-px(padding-left, 5);
   6
   7     @media screen and (min-width: 62.5em) {
   8         @include size-px(width, 975);
   9         margin: auto;
  10     }
  11
  12     ul#menu {
  13         list-style: none;
  14         padding: 0;
  15         margin: 0;
  16         @include size-px(margin-left, 6);
  17
  18         li.menu {
  19             background-color: #e2e2e2;
  20             float: left;
  21
  22             a.menu {
  23                 display: block;
  24                 @include size-px(height, 31);
  25                 @include size-px(padding-top, 18);
  26                 @include size-px(padding-left, 14);
  27                 @include size-px(padding-right, 14);
  28                 color: #0c7076;
  29                 @include size-px(font-size, 11);
  30                 @include mono;
  31             }
  32
  33             a.hidden-box-trigger:hover {
  34                 border-bottom-style: solid;
  35                 border-bottom-color: white;
  36                 @include size-px(border-bottom-width, 3);
  37                 margin-bottom: -3px;
  38             }
  39         }
  40     }
  41
  42     #lang-menu {
  43         position: relative;
  44         display: block;
  45         float: right;
  46         @include size-px(height, 33);
  47         @include size-px(padding-top, 16);
  48         @include size-px(padding-left, 25);
  49         @include size-px(padding-right, 20);
  50         background: #f7f7f7;
  51         @include mono;
  52
  53         #lang-button {
  54             @include size-px(font-size, 10);
  55             color: #717171;
  56
  57             .lang-flag {
  58                 @include size-px(font-size, 13);
  59             }
  60
  61             &:after {
  62                 @include size-px(padding-left, 10);
  63                 content: url("/static/img/arrow-gray.png");
  64                 vertical-align: middle;
  65             }
  66         }
  67
  68         #lang-menu-items {
  69             z-index: 9999;
  70
  71             button {
  72                 @include mono;
  73                 display: none;
  74                 background: #f7f7f7;
  75                 color: #6f6f6f;
  76                 cursor: pointer;
  77                 width: 100%;
  78                 margin: 0;
  79                 padding: 0;
  80                 @include size-px(padding-top, 5);
  81                 @include size-px(padding-bottom, 5);
  82
  83                 border-style: solid;
  84                 border-color: #ddd;
  85                 border-width: 0;
  86                 @include size-px(border-bottom-width, 1);
  87
  88                 @include size-px(font-size, 13);
  89
  90                 &.active {
  91                     color: #000;
  92                 }
  93             }
  94         }
  95
  96         &:hover, &.hover {
  97             #lang-menu-items {
  98                 position: absolute;
  99                 width: 100%;
 100                 padding: 0;
 101                 left: 0;
 102                 @include size-px(top, 39);
 103
 104                 button {
 105                     display: block;
 106                 }
 107             }
 108         }
 109     }
 110 }