bootstrap 4.0.0.beta2.1 → 4.0.0.beta3

data/assets/stylesheets/bootstrap/_list-group.scss

@@ -59,6 +59,7 @@
   }
 
   @include hover-focus {
+    z-index: 1; // Place hover/active items above their siblings for proper border styling
     text-decoration: none;
   }
 
@@ -87,7 +88,7 @@
   .list-group-item {
     border-right: 0;
     border-left: 0;
-    border-radius: 0;
+    @include border-radius(0);
   }
 
   &:first-child {

data/assets/stylesheets/bootstrap/_modal.scss

@@ -26,16 +26,10 @@
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
 
-  // When fading in the modal, animate it to slide down
-  &.fade .modal-dialog {
-    @include transition($modal-transition);
-    transform: translate(0, -25%);
+  .modal-open & {
+    overflow-x: hidden;
+    overflow-y: auto;
   }
-  &.show .modal-dialog { transform: translate(0, 0); }
-}
-.modal-open .modal {
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 // Shell div to position the modal with bottom padding
@@ -45,6 +39,21 @@
   margin: $modal-dialog-margin;
   // allow clicks to pass through for custom click handling to close modal
   pointer-events: none;
+
+  // When fading in the modal, animate it to slide down
+  .modal.fade & {
+    @include transition($modal-transition);
+    transform: translate(0, -25%);
+  }
+  .modal.show & {
+    transform: translate(0, 0);
+  }
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - (#{$modal-dialog-margin} * 2));
 }
 
 // Actual modal
@@ -52,6 +61,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
   // counteract the pointer-events: none; in the .modal-dialog
   pointer-events: auto;
   background-color: $modal-content-bg;
@@ -141,11 +151,16 @@
     margin: $modal-dialog-margin-y-sm-up auto;
   }
 
+  .modal-dialog-centered {
+    min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
+  }
+
   .modal-content {
     @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
   .modal-sm { max-width: $modal-sm; }
+
 }
 
 @include media-breakpoint-up(lg) {

data/assets/stylesheets/bootstrap/_nav.scss

@@ -41,7 +41,7 @@
     @include border-top-radius($nav-tabs-border-radius);
 
     @include hover-focus {
-      border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
+      border-color: $nav-tabs-link-hover-border-color;
     }
 
     &.disabled {
@@ -55,7 +55,7 @@
   .nav-item.show .nav-link {
     color: $nav-tabs-link-active-color;
     background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
   }
 
   .dropdown-menu {

data/assets/stylesheets/bootstrap/_navbar.scss

@@ -109,13 +109,18 @@
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: transparent; // remove default button style
+  background-color: transparent; // remove default button style
   border: $border-width solid transparent; // remove default button style
   @include border-radius($navbar-toggler-border-radius);
 
   @include hover-focus {
     text-decoration: none;
   }
+
+  // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements
+  &:not([disabled]):not(.disabled) {
+    cursor: pointer;
+  }
 }
 
 // Keep as a separate element so folks can easily override it with another icon

data/assets/stylesheets/bootstrap/_pagination.scss

@@ -4,6 +4,30 @@
   @include border-radius();
 }
 
+.page-link {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -$pagination-border-width;
+  line-height: $pagination-line-height;
+  color: $pagination-color;
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  @include hover-focus {
+    color: $pagination-hover-color;
+    text-decoration: none;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+
+
+  // Opinionated: add "hand" cursor to non-disabled .page-link elements
+  &:not([disabled]):not(.disabled) {
+    cursor: pointer;
+  }
+}
+
 .page-item {
   &:first-child {
     .page-link {
@@ -18,7 +42,7 @@
   }
 
   &.active .page-link {
-    z-index: 2;
+    z-index: 1;
     color: $pagination-active-color;
     background-color: $pagination-active-bg;
     border-color: $pagination-active-border-color;
@@ -27,29 +51,13 @@
   &.disabled .page-link {
     color: $pagination-disabled-color;
     pointer-events: none;
+    // Opinionated: remove the "hand" cursor set previously for .page-link
+    cursor: auto;
     background-color: $pagination-disabled-bg;
     border-color: $pagination-disabled-border-color;
   }
 }
 
-.page-link {
-  position: relative;
-  display: block;
-  padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -$pagination-border-width;
-  line-height: $pagination-line-height;
-  color: $pagination-color;
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
-
-  @include hover-focus {
-    color: $pagination-hover-color;
-    text-decoration: none;
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
-  }
-}
-
 
 //
 // Sizing

data/assets/stylesheets/bootstrap/_popover.scss

@@ -17,157 +17,146 @@
   @include border-radius($border-radius-lg);
   @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;
   }
 }