chore: Update bootstrap to 5.2.0

.yarnrc.yml

@@ -5,39 +5,39 @@ enableTelemetry: false
 nodeLinker: pnp
 
 packageExtensions:
-  "@parcel/optimizer-image@*":
+  "@parcel/cache@*":
     dependencies:
-      "@parcel/core": "2.6.2"
+      "@parcel/core": 2.6.2
   "@parcel/fs@*":
     dependencies:
-      "@parcel/core": "2.6.2"
-  "@parcel/workers@*":
-    dependencies:
-      "@parcel/core": "2.6.2"
-  "@parcel/cache@*":
+      "@parcel/core": 2.6.2
+  "@parcel/optimizer-image@*":
     dependencies:
-      "@parcel/core": "2.6.2"
+      "@parcel/core": 2.6.2
   "@parcel/package-manager@*":
     dependencies:
-      "@parcel/core": "2.6.2"
-  "select2-bootstrap-5-theme@*":
+      "@parcel/core": 2.6.2
+  "@parcel/workers@*":
     dependencies:
-      "@popperjs/core": "*"
-  "eslint-config-standard@*":
+      "@parcel/core": 2.6.2
+  eslint-config-standard@*:
     dependencies:
-      "eslint-plugin-n": "*"
+      eslint-plugin-n: "*"
+  select2-bootstrap-5-theme@*:
+    dependencies:
+      "@popperjs/core": "*"
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
 supportedArchitectures:
   cpu:
-    - "x64"
-    - "arm64"
+    - x64
+    - arm64
   os:
-    - "darwin"
-    - "linux"
-    - "win32"
+    - darwin
+    - linux
+    - win32
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.2.cjs

ietf/static/css/ietf.scss

@@ -1,5 +1,7 @@
 @use "sass:map";
 
+@import "bootstrap/scss/functions";
+
 // Enable negative margin classes.
 $enable-negative-margins: true;
 
@@ -9,13 +11,8 @@ $enable-negative-margins: true;
 $popover-max-width: 100%;
 
 // Only import what we need:
-// https://getbootstrap.com/docs/5.1/customize/optimize/
 
-// Configuration
-@import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
 
 $h1-font-size: $font-size-base * 2.2;
 $h2-font-size: $font-size-base * 1.8;
@@ -24,8 +21,12 @@ $h4-font-size: $font-size-base * 1.4;
 $h5-font-size: $font-size-base * 1.2;
 $h6-font-size: $font-size-base;
 
-// Layout & components
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/root";
+
+// Layout & components
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -102,6 +103,37 @@ pre {
     li>ul {
         font-size: inherit; // Make the font size choice cascade down into group menu dropdowns.
     }
+
+    .dropdown-item {
+        // TODO: In bs-5.2.0, components began to be styled with CSS variables.
+        // This broke the (ab)use of dropdown-item to style parts of the leftmenu.
+        // This is a quick fix, but we should think about redoing the leftmenu properly.
+        --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+        --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
+        --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
+        --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
+        @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+        --#{$prefix}dropdown-color: #{$dropdown-color};
+        --#{$prefix}dropdown-bg: #{$dropdown-bg};
+        --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+        --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
+        --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
+        --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+        --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+        --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+        --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+        --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+        --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+        --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+        --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+        --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+        --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+        --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+        --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+        --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
+        --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+        --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
+    }
 }
 
 // Use fixed lengths for the first three columns of "meta" tables.
@@ -1056,7 +1088,7 @@ tr.position-recuse-row {
 
     a {
         color: #FFF;
-        text-shadow: 1px 1px 1px rgba(0,0,0,.4);
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
         text-decoration: none;
 
         &:hover {

package.json

@@ -20,10 +20,10 @@
     "@fullcalendar/timegrid": "5.11.0",
     "@fullcalendar/vue3": "5.11.1",
     "@popperjs/core": "2.11.5",
-    "bootstrap": "5.1.3",
-    "bootstrap-icons": "1.8.3",
+    "bootstrap": "5.2.0",
+    "bootstrap-icons": "1.9.1",
     "browser-fs-access": "0.31.0",
-    "caniuse-lite": "1.0.30001365",
+    "caniuse-lite": "1.0.30001368",
     "d3": "7.6.1",
     "file-saver": "2.0.5",
     "highcharts": "10.2.0",
@@ -52,10 +52,10 @@
     "@vitejs/plugin-vue": "2.3.3",
     "@vue/test-utils": "2.0.2",
     "browserlist": "latest",
-    "c8": "7.11.3",
-    "cypress": "10.3.0",
+    "c8": "7.12.0",
+    "cypress": "10.3.1",
     "cypress-real-events": "1.7.1",
-    "eslint": "8.19.0",
+    "eslint": "8.20.0",
     "eslint-config-standard": "17.0.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "2.26.0",
@@ -68,7 +68,7 @@
     "pug": "3.0.2",
     "sass": "1.53.0",
     "vite": "2.9.14",
-    "vitest": "0.18.0"
+    "vitest": "0.18.1"
   },
   "targets": {
     "ietf": {
@@ -194,5 +194,5 @@
       ]
     }
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.2"
 }