jekyll-bootstrap 4.0.0.pre.beta.2.2 → 4.0.0

data/_sass/_popover.scss

@@ -8,166 +8,155 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: $font-size-sm;
+  font-size: $popover-font-size;
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: $popover-bg;
   background-clip: padding-box;
   border: $popover-border-width solid $popover-border-color;
-  @include border-radius($border-radius-lg);
+  @include border-radius($popover-border-radius);
   @include box-shadow($popover-box-shadow);
 
-  // Arrows
-  //
-  // .arrow is outer, .arrow::after is inner
-
   .arrow {
     position: absolute;
     display: block;
     width: $popover-arrow-width;
     height: $popover-arrow-height;
+    margin: 0 $border-radius-lg;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-popover-top {
+  margin-bottom: $popover-arrow-height;
+
+  .arrow {
+    bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
   }
 
   .arrow::before,
   .arrow::after {
-    position: absolute;
-    display: block;
-    border-color: transparent;
-    border-style: solid;
+    border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
   }
 
   .arrow::before {
-    content: "";
-    border-width: $popover-arrow-width;
+    bottom: 0;
+    border-top-color: $popover-arrow-outer-color;
   }
+
   .arrow::after {
-    content: "";
-    border-width: $popover-arrow-width;
+    bottom: $popover-border-width;
+    border-top-color: $popover-arrow-color;
   }
+}
 
-  // Popover directions
-
-  &.bs-popover-top {
-    margin-bottom: $popover-arrow-width;
-
-    .arrow {
-      bottom: 0;
-    }
-
-    .arrow::before,
-    .arrow::after {
-      border-bottom-width: 0;
-    }
+.bs-popover-right {
+  margin-left: $popover-arrow-height;
 
-    .arrow::before {
-      bottom: -$popover-arrow-width;
-      margin-left: -$popover-arrow-width;
-      border-top-color: $popover-arrow-outer-color;
-    }
-
-    .arrow::after {
-      bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
-      margin-left: -$popover-arrow-width;
-      border-top-color: $popover-arrow-color;
-    }
+  .arrow {
+    left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+    margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
   }
 
-  &.bs-popover-right {
-    margin-left: $popover-arrow-width;
+  .arrow::before,
+  .arrow::after {
+    border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+  }
 
-    .arrow {
-      left: 0;
-    }
+  .arrow::before {
+    left: 0;
+    border-right-color: $popover-arrow-outer-color;
+  }
 
-    .arrow::before,
-    .arrow::after {
-      margin-top: -$popover-arrow-width;
-      border-left-width: 0;
-    }
+  .arrow::after {
+    left: $popover-border-width;
+    border-right-color: $popover-arrow-color;
+  }
+}
 
-    .arrow::before {
-      left: -$popover-arrow-width;
-      border-right-color: $popover-arrow-outer-color;
-    }
+.bs-popover-bottom {
+  margin-top: $popover-arrow-height;
 
-    .arrow::after {
-      left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
-      border-right-color: $popover-arrow-color;
-    }
+  .arrow {
+    top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
   }
 
-  &.bs-popover-bottom {
-    margin-top: $popover-arrow-width;
+  .arrow::before,
+  .arrow::after {
+    border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+  }
 
-    .arrow {
-      top: 0;
-    }
+  .arrow::before {
+    top: 0;
+    border-bottom-color: $popover-arrow-outer-color;
+  }
 
-    .arrow::before,
-    .arrow::after {
-      margin-left: -$popover-arrow-width;
-      border-top-width: 0;
-    }
+  .arrow::after {
+    top: $popover-border-width;
+    border-bottom-color: $popover-arrow-color;
+  }
 
-    .arrow::before {
-      top: -$popover-arrow-width;
-      border-bottom-color: $popover-arrow-outer-color;
-    }
+  // This will remove the popover-header's border just below the arrow
+  .popover-header::before {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: $popover-arrow-width;
+    margin-left: ($popover-arrow-width / -2);
+    content: "";
+    border-bottom: $popover-border-width solid $popover-header-bg;
+  }
+}
 
-    .arrow::after {
-      top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
-      border-bottom-color: $popover-arrow-color;
-    }
+.bs-popover-left {
+  margin-right: $popover-arrow-height;
 
-    // This will remove the popover-header's border just below the arrow
-    .popover-header::before {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      display: block;
-      width: 20px;
-      margin-left: -10px;
-      content: "";
-      border-bottom: $popover-border-width solid $popover-header-bg;
-    }
+  .arrow {
+    right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+    margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
   }
 
-  &.bs-popover-left {
-    margin-right: $popover-arrow-width;
-
-    .arrow {
-      right: 0;
-    }
+  .arrow::before,
+  .arrow::after {
+    border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+  }
 
-    .arrow::before,
-    .arrow::after {
-      margin-top: -$popover-arrow-width;
-      border-right-width: 0;
-    }
+  .arrow::before {
+    right: 0;
+    border-left-color: $popover-arrow-outer-color;
+  }
 
-    .arrow::before {
-      right: -$popover-arrow-width;
-      border-left-color: $popover-arrow-outer-color;
-    }
+  .arrow::after {
+    right: $popover-border-width;
+    border-left-color: $popover-arrow-color;
+  }
+}
 
-    .arrow::after {
-      right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
-      border-left-color: $popover-arrow-color;
-    }
+.bs-popover-auto {
+  &[x-placement^="top"] {
+    @extend .bs-popover-top;
   }
-  &.bs-popover-auto {
-    &[x-placement^="top"] {
-      @extend .bs-popover-top;
-    }
-    &[x-placement^="right"] {
-      @extend .bs-popover-right;
-    }
-    &[x-placement^="bottom"] {
-      @extend .bs-popover-bottom;
-    }
-    &[x-placement^="left"] {
-      @extend .bs-popover-left;
-    }
+  &[x-placement^="right"] {
+    @extend .bs-popover-right;
+  }
+  &[x-placement^="bottom"] {
+    @extend .bs-popover-bottom;
+  }
+  &[x-placement^="left"] {
+    @extend .bs-popover-left;
   }
 }
 

data/_sass/_print.scss

@@ -20,9 +20,10 @@
       box-shadow: none !important;
     }
 
-    a,
-    a:visited {
-      text-decoration: underline;
+    a {
+      &:not(.btn) {
+        text-decoration: underline;
+      }
     }
 
     // Bootstrap specific; comment the following selector out
@@ -82,6 +83,19 @@
 
     // Bootstrap specific changes start
 
+    // Specify a size and min-width to make printing closer across browsers.
+    // We don't set margin here because it breaks `size` in Chrome. We also
+    // don't use `!important` on `size` as it breaks in Chrome.
+    @page {
+      size: $print-page-size;
+    }
+    body {
+      min-width: $print-body-min-width !important;
+    }
+    .container {
+      min-width: $print-body-min-width !important;
+    }
+
     // Bootstrap components
     .navbar {
       display: none;

data/_sass/_progress.scss

@@ -10,14 +10,17 @@
   font-size: $progress-font-size;
   background-color: $progress-bg;
   @include border-radius($progress-border-radius);
+  @include box-shadow($progress-box-shadow);
 }
 
 .progress-bar {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
   color: $progress-bar-color;
+  text-align: center;
   background-color: $progress-bar-bg;
+  @include transition($progress-bar-transition);
 }
 
 .progress-bar-striped {

data/_sass/_reboot.scss

@@ -30,7 +30,7 @@ html {
   -webkit-text-size-adjust: 100%; // 4
   -ms-text-size-adjust: 100%; // 4
   -ms-overflow-style: scrollbar; // 5
-  -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
 }
 
 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
@@ -71,7 +71,7 @@ body {
 //
 // Credit: https://github.com/suitcss/base
 [tabindex="-1"]:focus {
-  outline: none !important;
+  outline: 0 !important;
 }
 
 
@@ -279,29 +279,6 @@ svg:not(:root) {
 }
 
 
-// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
-//
-// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
-// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
-// However, they DO support removing the click delay via `touch-action: manipulation`.
-// See:
-// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
-// * https://caniuse.com/#feat=css-touch-action
-// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
-
-a,
-area,
-button,
-[role="button"],
-input:not([type="range"]),
-label,
-select,
-summary,
-textarea {
-  touch-action: manipulation;
-}
-
-
 //
 // Tables
 //
@@ -491,6 +468,7 @@ output {
 
 summary {
   display: list-item; // Add the correct display in all browsers
+  cursor: pointer;
 }
 
 template {

data/_sass/_tables.scss

@@ -171,7 +171,7 @@
         -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
 
         // Prevent double border on horizontal scroll due to use of `display: block;`
-        &.table-bordered {
+        > .table-bordered {
           border: 0;
         }
       }

data/_sass/_tooltip.scss

@@ -7,7 +7,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: $font-size-sm;
+  font-size: $tooltip-font-size;
   // Allow breaking very long words so they don't overflow the tooltip's bounds
   word-wrap: break-word;
   opacity: 0;
@@ -19,80 +19,88 @@
     display: block;
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
-  }
 
-  .arrow::before {
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
+    &::before {
+      position: absolute;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
   }
+}
 
-  &.bs-tooltip-top {
-    padding: $tooltip-arrow-width 0;
-    .arrow {
-      bottom: 0;
-    }
+.bs-tooltip-top {
+  padding: $tooltip-arrow-height 0;
 
-    .arrow::before {
-      margin-left: -($tooltip-arrow-width - 2);
-      content: "";
-      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+  .arrow {
+    bottom: 0;
+
+    &::before {
+      top: 0;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
-  &.bs-tooltip-right {
-    padding: 0 $tooltip-arrow-width;
-    .arrow {
-      left: 0;
-    }
+}
 
-    .arrow::before {
-      margin-top: -($tooltip-arrow-width - 2);
-      content: "";
-      border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+.bs-tooltip-right {
+  padding: 0 $tooltip-arrow-height;
+
+  .arrow {
+    left: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+
+    &::before {
+      right: 0;
+      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
-  &.bs-tooltip-bottom {
-    padding: $tooltip-arrow-width 0;
-    .arrow {
-      top: 0;
-    }
+}
 
-    .arrow::before {
-      margin-left: -($tooltip-arrow-width - 2);
-      content: "";
-      border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+.bs-tooltip-bottom {
+  padding: $tooltip-arrow-height 0;
+
+  .arrow {
+    top: 0;
+
+    &::before {
+      bottom: 0;
+      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
-  &.bs-tooltip-left {
-    padding: 0 $tooltip-arrow-width;
-    .arrow {
-      right: 0;
-    }
+}
 
-    .arrow::before {
-      right: 0;
-      margin-top: -($tooltip-arrow-width - 2);
-      content: "";
-      border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+.bs-tooltip-left {
+  padding: 0 $tooltip-arrow-height;
+
+  .arrow {
+    right: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+
+    &::before {
+      left: 0;
+      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }
-  &.bs-tooltip-auto {
-    &[x-placement^="top"] {
-      @extend .bs-tooltip-top;
-    }
-    &[x-placement^="right"] {
-      @extend .bs-tooltip-right;
-    }
-    &[x-placement^="bottom"] {
-      @extend .bs-tooltip-bottom;
-    }
-    &[x-placement^="left"] {
-      @extend .bs-tooltip-left;
-    }
+}
+
+.bs-tooltip-auto {
+  &[x-placement^="top"] {
+    @extend .bs-tooltip-top;
+  }
+  &[x-placement^="right"] {
+    @extend .bs-tooltip-right;
+  }
+  &[x-placement^="bottom"] {
+    @extend .bs-tooltip-bottom;
+  }
+  &[x-placement^="left"] {
+    @extend .bs-tooltip-left;
   }
 }
 
@@ -103,5 +111,5 @@
   color: $tooltip-color;
   text-align: center;
   background-color: $tooltip-bg;
-  @include border-radius($border-radius);
+  @include border-radius($tooltip-border-radius);
 }