change carousel layout

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

diff --git a/catalogue/static/catalogue/css/carousel.scss b/catalogue/static/catalogue/css/carousel.scss
index 9f1fceb..2885fac 100755 (executable)
--- a/catalogue/static/catalogue/css/carousel.scss
+++ b/catalogue/static/catalogue/css/carousel.scss
@@ -1,5 +1,8 @@
 $px: .0625em;
 
+$ciemny: #363a3e;
+
+
 #catalogue-carousel {
     float: left;
     position: relative;
@@ -21,21 +24,49 @@ $px: .0625em;
             top: 0;
             left: 0;
             height: 100%;
-            background-image: url(/static/test.jpg); /* set real background image */
             background-size: 100% 100%;
             border-top-left-radius: 15*$px 6.38%;
             border-bottom-left-radius: 15*$px 6.38%;
 
             a {
                 display: block;
+                overflow: hidden;
                 width: 460*$px;
                 height: 100%;
-                background-image: url(/static/catalogue/img/carousel-left.png);
-                background-position: 100% 0;
-                background-repeat: no-repeat;
+                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: 12em;
+
+                    p:before {
+                        content: " ";
+                        display: block;
+                        position: absolute;
+                        height: 100%;
+                        width: 100%;
+                        z-index: -1;
+                        background-color: black;
+                        opacity: 0.6;
+                    }
 
-                /* left part of mask as background */
+                    p {
+                        margin: 0;
+                        em {
+                            margin: 0 .2em 0 .5em;
+                            font-style: normal;
+                            font-size: 1.5em;
+                        }
+                        strong {
+                            margin-left: .5em;
+                            font-size: 2em;
+                        }
+                        
+                    }
+                }
             }
         }
     }
@@ -49,7 +80,7 @@ $px: .0625em;
         top: 0;
         list-style: none;
         border-radius: 0 15*$px 15*$px 0;
-        background-color: #16a487;
+        background-color: #ed7831;
         background-image: url(/static/catalogue/img/carousel-right.png);
         background-position: 0 0;
         background-repeat: no-repeat;
@@ -62,22 +93,27 @@ $px: .0625em;
 
             a {
                 text-transform: uppercase;
-                color: #363a3e;
+                color: $ciemny;
                 font-size: .9em;
                 font-weight: bold;
             }
-            a.active {
-                color: white;
-            }
             a:before {
                 vertical-align: top;
                 margin-right: 1.5em;
             }
-            .knowledge:before {content: url(/static/img/icons/knowledge.png);}
-            .activity:before {content: url(/static/img/icons/activity.png);}
-            .lesson-plan:before {content: url(/static/img/icons/lesson-plan.png);}
-            .reference:before {content: url(/static/img/icons/reference.png);}
-            /* TODO: active sprites */
+            .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);}
         }
     }