feat(bulma): bulma 1.0 wip

messenjer · Mar 26, 2024 · 5c0a90f · 5c0a90f
1 parent 5d85466
commit 5c0a90f
Show file tree

Hide file tree

Showing 28 changed files with 122 additions and 98 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "bulma": "0.9.4"
+    "bulma": "1.0.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "6.5.0",

diff --git a/src/assets/scss/bulma-build.scss b/src/assets/scss/bulma-build.scss
@@ -1,3 +1,3 @@
-@forward "bulma/bulma";
+@forward "bulma/sass";
 @forward "components/utils/_all";
 @forward "bulma";
diff --git a/src/assets/scss/components/_autocomplete.scss b/src/assets/scss/components/_autocomplete.scss
@@ -1,4 +1,5 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
+@use "utils/variables-to-migrate" as migrate;
 
 $dropdown-content-max-height: 200px !default;
 
@@ -24,8 +25,8 @@ $dropdown-content-max-height: 200px !default;
         cursor: pointer;
         &.is-hovered,
         &:hover {
-            background: bulma.$dropdown-item-hover-background-color;
-            color: bulma.$dropdown-item-hover-color;
+            background: migrate.$dropdown-item-hover-background-color;
+            color: migrate.$dropdown-item-hover-color;
         }
         &.is-disabled {
             opacity: 0.5;

diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss
@@ -1,5 +1,6 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
 @use "utils/variables" as var;
+@use "bulma/sass/utilities/mixins";
 
 $carousel-arrow-background: bulma.$scheme-main !default;
 $carousel-arrow-color: bulma.$primary !default;
@@ -42,7 +43,7 @@ $carousel-overlay-z: 40 !default;
             display: flex;
 
             &:hover .carousel-arrow.is-hovered {
-                @include bulma.tablet {
+                @include mixins.tablet {
                     opacity: 1;
                 }
             }
@@ -70,7 +71,7 @@ $carousel-overlay-z: 40 !default;
         &.has-custom {
             flex-wrap: nowrap;
             justify-content: flex-start;
-            @include bulma.overflow-touch;
+            @include mixins.overflow-touch;
             overflow: hidden;
             overflow-x: auto;
             &.is-small .indicator-item {

diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
@@ -1,13 +1,14 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
 @use "utils/variables" as var;
 @use "utils/functions" as fn;
+@use "utils/variables-to-migrate" as to-migrate;
 
 $checkbox-active-background-color: bulma.$primary !default;
 $checkbox-background-color: transparent !default;
 $checkbox-border-color: bulma.$grey !default;
 $checkbox-border-radius: bulma.$radius !default;
 $checkbox-border-width: 2px !default;
-$checkbox-checkmark-color: bulma.$primary-invert !default;
+$checkbox-checkmark-color: to-migrate.$primary-invert !default;
 $checkbox-size: 1.25em !default;
 $checkbox-colors: bulma.$form-colors !default;
 
@@ -82,7 +83,7 @@ $checkbox-colors: bulma.$form-colors !default;
 
     @each $name, $pair in $checkbox-colors {
         $color: nth($pair, 1);
-        $color-invert: nth($pair, 2);
+        $color-invert: if(length($pair) >= 2, nth($pair, 2), null);
         &.is-#{$name} {
             .check {
                 &:hover:not(:disabled) {

diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
@@ -1,4 +1,5 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
+@use "utils/variables-to-migrate" as to-migrate;
 
 $datepicker-background-color: bulma.$dropdown-content-background-color !default;
 $datepicker-radius: bulma.$dropdown-content-radius !default;
@@ -9,7 +10,7 @@ $datepicker-item-color: bulma.$grey-dark !default;
 $datepicker-item-disabled-color: bulma.$grey-light !default;
 $datepicker-item-hover-color: bulma.$scheme-invert !default;
 $datepicker-item-hover-background-color: bulma.$background !default;
-$datepicker-item-selected-color: bulma.$primary-invert !default;
+$datepicker-item-selected-color: to-migrate.$primary-invert !default;
 $datepicker-item-selected-background-color: bulma.$primary !default;
 $datepicker-event-background-color: bulma.$grey-light !default;
 
@@ -25,8 +26,8 @@ $datepicker-event-background-color: bulma.$grey-light !default;
             &.is-focused,
             &:active,
             &.is-active {
-                box-shadow: bulma.$input-focus-box-shadow-size
-                    bulma.$input-focus-box-shadow-color;
+                box-shadow: to-migrate.$input-focus-box-shadow-size
+                    to-migrate.$input-focus-box-shadow-color;
             }
         }
     }

diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
@@ -1,4 +1,5 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
+@use "bulma/sass/utilities/mixins";
 
 $dropdown-mobile-breakpoint: bulma.$desktop !default;
 $dropdown-background-color: rgba(bulma.$scheme-invert, 0.86) !default;
@@ -10,7 +11,7 @@ $dropdown-gap: 0px !default;
         margin-left: 0.5em;
     }
     .background {
-        @include bulma.overlay;
+        @include mixins.overlay;
         position: fixed;
         background-color: $dropdown-background-color;
         z-index: 40;

diff --git a/src/assets/scss/components/_form.scss b/src/assets/scss/components/_form.scss
@@ -1,4 +1,5 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
+@use "bulma/sass/utilities/mixins";
 
 $floating-in-height: 3.25em !default;
 
@@ -180,7 +181,7 @@ $floating-in-height: 3.25em !default;
                 left: 0;
                 right: 0;
                 height: 0.375em;
-                background-color: bulma.$input-background-color;
+                background-color: bulma.$input-background-l;
                 z-index: -1;
             }
         }
@@ -386,7 +387,7 @@ $floating-in-height: 3.25em !default;
     // fix Bulma 0.8.2
     &.is-loading::after {
         top: calc(50% - (1em / 2));
-        @include bulma.ltr {
+        @include mixins.ltr {
             right: calc((2.5em / 2) - 0.5em);
         }
     }

diff --git a/src/assets/scss/components/_loading.scss b/src/assets/scss/components/_loading.scss
@@ -1,12 +1,13 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
+@use "bulma/sass/utilities/mixins";
 
 $loading-background-legacy: #7f7f7f !default;
 $loading-background: rgba(255, 255, 255, 0.5) !default;
 $loading-icon-size: 3em !default;
 $loading-full-page-icon-size: 5em !default;
 
 .loading {
-    @include bulma.overlay;
+    @include mixins.overlay;
     align-items: center;
     justify-content: center;
     display: flex;
@@ -21,7 +22,7 @@ $loading-full-page-icon-size: 5em !default;
         }
     }
     .loading-overlay {
-        @include bulma.overlay;
+        @include mixins.overlay;
         background: $loading-background-legacy;
         background: $loading-background;
     }

diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
@@ -1,4 +1,5 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
+@use "bulma/sass/utilities/mixins";
 
 .modal {
     > .animation-content.is-full-screen,
@@ -14,7 +15,7 @@
         .modal-card {
             margin: 0;
         }
-        @include bulma.mobile {
+        @include mixins.mobile {
             width: 100%;
         }
     }

diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss
@@ -1,4 +1,4 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
 
 .pagination {
     .pagination-next,

diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
@@ -1,4 +1,4 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
 @use "utils/variables" as var;
 
 $radio-active-background-color: bulma.$primary !default;

diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
@@ -1,4 +1,4 @@
-@use "bulma/bulma";
+@use "bulma/sass" as bulma;
 
 .select {
     select {