17f83d9302d5a3e7ef0cd6f5b38d15a8ff11e25d
[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             z-index: 100;
31             background-color: #888;
32
33             a.catalogue-carousel-link {
34                 display: block;
35                 overflow: hidden;
36                 width: 460*$px;
37                 height: 100%;
38                 background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat;
39                 background-size: 70*$px 100%;
40                 
41                 .catalogue-carousel-note {
42                     position: relative;
43                     height: 100%;
44                     color: white;
45                     margin-top: 8.5em;
46
47                     div {
48                         &:before {
49                             content: " ";
50                             display: block;
51                             position: absolute;
52                             height: 100%;
53                             width: 100%;
54                             z-index: -1;
55                             background-color: black;
56                             opacity: 0.6;
57                         }
58
59                         p {
60                             padding: .4em 3em 0 .5em;
61
62                             strong {
63                                 font-size: 1.2em;
64                                 display: block;
65                             }
66
67                             .more {
68                                 position: absolute;
69                                 right: 4em;
70                                 top: 4.5em;
71                             }
72                         }
73                     }
74                 }
75             }
76             a.catalogue-carousel-link:active {
77                 outline: none;
78             }
79             .attribution {
80                 text-align: right;
81                 font-size: .75em;
82                 position: absolute;
83                 right: 5em;
84                 top: .1em;
85                 color: white;
86                 font-weight: bold;
87                 text-shadow: 0 0 5px #000;
88             }
89
90         }
91     }
92     #catalogue-carousel-switcher {
93         margin: 0;
94         padding: 3*$px 0 0 58*$px;
95         width: 240*$px - 58*$px;
96         height: 235*$px - 8*$px;
97         position: absolute;
98         right: 0;
99         top: 0;
100         list-style: none;
101         border-radius: 0 15*$px 15*$px 0;
102         background-color: #ed7831;
103         background-image: url(/static/catalogue/img/carousel-right.png);
104         background-position: 0 0;
105         background-repeat: no-repeat;
106         background-size: auto 235*$px;
107         
108         /* right part of mask as background */
109
110         li {
111             margin-bottom: .4em;
112             font-size: .85em;
113             line-height: 1em;
114
115             a {
116                 text-transform: uppercase;
117                 color: $ciemny;
118             }
119             a:before {
120                 vertical-align: top;
121                 margin-right: 1.5em;
122             }
123             .knowledge:before {content: url(/static/img/icons/knowledge_dark.png);}
124             .activity:before {content: url(/static/img/icons/activity_dark.png);}
125             .lesson-plan:before {content: url(/static/img/icons/lesson-plan_dark.png);}
126             .reference:before {content: url(/static/img/icons/reference_dark.png);}
127         }
128         li.activeSlide {
129             a {
130                 color: white;
131             }
132             .knowledge:before {content: url(/static/img/icons/knowledge_white.png);}
133             .activity:before {content: url(/static/img/icons/activity_white.png);}
134             .lesson-plan:before {content: url(/static/img/icons/lesson-plan_white.png);}
135             .reference:before {content: url(/static/img/icons/reference_white.png);}
136         }
137     }
138
139
140 }