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