Main page looks almost ok now.

[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
new file mode 100755 (executable)
index 0000000..2698856
--- /dev/null
+++ b/apps/wolnelektury_core/static/css/main/menu.scss
@@ -0,0 +1,110 @@
+@import "tools";
+
+#nav-line {
+    background-color: #e2e2e2;
+    @include size-px(padding-left, 5);
+
+    @media screen and (min-width: 62.5em) {
+        @include size-px(width, 975);
+        margin: auto;
+    }
+
+    ul#menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        @include size-px(margin-left, 6);
+
+        li.menu {
+            background-color: #e2e2e2;
+            float: left;
+
+            a.menu {
+                display: block;
+                @include size-px(height, 31);
+                @include size-px(padding-top, 18);
+                @include size-px(padding-left, 14);
+                @include size-px(padding-right, 14);
+                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;
+
+        #lang-button {
+            @include size-px(font-size, 10);
+            color: #717171;
+
+            .lang-flag {
+                @include size-px(font-size, 13);
+            }
+
+            &:after {
+                @include size-px(padding-left, 10);
+                content: url("/static/img/arrow-gray.png");
+                vertical-align: middle;
+            }
+        }
+
+        #lang-menu-items {
+            z-index: 9999;
+
+            button {
+                @include mono;
+                display: none;
+                background: #f7f7f7;
+                color: #6f6f6f;
+                cursor: pointer;
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                @include size-px(padding-top, 5);
+                @include size-px(padding-bottom, 5);
+
+                border-style: solid;
+                border-color: #ddd;
+                border-width: 0;
+                @include size-px(border-bottom-width, 1);
+
+                @include size-px(font-size, 13);
+
+                &.active {
+                    color: #000;
+                }
+            }
+        }
+
+        &:hover, &.hover {
+            #lang-menu-items {
+                position: absolute;
+                width: 100%;
+                padding: 0;
+                left: 0;
+                @include size-px(top, 39);
+
+                button {
+                    display: block;
+                }
+            }
+        }
+    }
+}