Improvements of Bootstrap and style using

CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.136.0] - Not released
+### Fixed
+- Multiple fixes in style handling process:
+  - Bootstrap 3 is now a regular dependency in package.json;
+  - Modern compiler API of Sass is used, see
+    [details](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#bundlers);
+  - All mixed declarations in .scss files were removed, see
+    [details](https://sass-lang.com/documentation/breaking-changes/mixed-decls/).
 
 ## [1.135.1] - 2024-10-08
 ### Fixed

package.json

@@ -9,6 +9,7 @@
     "@fortawesome/free-solid-svg-icons": "~5.15.4",
     "@sentry/react": "~7.113.0",
     "autotrack": "~2.4.1",
+    "bootstrap": "~3.4.1",
     "classnames": "~2.5.1",
     "custom-event": "~1.0.1",
     "date-fns": "~4.1.0",

src/components/expandable.module.scss

@@ -1,4 +1,4 @@
-@import '../styles/helvetica/dark-vars.scss';
+@import '../../styles/helvetica/dark-vars.scss';
 
 .clippedContent {
   overflow-y: hidden; /* fallback for old Safari */

src/components/layout-header.module.scss

@@ -50,13 +50,13 @@ $without-sidebar: '(max-width: 991px)';
 }
 
 .searchForm {
-  @include with-gap;
-
   display: flex;
   flex: 0 1 100%;
   position: relative;
   height: 32px;
 
+  @include with-gap;
+
   .fullMode & {
     max-width: 380px;
   }
@@ -155,14 +155,14 @@ $without-sidebar: '(max-width: 991px)';
 }
 
 .activeElements {
-  @include with-gap;
-
   display: flex;
   flex: 2;
   justify-content: flex-end;
   height: 40px;
   align-items: center;
 
+  @include with-gap;
+
   .collapsibleMode & {
     flex: 0;
   }
@@ -209,13 +209,12 @@ $without-sidebar: '(max-width: 991px)';
   height: 32px;
   opacity: 0.4;
   transition: opacity 0.3s;
+  visibility: hidden;
 
   &:hover {
     opacity: 0.8;
   }
 
-  visibility: hidden;
-
   .searchInputContainer:focus-within & {
     visibility: visible;
   }