aa69028c292dfe27914a6e83a8ee2b2764d77de6
[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-size: 100% 100%;
28             border-top-left-radius: 15*$px 6.38%;
29             border-bottom-left-radius: 15*$px 6.38%;
30
31             a {
32                 display: block;
33                 overflow: hidden;
34                 width: 460*$px;
35                 height: 100%;
36                 background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
37                 background-size: 70*$px 100%;
38                 
39                 .catalogue-carousel-note {
40                     height: 100%;
41                     margin-left: 50%;
42                     background-color: black;
43                     color: white;
44                     opacity: 0.6;
45                     background-image: url(/static/catalogue/img/carousel-left.png);
46                     background-position: 100% 0;
47                     background-repeat: no-repeat;
48                     background-size: 70*$px 100%;
49
50                     p {
51                         padding: 6em 2em 0 1.6em;
52                         margin: 0;
53                         em {
54                             display: block;
55                             font-style: normal;
56                             font-size: 1.5em;
57                         }
58                         strong {
59                             font-size: 2em;
60                         }
61                         
62                     }
63                 }
64             }
65         }
66     }
67     #catalogue-carousel-switcher {
68         margin: 0;
69         padding: 50*$px 0 0 58*$px;
70         width: 240*$px - 58*$px;
71         height: 235*$px - 50*$px;
72         position: absolute;
73         right: 0;
74         top: 0;
75         list-style: none;
76         border-radius: 0 15*$px 15*$px 0;
77         background-color: #ed7831;
78         background-image: url(/static/catalogue/img/carousel-right.png);
79         background-position: 0 0;
80         background-repeat: no-repeat;
81         background-size: auto 235*$px;
82         
83         /* right part of mask as background */
84
85         li {
86             margin-bottom: .9em;
87
88             a {
89                 text-transform: uppercase;
90                 color: $ciemny;
91                 font-size: .9em;
92                 font-weight: bold;
93             }
94             a:before {
95                 vertical-align: top;
96                 margin-right: 1.5em;
97             }
98             .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);}
99             .activity:before {content: url(/static/img/icons/activity_dark.png);}
100             .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);}
101             .reference:before {content: url(/static/img/icons/reference_dark.png);}
102         }
103         li.activeSlide {
104             a {
105                 color: white;
106             }
107             .knowledge:before {content: url(/static/img/icons/knowledge_white.png);}
108             .activity:before {content: url(/static/img/icons/activity_white.png);}
109             .lesson-plan:before {content: url(/static/img/icons/lesson-plan_white.png);}
110             .reference:before {content: url(/static/img/icons/reference_white.png);}
111         }
112     }
113
114
115 }