Generally working version.

[wolnelektury.git] / src / wolnelektury / static / scss / main / menu.scss

diff --git a/src/wolnelektury/static/scss/main/menu.scss b/src/wolnelektury/static/scss/main/menu.scss
index 846e4c8..c2f708a 100755 (executable)
--- a/src/wolnelektury/static/scss/main/menu.scss
+++ b/src/wolnelektury/static/scss/main/menu.scss
@@ -1,175 +1,146 @@
-#nav-line {
-    background-color: #e2e2e2;
-    position: relative;
+/* ok */
 
-    @media screen and (min-width: 62.5em) {
-        @include size(width, 975px);
-        margin: auto;
-    }
+$menu_width: 200px;
 
-    #show-menu {
-        display: block;
-        float: left;
-        @include size(line-height, 13px);
-        @include size(padding, 18px 13px);
-        color: #0c7076;
-        @include size(font-size, 11px);
-        @include mono;
 
-        .long {
-            display: none;
-
-            &:after {
-                @include size(padding-left, 10px);
-                content: url("/static/img/arrow-gray.png");
-                vertical-align: top;
-            }
-        }
+/* This is duplication of code for reader menu button. */
+%menu-toggle {
+    position: relative;
+    padding: 0;
+    &:before {
+        content: "";
+        position: absolute;
+        top: 8px;
+        height: 5px;
+        border-top: 15px double #ddd;
+        border-bottom: 5px solid #ddd;
+    }
+}
 
-        @media screen and (min-width: 20em) {
-            .long { display: inline; }
-            .short { display: none; }
-        }
 
-        @media screen and (min-width: 53em) {
-            display: none;
-        }
+#show-menu {
+    @extend %menu-toggle;
+    display: block;
+    background: #191919;
+    color: #ddd;
+    text-align: center;
+    z-index: 100;
+    @include size(width, 44px);
+    @include size(height, 44px);
+    padding: 0;
+    position: absolute;
+    left: 10px;
+    top: 25px;
+
+    &:before {
+        left: 8px;
+        right: 8px;
     }
 
-    ul#menu {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-
+    @media screen and (min-width: 1024px) {
         display: none;
-        position: absolute;
-        @include size(top, 49px);
-        left: 0;
-        @include size(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(margin-left, 6px);
-        }
-
-        li.menu {
-            background-color: #e2e2e2;
+    }
+}
 
-            @media screen and (min-width: 53em) {
-                float: left;
-            }
+body.menu-on {
+    margin-left: $menu_width;
+    margin-right: -$menu_width;
 
-            a.menu {
-                display: block;
-                @include size(line-height, 13px);
-                @include size(padding, 18px 12px 15px);
-                @include size(border-bottom, 3px solid #e2e2e2);
-                color: #0c7076;
-                @include size(font-size, 11px);
-                @include mono;
-            }
+    @media screen and (min-width: 1024px) {
+        margin-left: 0;
+        margin-right: 0;
+    }
 
-            a.hidden-box-trigger:hover {
-                border-bottom-color: white;
-            }
-        }
+    #menu {
+        display: block;
     }
+}
 
-    #lang-menu {
+#menu {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: $menu_width;
+    background: #141414;
+    height: 100%;
+    overflow-y: auto;
+    z-index: 90;
+
+    @media screen and (min-width: 1024px) {
         display: block;
-        float: right;
+        width: 975px;
+        height: 0;
+        overflow: visible;
+        margin: auto;
+        position: absolute;
+        top: 0;
+    }
 
-        background: #f7f7f7;
-        @include mono;
+    ul {
+        list-style: none;
+        padding: 0;
 
-        @media screen and (min-width: 15em) {
-            position: relative;
+        li {
+            padding: .5em 1em;
+
+            @media screen and (min-width: 1024px) {
+                padding: 0;
+            }
         }
+    }
+}
 
-        #lang-button {
-            @include size(padding-left, 25px);
-            @include size(padding-right, 20px);
 
-            display:block;
-            @include size(line-height, 17px);
-            @include size(padding-top, 16px);
-            @include size(padding-bottom, 16px);
 
-            @include size(font-size, 10px);
-            color: #717171;
 
-            .label {
-                display: none;
+@media screen and (min-width: 1024px) {
+    #user-info {
+        @include mono;
+        position: absolute;
+        right: 150px;
+        top: 4px;
+        @include size(font-size, 10px);
+        list-style: none;
 
-                @media screen and (min-width: 62.5em) {
-                    display: inline;
-                }
+        li {
+            display: inline;
 
-                &:after {
-                    @include size(padding-left, 10px);
-                    content: url("/static/img/arrow-gray.png");
-                    vertical-align: top;
-                }
+            &:after {
+                content: " | ";
             }
-
-            .lang-flag {
-                @include size(font-size, 13px);
-                @include size(line-height, 15px);
+            &:last-child:after {
+                content: "";
             }
         }
+    }
 
-        #lang-menu-items {
-            z-index: 9999;
+    #main-menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
 
-            button {
-                @include mono;
-                display: none;
-                background: #f7f7f7;
-                color: #6f6f6f;
-                cursor: pointer;
-                width: 100%;
-                margin: 0;
-                @include size(padding, 10px 0);
-
-                @media screen and (min-width: 62.5em) {
-                    @include size(padding, 5px 0);
-                }
+        background-color: #e2e2e2;
+        position: absolute;
+        top: 94px;
+        @include size(width, 975px);
 
-                border-width: 0;
-                @include size(border-bottom, 1px solid #ddd);
+        li {
+            display: inline-block;
+            @include size(width, 20%);
 
-                @include size(font-size, 13px);
+            a {
+                text-align: center;
+                display: block;
+                @include size(line-height, 13px);
+                @include size(padding, 18px 0 15px);
+                @include size(border-bottom, 3px solid #e2e2e2);
+                color: #0c7076;
+                @include size(font-size, 11px);
+                @include mono;
 
                 &.active {
-                    color: #000;
-                }
-            }
-        }
-
-        &:hover, &.hover {
-            #lang-menu-items {
-                position: absolute;
-                padding: 0;
-                left: 0;
-                right: 0;
-
-                @media screen and (min-width: 15em) {
-                    left: auto;
-                    @include size(width, 180px);
-                    @include size(top, 49px);
-                }
-                @media screen and (min-width: 62.5em) {
-                    width: 100%;
-                }
-
-                button {
-                    display: block;
+                    border-bottom-color: white;
                 }
             }
         }