Merge branch 'master' into rwd

[wolnelektury.git] / apps / wolnelektury_core / static / css / main / menu.scss

diff --git a/apps/wolnelektury_core/static/css/main/menu.scss b/apps/wolnelektury_core/static/css/main/menu.scss
index 2698856..496b805 100755 (executable)
--- a/apps/wolnelektury_core/static/css/main/menu.scss
+++ b/apps/wolnelektury_core/static/css/main/menu.scss
@@ -2,66 +2,136 @@
 
 #nav-line {
     background-color: #e2e2e2;
-    @include size-px(padding-left, 5);
+    position: relative;
 
     @media screen and (min-width: 62.5em) {
         @include size-px(width, 975);
         margin: auto;
     }
 
+    #show-menu {
+        display: block;
+        float: left;
+        @include size-px(line-height, 13);
+        @include size-px(padding-top, 18);
+        @include size-px(padding-bottom, 18);
+        @include size-px(padding-left, 13);
+        @include size-px(padding-right, 13);
+        color: #0c7076;
+        @include size-px(font-size, 11);
+        @include mono;
+
+        .long {
+            display: none;
+
+            &:after {
+                @include size-px(padding-left, 10);
+                content: url("/static/img/arrow-gray.png");
+                vertical-align: top;
+            }
+        }
+
+        @media screen and (min-width: 20em) {
+            .long { display: inline; }
+            .short { display: none; }
+        }
+
+        @media screen and (min-width: 53em) {
+            display: none;
+        }
+    }
+
     ul#menu {
         list-style: none;
         padding: 0;
         margin: 0;
-        @include size-px(margin-left, 6);
+
+        display: none;
+        position: absolute;
+        top: 49px;
+        left: 0;
+        right: 10px;
+        z-index: 400;
+
+        @media screen and (min-width: 24em) {
+            right: auto;
+        }
+
+        @media screen and (min-width: 53em) {
+            display: block !important;
+            position: static;
+            @include size-px(margin-left, 6);
+        }
 
         li.menu {
             background-color: #e2e2e2;
-            float: left;
+
+            @media screen and (min-width: 53em) {
+                float: left;
+            }
 
             a.menu {
                 display: block;
-                @include size-px(height, 31);
+                @include size-px(line-height, 13);
                 @include size-px(padding-top, 18);
-                @include size-px(padding-left, 14);
-                @include size-px(padding-right, 14);
+                @include size-px(padding-bottom, 15);
+
+                @include size-px(border-bottom-width, 3);
+                border-bottom-style: solid;
+                border-bottom-color: #e2e2e2;
+                
+                @include size-px(padding-left, 13);
+                @include size-px(padding-right, 13);
                 color: #0c7076;
                 @include size-px(font-size, 11);
                 @include mono;
             }
 
             a.hidden-box-trigger:hover {
-                border-bottom-style: solid;
                 border-bottom-color: white;
-                @include size-px(border-bottom-width, 3);
-                margin-bottom: -3px;
             }
         }
     }
 
     #lang-menu {
-        position: relative;
         display: block;
         float: right;
-        @include size-px(height, 33);
-        @include size-px(padding-top, 16);
+
         @include size-px(padding-left, 25);
         @include size-px(padding-right, 20);
         background: #f7f7f7;
         @include mono;
 
+        @media screen and (min-width: 15em) {
+            position: relative;
+        }
+
         #lang-button {
+            display:block;
+            @include size-px(line-height, 17);
+            @include size-px(padding-top, 16);
+            @include size-px(padding-bottom, 16);
+
             @include size-px(font-size, 10);
             color: #717171;
 
-            .lang-flag {
-                @include size-px(font-size, 13);
+            .label {
+                display: none;
+
+                @media screen and (min-width: 62.5em) {
+                    display: inline;
+                }
+
+                &:after {
+                    @include size-px(padding-left, 10);
+                    content: url("/static/img/arrow-gray.png");
+                    vertical-align: top;
+                }
             }
 
-            &:after {
-                @include size-px(padding-left, 10);
-                content: url("/static/img/arrow-gray.png");
-                vertical-align: middle;
+            .lang-flag {
+                @include size-px(font-size, 13);
+                @include size-px(line-height, 15);
             }
         }
 
@@ -77,8 +147,14 @@
                 width: 100%;
                 margin: 0;
                 padding: 0;
-                @include size-px(padding-top, 5);
-                @include size-px(padding-bottom, 5);
+
+                @include size-px(padding-top, 10);
+                @include size-px(padding-bottom, 10);
+
+                @media screen and (min-width: 62.5em) {
+                    @include size-px(padding-top, 5);
+                    @include size-px(padding-bottom, 5);
+                }
 
                 border-style: solid;
                 border-color: #ddd;
@@ -96,10 +172,18 @@
         &:hover, &.hover {
             #lang-menu-items {
                 position: absolute;
-                width: 100%;
                 padding: 0;
                 left: 0;
-                @include size-px(top, 39);
+                right: 0;
+
+                @media screen and (min-width: 15em) {
+                    left: auto;
+                    @include size-px(width, 180);
+                    @include size-px(top, 49);
+                }
+                @media screen and (min-width: 62.5em) {
+                    width: 100%;
+                }
 
                 button {
                     display: block;