blue-web 1.3.1 → 1.4.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.3.1 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.4.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 

package/dist/styles/_action-menu.scss

@@ -19,6 +19,10 @@
 
     .navbar-nav > li > a {
         animation: fadeInDown 0.5s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
     }
 
     &.none {

package/dist/styles/_caret.scss

@@ -34,6 +34,10 @@
         transform: rotate(-45deg) translate(-50%, -50%);
         margin-top: calc((var(--caret-size) + var(--caret-strength)) * -1);
         transition: all 0.2s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
     }
 
     &.blue-caret-mirrored {

package/dist/styles/_general.scss

@@ -70,8 +70,12 @@ body {
 .pagination > li > a,
 .list-group a.list-group-item {
     &:not(.disabled):not(.readonly):not(.dropdown-toggle) {
-        -webkit-transition: background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s;
         transition: background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
+
         position: relative;
 
         &:hover,
@@ -108,6 +112,10 @@ body {
 
     .sign-in-container {
         animation: enabledBlueAppPage 0.5s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
     }
 
     @media screen and (min-width: 768px) {
@@ -127,6 +135,11 @@ body {
     padding-left: calc(#{$normal-size} + #{$spacer});
     transform: translateX(-100%);
     transition: transform 0.4s;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
+
     background: var(--blue-sidebar-bg);
     color: $sidebar-color;
 }

package/dist/styles/_layout.scss

@@ -44,6 +44,10 @@
 
         .blue-sidebar-hidden-on-open {
             animation: fade-in 1s;
+
+            @media (prefers-reduced-motion) {
+                animation-duration: 0s;
+            }
         }
     }
 
@@ -129,6 +133,11 @@
 .blue-page {
     margin-left: $normal-size;
     animation: enabledBlueAppPage 0.5s;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+
     border-top-left-radius: var(--bs-border-radius, 0.5rem);
     border-top-right-radius: var(--bs-border-radius, 0.5rem);
     --bs-bg-opacity: 1;
@@ -161,6 +170,10 @@
 
     .blue-sidebar-toggler {
         transition: transform 0.5s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
     }
 
     .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
@@ -227,6 +240,10 @@
     background-color: var(--blue-sidebar-bg);
     transition: box-shadow 0.2s;
 
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
+
     &.has-shadow {
         box-shadow: 0 -2rem 2rem rgba(black, 0.1);
     }
@@ -263,6 +280,11 @@
 
 .blue-menu-item {
     transition: width 0.5s, background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s !important;
+
+    @media (prefers-reduced-motion) {
+        transition: none !important;
+    }
+
     padding: 0.5rem 0.75rem;
     border: none;
 
@@ -303,6 +325,11 @@
 .blue-menu-item-dropdown {
     margin-left: 1rem;
     animation: blue-menu-item-dropdown 0.15s;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
+
     position: relative;
 
     &::before {

package/dist/styles/_search.scss

@@ -55,6 +55,10 @@
 
 .blue-search.blue-search-sidebar {
     transition: opacity 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
 }
 
 .blue-search.blue-search-sidebar:not(:hover):not(.focus) {

package/dist/styles/_sidebar.scss

@@ -22,6 +22,10 @@
 
         .blue-sidebar-hidden-on-open {
             animation: fade-in 1s;
+
+            @media (prefers-reduced-motion) {
+                animation-duration: 0s;
+            }
         }
     }
 }
@@ -35,6 +39,10 @@
 
 .blue-menu-item-dropdown-from-start {
     animation: blue-menu-item-dropdown-from-start 0.15s;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
 }
 
 .blue-sidebar {

package/dist/styles/_status.scss

@@ -30,9 +30,18 @@
         background-repeat: no-repeat;
         background-position: 50%;
         animation: alert-in 1s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
+
         transform: scale(10, 10);
         opacity: 0;
         transition: transform 0.5s, opacity 1s;
+
+        @media (prefers-reduced-motion) {
+            transition: none;
+        }
     }
 
     transform: translate3d(0, 0, 0);
@@ -109,7 +118,6 @@
     top: 0;
     left: 0;
 
-    -webkit-animation: circlebounce 2s infinite ease-in-out;
     animation: circlebounce 2s infinite ease-in-out;
 }
 
@@ -117,31 +125,3 @@
     -webkit-animation-delay: -1s;
     animation-delay: -1s;
 }
-
-$bla-status-bar-width: 37.5rem;
-$bla-status-bar-loading-height: 2px;
-
-.blue-status-bar {
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
-    position: fixed;
-    z-index: 6;
-    // width: 100%;
-    box-sizing: border-box;
-    right: 0;
-    bottom: 0;
-    padding: 0.4rem;
-    padding-top: calc(0.4rem + #{$bla-status-bar-loading-height});
-    overflow: hidden;
-
-    &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: $bla-status-bar-loading-height;
-        background-color: #5cb85c;
-        animation: scrolling 1s linear infinite;
-    }
-}

package/dist/styles/_tooltips.scss

@@ -159,15 +159,27 @@
         &::before,
         &::after {
             animation: tips-vert 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+            @media (prefers-reduced-motion) {
+                animation-duration: 0s;
+            }
         }
     }
 
     [data-tooltip][class$="blue-tooltip-end"]:hover::after {
         animation: tips-diag-right 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
     }
 
     [data-tooltip][class$="blue-tooltip-start"]:hover::after {
         animation: tips-diag-left 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
     }
 
     [data-tooltip].blue-tooltip-start:hover,
@@ -175,6 +187,10 @@
         &::before,
         &::after {
             animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+            @media (prefers-reduced-motion) {
+                animation-duration: 0s;
+            }
         }
     }
 

package/dist/styles/mixins/_action-menu.scss

@@ -19,6 +19,11 @@
             top: 0.25rem;
             box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.3);
             animation: fadeInDown 0.5s;
+
+            @media (prefers-reduced-motion) {
+                animation-duration: 0s;
+            }
+
             border-radius: $border-radius;
 
             @include show-action-menu-again();

package/dist/styles/mixins/_menu-item.scss

@@ -10,6 +10,10 @@
     background-color: var(--blue-menu-item-indicator-bg);
     border-radius: 1rem;
     animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
 }
 
 @mixin blue-menu-item-indicator-horizontal() {
@@ -20,6 +24,10 @@
     width: auto;
     height: 0.25rem;
     animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+        animation-duration: 0s;
+    }
 }
 
 @mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
@@ -32,6 +40,10 @@
                 &::before,
                 & {
                     animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
+
+                    @media (prefers-reduced-motion) {
+                        animation-duration: 0s;
+                    }
                 }
 
                 &::before {

package/dist/styles/mixins/_misc.scss

@@ -38,6 +38,14 @@
 @mixin slide-transition() {
     $slide-transition: width 0.5s;
     transition: $slide-transition;
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+    }
 }
 
 @mixin header-bg() {

package/dist/styles/mixins/_sidebar.scss

@@ -11,6 +11,10 @@
     .blue-sidebar-d-flex-on-open,
     .blue-sidebar-d-block-on-open {
         animation: fade-in 1s;
+
+        @media (prefers-reduced-motion) {
+            animation-duration: 0s;
+        }
     }
 
     .blue-sidebar-visible-on-open,
@@ -111,6 +115,10 @@
             transform: scale(0.9);
             opacity: 0;
             transition: all 0.2s;
+
+            @media (prefers-reduced-motion) {
+                transition: none;
+            }
         }
 
         &[draggable] {

package/dist/styles/mixins/_switch.scss

@@ -1,10 +1,4 @@
-@mixin switch(
-    $width: 35px,
-    $height: 20px,
-    $padding: 3px,
-    $color: $body-color,
-    $color-active: $success
-) {
+@mixin switch($width: 35px, $height: 20px, $padding: 3px, $color: $body-color, $color-active: $success) {
     $slider-size: $height - ($padding * 2);
 
     & {
@@ -35,6 +29,11 @@
             bottom: 0;
             background-color: $input-group-addon-bg;
             transition: 0.4s;
+
+            @media (prefers-reduced-motion) {
+                transition: none;
+            }
+
             box-shadow: inset 0 0 0 1px rgba($color, 0.5);
 
             &::before {
@@ -46,6 +45,10 @@
                 bottom: $padding;
                 background-color: $color;
                 transition: 0.4s;
+
+                @media (prefers-reduced-motion) {
+                    transition: none;
+                }
             }
 
             &::after {
@@ -56,6 +59,11 @@
                 transform: translate(-50%, -50%);
                 margin-left: ($slider-size * 0.5);
                 transition: margin-left 0.4s;
+
+                @media (prefers-reduced-motion) {
+                    transition: none;
+                }
+
                 color: $color;
             }
         }
@@ -66,9 +74,7 @@
                 box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
 
                 &::before {
-                    transform: translateX(
-                        $width - $slider-size - ($padding * 2)
-                    );
+                    transform: translateX($width - $slider-size - ($padding * 2));
                     background-color: white;
                 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "homepage": "https://bruegmann.github.io/blue-web/v1",
@@ -17,8 +17,10 @@
         "build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/js --noEmit false --project tsconfig.build.json",
         "build": "babel ./src/js --out-dir ./dist/js --extensions \".tsx,.js,.ts\"",
         "build-bundles": "webpack",
-        "build-css": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
-        "build-neu-css": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
+        "build-css-legacy": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
+        "build-css": "node ./setVersionToStyleScss.js && sass --load-path=. ./dist/style.scss:./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
+        "build-neu-css-legacy": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
+        "build-neu-css": "sass --load-path=. ./dist/neu.scss:./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
         "build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
@@ -65,6 +67,7 @@
         "react-scripts": "^5.0.1",
         "react-syntax-highlighter": "^15.4.3",
         "reactstrap": "^9.0.0-0",
+        "sass": "~1.77.6",
         "typescript": "^4.3.5",
         "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4"