most of stage 2

[edumed.git] / edumed / static / catalogue / css / carousel.scss

diff --git a/edumed/static/catalogue/css/carousel.scss b/edumed/static/catalogue/css/carousel.scss
new file mode 100755 (executable)
index 0000000..299f95b
--- /dev/null
+++ b/edumed/static/catalogue/css/carousel.scss
@@ -0,0 +1,140 @@
+$px: .0625em;
+
+$ciemny: #363a3e;
+
+
+#catalogue-carousel {
+    float: left;
+    position: relative;
+    width: 700*$px;
+    height: 235*$px;
+    overflow: hidden;
+    border-radius: 15*$px;
+
+    #catalogue-carousel-links {
+        width: 460*$px;
+        height: 235*$px;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            background-size: 100% 100%;
+            border-top-left-radius: 15*$px 6.38%;
+            border-bottom-left-radius: 15*$px 6.38%;
+            z-index: 100;
+            background-color: #888;
+
+            a.catalogue-carousel-link {
+                display: block;
+                overflow: hidden;
+                width: 460*$px;
+                height: 100%;
+                background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
+                background-size: 70*$px 100%;
+                
+                .catalogue-carousel-note {
+                    position: relative;
+                    height: 100%;
+                    color: white;
+                    margin-top: 8.5em;
+
+                    div {
+                        &:before {
+                            content: " ";
+                            display: block;
+                            position: absolute;
+                            height: 100%;
+                            width: 100%;
+                            z-index: -1;
+                            background-color: black;
+                            opacity: 0.6;
+                        }
+
+                        p {
+                            padding: .4em 3em 0 .5em;
+
+                            strong {
+                                font-size: 1.2em;
+                                display: block;
+                            }
+
+                            .more {
+                                position: absolute;
+                                right: 4em;
+                                top: 4.5em;
+                            }
+                        }
+                    }
+                }
+            }
+            a.catalogue-carousel-link:active {
+                outline: none;
+            }
+            .attribution {
+                text-align: right;
+                font-size: .75em;
+                position: absolute;
+                right: 5em;
+                top: .1em;
+                color: white;
+                font-weight: bold;
+                text-shadow: 0 0 5px #000;
+            }
+
+        }
+    }
+    #catalogue-carousel-switcher {
+        margin: 0;
+        padding: 3*$px 0 0 58*$px;
+        width: 240*$px - 58*$px;
+        height: 243*$px - 8*$px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        list-style: none;
+        border-radius: 0 15*$px 15*$px 0;
+        background-color: #ed7831;
+        background-image: url(/static/catalogue/img/carousel-right.png);
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: auto 235*$px;
+        
+        /* right part of mask as background */
+
+        li {
+            margin-bottom: .4em;
+            font-size: .85em;
+            line-height: 1em;
+
+            a {
+                text-transform: uppercase;
+                color: $ciemny;
+            }
+            a:before {
+                vertical-align: top;
+                margin-right: 1.5em;
+            }
+            .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);}
+            .activity:before {content: url(/static/img/icons/activity_dark.png);}
+            .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);}
+            .reference:before {content: url(/static/img/icons/reference_dark.png);}
+        }
+        li.activeSlide {
+            a {
+                color: white;
+            }
+            .knowledge:before {content: url(/static/img/icons/knowledge_white.png);}
+            .activity:before {content: url(/static/img/icons/activity_white.png);}
+            .lesson-plan:before {content: url(/static/img/icons/lesson-plan_white.png);}
+            .reference:before {content: url(/static/img/icons/reference_white.png);}
+        }
+    }
+
+
+}