From d9e789e25ff0419d31ddce2c957b6d7fc2fdf650 Mon Sep 17 00:00:00 2001 From: mm <25961416+mlmoravek@users.noreply.github.com> Date: Mon, 9 Sep 2024 16:23:29 +0200 Subject: [PATCH] feat(bulma): update to bulma 1.0 (#115) * build: update bulma & dependencies * feat(bulma): use bulma 1.0 * feat: update readme * chore: update oruga examples * chore: update stylelint --- .stylelintrc.cjs | 1 + README.md | 123 +-- package-lock.json | 550 ++++++------ package.json | 22 +- src/assets/scss/bulma-build.scss | 2 +- src/assets/scss/bulma.scss | 40 +- src/assets/scss/components/_autocomplete.scss | 57 +- src/assets/scss/components/_button.scss | 31 +- src/assets/scss/components/_carousel.scss | 81 +- src/assets/scss/components/_checkbox.scss | 135 +-- src/assets/scss/components/_datepicker.scss | 390 ++++----- src/assets/scss/components/_dropdown.scss | 239 +++--- .../components/{_form.scss => _field.scss} | 218 ++--- src/assets/scss/components/_icon.scss | 20 +- src/assets/scss/components/_input.scss | 3 + src/assets/scss/components/_loading.scss | 50 +- src/assets/scss/components/_menu.scss | 1 + src/assets/scss/components/_modal.scss | 23 +- src/assets/scss/components/_notification.scss | 25 +- src/assets/scss/components/_pagination.scss | 6 +- src/assets/scss/components/_radio.scss | 155 ++-- src/assets/scss/components/_select.scss | 62 +- src/assets/scss/components/_sidebar.scss | 184 ++-- src/assets/scss/components/_skeleton.scss | 100 ++- src/assets/scss/components/_slider.scss | 200 ++--- src/assets/scss/components/_steps.scss | 791 +++++++----------- src/assets/scss/components/_switch.scss | 329 +++----- src/assets/scss/components/_table.scss | 270 +++--- src/assets/scss/components/_tabs.scss | 561 +++++++------ src/assets/scss/components/_taginput.scss | 101 +-- src/assets/scss/components/_timepicker.scss | 47 +- src/assets/scss/components/_tooltip.scss | 328 ++++---- src/assets/scss/components/_upload.scss | 54 +- src/assets/scss/components/utils/_all.scss | 1 + .../scss/components/utils/_animations.scss | 18 +- .../scss/components/utils/_functions.scss | 4 + .../scss/components/utils/_helpers.scss | 5 + src/assets/scss/components/utils/_root.scss | 10 + .../scss/components/utils/_variables.scss | 29 + src/plugins/bulma.ts | 201 ++--- 40 files changed, 2602 insertions(+), 2865 deletions(-) rename src/assets/scss/components/{_form.scss => _field.scss} (70%) create mode 100644 src/assets/scss/components/_input.scss create mode 100644 src/assets/scss/components/_menu.scss create mode 100644 src/assets/scss/components/utils/_root.scss diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index 4c9435b..5be0478 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -10,6 +10,7 @@ module.exports = { ], rules: { "scss/at-extend-no-missing-placeholder": null, + "scss/operator-no-newline-after": [true, { "severity": "warning" }], "no-duplicate-selectors": [true, { "severity": "warning" }], "no-descending-specificity": [true, { "severity": "warning" }], "rule-empty-line-before": ["always", { diff --git a/README.md b/README.md index 36e37f9..87a57a8 100644 --- a/README.md +++ b/README.md @@ -39,98 +39,36 @@ createApp(App) .use(Oruga, bulmaConfig) .mount('#app') ``` -Please note, the package also works for `@oruga-ui/oruga` (Vue 2) and you can use it without importing the full Oruga bundle. + +Please note, this package can be used without importing any other Oruga styling or theme. + ### Customization (SASS/SCSS) -Using the following sample code you don't need `import '@oruga-ui/theme-bulma/dist/bulma.css'` but you have to add a custom sass/scss file to customize Bulma and theme variables. +Bulma is a highly customizable CSS framework. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user (see [Bulma Customization](https://bulma.io/documentation/customize/concepts/)). -```scss -@import "~bulma/sass/utilities/_all"; +Using the following sample code you don't need `import '@oruga-ui/theme-bulma/dist/bulma.css'` but you have to add a custom sass/scss file to customize Bulma and the theme variables. To overwrite Bulma’s Sass variables with your own values, write `@use` and the `with` keyword, which takes a Sass map: -// Set your colors +```scss +// set your color overrides $primary: #8c67ef; -$primary-light: findLightColor($primary); -$primary-dark: findDarkColor($primary); -$primary-invert: findColorInvert($primary); -$twitter: #4099FF; -$twitter-invert: findColorInvert($twitter); - -// Lists and maps -$custom-colors: null !default; -$custom-shades: null !default; - -// Setup $colors to use as bulma classes (e.g. 'is-twitter') -$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 -); - -// Links $link: $primary; -$link-invert: $primary-invert; -$link-focus-border: $primary; -@import "~bulma/bulma"; -@import '~@oruga-ui/theme-bulma/dist/scss/bulma'; +// add new colors to the colors map +$twitter: #4099FF; +$custom-colors: ('twitter', $twitter); + +@use '@oruga-ui/theme-bulma/dist/scss/bulma' with ( + $family-primary: '"Nunito", sans-serif', + $primary: $primary, + $link: $link, + $custom-colors: $custom-colors, +); ``` ### Override default config -In case you want to replace the default style of a component you can override or add new classes changing ``bulmaConfig``; more details about components customization on https://oruga.io/documentation/#customization +In case you want to replace the default style of a component you can override or add new classes changing ``bulmaConfig``; more details about components customization on https://oruga-ui.com/documentation/customisation.html ```js import { createApp } from 'vue' @@ -154,31 +92,6 @@ createApp(App) ``` -## Buefy users - -### Components - -| Buefy | Oruga | Note -| ----------- | ---------- | ---------------- -| Taginput | Inputitems | -| Toast | N.A. | You can customize Notification with `noticeClass` and/or passing a component using programmatic way -| Snackbar | N.A. | You can customize Notification with `noticeClass` and/or passing a component using programmatic way - -At the moment you won't find Carousel, Dialog, Navbar, Menu but we'll add them soon in Oruga core code. - -### Props - -| Buefy | Oruga | Component | Note -| --------------- | ---------- | -------------- | -------------------- -| type | variant | - | Removed prefix `is-` -| size | size | - | Removed prefix `is-` -| loading | N.A. | - | Not supported -| label-position | N.A. | Field | Not suppported but you can easily add `is-floating-label` or `is-floating-in-label` class to ``root-class`` prop -| size | N.A. | Tooltip | You can use `multiline-class` or `content-class` -| custom | N.A. | Dropdown Item | You can use ``tag`` prop -| has-modal-card | N.A. | Modal | You have to add `content-class="modal-content"` when you don't use modal-card classes as content - - ## Contributors Thank you to everyone involved for improving this project, day by day 💚 diff --git a/package-lock.json b/package-lock.json index 77aae82..5524e01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,13 +9,13 @@ "version": "0.3.0", "license": "MIT", "dependencies": { - "bulma": "0.9.4" + "bulma": "1.0.2" }, "devDependencies": { - "@oruga-ui/examples": "^0.9.0-pre.1", - "@oruga-ui/oruga-next": "^0.9.0-pre.1", + "@oruga-ui/examples": "^0.9.0-pre.2", + "@oruga-ui/oruga-next": "^0.9.0-pre.2", "@rollup/plugin-typescript": "11.1.6", - "@vitejs/plugin-vue": "5.0.5", + "@vitejs/plugin-vue": "5.1.1", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/tsconfig": "^0.5.1", @@ -25,23 +25,23 @@ "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-vue": "^9.27.0", "npm-check-updates": "^16.14.20", - "postcss": "8.4.39", + "postcss": "8.4.40", "prettier": "^3.3.3", "rimraf": "6.0.1", - "rollup": "^4.18.1", + "rollup": "^4.19.1", "rollup-plugin-copy": "3.5.0", "rollup-plugin-sass": "1.13.1", "sass": "1.77.8", - "stylelint": "^16.7.0", + "stylelint": "^16.8.1", "stylelint-config-recommended": "^14.0.1", "stylelint-config-recommended-scss": "^14.1.0", "stylelint-prettier": "^5.0.2", "stylelint-scss": "^6.4.1", - "typescript": "5.5.3", - "vite": "^5.3.4", - "vue": "3.4.32", + "typescript": "5.5.4", + "vite": "^5.3.5", + "vue": "3.4.34", "vue-router": "4.4.0", - "vue-tsc": "2.0.26" + "vue-tsc": "2.0.29" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -91,9 +91,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.24.8", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz", - "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==", + "version": "7.25.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.0.tgz", + "integrity": "sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -803,12 +803,74 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, + "optional": true, + "peer": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz", + "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", "dev": true }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1003,9 +1065,9 @@ } }, "node_modules/@oruga-ui/examples": { - "version": "0.9.0-pre.1", - "resolved": "https://registry.npmjs.org/@oruga-ui/examples/-/examples-0.9.0-pre.1.tgz", - "integrity": "sha512-Kzopdaq5STiqAQKT6BntR+EXPe+R3sZTZMy3MQuvo2KLTeVmgTLYpVZt7Db+tBGHq+G44L9g5Sf88+jQTkZeCw==", + "version": "0.9.0-pre.2", + "resolved": "https://registry.npmjs.org/@oruga-ui/examples/-/examples-0.9.0-pre.2.tgz", + "integrity": "sha512-lu1ZAjEKWdT2MJVExYpFlEGXRsI8KsdzgZ1+ARBPOTuU9XCm4sY+6A3beIEX2F7fJOdfRgvr0CJgpB2+3wplTg==", "dev": true, "dependencies": { "@fortawesome/fontawesome-free": "6.5.2", @@ -1018,14 +1080,14 @@ "markdown-it-highlightjs": "^4.1.0" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.9.0-pre.1", + "@oruga-ui/oruga-next": "0.9.0-pre.2", "vue": "^3.0.0" } }, "node_modules/@oruga-ui/oruga-next": { - "version": "0.9.0-pre.1", - "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.9.0-pre.1.tgz", - "integrity": "sha512-M4hVD+YukjIX5UQ9w3qk6i1oZKSCdZoCfOk3lsGia9BB4QtD2wuqxEDA5w3/w5T31hTRvaZaENOyPP8p3V8FjA==", + "version": "0.9.0-pre.2", + "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.9.0-pre.2.tgz", + "integrity": "sha512-jy0hO5Df9vNfnfLF9Pu/O1Gxf/NlNkJ6xuw1W4Uq2RA1L0dk5NwgLWN9sU+hDJrrLSFFan08fdm83LcANWEXnA==", "dev": true, "peerDependencies": { "vue": "^3.0.0" @@ -1137,9 +1199,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz", - "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz", + "integrity": "sha512-XzqSg714++M+FXhHfXpS1tDnNZNpgxxuGZWlRG/jSj+VEPmZ0yg6jV4E0AL3uyBKxO8mO3xtOsP5mQ+XLfrlww==", "cpu": [ "arm" ], @@ -1150,9 +1212,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz", - "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.1.tgz", + "integrity": "sha512-thFUbkHteM20BGShD6P08aungq4irbIZKUNbG70LN8RkO7YztcGPiKTTGZS7Kw+x5h8hOXs0i4OaHwFxlpQN6A==", "cpu": [ "arm64" ], @@ -1163,9 +1225,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz", - "integrity": "sha512-vk+ma8iC1ebje/ahpxpnrfVQJibTMyHdWpOGZ3JpQ7Mgn/3QNHmPq7YwjZbIE7km73dH5M1e6MRRsnEBW7v5CQ==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.1.tgz", + "integrity": "sha512-8o6eqeFZzVLia2hKPUZk4jdE3zW7LCcZr+MD18tXkgBBid3lssGVAYuox8x6YHoEPDdDa9ixTaStcmx88lio5Q==", "cpu": [ "arm64" ], @@ -1176,9 +1238,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz", - "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.1.tgz", + "integrity": "sha512-4T42heKsnbjkn7ovYiAdDVRRWZLU9Kmhdt6HafZxFcUdpjlBlxj4wDrt1yFWLk7G4+E+8p2C9tcmSu0KA6auGA==", "cpu": [ "x64" ], @@ -1189,9 +1251,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz", - "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.1.tgz", + "integrity": "sha512-MXg1xp+e5GhZ3Vit1gGEyoC+dyQUBy2JgVQ+3hUrD9wZMkUw/ywgkpK7oZgnB6kPpGrxJ41clkPPnsknuD6M2Q==", "cpu": [ "arm" ], @@ -1202,9 +1264,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz", - "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.1.tgz", + "integrity": "sha512-DZNLwIY4ftPSRVkJEaxYkq7u2zel7aah57HESuNkUnz+3bZHxwkCUkrfS2IWC1sxK6F2QNIR0Qr/YXw7nkF3Pw==", "cpu": [ "arm" ], @@ -1215,9 +1277,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz", - "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.1.tgz", + "integrity": "sha512-C7evongnjyxdngSDRRSQv5GvyfISizgtk9RM+z2biV5kY6S/NF/wta7K+DanmktC5DkuaJQgoKGf7KUDmA7RUw==", "cpu": [ "arm64" ], @@ -1228,9 +1290,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz", - "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.1.tgz", + "integrity": "sha512-89tFWqxfxLLHkAthAcrTs9etAoBFRduNfWdl2xUs/yLV+7XDrJ5yuXMHptNqf1Zw0UCA3cAutkAiAokYCkaPtw==", "cpu": [ "arm64" ], @@ -1241,9 +1303,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz", - "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.1.tgz", + "integrity": "sha512-PromGeV50sq+YfaisG8W3fd+Cl6mnOOiNv2qKKqKCpiiEke2KiKVyDqG/Mb9GWKbYMHj5a01fq/qlUR28PFhCQ==", "cpu": [ "ppc64" ], @@ -1254,9 +1316,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz", - "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.1.tgz", + "integrity": "sha512-/1BmHYh+iz0cNCP0oHCuF8CSiNj0JOGf0jRlSo3L/FAyZyG2rGBuKpkZVH9YF+x58r1jgWxvm1aRg3DHrLDt6A==", "cpu": [ "riscv64" ], @@ -1267,9 +1329,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz", - "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.1.tgz", + "integrity": "sha512-0cYP5rGkQWRZKy9/HtsWVStLXzCF3cCBTRI+qRL8Z+wkYlqN7zrSYm6FuY5Kd5ysS5aH0q5lVgb/WbG4jqXN1Q==", "cpu": [ "s390x" ], @@ -1280,9 +1342,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz", - "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.1.tgz", + "integrity": "sha512-XUXeI9eM8rMP8aGvii/aOOiMvTs7xlCosq9xCjcqI9+5hBxtjDpD+7Abm1ZhVIFE1J2h2VIg0t2DX/gjespC2Q==", "cpu": [ "x64" ], @@ -1293,9 +1355,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz", - "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.1.tgz", + "integrity": "sha512-V7cBw/cKXMfEVhpSvVZhC+iGifD6U1zJ4tbibjjN+Xi3blSXaj/rJynAkCFFQfoG6VZrAiP7uGVzL440Q6Me2Q==", "cpu": [ "x64" ], @@ -1306,9 +1368,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz", - "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.1.tgz", + "integrity": "sha512-88brja2vldW/76jWATlBqHEoGjJLRnP0WOEKAUbMcXaAZnemNhlAHSyj4jIwMoP2T750LE9lblvD4e2jXleZsA==", "cpu": [ "arm64" ], @@ -1319,9 +1381,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz", - "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.1.tgz", + "integrity": "sha512-LdxxcqRVSXi6k6JUrTah1rHuaupoeuiv38du8Mt4r4IPer3kwlTo+RuvfE8KzZ/tL6BhaPlzJ3835i6CxrFIRQ==", "cpu": [ "ia32" ], @@ -1332,9 +1394,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz", - "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.1.tgz", + "integrity": "sha512-2bIrL28PcK3YCqD9anGxDxamxdiJAxA+l7fWIwM5o8UqNy1t3d1NdAweO2XhA0KTDJ5aH1FsuiT5+7VhtHliXg==", "cpu": [ "x64" ], @@ -1759,9 +1821,9 @@ "dev": true }, "node_modules/@vitejs/plugin-vue": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz", - "integrity": "sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.1.tgz", + "integrity": "sha512-sDckXxlHpMsjRQbAH9WanangrfrblsOd3pNifePs+FOHjJg1jfWq5L/P0PsBRndEt3nmdUnmvieP8ULDeX5AvA==", "dev": true, "engines": { "node": "^18.0.0 || >=20.0.0" @@ -1772,65 +1834,65 @@ } }, "node_modules/@volar/language-core": { - "version": "2.4.0-alpha.16", - "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.16.tgz", - "integrity": "sha512-oOTnIZlx0P/idFwVw+W0NbzKDtZAQMzXSdIFfTePCKcXlb4Ys12GaGkx8NF9dsvPYV3nbv3ZsSxnkZWBmNKd7A==", + "version": "2.4.0-alpha.18", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz", + "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==", "dev": true, "dependencies": { - "@volar/source-map": "2.4.0-alpha.16" + "@volar/source-map": "2.4.0-alpha.18" } }, "node_modules/@volar/source-map": { - "version": "2.4.0-alpha.16", - "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.16.tgz", - "integrity": "sha512-sL9vNG7iR2hiKZor7UkD5Sufu3QCia4cbp2gX/nGRNSdaPbhOpdAoavwlBm0PrVkpiA19NZuavZoobD8krviFg==", + "version": "2.4.0-alpha.18", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz", + "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==", "dev": true }, "node_modules/@volar/typescript": { - "version": "2.4.0-alpha.16", - "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.16.tgz", - "integrity": "sha512-WCx7z5O81McCQp2cC0c8081y+MgTiAR2WAiJjVL4tr4Qh4GgqK0lgn3CqAjcKizaK1R5y3wfrUqgIYr+QeFYcw==", + "version": "2.4.0-alpha.18", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.18.tgz", + "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==", "dev": true, "dependencies": { - "@volar/language-core": "2.4.0-alpha.16", + "@volar/language-core": "2.4.0-alpha.18", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "node_modules/@vue/compiler-core": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.32.tgz", - "integrity": "sha512-8tCVWkkLe/QCWIsrIvExUGnhYCAOroUs5dzhSoKL5w4MJS8uIYiou+pOPSVIOALOQ80B0jBs+Ri+kd5+MBnCDw==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.34.tgz", + "integrity": "sha512-Z0izUf32+wAnQewjHu+pQf1yw00EGOmevl1kE+ljjjMe7oEfpQ+BI3/JNK7yMB4IrUsqLDmPecUrpj3mCP+yJQ==", "dev": true, "dependencies": { "@babel/parser": "^7.24.7", - "@vue/shared": "3.4.32", + "@vue/shared": "3.4.34", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "node_modules/@vue/compiler-dom": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.32.tgz", - "integrity": "sha512-PbSgt9KuYo4fyb90dynuPc0XFTfFPs3sCTbPLOLlo+PrUESW1gn/NjSsUvhR+mI2AmmEzexwYMxbHDldxSOr2A==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.34.tgz", + "integrity": "sha512-3PUOTS1h5cskdOJMExCu2TInXuM0j60DRPpSCJDqOCupCfUZCJoyQmKtRmA8EgDNZ5kcEE7vketamRZfrEuVDw==", "dev": true, "dependencies": { - "@vue/compiler-core": "3.4.32", - "@vue/shared": "3.4.32" + "@vue/compiler-core": "3.4.34", + "@vue/shared": "3.4.34" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.32.tgz", - "integrity": "sha512-STy9im/WHfaguJnfKjjVpMHukxHUrOKjm2vVCxiojQJyo3Sb6Os8SMXBr/MI+ekpstEGkDONfqAQoSbZhspLYw==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.34.tgz", + "integrity": "sha512-x6lm0UrM03jjDXTPZgD9Ad8bIVD1ifWNit2EaWQIZB5CULr46+FbLQ5RpK7AXtDHGjx9rmvC7QRCTjsiGkAwRw==", "dev": true, "dependencies": { "@babel/parser": "^7.24.7", - "@vue/compiler-core": "3.4.32", - "@vue/compiler-dom": "3.4.32", - "@vue/compiler-ssr": "3.4.32", - "@vue/shared": "3.4.32", + "@vue/compiler-core": "3.4.34", + "@vue/compiler-dom": "3.4.34", + "@vue/compiler-ssr": "3.4.34", + "@vue/shared": "3.4.34", "estree-walker": "^2.0.2", "magic-string": "^0.30.10", "postcss": "^8.4.39", @@ -1838,13 +1900,23 @@ } }, "node_modules/@vue/compiler-ssr": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.32.tgz", - "integrity": "sha512-nyu/txTecF6DrxLrpLcI34xutrvZPtHPBj9yRoPxstIquxeeyywXpYZrQMsIeDfBhlw1abJb9CbbyZvDw2kjdg==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.34.tgz", + "integrity": "sha512-8TDBcLaTrFm5rnF+Qm4BlliaopJgqJ28Nsrc80qazynm5aJO+Emu7y0RWw34L8dNnTRdcVBpWzJxhGYzsoVu4g==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.4.34", + "@vue/shared": "3.4.34" + } + }, + "node_modules/@vue/compiler-vue2": { + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz", + "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==", "dev": true, "dependencies": { - "@vue/compiler-dom": "3.4.32", - "@vue/shared": "3.4.32" + "de-indent": "^1.0.2", + "he": "^1.2.0" } }, "node_modules/@vue/devtools-api": { @@ -1892,19 +1964,19 @@ } }, "node_modules/@vue/language-core": { - "version": "2.0.26", - "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.26.tgz", - "integrity": "sha512-/lt6SfQ3O1yDAhPsnLv9iSUgXd1dMHqUm/t3RctfqjuwQf1LnftZ414X3UBn6aXT4MiwXWtbNJ4Z0NZWwDWgJQ==", + "version": "2.0.29", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.29.tgz", + "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==", "dev": true, "dependencies": { - "@volar/language-core": "~2.4.0-alpha.15", + "@volar/language-core": "~2.4.0-alpha.18", "@vue/compiler-dom": "^3.4.0", + "@vue/compiler-vue2": "^2.7.16", "@vue/shared": "^3.4.0", "computeds": "^0.0.1", "minimatch": "^9.0.3", "muggle-string": "^0.4.1", - "path-browserify": "^1.0.1", - "vue-template-compiler": "^2.7.14" + "path-browserify": "^1.0.1" }, "peerDependencies": { "typescript": "*" @@ -1940,53 +2012,53 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.32.tgz", - "integrity": "sha512-1P7QvghAzhSIWmiNmh4MNkLVjr2QTNDcFv2sKmytEWhR6t7BZzNicgm5ENER4uU++wbWxgRh/pSEYgdI3MDcvg==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.34.tgz", + "integrity": "sha512-ua+Lo+wBRlBEX9TtgPOShE2JwIO7p6BTZ7t1KZVPoaBRfqbC7N3c8Mpzicx173fXxx5VXeU6ykiHo7WgLzJQDA==", "dev": true, "dependencies": { - "@vue/shared": "3.4.32" + "@vue/shared": "3.4.34" } }, "node_modules/@vue/runtime-core": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.32.tgz", - "integrity": "sha512-FxT2dTHUs1Hki8Ui/B1Hu339mx4H5kRJooqrNM32tGUHBPStJxwMzLIRbeGO/B1NMplU4Pg9fwOqrJtrOzkdfA==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.34.tgz", + "integrity": "sha512-PXhkiRPwcPGJ1BnyBZFI96GfInCVskd0HPNIAZn7i3YOmLbtbTZpB7/kDTwC1W7IqdGPkTVC63IS7J2nZs4Ebg==", "dev": true, "dependencies": { - "@vue/reactivity": "3.4.32", - "@vue/shared": "3.4.32" + "@vue/reactivity": "3.4.34", + "@vue/shared": "3.4.34" } }, "node_modules/@vue/runtime-dom": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.32.tgz", - "integrity": "sha512-Xz9G+ZViRyPFQtRBCPFkhMzKn454ihCPMKUiacNaUhuTIXvyfkAq8l89IZ/kegFVyw/7KkJGRGqYdEZrf27Xsg==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.34.tgz", + "integrity": "sha512-dXqIe+RqFAK2Euak4UsvbIupalrhc67OuQKpD7HJ3W2fv8jlqvI7szfBCsAEcE8o/wyNpkloxB6J8viuF/E3gw==", "dev": true, "dependencies": { - "@vue/reactivity": "3.4.32", - "@vue/runtime-core": "3.4.32", - "@vue/shared": "3.4.32", + "@vue/reactivity": "3.4.34", + "@vue/runtime-core": "3.4.34", + "@vue/shared": "3.4.34", "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.32.tgz", - "integrity": "sha512-3c4rd0522Ao8hKjzgmUAbcjv2mBnvnw0Ld2f8HOMCuWJZjYie/p8cpIoYJbeP0VV2JYmrJJMwGQDO5RH4iQ30A==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.34.tgz", + "integrity": "sha512-GeyEUfMVRZMD/mZcNONEqg7MiU10QQ1DB3O/Qr6+8uXpbwdlmVgQ5Qs1/ZUAFX1X2UUtqMoGrDRbxdWfOJFT7Q==", "dev": true, "dependencies": { - "@vue/compiler-ssr": "3.4.32", - "@vue/shared": "3.4.32" + "@vue/compiler-ssr": "3.4.34", + "@vue/shared": "3.4.34" }, "peerDependencies": { - "vue": "3.4.32" + "vue": "3.4.34" } }, "node_modules/@vue/shared": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.32.tgz", - "integrity": "sha512-ep4mF1IVnX/pYaNwxwOpJHyBtOMKWoKZMbnUyd+z0udqIxLUh7YCCd/JfDna8aUrmnG9SFORyIq2HzEATRrQsg==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.34.tgz", + "integrity": "sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A==", "dev": true }, "node_modules/@vue/tsconfig": { @@ -2397,9 +2469,9 @@ } }, "node_modules/bulma": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", - "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==" }, "node_modules/cacache": { "version": "17.1.4", @@ -4182,11 +4254,18 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", - "dev": true + "node_modules/ip-address": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz", + "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==", + "dev": true, + "dependencies": { + "jsbn": "1.1.0", + "sprintf-js": "^1.1.3" + }, + "engines": { + "node": ">= 12" + } }, "node_modules/is-arrayish": { "version": "0.2.1", @@ -4393,6 +4472,12 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsbn": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz", + "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==", + "dev": true + }, "node_modules/json-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", @@ -4584,12 +4669,12 @@ } }, "node_modules/magic-string": { - "version": "0.30.10", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", - "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", + "version": "0.30.11", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz", + "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==", "dev": true, "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15" + "@jridgewell/sourcemap-codec": "^1.5.0" } }, "node_modules/make-fetch-happen": { @@ -4725,10 +4810,13 @@ } }, "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/minipass": { "version": "5.0.0", @@ -5913,9 +6001,9 @@ } }, "node_modules/postcss": { - "version": "8.4.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", - "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", + "version": "8.4.40", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", + "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", "dev": true, "funding": [ { @@ -6564,9 +6652,9 @@ } }, "node_modules/rollup": { - "version": "4.18.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.1.tgz", - "integrity": "sha512-Elx2UT8lzxxOXMpy5HWQGZqkrQOtrVDDa/bm9l10+U4rQnVzbL/LgZ4NOM1MPIDyHk69W4InuYDF5dzRh4Kw1A==", + "version": "4.19.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.1.tgz", + "integrity": "sha512-K5vziVlg7hTpYfFBI+91zHBEMo6jafYXpkMlqZjg7/zhIG9iHqazBf4xz9AVdjS9BruRn280ROqLI7G3OFRIlw==", "dev": true, "dependencies": { "@types/estree": "1.0.5" @@ -6579,22 +6667,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.18.1", - "@rollup/rollup-android-arm64": "4.18.1", - "@rollup/rollup-darwin-arm64": "4.18.1", - "@rollup/rollup-darwin-x64": "4.18.1", - "@rollup/rollup-linux-arm-gnueabihf": "4.18.1", - "@rollup/rollup-linux-arm-musleabihf": "4.18.1", - "@rollup/rollup-linux-arm64-gnu": "4.18.1", - "@rollup/rollup-linux-arm64-musl": "4.18.1", - "@rollup/rollup-linux-powerpc64le-gnu": "4.18.1", - "@rollup/rollup-linux-riscv64-gnu": "4.18.1", - "@rollup/rollup-linux-s390x-gnu": "4.18.1", - "@rollup/rollup-linux-x64-gnu": "4.18.1", - "@rollup/rollup-linux-x64-musl": "4.18.1", - "@rollup/rollup-win32-arm64-msvc": "4.18.1", - "@rollup/rollup-win32-ia32-msvc": "4.18.1", - "@rollup/rollup-win32-x64-msvc": "4.18.1", + "@rollup/rollup-android-arm-eabi": "4.19.1", + "@rollup/rollup-android-arm64": "4.19.1", + "@rollup/rollup-darwin-arm64": "4.19.1", + "@rollup/rollup-darwin-x64": "4.19.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.19.1", + "@rollup/rollup-linux-arm-musleabihf": "4.19.1", + "@rollup/rollup-linux-arm64-gnu": "4.19.1", + "@rollup/rollup-linux-arm64-musl": "4.19.1", + "@rollup/rollup-linux-powerpc64le-gnu": "4.19.1", + "@rollup/rollup-linux-riscv64-gnu": "4.19.1", + "@rollup/rollup-linux-s390x-gnu": "4.19.1", + "@rollup/rollup-linux-x64-gnu": "4.19.1", + "@rollup/rollup-linux-x64-musl": "4.19.1", + "@rollup/rollup-win32-arm64-msvc": "4.19.1", + "@rollup/rollup-win32-ia32-msvc": "4.19.1", + "@rollup/rollup-win32-x64-msvc": "4.19.1", "fsevents": "~2.3.2" } }, @@ -6856,16 +6944,16 @@ } }, "node_modules/socks": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz", - "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==", + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz", + "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==", "dev": true, "dependencies": { - "ip": "^2.0.0", + "ip-address": "^9.0.5", "smart-buffer": "^4.2.0" }, "engines": { - "node": ">= 10.13.0", + "node": ">= 10.0.0", "npm": ">= 3.0.0" } }, @@ -6955,6 +7043,12 @@ "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==", "dev": true }, + "node_modules/sprintf-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", + "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==", + "dev": true + }, "node_modules/ssri": { "version": "10.0.5", "resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.5.tgz", @@ -7266,34 +7360,6 @@ "node": ">=0.10.0" } }, - "node_modules/stylelint/node_modules/postcss": { - "version": "8.4.40", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", - "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.0.1", - "source-map-js": "^1.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, "node_modules/stylelint/node_modules/resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", @@ -7437,9 +7503,9 @@ "dev": true }, "node_modules/tar": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz", - "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz", + "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==", "dev": true, "dependencies": { "chownr": "^2.0.0", @@ -7478,15 +7544,16 @@ } }, "node_modules/terser": { - "version": "5.9.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.9.0.tgz", - "integrity": "sha512-h5hxa23sCdpzcye/7b8YqbE5OwKca/ni0RQz1uRX3tGh8haaGHqcuSqbGRybuAKNdntZ0mDgFNXPJ48xQ2RXKQ==", + "version": "5.31.3", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz", + "integrity": "sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==", "dev": true, "optional": true, "peer": true, "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", "commander": "^2.20.0", - "source-map": "~0.7.2", "source-map-support": "~0.5.20" }, "bin": { @@ -7496,17 +7563,6 @@ "node": ">=10" } }, - "node_modules/terser/node_modules/source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true, - "optional": true, - "peer": true, - "engines": { - "node": ">= 8" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -7591,9 +7647,9 @@ } }, "node_modules/typescript": { - "version": "5.5.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz", - "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", + "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -7780,9 +7836,9 @@ } }, "node_modules/vite": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz", - "integrity": "sha512-Cw+7zL3ZG9/NZBB8C+8QbQZmR54GwqIz+WMI4b3JgdYJvX+ny9AjJXqkGQlDXSXRP9rP0B4tbciRMOVEKulVOA==", + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz", + "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==", "dev": true, "dependencies": { "esbuild": "^0.21.3", @@ -7841,16 +7897,16 @@ "dev": true }, "node_modules/vue": { - "version": "3.4.32", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.32.tgz", - "integrity": "sha512-9mCGIAi/CAq7GtaLLLp2J92pEic+HArstG+pq6F+H7+/jB9a0Z7576n4Bh4k79/50L1cKMIhZC3MC0iGpl+1IA==", + "version": "3.4.34", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.34.tgz", + "integrity": "sha512-VZze05HWlA3ItreQ/ka7Sx7PoD0/3St8FEiSlSTVgb6l4hL+RjtP2/8g5WQBzZgyf8WG2f+g1bXzC7zggLhAJA==", "dev": true, "dependencies": { - "@vue/compiler-dom": "3.4.32", - "@vue/compiler-sfc": "3.4.32", - "@vue/runtime-dom": "3.4.32", - "@vue/server-renderer": "3.4.32", - "@vue/shared": "3.4.32" + "@vue/compiler-dom": "3.4.34", + "@vue/compiler-sfc": "3.4.34", + "@vue/runtime-dom": "3.4.34", + "@vue/server-renderer": "3.4.34", + "@vue/shared": "3.4.34" }, "peerDependencies": { "typescript": "*" @@ -7900,24 +7956,14 @@ "vue": "^3.2.0" } }, - "node_modules/vue-template-compiler": { - "version": "2.7.16", - "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz", - "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==", - "dev": true, - "dependencies": { - "de-indent": "^1.0.2", - "he": "^1.2.0" - } - }, "node_modules/vue-tsc": { - "version": "2.0.26", - "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.26.tgz", - "integrity": "sha512-tOhuwy2bIXbMhz82ef37qeiaQHMXKQkD6mOF6CCPl3/uYtST3l6fdNyfMxipudrQTxTfXVPlgJdMENBFfC1CfQ==", + "version": "2.0.29", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz", + "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==", "dev": true, "dependencies": { - "@volar/typescript": "~2.4.0-alpha.15", - "@vue/language-core": "2.0.26", + "@volar/typescript": "~2.4.0-alpha.18", + "@vue/language-core": "2.0.29", "semver": "^7.5.4" }, "bin": { diff --git a/package.json b/package.json index 450718a..e3527ce 100644 --- a/package.json +++ b/package.json @@ -32,13 +32,13 @@ "update": "ncu -u" }, "dependencies": { - "bulma": "0.9.4" + "bulma": "1.0.2" }, "devDependencies": { - "@oruga-ui/examples": "^0.9.0-pre.1", - "@oruga-ui/oruga-next": "^0.9.0-pre.1", + "@oruga-ui/examples": "^0.9.0-pre.2", + "@oruga-ui/oruga-next": "^0.9.0-pre.2", "@rollup/plugin-typescript": "11.1.6", - "@vitejs/plugin-vue": "5.0.5", + "@vitejs/plugin-vue": "5.1.1", "@vue/eslint-config-prettier": "^9.0.0", "@vue/eslint-config-typescript": "^13.0.0", "@vue/tsconfig": "^0.5.1", @@ -48,22 +48,22 @@ "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-vue": "^9.27.0", "npm-check-updates": "^16.14.20", - "postcss": "8.4.39", + "postcss": "8.4.40", "prettier": "^3.3.3", "rimraf": "6.0.1", - "rollup": "^4.18.1", + "rollup": "^4.19.1", "rollup-plugin-copy": "3.5.0", "rollup-plugin-sass": "1.13.1", "sass": "1.77.8", - "stylelint": "^16.7.0", + "stylelint": "^16.8.1", "stylelint-config-recommended": "^14.0.1", "stylelint-config-recommended-scss": "^14.1.0", "stylelint-prettier": "^5.0.2", "stylelint-scss": "^6.4.1", - "typescript": "5.5.3", - "vite": "^5.3.4", - "vue": "3.4.32", + "typescript": "5.5.4", + "vite": "^5.3.5", + "vue": "3.4.34", "vue-router": "4.4.0", - "vue-tsc": "2.0.26" + "vue-tsc": "2.0.29" } } diff --git a/src/assets/scss/bulma-build.scss b/src/assets/scss/bulma-build.scss index 5fdc619..9844c7a 100644 --- a/src/assets/scss/bulma-build.scss +++ b/src/assets/scss/bulma-build.scss @@ -1,3 +1,3 @@ -@forward "bulma/bulma"; @forward "components/utils/all"; +@forward "bulma/sass"; @forward "bulma"; diff --git a/src/assets/scss/bulma.scss b/src/assets/scss/bulma.scss index d9388fb..88f6038 100644 --- a/src/assets/scss/bulma.scss +++ b/src/assets/scss/bulma.scss @@ -1,27 +1,29 @@ @forward "./components/utils/all"; @forward "./components/autocomplete"; -@forward "./components/form"; -@forward "./components/taginput"; -@forward "./components/switch"; -@forward "./components/pagination"; -@forward "./components/table"; -@forward "./components/tabs"; -@forward "./components/slider"; -@forward "./components/tooltip"; -@forward "./components/steps"; -@forward "./components/skeleton"; -@forward "./components/dropdown"; -@forward "./components/datepicker"; -@forward "./components/modal"; +@forward "./components/button"; +@forward "./components/carousel"; @forward "./components/checkbox"; -@forward "./components/sidebar"; +@forward "./components/datepicker"; +@forward "./components/dropdown"; +@forward "./components/field"; +@forward "./components/icon"; +@forward "./components/input"; @forward "./components/loading"; -@forward "./components/timepicker"; +@forward "./components/modal"; +@forward "./components/menu"; +@forward "./components/notification"; +@forward "./components/pagination"; @forward "./components/radio"; -@forward "./components/button"; -@forward "./components/icon"; @forward "./components/select"; -@forward "./components/notification"; -@forward "./components/carousel"; +@forward "./components/sidebar"; +@forward "./components/skeleton"; +@forward "./components/slider"; +@forward "./components/steps"; +@forward "./components/switch"; +@forward "./components/table"; +@forward "./components/tabs"; +@forward "./components/taginput"; +@forward "./components/timepicker"; +@forward "./components/tooltip"; @forward "./components/upload"; diff --git a/src/assets/scss/components/_autocomplete.scss b/src/assets/scss/components/_autocomplete.scss index 242fe06..d81d24e 100644 --- a/src/assets/scss/components/_autocomplete.scss +++ b/src/assets/scss/components/_autocomplete.scss @@ -1,38 +1,67 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ $dropdown-content-max-height: 200px !default; /* @docs */ .autocomplete { - position: relative; + @include css.register-vars( + ( + "dropdown-content-max-height": #{$dropdown-content-max-height}, + ) + ); - .dropdown-menu { - display: block; - width: 100%; + @include mixins.unselectable; - &.is-opened-top { - top: auto; - bottom: 100%; - } - } + position: relative; .dropdown-content { overflow: auto; - max-height: $dropdown-content-max-height; + max-height: css.getVar("dropdown-content-max-height"); } .dropdown-item { + background-color: hsl( + #{css.getVar("dropdown-item-h")}, + #{css.getVar("dropdown-item-s")}, + calc( + #{css.getVar("dropdown-item-background-l")} + #{css.getVar( + "dropdown-item-background-l-delta" + )} + ) + ); + width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - // added due to div instead of a cursor: pointer; &.is-hovered, &:hover { - background: bulma.$dropdown-item-hover-background-color; - color: bulma.$dropdown-item-hover-color; + @include css.register-vars( + ( + "dropdown-item-background-l-delta": #{css.getVar( + "dropdown-item-hover-background-l-delta" + )}, + "dropdown-item-border-l-delta": #{css.getVar( + "dropdown-item-hover-border-l-delta" + )}, + ) + ); + } + + &:active { + @include css.register-vars( + ( + "dropdown-item-background-l-delta": #{css.getVar( + "dropdown-item-active-background-l-delta" + )}, + "dropdown-item-border-l-delta": #{css.getVar( + "dropdown-item-active-border-l-delta" + )}, + ) + ); } &.is-disabled { diff --git a/src/assets/scss/components/_button.scss b/src/assets/scss/components/_button.scss index a32bc50..f8794f2 100644 --- a/src/assets/scss/components/_button.scss +++ b/src/assets/scss/components/_button.scss @@ -1,4 +1,29 @@ -.button .button-wrapper { - display: inline-flex; - justify-content: center; +@use "bulma/sass/utilities/css-variables" as css; + +/* @docs */ +$button-shadow: css.getVar("focus-shadow-size") + hsla( + css.getVar("button-h"), + css.getVar("button-s"), + css.getVar("button-l"), + css.getVar("focus-shadow-alpha") + ); +/* @docs */ + +.button { + @include css.register-vars( + ( + "button-shadow": #{$button-shadow}, + "button-l": css.getVar("button-color-l"), + ) + ); + + .button-wrapper { + display: inline-flex; + justify-content: center; + } + + &:focus { + box-shadow: css.getVar("button-shadow"); + } } diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss index a4cc43b..5399718 100644 --- a/src/assets/scss/components/_carousel.scss +++ b/src/assets/scss/components/_carousel.scss @@ -1,36 +1,53 @@ -@use "bulma/bulma"; @use "utils/variables" as var; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$carousel-arrow-background: bulma.$scheme-main !default; -$carousel-arrow-color: bulma.$primary !default; +$carousel-arrow-background: css.getVar("scheme-main") !default; +$carousel-arrow-color: css.getVar("primary") !default; $carousel-arrow-icon-spaced: 1.5rem !default; $carousel-arrow-top: 50% !default; -$carousel-indicator-background: rgba(bulma.$scheme-invert, 0.5) !default; -$carousel-indicator-border: bulma.$scheme-main !default; -$carousel-indicator-color: bulma.$primary !default; +$carousel-indicator-background: rgba(css.getVar("scheme-invert"), 0.5) !default; +$carousel-indicator-border: css.getVar("scheme-main") !default; +$carousel-indicator-color: css.getVar("primary") !default; $carousel-indicator-spaced: 0.5rem !default; -$carousel-overlay-background: rgba(bulma.$scheme-invert, 0.86) !default; +$carousel-overlay-background: rgba(css.getVar("scheme-invert"), 0.86) !default; $carousel-overlay-z: 40 !default; /* @docs */ .carousel { - @extend %unselectable; + @include css.register-vars( + ( + "carousel-arrow-background": #{$carousel-arrow-background}, + "carousel-arrow-color": #{$carousel-arrow-color}, + "carousel-arrow-icon-spaced": #{$carousel-arrow-icon-spaced}, + "carousel-arrow-top": #{$carousel-arrow-top}, + "carousel-indicator-background": #{$carousel-indicator-background}, + "carousel-indicator-border": #{$carousel-indicator-border}, + "carousel-indicator-color": #{$carousel-indicator-color}, + "carousel-indicator-spaced": #{$carousel-indicator-spaced}, + "carousel-overlay-background": #{$carousel-overlay-background}, + "carousel-overlay-z": #{$carousel-overlay-z}, + ) + ); + + @include mixins.unselectable; + position: relative; overflow: hidden; width: 100%; &.is-overlay { - background-color: $carousel-overlay-background; + background-color: css.getVar("carousel-overlay-background"); align-items: center; flex-direction: column; justify-content: center; display: flex; max-height: 100vh; position: fixed; - z-index: $carousel-overlay-z; + z-index: css.getVar("carousel-overlay-z"); .carousel-item img { cursor: default; @@ -49,7 +66,7 @@ $carousel-overlay-z: 40 !default; display: flex; &:hover .carousel-arrow.is-hovered { - @include bulma.tablet { + @include mixins.tablet { opacity: 1; } } @@ -68,20 +85,20 @@ $carousel-overlay-z: 40 !default; .carousel-indicator { width: 100%; - padding: $carousel-indicator-spaced; + padding: css.getVar("carousel-indicator-spaced"); display: flex; align-items: center; justify-content: center; &.has-background { - background: $carousel-indicator-background; + background: css.getVar("carousel-indicator-background"); } &.has-custom { + @include mixins.overflow-touch; + flex-wrap: nowrap; justify-content: flex-start; - - @include bulma.overflow-touch; overflow: hidden; overflow-x: auto; @@ -108,21 +125,21 @@ $carousel-overlay-z: 40 !default; .indicator-item { &:not(:last-child) { - margin-right: $carousel-indicator-spaced; + margin-right: css.getVar("carousel-indicator-spaced"); } .indicator-style.is-active, .indicator-style.is-active:hover { - background: $carousel-indicator-color; - border: 1px solid $carousel-indicator-border; + background: css.getVar("carousel-indicator-color"); + border: 1px solid css.getVar("carousel-indicator-border"); } .indicator-style { display: block; - border: 1px solid $carousel-indicator-color; - background: $carousel-indicator-border; + border: 1px solid css.getVar("carousel-indicator-color"); + background: css.getVar("carousel-indicator-border"); outline: none; - transition: var.$speed-slow bulma.$easing; + transition: var.$speed-slow css.getVar("easing"); &.is-boxes { height: 10px; @@ -130,7 +147,7 @@ $carousel-overlay-z: 40 !default; } &.is-dots { - border-radius: bulma.$radius-rounded; + border-radius: css.getVar("radius-rounded"); height: 10px; width: 10px; } @@ -145,39 +162,39 @@ $carousel-overlay-z: 40 !default; } .carousel-arrow { - transition: var.$speed-slow bulma.$easing; + transition: var.$speed-slow css.getVar("easing"); &.is-hovered { opacity: 0; } &.icon { - background: $carousel-arrow-background; - color: $carousel-arrow-color; + background: css.getVar("carousel-arrow-background"); + color: css.getVar("carousel-arrow-color"); cursor: pointer; - border: 1px solid $carousel-arrow-background; - border-radius: bulma.$radius-rounded; + border: 1px solid css.getVar("carousel-arrow-background"); + border-radius: css.getVar("radius-rounded"); outline: 0; &:hover { - border: 1px solid $carousel-arrow-color; + border: 1px solid css.getVar("carousel-arrow-color"); opacity: 1; } &.has-icons-left, &.has-icons-right { position: absolute; - top: $carousel-arrow-top; - transform: translateY(-$carousel-arrow-top); + top: css.getVar("carousel-arrow-top"); + transform: translateY(calc(-1 * css.getVar("carousel-arrow-top"))); z-index: 1; } &.has-icons-left { - left: $carousel-arrow-icon-spaced; + left: css.getVar("carousel-arrow-icon-spaced"); } &.has-icons-right { - right: $carousel-arrow-icon-spaced; + right: css.getVar("carousel-arrow-icon-spaced"); } } } diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss index 332f2c7..dbc6c2e 100644 --- a/src/assets/scss/components/_checkbox.scss +++ b/src/assets/scss/components/_checkbox.scss @@ -1,24 +1,45 @@ @use "sass:list"; -@use "bulma/bulma"; -@use "utils/variables" as var; + @use "utils/functions" as fn; +@use "utils/variables" as var; +@use "bulma/sass/utilities/controls" as controls; +@use "bulma/sass/utilities/css-variables" as css; /* @docs */ -$checkbox-active-background-color: bulma.$primary !default; +$checkbox-size: 1.25em !default; +$checkbox-colors: var.$colors !default; $checkbox-background-color: transparent !default; -$checkbox-border-color: bulma.$grey !default; -$checkbox-border-radius: bulma.$radius !default; +$checkbox-border-color: css.getVar("grey") !default; +$checkbox-border-radius: css.getVar("radius") !default; $checkbox-border-width: 2px !default; -$checkbox-checkmark-color: bulma.$primary-invert !default; -$checkbox-size: 1.25em !default; -$checkbox-colors: bulma.$form-colors !default; +$checkbox-checkmark-color: css.getVar("primary-invert") !default; +$checkbox-focus-color: hsl(from css.getVar("grey") h s l / 80%) !default; +$checkbox-active-focus-color: hsl( + from css.getVar("checkbox-active-background-color") h s l / 80% +) !default; +$checkbox-active-background-color: css.getVar("primary") !default; +$checkbox-shadow: css.getVar("shadow"); /* @docs */ -.b-checkbox.checkbox { - @extend %unselectable; - outline: none; - display: inline-flex; - align-items: center; +.checkbox { + @include css.register-vars( + ( + "checkbox-background-color": #{$checkbox-background-color}, + "checkbox-border-color": #{$checkbox-border-color}, + "checkbox-border-radius": #{$checkbox-border-radius}, + "checkbox-border-width": #{$checkbox-border-width}, + "checkbox-size": #{$checkbox-size}, + "checkbox-checkmark-color": #{$checkbox-checkmark-color}, + "checkbox-focus-color": $checkbox-focus-color, + "checkbox-active-focus-color": $checkbox-active-focus-color, + "checkbox-active-background-color": #{$checkbox-active-background-color}, + "checkbox-checked-background": + url(fn.checkmark($checkbox-checkmark-color)), + "checkbox-indeterminate-background": + url(fn.indeterminate($checkbox-checkmark-color)), + "checkbox-shadow": #{$checkbox-shadow}, + ) + ); &:not(.button) { margin-right: 0.5em; @@ -31,48 +52,50 @@ $checkbox-colors: bulma.$form-colors !default; .check { outline: none; appearance: none; - // font-size is changed by user agent to lower size font-size: inherit; width: $checkbox-size; height: $checkbox-size; flex-shrink: 0; - border-radius: $checkbox-border-radius; - border: $checkbox-border-width solid $checkbox-border-color; - transition: background var.$speed-slow bulma.$easing; - background: $checkbox-background-color; + border-radius: css.getVar("checkbox-border-radius"); + border: css.getVar("checkbox-border-width") solid + css.getVar("checkbox-border-color"); + transition: background var.$speed-slow css.getVar("easing"); + background: css.getVar("checkbox-background-color"); + box-shadow: css.getVar("checkbox-shadow"); &:checked { - background: $checkbox-active-background-color - url(fn.checkmark($checkbox-checkmark-color)) no-repeat center + border-color: css.getVar("checkbox-active-background-color"); + background: css.getVar("checkbox-active-background-color") + css.getVar("checkbox-checked-background") no-repeat center center; - border-color: $checkbox-active-background-color; } &:indeterminate { - background: $checkbox-active-background-color - url(fn.indeterminate($checkbox-checkmark-color)) no-repeat - center center; - border-color: $checkbox-active-background-color; + border-color: css.getVar("checkbox-active-background-color"); + background: css.getVar("checkbox-active-background-color") + css.getVar("checkbox-indeterminate-background") no-repeat center + center; } &:hover:not(:disabled) { - border-color: $checkbox-active-background-color; + border-color: css.getVar("checkbox-active-background-color"); } &:focus { &.check { - box-shadow: 0 0 0.5em rgba(bulma.$grey, 0.8); + box-shadow: css.getVar("active-shadow-size") + css.getVar("checkbox-focus-color"); } &:checked.check { - box-shadow: 0 0 0.5em - rgba($checkbox-active-background-color, 0.8); + box-shadow: css.getVar("active-shadow-size") + css.getVar("checkbox-active-focus-color"); } } } .control-label { - padding-left: bulma.$control-padding-horizontal; + padding-left: css.getVar("control-padding-horizontal"); } &.button { @@ -84,49 +107,39 @@ $checkbox-colors: bulma.$form-colors !default; cursor: not-allowed; } + // sizes + + @include controls.control; + &.is-small { - @include bulma.control-small; + @include controls.control-small; } &.is-medium { - @include bulma.control-medium; + @include controls.control-medium; } &.is-large { - @include bulma.control-large; + @include controls.control-large; } + // variant colors @each $name, $pair in $checkbox-colors { $color: list.nth($pair, 1); - $color-invert: list.nth($pair, 2); + $color-invert: if(list.length($pair) >= 2, list.nth($pair, 2), null); + &.is-#{$name} { - .check { - &:hover:not(:disabled) { - border-color: $color; - } - - &:checked { - border-color: $color; - background: $color - url(checkmark($color-invert)) - no-repeat - center - center; - - &:focus { - box-shadow: 0 0 0.5em rgba($color, 0.8); - } - } - - &:indeterminate { - background: $color - url(fn.indeterminate($color-invert)) - no-repeat - center - center; - border-color: $color; - } - } + @include css.register-vars( + ( + "checkbox-active-background-color": #{$color}, + "checkbox-checked-background": + url(fn.checkmark($color-invert)), + "checkbox-indeterminate-background": + url(fn.indeterminate($color-invert)), + "checkbox-focus-color": #{$color}, + "checkbox-active-focus-color": #{$color}, + ) + ); } } } diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss index fdde85f..914658e 100644 --- a/src/assets/scss/components/_datepicker.scss +++ b/src/assets/scss/components/_datepicker.scss @@ -1,24 +1,37 @@ @use "sass:list"; @use "sass:color"; -@use "bulma/bulma"; + +@use "utils/variables" as var; +@use "bulma/sass/utilities/controls" as controls; +@use "bulma/sass/utilities/css-variables" as css; /* @docs */ -$datepicker-background-color: bulma.$dropdown-content-background-color !default; -$datepicker-radius: bulma.$dropdown-content-radius !default; -$datepicker-shadow: bulma.$dropdown-content-shadow !default; -$datepicker-header-color: bulma.$grey !default; -$datepicker-today-border: solid 1px rgba(bulma.$primary, 0.5) !default; -$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-background-color: bulma.$primary !default; -$datepicker-event-background-color: bulma.$grey-light !default; +$datepicker-colors: var.$colors !default; +$datepicker-header-color: css.getVar("grey") !default; +$datepicker-today-border: solid 1px rgba(css.getVar("primary"), 0.5) !default; +$datepicker-item-color: css.getVar("grey-dark") !default; +$datepicker-item-disabled-color: css.getVar("grey-light") !default; +$datepicker-item-hover-color: css.getVar("scheme-invert") !default; +$datepicker-item-hover-background-color: css.getVar("background") !default; +$datepicker-item-selected-color: css.getVar("primary-invert") !default; +$datepicker-item-selected-background-color: css.getVar("primary") !default; +$datepicker-event-background-color: css.getVar("grey-light") !default; /* @docs */ .datepicker { - font-size: 0.875rem; + @include css.register-vars( + ( + "datepicker-header-color": #{$datepicker-header-color}, + "datepicker-today-border": #{$datepicker-today-border}, + "datepicker-item-color": #{$datepicker-item-color}, + "datepicker-item-disabled-color": #{$datepicker-item-disabled-color}, + "datepicker-item-hover-color": #{$datepicker-item-hover-color}, + "datepicker-item-hover-background-color": #{$datepicker-item-hover-background-color}, + "datepicker-item-selected-color": #{$datepicker-item-selected-color}, + "datepicker-item-selected-background-color": #{$datepicker-item-selected-background-color}, + "datepicker-event-background-color": #{$datepicker-event-background-color}, + ) + ); .dropdown, .dropdown-trigger { @@ -26,17 +39,23 @@ $datepicker-event-background-color: bulma.$grey-light !default; .input[readonly] { cursor: pointer; - box-shadow: bulma.$input-shadow; + box-shadow: css.getVar("input-shadow"); &:focus, &.is-focused, &:active, &.is-active { - box-shadow: bulma.$input-focus-box-shadow-size - bulma.$input-focus-box-shadow-color; + box-shadow: css.getVar("input-focus-shadow-size") + hsla( + css.getVar("input-focus-h"), + css.getVar("input-focus-s"), + css.getVar("input-focus-l"), + css.getVar("input-focus-shadow-alpha") + ); } } } + // unset opacity when dropdow is disabled .dropdown { &.is-disabled { @@ -44,51 +63,38 @@ $datepicker-event-background-color: bulma.$grey-light !default; } } - .dropdown-menu { - background-color: $datepicker-background-color; - border-radius: $datepicker-radius; - box-shadow: $datepicker-shadow; - } - .dropdown-item { font-size: inherit; - - &:hover { - background-color: unset; - color: unset; - } } .datepicker-header { padding-bottom: 0.875rem; margin-bottom: 0.875rem; - border-bottom: 1px solid bulma.$grey-lighter; + border-bottom: 1px solid css.getVar("grey-lighter"); + + .pagination-previous, + .pagination-next { + border-width: css.getVar("button-border-width"); + } } .datepicker-footer { margin-top: 0.875rem; padding-top: 0.875rem; - border-top: 1px solid bulma.$grey-lighter; + border-top: 1px solid css.getVar("grey-lighter"); } .datepicker-table { display: table; margin: 0 auto 0 auto; - .datepicker-cell { - text-align: center; - vertical-align: middle; - display: table-cell; - border-radius: bulma.$radius; - padding: 0.5rem 0.75rem; - } - + // day name header row .datepicker-header { display: table-header-group; .datepicker-cell { - color: $datepicker-header-color; - font-weight: bulma.$weight-semibold; + color: css.getVar("datepicker-header-color"); + font-weight: css.getVar("weight-semibold"); } } @@ -99,182 +105,176 @@ $datepicker-event-background-color: bulma.$grey-light !default; display: table-row; } - .datepicker-months { - display: inline-flex; - flex-wrap: wrap; - flex-direction: row; - width: 17rem; - + &.has-events { .datepicker-cell { - display: flex; - align-items: center; - justify-content: center; - width: 33.33%; - height: 2.5rem; + padding: 0.3rem 0.75rem 0.75rem; } } + } + } - .datepicker-cell { - &.is-unselectable { - color: $datepicker-item-disabled-color; - } + .datepicker-cell { + text-align: center; + vertical-align: middle; + display: table-cell; + border-radius: css.getVar("radius"); + padding: 0.5rem 0.75rem; - &.is-today { - border: $datepicker-today-border; - } + &.is-unselectable { + color: css.getVar("datepicker-item-disabled-color"); + } - &.is-selectable { - color: $datepicker-item-color; - - &:hover:not(.is-selected):not(.is-first-hovered):not( - .is-last-hovered - ), - &:focus:not(.is-selected):not(.is-first-hovered):not( - .is-last-hovered - ) { - background-color: $datepicker-item-hover-background-color; - color: $datepicker-item-hover-color; - cursor: pointer; - } - - &.is-first-hovered { - background-color: bulma.$grey; - color: bulma.$grey-lighter; - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - - &.is-within-hovered { - background-color: $datepicker-item-hover-background-color; - color: $datepicker-item-hover-color; - border-radius: 0; - } - - &.is-last-hovered { - background-color: bulma.$grey; - color: bulma.$grey-lighter; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } + &.is-today { + border: css.getVar("datepicker-today-border"); + } - &.is-selected:not(.is-first-hovered):not( - .is-within-hovered - ):not(.is-last-hovered) { - background-color: $datepicker-item-selected-background-color; - color: $datepicker-item-selected-color; - - &.is-first-selected:not(.is-first-hovered):not( - .is-within-hovered - ):not(.is-last-hovered) { - background-color: $datepicker-item-selected-background-color; - color: $datepicker-item-selected-color; - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - - &.is-within-selected:not(.is-first-hovered):not( - .is-within-hovered - ):not(.is-last-hovered) { - background-color: rgba( - $datepicker-item-selected-background-color, - 0.5 - ); - border-radius: 0; - } - - &.is-last-selected:not(.is-first-hovered):not( - .is-within-hovered - ):not(.is-last-hovered) { - background-color: $datepicker-item-selected-background-color; - color: $datepicker-item-selected-color; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } + &.is-week-number { + cursor: default; + } - &.is-nearby:not(.is-selected) { - color: bulma.$grey-light; - } + &.is-selectable { + color: css.getVar("datepicker-item-color"); + + &:hover:not(.is-selected):not(.is-first-hovered):not( + .is-last-hovered + ), + &:focus:not(.is-selected):not(.is-first-hovered):not( + .is-last-hovered + ) { + background-color: css.getVar( + "datepicker-item-hover-background-color" + ); + color: css.getVar("datepicker-item-hover-color"); + cursor: pointer; + } - &.is-week-number { - cursor: default; - } + &.is-first-hovered { + background-color: css.getVar("grey"); + color: css.getVar("grey-lighter"); + border-bottom-right-radius: 0; + border-top-right-radius: 0; } - &.has-events { - .datepicker-cell { - padding: 0.3rem 0.75rem 0.75rem; + &.is-within-hovered { + background-color: css.getVar( + "datepicker-item-hover-background-color" + ); + color: css.getVar("datepicker-item-hover-color"); + border-radius: 0; + } - &.has-event { - position: relative; - - .events { - bottom: 0.425rem; - display: flex; - justify-content: center; - left: 0; - padding: 0 0.35rem; - position: absolute; - width: 100%; - - .event { - background-color: $datepicker-event-background-color; - - @each $name, $pair in bulma.$form-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - background-color: $color; - } - } - } - } - - &.dots .event { - border-radius: 50%; - height: 0.35em; - margin: 0 0.1em; - width: 0.35em; - } - - &.bars .event { - height: 0.25em; - width: 100%; - } - } - - &.is-selected { - overflow: hidden; - - .events .event { - // Currently datepicker only uses primary coloring - // Ensure indicator is visible when selected - &.is-primary { - background-color: color.adjust( - bulma.$primary, - $lightness: 15% - ); - } - } - } - } + &.is-last-hovered { + background-color: css.getVar("grey"); + color: css.getVar("grey-lighter"); + border-bottom-left-radius: 0; + border-top-left-radius: 0; } } - } - &.is-small { - @include bulma.control-small; + &.is-selected { + overflow: hidden; + } + + &.is-selected:not(.is-first-hovered):not(.is-within-hovered):not( + .is-last-hovered + ) { + background-color: css.getVar( + "datepicker-item-selected-background-color" + ); + color: css.getVar("datepicker-item-selected-color"); + + &.is-first-selected:not(.is-first-hovered):not( + .is-within-hovered + ):not(.is-last-hovered) { + background-color: css.getVar( + "datepicker-item-selected-background-color" + ); + color: css.getVar("datepicker-item-selected-color"); + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + &.is-within-selected:not(.is-first-hovered):not( + .is-within-hovered + ):not(.is-last-hovered) { + background-color: rgba( + css.getVar("datepicker-item-selected-background-color"), + 0.5 + ); + border-radius: 0; + } + + &.is-last-selected:not(.is-first-hovered):not( + .is-within-hovered + ):not(.is-last-hovered) { + background-color: css.getVar( + "datepicker-item-selected-background-color" + ); + color: css.getVar("datepicker-item-selected-color"); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } + + &.is-nearby:not(.is-selected) { + color: css.getVar("grey-light"); + } + + &.has-event { + position: relative; + } } - &.is-medium { - @include bulma.control-medium; + .events { + bottom: 0.425rem; + display: flex; + justify-content: center; + left: 0; + padding: 0 0.35rem; + position: absolute; + width: 100%; + + .event { + background-color: css.getVar("datepicker-event-background-color"); + + @each $name, $pair in $datepicker-colors { + $color: list.nth($pair, 1); + + &.is-#{$name} { + background-color: $color; + } + } + + &.is-dots { + border-radius: 50%; + height: 0.35em; + margin: 0 0.1em; + width: 0.35em; + } + + &.is-bars { + height: 0.25em; + width: 100%; + } + } } - &.is-large { - @include bulma.control-large; + .datepicker-months { + display: inline-flex; + flex-wrap: wrap; + flex-direction: row; + width: 17rem; + + .datepicker-cell { + display: flex; + align-items: center; + justify-content: center; + width: 33.33%; + height: 2.5rem; + } } - @media screen and (min-width: bulma.$desktop) { + @media screen and (min-width: css.getVar("desktop")) { .footer-horizontal-timepicker { border: none; padding-left: 10px; diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss index 70dede1..1608182 100644 --- a/src/assets/scss/components/_dropdown.scss +++ b/src/assets/scss/components/_dropdown.scss @@ -1,189 +1,196 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/initial-variables" as vars; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$dropdown-mobile-breakpoint: bulma.$desktop !default; -$dropdown-background-color: rgba(bulma.$scheme-invert, 0.86) !default; +$dropdown-mobile-breakpoint: vars.$desktop !default; +$dropdown-background-background-color: hsla( + #{css.getVar("scheme-h")}, + #{css.getVar("scheme-s")}, + #{css.getVar("scheme-invert-l")}, + 0.86 +) !default; $dropdown-disabled-opacity: 0.5 !default; $dropdown-gap: 0px !default; +$dropdown-z: 40 !default; /* @docs */ .dropdown { + @include css.register-vars( + ( + "dropdown-background-background-color": #{$dropdown-background-background-color}, + "dropdown-disabled-opacity": #{$dropdown-disabled-opacity}, + "dropdown-gap": #{$dropdown-gap}, + "dropdown-z": #{$dropdown-z}, + ) + ); + & + .dropdown { margin-left: 0.5em; } .background { - @include bulma.overlay; + @include mixins.overlay; + position: fixed; - background-color: $dropdown-background-color; - z-index: 40; + background-color: css.getVar("dropdown-background-background-color"); + z-index: css.getVar("dropdown-z"); cursor: pointer; - @media screen and (min-width: $dropdown-mobile-breakpoint) { + @include mixins.from($dropdown-mobile-breakpoint) { display: none; } } - &.dropdown-menu-animation { - .dropdown-menu { - display: block; - } - } - - .dropdown-menu { - .dropdown-item { - &.is-disabled { - cursor: not-allowed; + .dropdown-item { + &.is-disabled { + cursor: not-allowed; + opacity: css.getVar("dropdown-disabled-opacity"); - &:hover { - background: inherit; - color: inherit; - } + &:hover { + background: inherit; + color: inherit; } } - .has-link a { - @extend .dropdown-item; - padding-right: 3rem; - white-space: nowrap; - } - } - - &.is-hoverable:not(.is-active) { - .dropdown-menu { - display: none; + &.is-active { + @include css.register-vars( + ( + "dropdown-item-h": css.getVar("primary-h"), + "dropdown-item-s": css.getVar("primary-s"), + "dropdown-item-l": css.getVar("primary-l"), + "dropdown-item-background-l": css.getVar("primary-l"), + "dropdown-item-color-l": css.getVar("primary-invert-l"), + ) + ); } } &.is-hoverable { - &:hover { - .dropdown-menu { - display: block; - } + .background { + display: none; } } - &.is-expanded { - width: 100%; + &.is-disabled { + opacity: css.getVar("dropdown-disabled-opacity"); + cursor: not-allowed; .dropdown-trigger { - width: 100%; - } - - .dropdown-menu { - width: 100%; + pointer-events: none; } + } - &.is-mobile-modal { - .dropdown-menu { - max-width: 100%; - } - } + &.is-inline .dropdown-menu { + position: static; + display: inline-block; + padding: 0; } - &:not(.is-disabled) { - .dropdown-menu { - .dropdown-item { - &.is-disabled { - opacity: $dropdown-disabled-opacity; - } - } - } + // position classes + &.is-top .dropdown-menu { + top: auto; + right: auto; + bottom: calc(100% + css.getVar("dropdown-gap")); + left: 50%; + transform: translateX(-50%); } - .navbar-item { - height: 100%; + &.is-left .dropdown-menu { + top: 50%; + right: calc(100% + css.getVar("dropdown-gap")); + bottom: auto; + left: auto; + transform: translateY(-50%); } - &.is-disabled { - opacity: $dropdown-disabled-opacity; - cursor: not-allowed; + &.is-bottom .dropdown-menu { + top: calc(100% + css.getVar("dropdown-gap")); + left: 50%; + bottom: auto; + right: auto; + transform: translateX(-50%); + } - .dropdown-trigger { - pointer-events: none; - } + &.is-right .dropdown-menu { + top: 50%; + right: auto; + bottom: auto; + left: calc(100% + css.getVar("dropdown-gap")); + transform: translateY(-50%); } - &.is-inline { - .dropdown-menu { - position: static; - display: inline-block; - padding: 0; - } + &.is-top-right .dropdown-menu { + top: auto; + right: 0; + bottom: calc(100% + css.getVar("dropdown-gap")); + left: auto; } - // Bottom right is default - .dropdown-menu { + &.is-top-left .dropdown-menu { top: auto; - bottom: 100%; right: auto; + bottom: calc(100% + css.getVar("dropdown-gap")); left: 0; } - // X Axis - &.is-left, - &.is-bottom-left, - &.is-top-left { - .dropdown-menu { - right: 0; - left: auto; - } + &.is-bottom-right .dropdown-menu { + top: calc(100% + css.getVar("dropdown-gap")); + right: 0; + bottom: auto; + left: auto; } - &.is-top, - &.is-bottom, - &.is-right, - &.is-top-right, - &.is-bottom-right { - .dropdown-menu { - right: auto; - left: 0; - } + &.is-bottom-left .dropdown-menu { + top: calc(100% + css.getVar("dropdown-gap")); + right: auto; + bottom: auto; + left: 0; } - // Y Axis - &.is-bottom, - &.is-right, - &.is-left, - &.is-bottom-left, - &.is-bottom-right { - .dropdown-menu { - bottom: auto; - top: calc(100% + #{$dropdown-gap}); - } - } + &.is-expanded { + width: 100%; - &.is-top, - &.is-top-left, - &.is-top-right { - .dropdown-menu { - top: auto; - bottom: calc(100% + #{$dropdown-gap}); + &.is-mobile-modal .dropdown-menu, + .dropdown-menu, + .dropdown-trigger { + width: 100%; } } - @media screen and (max-width: calc($dropdown-mobile-breakpoint - 1px)) { + @include mixins.until($dropdown-mobile-breakpoint) { &.is-mobile-modal { > .dropdown-menu { - position: fixed !important; + position: fixed; + top: 25%; + left: 50%; + bottom: auto; + right: auto; + transform: translateX(-50%); width: calc(100vw - 40px); max-width: 460px; max-height: calc(100vh - 120px); - top: 25% !important; - left: 50% !important; - bottom: auto !important; - right: auto !important; - transform: translate3d(-50%, -25%, 0); white-space: normal; overflow-y: auto; - z-index: 50 !important; - /* > .dropdown-content { */ + z-index: calc(css.getVar("dropdown-z") + 10); + > .dropdown-item, > .has-link a { padding: 1rem 1.5rem; } - /* } */ } } } + + // polyfills for other stuff + + .dropdown-menu .has-link a { + @extend .dropdown-item; + padding-right: 3rem; + white-space: nowrap; + } + + .navbar-item { + height: 100%; + } } diff --git a/src/assets/scss/components/_form.scss b/src/assets/scss/components/_field.scss similarity index 70% rename from src/assets/scss/components/_form.scss rename to src/assets/scss/components/_field.scss index 26d85e6..e2ab3d8 100644 --- a/src/assets/scss/components/_form.scss +++ b/src/assets/scss/components/_field.scss @@ -1,4 +1,5 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ $floating-in-height: 3.25em !default; @@ -6,26 +7,9 @@ $floating-in-height: 3.25em !default; .field { &.is-grouped { - & > :not(:last-child) { - margin-bottom: 0; - margin-right: 0.75rem; - } - - &.is-grouped-multiline > :not(:last-child) { - margin-bottom: 0.75rem; - } - - .field { - flex-shrink: 0; - - &:not(:last-child) { - margin-right: 0.75rem; - } - - &.is-expanded { - flex-grow: 1; - flex-shrink: 1; - } + .field.is-expanded { + flex-grow: 1; + flex-shrink: 1; } } @@ -78,14 +62,15 @@ $floating-in-height: 3.25em !default; } } } + // Nested control addons (for Autocomplete and Datepicker) &.has-addons .control { &:first-child .control { .button, .input, .select select { - border-bottom-left-radius: bulma.$input-radius; - border-top-left-radius: bulma.$input-radius; + border-bottom-left-radius: css.getVar("input-radius"); + border-top-left-radius: css.getVar("input-radius"); } } @@ -93,8 +78,8 @@ $floating-in-height: 3.25em !default; .button, .input, .select select { - border-bottom-right-radius: bulma.$input-radius; - border-top-right-radius: bulma.$input-radius; + border-bottom-right-radius: css.getVar("input-radius"); + border-top-right-radius: css.getVar("input-radius"); } } @@ -106,41 +91,7 @@ $floating-in-height: 3.25em !default; } } } - // Fix for number input with addons - &.has-addons { - .b-numberinput { - &:not(:first-child) { - .control:first-child { - .button, - .input, - .select select { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - } - } - } - - &:not(:last-child) { - .control:last-child { - .button, - .input, - .select select { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - } - } - } - } - - &.b-numberinput { - .control { - margin-right: unset; - } - } - } -} -.field { &.is-floating-label, &.is-floating-in-label { position: relative; @@ -148,7 +99,7 @@ $floating-in-height: 3.25em !default; .label { position: absolute; left: 1em; - font-size: calc(#{bulma.$size-normal} * 3 / 4); + font-size: calc(css.getVar("size-normal") * 3 / 4); background-color: transparent; z-index: 5; white-space: nowrap; @@ -157,15 +108,15 @@ $floating-in-height: 3.25em !default; overflow: hidden; &.is-small { - font-size: calc(#{bulma.$size-small} * 3 / 4); + font-size: calc(css.getVar("size-small") * 3 / 4); } &.is-medium { - font-size: calc(#{bulma.$size-medium} * 3 / 4); + font-size: calc(css.getVar("size-medium") * 3 / 4); } &.is-large { - font-size: calc(#{bulma.$size-large} * 3 / 4); + font-size: calc(css.getVar("size-large") * 3 / 4); } } @@ -180,12 +131,60 @@ $floating-in-height: 3.25em !default; .button, .input, .select select { - border-bottom-left-radius: bulma.$input-radius; - border-top-left-radius: bulma.$input-radius; + border-bottom-left-radius: css.getVar("input-radius"); + border-top-left-radius: css.getVar("input-radius"); } } } } + + &.has-numberinput { + .label { + margin-left: calc(css.getVar("size-normal") * 3); + } + + &.has-numberinput-is-small { + .label { + margin-left: calc(css.getVar("size-small") * 3); + } + } + + &.has-numberinput-is-medium { + .label { + margin-left: calc(css.getVar("size-medium") * 3); + } + } + + &.has-numberinput-is-large { + .label { + margin-left: calc(css.getVar("size-large") * 3); + } + } + } + + &.has-numberinput-compact { + .label { + margin-left: calc(css.getVar("size-normal") * 2.25); + } + + &.has-numberinput-is-small { + .label { + margin-left: calc(css.getVar("size-small") * 2.25); + } + } + + &.has-numberinput-is-medium { + .label { + margin-left: calc(css.getVar("size-medium") * 2.25); + } + } + + &.has-numberinput-is-large { + .label { + margin-left: calc(css.getVar("size-large") * 2.25); + } + } + } } &.is-floating-label { @@ -202,7 +201,7 @@ $floating-in-height: 3.25em !default; left: 0; right: 0; height: 0.375em; - background-color: bulma.$input-background-color; + background-color: css.getVar("input-background-l"); z-index: -1; } } @@ -234,7 +233,7 @@ $floating-in-height: 3.25em !default; .input { padding-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 ); padding-bottom: 1px; @@ -248,7 +247,7 @@ $floating-in-height: 3.25em !default; select { padding-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 ); padding-bottom: 1px; @@ -262,7 +261,7 @@ $floating-in-height: 3.25em !default; &::after { margin-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 ); } @@ -279,7 +278,7 @@ $floating-in-height: 3.25em !default; // 0.275em - 1px _taginput.scss padding-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 + (0.275em - 1px) ); } @@ -294,7 +293,7 @@ $floating-in-height: 3.25em !default; .is-left.icon { padding-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 ); } @@ -303,7 +302,7 @@ $floating-in-height: 3.25em !default; &.is-loading::after { margin-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 ); } @@ -319,7 +318,7 @@ $floating-in-height: 3.25em !default; select { padding-top: calc( #{$floating-in-height} / 2 - ( - #{bulma.$size-large} * 3 / 4 + css.getVar("size-large") * 3 / 4 ) / 2 ); padding-bottom: 1px; @@ -348,57 +347,6 @@ $floating-in-height: 3.25em !default; } } - &.is-floating-label, - &.is-floating-in-label { - &.has-numberinput { - .label { - margin-left: calc(#{bulma.$size-normal} * 3); - } - - &.has-numberinput-is-small { - .label { - margin-left: calc(#{bulma.$size-small} * 3); - } - } - - &.has-numberinput-is-medium { - .label { - margin-left: calc(#{bulma.$size-medium} * 3); - } - } - - &.has-numberinput-is-large { - .label { - margin-left: calc(#{bulma.$size-large} * 3); - } - } - } - - &.has-numberinput-compact { - .label { - margin-left: calc(#{bulma.$size-normal} * 2.25); - } - - &.has-numberinput-is-small { - .label { - margin-left: calc(#{bulma.$size-small} * 2.25); - } - } - - &.has-numberinput-is-medium { - .label { - margin-left: calc(#{bulma.$size-medium} * 2.25); - } - } - - &.has-numberinput-is-large { - .label { - margin-left: calc(#{bulma.$size-large} * 2.25); - } - } - } - } - &.is-grouped-right, &.has-addons-right { &.is-floating-in-label { @@ -416,25 +364,3 @@ $floating-in-height: 3.25em !default; } } } - -.control { - .help.counter { - float: right; - margin-left: 0.5em; - } - - .icon { - &.is-clickable { - pointer-events: auto; - cursor: pointer; - } - } - // fix Bulma 0.8.2 - &.is-loading::after { - top: calc(50% - (1em / 2)); - - @include bulma.ltr { - right: calc((2.5em / 2) - 0.5em); - } - } -} diff --git a/src/assets/scss/components/_icon.scss b/src/assets/scss/components/_icon.scss index 450eaf4..35829d9 100644 --- a/src/assets/scss/components/_icon.scss +++ b/src/assets/scss/components/_icon.scss @@ -1,3 +1,5 @@ +@use "bulma/sass/utilities/css-variables" as css; + /* @docs */ $icon-spin-duration: 2s !default; /* @docs */ @@ -14,9 +16,17 @@ $icon-spin-duration: 2s !default; } } -.icon.is-spin { - animation-name: icon-spin; - animation-iteration-count: infinite; - animation-timing-function: linear; - animation-duration: $icon-spin-duration; +.icon { + @include css.register-vars( + ( + "icon-spin-duration": #{$icon-spin-duration}, + ) + ); + + &.is-spin { + animation-name: icon-spin; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-duration: css.getVar("icon-spin-duration"); + } } diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss new file mode 100644 index 0000000..61dd5d1 --- /dev/null +++ b/src/assets/scss/components/_input.scss @@ -0,0 +1,3 @@ +.control { + display: inline-block; +} diff --git a/src/assets/scss/components/_loading.scss b/src/assets/scss/components/_loading.scss index 01a0bd6..16ab596 100644 --- a/src/assets/scss/components/_loading.scss +++ b/src/assets/scss/components/_loading.scss @@ -1,40 +1,56 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$loading-background-legacy: #7f7f7f !default; -$loading-background: rgba(255, 255, 255, 0.5) !default; +$loading-background-color: rgba(255, 255, 255, 0.5) !default; $loading-icon-size: 3em !default; -$loading-full-page-icon-size: 5em !default; +$loading-icon-size-full-page: 5em !default; +$loading-z: 29 !default; /* @docs */ .loading { - @include bulma.overlay; + @include css.register-vars( + ( + "loading-background-color": #{$loading-background-color}, + "loading-icon-size": #{$loading-icon-size}, + "loading-z": #{$loading-z}, + ) + ); + + @include mixins.overlay; + align-items: center; justify-content: center; display: flex; overflow: hidden; - z-index: 29; + z-index: css.getVar("loading-z"); &.is-full-page { + @include css.register-vars( + ( + "loading-icon-size": #{$loading-icon-size-full-page}, + ) + ); + position: fixed; z-index: 999; - - .icon { - width: $loading-full-page-icon-size; - height: $loading-full-page-icon-size; - } } .loading-overlay { - @include bulma.overlay; - background: $loading-background-legacy; - background: $loading-background; + @include mixins.overlay; + + background-color: css.getVar("loading-background-color"); } .icon { - animation: spinAround 1s infinite linear; + @include css.register-vars( + ( + "icon-spin-duration": 1s, + ) + ); + position: absolute; - width: $loading-icon-size; - height: $loading-icon-size; + width: css.getVar("loading-icon-size"); + height: css.getVar("loading-icon-size"); } } diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss new file mode 100644 index 0000000..b151f3f --- /dev/null +++ b/src/assets/scss/components/_menu.scss @@ -0,0 +1 @@ +// nothing todo here diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss index 835d9ee..2e60b71 100644 --- a/src/assets/scss/components/_modal.scss +++ b/src/assets/scss/components/_modal.scss @@ -1,28 +1,9 @@ -@use "bulma/bulma"; - .modal { - > .animation-content.is-full-screen, - > .animation-content.is-full-screen > .modal-card { + > .is-full-screen, + > .is-full-screen > .modal-card { width: 100%; height: 100%; max-height: 100vh; margin: 0; - background-color: bulma.$background; - } - - .animation-content { - margin: 0 20px; - - .modal-card { - margin: 0; - } - - @include bulma.mobile { - width: 100%; - } - } - - .modal-content { - width: 100%; } } diff --git a/src/assets/scss/components/_notification.scss b/src/assets/scss/components/_notification.scss index 1311024..6c9303b 100644 --- a/src/assets/scss/components/_notification.scss +++ b/src/assets/scss/components/_notification.scss @@ -1,10 +1,19 @@ +@use "bulma/sass/utilities/css-variables" as css; + /* @docs */ $notification-margin-bottom: 1.5rem !default; $notification-notices-padding: 2em !default; -$notification-notices-zindex: 1000 !default; +$notification-notices-z: 1000 !default; /* @docs */ -.b-notices { +.notices { + @include css.register-vars( + ( + "notification-notices-padding": #{$notification-notices-padding}, + "notification-notices-z": #{$notification-notices-z}, + ) + ); + position: fixed; display: flex; top: 0; @@ -13,10 +22,16 @@ $notification-notices-zindex: 1000 !default; right: 0; overflow: hidden; pointer-events: none; - padding: $notification-notices-padding; - z-index: $notification-notices-zindex; + padding: css.getVar("notification-notices-padding"); + z-index: css.getVar("notification-notices-z"); .notification { + @include css.register-vars( + ( + "notification-margin-bottom": #{$notification-margin-bottom}, + ) + ); + pointer-events: auto; max-width: 600px; @@ -49,7 +64,7 @@ $notification-notices-zindex: 1000 !default; margin-bottom: 0; &:not(:first-child) { - margin-bottom: $notification-margin-bottom; + margin-bottom: css.getVar("notification-margin-bottom"); } } } diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss index 24a86cf..553f462 100644 --- a/src/assets/scss/components/_pagination.scss +++ b/src/assets/scss/components/_pagination.scss @@ -1,10 +1,10 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/css-variables" as css; .pagination { .pagination-next, .pagination-previous { - padding-left: bulma.$pagination-nav-padding-left; - padding-right: bulma.$pagination-nav-padding-right; + padding-left: css.getVar("pagination-nav-padding-left"); + padding-right: css.getVar("pagination-nav-padding-right"); &.is-disabled { pointer-events: none; diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss index cc69bba..93bd206 100644 --- a/src/assets/scss/components/_radio.scss +++ b/src/assets/scss/components/_radio.scss @@ -1,144 +1,125 @@ @use "sass:list"; -@use "bulma/bulma"; + +@use "utils/functions" as fn; @use "utils/variables" as var; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/controls" as controls; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$radio-active-background-color: bulma.$primary !default; +$radio-colors: var.$colors !default; +$radio-active-background-color: css.getVar("primary") !default; +$radio-border-color: css.getVar("grey") !default; $radio-size: 1.25em !default; -$radio-colors: bulma.$form-colors !default; +$radio-shadow: css.getVar("shadow"); /* @docs */ -.b-radio.radio { - @extend %unselectable; - outline: none; - display: inline-flex; - align-items: center; - - &:not(.button) { - margin-right: 0.5em; - - & + .radio:last-child { - margin-right: 0; - } - } +.radio { + @include css.register-vars( + ( + "radio-active-background-color": #{$radio-active-background-color}, + "radio-border-color": #{$radio-border-color}, + "radio-size": #{$radio-size}, + "radio-shadow": #{$radio-shadow}, + ) + ); - // reset Bulma - & + .radio { - margin-left: 0; - } + @include mixins.unselectable; .check { outline: none; appearance: none; // font-size is changed by user agent to lower size font-size: inherit; - width: $radio-size; - height: $radio-size; + width: css.getVar("radio-size"); + height: css.getVar("radio-size"); flex-shrink: 0; border-radius: 50%; - border: 2px solid bulma.$grey; - transition: background var.$speed-slow bulma.$easing; - - &:checked { - border-color: $radio-active-background-color; - } - - &:hover:not(:disabled) { - border-color: $radio-active-background-color; - } - - &:focus { - box-shadow: 0 0 0.5em rgba(bulma.$grey, 0.8); - - &:checked { - box-shadow: 0 0 0.5em rgba($radio-active-background-color, 0.8); - } - } + border: 2px solid css.getVar("radio-border-color"); + transition: background var.$speed-slow css.getVar("easing"); + box-shadow: css.getVar("radio-shadow"); &:before { content: ""; - display: flex; position: absolute; - left: $radio-size * 0.5; - margin-left: calc(-#{$radio-size} * 0.5); - bottom: 50%; - margin-bottom: calc(-#{$radio-size} * 0.5); - width: $radio-size; - height: $radio-size; - transition: transform var.$speed-slow bulma.$easing; + left: calc(css.getVar("radio-size") * 0.55); + top: calc(css.getVar("radio-size") * 0.45); + width: css.getVar("radio-size"); + height: css.getVar("radio-size"); border-radius: 50%; + transition: transform var.$speed-slow css.getVar("easing"); transform: scale(0); - background: $radio-active-background-color; + background: css.getVar("radio-active-background-color"); + } + + &:focus { + box-shadow: css.getVar("active-shadow-size") + hsl(from (css.getVar("radio-border-color") h s l / 80%)); } &:checked { - border-color: $radio-active-background-color; + @include css.register-vars( + ( + "radio-border-color": #{css.getVar( + "radio-active-background-color" + )}, + ) + ); &:before { transform: scale(0.5); } } - &:focus { - box-shadow: 0 0 0.5em rgba(bulma.$grey, 0.8); - - &:checked { - box-shadow: 0 0 0.5em rgba($radio-active-background-color, 0.8); - } + &:hover:not(:disabled) { + @include css.register-vars( + ( + "radio-border-color": #{css.getVar( + "radio-active-background-color" + )}, + ) + ); + border-color: css.getVar("radio-border-color"); } } .control-label { - padding-left: bulma.$control-padding-horizontal; - } - - &.button { - display: flex; - - &.is-selected { - z-index: 1; - } + padding-left: css.getVar("control-padding-horizontal"); } &.is-disabled { opacity: 0.5; } + // sizes + + @include controls.control; + &.is-small { - @include bulma.control-small; + @include controls.control-small; } &.is-medium { - @include bulma.control-medium; + @include controls.control-medium; } &.is-large { - @include bulma.control-large; + @include controls.control-large; } + // variant colors @each $name, $pair in $radio-colors { $color: list.nth($pair, 1); &.is-#{$name} { - .check:before { - background: $color; - - &:hover:not(:disabled) { - border-color: $color; - } - } - - .check:checked { - border-color: $color; - - &:focus { - box-shadow: 0 0 0.5em rgba($color, 0.8); - } - } - - .check:hover:not(:disabled) { - border-color: $color; - } + @include css.register-vars( + ( + "radio-active-background-color": #{$color}, + "radio-checked-background": url(fn.checkmark($color)), + "radio-border-color": #{$color}, + "radio-active-focus-color": #{$color}, + ) + ); } } } diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss index d6c34bc..9ce8ad8 100644 --- a/src/assets/scss/components/_select.scss +++ b/src/assets/scss/components/_select.scss @@ -1,64 +1,38 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/controls" as controls; .select { select { - option { - color: bulma.$grey-dark; - padding: bulma.$control-padding-vertical - bulma.$control-padding-horizontal; + &.is-empty { + color: rgba(css.getVar("grey"), 0.7); } - option:disabled { - cursor: not-allowed; - opacity: 0.5; + &:has(+ .icon) { + padding-right: css.getVar("input-height"); } + } - optgroup { - color: bulma.$grey-light; - font-weight: bulma.$weight-normal; - font-style: normal; - padding: 0.25em 0; + &.has-icons-left { + select { + padding-left: css.getVar("input-height"); } + } - &.is-empty { - color: rgba(bulma.$grey, 0.7); + &.has-icons-right { + select { + padding-right: css.getVar("input-height"); } } -} - -// hack to restore missing Bulma wrapper .control -.select { - display: table; .icon { - color: bulma.$input-icon-color; - height: bulma.$input-height; pointer-events: none; position: absolute; top: 0; - width: bulma.$input-height; - z-index: 4; - } - - &.has-icons-left { - select { - padding-left: bulma.$input-height; - } - - .icon { - &.is-left { - left: 0; - } - } - } - - .has-icons-right { - padding-right: bulma.$input-height; + width: css.getVar("input-height"); + height: css.getVar("input-height"); - .icon { - &.is-right { - right: 0; - } + &.is-right { + right: 0; } } } diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss index 9d97fd7..badb6e1 100644 --- a/src/assets/scss/components/_sidebar.scss +++ b/src/assets/scss/components/_sidebar.scss @@ -1,124 +1,146 @@ @use "sass:list"; -@use "bulma/bulma"; + @use "utils/variables" as var; +@use "bulma/sass/utilities/initial-variables" as vars; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$sidebar-background: bulma.$modal-background-background-color !default; -$sidebar-box-shadow: 5px 0px 13px 3px rgba(bulma.$black, 0.1) !default; +$sidebar-colors: var.$colors !default; +$sidebar-z: 40; +$sidebar-background-background-color: hsla( + #{css.getVar("scheme-h")}, + #{css.getVar("scheme-s")}, + #{css.getVar("scheme-invert-l")}, + 0.86 +) !default; +$sidebar-shadow: css.getVar("shadow"); $sidebar-width: 260px !default; +$sidebar-height: 260px !default; $sidebar-mobile-width: 80px !default; -$sidebar-mobile-breakpoint: bulma.$tablet !default; -$sidebar-colors: bulma.$navbar-colors !default; /* @docs */ -.b-sidebar { +.sidebar { + @include css.register-vars( + ( + "sidebar-z": #{$sidebar-z}, + "sidebar-background-background-color": #{$sidebar-background-background-color}, + "sidebar-shadow": #{$sidebar-shadow}, + "sidebar-width": #{$sidebar-width}, + "sidebar-height": #{$sidebar-height}, + "sidebar-mobile-width": #{$sidebar-mobile-width}, + ) + ); + .sidebar-content { - background-color: bulma.$background; - box-shadow: $sidebar-box-shadow; - width: $sidebar-width; - z-index: 39; + background-color: css.getVar("background"); + box-shadow: css.getVar("sidebar-shadow"); + width: css.getVar("sidebar-width"); + height: css.getVar("sidebar-height"); + position: fixed; + transition: width var.$speed-slow css.getVar("easing"); + z-index: css.getVar("sidebar-z"); @each $name, $pair in $sidebar-colors { $color: list.nth($pair, 1); + &.is-#{$name} { - background-color: $color; + @include css.register-vars( + ( + "sidebar-background-background-color": #{$color}, + ) + ); } } - &.is-fixed { - position: fixed; - left: 0; - top: 0; - - &.is-right { - left: auto; - right: 0; - } - } + &.is-left { + @include css.register-vars( + ( + "sidebar-height": 100%, + ) + ); - &.is-absolute { - position: absolute; - left: 0; top: 0; - - &.is-right { - left: auto; - right: 0; - } + left: 0; + bottom: 0; } - &.is-mini { - width: $sidebar-mobile-width; + &.is-right { + @include css.register-vars( + ( + "sidebar-height": 100%, + ) + ); - &.is-mini-expand:hover:not(.is-mini-delayed) { - transition: width var.$speed-slow bulma.$easing; + top: 0; + right: 0; + bottom: 0; + } - &:not(.is-fullwidth) { - width: $sidebar-width; + &.is-top { + @include css.register-vars( + ( + "sidebar-width": 100%, + ) + ); - &.is-mini-expand-fixed { - position: fixed; - } - } - } + top: 0; + right: 0; + left: 0; } - &.is-static { - position: static; - } + &.is-bottom { + @include css.register-vars( + ( + "sidebar-width": 100%, + ) + ); - &.is-absolute, - &.is-static { - transition: width var.$speed-slow bulma.$easing; + right: 0; + left: 0; + bottom: 0; } &.is-fullwidth { - width: 100%; - max-width: 100%; + @include css.register-vars( + ( + "sidebar-width": 100%, + ) + ); } &.is-fullheight { - height: 100%; - max-height: 100%; - overflow: hidden; - overflow-y: auto; - display: flex; - flex-direction: column; - align-content: stretch; + @include css.register-vars( + ( + "sidebar-height": 100%, + ) + ); } - @media screen and (max-width: calc($sidebar-mobile-breakpoint - 1px)) { - &.is-mini-mobile { - width: $sidebar-mobile-width; - - &.is-mini-expand:hover { - &:not(.is-fullwidth-mobile) { - width: $sidebar-width; - - &.is-mini-expand-fixed { - position: fixed; - } - } - } - } - - &.is-hidden-mobile { - width: 0; - height: 0; - overflow: hidden; - } + &.is-mini { + width: css.getVar("sidebar-mobile-width"); - &.is-fullwidth-mobile { - width: 100%; - max-width: 100%; + &.is-expanded:hover:not(.is-fullwidth) { + width: css.getVar("sidebar-width"); } } } .sidebar-background { - @include bulma.overlay; - background: $sidebar-background; + @include mixins.overlay; + position: fixed; - z-index: 38; + background-color: css.getVar("sidebar-background-background-color"); + z-index: css.getVar("sidebar-z"); + } + + &.is-inline .sidebar-content { + @include css.register-vars( + ( + "sidebar-z": 0, + ) + ); + + position: relative; } } diff --git a/src/assets/scss/components/_skeleton.scss b/src/assets/scss/components/_skeleton.scss index b348290..a4ef55d 100644 --- a/src/assets/scss/components/_skeleton.scss +++ b/src/assets/scss/components/_skeleton.scss @@ -1,54 +1,76 @@ -@use "bulma/bulma"; +@use "utils/variables" as var; +@use "bulma/sass/utilities/css-variables" as css; /* @docs */ -$skeleton-color: bulma.$grey-lighter !default; -$skeleton-background: linear-gradient( - 90deg, - $skeleton-color 25%, - rgba($skeleton-color, 0.5) 50%, - $skeleton-color 75% -) !default; -$skeleton-border-radius: bulma.$radius !default; +$skeleton-border-radius: css.getVar("radius") !default; $skeleton-duration: 1.5s !default; $skeleton-margin-top: 0.5rem !default; /* @docs */ -.b-skeleton { - @mixin steps-size($size) { - > .b-skeleton-item { - line-height: $size; - } - } +/* @bulma docs */ +// --bulma-skeleton-background: var(--bulma-border); +// --bulma-skeleton-radius: var(--bulma-radius-small); +// --bulma-skeleton-block-min-height: 4.5em; +// --bulma-skeleton-lines-gap: 0.75em; +// --bulma-skeleton-line-height: 0.75em; +/* @bulma docs */ + +.skeleton { + @include css.register-vars( + ( + "skeleton-border-radius": #{$skeleton-border-radius}, + "skeleton-duration": #{$skeleton-duration}, + "skeleton-margin-top": #{$skeleton-margin-top}, + ) + ); display: inline-flex; flex-direction: column; vertical-align: middle; width: 100%; - > .b-skeleton-item { - background: $skeleton-background; - background-size: 400% 100%; + > .skeleton-block { + @include css.register-vars( + ( + "skeleton-block-min-height": 1rem, + ) + ); + line-height: css.getVar("skeleton-block-min-height"); + animation-duration: css.getVar("skeleton-duration"); width: 100%; &.is-rounded { - border-radius: $skeleton-border-radius; + border-radius: css.getVar("skeleton-border-radius"); } &::after { content: "\00a0"; } - + .b-skeleton-item { - margin-top: $skeleton-margin-top; + + .skeleton-item { + margin-top: css.getVar("skeleton-margin-top"); + } + + &:not(.is-animated) { + animation-iteration-count: unset; } - } - &.is-animated { - > .b-skeleton-item { - animation: skeleton-loading $skeleton-duration infinite; + // sizes + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + @include css.register-vars( + ( + "skeleton-block-min-height": $value, + ) + ); + } } } + &.is-left { + align-items: flex-start; + } + &.is-centered { align-items: center; } @@ -57,31 +79,7 @@ $skeleton-margin-top: 0.5rem !default; align-items: flex-end; } - + .b-skeleton { - margin-top: $skeleton-margin-top; - } - - @include steps-size(bulma.$size-normal); - - &.is-small { - @include steps-size(bulma.$size-small); - } - - &.is-medium { - @include steps-size(bulma.$size-medium); - } - - &.is-large { - @include steps-size(bulma.$size-large); - } -} - -@keyframes skeleton-loading { - 0% { - background-position: 100% 50%; - } - - 100% { - background-position: 0 50%; + + .skeleton { + margin-top: css.getVar("skeleton-margin-top"); } } diff --git a/src/assets/scss/components/_slider.scss b/src/assets/scss/components/_slider.scss index fda93f8..2883c9c 100644 --- a/src/assets/scss/components/_slider.scss +++ b/src/assets/scss/components/_slider.scss @@ -1,111 +1,110 @@ @use "sass:list"; -@use "bulma/bulma"; + +@use "utils/variables" as var; +@use "bulma/sass/utilities/css-variables" as css; /* @docs */ -$slider-radius: bulma.$radius !default; -$slider-track-background: bulma.$grey-lighter !default; -$slider-fill-background: bulma.$primary !default; -$slider-track-radius: bulma.$radius !default; -$slider-track-border: 0px solid bulma.$grey !default; -$slider-track-shadow: 0px 0px 0px bulma.$grey !default; -$slider-thumb-background: bulma.$scheme-main !default; -$slider-thumb-radius: bulma.$radius !default; -$slider-thumb-border: 1px solid bulma.$grey-light !default; +$slider-colors: var.$colors !default; +$slider-radius: css.getVar("radius") !default; +$slider-background: css.getVar("grey-lighter") !default; +$slider-color: css.getVar("primary") !default; +$slider-track-border: 0px solid css.getVar("grey") !default; +$slider-track-shadow: 0px 0px 0px css.getVar("grey") !default; +$slider-thumb-background: css.getVar("scheme-main") !default; +$slider-thumb-radius: css.getVar("radius") !default; +$slider-thumb-border: 1px solid css.getVar("grey-light") !default; $slider-thumb-shadow: none !default; $slider-thumb-to-track-ratio: 2 !default; $slider-tick-to-track-ratio: 0.5 !default; $slider-tick-width: 3px !default; -$slider-tick-radius: bulma.$radius !default; -$slider-tick-background: bulma.$grey-light !default; -$slider-mark-size: 0.75rem !default; -$slider-colors: bulma.$colors !default; +$slider-tick-radius: css.getVar("radius") !default; +$slider-tick-background: css.getVar("grey-light") !default; +$slider-tick-label-size: 0.75rem !default; /* @docs */ -@mixin slider-size($size) { - $track-height: calc($size / $slider-thumb-to-track-ratio); - $tick-height: calc( - $size / $slider-thumb-to-track-ratio * $slider-tick-to-track-ratio +.slider { + @include css.register-vars( + ( + "slider-size": 1rem, + "slider-color": #{$slider-color}, + "slider-radius": #{$slider-radius}, + "slider-background": #{$slider-background}, + "slider-track-border": #{$slider-track-border}, + "slider-track-shadow": #{$slider-track-shadow}, + "slider-thumb-background": #{$slider-thumb-background}, + "slider-thumb-radius": #{$slider-thumb-radius}, + "slider-thumb-border": #{$slider-thumb-border}, + "slider-thumb-shadow": #{$slider-thumb-shadow}, + "slider-thumb-to-track-ratio": #{$slider-thumb-to-track-ratio}, + "slider-tick-width": #{$slider-tick-width}, + "slider-tick-radius": #{$slider-tick-radius}, + "slider-tick-background": #{$slider-tick-background}, + "slider-tick-to-track-ratio": #{$slider-tick-to-track-ratio}, + "slider-tick-label-size": #{$slider-tick-label-size}, + ) ); - $thumb-size: $size; - - .b-slider-track { - height: $track-height; - } - - .b-slider-thumb { - height: $thumb-size; - width: $thumb-size; - } - .b-slider-tick { - height: $tick-height; - } - - .b-slider-tick-label { - font-size: $slider-mark-size; - position: absolute; - top: calc(#{$track-height} / 2 + 2px); - left: 50%; - transform: translateX(-50%); - } -} - -.b-slider { margin: 1em 0; - background: transparent; width: 100%; - .b-slider-track { + .slider-track { display: flex; align-items: center; position: relative; cursor: pointer; - background: $slider-track-background; - border-radius: $slider-radius; + background: css.getVar("slider-background"); + border-radius: css.getVar("slider-radius"); + height: calc( + css.getVar("slider-size") / + css.getVar("slider-thumb-to-track-ratio") + ); } - .b-slider-fill { + .slider-fill { position: absolute; height: 100%; - box-shadow: $slider-track-shadow; - background: $slider-fill-background; - border-radius: $slider-track-radius; - border: $slider-track-border; - // Fix alignment in IE 11. Cancel out for others - top: 50%; - transform: translateY(-50%); + background: css.getVar("slider-color"); + border-radius: css.getVar("slider-radius"); + border: css.getVar("slider-track-border"); + box-shadow: css.getVar("slider-track-shadow"); } - .b-slider-thumb-wrapper { + .slider-thumb-wrapper { display: inline-flex; align-items: center; position: absolute; cursor: grab; transform: translate(-50%, -50%); top: 50%; - flex-direction: column; // Fix shrinked thumb at the end in IE 11 + flex-direction: column; - .b-slider-thumb { - box-shadow: $slider-thumb-shadow; - border: $slider-thumb-border; - border-radius: $slider-thumb-radius; - background: $slider-thumb-background; + .slider-thumb { + height: css.getVar("slider-size"); + width: css.getVar("slider-size"); + box-shadow: css.getVar("slider-thumb-shadow"); + border: css.getVar("slider-thumb-border"); + border-radius: css.getVar("slider-thumb-radius"); + background: css.getVar("slider-thumb-background"); &:focus { transform: scale(1.25); } + + &.is-rounded { + border-radius: css.getVar("radius-rounded"); + } } &.is-dragging { cursor: grabbing; - .b-slider-thumb { + .slider-thumb { transform: scale(1.25); } } &.has-indicator { - .b-slider-thumb { + .slider-thumb { padding: 16px 10px; display: flex; align-items: center; @@ -122,60 +121,73 @@ $slider-colors: bulma.$colors !default; cursor: pointer; } - &.is-rounded { - .b-slider-thumb { - border-radius: bulma.$radius-rounded; - } - } - &.is-disabled { - .b-slider-track { + .slider-track { cursor: not-allowed; opacity: 0.5; } - .b-slider-thumb-wrapper { + .slider-thumb-wrapper { cursor: not-allowed; - .b-slider-thumb { + .slider-thumb { transform: scale(1); } } } - @include slider-size(bulma.$size-normal); - - &.is-small { - @include slider-size(bulma.$size-small); - } - - &.is-medium { - @include slider-size(bulma.$size-medium); - } - - &.is-large { - @include slider-size(bulma.$size-large); + // sizes + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + @include css.register-vars( + ( + "slider-size": $value, + ) + ); + } } + // color variants @each $name, $pair in $slider-colors { $color: list.nth($pair, 1); - &.is-#{$name} { - .b-slider-fill { - background: $color !important; - } + + .is-#{$name} { + @include css.register-vars( + ( + "slider-color": #{$color}, + ) + ); } } - .b-slider-tick { + .slider-tick { position: absolute; - width: $slider-tick-width; - transform: translate(-50%, -50%); - top: 50%; - background: $slider-tick-background; - border-radius: $slider-tick-radius; + width: css.getVar("slider-tick-width"); + transform: translateX(-50%); + height: calc( + css.getVar("slider-size") / + css.getVar("slider-thumb-to-track-ratio") * + css.getVar("slider-tick-to-track-ratio") + ); + background: css.getVar("slider-tick-background"); + border-radius: css.getVar("slider-tick-radius"); &.is-tick-hidden { background: transparent; } + + .slider-tick-label { + font-size: css.getVar("slider-tick-label-size"); + position: absolute; + top: calc( + ( + css.getVar("slider-size") / + css.getVar("slider-thumb-to-track-ratio") * + css.getVar("slider-tick-to-track-ratio") + ) / 2 + 2px + ); + left: 50%; + transform: translateX(-50%); + } } } diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss index 8bc2452..90f4d15 100644 --- a/src/assets/scss/components/_steps.scss +++ b/src/assets/scss/components/_steps.scss @@ -1,540 +1,403 @@ -/* -This project is based on -"bulma-steps" (https://github.com/Wikiki/bulma-steps) by -Wikiki (https://github.com/Wikiki) licensed under -MIT (https://github.com/Wikiki/bulma-steps/blob/master/LICENSE) -*/ - @use "sass:list"; -@use "bulma/bulma"; + @use "utils/variables" as var; +@use "bulma/sass/utilities/initial-variables" as vars; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$steps-items-focused-outline: none !default; -$steps-details-background-color: bulma.$body-background-color !default; -$steps-maker-default-color: bulma.$grey-light !default; -$steps-marker-default-border: 0.2em solid #fff !default; -$steps-default-color: bulma.$grey-lighter !default; -$steps-previous-color: bulma.$primary !default; -$steps-active-color: bulma.$primary !default; +$steps-colors: var.$colors !default; +$steps-mobile-breakpoint: vars.$tablet !default; +$steps-marker-background: css.getVar("grey-light") !default; +$steps-marker-color: css.getVar("scheme-main") !default; +$steps-marker-border: 0.2em solid css.getVar("white") !default; +$steps-default-color: css.getVar("grey-lighter") !default; +$steps-previous-color: css.getVar("scheme-main") !default; +$steps-previous-background: css.getVar("primary") !default; +$steps-active-color: css.getVar("primary") !default; +$steps-active-background: css.getVar("scheme-main") !default; $steps-divider-height: 0.2em !default; +$steps-details-background-color: css.getVar("body-background-color") !default; $steps-vertical-padding: 1em 0 !default; -$steps-mobile-max-width: bulma.$tablet !default; -$steps-colors: bulma.$colors !default; /* @docs */ -@mixin steps-size($size) { +.steps-wrapper { .steps { - font-size: $size; - min-height: $size * 2; - list-style: none; - - /* .step-items { */ - .step-item { - .step-marker { - height: $size * 2; - width: $size * 2; - - .icon { - *, - *:before { - font-size: $size; - } - } - } + @include css.register-vars( + ( + "steps-size": #{var.$size-normal}, + "steps-divider-height": #{$steps-divider-height}, + "steps-details-background-color": #{$steps-details-background-color}, + ) + ); - /* .step-details { */ - .step-title { - /* .step-title { */ - font-size: $size * 1.2; - font-weight: bulma.$weight-semibold; - line-height: $size; - /* } */ - } - - &:not(:first-child), - &:only-child { - &::before { - height: $steps-divider-height; - top: calc(#{$size} - (#{$steps-divider-height} / 2)); - } - } - - &:only-child { - &::after { - top: #{$size}; - } - } + display: flex; + flex-wrap: wrap; + font-size: css.getVar("steps-size"); + min-height: calc(css.getVar("steps-size") * 2); + list-style: none; - @include bulma.until($steps-mobile-max-width) { - &::before, - &::after, - &:not(:first-child)::before { - top: #{$size}; - } + // sizes + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + @include css.register-vars( + ( + "steps-size": #{$value}, + ) + ); } } - /* } */ - } - &.is-vertical { - > .steps { - &.has-label-right { - /* .step-items { */ - .step-item { - &:not(:first-child), - &:only-child { - &::before, - &::after { - left: calc( - #{$size} - #{$steps-divider-height * 0.5} - ); - } - } - } - /* } */ - } - - &.has-label-left { - /* .step-items { */ - .step-item { - &:not(:first-child), - &:only-child { - &::before, - &::after { - left: auto; - right: calc( - #{$size} - #{$steps-divider-height * 0.5} - ); - } + &.is-animated { + .step-item { + &:not(:first-child), + &:only-child { + &::before { + transition: background var.$speed-slow + css.getVar("easing"); } } - /* } */ } } - &.is-right { - > .steps { - &.has-label-right { - /* .step-items { */ - .step-item { - &:not(:first-child), - &:only-child { - &::before, - &::after { - left: calc( - #{$size} - #{$steps-divider-height * 0.5} - ); - } - } - } - /* } */ - } - - &.has-label-left { - /* .step-items { */ - .step-item { - &:not(:first-child), - &:only-child { - &::before, - &::after { - left: auto; - right: calc( - #{$size} - #{$steps-divider-height * 0.5} - ); - } - } - } - /* } */ - } + &.has-label-right, + &.has-label-left { + .step-title { + background-color: css.getVar("steps-details-background-color"); + padding: 0.2em; } } - } -} - -.b-steps { - .steps { - /* .step-items { */ - display: flex; - flex-wrap: wrap; - - .step-item { - margin-top: 0; - position: relative; - flex-grow: 1; - flex-basis: 1em; - display: flex; - justify-content: center; - align-items: center; + &.has-label-right { .step-link { - background: none; - border: none; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - color: bulma.$body-color; - font-size: inherit; - line-height: inherit; - padding: 0; - - &:not(.is-clickable) { - cursor: not-allowed; - } - } - - .step-marker { - align-items: center; - display: flex; - border-radius: bulma.$radius; - font-weight: bulma.$weight-bold; - justify-content: center; - background: $steps-maker-default-color; - color: bulma.$scheme-main; - border: $steps-marker-default-border; - z-index: 1; - overflow: hidden; - } - - // Override marker color per step - @each $name, $pair in $steps-colors { - $color: list.nth($pair, 1); - $color-invert: list.nth($pair, 2); - - &.is-#{$name} { - &::before, - &::after { - background: linear-gradient( - to left, - $steps-default-color 50%, - $color 50% - ); - background-size: 200% 100%; - background-position: right bottom; - } - - &.is-active { - .step-marker { - background-color: bulma.$scheme-main; - border-color: $color; - color: $color; - } - - &::before, - &::after { - background-position: left bottom; - } - } - - &.is-previous { - .step-marker { - color: $color-invert; - background-color: $color; - } - - &::before, - &::after { - background-position: left bottom; - } - } - } + flex-direction: row; } + } - .step-marker { - color: bulma.$scheme-main; + &.has-label-left { + .step-link { + flex-direction: row-reverse; } + } + } - /* .step-details { */ - .step-title { - text-align: center; - z-index: 1; - } + .step-item { + @include css.register-vars( + ( + "steps-default-color": #{$steps-default-color}, + "steps-active-color": #{$steps-active-color}, + "steps-active-background": #{$steps-active-background}, + "steps-previous-color": #{$steps-previous-color}, + "steps-previous-background": #{$steps-previous-background}, + "steps-marker-background": #{$steps-marker-background}, + "steps-marker-color": #{$steps-marker-color}, + "steps-marker-border": #{$steps-marker-border}, + "steps-marker-border-color": #fff, + ) + ); + + margin-top: 0; + position: relative; + flex-grow: 1; + flex-basis: 1em; + display: flex; + justify-content: center; + align-items: center; + + &::before, + &::after { + background: linear-gradient( + to left, + css.getVar("steps-default-color") 50%, + css.getVar("steps-active-color") 50% + ); + background-size: 200% 100%; + background-position: right bottom; + } - &:not(:first-child), - &:only-child { - flex-shrink: 1; + &:not(:first-child), + &:only-child { + flex-shrink: 1; - &::before { - // This will contain the divider - content: " "; - display: block; - position: absolute; - width: 100%; - bottom: 0; - - @include bulma.ltr { - left: -50%; - } - @include bulma.rtl { - left: 50%; - } - } - } + &::before { + // This will contain the divider + content: " "; + display: block; + position: absolute; + width: 100%; + bottom: 0; + height: css.getVar("steps-divider-height"); + top: calc( + css.getVar("steps-size") - + (css.getVar("steps-divider-height") / 2) + ); - &:only-child { - &::after { - // This will contain the divider - content: " "; - display: block; - position: absolute; - height: $steps-divider-height; - bottom: 0; + @include mixins.ltr { + left: -50%; } - - &::before, - &::after { - width: 25%; + @include mixins.rtl { left: 50%; } - - &::before { - right: 50%; - left: auto; - } } + } - &::before, + &:only-child { &::after { - background: linear-gradient( - to left, - $steps-default-color 50%, - $steps-active-color 50% - ); - background-size: 200% 100%; - background-position: right bottom; + // This will contain the divider + content: " "; + display: block; + position: absolute; + height: css.getVar("steps-divider-height"); + bottom: 0; + top: css.getVar("steps-size"); } - &.is-active { - .step-link { - cursor: default; - } - - .step-marker { - background-color: bulma.$scheme-main; - border-color: $steps-active-color; - color: $steps-active-color; - } - - &::before, - &::after { - background-position: left bottom; - } + &::before, + &::after { + width: 25%; + left: 50%; } - &.is-previous { - .step-marker { - color: bulma.$scheme-main; - background-color: $steps-previous-color; - } - - &::before, - &::after { - background-position: left bottom; - } + &::before { + right: 50%; + left: auto; } } - /* } */ - + .step-content { - position: relative; - overflow: visible; - display: flex; - flex-direction: column; - padding: 1rem; + &.is-active { + @include css.register-vars( + ( + "steps-marker-color": css.getVar("steps-active-color"), + "steps-marker-background": + css.getVar("steps-active-background"), + "steps-marker-border-color": + css.getVar("steps-active-color"), + ) + ); - .step-item { - flex-shrink: 0; - flex-basis: auto; - - &:focus { - outline: $steps-items-focused-outline; - } + .step-link { + cursor: default; } + } - &.is-transitioning { - overflow: hidden; - } + &.is-previous { + @include css.register-vars( + ( + "steps-marker-color": css.getVar("steps-previous-color"), + "steps-marker-background": + css.getVar("steps-previous-background"), + ) + ); } - &.is-rounded { - .step-item { - .step-marker { - border-radius: bulma.$radius-rounded; - } + &.is-previous, + &.is-active { + &::before, + &::after { + background-position: left bottom; } } - &.is-animated { - .step-item { - &:not(:first-child), - &:only-child { - &::before { - transition: background var.$speed-slow bulma.$easing; - } - } + // Override marker color per step + @each $name, $pair in $steps-colors { + $color: list.nth($pair, 1); + $color-invert: if( + list.length($pair) >= 2, + list.nth($pair, 2), + css.getVar("scheme-main") + ); + + &.is-#{$name} { + @include css.register-vars( + ( + "steps-active-color": $color, + "steps-previous-color": $color-invert, + "steps-previous-background": $color, + ) + ); } } + } - &.has-label-right, - &.has-label-left { - /* .step-items { */ - .step-item { - .step-link { - flex-direction: row; + .step-link { + background: none; + border: none; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } - > /* .step-details { */ .step-title { - background-color: $steps-details-background-color; - padding: 0.2em; - } - } + .step-marker { + align-items: center; + display: flex; + justify-content: center; + border-radius: css.getVar("radius"); + font-weight: css.getVar("weight-bold"); + color: css.getVar("steps-marker-color"); + background: css.getVar("steps-marker-background"); + border: css.getVar("steps-marker-border"); + border-color: css.getVar("steps-marker-border-color"); + z-index: 1; + overflow: hidden; + + height: calc(css.getVar("steps-size") * 2); + width: calc(css.getVar("steps-size") * 2); + + .icon { + *, + *:before { + font-size: css.getVar("steps-size"); } - /* } */ } - &.has-label-left { - /* .step-items { */ - .step-item { - .step-link { - flex-direction: row-reverse; - } - } - /* } */ + &.is-rounded { + border-radius: css.getVar("radius-rounded"); } } - @include steps-size(bulma.$size-normal); - - &.is-small { - @include steps-size(bulma.$size-small); + .step-title { + text-align: center; + font-size: calc(css.getVar("steps-size") * 1.2); + font-weight: css.getVar("weight-semibold"); + line-height: css.getVar("steps-size"); + z-index: 1; } - &.is-medium { - @include steps-size(bulma.$size-medium); - } + .step-content { + position: relative; + overflow: visible; + display: flex; + flex-direction: column; + padding: 1rem; + + &.is-transitioning { + overflow: hidden; + } - &.is-large { - @include steps-size(bulma.$size-large); + .step-content-item { + flex-shrink: 0; + flex-basis: auto; + text-align: center; + } } &.is-vertical { + @include css.register-vars( + ( + "steps-vertical-padding": #{$steps-vertical-padding}, + ) + ); + display: flex; flex-direction: row; flex-wrap: wrap; - > .steps { - /* .step-items { */ + .steps { height: 100%; flex-direction: column; - border-bottom-color: transparent; - .step-item { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - padding: $steps-vertical-padding; - - &::before, - &::after { - background: linear-gradient( - to top, - $steps-default-color 50%, - $steps-active-color 50% - ); - background-size: 100% 200%; - background-position: left bottom; - } - - // Override marker connector color per step - @each $name, $pair in $steps-colors { - $color: list.nth($pair, 1); + &.has-label-right { + .step-item { + justify-content: flex-start; - &.is-#{$name} { + &:not(:first-child), + &:only-child { &::before, &::after { - background: linear-gradient( - to top, - $steps-default-color 50%, - $color 50% + left: calc( + css.getVar("steps-size") - + (css.getVar("steps-divider-height") * 0.5) ); - background-size: 100% 200%; - background-position: left bottom; } } } + } - &:not(:first-child), - &:only-child { - &::before { - height: 100%; - width: $steps-divider-height; - top: -50%; - left: calc(50% - #{$steps-divider-height * 0.5}); + &.has-label-left { + .step-item { + justify-content: flex-end; + + &:not(:first-child), + &:only-child { + &::before, + &::after { + left: auto; + right: calc( + css.getVar("steps-size") - + (css.getVar("steps-divider-height") * 0.5) + ); + } } } + } - &.is-active, - &.is-previous { - &::before, - &::after { - background-position: right top; - } + &:not(.has-label-right):not(.has-label-left) { + .step-title { + background-color: css.getVar( + "steps-details-background-color" + ); } + } + } - &:only-child { - &::before { - top: 50%; - } + .step-item { + padding: css.getVar("steps-vertical-padding"); - &::after { - width: $steps-divider-height; - top: auto; - bottom: 50%; - } + &::before, + &::after { + background: linear-gradient( + to top, + css.getVar("steps-default-color") 50%, + css.getVar("steps-active-color") 50% + ); + background-size: 100% 200%; + background-position: left bottom; + } - &::before, - &::after { - height: 25%; - } + &:not(:first-child), + &:only-child { + &::before { + height: 100%; + width: css.getVar("steps-divider-height"); + top: -50%; + left: calc( + 50% - (css.getVar("steps-divider-height") * 0.5) + ); } } - /* } */ - &.has-label-right { - /* .step-items { */ - .step-item { - justify-content: flex-start; + &:only-child { + &::before { + top: 50%; } - /* } */ - } - &.has-label-left { - /* .step-items { */ - .step-item { - justify-content: flex-end; + &::after { + width: css.getVar("steps-divider-height"); + top: auto; + bottom: 50%; + } + + &::before, + &::after { + height: 25%; } - /* } */ } - &:not(.has-label-right):not(.has-label-left) { - /* .step-items { */ - .step-item { - .step-link { - > /* .step-details { */ .step-title { - background-color: $steps-details-background-color; - } - } + &.is-active, + &.is-previous { + &::before, + &::after { + background-position: right top; } - /* } */ } } - > .step-content { + .step-content { flex-grow: 1; } - > .step-navigation { + .step-navigation { flex-basis: 100%; } @@ -543,49 +406,31 @@ $steps-colors: bulma.$colors !default; } } - &:not(.is-vertical) { - .steps { - @include bulma.until($steps-mobile-max-width) { - &.mobile-minimalist { - /* .step-items { */ - .step-item { - &:not(.is-active) { - display: none; - } - - &::before, - &::after, - &:not(:first-child)::before { - // This will contain the divider - content: " "; - display: block; - position: absolute; - height: $steps-divider-height; - width: 25%; - bottom: 0; - left: 50%; - } + @include mixins.until($steps-mobile-breakpoint) { + &:not(.is-vertical) { + .step-item { + &:not(.is-active) { + display: none; + } - &::before, - &:not(:first-child)::before { - right: 50%; - left: auto; - } - } - /* } */ + &::before, + &::after, + &:not(:first-child)::before { + // This will contain the divider + content: " "; + display: block; + position: absolute; + height: css.getVar("steps-divider-height"); + width: 25%; + top: css.getVar("steps-size"); + bottom: 0; + left: 50%; } - &.mobile-compact { - /* .step-items { */ - .step-item { - &:not(.is-active) { - /* .step-details { */ - .step-title { - display: none; - } - } - } - /* } */ + &::before, + &:not(:first-child)::before { + right: 50%; + left: auto; } } } diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss index 9305874..6809bb7 100644 --- a/src/assets/scss/components/_switch.scss +++ b/src/assets/scss/components/_switch.scss @@ -1,25 +1,80 @@ @use "sass:list"; -@use "bulma/bulma"; + +@use "utils/functions" as fn; @use "utils/variables" as var; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/controls" as controls; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ -$switch-width-number: 2.75 !default; -$switch-width: $switch-width-number * 1em !default; +$switch-colors: var.$colors !default; +$switch-width: 2.75em !default; $switch-padding: 0.2em !default; -$switch-active-background-color: bulma.$primary !default; -$switch-colors: bulma.$form-colors !default; +$switch-background-color: css.getVar("grey-light") !default; +$switch-active-background-color: css.getVar("primary") !default; +$switch-shadow: css.getVar("shadow"); /* @docs */ .switch { - @extend %unselectable; + @include css.register-vars( + ( + "switch-width": #{$switch-width}, + "switch-padding": #{$switch-padding}, + "switch-active-background-color": #{$switch-active-background-color}, + "switch-background-color": #{$switch-background-color}, + "switch-shadow": #{$switch-shadow}, + ) + ); + + @include mixins.unselectable; + cursor: pointer; - display: inline-flex; - align-items: center; - position: relative; - margin-right: 0.5em; - & + .switch:last-child { - margin-right: 0; + .check { + display: flex; + align-items: center; + flex-shrink: 0; + width: css.getVar("switch-width"); + height: calc( + css.getVar("switch-width") * 0.5 + css.getVar("switch-padding") + ); + padding: css.getVar("switch-padding"); + background: css.getVar("switch-background-color"); + border-radius: css.getVar("radius"); + transition: + background var.$speed-slow css.getVar("easing"), + box-shadow var.$speed-slow css.getVar("easing"); + box-shadow: css.getVar("switch-shadow"); + + &:before { + content: ""; + display: block; + border-radius: css.getVar("radius"); + width: calc( + /* stylelint-disable-next-line scss/operator-no-newline-after */ + ( + css.getVar("switch-width") - css.getVar( + "switch-padding" + ) * 2 + ) / 2 + ); + height: calc( + /* stylelint-disable-next-line scss/operator-no-newline-after */ + ( + css.getVar("switch-width") - css.getVar( + "switch-padding" + ) * 2 + ) * 0.5 + ); + background: css.getVar("background"); + box-shadow: + 0 3px 1px 0 rgba(0, 0, 0, 0.05), + 0 2px 2px 0 rgba(0, 0, 0, 0.1), + 0 3px 3px 0 rgba(0, 0, 0, 0.05); + transition: transform var.$speed-slow css.getVar("easing"); + will-change: transform; + transform-origin: left; + } } input[type="checkbox"] { @@ -29,71 +84,12 @@ $switch-colors: bulma.$form-colors !default; outline: none; z-index: -1; - + .check { - display: flex; - align-items: center; - flex-shrink: 0; - width: $switch-width; - height: #{$switch-width * 0.5 + $switch-padding}; - padding: $switch-padding; - background: bulma.$grey-light; - border-radius: bulma.$radius; - transition: - background var.$speed-slow bulma.$easing, - box-shadow var.$speed-slow bulma.$easing; - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name}-passive, - &:hover { - background: $color; - } - - &.input[type="checkbox"] + &.check { - background: "pink"; - } - } - - &:before { - content: ""; - display: block; - border-radius: bulma.$radius; - width: #{($switch-width - $switch-padding * 2) * 0.5}; - height: #{($switch-width - $switch-padding * 2) * 0.5}; - background: bulma.$background; - box-shadow: - 0 3px 1px 0 rgba(0, 0, 0, 0.05), - 0 2px 2px 0 rgba(0, 0, 0, 0.1), - 0 3px 3px 0 rgba(0, 0, 0, 0.05); - transition: transform var.$speed-slow bulma.$easing; - will-change: transform; - transform-origin: left; - } - - &.is-elastic:before { - transform: scaleX(1.5); - border-radius: bulma.$radius; - } - } - &:checked + .check { - background: $switch-active-background-color; - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - background: $color; - } - } + background: css.getVar("switch-active-background-color"); &:before { transform: translate3d(100%, 0, 0); } - - &.is-elastic:before { - // Might be a little offset if base font is not 16px - transform: translate3d(50%, 0, 0) scaleX(1.5); - } } &:focus, @@ -101,166 +97,101 @@ $switch-colors: bulma.$form-colors !default; outline: none; + .check { - box-shadow: 0 0 0.5em rgba(bulma.$grey, 0.6); - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name}-passive { - box-shadow: 0 0 0.5em rgba($color, 0.8); - } - } + box-shadow: css.getVar("active-shadow-size") + hsl( + from (css.getVar("switch-background-color") h s l / 80%) + ); } &:checked + .check { - box-shadow: 0 0 0.5em rgba($switch-active-background-color, 0.8); - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - box-shadow: 0 0 0.5em rgba($color, 0.8); - } - } + box-shadow: css.getVar("active-shadow-size") + hsl( + from + ( + css.getVar("switch-active-background-color") h s + l / 80% + ) + ); } } } - &.has-left-label { - flex-direction: row-reverse; - - .control-label { - padding-right: bulma.$control-padding-horizontal; - } - } - - &:not(.has-left-label) { - .control-label { - padding-left: bulma.$control-padding-horizontal; - } - } - &:hover { - input[type="checkbox"] + .check { - background: rgba(bulma.$grey-light, 0.9); - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name}-passive { - background: rgba($color, 0.9); - } - } + .check { + background: hsl( + from (css.getVar("switch-background-color") h s l / 90%) + ); } input[type="checkbox"]:checked + .check { - background: rgba($switch-active-background-color, 0.9); - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - background: rgba($color, 0.9); - } - } + background: hsl( + from (css.getVar("switch-active-background-color") h s l / 90%) + ); } } - &.is-rounded { - input[type="checkbox"] { - + .check { - border-radius: bulma.$radius-rounded; - - &:before { - border-radius: bulma.$radius-rounded; - } - } + .check.is-rounded { + border-radius: css.getVar("radius-rounded"); - &.is-elastic:before { - transform: scaleX(1.5); - border-radius: bulma.$radius-rounded; - } + &:before { + border-radius: css.getVar("radius-rounded"); } } - &.is-outlined { - input[type="checkbox"] { - + .check { - background: transparent; - border: 0.1rem solid bulma.$grey-light; - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name}-passive { - border: 0.1rem solid rgba($color, 0.9); - - &:before { - background: $color; - } - - &:hover { - border-color: rgba($color, 0.9); - } - } - } - - &:before { - background: bulma.$grey-light; - } - } - - &:checked + .check { - border-color: $switch-active-background-color; - - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - background: transparent; - border-color: $color; + &.has-left-label { + flex-direction: row-reverse; - &:before { - background: $color; - } - } - } + .control-label { + padding-right: css.getVar("control-padding-horizontal"); + } + } - &:before { - background: $switch-active-background-color; - } - } + &:not(.has-left-label) { + .control-label { + padding-left: css.getVar("control-padding-horizontal"); } + } - &:hover { - input[type="checkbox"] + .check { - background: transparent; - border-color: rgba(bulma.$grey-light, 0.9); - } + &.is-disabled { + opacity: 0.5; + cursor: not-allowed; + color: css.getVar("input-disabled-color"); + } - input[type="checkbox"]:checked + .check { - background: transparent; - border-color: rgba($switch-active-background-color, 0.9); + // sizes - @each $name, $pair in $switch-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - border-color: rgba($color, 0.9); - } - } - } - } - } + @include controls.control; &.is-small { - @include bulma.control-small; + @include controls.control-small; } &.is-medium { - @include bulma.control-medium; + @include controls.control-medium; } &.is-large { - @include bulma.control-large; + @include controls.control-large; } - &.is-disabled { - opacity: 0.5; - cursor: not-allowed; - color: bulma.$grey; + // variant colors + @each $name, $pair in $switch-colors { + $color: list.nth($pair, 1); + + &.is-#{$name}-passive { + @include css.register-vars( + ( + "switch-background-color": #{$color}, + ) + ); + } + + &.is-#{$name} { + @include css.register-vars( + ( + "switch-active-background-color": #{$color}, + ) + ); + } } } diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss index 45cb791..efb1ab1 100644 --- a/src/assets/scss/components/_table.scss +++ b/src/assets/scss/components/_table.scss @@ -1,6 +1,9 @@ -@use "bulma/bulma"; @use "utils/variables" as var; @use "utils/functions" as fn; +@use "bulma/sass/utilities/initial-variables" as vars; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; +@use "bulma/sass/elements/table" as table; /* @docs */ $table-sticky-header-height: 300px !default; @@ -40,8 +43,8 @@ $table-sticky-header-height: 300px !default; tr { // Card style — Cannot extend inside media query box-shadow: - 0 2px 3px rgba(bulma.$black, 0.1), - 0 0 0 1px rgba(bulma.$black, 0.1); + 0 2px 3px rgba(css.getVar("black"), 0.1), + 0 0 0 1px rgba(css.getVar("black"), 0.1); max-width: 100%; position: relative; display: block; @@ -60,10 +63,10 @@ $table-sticky-header-height: 300px !default; } // Disables is-* &:not([class*="is-"]) { - background: bulma.$table-background-color; + background: css.getVar("table-background-color"); &:hover { - background-color: bulma.$table-background-color; + background-color: css.getVar("table-background-color"); } } @@ -78,11 +81,11 @@ $table-sticky-header-height: 300px !default; width: auto; justify-content: space-between; text-align: right; - border-bottom: 1px solid bulma.$background; + border-bottom: 1px solid css.getVar("background"); &:before { content: attr(data-label); - font-weight: bulma.$weight-semibold; + font-weight: css.getVar("weight-semibold"); padding-right: 0.5em; text-align: left; } @@ -91,39 +94,77 @@ $table-sticky-header-height: 300px !default; } .table-wrapper { - position: relative; + @include css.register-vars( + ( + "table-sticky-header-height": #{$table-sticky-header-height}, + ) + ); + transition: opacity vars.$speed css.getVar("easing"); - .table { - margin-bottom: 0; - } + .table-mobile-sort { + @include mixins.tablet { + display: none; + } - &:not(:last-child) { - margin-bottom: 1.5rem; + // addition + .button { + background-color: css.getVar("primary"); + color: css.getVar("primary-invert-l"); + } } - @include bulma.touch { - overflow-x: auto; - } -} + .table-inner { + position: relative; -.b-table { - transition: opacity bulma.$speed bulma.$easing; + @include mixins.touch { + overflow-x: auto; + } - .table-mobile-sort { - @include bulma.tablet { - display: none; + .table { + margin-bottom: 0; } - // addition - .button { - background-color: bulma.$primary; - color: bulma.$primary-invert; + + &:not(:last-child) { + margin-bottom: 1.5rem; + } + + &.has-sticky-header { + height: css.getVar("table-sticky-header-height"); + overflow-y: auto; + + &.is-mobile { + @include mixins.mobile { + height: initial !important; + overflow-y: initial !important; + } + } + + tr:first-child { + th { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 2; + background: css.getVar("table-background-color"); + } + } + } + + &.is-mobile { + @include mixins.mobile { + @include table-cards; + } + } + + &.is-card-list { + @include table-cards; } } .icon { transition: - transform var.$speed-slow bulma.$easing, - opacity bulma.$speed bulma.$easing; + transform var.$speed-slow css.getVar("easing"), + opacity vars.$speed css.getVar("easing"); &.is-desc { transform: rotate(180deg); @@ -134,18 +175,14 @@ $table-sticky-header-height: 300px !default; } } - .sort-icon.icon.is-desc { - transform: rotate(180deg) translateY(-50%) !important; - } - .table { width: 100%; border: 1px solid transparent; - border-radius: bulma.$radius; + border-radius: css.getVar("radius"); border-collapse: separate; th { - font-weight: bulma.$weight-semibold; + font-weight: css.getVar("weight-semibold"); .th-wrap { display: flex; @@ -156,20 +193,6 @@ $table-sticky-header-height: 300px !default; margin-right: 0; font-size: 1rem; } - /* - &.is-right { - flex-direction: row-reverse; - text-align: right; - .icon { - margin-left: 0; - margin-right: 0.5rem; - } - } - &.is-centered { - justify-content: center; - text-align: center; - } - */ } &.is-right { @@ -188,17 +211,17 @@ $table-sticky-header-height: 300px !default; } &.is-current-sort { - border-color: bulma.$grey; - font-weight: bulma.$weight-bold; + border-color: css.getVar("grey"); + font-weight: css.getVar("weight-bold"); } &.is-sortable:hover { - border-color: bulma.$grey; + border-color: css.getVar("grey"); } &.is-sortable { cursor: pointer; - /* .is-relative { */ + > span { position: relative; } @@ -221,7 +244,7 @@ $table-sticky-header-height: 300px !default; position: sticky; left: 0; z-index: 3 !important; - background: bulma.$table-head-background-color; + background: css.getVar("table-head-background-color"); } &.th-checkbox { @@ -235,17 +258,13 @@ $table-sticky-header-height: 300px !default; tr { &.is-selected { - .checkbox input { - &:checked + .check { - background: bulma.$table-row-active-color - url(fn.checkmark( - bulma.$table-row-active-background-color - )) - no-repeat center center; - } + .check { + border-color: css.getVar("table-row-active-color"); - + .check { - border-color: bulma.$table-row-active-color; + &:checked { + background: css.getVar("table-row-active-color") + url(fn.checkmark(var.$primary)) no-repeat center + center; } } } @@ -253,14 +272,25 @@ $table-sticky-header-height: 300px !default; &.is-empty:hover { background-color: transparent; } + + &.detail { + box-shadow: inset 0 1px 3px css.getVar("grey-lighter"); + background: css.getVar("scheme-main-bis"); + } + } + + td { + &.is-sticky { + position: -webkit-sticky; + position: sticky; + left: 0; + z-index: 1; + background: css.getVar("table-background-color"); + } } .chevron-cell { vertical-align: middle; - - > .icon { - color: bulma.$input-arrow !important; - } } .checkbox-cell { @@ -275,36 +305,11 @@ $table-sticky-header-height: 300px !default; } } - tr.detail { - box-shadow: inset 0 1px 3px bulma.$grey-lighter; - background: bulma.$scheme-main-bis; - - .detail-container { - padding: 1rem; - } - } - - &:focus { - border-color: bulma.$link; - box-shadow: 0 0 0 0.125em rgba(bulma.$link, 0.25); - } - - // Modifiers &.is-bordered { th.is-current-sort, th.is-sortable:hover { - border-color: bulma.$grey-lighter; - background: bulma.$background; - } - } - - td { - &.is-sticky { - position: -webkit-sticky; - position: sticky; - left: 0; - z-index: 1; - background: bulma.$table-background-color; + border-color: css.getVar("grey-lighter"); + background: css.getVar("background"); } } @@ -314,84 +319,19 @@ $table-sticky-header-height: 300px !default; &:nth-child(even) { td { &.is-sticky { - background: bulma.$table-striped-row-even-background-color; + background: css.getVar( + "table-striped-row-even-background-color" + ); } } } } } } - } - - .level { - > div { - // .level-left, .level-right - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; - align-items: center; - - @include bulma.tablet { - display: flex; - } - - > div { - // .level-item - align-items: center; - display: flex; - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - } - - &:first-child { - // .level-left - justify-content: flex-start; - } - &:last-child { - // .level-right - justify-content: flex-end; - } - } - - &.is-mobile > div { - display: flex; - } - } - - .table-wrapper { - &.has-sticky-header { - height: $table-sticky-header-height; - overflow-y: auto; - - &.is-mobile { - @include bulma.mobile { - height: initial !important; - overflow-y: initial !important; - } - } - - tr:first-child { - th { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 2; - background: bulma.$table-background-color; - } - } - } - - &.is-mobile { - @include bulma.mobile { - @include table-cards; - } - } - - &.is-card-list { - @include table-cards; + &:focus { + border-color: css.getVar("link"); + box-shadow: 0 0 0 0.125em rgba(css.getVar("link"), 0.25); } } } diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss index fc01185..f15dd2d 100644 --- a/src/assets/scss/components/_tabs.scss +++ b/src/assets/scss/components/_tabs.scss @@ -1,81 +1,266 @@ -@use "bulma/bulma"; +@use "bulma/sass/components/tabs"; // include tabs component to extend from +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/mixins" as mixins; /* @docs */ $tabs-focused-outline: none !default; -$tabs-items-focused-outline: none !default; -$tabs-link-focus-active-border-bottom-color: bulma.$tabs-link-active-border-bottom-color !default; -$tabs-link-focus-border-bottom-color: bulma.$tabs-link-hover-border-bottom-color !default; -$tabs-boxed-link-focus-active-background-color: bulma.$tabs-boxed-link-active-background-color !default; -$tabs-boxed-link-focus-background-color: bulma.$tabs-boxed-link-hover-background-color !default; -$tabs-boxed-link-focus-active-border-bottom-color: bulma.$tabs-boxed-link-active-border-bottom-color !default; -$tabs-boxed-link-focus-border-bottom-color: bulma.$tabs-boxed-link-hover-border-bottom-color !default; -$tabs-toggle-link-focus-active-background-color: bulma.$tabs-toggle-link-active-background-color !default; -$tabs-toggle-link-focus-background-color: bulma.$tabs-toggle-link-hover-background-color !default; -$tabs-toggle-link-focus-active-border-color: bulma.$tabs-toggle-link-active-border-color !default; -$tabs-toggle-link-focus-border-color: bulma.$tabs-toggle-link-hover-border-color !default; +$tabs-link-focus-border-bottom-color: css.getVar( + "tabs-link-hover-border-bottom-color" +) !default; +$tabs-link-focus-active-border-bottom-color: css.getVar( + "tabs-link-active-border-bottom-color" +) !default; +$tabs-boxed-link-focus-active-background-color: css.getVar( + "tabs-boxed-link-active-background-color" +) !default; +$tabs-boxed-link-focus-background-color: css.getVar( + "tabs-boxed-link-hover-background-color" +) !default; +$tabs-boxed-link-focus-active-border-bottom-color: css.getVar( + "tabs-boxed-link-active-border-bottom-color" +) !default; +$tabs-boxed-link-focus-border-bottom-color: css.getVar( + "tabs-boxed-link-hover-border-bottom-color" +) !default; +$tabs-toggle-link-focus-active-background-color: css.getVar( + "tabs-toggle-link-active-background-color" +) !default; +$tabs-toggle-link-focus-background-color: css.getVar( + "tabs-toggle-link-hover-background-color" +) !default; +$tabs-toggle-link-focus-active-border-color: css.getVar( + "tabs-toggle-link-active-border-color" +) !default; +$tabs-toggle-link-focus-border-color: css.getVar( + "tabs-toggle-link-hover-border-color" +) !default; /* @docs */ -.b-tabs { +.tabs-wrapper { .tabs { + @include css.register-vars( + ( + "tabs-focused-outline": #{$tabs-focused-outline}, + "tabs-link-focus-border-bottom-color": #{$tabs-link-focus-border-bottom-color}, + "tabs-link-focus-active-border-bottom-color": #{$tabs-link-focus-active-border-bottom-color}, + "tabs-boxed-link-focus-border-bottom-color": #{$tabs-boxed-link-focus-border-bottom-color}, + "tabs-boxed-link-focus-background-color": #{$tabs-boxed-link-focus-background-color}, + "tabs-boxed-link-focus-active-background-color": #{$tabs-boxed-link-focus-active-background-color}, + "tabs-boxed-link-focus-active-border-bottom-color": #{$tabs-boxed-link-focus-active-border-bottom-color}, + "tabs-toggle-link-focus-background-color": #{$tabs-toggle-link-focus-background-color}, + "tabs-toggle-link-focus-border-color": #{$tabs-toggle-link-focus-border-color}, + "tabs-toggle-link-focus-active-background-color": #{$tabs-toggle-link-focus-active-background-color}, + "tabs-toggle-link-focus-active-border-color": #{$tabs-toggle-link-focus-active-border-color}, + ) + ); + + display: flex; + flex-grow: 1; + justify-content: flex-start; margin-bottom: 0; flex-shrink: 0; - div { - a:focus { - outline: $tabs-focused-outline; - border-bottom-color: $tabs-link-focus-active-border-bottom-color; + .tab-button { + @extend a !optional; // add button bulma `tabs a` styling + height: 100%; + + &:focus { + outline: css.getVar("tabs-focused-outline"); + border-bottom-color: css.getVar( + "tabs-link-focus-border-bottom-color" + ); } - a { - &:not(.is-active) { - &:focus { - border-bottom-color: $tabs-link-focus-border-bottom-color; - } - } + &.is-active { + border-bottom-color: css.getVar( + "tabs-link-active-border-bottom-color" + ); + color: css.getVar("tabs-link-active-color"); - &.is-disabled { - pointer-events: none; - cursor: not-allowed; - opacity: 0.5; + &:focus { + border-bottom-color: css.getVar( + "tabs-link-focus-active-border-bottom-color" + ); } } + + &.is-disabled { + pointer-events: none; + cursor: not-allowed; + opacity: 0.5; + } + } + + &:not(.is-toggle):not(.is-toggle-rounded):not(.is-pills) { + border-bottom-color: css.getVar("tabs-border-bottom-color"); + border-bottom-style: css.getVar("tabs-border-bottom-style"); + border-bottom-width: css.getVar("tabs-border-bottom-width"); } // Styles &.is-boxed { - div { - a:focus { - background-color: $tabs-boxed-link-focus-active-background-color; - border-bottom-color: $tabs-boxed-link-focus-active-border-bottom-color; + .tab-button { + @include mixins.ltr { + border-radius: css.getVar("tabs-boxed-link-radius") + css.getVar("tabs-boxed-link-radius") 0 0; + } + @include mixins.rtl { + border-radius: 0 0 css.getVar("tabs-boxed-link-radius") + css.getVar("tabs-boxed-link-radius"); } - a { - &:not(.is-active) { - &:focus { - background-color: $tabs-boxed-link-focus-background-color; - border-bottom-color: $tabs-boxed-link-focus-border-bottom-color; - } + &:focus { + background-color: css.getVar( + "tabs-boxed-link-focus-background-color" + ); + border-bottom-color: css.getVar( + "tabs-boxed-link-focus-border-bottom-color" + ); + } + + &.is-active { + background-color: css.getVar( + "tabs-boxed-link-active-background-color" + ); + border-color: css.getVar( + "tabs-boxed-link-active-border-color" + ); + border-bottom-color: css.getVar( + "tabs-boxed-link-active-border-bottom-color" + ); + + &:focus { + background-color: css.getVar( + "tabs-boxed-link-focus-active-background-color" + ); + border-bottom-color: css.getVar( + "tabs-boxed-link-focus-active-border-bottom-color" + ); } } } } - &.is-toggle { - div { - a:focus { - background-color: $tabs-toggle-link-focus-active-background-color; - border-color: $tabs-toggle-link-focus-active-border-color; + &.is-toggle, + &.is-toggle-rounded { + .tab-button { + &:focus { + background-color: $tabs-toggle-link-focus-background-color; + border-color: $tabs-toggle-link-focus-border-color; } - a { - &:not(.is-active) { - &:focus { - background-color: $tabs-toggle-link-focus-background-color; - border-color: $tabs-toggle-link-focus-border-color; - } + &.is-active { + background-color: css.getVar( + "tabs-toggle-link-active-background-color" + ); + border-color: css.getVar( + "tabs-toggle-link-active-border-color" + ); + color: css.getVar("tabs-toggle-link-active-color"); + z-index: 1; + + &:focus { + background-color: $tabs-toggle-link-focus-active-background-color; + border-color: $tabs-toggle-link-focus-active-border-color; } } } + + .tab { + & + .tab { + @include mixins.ltr-property( + "margin", + calc(-1 * css.getVar("tabs-toggle-link-border-width")), + false + ); + } + + &:first-child .tab-button { + @include mixins.ltr { + border-top-left-radius: css.getVar( + "tabs-toggle-link-radius" + ); + border-bottom-left-radius: css.getVar( + "tabs-toggle-link-radius" + ); + } + @include mixins.rtl { + border-top-right-radius: css.getVar( + "tabs-toggle-link-radius" + ); + border-bottom-right-radius: css.getVar( + "tabs-toggle-link-radius" + ); + } + } + + &:last-child .tab-button { + @include mixins.ltr { + border-top-right-radius: css.getVar( + "tabs-toggle-link-radius" + ); + border-bottom-right-radius: css.getVar( + "tabs-toggle-link-radius" + ); + } + @include mixins.rtl { + border-top-left-radius: css.getVar( + "tabs-toggle-link-radius" + ); + border-bottom-left-radius: css.getVar( + "tabs-toggle-link-radius" + ); + } + } + } + } + + &.is-toggle-rounded { + .tab { + &:first-child .tab-button { + @include mixins.ltr { + border-bottom-left-radius: css.getVar("radius-rounded"); + border-top-left-radius: css.getVar("radius-rounded"); + padding-left: 1.25em; + } + @include mixins.rtl { + border-bottom-right-radius: css.getVar( + "radius-rounded" + ); + border-top-right-radius: css.getVar("radius-rounded"); + padding-right: 1.25em; + } + } + + &:last-child .tab-button { + @include mixins.ltr { + border-bottom-right-radius: css.getVar( + "radius-rounded" + ); + border-top-right-radius: css.getVar("radius-rounded"); + padding-right: 1.25em; + } + @include mixins.rtl { + border-bottom-left-radius: css.getVar("radius-rounded"); + border-top-left-radius: css.getVar("radius-rounded"); + padding-left: 1.25em; + } + } + } + } + + &.is-pills, + &.is-pills-rounded { + @extend .is-toggle; + + .tab-button { + border-radius: css.getVar("tabs-toggle-link-radius"); + border-color: transparent; + } + } + + &.is-pills-rounded { + @extend .is-toggle-rounded; } } @@ -89,10 +274,6 @@ $tabs-toggle-link-focus-border-color: bulma.$tabs-toggle-link-hover-border-color .tab-item { flex-shrink: 0; flex-basis: auto; - - &:focus { - outline: $tabs-items-focused-outline; - } } &.is-transitioning { @@ -106,6 +287,17 @@ $tabs-toggle-link-focus-border-color: bulma.$tabs-toggle-link-hover-border-color &.is-fullwidth { width: 100%; + + .tab-button { + width: 100%; + } + } + + &.is-multiline { + .tabs { + flex-wrap: wrap; + flex-shrink: 1; + } } &.is-vertical { @@ -113,263 +305,90 @@ $tabs-toggle-link-focus-border-color: bulma.$tabs-toggle-link-hover-border-color flex-direction: row; flex-wrap: wrap; - > .tabs { - // ul { + .tabs { flex-direction: column; - border-bottom-color: transparent; + border-bottom-color: transparent !important; - div { - width: 100%; - - a { - justify-content: left; + &:not(.is-boxed) { + .tab:not(:has(+ .tab .tab-button.is-active)) .tab-button { + border-bottom-color: css.getVar("tabs-border-bottom-color"); } } - // } &.is-boxed { - div { - a { - border-bottom-color: transparent !important; - border-right-color: bulma.$tabs-border-bottom-color !important; - border-radius: bulma.$tabs-boxed-link-radius 0 0 - bulma.$tabs-boxed-link-radius; - } + .tab-button { + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: css.getVar("tabs-border-bottom-color"); + border-radius: css.getVar("tabs-boxed-link-radius") 0 0 + css.getVar("tabs-boxed-link-radius"); - a { - &.is-active { - border-bottom-color: bulma.$tabs-border-bottom-color !important; - border-right-color: transparent !important; - } + &.is-active { + border-bottom-color: css.getVar( + "tabs-border-bottom-color" + ); + border-left-color: css.getVar( + "tabs-border-bottom-color" + ); + border-right-color: transparent; } } } &.is-toggle { - div { - + div { + .tab { + + .tab { margin-left: 0; } &:first-child { - a { - border-radius: bulma.$tabs-toggle-link-radius - bulma.$tabs-toggle-link-radius 0 0; + .tab-button { + border-radius: css.getVar("tabs-toggle-link-radius") + css.getVar("tabs-toggle-link-radius") 0 0; } } &:last-child { - a { - border-radius: 0 0 bulma.$tabs-toggle-link-radius - bulma.$tabs-toggle-link-radius; + .tab-button { + border-radius: 0 0 + css.getVar("tabs-toggle-link-radius") + css.getVar("tabs-toggle-link-radius"); } } } } - - &.is-fullwidth { - div { - a { - height: 100%; - } - } - } } - > .tab-content { + .tabs-content { flex-grow: 1; } &.is-right { flex-direction: row-reverse; - > .tabs { - // ul { - a { - flex-direction: row-reverse; - - .icon:first-child { - margin-right: 0; - margin-left: 0.5em; - } - } - // } - + .tabs { &.is-boxed { - div { - a { - border-bottom-color: transparent !important; - border-right-color: transparent !important; - border-left-color: bulma.$tabs-border-bottom-color !important; - border-radius: 0 bulma.$tabs-boxed-link-radius - bulma.$tabs-boxed-link-radius 0; - } + .tab-button { + border-bottom-color: transparent; + border-right-color: transparent; + border-left-color: css.getVar( + "tabs-border-bottom-color" + ); + border-radius: 0 css.getVar("tabs-boxed-link-radius") + css.getVar("tabs-boxed-link-radius") 0; - a { - &.is-active { - border-bottom-color: bulma.$tabs-border-bottom-color !important; - border-right-color: bulma.$tabs-border-bottom-color !important; - border-left-color: transparent !important; - } + &.is-active { + border-bottom-color: css.getVar( + "tabs-border-bottom-color" + ); + border-right-color: css.getVar( + "tabs-border-bottom-color" + ); + border-left-color: transparent; } } } } } } - - &.is-multiline { - > .tabs { - flex-wrap: wrap; - flex-shrink: 1; - } - } - - // ul or li -> div - // a -> a - - // Hack to Bulma (ul, li, .. style) - .tabs { - // ul classes -> nav - display: flex; - flex-grow: 1; - flex-shrink: 0; - justify-content: flex-start; - - div { - a { - height: 100%; - - &.is-active { - border-bottom-color: bulma.$tabs-link-active-border-bottom-color; - color: bulma.$tabs-link-active-color; - } - } - } - - &:not(.is-toggle), - &:not(.is-toggle-rounded) { - border-bottom-color: bulma.$tabs-border-bottom-color; - border-bottom-style: bulma.$tabs-border-bottom-style; - border-bottom-width: bulma.$tabs-border-bottom-width; - } - - &.is-toggle, - &.is-toggle-rounded { - a { - border-color: bulma.$tabs-toggle-link-border-color; - border-style: bulma.$tabs-toggle-link-border-style; - border-width: bulma.$tabs-toggle-link-border-width; - margin-bottom: 0; - position: relative; - - &:hover { - background-color: bulma.$tabs-toggle-link-hover-background-color; - border-color: bulma.$tabs-toggle-link-hover-border-color; - z-index: 2; - } - } - - div { - & + div { - @include bulma.ltr-property( - "margin", - -#{bulma.$tabs-toggle-link-border-width}, - false - ); - } - - &:first-child a { - @include bulma.ltr { - border-top-left-radius: bulma.$tabs-toggle-link-radius; - border-bottom-left-radius: bulma.$tabs-toggle-link-radius; - } - @include bulma.rtl { - border-top-right-radius: bulma.$tabs-toggle-link-radius; - border-bottom-right-radius: bulma.$tabs-toggle-link-radius; - } - } - - &:last-child a { - @include bulma.ltr { - border-top-right-radius: bulma.$tabs-toggle-link-radius; - border-bottom-right-radius: bulma.$tabs-toggle-link-radius; - } - @include bulma.rtl { - border-top-left-radius: bulma.$tabs-toggle-link-radius; - border-bottom-left-radius: bulma.$tabs-toggle-link-radius; - } - } - - a { - &.is-active { - background-color: bulma.$tabs-toggle-link-active-background-color; - border-color: bulma.$tabs-toggle-link-active-border-color; - color: bulma.$tabs-toggle-link-active-color; - z-index: 1; - } - } - } - } - - &.is-toggle-rounded { - div { - &:first-child a { - @include bulma.ltr { - border-bottom-left-radius: bulma.$radius-rounded; - border-top-left-radius: bulma.$radius-rounded; - padding-left: 1.25em; - } - @include bulma.rtl { - border-bottom-right-radius: bulma.$radius-rounded; - border-top-right-radius: bulma.$radius-rounded; - padding-right: 1.25em; - } - } - - &:last-child a { - @include bulma.ltr { - border-bottom-right-radius: bulma.$radius-rounded; - border-top-right-radius: bulma.$radius-rounded; - padding-right: 1.25em; - } - @include bulma.rtl { - border-bottom-left-radius: bulma.$radius-rounded; - border-top-left-radius: bulma.$radius-rounded; - padding-left: 1.25em; - } - } - } - } - - &.is-boxed { - a { - border: 1px solid transparent; - - @include bulma.ltr { - border-radius: bulma.$tabs-boxed-link-radius - bulma.$tabs-boxed-link-radius 0 0; - } - @include bulma.rtl { - border-radius: 0 0 bulma.$tabs-boxed-link-radius - bulma.$tabs-boxed-link-radius; - } - - &:hover { - background-color: bulma.$tabs-boxed-link-hover-background-color; - border-bottom-color: bulma.$tabs-boxed-link-hover-border-bottom-color; - } - } - - div { - a { - &.is-active { - background-color: bulma.$tabs-boxed-link-active-background-color; - border-color: bulma.$tabs-boxed-link-active-border-color; - border-bottom-color: bulma.$tabs-boxed-link-active-border-bottom-color !important; - } - } - } - } - } } diff --git a/src/assets/scss/components/_taginput.scss b/src/assets/scss/components/_taginput.scss index 0ed6a2b..5c681a8 100644 --- a/src/assets/scss/components/_taginput.scss +++ b/src/assets/scss/components/_taginput.scss @@ -1,92 +1,53 @@ -@use "bulma/bulma"; +@use "bulma/sass/form/input-textarea"; +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/utilities/controls" as controls; /* @docs */ -$taginput-height: calc(2em - 1px) !default; +$taginput-height: 2em !default; +$taginput-tag-size: 0.9em !default; /* @docs */ .taginput { - .taginput-container { - display: flex; - - &.is-focusable { - @extend %input-textarea; - padding-bottom: 0; - padding-top: calc(0.275em - 1px); - padding-left: 0; - padding-right: 0; - align-items: center; - flex-wrap: wrap; - justify-content: flex-start; - height: auto; - cursor: text; - } - - &:not(.is-focusable) { - align-items: center; - flex-wrap: wrap; - justify-content: flex-start; - height: auto; - - &.is-small { - @include bulma.control-small; - } - - &.is-medium { - @include bulma.control-medium; - } - - &.is-large { - @include bulma.control-large; - } - } - - > .tag, - > .tags { - margin-left: 0.275rem; - margin-bottom: calc(0.275em - 1px); - font-size: 0.9em; - height: $taginput-height; + @include css.register-vars( + ( + "taginput-height": #{$taginput-height}, + "taginput-tag-size": #{$taginput-tag-size}, + ) + ); - .tag { - margin-bottom: 0; - font-size: 0.9em; - height: $taginput-height; + .taginput-container { + @extend %input-textarea; - &.is-delete { - width: $taginput-height; - } + display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + padding: 0; + height: auto; + cursor: text; + + > .tag { + margin: 0.25em; + font-size: css.getVar("taginput-tag-size"); + height: css.getVar("taginput-height"); + + .icon.delete { + margin-left: 0.275rem; } } - .tag:not(body) .icon.delete { - margin-left: 0.275rem; - margin-bottom: calc(0.275em - 1px); - } - .autocomplete { - position: static; flex: 1; input { - height: $taginput-height; - margin-bottom: calc(0.275em - 1px); + height: css.getVar("taginput-height"); + margin-top: 0.275em; + margin-bottom: 0.275em; padding-top: 0; padding-bottom: 0; border: none; box-shadow: none; min-width: 8em; - - &:focus { - box-shadow: none !important; - } - } - - .icon { - height: $taginput-height; - } - - > .control.is-loading::after { - top: 0.375em; } } } diff --git a/src/assets/scss/components/_timepicker.scss b/src/assets/scss/components/_timepicker.scss index e537e1f..6baf667 100644 --- a/src/assets/scss/components/_timepicker.scss +++ b/src/assets/scss/components/_timepicker.scss @@ -1,27 +1,35 @@ -@use "bulma/bulma"; +@use "bulma/sass/utilities/css-variables" as css; .timepicker { - .dropdown-menu { - min-width: 0; - } - .dropdown, .dropdown-trigger { + @include css.register-vars( + ( + "dropdown-menu-min-width": 0, + ) + ); + width: 100%; .input[readonly] { cursor: pointer; - box-shadow: bulma.$input-shadow; + box-shadow: css.getVar("input-shadow"); &:focus, &.is-focused, &:active, &.is-active { - box-shadow: bulma.$input-focus-box-shadow-size - bulma.$input-focus-box-shadow-color; + box-shadow: css.getVar("input-focus-shadow-size") + hsla( + css.getVar("input-focus-h"), + css.getVar("input-focus-s"), + css.getVar("input-focus-l"), + css.getVar("input-focus-shadow-alpha") + ); } } } + // unset opacity when dropdow is disabled .dropdown { &.is-disabled { @@ -43,21 +51,14 @@ .dropdown-content { .control { font-size: 1.25em; - margin-right: 0 !important; &.select { margin: 0 0.125em; select { - font-weight: bulma.$weight-semibold; - padding-right: bulma.$control-padding-horizontal; + font-weight: css.getVar("weight-semibold"); + padding-right: css.getVar("control-padding-horizontal"); border: 0; - - option { - &:disabled { - color: rgba(bulma.$grey, 0.7); - } - } } &:after { @@ -71,16 +72,4 @@ } } } - // Sizes - &.is-small { - @include bulma.control-small; - } - - &.is-medium { - @include bulma.control-medium; - } - - &.is-large { - @include bulma.control-large; - } } diff --git a/src/assets/scss/components/_tooltip.scss b/src/assets/scss/components/_tooltip.scss index 8f4d524..93f3e9d 100644 --- a/src/assets/scss/components/_tooltip.scss +++ b/src/assets/scss/components/_tooltip.scss @@ -1,205 +1,225 @@ @use "sass:list"; -@use "bulma/bulma"; + +@use "utils/variables" as var; +@use "bulma/sass/utilities/css-variables" as css; /* @docs */ +$tooltip-colors: var.$colors !default; $tooltip-arrow-size: 5px !default; $tooltip-arrow-margin: 2px !default; $tooltip-content-multiline-width: 300px !default; -$tooltip-colors: bulma.$colors !default; +$tooltip-border-radius: css.getVar("radius") !default; +$tooltip-bg: css.getVar("scheme-main-bis") !default; +$tooltip-shadow: 0 1px 2px 1px rgba(0, 1, 0, 0.2) !default; +$tooltip-color: css.getVar("text-body") !default; +$tooltip-z: 38 !default; /* @docs */ -@mixin tooltip-arrow-color($direction, $color) { - @if ($direction == "is-top") { - border-top-color: $color; - } @else if ($direction == "is-bottom") { - border-bottom-color: $color; - } @else if ($direction == "is-right") { - border-right-color: $color; - } @else if ($direction == "is-left") { - border-left-color: $color; +.tooltip { + @include css.register-vars( + ( + "tooltip-arrow-size": #{$tooltip-arrow-size}, + "tooltip-arrow-margin": #{$tooltip-arrow-margin}, + "tooltip-color": #{$tooltip-color}, + "tooltip-bg": #{$tooltip-bg}, + "tooltip-border-radius": #{$tooltip-border-radius}, + "tooltip-shadow": #{$tooltip-shadow}, + "tooltip-content-multiline-width": #{$tooltip-content-multiline-width}, + "tooltip-z": #{$tooltip-z}, + ) + ); + + position: relative; + display: inline-flex; + + .tooltip-trigger { + width: 100%; } -} -@mixin tooltip($direction) { - &-content { - &.#{$direction} { - @if ($direction == "is-top") { - top: auto; + + .tooltip-content { + position: absolute; + width: auto; + white-space: nowrap; + padding: 0.35rem 0.75rem; + font-size: 0.85rem; + font-weight: css.getVar("weight-normal"); + color: css.getVar("tooltip-color"); + background-color: css.getVar("tooltip-bg"); + border-radius: css.getVar("tooltip-border-radius"); + box-shadow: css.getVar("tooltip-shadow"); + z-index: css.getVar("tooltip-z"); + + &::before { + position: absolute; + content: ""; + pointer-events: none; + z-index: css.getVar("tooltip-z"); + } + + &.is-always { + opacity: 1; + visibility: visible; + } + + &.is-multiline { + text-align: center; + white-space: normal; + width: css.getVar("tooltip-content-multiline-width"); + } + + // variables for the directions + $arrow-size: calc( + 100% + css.getVar("tooltip-arrow-size") + + css.getVar("tooltip-arrow-margin") + ); + $arrow-border: css.getVar("tooltip-arrow-size") solid + css.getVar("tooltip-bg"); + $arrow-border-passive: css.getVar("tooltip-arrow-size") solid + transparent; + + &.is-top { + top: auto; + right: auto; + bottom: $arrow-size; + left: 50%; + transform: translateX(-50%); + + &::before { + top: 100%; right: auto; - bottom: calc( - 100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin} - ); + bottom: auto; left: 50%; transform: translateX(-50%); - } @else if ($direction == "is-bottom") { - top: calc( - 100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin} - ); + border-top: $arrow-border; + border-right: $arrow-border-passive; + border-left: $arrow-border-passive; + } + } + + &.is-bottom { + top: $arrow-size; + right: auto; + bottom: auto; + left: 50%; + transform: translateX(-50%); + + &::before { + top: auto; right: auto; - bottom: auto; + bottom: 100%; left: 50%; transform: translateX(-50%); - } @else if ($direction == "is-right") { - top: 50%; - right: auto; - bottom: auto; - left: calc( - 100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin} - ); - transform: translateY(-50%); - } @else if ($direction == "is-left") { + border-right: $arrow-border-passive; + border-bottom: $arrow-border; + border-left: $arrow-border-passive; + } + } + + &.is-right { + top: 50%; + right: auto; + bottom: auto; + left: $arrow-size; + transform: translateY(-50%); + + &:before { top: 50%; - right: calc( - 100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin} - ); + right: 100%; bottom: auto; left: auto; transform: translateY(-50%); + border-top: $arrow-border-passive; + border-right: $arrow-border; + border-bottom: $arrow-border-passive; } + } - &::before { - @if ($direction == "is-bottom") { - top: auto; - right: auto; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border-right: $tooltip-arrow-size solid transparent; - border-bottom: $tooltip-arrow-size solid bulma.$primary; - border-left: $tooltip-arrow-size solid transparent; - } @else if ($direction == "is-top") { - top: 100%; - right: auto; - bottom: auto; - left: 50%; - transform: translateX(-50%); - border-top: $tooltip-arrow-size solid bulma.$primary; - border-right: $tooltip-arrow-size solid transparent; - border-left: $tooltip-arrow-size solid transparent; - } @else if ($direction == "is-left") { - top: 50%; - right: auto; - bottom: auto; - left: 100%; - transform: translateY(-50%); - border-top: $tooltip-arrow-size solid transparent; - border-bottom: $tooltip-arrow-size solid transparent; - border-left: $tooltip-arrow-size solid bulma.$primary; - } @else if ($direction == "is-right") { - top: 50%; - right: 100%; - bottom: auto; - left: auto; - transform: translateY(-50%); - border-top: $tooltip-arrow-size solid transparent; - border-right: $tooltip-arrow-size solid bulma.$primary; - border-bottom: $tooltip-arrow-size solid transparent; - } - } + &.is-left { + top: 50%; + right: $arrow-size; + bottom: auto; + left: auto; + transform: translateY(-50%); - @each $name, $pair in $tooltip-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - &::before { - @include tooltip-arrow-color($direction, $color); - } - // If light and dark colors are provided - @if list.length($pair) >= 4 { - $color-light: list.nth($pair, 3); - - &.is-light { - &::before { - @include tooltip-arrow-color( - $direction, - $color-light - ); - } - } - } - } + &::before { + top: 50%; + right: auto; + bottom: auto; + left: 100%; + transform: translateY(-50%); + border-top: $arrow-border-passive; + border-bottom: $arrow-border-passive; + border-left: $arrow-border; } } } -} - -// Base -.b-tooltip { - position: relative; - display: inline-flex; - @include tooltip("is-top"); - @include tooltip("is-right"); - @include tooltip("is-bottom"); - @include tooltip("is-left"); - - .b-tooltip-content { - width: auto; - padding: 0.35rem 0.75rem; - border-radius: bulma.$radius-large; - font-size: 0.85rem; - font-weight: bulma.$weight-normal; - box-shadow: 0 1px 2px 1px rgba(0, 1, 0, 0.2); - z-index: 38; - white-space: nowrap; - position: absolute; + &.is-dashed { + .tooltip-trigger { + border-bottom: 1px dashed css.getVar("grey-light"); + cursor: default; + } } - .b-tooltip-content::before { - position: absolute; - content: ""; - pointer-events: none; - z-index: 38; + &.is-square { + .tooltip-content { + border-radius: 0; + } } - .b-tooltip-trigger { - width: 100%; - } // Modifiers @each $name, $pair in $tooltip-colors { $color: list.nth($pair, 1); - $color-invert: list.nth($pair, 2); - &.is-#{$name} { - .b-tooltip-content { - background: $color; - color: $color-invert; + $color-invert: if(list.length($pair) >= 2, list.nth($pair, 2), null); + + .is-#{$name} { + @include css.register-vars( + ( + "tooltip-bg": #{$color}, + ) + ); + @if $color-invert { + @include css.register-vars( + ( + "tooltip-color": #{$color-invert}, + ) + ); } + // If light and dark colors are provided @if list.length($pair) >= 4 { $color-light: list.nth($pair, 3); $color-dark: list.nth($pair, 4); &.is-light { - .b-tooltip-content { - background: $color-light; - color: $color-dark; - } + @include css.register-vars( + ( + "tooltip-color": #{$color-dark}, + "tooltip-bg": #{$color-light}, + ) + ); } } } } - & .b-tooltip-content { - &.is-always { - opacity: 1; - visibility: visible; - } + &.is-teleported { + .tooltip-content { + &.is-top { + margin-top: calc(-1 * css.getVar("tooltip-arrow-size")); + } - &.is-multiline { - text-align: center; - white-space: normal; - width: $tooltip-content-multiline-width; - } - } + &.is-bottom { + margin-top: css.getVar("tooltip-arrow-size"); + } - &.is-dashed { - .b-tooltip-trigger { - border-bottom: 1px dashed bulma.$grey-light; - cursor: default; - } - } + &.is-right { + margin-left: css.getVar("tooltip-arrow-size"); + } - &.is-square { - .b-tooltip-content { - border-radius: 0; + &.is-left { + margin-left: calc(-1 * css.getVar("tooltip-arrow-size")); + } } } } diff --git a/src/assets/scss/components/_upload.scss b/src/assets/scss/components/_upload.scss index 9daad6f..752dfbd 100644 --- a/src/assets/scss/components/_upload.scss +++ b/src/assets/scss/components/_upload.scss @@ -1,9 +1,25 @@ @use "sass:list"; -@use "bulma/bulma"; + +@use "bulma/sass/utilities/css-variables" as css; +@use "bulma/sass/form/file" as file; + +/* @docs */ +$upload-colors: file.$file-colors !default; +$upload-bg: transparent !default; +$upload-draggable-padding: 0.5rem !default; +$upload-border-color: css.getVar("grey-light") !default; +/* @docs */ .upload { position: relative; - display: inline-flex; + + @include css.register-vars( + ( + "upload-draggable-padding": #{$upload-draggable-padding}, + "upload-bg": #{$upload-bg}, + "upload-border-color": #{$upload-border-color}, + ) + ); input[type="file"] { position: absolute; @@ -19,17 +35,23 @@ .upload-draggable { cursor: pointer; - padding: 0.25em; - border: 1px dashed bulma.$grey-light; - border-radius: bulma.$radius-large; - - &:hover, - &.is-hovered { - @each $name, $pair in bulma.$file-colors { - $color: list.nth($pair, 1); - &.is-#{$name} { - border-color: $color; - background: rgba($color, 0.05); + padding: css.getVar("upload-draggable-padding"); + background-color: css.getVar("upload-bg"); + border: 1px dashed css.getVar("upload-border-color"); + border-radius: css.getVar("radius-large"); + + @each $name, $pair in $upload-colors { + $color: list.nth($pair, 1); + + &.is-#{$name} { + &:hover, + &.is-hovered { + @include css.register-vars( + ( + "upload-bg": #{rgba($color, 0.05)}, + "upload-border-color": #{$color}, + ) + ); } } } @@ -49,11 +71,11 @@ } &.is-rounded { - border-radius: bulma.$radius-rounded; + border-radius: css.getVar("radius-rounded"); .file-name { - border-top-right-radius: bulma.$radius-rounded; - border-bottom-right-radius: bulma.$radius-rounded; + border-top-right-radius: css.getVar("radius-rounded"); + border-bottom-right-radius: css.getVar("radius-rounded"); } } } diff --git a/src/assets/scss/components/utils/_all.scss b/src/assets/scss/components/utils/_all.scss index dae6e82..02aba6f 100644 --- a/src/assets/scss/components/utils/_all.scss +++ b/src/assets/scss/components/utils/_all.scss @@ -2,3 +2,4 @@ @forward "variables"; @forward "helpers"; @forward "animations"; +@forward "root"; diff --git a/src/assets/scss/components/utils/_animations.scss b/src/assets/scss/components/utils/_animations.scss index 91b4aaa..a8aa8fc 100644 --- a/src/assets/scss/components/utils/_animations.scss +++ b/src/assets/scss/components/utils/_animations.scss @@ -1,7 +1,7 @@ // Some of the animations are from animate.css (https://daneden.github.io/animate.css) -@use "_variables" as var; -@use "bulma/bulma"; +@use "variables" as var; +@use "bulma/sass/utilities/css-variables" as css; // Fade out @keyframes fadeOut { @@ -102,7 +102,7 @@ // Fade .fade-enter-active, .fade-leave-active { - transition: opacity var.$speed-slow bulma.$easing; + transition: opacity var.$speed-slow css.getVar("easing"); } .fade-enter, @@ -114,11 +114,11 @@ // Zoom In .zoom-in-enter-active, .zoom-in-leave-active { - transition: opacity var.$speed-slow bulma.$easing; + transition: opacity var.$speed-slow css.getVar("easing"); .animation-content, .animation-content { - transition: transform var.$speed-slow bulma.$easing; + transition: transform var.$speed-slow css.getVar("easing"); } } @@ -136,11 +136,11 @@ // Zoom Out .zoom-out-enter-active, .zoom-out-leave-active { - transition: opacity var.$speed-slow bulma.$easing; + transition: opacity var.$speed-slow css.getVar("easing"); .animation-content, .animation-content { - transition: transform var.$speed-slow bulma.$easing; + transition: transform var.$speed-slow css.getVar("easing"); } } @@ -205,11 +205,11 @@ } .slide-enter-active { - transition: var.$speed-slow bulma.$easing; + transition: var.$speed-slow css.getVar("easing"); } .slide-leave-active { - transition: var.$speed-slow bulma.$easing; + transition: var.$speed-slow css.getVar("easing"); transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } diff --git a/src/assets/scss/components/utils/_functions.scss b/src/assets/scss/components/utils/_functions.scss index af06e12..e06ef91 100644 --- a/src/assets/scss/components/utils/_functions.scss +++ b/src/assets/scss/components/utils/_functions.scss @@ -46,6 +46,8 @@ @return "data:image/svg+xml,#{$encoded}"; } + +// create checkbox mark svg with a specific color @function checkmark($color) { $start: ''; $content: ''; @@ -53,6 +55,8 @@ @return svg-encode("#{$start}#{$content}#{$end}"); } + +// create checkbox indeterminate svg with a specific color @function indeterminate($color) { $start: ''; $content: ''; diff --git a/src/assets/scss/components/utils/_helpers.scss b/src/assets/scss/components/utils/_helpers.scss index 736fea2..f8d2361 100644 --- a/src/assets/scss/components/utils/_helpers.scss +++ b/src/assets/scss/components/utils/_helpers.scss @@ -4,3 +4,8 @@ width: 100%; bottom: 0; } + +.is-clickable { + pointer-events: auto; + cursor: pointer; +} diff --git a/src/assets/scss/components/utils/_root.scss b/src/assets/scss/components/utils/_root.scss new file mode 100644 index 0000000..513ef28 --- /dev/null +++ b/src/assets/scss/components/utils/_root.scss @@ -0,0 +1,10 @@ +@use "variables" as var; +@use "bulma/sass/utilities/css-variables" as css; + +:root { + @include css.register-vars( + ( + "active-shadow-size": #{var.$active-shadow-size}, + ) + ); +} diff --git a/src/assets/scss/components/utils/_variables.scss b/src/assets/scss/components/utils/_variables.scss index 7d345e0..2f60e37 100644 --- a/src/assets/scss/components/utils/_variables.scss +++ b/src/assets/scss/components/utils/_variables.scss @@ -1,6 +1,35 @@ /******************************************** * Variable overrides and theme variables *********************************************/ +@use "sass:map"; $speed-slow: 150ms !default; $speed-slower: 250ms !default; + +// oruga defines an extra secondary color +$secondary: #6c757d !default; + +// alternative to focus-shadow-size +$active-shadow-size: 0 0 0.5em !default; + +// make the custom colors extandable by providing a new variable to override +$custom-colors: () !default; + +@forward "bulma/sass/utilities/derived-variables" with ( + // adding aditional colors to colors map + $custom-colors: + map.merge( + // merge our custom-colors with the overridable map + ("secondary": $secondary), + $custom-colors + ) +); + +@use "bulma/sass/utilities/derived-variables" as vars; + +$sizes-map: ( + "small": vars.$size-small, + "normal": vars.$size-normal, + "medium": vars.$size-medium, + "large": vars.$size-large, +) !default; diff --git a/src/plugins/bulma.ts b/src/plugins/bulma.ts index dd56faf..8d495b2 100644 --- a/src/plugins/bulma.ts +++ b/src/plugins/bulma.ts @@ -1,4 +1,5 @@ import type { OrugaOptions, ComponentProps } from "@oruga-ui/oruga-next"; +import { isTrueish } from "@oruga-ui/oruga-next"; import "../assets/scss/bulma-build.scss"; @@ -22,8 +23,8 @@ export const bulmaConfig: OrugaOptions = { override: true, rootClass: (_: string, props: ComponentProps) => { const classes = ["control"]; - if (props.icon) classes.push("has-icons-left"); - return classes.join(" ").trim(); + if (isTrueish(props.icon)) classes.push("has-icons-left"); + return classes.join(" "); }, inputClass: "input", textareaClass: "textarea", @@ -39,19 +40,19 @@ export const bulmaConfig: OrugaOptions = { select: { override: true, rootClass: (_: string, props: ComponentProps) => { - const classes = ["control", "select"]; - if (props.size) classes.push(`is-${props.size}`); - if (props.rounded) classes.push("is-rounded"); - if (props.multiple) classes.push("is-multiple"); - if (props.icon) classes.push("has-icons-left"); - if (props.iconRight) classes.push("has-icons-right"); - return classes.join(" ").trim(); + const classes = ["select", "control"]; + if (isTrueish(props.size)) classes.push(`is-${props.size}`); + if (isTrueish(props.rounded)) classes.push("is-rounded"); + if (isTrueish(props.multiple)) classes.push("is-multiple"); + if (isTrueish(props.icon)) classes.push("has-icons-left"); + if (isTrueish(props.iconRight)) classes.push("has-icons-right"); + return classes.join(" "); }, + rootVariantClass: "is-", expandedClass: "is-fullwidth", iconLeftClass: "is-left", iconRightClass: "is-right", placeholderClass: "is-empty", - rootVariantClass: "is-", }, icon: { override: true, @@ -63,7 +64,7 @@ export const bulmaConfig: OrugaOptions = { }, checkbox: { override: true, - rootClass: "b-checkbox checkbox", + rootClass: "checkbox", disabledClass: "is-disabled", inputClass: "check", labelClass: "control-label", @@ -72,7 +73,7 @@ export const bulmaConfig: OrugaOptions = { }, radio: { override: true, - rootClass: "b-radio radio", + rootClass: "radio", disabledClass: "is-disabled", inputClass: "check", labelClass: "control-label", @@ -81,21 +82,14 @@ export const bulmaConfig: OrugaOptions = { }, switch: { override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["switch"]; - if (props.rounded) classes.push("is-rounded"); - if (props.position === "left") classes.push("has-left-label"); - return classes.join(" "); - }, - switchClass: (_: string, props: ComponentProps) => { - const classes = ["check"]; - if (props.variant) classes.push(`is-${props.variant}`); - if (props.passiveVariant) - classes.push(`is-${props.passiveVariant}-passive`); - return classes.join(" "); - }, + rootClass: "switch", + switchClass: "check", + positionClass: (value) => `has-${value}-label`, + roundedClass: "is-rounded", labelClass: "control-label", sizeClass: "is-", + variantClass: "is-", + passiveVariantClass: "is-", disabledClass: "is-disabled", }, autocomplete: { @@ -109,7 +103,7 @@ export const bulmaConfig: OrugaOptions = { taginput: { override: true, rootClass: "taginput control", - containerClass: "taginput-container is-focusable", + containerClass: "taginput-container", itemClass: "tag", closeClass: "delete is-small", }, @@ -117,7 +111,7 @@ export const bulmaConfig: OrugaOptions = { override: true, rootClass: (_: string, props: ComponentProps) => { const classes = ["pagination"]; - if (props.rounded) classes.push("is-rounded"); + if (isTrueish(props.rounded)) classes.push("is-rounded"); return classes.join(" "); }, sizeClass: "is-", @@ -133,34 +127,27 @@ export const bulmaConfig: OrugaOptions = { }, slider: { override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["b-slider"]; - if (props.variant) classes.push(`is-${props.variant}`); - if (props.rounded) classes.push("is-rounded"); - return classes.join(" "); - }, + rootClass: "slider", disabledClass: "is-disabled", - trackClass: "b-slider-track", - fillClass: "b-slider-fill", - thumbWrapperClass: "b-slider-thumb-wrapper", + trackClass: "slider-track", + fillClass: "slider-fill", + thumbWrapperClass: "slider-thumb-wrapper", thumbWrapperDraggingClass: "is-dragging", + thumbRoundedClass: "is-rounded", + variantClass: "is-", sizeClass: "is-", - thumbClass: "b-slider-thumb", - tickLabelClass: "b-slider-tick-label", + thumbClass: "slider-thumb", + tickLabelClass: "slider-tick-label", tickHiddenClass: "is-tick-hidden", - tickClass: "b-slider-tick", + tickClass: "slider-tick", }, tabs: { override: true, - itemTag: "a", - rootClass: "b-tabs", - contentClass: "tab-content", + rootClass: "tabs-wrapper", + contentClass: "tabs-content", multilineClass: "is-multiline", - navTabsClass: (_: string, props: ComponentProps) => { - const classes = ["tabs"]; - if (props.type) classes.push(`is-${props.type}`); - return classes.join(" "); - }, + navTabsClass: "tabs", + navTypeClass: "is-", expandedClass: "is-fullwidth", verticalClass: "is-vertical", positionClass: "is-", @@ -168,13 +155,17 @@ export const bulmaConfig: OrugaOptions = { navPositionClass: "is-", transitioningClass: "is-transitioning", itemClass: "tab-item", + itemWrapperClass: "tab", + itemHeaderClass: "tab-button", + itemHeaderIconClass: "tab-icon", + itemHeaderTextClass: "tab-title", itemHeaderActiveClass: () => "is-active", itemHeaderDisabledClass: () => "is-disabled", }, table: { override: true, - rootClass: "b-table", - wrapperClass: "table-wrapper", + rootClass: "table-wrapper", + wrapperClass: "table-inner", tableClass: "table", borderedClass: "is-bordered", stripedClass: "is-striped", @@ -195,52 +186,33 @@ export const bulmaConfig: OrugaOptions = { thCheckboxClass: "th-checkbox", thDetailedClass: "th-chevron-cell", tdDetailedChevronClass: "chevron-cell", - thPositionClass: (position: string) => { - if (position === "centered") return "is-centered"; - else if (position === "right") return "is-right"; - return; - }, - tdPositionClass: (position: string) => { - if (position === "centered") return "has-text-centered"; - else if (position === "right") return "has-text-right"; - return; - }, + thPositionClass: "is-", + tdPositionClass: "has-text-", mobileClass: "is-mobile", - mobileSortClass: "table-mobile-sort field", + mobileSortClass: "table-mobile-sort", }, tooltip: { override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["b-tooltip"]; - if (props.variant) classes.push(`is-${props.variant}`); - else classes.push(`is-primary`); - return classes.join(" "); - }, - contentClass: "b-tooltip-content", - triggerClass: "b-tooltip-trigger", + rootClass: "tooltip", + contentClass: "tooltip-content", + triggerClass: "tooltip-trigger", alwaysClass: "is-always", multilineClass: "is-multiline", variantClass: "is-", positionClass: "is-", + teleportClass: "is-teleported", }, steps: { override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["b-steps"]; - if (props.variant) classes.push(`is-${props.variant}`); - if (props.disables) classes.push("is-disabled"); - return classes.join(" "); - }, + rootClass: "steps-wrapper", stepsClass: (_: string, props: ComponentProps) => { const classes = ["steps"]; - if (props.animated) classes.push("is-animated"); - if (props.rounded) classes.push("is-rounded"); if (props.labelPosition === "left") classes.push("has-label-left"); if (props.labelPosition === "right") classes.push("has-label-right"); return classes.join(" "); }, - itemClass: "step-link", + itemClass: "step-content-item", itemHeaderClass: "step-item", itemHeaderVariantClass: "is-", itemHeaderActiveClass: "is-active", @@ -249,12 +221,15 @@ export const bulmaConfig: OrugaOptions = { stepLinkLabelClass: "step-title", stepLinkClickableClass: "is-clickable", stepMarkerClass: "step-marker", + stepMarkerRoundedClass: "is-rounded", stepNavigationClass: "step-navigation", stepContentClass: "step-content", verticalClass: "is-vertical", + animatedClass: "is-animated", positionClass: "is-", - stepContentTransitioningClass: "is-transitioning", sizeClass: "is-", + labelPosition: "is-", + stepContentTransitioningClass: "is-transitioning", }, button: { override: true, @@ -264,8 +239,15 @@ export const bulmaConfig: OrugaOptions = { roundedClass: "is-rounded", expandedClass: "is-fullwidth", loadingClass: "is-loading", - outlinedClass: () => "is-outlined", - invertedClass: () => "is-inverted", + outlinedClass: (variant) => { + if (!variant) return "is-outlined"; + return `is-${variant} is-outlined`; + }, + + invertedClass: (variant) => { + if (!variant) return "is-inverted"; + return `is-${variant} is-inverted`; + }, wrapperClass: "button-wrapper", }, menu: { @@ -276,34 +258,29 @@ export const bulmaConfig: OrugaOptions = { }, skeleton: { override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["b-skeleton"]; - if (props.animated) classes.push("is-animated"); - return classes.join(" "); - }, - itemClass: "b-skeleton-item", + rootClass: "skeleton", + animationClass: "is-animated", + positionClass: "is-", + sizeClass: "is-", + itemClass: "skeleton-block", itemRoundedClass: "is-rounded", }, notification: { override: true, - rootClass: (_: string, props: ComponentProps) => { - const classes = ["notification"]; - if (props.variant) classes.push(`is-${props.variant}`); - return classes.join(" "); - }, + rootClass: "notification", wrapperClass: "media", contentClass: "media-content", iconClass: "media-left", closeClass: "delete", positionClass: "is-", - noticeClass: "b-notices", + noticeClass: "notices", noticePositionClass: "is-", variantClass: "is-", }, dropdown: { override: true, itemTag: "a", - rootClass: ["dropdown", "dropdown-menu-animation"], + rootClass: "dropdown", triggerClass: "dropdown-trigger", menuClass: "dropdown-content dropdown-menu", disabledClass: "is-disabled", @@ -317,7 +294,6 @@ export const bulmaConfig: OrugaOptions = { positionClass: "is-", activeClass: "is-active", hoverableClass: "is-hoverable", - position: "bottom-right", }, datepicker: { override: true, @@ -351,11 +327,8 @@ export const bulmaConfig: OrugaOptions = { tableCellWithinSelectedClass: "is-within-selected", tableCellInvisibleClass: "", tableCellNearbyClass: "is-nearby", - tableCellEventsClass: (_: string, props: ComponentProps) => { - const classes = ["has-event"]; - if (props.indicators) classes.push(`${props.indicators}`); - return classes.join(" "); - }, + tableCellEventsClass: "has-event", + tableEventIndicatorsClass: "is-", tableEventVariantClass: "is-", tableEventsClass: "events", tableEventClass: "event", @@ -379,28 +352,25 @@ export const bulmaConfig: OrugaOptions = { rootClass: "modal", activeClass: "is-active", overlayClass: "modal-background", - contentClass: "modal-content animation-content", + contentClass: "modal-content", closeClass: "modal-close is-large", fullScreenClass: "is-full-screen", scrollClipClass: "is-clipped", }, sidebar: { override: true, - rootClass: "b-sidebar", + rootClass: "sidebar", + overlayClass: "sidebar-background", + contentClass: "sidebar-content", + activeClass: "is-active", variantClass: "is-", positionClass: "is-", - activeClass: "is-active", - contentClass: "sidebar-content is-fixed", - expandOnHoverClass: "is-mini-expand", + expandOnHoverClass: "is-expanded", fullheightClass: "is-fullheight", fullwidthClass: "is-fullwidth", - mobileClass: (_: string, props: ComponentProps) => { - if (props.mobile && props.mobile !== "reduce") { - return `is-${props.mobile}-mobile`; - } - }, - overlayClass: "sidebar-background", - reduceClass: "is-mini-mobile", + reduceClass: "is-mini", + inlineClass: "is-inline", + mobileClass: "is-", }, loading: { fullPageClass: "is-full-page", @@ -410,14 +380,14 @@ export const bulmaConfig: OrugaOptions = { }, timepicker: { override: true, - rootClass: "timepicker control", + rootClass: "timepicker", boxClass: "dropdown-item", - selectClasses: { - rootClass: "select control", - }, separatorClass: "is-colon control", footerClass: "timepicker-footer", sizeClass: "is-", + selectClasses: { + rootClass: "select control", + }, }, carousel: { override: true, @@ -436,7 +406,6 @@ export const bulmaConfig: OrugaOptions = { indicatorItemClass: "indicator-style", indicatorItemActiveClass: "is-active", indicatorItemStyleClass: "is-", - // CarouselItem itemClass: "carousel-item", itemActiveClass: "is-active", },