jumbo-jekyll-theme 5.6.9.4 → 5.7.0

data/_sass/bootstrap/_carousel.scss

@@ -1,270 +1,236 @@
+// Notes on the classes:
 //
-// Carousel
-// --------------------------------------------------
+// 1. 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
+//    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
+//    is the upcoming slide in transition.
 
-
-// Wrapper for the slide container and indicators
 .carousel {
   position: relative;
 }
 
 .carousel-inner {
   position: relative;
+  width: 100%;
   overflow: hidden;
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  align-items: center;
   width: 100%;
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
 
-  > .item {
-    display: none;
-    position: relative;
-    @include transition(.6s ease-in-out left);
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+  @include transition($carousel-transition);
+}
 
-    // Account for jankitude on images
-    > img,
-    > a > img {
-      @include img-responsive;
-      line-height: 1;
-    }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
 
-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      @include transition-transform(0.6s ease-in-out);
-      @include backface-visibility(hidden);
-      @include perspective(1000px);
-
-      &.next,
-      &.active.right {
-        @include translate3d(100%, 0, 0);
-        left: 0;
-      }
-      &.prev,
-      &.active.left {
-        @include translate3d(-100%, 0, 0);
-        left: 0;
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        @include translate3d(0, 0, 0);
-        left: 0;
-      }
-    }
-  }
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+  transform: translateX(0);
 
-  > .active,
-  > .next,
-  > .prev {
-    display: block;
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  > .active {
-    left: 0;
-  }
+.carousel-item-next,
+.active.carousel-item-right {
+  transform: translateX(100%);
 
-  > .next,
-  > .prev {
-    position: absolute;
-    top: 0;
-    width: 100%;
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(100%, 0, 0);
   }
+}
 
-  > .next {
-    left: 100%;
-  }
-  > .prev {
-    left: -100%;
+.carousel-item-prev,
+.active.carousel-item-left {
+  transform: translateX(-100%);
+
+  @supports (transform-style: preserve-3d) {
+    transform: translate3d(-100%, 0, 0);
   }
-  > .next.left,
-  > .prev.right {
-    left: 0;
+}
+
+
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-duration: .6s;
+    transition-property: opacity;
   }
 
-  > .active.left {
-    left: -100%;
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    opacity: 1;
   }
-  > .active.right {
-    left: 100%;
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    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);
+    }
+  }
 }
 
+
+//
 // Left/right controls for nav
-// ---------------------------
+//
 
-.carousel-control {
+.carousel-control-prev,
+.carousel-control-next {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
-  @include opacity($carousel-control-opacity);
-  font-size: $carousel-control-font-size;
   color: $carousel-control-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
-  background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
-  // We can't have this transition here because WebKit cancels the carousel
+  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.
 
-  // Set gradients for backgrounds
-  &.left {
-    @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
-  }
-  &.right {
-    left: auto;
-    right: 0;
-    @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
-  }
-
   // Hover/focus state
-  &:hover,
-  &:focus {
-    outline: 0;
+  @include hover-focus {
     color: $carousel-control-color;
     text-decoration: none;
-    @include opacity(.9);
-  }
-
-  // Toggles
-  .icon-prev,
-  .icon-next,
-  .glyphicon-chevron-left,
-  .glyphicon-chevron-right {
-    position: absolute;
-    top: 50%;
-    margin-top: -10px;
-    z-index: 5;
-    display: inline-block;
-  }
-  .icon-prev,
-  .glyphicon-chevron-left {
-    left: 50%;
-    margin-left: -10px;
+    outline: 0;
+    opacity: .9;
   }
-  .icon-next,
-  .glyphicon-chevron-right {
-    right: 50%;
-    margin-right: -10px;
+}
+.carousel-control-prev {
+  left: 0;
+  @if $enable-gradients {
+    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
   }
-  .icon-prev,
-  .icon-next {
-    width:  20px;
-    height: 20px;
-    line-height: 1;
-    font-family: serif;
+}
+.carousel-control-next {
+  right: 0;
+  @if $enable-gradients {
+    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
   }
+}
 
-
-  .icon-prev {
-    &:before {
-      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
-    }
-  }
-  .icon-next {
-    &:before {
-      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
-    }
-  }
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
 }
 
+
 // Optional indicator pips
 //
-// Add an unordered list with the following class and add a list item for each
+// Add an ordered list with the following class and add a list item for each
 // slide your carousel holds.
 
 .carousel-indicators {
   position: absolute;
+  right: 0;
   bottom: 10px;
-  left: 50%;
+  left: 0;
   z-index: 15;
-  width: 60%;
-  margin-left: -30%;
-  padding-left: 0;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
   list-style: none;
-  text-align: center;
 
   li {
-    display: inline-block;
-    width:  10px;
-    height: 10px;
-    margin: 1px;
+    position: relative;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
-    border: 1px solid $carousel-indicator-border-color;
-    border-radius: 10px;
     cursor: pointer;
-
-    // IE8-9 hack for event handling
-    //
-    // Internet Explorer 8-9 does not support clicks on elements without a set
-    // `background-color`. We cannot use `filter` since that's not viewed as a
-    // background color by the browser. Thus, a hack is needed.
-    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
-    //
-    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
-    // set alpha transparency for the best results possible.
-    background-color: #000 \9; // IE8
-    background-color: rgba(0,0,0,0); // IE9
+    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: "";
+    }
   }
+
   .active {
-    margin: 0;
-    width:  12px;
-    height: 12px;
     background-color: $carousel-indicator-active-bg;
   }
 }
 
+
 // Optional captions
-// -----------------------------
-// Hidden by default for smaller viewports
+//
+//
+
 .carousel-caption {
   position: absolute;
-  left: 15%;
-  right: 15%;
+  right: ((100% - $carousel-caption-width) / 2);
   bottom: 20px;
+  left: ((100% - $carousel-caption-width) / 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: $carousel-caption-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
-  & .btn {
-    text-shadow: none; // No shadow for button elements in carousel-caption
-  }
-}
-
-
-// Scale up controls for tablets and up
-@media screen and (min-width: $screen-sm-min) {
-
-  // Scale up the controls a smidge
-  .carousel-control {
-    .glyphicon-chevron-left,
-    .glyphicon-chevron-right,
-    .icon-prev,
-    .icon-next {
-      width: ($carousel-control-font-size * 1.5);
-      height: ($carousel-control-font-size * 1.5);
-      margin-top: ($carousel-control-font-size / -2);
-      font-size: ($carousel-control-font-size * 1.5);
-    }
-    .glyphicon-chevron-left,
-    .icon-prev {
-      margin-left: ($carousel-control-font-size / -2);
-    }
-    .glyphicon-chevron-right,
-    .icon-next {
-      margin-right: ($carousel-control-font-size / -2);
-    }
-  }
-
-  // Show and left align the captions
-  .carousel-caption {
-    left: 20%;
-    right: 20%;
-    padding-bottom: 30px;
-  }
-
-  // Move up the indicators
-  .carousel-indicators {
-    bottom: 20px;
-  }
 }

data/_sass/bootstrap/_close.scss

@@ -1,36 +1,35 @@
-//
-// Close icons
-// --------------------------------------------------
-
-
 .close {
   float: right;
-  font-size: ($font-size-base * 1.5);
+  font-size: $close-font-size;
   font-weight: $close-font-weight;
   line-height: 1;
   color: $close-color;
   text-shadow: $close-text-shadow;
-  @include opacity(.2);
+  opacity: .5;
+
+  &:not(:disabled):not(.disabled) {
 
-  &:hover,
-  &:focus {
-    color: $close-color;
-    text-decoration: none;
+    @include hover-focus {
+      color: $close-color;
+      text-decoration: none;
+      opacity: .75;
+    }
+
+    // Opinionated: add "hand" cursor to non-disabled .close elements
     cursor: pointer;
-    @include opacity(.5);
   }
-
-  // [converter] extracted button& to button.close
 }
 
 // Additional properties for button version
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
 button.close {
   padding: 0;
-  cursor: pointer;
-  background: transparent;
+  background-color: transparent;
   border: 0;
   -webkit-appearance: none;
 }
+// stylelint-enable