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 }