Select box stylized

[cemkoker]

First off thank you for pulling this up ! It's really useful.

I'm kinda new to Laravel; one thing i noticed is between the template and your integration the styling of the dropdown's is not working correctly; is there a way to have it same as in the demo ?

Thanks

[takielias]

Thank you for your attention, @cemkoker. Could you please add the following SCSS import to the resources/sass/tabler.scss file and update me on the progress?

// Tabler Vendor Styles.
@import "../../node_modules/@tabler/core/src/scss/tabler-vendors";

[cemkoker]

Thanks for your reply; it worked ! Sadly I still have the '$divisor: abs($divisor);' issue ... even with your 'fix'.

[takielias]

@cemkoker Could you please share a screenshot? What are your development environment details?

[cemkoker]

Hi, 'npm run dev' works fine but fails on 'npm run build'

` VITE v4.5.0 ready in 317 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help

LARAVEL v10.30.1 plugin v0.8.1

➜ APP_URL: http://tablar.test ➜ tablar npm run build

build vite build

vite v4.5.0 building for production... transforming (39) node_modules/axios/lib/platform/browser/index.jsDeprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent

╷ 57 │ $dividend: abs($dividend); │ ^^^^^^^^^^^^^^ ╵ node_modules/bootstrap/scss/vendor/_rfs.scss 57:14 divide() node_modules/bootstrap/scss/mixins/_grid.scss 59:12 row-cols() node_modules/bootstrap/scss/mixins/_grid.scss 85:13 @content node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5 media-breakpoint-up() node_modules/bootstrap/scss/mixins/_grid.scss 72:5 make-grid-columns() node_modules/bootstrap/scss/_grid.scss 38:3 @import node_modules/@tabler/core/src/scss/_bootstrap-components.scss 7:9 @import node_modules/@tabler/core/src/scss/_core.scss 2:9 @import node_modules/@tabler/core/src/scss/tabler.scss 1:9 @import resources/sass/tabler.scss 7:9 root stylesheet

Deprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(85.714285%) To emit a CSS abs() now: abs(#{85.714285%}) More info: https://sass-lang.com/d/abs-percent

╷ 57 │ $dividend: abs($dividend); │ ^^^^^^^^^^^^^^ ╵ node_modules/bootstrap/scss/vendor/_rfs.scss 57:14 divide() node_modules/@tabler/core/src/scss/ui/_badges.scss 8:41 @import node_modules/@tabler/core/src/scss/_core.scss 17:9 @import node_modules/@tabler/core/src/scss/tabler.scss 1:9 @import resources/sass/tabler.scss 7:9 root stylesheet

Deprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent

╷ 58 │ $divisor: abs($divisor); │ ^^^^^^^^^^^^^ ╵ node_modules/bootstrap/scss/vendor/_rfs.scss 58:13 divide() node_modules/@tabler/core/src/scss/ui/_badges.scss 8:41 @import node_modules/@tabler/core/src/scss/_core.scss 17:9 @import node_modules/@tabler/core/src/scss/tabler.scss 1:9 @import resources/sass/tabler.scss 7:9 root stylesheet

✓ 52 modules transformed. public/build/manifest.json 1.24 kB │ gzip: 0.29 kB public/build/assets/tabler-icons-50684e39.woff2 759.04 kB public/build/assets/tabler-icons-12030f11.woff 1,072.74 kB public/build/assets/tabler-icons-48f1c021.ttf 2,120.88 kB public/build/assets/tabler-icons-a491e762.eot 2,121.06 kB public/build/assets/app-b5df9ac7.css 732.86 kB │ gzip: 105.82 kB public/build/assets/app-9a807343.js 257.14 kB │ gzip: 83.31 kB ✓ built in 3.00s ➜ tablar ➜ tablar npm run build

build vite build

vite v4.5.0 building for production... transforming (9) node_modules/@tabler/core/dist/js/tabler.jsDeprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent

╷ 57 │ $dividend: abs($dividend); │ ^^^^^^^^^^^^^^ ╵ node_modules/bootstrap/scss/vendor/_rfs.scss 57:14 divide() node_modules/bootstrap/scss/mixins/_grid.scss 59:12 row-cols() node_modules/bootstrap/scss/mixins/_grid.scss 85:13 @content node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5 media-breakpoint-up() node_modules/bootstrap/scss/mixins/_grid.scss 72:5 make-grid-columns() node_modules/bootstrap/scss/_grid.scss 38:3 @import node_modules/@tabler/core/src/scss/_bootstrap-components.scss 7:9 @import node_modules/@tabler/core/src/scss/_core.scss 2:9 @import node_modules/@tabler/core/src/scss/tabler.scss 1:9 @import resources/sass/tabler.scss 7:9 root stylesheet

Deprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(85.714285%) To emit a CSS abs() now: abs(#{85.714285%}) More info: https://sass-lang.com/d/abs-percent

╷ 57 │ $dividend: abs($dividend); │ ^^^^^^^^^^^^^^ ╵ node_modules/bootstrap/scss/vendor/_rfs.scss 57:14 divide() node_modules/@tabler/core/src/scss/ui/_badges.scss 8:41 @import node_modules/@tabler/core/src/scss/_core.scss 17:9 @import node_modules/@tabler/core/src/scss/tabler.scss 1:9 @import resources/sass/tabler.scss 7:9 root stylesheet

Deprecation Warning: Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent

╷ 58 │ $divisor: abs($divisor); │ ^^^^^^^^^^^^^ ╵ node_modules/bootstrap/scss/vendor/_rfs.scss 58:13 divide() node_modules/@tabler/core/src/scss/ui/_badges.scss 8:41 @import node_modules/@tabler/core/src/scss/_core.scss 17:9 @import node_modules/@tabler/core/src/scss/tabler.scss 1:9 @import resources/sass/tabler.scss 7:9 root stylesheet

transforming (52) resources/sass/tabler.scss^C ➜ tablar cat package.json { "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@popperjs/core": "^2.11.8", "@tabler/core": "1.0.0-beta20", "@tabler/icons": "^2.32.0", "@tabler/icons-webfont": "^2.32.0", "apexcharts": "^3.40.0", "axios": "^1.1.2", "bootstrap": "5.3.1", "countup.js": "^2.6.2", "dropzone": "^6.0.0-beta.2", "fslightbox": "^3.4.1", "jquery": "3.7.*", "jsvectormap": "^1.5.3", "laravel-vite-plugin": "^0.8.0", "list.js": "^2.3.1", "litepicker": "^2.0.12", "nouislider": "^15.7.0", "plyr": "^3.7.8", "sass": "^1.62.1", "sass-loader": "^13.3.1", "tinymce": "^6.4.2", "tom-select": "^2.2.2", "vite": "^4.0.0" } }`

[takielias]

@cemkoker Your node version?

[cemkoker]

v21.1.0

On Tue, Nov 7, 2023 at 4:07 PM Taki Elias @.***> wrote:

@cemkoker https://github.com/cemkoker Your node version?

— Reply to this email directly, view it on GitHub https://github.com/takielias/tablar/issues/30#issuecomment-1798814347, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADHKVJ2U5EOQ5735QD4HBYLYDJFDJAVCNFSM6AAAAAA66PYNK6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJYHAYTIMZUG4 . You are receiving this because you were mentioned.Message ID: @.***>

[takielias]

@cemkoker Could you please update "sass": "~1.64.2" ?

[cemkoker]

Solved.