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