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