portal-FE-common/src/styles/bootstrap/_carousel.scss

   1 // Wrapper for the slide container and indicators
   2 .carousel {
   3   position: relative;
   4 }
   5
   6 .carousel-inner {
   7   position: relative;
   8   width: 100%;
   9   overflow: hidden;
  10 }
  11
  12 .carousel-item {
  13   position: relative;
  14   display: none;
  15   align-items: center;
  16   width: 100%;
  17   @include transition($carousel-transition);
  18   backface-visibility: hidden;
  19   perspective: 1000px;
  20 }
  21
  22 .carousel-item.active,
  23 .carousel-item-next,
  24 .carousel-item-prev {
  25   display: block;
  26 }
  27
  28 .carousel-item-next,
  29 .carousel-item-prev {
  30   position: absolute;
  31   top: 0;
  32 }
  33
  34 // CSS3 transforms when supported by the browser
  35 .carousel-item-next.carousel-item-left,
  36 .carousel-item-prev.carousel-item-right {
  37   transform: translateX(0);
  38
  39   @supports (transform-style: preserve-3d) {
  40     transform: translate3d(0, 0, 0);
  41   }
  42 }
  43
  44 .carousel-item-next,
  45 .active.carousel-item-right {
  46   transform: translateX(100%);
  47
  48   @supports (transform-style: preserve-3d) {
  49     transform: translate3d(100%, 0, 0);
  50   }
  51 }
  52
  53 .carousel-item-prev,
  54 .active.carousel-item-left {
  55   transform: translateX(-100%);
  56
  57   @supports (transform-style: preserve-3d) {
  58     transform: translate3d(-100%, 0, 0);
  59   }
  60 }
  61
  62
  63 //
  64 // Left/right controls for nav
  65 //
  66
  67 .carousel-control-prev,
  68 .carousel-control-next {
  69   position: absolute;
  70   top: 0;
  71   bottom: 0;
  72   // Use flex for alignment (1-3)
  73   display: flex; // 1. allow flex styles
  74   align-items: center; // 2. vertically center contents
  75   justify-content: center; // 3. horizontally center contents
  76   width: $carousel-control-width;
  77   color: $carousel-control-color;
  78   text-align: center;
  79   opacity: $carousel-control-opacity;
  80   // We can't have a transition here because WebKit cancels the carousel
  81   // animation if you trip this while in the middle of another animation.
  82
  83   // Hover/focus state
  84   @include hover-focus {
  85     color: $carousel-control-color;
  86     text-decoration: none;
  87     outline: 0;
  88     opacity: .9;
  89   }
  90 }
  91 .carousel-control-prev {
  92   left: 0;
  93   @if $enable-gradients {
  94     background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
  95   }
  96 }
  97 .carousel-control-next {
  98   right: 0;
  99   @if $enable-gradients {
 100     background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
 101   }
 102 }
 103
 104 // Icons for within
 105 .carousel-control-prev-icon,
 106 .carousel-control-next-icon {
 107   display: inline-block;
 108   width: $carousel-control-icon-width;
 109   height: $carousel-control-icon-width;
 110   background: transparent no-repeat center center;
 111   background-size: 100% 100%;
 112 }
 113 .carousel-control-prev-icon {
 114   background-image: $carousel-control-prev-icon-bg;
 115 }
 116 .carousel-control-next-icon {
 117   background-image: $carousel-control-next-icon-bg;
 118 }
 119
 120
 121 // Optional indicator pips
 122 //
 123 // Add an ordered list with the following class and add a list item for each
 124 // slide your carousel holds.
 125
 126 .carousel-indicators {
 127   position: absolute;
 128   right: 0;
 129   bottom: 10px;
 130   left: 0;
 131   z-index: 15;
 132   display: flex;
 133   justify-content: center;
 134   padding-left: 0; // override <ol> default
 135   // Use the .carousel-control's width as margin so we don't overlay those
 136   margin-right: $carousel-control-width;
 137   margin-left: $carousel-control-width;
 138   list-style: none;
 139
 140   li {
 141     position: relative;
 142     flex: 0 1 auto;
 143     width: $carousel-indicator-width;
 144     height: $carousel-indicator-height;
 145     margin-right: $carousel-indicator-spacer;
 146     margin-left: $carousel-indicator-spacer;
 147     text-indent: -999px;
 148     background-color: rgba($carousel-indicator-active-bg, .5);
 149
 150     // Use pseudo classes to increase the hit area by 10px on top and bottom.
 151     &::before {
 152       position: absolute;
 153       top: -10px;
 154       left: 0;
 155       display: inline-block;
 156       width: 100%;
 157       height: 10px;
 158       content: "";
 159     }
 160     &::after {
 161       position: absolute;
 162       bottom: -10px;
 163       left: 0;
 164       display: inline-block;
 165       width: 100%;
 166       height: 10px;
 167       content: "";
 168     }
 169   }
 170
 171   .active {
 172     background-color: $carousel-indicator-active-bg;
 173   }
 174 }
 175
 176
 177 // Optional captions
 178 //
 179 //
 180
 181 .carousel-caption {
 182   position: absolute;
 183   right: ((100% - $carousel-caption-width) / 2);
 184   bottom: 20px;
 185   left: ((100% - $carousel-caption-width) / 2);
 186   z-index: 10;
 187   padding-top: 20px;
 188   padding-bottom: 20px;
 189   color: $carousel-caption-color;
 190   text-align: center;
 191 }