Merge pull request #644 from tnir/tnir-bootstrap-4-643

Replace bootstrap-sass 3 to bootstrap 4.6.1

assets/javascripts/application.js

@@ -1,9 +1,8 @@
-import 'bootstrap-sass/assets/javascripts/bootstrap/transition'
-import 'bootstrap-sass/assets/javascripts/bootstrap/button'
-import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip'
-import 'bootstrap-sass/assets/javascripts/bootstrap/popover'
-import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown'
-import 'bootstrap-sass/assets/javascripts/bootstrap/collapse'
+import 'bootstrap/js/dist/button'
+import 'bootstrap/js/dist/tooltip'
+import 'bootstrap/js/dist/popover'
+import 'bootstrap/js/dist/dropdown'
+import 'bootstrap/js/dist/collapse'
 import './search'
 import './search_arrows'
 import AnchorJS from 'anchor-js';

assets/javascripts/search.js

@@ -45,7 +45,6 @@ $(document).ready(function() {
     };
 
     this.hidePopover = function() {
-      this.popover.options.animation = true;
       this.searchInput.popover('hide');
       this.searchArrows.destroy();
     };
@@ -114,7 +113,6 @@ $(document).ready(function() {
       });
       this.searchInput.on('shown.bs.popover', function()  {
         self.popoverHandler = $(self.POPOVER_CLASS);
-        self.popover.options.animation = false;
         self.popoverHandler.click(function(e) { e.stopPropagation() });
         self.searchArrows.init();
       });

assets/stylesheets/_bootstrap-overrides.scss

@@ -1,24 +1,36 @@
+$theme-colors: (
+  // for .btn-primary. This color is applied to $link-color so tweak is followed.
+  // - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+  "primary": #12AEE2
+);
+
 // navbar
-$navbar-default-bg: #fff;
-$navbar-default-border: #fff;
+$navbar-padding-y: 0;
+
+$navbar-light-brand-color: #06456A;
+$navbar-light-color: #000;
+
+// Transition workaround for skipping improvement from Bootstrap 3.4.1 to Bootstrap 4.6.1
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+// - Color adapted from https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L389
+$_navbar-default-toggle-icon-bar-bg: #888;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$_navbar-default-toggle-icon-bar-bg}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+// /Transition workaround
 
-$navbar-default-link-color: #000;
-$navbar-default-link-hover-color: #777;
+$navbar-nav-link-padding-x: 0.875rem;
 
-$navbar-default-brand-color: #06456A;
-$navbar-default-brand-hover-color: $navbar-default-brand-color;
+// font-size: 1.25rem ($font-size-lg) is too large for .navbar-toggler
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1177959921
+$navbar-toggler-font-size: 1rem;
 
-$btn-primary-bg: #12AEE2;
-$btn-primary-border: transparent;
+// .btn does not need border
+$btn-border-width: 0;
 
-$font-family-sans-serif: "SancoaleSlab";
-$font-size-base: 16px;
+$font-family-sans-serif: "SancoaleSlab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-$pre-bg: #373737;
-$pre-color: #fff;
-$pre-border-color: #373737;
+// for contributors
+$card-border-width: 0;
 
-$thumbnail-padding: 25px;
-$thumbnail-border: #fff;
-$thumbnail-caption-color: $navbar-default-brand-color;
-$thumbnail-caption-padding: 0px;
+// Transition workaround for unifying link color and button (btn-primary) in Boostrap 4.6.1
+$link-color: #337ab7;
+// /Transition workaround

assets/stylesheets/_docs.scss

@@ -18,7 +18,7 @@
   }
 
   .thumbnail {
-    @media(min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       img {
         max-width: 200px;
       }
@@ -32,3 +32,26 @@
     margin-bottom: 20px;
   }
 }
+
+// transition code in Bootstrap 4 migration
+// https://github.com/twbs/bootstrap/commit/4fdd63a516cdce26c6914f2b7d11e0af0b08df17
+pre {
+  padding: 0.625rem;
+  border-radius: 4px;
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+  }
+}
+
+code {
+  padding: 0.125rem 0.25rem;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 0.25rem;
+}
+// end of transition code in Bootstrap 4 migration

assets/stylesheets/_footer.scss

@@ -1,26 +1,15 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-$footer-height: 75px;
+$footer-height: 4.6875rem;
 $footer-color: #55BCEB;
 
 html {
   position: relative;
   min-height: 100%;
 }
-body {
-  margin-bottom: $footer-height;
-}
 
 .footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  margin-top: 30px;
-  padding-top: 5px;
-
-  .row {
-    background-color: $footer-color;
-  }
+  background-color: $footer-color;
 
   .footer-logo {
     float: right;
@@ -41,7 +30,7 @@ body {
       display: inline-block;
 
       a {
-        line-height: $footer-height - 2*14;
+        line-height: $footer-height - $nav-link-padding-y * 2;
         color: black;
       }
 

assets/stylesheets/_navbar.scss

@@ -4,6 +4,7 @@
 
 .navbar-brand {
   font-size: 32px;
+  margin: -3px 0;
 }
 
 .navbar {

assets/stylesheets/_opacity.scss

@@ -0,0 +1,16 @@
+// https://getbootstrap.com/docs/5.1/utilities/colors/#opacity
+// See also
+// https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_utilities.scss#L27-L39
+// https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_utilities.scss#L64-L72
+.text-opacity-50 {
+  --bs-text-opacity: 0.5;
+  color: rgba($body-color, var(--bs-text-opacity));
+}
+
+// Transition workaround for skipping improvement from Bootstrap 3.4.1 to Bootstrap 4.6.1
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+.text-opacity-40 {
+  --bs-text-opacity: 0.4;
+  color: rgba($body-color, var(--bs-text-opacity));
+}
+// /Transition workaround

assets/stylesheets/_search.scss

@@ -1,22 +1,8 @@
-.search-wrapper {
-  height: $navbar-height;
-  padding: ($navbar-height - 29)/2 0;
-  position: relative;
-
-  .form-control-feedback  {
-    line-height: 30px;
-    opacity: 0.4;
-  }
-}
-
-@media (min-width: $screen-md-min) {
-  .search-wrapper {
-    width: 300px;
-  }
-}
-
 .input-search {
   width: 100%;
+  min-width: 18.75rem;
+  margin-right: -2.25rem;
+  padding-right: 2.5rem;
   font-size: 18px;
   background: transparent;
   border: 0;
@@ -87,9 +73,3 @@
 .popover{
   max-width: 100%; /* Max Width of the popover (depending on the container!) */
 }
-
-@media (max-width: $screen-xs-max) {
-  .search-wrapper {
-    padding-left: 15px;
-  }
-}

assets/stylesheets/_sidebar.scss

@@ -123,10 +123,6 @@
     padding-left: 10px;
   }
 
-  #wrapper {
-    padding-left: 250px;
-  }
-
   #wrapper.toggled {
     padding-left: 0;
   }
@@ -141,7 +137,7 @@
   }
 
   #page-content-wrapper {
-    padding: 20px;
+    padding: 20px 20px 20px 250px;
     position: relative;
   }
 

assets/stylesheets/_team.scss

@@ -1,16 +1,3 @@
-/*
- * To use, add:
- .col-xs-6.col-md-4
-   .thumbnail
-     .polygon-each-img-wrap
-       = image_tag 'team/square_image.jpg', class: 'polygon-clip-hexagon'
-     .caption.text-center
-       %h4
-         %b Name
-       %h5= link_to '@username', 'https://github.com/username'
- * to contributors.html.haml
-**/
-
 .clip-svg {
   width: 0;
   height: 0;

assets/stylesheets/application.css.scss

@@ -8,42 +8,48 @@ $navbar-height: 50px;
   src: url('fonts/SancoaleSlabNormRegular.otf') format("opentype");
 }
 
+@import "~bootstrap/scss/functions";
+
+pre {
+  color: #fff;
+  // https://github.com/twbs/bootstrap/pull/28966
+  background-color: #373737;
+  border-color: #373737;
+}
+$pre-color: #fff;
+
 @import "code.css";
 @import "bootstrap-overrides";
 
-$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
+$icon-font-path: '~bootstrap/assets/fonts/bootstrap/';
 
 // Core variables and mixins
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
 // Reset and dependencies
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
+@import "~bootstrap/scss/reboot";
 // Core CSS
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
 // Components
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/images";
 // Utility classes
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
+@import "~bootstrap/scss/utilities";
 
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
 
 @import "navbar";
 @import "docs";
@@ -55,10 +61,8 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
 @import "anchorjs";
 @import "search";
 
-.row {
-  margin-left: auto;
-  margin-right: auto;
-}
+// Utilities from Bootstrap 5.x
+@import "opacity";
 
 .row:after {
   clear: none;
@@ -87,7 +91,7 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
   margin-bottom: 35px;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
   .btn-responsive {
     font-size: 100%;
     text-align: center;
@@ -118,10 +122,6 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
   width: 70%;
 }
 
-.main-wrapper {
-  padding-bottom: 50px;
-}
-
 .header {
   position: relative;
   height: $header-height;
@@ -142,14 +142,14 @@ p {
 .contents {
   font-size: 17px;
 
-  @media(min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     font-size: 18px;
   }
 
   .btn {
     font-size: 17px;
 
-    @media(min-width: $screen-lg-min) {
+    @include media-breakpoint-up(lg) {
       font-size: 18px;
     }
   }