PageRenderTime 34ms CodeModel.GetById 14ms app.highlight 13ms RepoModel.GetById 1ms app.codeStats 1ms

/mizuxe2017/scss/bootstrap/_carousel.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 191 lines | 148 code | 24 blank | 19 comment | 0 complexity | 92d128779d5384dc86cc966625aec7b5 MD5 | raw file
  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}