Back to home page

EIC code displayed by LXR

 
 

    


Warning, /iDDS/monitor/data/scss/bootstrap/_carousel.scss is written in an unsupported language. File is not indexed.

0001 // Notes on the classes:
0002 //
0003 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
0004 //    even when their scroll action started on a carousel, but for compatibility (with Firefox)
0005 //    we're preventing all actions instead
0006 // 2. The .carousel-item-start and .carousel-item-end is used to indicate where
0007 //    the active slide is heading.
0008 // 3. .active.carousel-item is the current slide.
0009 // 4. .active.carousel-item-start and .active.carousel-item-end is the current
0010 //    slide in its in-transition state. Only one of these occurs at a time.
0011 // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
0012 //    is the upcoming slide in transition.
0013 
0014 .carousel {
0015   position: relative;
0016 }
0017 
0018 .carousel.pointer-event {
0019   touch-action: pan-y;
0020 }
0021 
0022 .carousel-inner {
0023   position: relative;
0024   width: 100%;
0025   overflow: hidden;
0026   @include clearfix();
0027 }
0028 
0029 .carousel-item {
0030   position: relative;
0031   display: none;
0032   float: left;
0033   width: 100%;
0034   margin-right: -100%;
0035   backface-visibility: hidden;
0036   @include transition($carousel-transition);
0037 }
0038 
0039 .carousel-item.active,
0040 .carousel-item-next,
0041 .carousel-item-prev {
0042   display: block;
0043 }
0044 
0045 /* rtl:begin:ignore */
0046 .carousel-item-next:not(.carousel-item-start),
0047 .active.carousel-item-end {
0048   transform: translateX(100%);
0049 }
0050 
0051 .carousel-item-prev:not(.carousel-item-end),
0052 .active.carousel-item-start {
0053   transform: translateX(-100%);
0054 }
0055 
0056 /* rtl:end:ignore */
0057 
0058 
0059 //
0060 // Alternate transitions
0061 //
0062 
0063 .carousel-fade {
0064   .carousel-item {
0065     opacity: 0;
0066     transition-property: opacity;
0067     transform: none;
0068   }
0069 
0070   .carousel-item.active,
0071   .carousel-item-next.carousel-item-start,
0072   .carousel-item-prev.carousel-item-end {
0073     z-index: 1;
0074     opacity: 1;
0075   }
0076 
0077   .active.carousel-item-start,
0078   .active.carousel-item-end {
0079     z-index: 0;
0080     opacity: 0;
0081     @include transition(opacity 0s $carousel-transition-duration);
0082   }
0083 }
0084 
0085 
0086 //
0087 // Left/right controls for nav
0088 //
0089 
0090 .carousel-control-prev,
0091 .carousel-control-next {
0092   position: absolute;
0093   top: 0;
0094   bottom: 0;
0095   z-index: 1;
0096   // Use flex for alignment (1-3)
0097   display: flex; // 1. allow flex styles
0098   align-items: center; // 2. vertically center contents
0099   justify-content: center; // 3. horizontally center contents
0100   width: $carousel-control-width;
0101   color: $carousel-control-color;
0102   text-align: center;
0103   opacity: $carousel-control-opacity;
0104   @include transition($carousel-control-transition);
0105 
0106   // Hover/focus state
0107   &:hover,
0108   &:focus {
0109     color: $carousel-control-color;
0110     text-decoration: none;
0111     outline: 0;
0112     opacity: $carousel-control-hover-opacity;
0113   }
0114 }
0115 .carousel-control-prev {
0116   left: 0;
0117   background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
0118 }
0119 .carousel-control-next {
0120   right: 0;
0121   background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
0122 }
0123 
0124 // Icons for within
0125 .carousel-control-prev-icon,
0126 .carousel-control-next-icon {
0127   display: inline-block;
0128   width: $carousel-control-icon-width;
0129   height: $carousel-control-icon-width;
0130   background-repeat: no-repeat;
0131   background-position: 50%;
0132   background-size: 100% 100%;
0133 }
0134 
0135 /* rtl:options: {
0136   "autoRename": true,
0137   "stringMap":[ {
0138     "name"    : "prev-next",
0139     "search"  : "prev",
0140     "replace" : "next"
0141   } ]
0142 } */
0143 .carousel-control-prev-icon {
0144   background-image: escape-svg($carousel-control-prev-icon-bg);
0145 }
0146 .carousel-control-next-icon {
0147   background-image: escape-svg($carousel-control-next-icon-bg);
0148 }
0149 
0150 // Optional indicator pips
0151 //
0152 // Add an ordered list with the following class and add a list item for each
0153 // slide your carousel holds.
0154 
0155 .carousel-indicators {
0156   position: absolute;
0157   right: 0;
0158   bottom: 0;
0159   left: 0;
0160   z-index: 2;
0161   display: flex;
0162   justify-content: center;
0163   padding-left: 0; // override <ol> default
0164   // Use the .carousel-control's width as margin so we don't overlay those
0165   margin-right: $carousel-control-width;
0166   margin-left: $carousel-control-width;
0167   list-style: none;
0168 
0169   li {
0170     box-sizing: content-box;
0171     flex: 0 1 auto;
0172     width: $carousel-indicator-width;
0173     height: $carousel-indicator-height;
0174     margin-right: $carousel-indicator-spacer;
0175     margin-left: $carousel-indicator-spacer;
0176     text-indent: -999px;
0177     cursor: pointer;
0178     background-color: $carousel-indicator-active-bg;
0179     background-clip: padding-box;
0180     // Use transparent borders to increase the hit area by 10px on top and bottom.
0181     border-top: $carousel-indicator-hit-area-height solid transparent;
0182     border-bottom: $carousel-indicator-hit-area-height solid transparent;
0183     opacity: $carousel-indicator-opacity;
0184     @include transition($carousel-indicator-transition);
0185   }
0186 
0187   .active {
0188     opacity: $carousel-indicator-active-opacity;
0189   }
0190 }
0191 
0192 
0193 // Optional captions
0194 //
0195 //
0196 
0197 .carousel-caption {
0198   position: absolute;
0199   right: (100% - $carousel-caption-width) / 2;
0200   bottom: $carousel-caption-spacer;
0201   left: (100% - $carousel-caption-width) / 2;
0202   padding-top: $carousel-caption-padding-y;
0203   padding-bottom: $carousel-caption-padding-y;
0204   color: $carousel-caption-color;
0205   text-align: center;
0206 }
0207 
0208 // Dark mode carousel
0209 
0210 .carousel-dark {
0211   .carousel-control-prev-icon,
0212   .carousel-control-next-icon {
0213     filter: $carousel-dark-control-icon-filter;
0214   }
0215 
0216   .carousel-indicators li {
0217     background-color: $carousel-dark-indicator-active-bg;
0218   }
0219 
0220   .carousel-caption {
0221     color: $carousel-dark-caption-color;
0222   }
0223 }