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