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