245b691b07007f1366def8c6e11d65761e37ed8a
[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             background: url(/static/test.jpg); /* set real background image */
24
25             a {
26                 display: block;
27                 width: 460*$px;
28                 height: 235*$px;
29                 background-image: url(/static/catalogue/img/carousel-left.png);
30                 background-position: 100% 0;
31                 background-repeat: no-repeat;
32                 background-size: auto 235*$px;
33
34                 /* left part of mask as background */
35             }
36         }
37     }
38     #catalogue-carousel-switcher {
39         margin: 0;
40         padding: 50*$px 0 0 58*$px;
41         width: 240*$px - 58*$px;
42         height: 235*$px - 50*$px;
43         position: absolute;
44         right: 0;
45         top: 0;
46         list-style: none;
47         border-radius: 0 15*$px 15*$px 0;
48         background-color: #16a487;
49         background-image: url(/static/catalogue/img/carousel-right.png);
50         background-position: 0 0;
51         background-repeat: no-repeat;
52         background-size: auto 235*$px;
53         
54         /* right part of mask as background */
55
56         li {
57             margin-bottom: .9em;
58
59             a {
60                 text-transform: uppercase;
61                 color: #363a3e;
62                 font-size: .9em;
63                 font-weight: bold;
64             }
65             a.active {
66                 color: white;
67             }
68             a:before {
69                 vertical-align: top;
70                 margin-right: 1.5em;
71             }
72             .knowledge:before {content: url(/static/img/icons/knowledge.png);}
73             .activity:before {content: url(/static/img/icons/activity.png);}
74             .lesson-plan:before {content: url(/static/img/icons/lesson-plan.png);}
75             .reference:before {content: url(/static/img/icons/reference.png);}
76             /* TODO: active sprites */
77         }
78     }
79
80
81 }