N°4628 - Upgrade bulma lib to v0.9.4 to avoid hack from N°4481

2026-04-24 02:58:43 +02:00 · 2022-05-11 11:40:25 +02:00
parent 891dd31290
commit bb2c9dedeb
70 changed files with 742 additions and 385 deletions
--- a/node_modules/bulma-scss/utilities/_all.scss
+++ b/node_modules/bulma-scss/utilities/_all.scss
@@ -1,6 +1,7 @@
+/* Bulma Utilities */
@import "initial-variables";
@import "functions";
-@import "derived-variables.scss";
-@import "animations";
+@import "derived-variables";
@import "mixins";
@import "controls";
+@import "extends";
--- a/node_modules/bulma-scss/utilities/_animations.scss
+++ b/node_modules/bulma-scss/utilities/_animations.scss
@@ -1,9 +1 @@
-@keyframes spinAround {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(359deg);
-  }
-}
+@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead.";
--- a/node_modules/bulma-scss/utilities/_controls.scss
+++ b/node_modules/bulma-scss/utilities/_controls.scss
@@ -1,3 +1,5 @@
+@import "derived-variables";
+
 $control-radius: $radius !default;
 $control-radius-small: $radius-small !default;

@@ -42,10 +44,6 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
  }
 }

-%control {
-  @include control;
-}
-
 // The controls sizes use mixins so they can be used at different breakpoints
@mixin control-small {
  border-radius: $control-radius-small;
--- a/node_modules/bulma-scss/utilities/_derived-variables.scss
+++ b/node_modules/bulma-scss/utilities/_derived-variables.scss
@@ -1,132 +1,114 @@
+@import "initial-variables";
+@import "functions";
+
 $primary: $turquoise !default;

-$info   : $cyan !default;
+$info: $cyan !default;
 $success: $green !default;
 $warning: $yellow !default;
-$danger : $red !default;
+$danger: $red !default;

-$light  : $white-ter !default;
-$dark   : $grey-darker !default;
+$light: $white-ter !default;
+$dark: $grey-darker !default;

 // Invert colors

-$orange-invert   : findColorInvert($orange) !default;
-$yellow-invert   : findColorInvert($yellow) !default;
-$green-invert    : findColorInvert($green) !default;
+$orange-invert: findColorInvert($orange) !default;
+$yellow-invert: findColorInvert($yellow) !default;
+$green-invert: findColorInvert($green) !default;
 $turquoise-invert: findColorInvert($turquoise) !default;
-$cyan-invert     : findColorInvert($cyan) !default;
-$blue-invert     : findColorInvert($blue) !default;
-$purple-invert   : findColorInvert($purple) !default;
-$red-invert      : findColorInvert($red) !default;
+$cyan-invert: findColorInvert($cyan) !default;
+$blue-invert: findColorInvert($blue) !default;
+$purple-invert: findColorInvert($purple) !default;
+$red-invert: findColorInvert($red) !default;

-$primary-invert  : findColorInvert($primary) !default;
-$primary-light   : findLightColor($primary) !default;
-$primary-dark    : findDarkColor($primary) !default;
-$info-invert     : findColorInvert($info) !default;
-$info-light      : findLightColor($info) !default;
-$info-dark       : findDarkColor($info) !default;
-$success-invert  : findColorInvert($success) !default;
-$success-light   : findLightColor($success) !default;
-$success-dark    : findDarkColor($success) !default;
-$warning-invert  : findColorInvert($warning) !default;
-$warning-light   : findLightColor($warning) !default;
-$warning-dark    : findDarkColor($warning) !default;
-$danger-invert   : findColorInvert($danger) !default;
-$danger-light    : findLightColor($danger) !default;
-$danger-dark     : findDarkColor($danger) !default;
-$light-invert    : findColorInvert($light) !default;
-$dark-invert     : findColorInvert($dark) !default;
+$primary-invert: findColorInvert($primary) !default;
+$primary-light: findLightColor($primary) !default;
+$primary-dark: findDarkColor($primary) !default;
+$info-invert: findColorInvert($info) !default;
+$info-light: findLightColor($info) !default;
+$info-dark: findDarkColor($info) !default;
+$success-invert: findColorInvert($success) !default;
+$success-light: findLightColor($success) !default;
+$success-dark: findDarkColor($success) !default;
+$warning-invert: findColorInvert($warning) !default;
+$warning-light: findLightColor($warning) !default;
+$warning-dark: findDarkColor($warning) !default;
+$danger-invert: findColorInvert($danger) !default;
+$danger-light: findLightColor($danger) !default;
+$danger-dark: findDarkColor($danger) !default;
+$light-invert: findColorInvert($light) !default;
+$dark-invert: findColorInvert($dark) !default;

 // General colors

-$scheme-main       : $white !default;
-$scheme-main-bis   : $white-bis !default;
-$scheme-main-ter   : $white-ter !default;
-$scheme-invert     : $black !default;
-$scheme-invert-bis : $black-bis !default;
-$scheme-invert-ter : $black-ter !default;
+$scheme-main: $white !default;
+$scheme-main-bis: $white-bis !default;
+$scheme-main-ter: $white-ter !default;
+$scheme-invert: $black !default;
+$scheme-invert-bis: $black-bis !default;
+$scheme-invert-ter: $black-ter !default;

-$background        : $white-ter !default;
+$background: $white-ter !default;

-$border            : $grey-lighter !default;
-$border-hover      : $grey-light !default;
-$border-light      : $grey-lightest !default;
+$border: $grey-lighter !default;
+$border-hover: $grey-light !default;
+$border-light: $grey-lightest !default;
 $border-light-hover: $grey-light !default;

 // Text colors

-$text       : $grey-dark !default;
+$text: $grey-dark !default;
 $text-invert: findColorInvert($text) !default;
-$text-light : $grey !default;
+$text-light: $grey !default;
 $text-strong: $grey-darker !default;

 // Code colors

-$code           : $red !default;
+$code: darken($red, 15%) !default;
 $code-background: $background !default;

-$pre            : $text !default;
-$pre-background : $background !default;
+$pre: $text !default;
+$pre-background: $background !default;

 // Link colors

-$link              : $blue !default;
-$link-invert       : findColorInvert($link) !default;
-$link-light        : findLightColor($link) !default;
-$link-dark         : findDarkColor($link) !default;
-$link-visited      : $purple !default;
+$link: $blue !default;
+$link-invert: findColorInvert($link) !default;
+$link-light: findLightColor($link) !default;
+$link-dark: findDarkColor($link) !default;
+$link-visited: $purple !default;

-$link-hover        : $grey-darker !default;
-$link-hover-border : $grey-light !default;
+$link-hover: $grey-darker !default;
+$link-hover-border: $grey-light !default;

-$link-focus        : $grey-darker !default;
-$link-focus-border : $blue !default;
+$link-focus: $grey-darker !default;
+$link-focus-border: $blue !default;

-$link-active       : $grey-darker !default;
+$link-active: $grey-darker !default;
 $link-active-border: $grey-dark !default;

 // Typography

-$family-primary  : $family-sans-serif !default;
+$family-primary: $family-sans-serif !default;
 $family-secondary: $family-sans-serif !default;
-$family-code     : $family-monospace !default;
+$family-code: $family-monospace !default;

-$size-small : $size-7 !default;
+$size-small: $size-7 !default;
 $size-normal: $size-6 !default;
 $size-medium: $size-5 !default;
-$size-large : $size-4 !default;
+$size-large: $size-4 !default;
+
+// Effects
+
+$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;

 // Lists and maps
 $custom-colors: null !default;
 $custom-shades: null !default;

-$colors: mergeColorMaps(
-(
-  "white"  : ($white, $black),
-  "black"  : ($black, $white),
-  "light"  : ($light, $light-invert),
-  "dark"   : ($dark, $dark-invert),
-  "primary": ($primary, $primary-invert, $primary-light, $primary-dark),
-  "link"   : ($link, $link-invert, $link-light, $link-dark),
-  "info"   : ($info, $info-invert, $info-light, $info-dark),
-  "success": ($success, $success-invert, $success-light, $success-dark),
-  "warning": ($warning, $warning-invert, $warning-light, $warning-dark),
-  "danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
-  $custom-colors
-) !default;
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default;

-$shades: mergeColorMaps(
-(
-  "black-bis"   : $black-bis,
-  "black-ter"   : $black-ter,
-  "grey-darker" : $grey-darker,
-  "grey-dark"   : $grey-dark,
-  "grey"        : $grey,
-  "grey-light"  : $grey-light,
-  "grey-lighter": $grey-lighter,
-  "white-ter"   : $white-ter,
-  "white-bis"   : $white-bis),
-  $custom-shades
-) !default;
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;

 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
--- a/node_modules/bulma-scss/utilities/_extends.scss
+++ b/node_modules/bulma-scss/utilities/_extends.scss
@@ -0,0 +1,33 @@
+@import "mixins";
+
+%control {
+  @include control;
+}
+
+%unselectable {
+  @include unselectable;
+}
+
+%arrow {
+  @include arrow;
+}
+
+%block {
+  @include block;
+}
+
+%delete {
+  @include delete;
+}
+
+%loader {
+  @include loader;
+}
+
+%overlay {
+  @include overlay;
+}
+
+%reset {
+  @include reset;
+}
--- a/node_modules/bulma-scss/utilities/_functions.scss
+++ b/node_modules/bulma-scss/utilities/_functions.scss
@@ -74,7 +74,7 @@
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
-      $value: $value / $number;
+      $value: divide($value, $number);
    }
  }

@@ -90,13 +90,13 @@

  @each $name, $value in $color-rgb {
    $adjusted: 0;
-    $value: $value / 255;
+    $value: divide($value, 255);

    @if $value < 0.03928 {
-      $value: $value / 12.92;
+      $value: divide($value, 12.92);
    }
    @else {
-      $value: ($value + 0.055) / 1.055;
+      $value: divide($value + 0.055, 1.055);
      $value: powerNumber($value, 2);
    }

@@ -115,7 +115,7 @@
  }
 }

-@function findLightColor($color) {
+@function findLightColor($color, $l: 96%) {
  @if type-of($color) == "color" {
    $l: 96%;

@@ -129,9 +129,8 @@
  @return $background;
 }

-@function findDarkColor($color) {
+@function findDarkColor($color, $base-l: 29%) {
  @if type-of($color) == "color" {
-    $base-l: 29%;
    $luminance: colorLuminance($color);
    $luminance-delta: 0.53 - $luminance;
    $target-l: round($base-l + $luminance-delta * 53);
@@ -165,3 +164,36 @@

  @return lighten($color, $amount);
 }
+
+// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
+// Replaces old slash division deprecated in Dart Sass
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  $quotient: 0;
+  $remainder: $dividend;
+
+  @if $dividend == 0 {
+    @return 0;
+  }
+
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+
+  @if $divisor == 1 {
+    @return $dividend;
+  }
+
+  @while $remainder >= $divisor {
+    $quotient: $quotient + 1;
+    $remainder: $remainder - $divisor;
+  }
+
+  @if $remainder > 0 and $precision > 0 {
+    $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
+  }
+
+  @return ($quotient + $remainder) * $sign;
+}
--- a/node_modules/bulma-scss/utilities/_initial-variables.scss
+++ b/node_modules/bulma-scss/utilities/_initial-variables.scss
@@ -16,11 +16,11 @@ $white-bis: hsl(0, 0%, 98%) !default;
 $white: hsl(0, 0%, 100%) !default;

 $orange: hsl(14, 100%, 53%) !default;
-$yellow: hsl(48, 100%, 67%) !default;
-$green: hsl(141, 53%, 53%) !default;
+$yellow: hsl(44, 100%, 77%) !default;
+$green: hsl(153, 53%, 53%) !default;
 $turquoise: hsl(171, 100%, 41%) !default;
-$cyan: hsl(204, 71%, 53%) !default;
-$blue: hsl(217, 71%, 53%) !default;
+$cyan: hsl(207, 61%, 53%) !default;
+$blue: hsl(229, 53%, 53%) !default;
 $purple: hsl(271, 100%, 71%) !default;
 $red: hsl(348, 86%, 61%) !default;

@@ -66,6 +66,7 @@ $widescreen-enabled: true !default;
 // 1344px container + 4rem
 $fullhd: 1344px + 2 * $gap !default;
 $fullhd-enabled: true !default;
+$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;

 // Miscellaneous

@@ -73,7 +74,7 @@ $easing: ease-out !default;
 $radius-small: 2px !default;
 $radius: 4px !default;
 $radius-large: 6px !default;
-$radius-rounded: 290486px !default;
+$radius-rounded: 9999px !default;
 $speed: 86ms !default;

 // Flags
--- a/node_modules/bulma-scss/utilities/_mixins.scss
+++ b/node_modules/bulma-scss/utilities/_mixins.scss
@@ -1,4 +1,4 @@
-@import "initial-variables";
+@import "derived-variables";

@mixin clearfix {
  &::after {
@@ -12,12 +12,12 @@
  position: absolute;

  @if $height != 0 {
-    left: calc(50% - (#{$width} / 2));
-    top: calc(50% - (#{$height} / 2));
+    left: calc(50% - (#{$width} * 0.5));
+    top: calc(50% - (#{$height} * 0.5));
  }
  @else {
-    left: calc(50% - (#{$width} / 2));
-    top: calc(50% - (#{$width} / 2));
+    left: calc(50% - (#{$width} * 0.5));
+    top: calc(50% - (#{$width} * 0.5));
  }
 }

@@ -32,6 +32,11 @@
 }

@mixin hamburger($dimensions) {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
  cursor: pointer;
  display: block;
  height: $dimensions;
@@ -99,6 +104,19 @@
  }
 }

+@mixin reset {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
+  color: currentColor;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+}
+
 // Responsiveness

@mixin from($device) {
@@ -113,6 +131,12 @@
  }
 }

+@mixin between($from, $until) {
+  @media screen and (min-width: $from) and (max-width: $until - 1px) {
+    @content;
+  }
+}
+
@mixin mobile {
  @media screen and (max-width: $tablet - 1px) {
    @content;
@@ -191,6 +215,31 @@
  }
 }

+@mixin breakpoint($name) {
+  $breakpoint: map-get($breakpoints, $name);
+
+  @if $breakpoint {
+    $from: map-get($breakpoint, "from");
+    $until: map-get($breakpoint, "until");
+
+    @if $from and $until {
+      @include between($from, $until) {
+        @content;
+      }
+    }
+    @else if $from {
+      @include from($from) {
+        @content;
+      }
+    }
+    @else if $until {
+      @include until($until) {
+        @content;
+      }
+    }
+  }
+}
+
@mixin ltr {
  @if not $rtl {
    @content;
@@ -237,10 +286,6 @@
  user-select: none;
 }

-%unselectable {
-  @include unselectable;
-}
-
@mixin arrow($color: transparent) {
  border: 3px solid $color;
  border-radius: 2px;
@@ -258,22 +303,14 @@
  width: 0.625em;
 }

-%arrow {
-  @include arrow;
-}
-
@mixin block($spacing: $block-spacing) {
  &:not(:last-child) {
    margin-bottom: $spacing;
  }
 }

-%block {
-  @include block;
-}
-
@mixin delete {
-  @extend %unselectable;
+  @include unselectable;

  -moz-appearance: none;
  -webkit-appearance: none;
@@ -356,10 +393,6 @@
  }
 }

-%delete {
-  @include delete;
-}
-
@mixin loader {
  animation: spinAround 500ms infinite linear;
  border: 2px solid $grey-lighter;
@@ -373,10 +406,6 @@
  width: 1em;
 }

-%loader {
-  @include loader;
-}
-
@mixin overlay($offset: 0) {
  bottom: $offset;
  left: $offset;
@@ -384,7 +413,3 @@
  right: $offset;
  top: $offset;
 }
-
-%overlay {
-  @include overlay;
-}