2.0.0 (#18)

* Upgraded Bootstrap to version 5 * Fixed breaking changes between Bootstrap 4 and 5
datacite · Oct 9, 2024 · d23ac9a · d23ac9a
1 parent 5b37ed9
commit d23ac9a
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "repository": "https://github.com/datacite/maltipoo",
   "license": "MIT",
   "devDependencies": {
-    "bootstrap": "4",
+    "bootstrap": "^5.3.3",
     "bootstrap-sass": "^3.4.3",
     "cssnano": "^7.0.1",
     "postcss": "^8.4.38",

diff --git a/src/stylesheets/doi.scss b/src/stylesheets/doi.scss
@@ -1,23 +1,21 @@
 /*
-Datacite - Bootstrap 4 theme
+Datacite - Bootstrap 5 theme
 ---------------------------------------------*/
 
 @import "variables.scss";
 
 // Core variables and mixins
-@import "../../node_modules/bootstrap/scss/functions";
-@import "../../node_modules/bootstrap/scss/variables";
-@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/bootstrap";
 
 // Reset and dependencies
 // @import "../../node_modules/bootstrap/scss/normalize";
-@import "../../node_modules/bootstrap/scss/print";
+// @import "../../node_modules/bootstrap/scss/print";
 // @import "bootstrap/glyphicons";
 
 // Core CSS
 // @import "../../node_modules/bootstrap/scss/scaffolding";
 @import "../../node_modules/bootstrap/scss/type";
-@import "../../node_modules/bootstrap/scss/code";
+// @import "../../node_modules/bootstrap/scss/code";
 @import "../../node_modules/bootstrap/scss/grid";
 @import "../../node_modules/bootstrap/scss/tables";
 @import "../../node_modules/bootstrap/scss/forms";
@@ -27,19 +25,19 @@ Datacite - Bootstrap 4 theme
 // @import "../../node_modules/bootstrap/scss/component-animations";
 @import "../../node_modules/bootstrap/scss/dropdown";
 @import "../../node_modules/bootstrap/scss/button-group";
-@import "../../node_modules/bootstrap/scss/input-group";
+// @import "../../node_modules/bootstrap/scss/input-group";
 @import "../../node_modules/bootstrap/scss/nav";
 @import "../../node_modules/bootstrap/scss/navbar";
 @import "../../node_modules/bootstrap/scss/breadcrumb";
 @import "../../node_modules/bootstrap/scss/pagination";
 // @import "../../node_modules/bootstrap/scss/pager";
 // @import "../../node_modules/bootstrap/scss/labels";
 @import "../../node_modules/bootstrap/scss/badge";
-@import "../../node_modules/bootstrap/scss/jumbotron";
+// @import "../../node_modules/bootstrap/scss/jumbotron";
 // @import "../../node_modules/bootstrap/scss/thumbnails";
 @import "../../node_modules/bootstrap/scss/alert";
 @import "../../node_modules/bootstrap/scss/progress";
-@import "../../node_modules/bootstrap/scss/media";
+// @import "../../node_modules/bootstrap/scss/media";
 @import "../../node_modules/bootstrap/scss/list-group";
 // @import "../../node_modules/bootstrap/scss/panels";
 // @import "../../node_modules/bootstrap/scss/responsive-embed";

diff --git a/src/stylesheets/doi/components/_inputs.scss b/src/stylesheets/doi/components/_inputs.scss
@@ -424,7 +424,7 @@ textarea.form-control {
       height: 45px;
     }
 
-    .close {
+    .btn-close {
       z-index: 2;
       position: relative;
       color: $turquoise;

diff --git a/src/stylesheets/doi/components/_labels.scss b/src/stylesheets/doi/components/_labels.scss
@@ -25,21 +25,21 @@ category: Components
   display: inline-block;
   margin-bottom: 3px;
 }
-.badge-primary {
-  background-color: $primary-color;
-}
-.badge-info {
-  background-color: $info-color;
-}
-.badge-success {
-  background-color: $success-color;
-}
-.badge-warning {
-  background-color: $warning-color;
-}
-.badge-danger {
-  background-color: $danger-color;
-}
+// .badge-primary {
+//   background-color: $primary-color;
+// }
+// .badge-info {
+//   background-color: $info-color;
+// }
+// .badge-success {
+//   background-color: $success-color;
+// }
+// .badge-warning {
+//   background-color: $warning-color;
+// }
+// .badge-danger {
+//   background-color: $danger-color;
+// }
 .badge-allocating {
   color: $darker-gray;
   background-color: $light-blue;

diff --git a/src/stylesheets/doi/components/_modal.scss b/src/stylesheets/doi/components/_modal.scss
@@ -8,7 +8,7 @@
     h4 {
       margin: 0;
     }
-    .close {
+    .btn-close {
       padding-left: 10px;
       font-size: 30px;
     }

diff --git a/src/stylesheets/doi/components/_tooltips-and-popovers.scss b/src/stylesheets/doi/components/_tooltips-and-popovers.scss
@@ -35,39 +35,39 @@
         border-right: 11px solid rgba(0, 0, 0, 0);
         top: -11px;
     }
-    &.left{
+    &.start {
         margin-left: -11px;
         padding: 0;
     }
-    &.left .tooltip-inner:after {
+    &.start .tooltip-inner:after {
         border-left: 11px solid $white-color;
         border-top: 11px solid rgba(0, 0, 0, 0);
         border-bottom: 11px solid rgba(0, 0, 0, 0);
         right: -10px;
         left: auto;
         margin-left: 0;
     }
-    &.left .tooltip-inner:before {
+    &.start .tooltip-inner:before {
         border-left: 11px solid rgba(0, 0, 0, 0.2);
         border-top: 11px solid rgba(0, 0, 0, 0);
         border-bottom: 11px solid rgba(0, 0, 0, 0);
         right: -11px;
         left: auto;
         margin-left: 0;
     }
-    &.right{
+    &.end {
         margin-left: 11px;
         padding: 0;
     }
-    &.right .tooltip-inner:after {
+    &.end .tooltip-inner:after {
         border-right: 11px solid $white-color;
         border-top: 11px solid rgba(0, 0, 0, 0);
         border-bottom: 11px solid rgba(0, 0, 0, 0);
         left: -10px;
         top: 10px;
         margin-left: 0;
     }
-    &.right .tooltip-inner:before {
+    &.end .tooltip-inner:before {
         border-right: 11px solid rgba(0, 0, 0, 0.2);
         border-top: 11px solid rgba(0, 0, 0, 0);
         border-bottom: 11px solid rgba(0, 0, 0, 0);
@@ -137,13 +137,13 @@
       color: $bg-danger;
     }
 }
-.popover .arrow{
+.popover .popover-arrow{
     border: 0;
 }
-.popover.top .arrow{
+.popover.top .popover-arrow{
     margin-left: 0;
 }
-.popover.bottom .arrow:after{
+.popover.bottom .popover-arrow:after{
     border-bottom-color: $darker-gray;
 }
 .popover-filter{
@@ -164,13 +164,13 @@
      @include opacity(0.2);
      transition-delay: 0s;
 }
-.popover.left > .arrow::after{
+.popover.start > .popover-arrow::after{
     border-left-color: $darker-gray;
     bottom: -20px;
 }
-.popover.top > .arrow::after{
+.popover.top > .popover-arrow::after{
     border-top-color: $darker-gray;
 }
-.popover.right > .arrow::after{
+.popover.end > .popover-arrow::after{
     border-right-color: $darker-gray;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -100,10 +100,10 @@ bootstrap-sass@^3.4.3:
   resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.4.3.tgz#742cc8f4286303ae9fe8e4c95237321eae73766c"
   integrity sha512-vPgFnGMp1jWZZupOND65WS6mkR8rxhJxndT/AcMbqcq1hHMdkcH4sMPhznLzzoHOHkSCrd6J9F8pWBriPCKP2Q==
 
-bootstrap@4:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
-  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
 
 brace-expansion@^2.0.1:
   version "2.0.1"