Reorganize SCSS files, RWD-ize funding.

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

diff --git a/apps/wolnelektury_core/static/scss/main/menu.scss b/apps/wolnelektury_core/static/scss/main/menu.scss
new file mode 100755 (executable)
index 0000000..38a7d20
--- /dev/null
+++ b/apps/wolnelektury_core/static/scss/main/menu.scss
@@ -0,0 +1,176 @@
+#nav-line {
+    background-color: #e2e2e2;
+    position: relative;
+
+    @media screen and (min-width: 62.5em) {
+        @include size(width, 975px);
+        margin: auto;
+    }
+
+    #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;
+            }
+        }
+
+        @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;
+
+        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;
+            }
+
+            a.menu {
+                display: block;
+                @include size(line-height, 13px);
+                @include size(padding, 18px 13px 15px);
+                @include size(border-bottom, 3px solid #e2e2e2);
+                color: #0c7076;
+                @include size(font-size, 11px);
+                @include mono;
+            }
+
+            a.hidden-box-trigger:hover {
+                border-bottom-color: white;
+            }
+        }
+    }
+
+    #lang-menu {
+        display: block;
+        float: right;
+
+        @include size(padding-left, 25px);
+        @include size(padding-right, 20px);
+        background: #f7f7f7;
+        @include mono;
+
+        @media screen and (min-width: 15em) {
+            position: relative;
+        }
+
+        #lang-button {
+            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: 62.5em) {
+                    display: inline;
+                }
+
+                &:after {
+                    @include size(padding-left, 10px);
+                    content: url("/static/img/arrow-gray.png");
+                    vertical-align: top;
+                }
+            }
+
+            .lang-flag {
+                @include size(font-size, 13px);
+                @include size(line-height, 15px);
+            }
+        }
+
+        #lang-menu-items {
+            z-index: 9999;
+
+            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);
+                }
+
+                border-width: 0;
+                @include size(border-bottom, 1px solid #ddd);
+
+                @include size(font-size, 13px);
+
+                &.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;
+                }
+            }
+        }
+    }
+}