add contact app + konkurs contact form

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

diff --git a/src/wolnelektury/static/scss/main/tag.scss b/src/wolnelektury/static/scss/main/tag.scss
index d120a3f..075e6c2 100755 (executable)
--- a/src/wolnelektury/static/scss/main/tag.scss
+++ b/src/wolnelektury/static/scss/main/tag.scss
@@ -1,8 +1,93 @@
-.page-desc {
-    @include size(margin-left, 15px);
+.tabbed-filter {
+    position: relative;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 4em;
+
+    @media screen and (min-width: 375px) {
+        padding-bottom: 2em;
+    }
+
+    @media screen and (min-width: 1024px) {
+        padding-bottom: 0;
+    }
+
+    h1 {
+        // fix for webkit
+        min-height: 9px;
+    }
+
+    .tabs {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        float: right;
+        text-align: right;
+
+        .tab {
+            cursor: pointer;
+            display: inline-block;
+            margin-bottom: -1px;
+            box-shadow: none;
+
+            &.active {
+                border-bottom-color: white;
+            }
+        }
+    }
+}
+.tabbed-filter-contents {
+    margin-bottom: 2em;
+    .tab-content {
+        display: none;
+        border-top: none;
+
+        ul {
+            list-style: none;
+            margin-left: 0;
+            padding-left: 10px;
+
+            li {
+                display: inline-block;
+                margin-right: 1em;
+                border-radius: 1em;
+                padding: .5em;
+
+                &.header {
+                    width: 6em;
+                }
+
+                &.active {
+                    background: #0D7E85;
+                    color: #ddd;
+
+                    a {
+                        display: inline-block;
+                        width: 1.5em;
+                        text-align: center;
+                        margin-left: .5em;
+                        border-radius: 1em;
+                        background: white;
+                    }
+                }
+
+                &.other {
+                    a {
+                        color: #ddd;
+                    }
+                }
+            }
+        }
+    }
 }
 
+
+
 #tagged-object-list {
+
+
+
+
+
     @media screen and (min-width: 62.5em) {
         .left-column, .right-column {
             @include size(width, 480px);