9f1fceba5145777b6a4b21a99df0522bb9d88ce6
[edumed.git] / catalogue / static / catalogue / css / carousel.scss
1 $px: .0625em;
2
3 #catalogue-carousel {
4     float: left;
5     position: relative;
6     width: 700*$px;
7     height: 235*$px;
8     overflow: hidden;
9     border-radius: 15*$px;
10
11     #catalogue-carousel-links {
12         width: 460*$px;
13         height: 235*$px;
14         list-style: none;
15         margin: 0;
16         padding: 0;
17
18         li {
19             display: block;
20             position: absolute;
21             top: 0;
22             left: 0;
23             height: 100%;
24             background-image: url(/static/test.jpg); /* set real background image */
25             background-size: 100% 100%;
26             border-top-left-radius: 15*$px 6.38%;
27             border-bottom-left-radius: 15*$px 6.38%;
28
29             a {
30                 display: block;
31                 width: 460*$px;
32                 height: 100%;
33                 background-image: url(/static/catalogue/img/carousel-left.png);
34                 background-position: 100% 0;
35                 background-repeat: no-repeat;
36                 background-size: 70*$px 100%;
37
38                 /* left part of mask as background */
39             }
40         }
41     }
42     #catalogue-carousel-switcher {
43         margin: 0;
44         padding: 50*$px 0 0 58*$px;
45         width: 240*$px - 58*$px;
46         height: 235*$px - 50*$px;
47         position: absolute;
48         right: 0;
49         top: 0;
50         list-style: none;
51         border-radius: 0 15*$px 15*$px 0;
52         background-color: #16a487;
53         background-image: url(/static/catalogue/img/carousel-right.png);
54         background-position: 0 0;
55         background-repeat: no-repeat;
56         background-size: auto 235*$px;
57         
58         /* right part of mask as background */
59
60         li {
61             margin-bottom: .9em;
62
63             a {
64                 text-transform: uppercase;
65                 color: #363a3e;
66                 font-size: .9em;
67                 font-weight: bold;
68             }
69             a.active {
70                 color: white;
71             }
72             a:before {
73                 vertical-align: top;
74                 margin-right: 1.5em;
75             }
76             .knowledge:before {content: url(/static/img/icons/knowledge.png);}
77             .activity:before {content: url(/static/img/icons/activity.png);}
78             .lesson-plan:before {content: url(/static/img/icons/lesson-plan.png);}
79             .reference:before {content: url(/static/img/icons/reference.png);}
80             /* TODO: active sprites */
81         }
82     }
83
84
85 }