tabs on admin dashboard

node_modules/bootstrap/scss/_carousel.scss

@@ -1,70 +1,55 @@
 // Notes on the classes:
 //
-// 1. The .carousel-item-left and .carousel-item-right is used to indicate where
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
 //    the active slide is heading.
-// 2. .active.carousel-item is the current slide.
-// 3. .active.carousel-item-left and .active.carousel-item-right is the current
+// 3. .active.carousel-item is the current slide.
+// 4. .active.carousel-item-left and .active.carousel-item-right is the current
 //    slide in its in-transition state. Only one of these occurs at a time.
-// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
 //    is the upcoming slide in transition.
 
 .carousel {
   position: relative;
 }
 
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
 .carousel-inner {
   position: relative;
   width: 100%;
   overflow: hidden;
+  @include clearfix();
 }
 
 .carousel-item {
   position: relative;
   display: none;
-  align-items: center;
+  float: left;
   width: 100%;
+  margin-right: -100%;
   backface-visibility: hidden;
-  perspective: 1000px;
+  @include transition($carousel-transition);
 }
 
 .carousel-item.active,
 .carousel-item-next,
 .carousel-item-prev {
   display: block;
-  @include transition($carousel-transition);
 }
 
-.carousel-item-next,
-.carousel-item-prev {
-  position: absolute;
-  top: 0;
-}
-
-.carousel-item-next.carousel-item-left,
-.carousel-item-prev.carousel-item-right {
-  transform: translateX(0);
-
-  @supports (transform-style: preserve-3d) {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.carousel-item-next,
+.carousel-item-next:not(.carousel-item-left),
 .active.carousel-item-right {
   transform: translateX(100%);
-
-  @supports (transform-style: preserve-3d) {
-    transform: translate3d(100%, 0, 0);
-  }
 }
 
-.carousel-item-prev,
+.carousel-item-prev:not(.carousel-item-right),
 .active.carousel-item-left {
   transform: translateX(-100%);
-
-  @supports (transform-style: preserve-3d) {
-    transform: translate3d(-100%, 0, 0);
-  }
 }
 
 
@@ -75,31 +60,22 @@
 .carousel-fade {
   .carousel-item {
     opacity: 0;
-    transition-duration: .6s;
     transition-property: opacity;
+    transform: none;
   }
 
   .carousel-item.active,
   .carousel-item-next.carousel-item-left,
   .carousel-item-prev.carousel-item-right {
+    z-index: 1;
     opacity: 1;
   }
 
   .active.carousel-item-left,
   .active.carousel-item-right {
+    z-index: 0;
     opacity: 0;
-  }
-
-  .carousel-item-next,
-  .carousel-item-prev,
-  .carousel-item.active,
-  .active.carousel-item-left,
-  .active.carousel-item-prev {
-    transform: translateX(0);
-
-    @supports (transform-style: preserve-3d) {
-      transform: translate3d(0, 0, 0);
-    }
+    @include transition(0s $carousel-transition-duration opacity);
   }
 }
 
@@ -113,6 +89,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  z-index: 1;
   // Use flex for alignment (1-3)
   display: flex; // 1. allow flex styles
   align-items: center; // 2. vertically center contents
@@ -121,15 +98,14 @@
   color: $carousel-control-color;
   text-align: center;
   opacity: $carousel-control-opacity;
-  // We can't have a transition here because WebKit cancels the carousel
-  // animation if you trip this while in the middle of another animation.
+  @include transition($carousel-control-transition);
 
   // Hover/focus state
   @include hover-focus {
     color: $carousel-control-color;
     text-decoration: none;
     outline: 0;
-    opacity: .9;
+    opacity: $carousel-control-hover-opacity;
   }
 }
 .carousel-control-prev {
@@ -151,8 +127,7 @@
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
-  background: transparent no-repeat center center;
-  background-size: 100% 100%;
+  background: no-repeat 50% / 100% 100%;
 }
 .carousel-control-prev-icon {
   background-image: $carousel-control-prev-icon-bg;
@@ -170,7 +145,7 @@
 .carousel-indicators {
   position: absolute;
   right: 0;
-  bottom: 10px;
+  bottom: 0;
   left: 0;
   z-index: 15;
   display: flex;
@@ -182,7 +157,7 @@
   list-style: none;
 
   li {
-    position: relative;
+    box-sizing: content-box;
     flex: 0 1 auto;
     width: $carousel-indicator-width;
     height: $carousel-indicator-height;
@@ -190,31 +165,17 @@
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    background-color: rgba($carousel-indicator-active-bg, .5);
-
-    // Use pseudo classes to increase the hit area by 10px on top and bottom.
-    &::before {
-      position: absolute;
-      top: -10px;
-      left: 0;
-      display: inline-block;
-      width: 100%;
-      height: 10px;
-      content: "";
-    }
-    &::after {
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-      display: inline-block;
-      width: 100%;
-      height: 10px;
-      content: "";
-    }
+    background-color: $carousel-indicator-active-bg;
+    background-clip: padding-box;
+    // Use transparent borders to increase the hit area by 10px on top and bottom.
+    border-top: $carousel-indicator-hit-area-height solid transparent;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
+    opacity: .5;
+    @include transition($carousel-indicator-transition);
   }
 
   .active {
-    background-color: $carousel-indicator-active-bg;
+    opacity: 1;
   }
 }
 
@@ -225,9 +186,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: ((100% - $carousel-caption-width) / 2);
+  right: (100% - $carousel-caption-width) / 2;
   bottom: 20px;
-  left: ((100% - $carousel-caption-width) / 2);
+  left: (100% - $carousel-caption-width) / 2;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;