diff --git a/package.json b/package.json index 1e737b26c4..5e0cc295be 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@nutui/icons-vue": "^0.1.1", "@nutui/icons-vue-taro": "^0.0.9", "@nutui/touch-emulator": "workspace:^", - "sass": "^1.77.6", + "sass": "^1.83.0", "vue-router": "^4.4.0" }, "devDependencies": { @@ -109,7 +109,7 @@ "rimraf": "^6.0.0", "typescript": "^5.4.5", "unplugin-vue-components": "^0.27.2", - "vite": "^5.3.2", + "vite": "^5.4.11", "vite-plugin-vue-devtools": "^7.2.1", "vitest": "^2.0.1", "vitest-canvas-mock": "^0.3.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57ea758d34..542ca10c1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: workspace:^ version: link:packages/nutui-touch-emulator sass: - specifier: ^1.77.6 - version: 1.77.6 + specifier: ^1.83.0 + version: 1.83.0 vue-router: specifier: ^4.4.0 version: 4.4.0(vue@3.5.10(typescript@5.4.5)) @@ -47,22 +47,22 @@ importers: version: link:packages/nutui-vite-plugins '@tarojs/taro': specifier: 3.6.34 - version: 3.6.34(@tarojs/helper@3.6.34)(@tarojs/runtime@3.6.34(@tarojs/shared@3.6.34))(postcss@8.4.47)(vue@3.5.10(typescript@5.4.5)) + version: 3.6.34(@tarojs/helper@3.6.34)(@tarojs/runtime@3.6.34(@tarojs/shared@3.6.34))(postcss@8.4.49)(vue@3.5.10(typescript@5.4.5)) '@types/node': specifier: ^20.14.9 version: 20.14.9 '@vitejs/plugin-vue': specifier: ^5.0.5 - version: 5.0.5(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) + version: 5.0.5(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) '@vitejs/plugin-vue-jsx': specifier: ^4.0.0 - version: 4.0.0(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) + version: 4.0.0(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) '@vitest/coverage-istanbul': specifier: ^2.0.1 - version: 2.0.1(vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) + version: 2.0.1(vitest@2.0.1) '@vitest/coverage-v8': specifier: ^2.0.1 - version: 2.0.1(vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) + version: 2.0.1(vitest@2.0.1) '@vitest/ui': specifier: ^2.0.1 version: 2.0.1(vitest@2.0.1) @@ -71,7 +71,7 @@ importers: version: 2.4.6 autoprefixer: specifier: ^10.4.19 - version: 10.4.19(postcss@8.4.47) + version: 10.4.19(postcss@8.4.49) codesandbox: specifier: ^2.2.3 version: 2.2.3 @@ -116,19 +116,19 @@ importers: version: 5.4.5 unplugin-vue-components: specifier: ^0.27.2 - version: 0.27.2(@babel/parser@7.25.6)(rollup@4.14.3)(vue@3.5.10(typescript@5.4.5)) + version: 0.27.2(@babel/parser@7.25.6)(rollup@4.29.1)(vue@3.5.10(typescript@5.4.5)) vite: - specifier: ^5.3.2 - version: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + specifier: ^5.4.11 + version: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) vite-plugin-vue-devtools: specifier: ^7.2.1 - version: 7.2.1(rollup@4.14.3)(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) + version: 7.2.1(rollup@4.29.1)(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) vitest: specifier: ^2.0.1 - version: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + version: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) vitest-canvas-mock: specifier: ^0.3.3 - version: 0.3.3(vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) + version: 0.3.3(vitest@2.0.1) vue: specifier: ^3.5.10 version: 3.5.10(typescript@5.4.5) @@ -146,7 +146,7 @@ importers: version: 5.4.5 vite: specifier: ^5.3.2 - version: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + version: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) packages/nutui-eslint-config: dependencies: @@ -193,13 +193,13 @@ importers: version: 20.14.9 '@vitejs/plugin-vue': specifier: ^5.0.5 - version: 5.0.5(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.4.31(typescript@5.4.5)) + version: 5.0.5(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.4.31(typescript@5.4.5)) rimraf: specifier: ^6.0.0 version: 6.0.0 vite: specifier: ^5.3.2 - version: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + version: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) vue: specifier: ^3.4.31 version: 3.4.31(typescript@5.4.5) @@ -316,7 +316,7 @@ importers: version: 4.0.0 unplugin-vue-markdown: specifier: ^0.26.2 - version: 0.26.2(rollup@4.14.3)(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) + version: 0.26.2(rollup@4.29.1)(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)) devDependencies: '@shikijs/markdown-it': specifier: ^1.6.0 @@ -329,7 +329,7 @@ importers: version: 2.0.10 tsup: specifier: ^8.0.2 - version: 8.0.2(@swc/core@1.3.96)(postcss@8.4.47)(typescript@5.4.5) + version: 8.0.2(@swc/core@1.3.96)(postcss@8.4.49)(typescript@5.4.5) typescript: specifier: ^5.4.5 version: 5.4.5 @@ -359,7 +359,7 @@ importers: version: 9.2.2 ts-loader: specifier: ^9.5.1 - version: 9.5.1(typescript@5.4.5)(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)) + version: 9.5.1(typescript@5.4.5)(webpack@5.91.0) webpack: specifier: ^5.89.0 version: 5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4) @@ -1810,6 +1810,94 @@ packages: resolution: {integrity: sha512-r5tJWe6NF6lesfPw1N3g7N7WUKpHqi2ONnw9wl5ccSGGIxkmgcPaPQxfvmhdjXvQnktSuIOR0HjQXVXu+/en/w==} engines: {node: '>= 12.0.0'} + '@parcel/watcher-android-arm64@2.5.0': + resolution: {integrity: sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [android] + + '@parcel/watcher-darwin-arm64@2.5.0': + resolution: {integrity: sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [darwin] + + '@parcel/watcher-darwin-x64@2.5.0': + resolution: {integrity: sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [darwin] + + '@parcel/watcher-freebsd-x64@2.5.0': + resolution: {integrity: sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [freebsd] + + '@parcel/watcher-linux-arm-glibc@2.5.0': + resolution: {integrity: sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==} + engines: {node: '>= 10.0.0'} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@parcel/watcher-linux-arm-musl@2.5.0': + resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==} + engines: {node: '>= 10.0.0'} + cpu: [arm] + os: [linux] + libc: [musl] + + '@parcel/watcher-linux-arm64-glibc@2.5.0': + resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@parcel/watcher-linux-arm64-musl@2.5.0': + resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@parcel/watcher-linux-x64-glibc@2.5.0': + resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@parcel/watcher-linux-x64-musl@2.5.0': + resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [linux] + libc: [musl] + + '@parcel/watcher-win32-arm64@2.5.0': + resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==} + engines: {node: '>= 10.0.0'} + cpu: [arm64] + os: [win32] + + '@parcel/watcher-win32-ia32@2.5.0': + resolution: {integrity: sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==} + engines: {node: '>= 10.0.0'} + cpu: [ia32] + os: [win32] + + '@parcel/watcher-win32-x64@2.5.0': + resolution: {integrity: sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==} + engines: {node: '>= 10.0.0'} + cpu: [x64] + os: [win32] + + '@parcel/watcher@2.5.0': + resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==} + engines: {node: '>= 10.0.0'} + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -1831,88 +1919,193 @@ packages: cpu: [arm] os: [android] + '@rollup/rollup-android-arm-eabi@4.29.1': + resolution: {integrity: sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==} + cpu: [arm] + os: [android] + '@rollup/rollup-android-arm64@4.14.3': resolution: {integrity: sha512-eQK5JIi+POhFpzk+LnjKIy4Ks+pwJ+NXmPxOCSvOKSNRPONzKuUvWE+P9JxGZVxrtzm6BAYMaL50FFuPe0oWMQ==} cpu: [arm64] os: [android] + '@rollup/rollup-android-arm64@4.29.1': + resolution: {integrity: sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew==} + cpu: [arm64] + os: [android] + '@rollup/rollup-darwin-arm64@4.14.3': resolution: {integrity: sha512-Od4vE6f6CTT53yM1jgcLqNfItTsLt5zE46fdPaEmeFHvPs5SjZYlLpHrSiHEKR1+HdRfxuzXHjDOIxQyC3ptBA==} cpu: [arm64] os: [darwin] + '@rollup/rollup-darwin-arm64@4.29.1': + resolution: {integrity: sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==} + cpu: [arm64] + os: [darwin] + '@rollup/rollup-darwin-x64@4.14.3': resolution: {integrity: sha512-0IMAO21axJeNIrvS9lSe/PGthc8ZUS+zC53O0VhF5gMxfmcKAP4ESkKOCwEi6u2asUrt4mQv2rjY8QseIEb1aw==} cpu: [x64] os: [darwin] + '@rollup/rollup-darwin-x64@4.29.1': + resolution: {integrity: sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng==} + cpu: [x64] + os: [darwin] + + '@rollup/rollup-freebsd-arm64@4.29.1': + resolution: {integrity: sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw==} + cpu: [arm64] + os: [freebsd] + + '@rollup/rollup-freebsd-x64@4.29.1': + resolution: {integrity: sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w==} + cpu: [x64] + os: [freebsd] + '@rollup/rollup-linux-arm-gnueabihf@4.14.3': resolution: {integrity: sha512-ge2DC7tHRHa3caVEoSbPRJpq7azhG+xYsd6u2MEnJ6XzPSzQsTKyXvh6iWjXRf7Rt9ykIUWHtl0Uz3T6yXPpKw==} cpu: [arm] os: [linux] + '@rollup/rollup-linux-arm-gnueabihf@4.29.1': + resolution: {integrity: sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A==} + cpu: [arm] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-arm-musleabihf@4.14.3': resolution: {integrity: sha512-ljcuiDI4V3ySuc7eSk4lQ9wU8J8r8KrOUvB2U+TtK0TiW6OFDmJ+DdIjjwZHIw9CNxzbmXY39wwpzYuFDwNXuw==} cpu: [arm] os: [linux] + '@rollup/rollup-linux-arm-musleabihf@4.29.1': + resolution: {integrity: sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ==} + cpu: [arm] + os: [linux] + libc: [musl] + '@rollup/rollup-linux-arm64-gnu@4.14.3': resolution: {integrity: sha512-Eci2us9VTHm1eSyn5/eEpaC7eP/mp5n46gTRB3Aar3BgSvDQGJZuicyq6TsH4HngNBgVqC5sDYxOzTExSU+NjA==} cpu: [arm64] os: [linux] libc: [glibc] + '@rollup/rollup-linux-arm64-gnu@4.29.1': + resolution: {integrity: sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA==} + cpu: [arm64] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-arm64-musl@4.14.3': resolution: {integrity: sha512-UrBoMLCq4E92/LCqlh+blpqMz5h1tJttPIniwUgOFJyjWI1qrtrDhhpHPuFxULlUmjFHfloWdixtDhSxJt5iKw==} cpu: [arm64] os: [linux] libc: [musl] + '@rollup/rollup-linux-arm64-musl@4.29.1': + resolution: {integrity: sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-loongarch64-gnu@4.29.1': + resolution: {integrity: sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw==} + cpu: [loong64] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-powerpc64le-gnu@4.14.3': resolution: {integrity: sha512-5aRjvsS8q1nWN8AoRfrq5+9IflC3P1leMoy4r2WjXyFqf3qcqsxRCfxtZIV58tCxd+Yv7WELPcO9mY9aeQyAmw==} cpu: [ppc64] os: [linux] libc: [glibc] + '@rollup/rollup-linux-powerpc64le-gnu@4.29.1': + resolution: {integrity: sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-riscv64-gnu@4.14.3': resolution: {integrity: sha512-sk/Qh1j2/RJSX7FhEpJn8n0ndxy/uf0kI/9Zc4b1ELhqULVdTfN6HL31CDaTChiBAOgLcsJ1sgVZjWv8XNEsAQ==} cpu: [riscv64] os: [linux] libc: [glibc] + '@rollup/rollup-linux-riscv64-gnu@4.29.1': + resolution: {integrity: sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ==} + cpu: [riscv64] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-s390x-gnu@4.14.3': resolution: {integrity: sha512-jOO/PEaDitOmY9TgkxF/TQIjXySQe5KVYB57H/8LRP/ux0ZoO8cSHCX17asMSv3ruwslXW/TLBcxyaUzGRHcqg==} cpu: [s390x] os: [linux] libc: [glibc] + '@rollup/rollup-linux-s390x-gnu@4.29.1': + resolution: {integrity: sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g==} + cpu: [s390x] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-x64-gnu@4.14.3': resolution: {integrity: sha512-8ybV4Xjy59xLMyWo3GCfEGqtKV5M5gCSrZlxkPGvEPCGDLNla7v48S662HSGwRd6/2cSneMQWiv+QzcttLrrOA==} cpu: [x64] os: [linux] libc: [glibc] + '@rollup/rollup-linux-x64-gnu@4.29.1': + resolution: {integrity: sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ==} + cpu: [x64] + os: [linux] + libc: [glibc] + '@rollup/rollup-linux-x64-musl@4.14.3': resolution: {integrity: sha512-s+xf1I46trOY10OqAtZ5Rm6lzHre/UiLA1J2uOhCFXWkbZrJRkYBPO6FhvGfHmdtQ3Bx793MNa7LvoWFAm93bg==} cpu: [x64] os: [linux] libc: [musl] + '@rollup/rollup-linux-x64-musl@4.29.1': + resolution: {integrity: sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA==} + cpu: [x64] + os: [linux] + libc: [musl] + '@rollup/rollup-win32-arm64-msvc@4.14.3': resolution: {integrity: sha512-+4h2WrGOYsOumDQ5S2sYNyhVfrue+9tc9XcLWLh+Kw3UOxAvrfOrSMFon60KspcDdytkNDh7K2Vs6eMaYImAZg==} cpu: [arm64] os: [win32] + '@rollup/rollup-win32-arm64-msvc@4.29.1': + resolution: {integrity: sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig==} + cpu: [arm64] + os: [win32] + '@rollup/rollup-win32-ia32-msvc@4.14.3': resolution: {integrity: sha512-T1l7y/bCeL/kUwh9OD4PQT4aM7Bq43vX05htPJJ46RTI4r5KNt6qJRzAfNfM+OYMNEVBWQzR2Gyk+FXLZfogGw==} cpu: [ia32] os: [win32] + '@rollup/rollup-win32-ia32-msvc@4.29.1': + resolution: {integrity: sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng==} + cpu: [ia32] + os: [win32] + '@rollup/rollup-win32-x64-msvc@4.14.3': resolution: {integrity: sha512-/BypzV0H1y1HzgYpxqRaXGBRqfodgoBBCcsrujT6QRcakDQdfU+Lq9PENPh5jB4I44YWq+0C2eHsHya+nZY1sA==} cpu: [x64] os: [win32] + '@rollup/rollup-win32-x64-msvc@4.29.1': + resolution: {integrity: sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg==} + cpu: [x64] + os: [win32] + '@shikijs/core@1.6.0': resolution: {integrity: sha512-NIEAi5U5R7BLkbW1pG/ZKu3eb1lzc3/+jD0lFsuxMT7zjaf9bbNwdNyMr7zh/Zl8EXQtQ+MYBAt5G+JLu+5DlA==} @@ -2086,6 +2279,7 @@ packages: engines: {node: '>= 16'} cpu: [x64] os: [linux] + libc: [glibc] '@tarojs/binding-win32-x64-msvc@3.6.34': resolution: {integrity: sha512-vEO0autpmk1k+EHOdEsJcDgozzJn6BsDeJcD3nwKMMBfRoyE+nilUJD6XFmFP/GaBRP4nLgsUvsshVaC+GOJ5A==} @@ -2169,24 +2363,28 @@ packages: engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [glibc] '@tarojs/plugin-doctor-linux-arm64-musl@0.0.11': resolution: {integrity: sha512-SXes1wj2MLQod50+9sgSZlN4eli3VXVxMNqdk03ArrWtFURCpuDiHwRERjoqlo91Hf4IxU6zU7ml86gPZ0dkaw==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] + libc: [musl] '@tarojs/plugin-doctor-linux-x64-gnu@0.0.11': resolution: {integrity: sha512-nyW2tjzYA8nw39pKpaYtpGbEOZNRTV97Ir+UEvsuZbAr5F1lV2Q+2IwN8dGY41/lXw9JQay6FDRqUPRXAMB4kw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [glibc] '@tarojs/plugin-doctor-linux-x64-musl@0.0.11': resolution: {integrity: sha512-epKcAwJdVYMGmeWdqGZrdOS+nhDz4SiGlZqYMcDjSlGK7OM0wlSor6xpz59adYVe86t/a/gjimu5IT2ofVEfsA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] + libc: [musl] '@tarojs/plugin-doctor-win32-ia32-msvc@0.0.11': resolution: {integrity: sha512-UBKdbbtDK1QmsRZiKEjo+TtSt+E/ljIzx5wbDna2yEuDtJqBwNg6SqkYg3LxUiJK8O5hwwVJGdJWI9a9bHpI8w==} @@ -2358,6 +2556,9 @@ packages: '@types/estree@1.0.5': resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + '@types/estree@1.0.6': + resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} + '@types/express-serve-static-core@4.19.0': resolution: {integrity: sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==} @@ -2895,6 +3096,7 @@ packages: acorn-import-assertions@1.9.0: resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==} + deprecated: package has been renamed to acorn-import-attributes peerDependencies: acorn: ^8 @@ -3237,6 +3439,10 @@ packages: resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} engines: {node: '>=8'} + braces@3.0.3: + resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} + engines: {node: '>=8'} + browser-stdout@1.3.1: resolution: {integrity: sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==} @@ -3417,6 +3623,10 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} + chokidar@4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -4660,11 +4870,13 @@ packages: eslint@8.41.0: resolution: {integrity: sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true eslint@8.57.0: resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true eslint@9.6.0: @@ -4879,6 +5091,10 @@ packages: resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} engines: {node: '>=8'} + fill-range@7.1.1: + resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} + engines: {node: '>=8'} + filter-obj@1.1.0: resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==} engines: {node: '>=0.10.0'} @@ -5491,8 +5707,11 @@ packages: immediate@3.0.6: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} - immutable@4.3.5: - resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==} + immutable@4.3.7: + resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==} + + immutable@5.0.3: + resolution: {integrity: sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==} import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} @@ -6380,6 +6599,10 @@ packages: resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} engines: {node: '>=8.6'} + micromatch@4.0.8: + resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} + engines: {node: '>=8.6'} + mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -6597,6 +6820,11 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + nanoid@3.3.8: + resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + napi-build-utils@1.0.2: resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==} @@ -6631,6 +6859,9 @@ packages: node-addon-api@4.3.0: resolution: {integrity: sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==} + node-addon-api@7.1.1: + resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==} + node-emoji@1.11.0: resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==} @@ -7025,6 +7256,9 @@ packages: picocolors@1.1.0: resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==} + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} @@ -7352,6 +7586,10 @@ packages: resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} engines: {node: ^10 || ^12 || >=14} + postcss@8.4.49: + resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} + engines: {node: ^10 || ^12 || >=14} + prebuild-install@7.1.2: resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==} engines: {node: '>=10'} @@ -7574,6 +7812,10 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + readdirp@4.0.2: + resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==} + engines: {node: '>= 14.16.0'} + rechoir@0.8.0: resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==} engines: {node: '>= 10.13.0'} @@ -7734,6 +7976,11 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + rollup@4.29.1: + resolution: {integrity: sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + rrweb-cssom@0.6.0: resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} @@ -7795,8 +8042,8 @@ packages: engines: {node: '>=12.0.0'} hasBin: true - sass@1.77.6: - resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==} + sass@1.83.0: + resolution: {integrity: sha512-qsSxlayzoOjdvXMVLkzF84DJFc2HZEL/rFyGIKbbilYtAvlCxyuzUeff9LawTn4btVnLKg75Z8MMr1lxU1lfGw==} engines: {node: '>=14.0.0'} hasBin: true @@ -8802,6 +9049,37 @@ packages: terser: optional: true + vite@5.4.11: + resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + vitest-canvas-mock@0.3.3: resolution: {integrity: sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==} peerDependencies: @@ -9230,7 +9508,7 @@ snapshots: '@babel/code-frame@7.24.2': dependencies: '@babel/highlight': 7.24.2 - picocolors: 1.1.0 + picocolors: 1.0.1 '@babel/code-frame@7.24.6': dependencies: @@ -9451,7 +9729,7 @@ snapshots: '@babel/helper-validator-identifier': 7.24.7 chalk: 2.4.2 js-tokens: 4.0.0 - picocolors: 1.1.0 + picocolors: 1.0.1 '@babel/highlight@7.24.6': dependencies: @@ -10783,67 +11061,185 @@ snapshots: dependencies: lightningcss: 1.24.1 + '@parcel/watcher-android-arm64@2.5.0': + optional: true + + '@parcel/watcher-darwin-arm64@2.5.0': + optional: true + + '@parcel/watcher-darwin-x64@2.5.0': + optional: true + + '@parcel/watcher-freebsd-x64@2.5.0': + optional: true + + '@parcel/watcher-linux-arm-glibc@2.5.0': + optional: true + + '@parcel/watcher-linux-arm-musl@2.5.0': + optional: true + + '@parcel/watcher-linux-arm64-glibc@2.5.0': + optional: true + + '@parcel/watcher-linux-arm64-musl@2.5.0': + optional: true + + '@parcel/watcher-linux-x64-glibc@2.5.0': + optional: true + + '@parcel/watcher-linux-x64-musl@2.5.0': + optional: true + + '@parcel/watcher-win32-arm64@2.5.0': + optional: true + + '@parcel/watcher-win32-ia32@2.5.0': + optional: true + + '@parcel/watcher-win32-x64@2.5.0': + optional: true + + '@parcel/watcher@2.5.0': + dependencies: + detect-libc: 1.0.3 + is-glob: 4.0.3 + micromatch: 4.0.8 + node-addon-api: 7.1.1 + optionalDependencies: + '@parcel/watcher-android-arm64': 2.5.0 + '@parcel/watcher-darwin-arm64': 2.5.0 + '@parcel/watcher-darwin-x64': 2.5.0 + '@parcel/watcher-freebsd-x64': 2.5.0 + '@parcel/watcher-linux-arm-glibc': 2.5.0 + '@parcel/watcher-linux-arm-musl': 2.5.0 + '@parcel/watcher-linux-arm64-glibc': 2.5.0 + '@parcel/watcher-linux-arm64-musl': 2.5.0 + '@parcel/watcher-linux-x64-glibc': 2.5.0 + '@parcel/watcher-linux-x64-musl': 2.5.0 + '@parcel/watcher-win32-arm64': 2.5.0 + '@parcel/watcher-win32-ia32': 2.5.0 + '@parcel/watcher-win32-x64': 2.5.0 + optional: true + '@pkgjs/parseargs@0.11.0': optional: true '@polka/url@1.0.0-next.25': {} - '@rollup/pluginutils@5.1.0(rollup@4.14.3)': + '@rollup/pluginutils@5.1.0(rollup@4.29.1)': dependencies: '@types/estree': 1.0.5 estree-walker: 2.0.2 picomatch: 2.3.1 optionalDependencies: - rollup: 4.14.3 + rollup: 4.29.1 '@rollup/rollup-android-arm-eabi@4.14.3': optional: true + '@rollup/rollup-android-arm-eabi@4.29.1': + optional: true + '@rollup/rollup-android-arm64@4.14.3': optional: true + '@rollup/rollup-android-arm64@4.29.1': + optional: true + '@rollup/rollup-darwin-arm64@4.14.3': optional: true + '@rollup/rollup-darwin-arm64@4.29.1': + optional: true + '@rollup/rollup-darwin-x64@4.14.3': optional: true + '@rollup/rollup-darwin-x64@4.29.1': + optional: true + + '@rollup/rollup-freebsd-arm64@4.29.1': + optional: true + + '@rollup/rollup-freebsd-x64@4.29.1': + optional: true + '@rollup/rollup-linux-arm-gnueabihf@4.14.3': optional: true + '@rollup/rollup-linux-arm-gnueabihf@4.29.1': + optional: true + '@rollup/rollup-linux-arm-musleabihf@4.14.3': optional: true + '@rollup/rollup-linux-arm-musleabihf@4.29.1': + optional: true + '@rollup/rollup-linux-arm64-gnu@4.14.3': optional: true + '@rollup/rollup-linux-arm64-gnu@4.29.1': + optional: true + '@rollup/rollup-linux-arm64-musl@4.14.3': optional: true + '@rollup/rollup-linux-arm64-musl@4.29.1': + optional: true + + '@rollup/rollup-linux-loongarch64-gnu@4.29.1': + optional: true + '@rollup/rollup-linux-powerpc64le-gnu@4.14.3': optional: true + '@rollup/rollup-linux-powerpc64le-gnu@4.29.1': + optional: true + '@rollup/rollup-linux-riscv64-gnu@4.14.3': optional: true + '@rollup/rollup-linux-riscv64-gnu@4.29.1': + optional: true + '@rollup/rollup-linux-s390x-gnu@4.14.3': optional: true + '@rollup/rollup-linux-s390x-gnu@4.29.1': + optional: true + '@rollup/rollup-linux-x64-gnu@4.14.3': optional: true + '@rollup/rollup-linux-x64-gnu@4.29.1': + optional: true + '@rollup/rollup-linux-x64-musl@4.14.3': optional: true + '@rollup/rollup-linux-x64-musl@4.29.1': + optional: true + '@rollup/rollup-win32-arm64-msvc@4.14.3': optional: true + '@rollup/rollup-win32-arm64-msvc@4.29.1': + optional: true + '@rollup/rollup-win32-ia32-msvc@4.14.3': optional: true + '@rollup/rollup-win32-ia32-msvc@4.29.1': + optional: true + '@rollup/rollup-win32-x64-msvc@4.14.3': optional: true + '@rollup/rollup-win32-x64-msvc@4.29.1': + optional: true + '@shikijs/core@1.6.0': {} '@shikijs/markdown-it@1.6.0': @@ -11419,13 +11815,13 @@ snapshots: postcss: 8.4.39 vue: 3.4.31(typescript@5.4.5) - '@tarojs/taro@3.6.34(@tarojs/helper@3.6.34)(@tarojs/runtime@3.6.34(@tarojs/shared@3.6.34))(postcss@8.4.47)(vue@3.5.10(typescript@5.4.5))': + '@tarojs/taro@3.6.34(@tarojs/helper@3.6.34)(@tarojs/runtime@3.6.34(@tarojs/shared@3.6.34))(postcss@8.4.49)(vue@3.5.10(typescript@5.4.5))': dependencies: '@tarojs/api': 3.6.34 '@tarojs/helper': 3.6.34 '@tarojs/runtime': 3.6.34(@tarojs/shared@3.6.34) optionalDependencies: - postcss: 8.4.47 + postcss: 8.4.49 vue: 3.5.10(typescript@5.4.5) '@tarojs/webpack5-prebundle@3.6.34(@tarojs/runtime@3.6.34(@tarojs/shared@3.6.34))(postcss@8.4.38)(vue@3.4.31(typescript@5.4.5))(webpack@5.91.0(@swc/core@1.3.96)(esbuild@0.21.5))': @@ -11639,6 +12035,8 @@ snapshots: '@types/estree@1.0.5': {} + '@types/estree@1.0.6': {} + '@types/express-serve-static-core@4.19.0': dependencies: '@types/node': 20.14.9 @@ -11754,7 +12152,7 @@ snapshots: '@types/sass@1.45.0': dependencies: - sass: 1.77.6 + sass: 1.50.0 '@types/send@0.17.4': dependencies: @@ -11954,27 +12352,27 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5))': + '@vitejs/plugin-vue-jsx@4.0.0(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5))': dependencies: '@babel/core': 7.24.6 '@babel/plugin-transform-typescript': 7.24.6(@babel/core@7.24.6) '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.6) - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) vue: 3.5.10(typescript@5.4.5) transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue@5.0.5(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.4.31(typescript@5.4.5))': + '@vitejs/plugin-vue@5.0.5(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.4.31(typescript@5.4.5))': dependencies: - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) vue: 3.4.31(typescript@5.4.5) - '@vitejs/plugin-vue@5.0.5(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5))': + '@vitejs/plugin-vue@5.0.5(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5))': dependencies: - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) vue: 3.5.10(typescript@5.4.5) - '@vitest/coverage-istanbul@2.0.1(vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))': + '@vitest/coverage-istanbul@2.0.1(vitest@2.0.1)': dependencies: '@istanbuljs/schema': 0.1.3 debug: 4.3.5 @@ -11986,11 +12384,11 @@ snapshots: magicast: 0.3.4 picocolors: 1.0.1 test-exclude: 7.0.1 - vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) transitivePeerDependencies: - supports-color - '@vitest/coverage-v8@2.0.1(vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))': + '@vitest/coverage-v8@2.0.1(vitest@2.0.1)': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 0.2.3 @@ -12005,7 +12403,7 @@ snapshots: std-env: 3.7.0 strip-literal: 2.1.0 test-exclude: 7.0.1 - vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) transitivePeerDependencies: - supports-color @@ -12039,7 +12437,7 @@ snapshots: pathe: 1.1.2 picocolors: 1.0.1 sirv: 2.0.4 - vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) '@vitest/utils@2.0.1': dependencies: @@ -12260,14 +12658,14 @@ snapshots: '@vue/devtools-api@6.6.1': {} - '@vue/devtools-core@7.2.1(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5))': + '@vue/devtools-core@7.2.1(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5))': dependencies: '@vue/devtools-kit': 7.2.1(vue@3.5.10(typescript@5.4.5)) '@vue/devtools-shared': 7.2.1 mitt: 3.0.1 nanoid: 3.3.7 pathe: 1.1.2 - vite-hot-client: 0.2.3(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) + vite-hot-client: 0.2.3(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)) transitivePeerDependencies: - vite - vue @@ -12430,17 +12828,17 @@ snapshots: '@webassemblyjs/ast': 1.12.1 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4))': + '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: webpack: 5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.91.0) - '@webpack-cli/info@2.0.2(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4))': + '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: webpack: 5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.91.0) - '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4))': + '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: webpack: 5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.91.0) @@ -12629,14 +13027,14 @@ snapshots: atob@2.1.2: {} - autoprefixer@10.4.19(postcss@8.4.47): + autoprefixer@10.4.19(postcss@8.4.49): dependencies: browserslist: 4.23.0 caniuse-lite: 1.0.30001611 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.47 + postcss: 8.4.49 postcss-value-parser: 4.2.0 autoprefixer@9.8.8: @@ -12852,6 +13250,10 @@ snapshots: dependencies: fill-range: 7.0.1 + braces@3.0.3: + dependencies: + fill-range: 7.1.1 + browser-stdout@1.3.1: {} browserslist@4.23.0: @@ -13122,6 +13524,10 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + chokidar@4.0.3: + dependencies: + readdirp: 4.0.2 + chownr@1.1.4: {} chrome-trace-event@1.0.3: {} @@ -14612,6 +15018,10 @@ snapshots: dependencies: to-regex-range: 5.0.1 + fill-range@7.1.1: + dependencies: + to-regex-range: 5.0.1 + filter-obj@1.1.0: {} finalhandler@1.2.0: @@ -14673,7 +15083,7 @@ snapshots: find-yarn-workspace-root2@1.2.16: dependencies: - micromatch: 4.0.5 + micromatch: 4.0.8 pkg-dir: 4.2.0 find-yarn-workspace-root@2.0.0: @@ -14684,7 +15094,7 @@ snapshots: dependencies: detect-file: 1.0.0 is-glob: 4.0.3 - micromatch: 4.0.5 + micromatch: 4.0.8 resolve-dir: 1.0.1 flat-cache@3.2.0: @@ -15355,7 +15765,9 @@ snapshots: immediate@3.0.6: {} - immutable@4.3.5: {} + immutable@4.3.7: {} + + immutable@5.0.3: {} import-fresh@3.3.0: dependencies: @@ -16264,6 +16676,11 @@ snapshots: braces: 3.0.2 picomatch: 2.3.1 + micromatch@4.0.8: + dependencies: + braces: 3.0.3 + picomatch: 2.3.1 + mime-db@1.52.0: {} mime-types@2.1.35: @@ -16495,6 +16912,8 @@ snapshots: nanoid@3.3.7: {} + nanoid@3.3.8: {} + napi-build-utils@1.0.2: optional: true @@ -16530,6 +16949,9 @@ snapshots: node-addon-api@4.3.0: optional: true + node-addon-api@7.1.1: + optional: true + node-emoji@1.11.0: dependencies: lodash: 4.17.21 @@ -16967,6 +17389,8 @@ snapshots: picocolors@1.1.0: {} + picocolors@1.1.1: {} + picomatch@2.3.1: {} picomatch@4.0.2: {} @@ -17066,12 +17490,12 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.8 - postcss-load-config@4.0.2(postcss@8.4.47): + postcss-load-config@4.0.2(postcss@8.4.49): dependencies: lilconfig: 3.1.1 yaml: 2.4.1 optionalDependencies: - postcss: 8.4.47 + postcss: 8.4.49 postcss-loader@7.3.4(postcss@8.4.38)(typescript@5.4.5)(webpack@5.91.0(@swc/core@1.3.96)(esbuild@0.21.5)): dependencies: @@ -17294,6 +17718,12 @@ snapshots: picocolors: 1.1.0 source-map-js: 1.2.1 + postcss@8.4.49: + dependencies: + nanoid: 3.3.8 + picocolors: 1.1.1 + source-map-js: 1.2.1 + prebuild-install@7.1.2: dependencies: detect-libc: 2.0.3 @@ -17541,6 +17971,8 @@ snapshots: dependencies: picomatch: 2.3.1 + readdirp@4.0.2: {} + rechoir@0.8.0: dependencies: resolve: 1.22.8 @@ -17735,6 +18167,31 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.14.3 fsevents: 2.3.3 + rollup@4.29.1: + dependencies: + '@types/estree': 1.0.6 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.29.1 + '@rollup/rollup-android-arm64': 4.29.1 + '@rollup/rollup-darwin-arm64': 4.29.1 + '@rollup/rollup-darwin-x64': 4.29.1 + '@rollup/rollup-freebsd-arm64': 4.29.1 + '@rollup/rollup-freebsd-x64': 4.29.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.29.1 + '@rollup/rollup-linux-arm-musleabihf': 4.29.1 + '@rollup/rollup-linux-arm64-gnu': 4.29.1 + '@rollup/rollup-linux-arm64-musl': 4.29.1 + '@rollup/rollup-linux-loongarch64-gnu': 4.29.1 + '@rollup/rollup-linux-powerpc64le-gnu': 4.29.1 + '@rollup/rollup-linux-riscv64-gnu': 4.29.1 + '@rollup/rollup-linux-s390x-gnu': 4.29.1 + '@rollup/rollup-linux-x64-gnu': 4.29.1 + '@rollup/rollup-linux-x64-musl': 4.29.1 + '@rollup/rollup-win32-arm64-msvc': 4.29.1 + '@rollup/rollup-win32-ia32-msvc': 4.29.1 + '@rollup/rollup-win32-x64-msvc': 4.29.1 + fsevents: 2.3.3 + rrweb-cssom@0.6.0: {} run-applescript@7.0.0: {} @@ -17778,14 +18235,16 @@ snapshots: sass@1.50.0: dependencies: chokidar: 3.6.0 - immutable: 4.3.5 + immutable: 4.3.7 source-map-js: 1.2.0 - sass@1.77.6: + sass@1.83.0: dependencies: - chokidar: 3.6.0 - immutable: 4.3.5 + chokidar: 4.0.3 + immutable: 5.0.3 source-map-js: 1.2.0 + optionalDependencies: + '@parcel/watcher': 2.5.0 sax@1.2.4: {} @@ -17832,7 +18291,7 @@ snapshots: loglevel: 1.9.1 loglevel-plugin-prefix: 0.8.4 pretty-bytes: 5.6.0 - sass: 1.77.6 + sass: 1.50.0 tslib: 1.14.1 section-matter@1.0.0: @@ -18347,7 +18806,7 @@ snapshots: css-select: 4.3.0 css-tree: 1.1.3 csso: 4.2.0 - picocolors: 1.1.0 + picocolors: 1.1.1 stable: 0.1.8 swiper@6.8.0: @@ -18431,7 +18890,7 @@ snapshots: '@swc/core': 1.3.96 esbuild: 0.21.5 - terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)): + terser-webpack-plugin@5.3.10(esbuild@0.21.5)(webpack@5.91.0): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 @@ -18546,7 +19005,7 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-loader@9.5.1(typescript@5.4.5)(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)): + ts-loader@9.5.1(typescript@5.4.5)(webpack@5.91.0): dependencies: chalk: 4.1.2 enhanced-resolve: 5.16.0 @@ -18560,7 +19019,7 @@ snapshots: tslib@2.6.2: {} - tsup@8.0.2(@swc/core@1.3.96)(postcss@8.4.47)(typescript@5.4.5): + tsup@8.0.2(@swc/core@1.3.96)(postcss@8.4.49)(typescript@5.4.5): dependencies: bundle-require: 4.0.2(esbuild@0.19.12) cac: 6.7.14 @@ -18570,7 +19029,7 @@ snapshots: execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss-load-config: 4.0.2(postcss@8.4.47) + postcss-load-config: 4.0.2(postcss@8.4.49) resolve-from: 5.0.0 rollup: 4.14.3 source-map: 0.8.0-beta.0 @@ -18578,7 +19037,7 @@ snapshots: tree-kill: 1.2.2 optionalDependencies: '@swc/core': 1.3.96 - postcss: 8.4.47 + postcss: 8.4.49 typescript: 5.4.5 transitivePeerDependencies: - supports-color @@ -18710,10 +19169,10 @@ snapshots: unpipe@1.0.0: {} - unplugin-vue-components@0.27.2(@babel/parser@7.25.6)(rollup@4.14.3)(vue@3.5.10(typescript@5.4.5)): + unplugin-vue-components@0.27.2(@babel/parser@7.25.6)(rollup@4.29.1)(vue@3.5.10(typescript@5.4.5)): dependencies: '@antfu/utils': 0.7.10 - '@rollup/pluginutils': 5.1.0(rollup@4.14.3) + '@rollup/pluginutils': 5.1.0(rollup@4.29.1) chokidar: 3.6.0 debug: 4.3.5 fast-glob: 3.3.2 @@ -18729,16 +19188,16 @@ snapshots: - rollup - supports-color - unplugin-vue-markdown@0.26.2(rollup@4.14.3)(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)): + unplugin-vue-markdown@0.26.2(rollup@4.29.1)(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)): dependencies: '@mdit-vue/plugin-component': 2.1.2 '@mdit-vue/plugin-frontmatter': 2.1.2 '@mdit-vue/types': 2.1.0 - '@rollup/pluginutils': 5.1.0(rollup@4.14.3) + '@rollup/pluginutils': 5.1.0(rollup@4.29.1) '@types/markdown-it': 14.0.1 markdown-it: 14.1.0 unplugin: 1.10.1 - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) transitivePeerDependencies: - rollup @@ -18858,31 +19317,32 @@ snapshots: core-util-is: 1.0.2 extsprintf: 1.3.0 - vite-hot-client@0.2.3(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)): + vite-hot-client@0.2.3(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)): dependencies: - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) - vite-node@2.0.1(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3): + vite-node@2.0.1(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3): dependencies: cac: 6.7.14 debug: 4.3.5 pathe: 1.1.2 picocolors: 1.0.1 - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) transitivePeerDependencies: - '@types/node' - less - lightningcss - sass + - sass-embedded - stylus - sugarss - supports-color - terser - vite-plugin-inspect@0.8.4(rollup@4.14.3)(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)): + vite-plugin-inspect@0.8.4(rollup@4.29.1)(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)): dependencies: '@antfu/utils': 0.7.10 - '@rollup/pluginutils': 5.1.0(rollup@4.14.3) + '@rollup/pluginutils': 5.1.0(rollup@4.29.1) debug: 4.3.5 error-stack-parser-es: 0.1.1 fs-extra: 11.2.0 @@ -18890,28 +19350,28 @@ snapshots: perfect-debounce: 1.0.0 picocolors: 1.0.1 sirv: 2.0.4 - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) transitivePeerDependencies: - rollup - supports-color - vite-plugin-vue-devtools@7.2.1(rollup@4.14.3)(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)): + vite-plugin-vue-devtools@7.2.1(rollup@4.29.1)(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)): dependencies: - '@vue/devtools-core': 7.2.1(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) + '@vue/devtools-core': 7.2.1(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3))(vue@3.5.10(typescript@5.4.5)) '@vue/devtools-kit': 7.2.1(vue@3.5.10(typescript@5.4.5)) '@vue/devtools-shared': 7.2.1 execa: 8.0.1 sirv: 2.0.4 - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) - vite-plugin-inspect: 0.8.4(rollup@4.14.3)(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) - vite-plugin-vue-inspector: 5.1.0(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) + vite-plugin-inspect: 0.8.4(rollup@4.29.1)(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)) + vite-plugin-vue-inspector: 5.1.0(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)) transitivePeerDependencies: - '@nuxt/kit' - rollup - supports-color - vue - vite-plugin-vue-inspector@5.1.0(vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)): + vite-plugin-vue-inspector@5.1.0(vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3)): dependencies: '@babel/core': 7.24.6 '@babel/plugin-proposal-decorators': 7.24.1(@babel/core@7.24.6) @@ -18922,11 +19382,11 @@ snapshots: '@vue/compiler-dom': 3.5.10 kolorist: 1.8.0 magic-string: 0.30.10 - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) transitivePeerDependencies: - supports-color - vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3): + vite@5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3): dependencies: esbuild: 0.21.5 postcss: 8.4.38 @@ -18936,16 +19396,30 @@ snapshots: fsevents: 2.3.3 less: 4.2.0 lightningcss: 1.24.1 - sass: 1.77.6 + sass: 1.83.0 + stylus: 0.55.0 + terser: 5.30.3 + + vite@5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3): + dependencies: + esbuild: 0.21.5 + postcss: 8.4.49 + rollup: 4.29.1 + optionalDependencies: + '@types/node': 20.14.9 + fsevents: 2.3.3 + less: 4.2.0 + lightningcss: 1.24.1 + sass: 1.83.0 stylus: 0.55.0 terser: 5.30.3 - vitest-canvas-mock@0.3.3(vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3)): + vitest-canvas-mock@0.3.3(vitest@2.0.1): dependencies: jest-canvas-mock: 2.5.2 - vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vitest: 2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) - vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3): + vitest@2.0.1(@types/node@20.14.9)(@vitest/ui@2.0.1)(happy-dom@14.12.3)(jsdom@21.1.2)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3): dependencies: '@ampproject/remapping': 2.3.0 '@vitest/expect': 2.0.1 @@ -18962,8 +19436,8 @@ snapshots: std-env: 3.7.0 tinybench: 2.8.0 tinypool: 1.0.0 - vite: 5.3.2(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) - vite-node: 2.0.1(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.77.6)(stylus@0.55.0)(terser@5.30.3) + vite: 5.4.11(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) + vite-node: 2.0.1(@types/node@20.14.9)(less@4.2.0)(lightningcss@1.24.1)(sass@1.83.0)(stylus@0.55.0)(terser@5.30.3) why-is-node-running: 2.2.2 optionalDependencies: '@types/node': 20.14.9 @@ -18974,6 +19448,7 @@ snapshots: - less - lightningcss - sass + - sass-embedded - stylus - sugarss - supports-color @@ -19151,9 +19626,9 @@ snapshots: webpack-cli@5.1.4(webpack@5.91.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)) - '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)) - '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4(webpack@5.91.0))(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)) + '@webpack-cli/configtest': 2.1.1(webpack-cli@5.1.4)(webpack@5.91.0) + '@webpack-cli/info': 2.0.2(webpack-cli@5.1.4)(webpack@5.91.0) + '@webpack-cli/serve': 2.0.5(webpack-cli@5.1.4)(webpack@5.91.0) colorette: 2.0.20 commander: 10.0.1 cross-spawn: 7.0.3 @@ -19291,7 +19766,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.91.0(esbuild@0.21.5)(webpack-cli@5.1.4)) + terser-webpack-plugin: 5.3.10(esbuild@0.21.5)(webpack@5.91.0) watchpack: 2.4.1 webpack-sources: 3.2.3 optionalDependencies: diff --git a/scripts/generate-nutui-taro-vue.cjs b/scripts/generate-nutui-taro-vue.cjs index d16900ef6e..0839244444 100644 --- a/scripts/generate-nutui-taro-vue.cjs +++ b/scripts/generate-nutui-taro-vue.cjs @@ -26,7 +26,7 @@ config.nav.map((item) => { }.vue'\n` } } - importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss'\n` + importScssStr += `@use './__VUE/${name.toLowerCase()}/index.scss' as ${name.toLowerCase()}\n` if (exclude !== true) { packages.push(name) } diff --git a/scripts/generate-nutui.cjs b/scripts/generate-nutui.cjs index 7eeb055a67..f2a38ffbbd 100644 --- a/scripts/generate-nutui.cjs +++ b/scripts/generate-nutui.cjs @@ -27,7 +27,7 @@ config.nav.map((item) => { methods.push(`show${name}`) } } - importScssStr += `import './__VUE/${name.toLowerCase()}/index.scss'\n` + importScssStr += `@use './__VUE/${name.toLowerCase()}/index.scss' as ${name.toLowerCase()}\n` if (exclude != true) { packages.push(name) } diff --git a/scripts/generate-themes.cjs b/scripts/generate-themes.cjs index 7269fa262e..8730a7e530 100644 --- a/scripts/generate-themes.cjs +++ b/scripts/generate-themes.cjs @@ -6,14 +6,12 @@ const sass = require('sass') let sassFileStr = `` let tasks = [] -if (!target) { - sassFileStr += `@import '@nutui/icons-vue/dist/style_icon.css';\n` -} + config.nav.map((item) => { item.packages.forEach((element) => { let folderName = element.name.toLowerCase() if (element.exclude != true) { - sassFileStr += `@import '../../packages/${folderName}/index.scss';\n` + sassFileStr += `@use '../../packages/${folderName}/index.scss' as ${folderName};\n` } tasks.push( fs @@ -27,6 +25,10 @@ config.nav.map((item) => { ) }) }) +// use指令必须在前面，否则会报错 +if (!target) { + sassFileStr += `@import '@nutui/icons-vue/dist/style_icon.css';\n` +} tasks.push(fs.copy(path.resolve(__dirname, '../src/packages/styles'), path.resolve(__dirname, '../dist/styles'))) @@ -49,7 +51,7 @@ const sassTocss = () => { // 写入main.scss，引入变量文件variables.scss和组件样式index.scss fs.outputFile( filePath, - `@import '../../styles/variables.scss';\n@import './index.scss';\n`, + `@use '../../styles/variables.scss' as vars;\n@use './index.scss';\n`, 'utf8', (error) => { if (error) return console.error(error) @@ -101,11 +103,11 @@ const parseFile = (filename, theme = 'default') => { } }) - let fileContent = `@import './${themesEnum[theme]}.scss';\n:root {\n` + let fileContent = `@use './${themesEnum[theme]}.scss' as vars;\n:root {\n` for (const key in variables) { if (Object.prototype.hasOwnProperty.call(variables, key)) { const variableName = key.slice(1) - fileContent += ` --nut-${variableName}: #{$${variableName}};\n` + fileContent += ` --nut-${variableName}: #{vars.$${variableName}};\n` // 使用 vars.$variableName } } fileContent += `}` @@ -138,10 +140,10 @@ const variablesResolver = () => { Promise.all(tasks).then(() => { let themes = [ - { file: 'default.scss', sourcePath: `@import '../variables.scss';` }, - { file: 'jdt.scss', sourcePath: `@import '../variables-jdt.scss';` }, - { file: 'jdb.scss', sourcePath: `@import '../variables-jdb.scss';` }, - { file: 'jddkh.scss', sourcePath: `@import '../variables-jddkh.scss';` } + { file: 'default.scss', sourcePath: `@use '../variables.scss' as vars;` }, + { file: 'jdt.scss', sourcePath: `@use '../variables-jdt.scss' as vars;` }, + { file: 'jdb.scss', sourcePath: `@use '../variables-jdb.scss' as vars;` }, + { file: 'jddkh.scss', sourcePath: `@use '../variables-jddkh.scss' as vars;` } ] tasks = [] themes.forEach((item) => { @@ -161,4 +163,4 @@ Promise.all(tasks).then(() => { sassTocss() variablesResolver() }) -}) +}) \ No newline at end of file diff --git a/src/packages/__VUE/actionsheet/index.scss b/src/packages/__VUE/actionsheet/index.scss index 400751c765..73c11e2130 100644 --- a/src/packages/__VUE/actionsheet/index.scss +++ b/src/packages/__VUE/actionsheet/index.scss @@ -1,18 +1,18 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-action-sheet { .nut-action-sheet__cancel { - border-top: 1px solid $dark-background2; + border-top: 1px solid vars.$dark-background2; } .nut-action-sheet__title { - border-bottom: 1px solid $dark-background2; + border-bottom: 1px solid vars.$dark-background2; } .nut-action-sheet__cancel, .nut-action-sheet__item, .nut-action-sheet__title { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; } } } @@ -24,10 +24,10 @@ padding: 10px; margin: 0; text-align: center; - background-color: $white; - border-bottom: 1px solid $actionsheet-light-color; - font-size: $font-size-base; - color: $title-color; + background-color: vars.$white; + border-bottom: 1px solid vars.$actionsheet-light-color; + font-size: vars.$font-size-base; + color: vars.$title-color; } .nut-action-sheet__menu { display: block; @@ -40,24 +40,24 @@ .nut-action-sheet__item { display: block; padding: 10px; - line-height: $actionsheet-item-line-height; - font-size: $actionsheet-item-font-size; - color: $actionsheet-item-font-color; + line-height: vars.$actionsheet-item-line-height; + font-size: vars.$actionsheet-item-font-size; + color: vars.$actionsheet-item-font-color; text-align: center; background-color: #fff; - border-bottom: $actionsheet-item-border-bottom; + border-bottom: vars.$actionsheet-item-border-bottom; cursor: pointer; } .nut-action-sheet__desc { - font-size: $actionsheet-item-font-size; + font-size: vars.$actionsheet-item-font-size; color: #999; cursor: default; } .nut-action-sheet__subdesc { display: block; - font-size: $actionsheet-item-subdesc-font-size; + font-size: vars.$actionsheet-item-subdesc-font-size; color: #999; } @@ -71,6 +71,6 @@ .nut-action-sheet__cancel { margin-top: 5px; - border-top: $actionsheet-item-cancel-border-top; + border-top: vars.$actionsheet-item-cancel-border-top; } } diff --git a/src/packages/__VUE/address/index.scss b/src/packages/__VUE/address/index.scss index 97260cd78b..0f0a5ee4c0 100644 --- a/src/packages/__VUE/address/index.scss +++ b/src/packages/__VUE/address/index.scss @@ -1,24 +1,23 @@ -@import '../popup/index.scss'; -@import '../elevator/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-address { &__header { - color: $dark-color; + color: vars.$dark-color; &__title { - color: $dark-color; + color: vars.$dark-color; } } .nut-address__custom { .nut-address__region { - color: $dark-color; + color: vars.$dark-color; } .nut-address__detail { .nut-address__detail-list { .nut-address__detail-item { - color: $dark-color; + color: vars.$dark-color; } } } @@ -28,17 +27,17 @@ .nut-address__exist-group { .nut-address__exist-group-list { .nut-address__exist-group-item { - color: $dark-color; + color: vars.$dark-color; } } } .nut-address__exist-choose { - border-top: 1px solid $dark-background; + border-top: 1px solid vars.$dark-background; } } &-custom-buttom { - border-top: 1px solid $dark-background; + border-top: 1px solid vars.$dark-background; } } } @@ -56,8 +55,8 @@ color: #333; &__title { display: block; - color: $address-header-title-color; - font-size: $address-header-title-font-size; + color: vars.$address-header-title-color; + font-size: vars.$address-header-title-font-size; } } @@ -69,8 +68,8 @@ // margin-top: 32px; padding: 0 20px; display: flex; - font-size: $address-region-tab-font-size; - color: $address-region-tab-color; + font-size: vars.$address-region-tab-font-size; + color: vars.$address-region-tab-color; .nut-address__region-item { position: relative; @@ -78,7 +77,7 @@ margin-right: 30px; display: block; &.active { - font-weight: $address-region-tab-active-item-font-weight; + font-weight: vars.$address-region-tab-active-item-font-weight; } view { @@ -105,7 +104,7 @@ margin-top: 5px; width: 0; height: 3px; - background: $address-region-tab-line; + background: vars.$address-region-tab-line; transition: 0.2s all linear; &.active { @@ -122,10 +121,10 @@ margin-top: 5px; width: 26px; height: 3px; - background: $address-region-tab-line; + background: vars.$address-region-tab-line; transition: 0.2s all linear; - border-radius: $address-region-tab-line-border-radius; - opacity: $address-region-tab-line-opacity; + border-radius: vars.$address-region-tab-line-border-radius; + opacity: vars.$address-region-tab-line-opacity; } } @@ -142,8 +141,8 @@ display: flex; align-items: center; - font-size: $address-region-item-font-size; - color: $address-region-item-color; + font-size: vars.$address-region-item-font-size; + color: vars.$address-region-item-color; &.active { font-weight: bold; } @@ -178,15 +177,15 @@ display: flex; align-items: center; margin-bottom: 20px; - font-size: $font-size-1; + font-size: vars.$font-size-1; line-height: 14px; color: #333; &.active { font-weight: bold; } .exist-item-icon { - margin-right: $address-item-margin-right; - color: $address-icon-color !important; + margin-right: vars.$address-item-margin-right; + color: vars.$address-icon-color !important; } span { display: inline-block; @@ -207,16 +206,16 @@ line-height: 42px; margin: auto; text-align: center; - background: $button-primary-background-color; + background: vars.$button-primary-background-color; border-radius: 21px; font-size: 15px; - color: $white; + color: vars.$white; } } } &-select-icon { - margin-right: $address-item-margin-right; - color: $address-icon-color !important; + margin-right: vars.$address-item-margin-right; + color: vars.$address-icon-color !important; } } diff --git a/src/packages/__VUE/addresslist/index.scss b/src/packages/__VUE/addresslist/index.scss index 553a45a915..76be2c6510 100644 --- a/src/packages/__VUE/addresslist/index.scss +++ b/src/packages/__VUE/addresslist/index.scss @@ -1,28 +1,27 @@ -@import '../button/index.scss'; -@import '../swipe/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-address-list { &-swipe, &-general { - background-color: $dark-background2; - border-bottom: 1px solid $dark-color-gray; - color: $dark-color; + background-color: vars.$dark-background2; + border-bottom: 1px solid vars.$dark-color-gray; + color: vars.$dark-color; &__mask { - background-color: $dark-color3; + background-color: vars.$dark-color3; &-copy { - color: $dark-color-gray; - background-color: $dark-color; + color: vars.$dark-color-gray; + background-color: vars.$dark-color; } } } &-item { &__addr { - color: $dark-color-gray; + color: vars.$dark-color-gray; } } &__bottom { - background-color: $dark-background2; + background-color: vars.$dark-background2; } } } @@ -35,10 +34,10 @@ &-general { min-height: 76px; padding: 5px 10px; - background-color: $addresslist-bg; - border-bottom: 1px solid $addresslist-border; - color: $addresslist-font-color; - font-size: $addresslist-font-size; + background-color: vars.$addresslist-bg; + border-bottom: 1px solid vars.$addresslist-border; + color: vars.$addresslist-font-color; + font-size: vars.$addresslist-font-size; display: flex; align-items: center; position: relative; @@ -48,7 +47,7 @@ left: 0; bottom: 0; right: 0; - background-color: $addresslist-mask-bg; + background-color: vars.$addresslist-mask-bg; display: flex; justify-content: space-around; align-items: center; @@ -62,7 +61,7 @@ padding: 0 10px; border-radius: 50%; text-align: center; - background-color: $white; + background-color: vars.$white; font-size: 14px; display: flex; justify-content: center; @@ -70,12 +69,12 @@ box-sizing: border-box; } &-set { - color: $white; - background-color: $addresslist-set-bg; + color: vars.$white; + background-color: vars.$addresslist-set-bg; } &-del { - color: $white; - background-color: $addresslist-del-bg; + color: vars.$white; + background-color: vars.$addresslist-del-bg; } } } @@ -115,10 +114,10 @@ padding: 0 6px; height: 16px; line-height: 16px; - background: $addresslist-contnts-contact-default; + background: vars.$addresslist-contnts-contact-default; border-radius: 2px; font-size: 12px; - color: $addresslist-contnts-contact-color; + color: vars.$addresslist-contnts-contact-color; } } &-handle { @@ -128,8 +127,8 @@ } } &__addr { - color: $addresslist-addr-font-color; - font-size: $addresslist-addr-font-size; + color: vars.$addresslist-addr-font-color; + font-size: vars.$addresslist-addr-font-size; margin-top: 5px; } } @@ -143,7 +142,7 @@ width: 100%; padding: 12px 18px 24px; z-index: 100000; - background-color: $addresslist-bg; + background-color: vars.$addresslist-bg; box-sizing: border-box; } .nut-address-list__mask-bottom { diff --git a/src/packages/__VUE/audio/index.scss b/src/packages/__VUE/audio/index.scss index c5056a58e2..f62b424ae6 100644 --- a/src/packages/__VUE/audio/index.scss +++ b/src/packages/__VUE/audio/index.scss @@ -1,9 +1,9 @@ -@import '../range/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-audio__icon { .nut-audio__icon--box { - background: $dark-color; + background: vars.$dark-color; } } } @@ -51,7 +51,7 @@ content: ''; height: 2px; width: 30px; - background: $disable-color; + background: vars.$disable-color; transform: rotate(45deg); transform-origin: 8px -18px; } diff --git a/src/packages/__VUE/audiooperate/index.scss b/src/packages/__VUE/audiooperate/index.scss index f4fcf585a1..19b6903aeb 100644 --- a/src/packages/__VUE/audiooperate/index.scss +++ b/src/packages/__VUE/audiooperate/index.scss @@ -1,5 +1,3 @@ -@import '../button/index.scss'; - .nut-audio-operate-group { display: flex; display: flex; diff --git a/src/packages/__VUE/avatar/index.scss b/src/packages/__VUE/avatar/index.scss index 67b465aa6f..66bb5a756b 100644 --- a/src/packages/__VUE/avatar/index.scss +++ b/src/packages/__VUE/avatar/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-avatar { background-size: 100% 100%; background-repeat: no-repeat; @@ -21,24 +23,24 @@ } } .nut-avatar-large { - width: $avatar-large-width; - height: $avatar-large-height; - line-height: $avatar-large-height; + width: vars.$avatar-large-width; + height: vars.$avatar-large-height; + line-height: vars.$avatar-large-height; } .nut-avatar-small { - width: $avatar-small-width; - height: $avatar-small-height; - line-height: $avatar-small-height; + width: vars.$avatar-small-width; + height: vars.$avatar-small-height; + line-height: vars.$avatar-small-height; } .nut-avatar-normal { - width: $avatar-normal-width; - height: $avatar-normal-height; - line-height: $avatar-normal-height; + width: vars.$avatar-normal-width; + height: vars.$avatar-normal-height; + line-height: vars.$avatar-normal-height; } .nut-avatar-round { border-radius: 50%; overflow: hidden; } .nut-avatar-square { - border-radius: $avatar-square; + border-radius: vars.$avatar-square; } diff --git a/src/packages/__VUE/backtop/index.scss b/src/packages/__VUE/backtop/index.scss index 8b1feb4509..f7e69b86c1 100644 --- a/src/packages/__VUE/backtop/index.scss +++ b/src/packages/__VUE/backtop/index.scss @@ -1,8 +1,10 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-backtop { &.show { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; } } } @@ -12,8 +14,8 @@ &.show { width: 40px; height: 40px; - background: $white; - border: 1px solid $backtop-border-color; + background: vars.$white; + border: 1px solid vars.$backtop-border-color; border-radius: 50%; display: flex; align-items: center; diff --git a/src/packages/__VUE/badge/index.scss b/src/packages/__VUE/badge/index.scss index f94bc99d09..2ccd31eaf6 100644 --- a/src/packages/__VUE/badge/index.scss +++ b/src/packages/__VUE/badge/index.scss @@ -1,8 +1,10 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-badge { &.show { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; } } } @@ -13,33 +15,33 @@ display: flex; align-items: center; line-height: normal; - transform: $badge-content-transform; + transform: vars.$badge-content-transform; position: absolute; - background: $badge-background-color; - padding: $badge-icon-padding; + background: vars.$badge-background-color; + padding: vars.$badge-icon-padding; text-align: center; - border-radius: $badge-border-radius; - z-index: $badge-z-index; + border-radius: vars.$badge-border-radius; + z-index: vars.$badge-z-index; } .nut-badge__content { display: flex; align-items: center; - transform: $badge-content-transform; + transform: vars.$badge-content-transform; &--sup { position: absolute; - background: $badge-background-color; - padding: $badge-padding; + background: vars.$badge-background-color; + padding: vars.$badge-padding; text-align: center; - border-radius: $badge-border-radius; - font-size: $badge-font-size; + border-radius: vars.$badge-border-radius; + font-size: vars.$badge-font-size; font-weight: normal; - color: $badge-color; + color: vars.$badge-color; } &--dot { - width: $badge-dot-width; - height: $badge-dot-height; - border-radius: $badge-dot-border-radius; - padding: $badge-dot-padding; + width: vars.$badge-dot-width; + height: vars.$badge-dot-height; + border-radius: vars.$badge-dot-border-radius; + padding: vars.$badge-dot-padding; } &--bubble { border-bottom-left-radius: 0; diff --git a/src/packages/__VUE/barrage/index.scss b/src/packages/__VUE/barrage/index.scss index 9518366b49..0c06296d11 100644 --- a/src/packages/__VUE/barrage/index.scss +++ b/src/packages/__VUE/barrage/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-barrage { position: absolute; left: 0; @@ -46,7 +48,7 @@ .nut-theme-dark { .nut-barrage { .nut-barrage__item { - color: $dark-color-gray; + color: vars.$dark-color-gray; } } } diff --git a/src/packages/__VUE/button/index.scss b/src/packages/__VUE/button/index.scss index 26dec5e7e4..949fca1316 100644 --- a/src/packages/__VUE/button/index.scss +++ b/src/packages/__VUE/button/index.scss @@ -1,14 +1,16 @@ +@use '../../styles/variables.scss' as vars; + .nut-button { position: relative; display: inline-block; width: auto; flex-shrink: 0; - height: $button-default-height; + height: vars.$button-default-height; box-sizing: border-box; margin: 0; padding: 0; - line-height: $button-default-line-height; - font-size: $button-default-font-size; + line-height: vars.$button-default-line-height; + font-size: vars.$button-default-font-size; text-align: center; cursor: pointer; transition: opacity 0.2s; @@ -28,9 +30,9 @@ left: 50%; width: 100%; height: 100%; - background-color: $black; + background-color: vars.$black; border: inherit; - border-color: $black; + border-color: vars.$black; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; @@ -57,104 +59,104 @@ } } &--default { - color: $button-default-color; - background: $button-default-bg-color; + color: vars.$button-default-color; + background: vars.$button-default-bg-color; background-origin: border-box; - border: $button-border-width solid $button-default-border-color; + border: vars.$button-border-width solid vars.$button-default-border-color; } &--primary { - color: $button-primary-color; - background: $button-primary-background-color; + color: vars.$button-primary-color; + background: vars.$button-primary-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } &--info { - color: $button-info-color; - background: $button-info-background-color; + color: vars.$button-info-color; + background: vars.$button-info-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } &--success { - color: $button-success-color; - background: $button-success-background-color; + color: vars.$button-success-color; + background: vars.$button-success-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } &--danger { - color: $button-danger-color; - background: $button-danger-background-color; + color: vars.$button-danger-color; + background: vars.$button-danger-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } &--warning { - color: $button-warning-color; - background: $button-warning-background-color; + color: vars.$button-warning-color; + background: vars.$button-warning-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } &--plain { - background: $button-plain-background-color; + background: vars.$button-plain-background-color; background-origin: border-box; &.nut-button--primary { - color: $button-primary-border-color; - border-color: $button-primary-border-color; + color: vars.$button-primary-border-color; + border-color: vars.$button-primary-border-color; } &.nut-button--info { - color: $button-info-border-color; - border-color: $button-info-border-color; + color: vars.$button-info-border-color; + border-color: vars.$button-info-border-color; } &.nut-button--success { - color: $button-success-border-color; - border-color: $button-success-border-color; + color: vars.$button-success-border-color; + border-color: vars.$button-success-border-color; } &.nut-button--danger { - color: $button-danger-border-color; - border-color: $button-danger-border-color; + color: vars.$button-danger-border-color; + border-color: vars.$button-danger-border-color; } &.nut-button--warning { - color: $button-warning-border-color; - border-color: $button-warning-border-color; + color: vars.$button-warning-border-color; + border-color: vars.$button-warning-border-color; } } &--large { width: 100%; - height: $button-large-height; - line-height: $button-large-line-height; - font-size: $button-large-font-size; + height: vars.$button-large-height; + line-height: vars.$button-large-line-height; + font-size: vars.$button-large-font-size; } &--normal { - padding: $button-default-padding; - font-size: $button-default-font-size; + padding: vars.$button-default-padding; + font-size: vars.$button-default-font-size; } &--small { - height: $button-small-height; - line-height: $button-small-line-height; - padding: $button-small-padding; - font-size: $button-small-font-size; + height: vars.$button-small-height; + line-height: vars.$button-small-line-height; + padding: vars.$button-small-padding; + font-size: vars.$button-small-font-size; &.nut-button--round { - border-radius: $button-small-round-border-radius; + border-radius: vars.$button-small-round-border-radius; } } &--mini { - height: $button-mini-height; - line-height: $button-mini-line-height; - padding: $button-mini-padding; - font-size: $button-mini-font-size; + height: vars.$button-mini-height; + line-height: vars.$button-mini-line-height; + padding: vars.$button-mini-padding; + font-size: vars.$button-mini-font-size; } &--block { @@ -164,7 +166,7 @@ &--disabled { cursor: not-allowed; - opacity: $button-disabled-opacity; + opacity: vars.$button-disabled-opacity; } &--loading { @@ -173,7 +175,7 @@ } &--round { - border-radius: $button-border-radius; + border-radius: vars.$button-border-radius; } &--square { @@ -181,72 +183,72 @@ } } .nut-button--default:not([disabled]):active { - color: $button-default-color; - background: $button-default-bg-color; + color: vars.$button-default-color; + background: vars.$button-default-bg-color; background-origin: border-box; - border: $button-border-width solid $button-default-border-color; + border: vars.$button-border-width solid vars.$button-default-border-color; } .nut-button--primary:not([disabled]):active { - color: $button-primary-color; - background: $button-primary-background-color; + color: vars.$button-primary-color; + background: vars.$button-primary-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } .nut-button--info:not([disabled]):active { - color: $button-info-color; - background: $button-info-background-color; + color: vars.$button-info-color; + background: vars.$button-info-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } .nut-button--success:not([disabled]):active { - color: $button-success-color; - background: $button-success-background-color; + color: vars.$button-success-color; + background: vars.$button-success-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } .nut-button--danger:not([disabled]):active { - color: $button-danger-color; - background: $button-danger-background-color; + color: vars.$button-danger-color; + background: vars.$button-danger-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } .nut-button--warning:not([disabled]):active { - color: $button-warning-color; - background: $button-warning-background-color; + color: vars.$button-warning-color; + background: vars.$button-warning-background-color; background-origin: border-box; - border: $button-border-width solid transparent; + border: vars.$button-border-width solid transparent; } .nut-button--plain:not([disabled]):active { - background: $button-plain-background-color; + background: vars.$button-plain-background-color; background-origin: border-box; } .nut-button--plain { &.nut-button--primary:not([disabled]):active { - color: $button-primary-border-color; - border-color: $button-primary-border-color; + color: vars.$button-primary-border-color; + border-color: vars.$button-primary-border-color; } &.nut-button--info:not([disabled]):active { - color: $button-info-border-color; - border-color: $button-info-border-color; + color: vars.$button-info-border-color; + border-color: vars.$button-info-border-color; } &.nut-button--success:not([disabled]):active { - color: $button-success-border-color; - border-color: $button-success-border-color; + color: vars.$button-success-border-color; + border-color: vars.$button-success-border-color; } &.nut-button--danger:not([disabled]):active { - color: $button-danger-border-color; - border-color: $button-danger-border-color; + color: vars.$button-danger-border-color; + border-color: vars.$button-danger-border-color; } &.nut-button--warning:not([disabled]):active { - color: $button-warning-border-color; - border-color: $button-warning-border-color; + color: vars.$button-warning-border-color; + border-color: vars.$button-warning-border-color; } } diff --git a/src/packages/__VUE/calendar/index.scss b/src/packages/__VUE/calendar/index.scss index e383f8f0a3..0436622259 100644 --- a/src/packages/__VUE/calendar/index.scss +++ b/src/packages/__VUE/calendar/index.scss @@ -1,28 +1,28 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-calendar { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; .nut-calendar__header { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; } .nut-calendar__content { .nut-calendar__panel { .nut-calendar__days { .calendar-month-day { &-choose { - background-color: $dark-calendar-choose-color; - color: $calendar-choose-font-color; + background-color: vars.$dark-calendar-choose-color; + color: vars.$calendar-choose-font-color; } } } } } .nut-calendar__footer { - background: $dark-background2; - color: $dark-color; + background: vars.$dark-background2; + color: vars.$dark-color; } } } @@ -32,14 +32,14 @@ flex: 1; color: #333333; font-size: 16px; - background-color: $white; + background-color: vars.$white; overflow: hidden; height: 100%; flex-direction: column; &.nut-calendar--nopop { .nut-calendar__header { .nut-calendar__header-title { - font-size: $calendar-base-font; + font-size: vars.$calendar-base-font; } } } @@ -59,11 +59,11 @@ flex-direction: column; text-align: center; padding-top: 1px; - background-color: $white; + background-color: vars.$white; .nut-calendar__header-title { - font-size: $calendar-title-font; - font-weight: $calendar-title-font-weight; + font-size: vars.$calendar-title-font; + font-weight: vars.$calendar-title-font-weight; line-height: 44px; } .nut-calendar__header-slot { @@ -72,7 +72,7 @@ .nut-calendar__header-subtitle { padding: 7px 0; line-height: 22px; - font-size: $calendar-sub-title-font; + font-size: vars.$calendar-sub-title-font; } .nut-calendar__weekdays { @@ -85,7 +85,7 @@ .nut-calendar__weekday { &.weekend { - color: $calendar-day67-font-color; + color: vars.$calendar-day67-font-color; } } } @@ -125,15 +125,15 @@ top: -50px; left: 0; right: 0; - font-size: $calendar-text-font; - color: $text-color; + font-size: vars.$calendar-text-font; + color: vars.$text-color; } .nut-calendar__month-title { height: 23px; line-height: 23px; margin: 8px 0; - font-size: $calendar-month-title-font-size; + font-size: vars.$calendar-month-title-font-size; } .nut-calendar__days { @@ -142,7 +142,7 @@ float: left; width: 14.28%; height: 64px; - font-weight: $calendar-day-font-weight; + font-weight: vars.$calendar-day-font-weight; display: flex; align-items: center; justify-content: center; @@ -150,7 +150,7 @@ position: relative; &.weekend { - color: $calendar-day67-font-color; + color: vars.$calendar-day67-font-color; } .nut-calendar__day-tips { @@ -171,7 +171,7 @@ width: 100%; font-size: 12px; line-height: 14px; - color: $calendar-primary-color; + color: vars.$calendar-primary-color; } .nut-calendar__day-tips--top { top: 6px; @@ -180,9 +180,9 @@ bottom: 6px; } &--active { - background-color: $calendar-primary-color; - color: $white !important; - border-radius: $calendar-day-active-border-radius; + background-color: vars.$calendar-primary-color; + color: vars.$white !important; + border-radius: vars.$calendar-day-active-border-radius; .nut-calendar__day-tips { visibility: hidden; @@ -191,23 +191,23 @@ visibility: hidden; } .nut-calendar__day-tip { - color: $white; + color: vars.$white; } } &--disabled { - color: $calendar-disable-color !important; + color: vars.$calendar-disable-color !important; } &--choose { - color: $calendar-choose-font-color; + color: vars.$calendar-choose-font-color; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; - background-color: $calendar-choose-color; + background-color: vars.$calendar-choose-color; opacity: 0.09; content: ''; } @@ -215,7 +215,7 @@ .nut-calendar__day-value { padding: 2px 0; - font-size: $calendar-day-font; + font-size: vars.$calendar-day-font; } } } @@ -227,15 +227,15 @@ display: flex; height: 62px; width: 100%; - background-color: $white; + background-color: vars.$white; .nut-calendar__confirm { height: 44px; width: 100%; margin: 10px 18px; border-radius: 22px; - background: $button-primary-background-color; - color: $white; + background: vars.$button-primary-background-color; + color: vars.$white; text-align: center; line-height: 44px; } diff --git a/src/packages/__VUE/calendarcard/index.scss b/src/packages/__VUE/calendarcard/index.scss index 5fb77923e5..7f68265fa3 100644 --- a/src/packages/__VUE/calendarcard/index.scss +++ b/src/packages/__VUE/calendarcard/index.scss @@ -1,9 +1,11 @@ +@use '../../styles/variables.scss' as vars; + .nut-calendarcard { - background: $white; + background: vars.$white; border-radius: 12px; overflow: hidden; - font-size: $calendar-base-font; - color: $black; + font-size: vars.$calendar-base-font; + color: vars.$black; &-header { display: flex; @@ -62,30 +64,30 @@ } &.weekend { - color: $calendar-choose-color; + color: vars.$calendar-choose-color; } &.mid { - background-color: $calendar-choose-background-color; - color: $calendar-choose-color; + background-color: vars.$calendar-choose-background-color; + color: vars.$calendar-choose-color; } &.active, &.start, &.end { - background-color: $primary-color; - color: $white; + background-color: vars.$primary-color; + color: vars.$white; } .nut-calendar-day-info { - color: $calendar-primary-color; + color: vars.$calendar-primary-color; } // 上个月、下个月 &.prev, &.next, &.disabled { - color: $calendar-disable-color; + color: vars.$calendar-disable-color; cursor: not-allowed; } } diff --git a/src/packages/__VUE/card/index.scss b/src/packages/__VUE/card/index.scss index 929a8ce4c2..570b836372 100644 --- a/src/packages/__VUE/card/index.scss +++ b/src/packages/__VUE/card/index.scss @@ -1,10 +1,9 @@ -@import '../price/index.scss'; -@import '../tag/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-card { .nut-card__right { - color: $dark-color; + color: vars.$dark-color; } } } @@ -17,8 +16,8 @@ width: 120px; height: 120px; flex-shrink: 0; - background-color: $card-left-background-color; - border-radius: $card-left-border-radius; + background-color: vars.$card-left-background-color; + border-radius: vars.$card-left-border-radius; > img { display: block; @@ -90,7 +89,7 @@ border: none; padding: 0 2px; margin-right: 5px; - font-size: $card-font-size-0; + font-size: vars.$card-font-size-0; } } diff --git a/src/packages/__VUE/cascader/index.scss b/src/packages/__VUE/cascader/index.scss index 446d2b5a21..c603847d75 100644 --- a/src/packages/__VUE/cascader/index.scss +++ b/src/packages/__VUE/cascader/index.scss @@ -1,24 +1,25 @@ -@import '../popup/index.scss'; -@import '../tabs/index.scss'; -@import '../tabpane/index.scss'; +// @import '../tabs/index.scss'; +// @import '../tabpane/index.scss'; +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-cascader__bar { - background: $dark-background2; - color: $dark-color; + background: vars.$dark-background2; + color: vars.$dark-color; } .nut-tabs__titles { - background: $dark-background3 !important; + background: vars.$dark-background3 !important; } .nut-cascader-item { - color: $dark-color-gray; + color: vars.$dark-color-gray; } } .nut-cascader { width: 100%; - font-size: $cascader-font-size; - line-height: $cascader-line-height; + font-size: vars.$cascader-font-size; + line-height: vars.$cascader-line-height; .nut-tab-pane { padding: 0; @@ -26,12 +27,12 @@ &.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item { flex: initial; - padding: $cascader-tabs-item-padding; + padding: vars.$cascader-tabs-item-padding; white-space: nowrap; } .nut-tabs__titles { - padding: $cascader-tabs-item-padding; + padding: vars.$cascader-tabs-item-padding; background: #fff; } @@ -39,12 +40,12 @@ display: flex; justify-content: center; align-items: center; - padding: $cascader-bar-padding; + padding: vars.$cascader-bar-padding; text-align: center; font-weight: bold; - line-height: $cascader-bar-line-height; - color: $cascader-bar-color; - font-size: $cascader-bar-font-size; + line-height: vars.$cascader-bar-line-height; + color: vars.$cascader-bar-color; + font-size: vars.$cascader-bar-font-size; } &-pane { @@ -61,11 +62,11 @@ &-item { display: flex; align-items: center; - padding: $cascader-item-padding; + padding: vars.$cascader-item-padding; margin: 0; cursor: pointer; - font-size: $cascader-item-font-size; - color: $cascader-item-color; + font-size: vars.$cascader-item-font-size; + color: vars.$cascader-item-color; &__title { flex: 1; @@ -81,12 +82,12 @@ } &.active:not(.disabled) { - color: $cascader-item-active-color; + color: vars.$cascader-item-active-color; } &.active &__icon-check { visibility: visible; - color: $cascader-item-active-color; + color: vars.$cascader-item-active-color; } &.disabled { diff --git a/src/packages/__VUE/category/index.scss b/src/packages/__VUE/category/index.scss index 80b01328a3..357dbdc3d9 100644 --- a/src/packages/__VUE/category/index.scss +++ b/src/packages/__VUE/category/index.scss @@ -1,20 +1,21 @@ +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-category { &__cateList { - background: $dark-background2; + background: vars.$dark-background2; } &__cateListLeft { - background: $dark-background4; + background: vars.$dark-background4; } &__cateListItem { - color: $dark-color-gray; + color: vars.$dark-color-gray; } &__cateListItemChecked { - color: $dark-color; - background: $dark-background2; + color: vars.$dark-color; + background: vars.$dark-background2; &::before { - background: $category-list-item-checked-img-bg-color; + background: vars.$category-list-item-checked-img-bg-color; } } } @@ -22,11 +23,11 @@ .nut-category { &__cateList { display: flex; - background: $category-bg-color; + background: vars.$category-bg-color; } &__cateListLeft { - background: $category-list-left-bg-color; + background: vars.$category-list-left-bg-color; } &__cateListItemChecked, @@ -35,14 +36,14 @@ height: 50px; font-size: 13px; font-weight: normal; - color: $category-list-item-color; + color: vars.$category-list-item-color; display: flex; justify-content: center; align-items: center; transition: all 0.3s; } &__cateListItemChecked { - background: $category-list-item-checked-color; + background: vars.$category-list-item-checked-color; font-weight: 500; transition: all 0.3s; position: relative; @@ -52,7 +53,7 @@ left: 0; width: 5px; height: 18px; - background: $category-list-item-checked-img-bg-color; + background: vars.$category-list-item-checked-img-bg-color; } } } diff --git a/src/packages/__VUE/categorypane/index.scss b/src/packages/__VUE/categorypane/index.scss index d2aa390c15..1408d4f646 100644 --- a/src/packages/__VUE/categorypane/index.scss +++ b/src/packages/__VUE/categorypane/index.scss @@ -1,24 +1,26 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-category-pane { &__childTitle { - color: $white; + color: vars.$white; } &__cateListRight { - background: $dark-background2; + background: vars.$dark-background2; } } } .nut-category-pane { &__cateListRight { padding-left: 15px; - background: $category-bg-color; + background: vars.$category-bg-color; } &__childTitle { margin-top: 15px; margin-bottom: 15px; font-size: 13px; font-weight: 500; - color: $category-pane-title-color; + color: vars.$category-pane-title-color; } &__childItemList { @@ -41,11 +43,11 @@ margin-right: 10px; width: 75px; height: 40px; - border: 1px solid $category-pane-border-color; + border: 1px solid vars.$category-pane-border-color; border-radius: 5px; font-size: 12px; font-weight: normal; - color: $category-pane-gray-color; + color: vars.$category-pane-gray-color; display: flex; justify-content: center; align-items: center; @@ -61,7 +63,7 @@ &__skuImg { font-size: 12px; font-weight: normal; - color: $category-pane-gray-color; + color: vars.$category-pane-gray-color; margin-top: 10px; margin-bottom: 10px; text-align: center; diff --git a/src/packages/__VUE/cell/index.scss b/src/packages/__VUE/cell/index.scss index 9e9e0725e9..778d19549e 100644 --- a/src/packages/__VUE/cell/index.scss +++ b/src/packages/__VUE/cell/index.scss @@ -1,7 +1,9 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-cell { - background: $dark-background2; - color: $dark-color; + background: vars.$dark-background2; + color: vars.$dark-color; box-shadow: none; } } @@ -9,13 +11,13 @@ position: relative; display: flex; width: 100%; - line-height: $cell-line-height; - padding: $cell-padding; - background: $cell-background; - border-radius: $cell-border-radius; - box-shadow: $cell-box-shadow; - font-size: $cell-title-font; - color: $cell-color; + line-height: vars.$cell-line-height; + padding: vars.$cell-padding; + background: vars.$cell-background; + border-radius: vars.$cell-border-radius; + box-shadow: vars.$cell-box-shadow; + font-size: vars.$cell-title-font; + color: vars.$cell-color; margin: 10px 0; box-sizing: border-box; @@ -24,10 +26,10 @@ } &--large { - font-size: $cell-large-title-font; - padding: $cell-large-padding; + font-size: vars.$cell-large-title-font; + padding: vars.$cell-large-padding; .nut-cell__title-desc { - font-size: $cell-large-title-desc-font; + font-size: vars.$cell-large-title-desc-font; } } @@ -42,7 +44,7 @@ box-sizing: border-box; content: ' '; pointer-events: none; - right: $cell-after-right; + right: vars.$cell-after-right; bottom: 0; left: 16px; transform: scaleY(0.5); @@ -59,9 +61,9 @@ left: 50%; width: 100%; height: 100%; - background-color: $black; + background-color: vars.$black; border: inherit; - border-color: $black; + border-color: vars.$black; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; @@ -72,7 +74,7 @@ &__icon { display: flex; flex-direction: row; - margin: $cell-default-icon-margin; + margin: vars.$cell-default-icon-margin; align-items: center; } @@ -82,17 +84,17 @@ flex: 1; min-width: 80px; &-desc { - font-size: $cell-title-desc-font; + font-size: vars.$cell-title-desc-font; } } &__value { display: inline-block; text-align: right; flex: 1; - font-size: $cell-desc-font; - color: $cell-desc-color; + font-size: vars.$cell-desc-font; + color: vars.$cell-desc-color; &--alone { - color: $cell-color; + color: vars.$cell-color; } } &__link { diff --git a/src/packages/__VUE/cellgroup/index.scss b/src/packages/__VUE/cellgroup/index.scss index fa438e100f..0a2ceb80d2 100644 --- a/src/packages/__VUE/cellgroup/index.scss +++ b/src/packages/__VUE/cellgroup/index.scss @@ -1,29 +1,31 @@ +@use '../../styles/variables.scss' as vars; + .nut-cell-group { display: block; &__title { display: inherit; - padding: $cell-group-title-padding; - color: $cell-group-title-color; - font-size: $cell-group-title-font-size; - line-height: $cell-group-title-line-height; + padding: vars.$cell-group-title-padding; + color: vars.$cell-group-title-color; + font-size: vars.$cell-group-title-font-size; + line-height: vars.$cell-group-title-line-height; margin-top: 30px; margin-bottom: 10px; } &__desc { display: inherit; - padding: $cell-group-desc-padding; - color: $cell-group-desc-color; - font-size: $cell-group-desc-font-size; - line-height: $cell-group-desc-line-height; + padding: vars.$cell-group-desc-padding; + color: vars.$cell-group-desc-color; + font-size: vars.$cell-group-desc-font-size; + line-height: vars.$cell-group-desc-line-height; margin-top: 10px; margin-bottom: 10px; } &__wrap { display: inherit; - border-radius: $cell-border-radius; - box-shadow: $cell-box-shadow; + border-radius: vars.$cell-border-radius; + box-shadow: vars.$cell-box-shadow; overflow: hidden; - background-color: $cell-group-background-color; + background-color: vars.$cell-group-background-color; margin: 10px 0; .nut-cell { margin: 0; @@ -33,7 +35,7 @@ } .nut-cell { &::after { - border-bottom: $cell-after-border-bottom; + border-bottom: vars.$cell-after-border-bottom; } } } diff --git a/src/packages/__VUE/checkbox/index.scss b/src/packages/__VUE/checkbox/index.scss index 47963c8cd4..4b7a5070d2 100644 --- a/src/packages/__VUE/checkbox/index.scss +++ b/src/packages/__VUE/checkbox/index.scss @@ -1,47 +1,49 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-checkbox { &__label { - color: $dark-color; + color: vars.$dark-color; &--disabled { - color: $checkbox-label-disable-color; + color: vars.$checkbox-label-disable-color; } } &__button { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; &--disabled { - color: $checkbox-label-disable-color; - border: 1px solid $checkbox-label-disable-color; + color: vars.$checkbox-label-disable-color; + border: 1px solid vars.$checkbox-label-disable-color; } } } } .nut-checkbox { - display: $checkbox-display; + display: vars.$checkbox-display; vertical-align: bottom; align-items: center; - margin-right: $checkbox-margin-right; + margin-right: vars.$checkbox-margin-right; &--reverse { flex-direction: row-reverse; .nut-checkbox__label { - margin-right: $checkbox-label-margin-left; + margin-right: vars.$checkbox-label-margin-left; margin-left: 0; } } &__button { display: inline-flex; align-items: center; - padding: $checkbox-button-padding; - font-size: $checkbox-button-font-size; - background: $checkbox-button-background; - border-radius: $checkbox-button-border-radius; - color: $checkbox-label-color; + padding: vars.$checkbox-button-padding; + font-size: vars.$checkbox-button-font-size; + background: vars.$checkbox-button-background; + border-radius: vars.$checkbox-button-border-radius; + color: vars.$checkbox-label-color; box-sizing: border-box; - border: 1px solid $checkbox-button-border-color; + border: 1px solid vars.$checkbox-button-border-color; &--active { background: transparent; - color: $checkbox-button-font-color-active; - border: 1px solid $checkbox-button-border-color-active; + color: vars.$checkbox-button-font-color-active; + border: 1px solid vars.$checkbox-button-border-color-active; position: relative; &::after { position: absolute; @@ -51,41 +53,41 @@ left: 0; width: 100%; height: 100%; - background-color: $checkbox-button-background-active; + background-color: vars.$checkbox-button-background-active; opacity: 0.05; content: ''; } } &--disabled { - color: $checkbox-label-disable-color; + color: vars.$checkbox-label-disable-color; border: none; } } &__label { flex: 1; - margin-left: $checkbox-label-margin-left; - font-size: $checkbox-label-font-size; - color: $checkbox-label-color; + margin-left: vars.$checkbox-label-margin-left; + font-size: vars.$checkbox-label-font-size; + color: vars.$checkbox-label-color; &--disabled { - color: $checkbox-label-disable-color; + color: vars.$checkbox-label-disable-color; } } &__icon { - color: $primary-color; - font-size: $checkbox-icon-font-size; + color: vars.$primary-color; + font-size: vars.$checkbox-icon-font-size; transition-duration: 0.3s; transition-property: color, border-color, background-color; } &__icon--unchecked { - color: $checkbox-icon-disable-color; - font-size: $checkbox-icon-font-size; + color: vars.$checkbox-icon-disable-color; + font-size: vars.$checkbox-icon-font-size; } &__icon--indeterminate { - color: $primary-color; - font-size: $checkbox-icon-font-size; + color: vars.$primary-color; + font-size: vars.$checkbox-icon-font-size; } &__icon--disable { - color: $checkbox-icon-disable-color2; - font-size: $checkbox-icon-font-size; + color: vars.$checkbox-icon-disable-color2; + font-size: vars.$checkbox-icon-font-size; } } diff --git a/src/packages/__VUE/circleprogress/index.scss b/src/packages/__VUE/circleprogress/index.scss index 732a946ae5..590dca779c 100644 --- a/src/packages/__VUE/circleprogress/index.scss +++ b/src/packages/__VUE/circleprogress/index.scss @@ -1,6 +1,8 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-circle-progress__text { - color: $dark-color; + color: vars.$dark-color; } } @@ -8,14 +10,14 @@ position: relative; &__hover { - stroke: $circleprogress-primary-color; + stroke: vars.$circleprogress-primary-color; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s; } &__path { - stroke: $circleprogress-path-color; + stroke: vars.$circleprogress-path-color; } &__text { @@ -26,7 +28,7 @@ width: 100%; transform: translateY(-50%); text-align: center; - color: $circleprogress-text-color; - font-size: $circleprogress-text-size; + color: vars.$circleprogress-text-color; + font-size: vars.$circleprogress-text-size; } } diff --git a/src/packages/__VUE/collapseitem/index.scss b/src/packages/__VUE/collapseitem/index.scss index 051b7d7051..665daedf7c 100644 --- a/src/packages/__VUE/collapseitem/index.scss +++ b/src/packages/__VUE/collapseitem/index.scss @@ -1,20 +1,21 @@ +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-collapse-item { .nut-collapse-item__title { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; box-shadow: none; } .nut-collapse__item-wrapper { .collapse-content, .nut-collapse__item-extraWrapper__extraRender { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; } } .nut-collapse__item-extraWrapper { .nut-collapse__item-extraWrapper__extraRender { - background: $dark-background; + background: vars.$dark-background; } } } @@ -44,10 +45,10 @@ align-items: center; width: 100%; overflow: hidden; - padding: $collapse-item-padding; - color: $collapse-item-color; - font-size: $collapse-item-font-size; - line-height: $collapse-item-line-height; + padding: vars.$collapse-item-padding; + color: vars.$collapse-item-color; + font-size: vars.$collapse-item-font-size; + line-height: vars.$collapse-item-line-height; background-color: #fff; box-sizing: border-box; .nut-collapse-item__title-main { @@ -66,7 +67,7 @@ // right: 16px; display: flex; align-items: center; - color: $collapse-item-icon-color; + color: vars.$collapse-item-icon-color; transition: transform 0.3s; &--expanded { transform: rotate(-180deg); @@ -77,7 +78,7 @@ top: 50%; right: 65px; margin-top: -12px; - color: $collapse-item-sub-title-color; + color: vars.$collapse-item-sub-title-color; } .nut-collapse-item__title-label { display: block; @@ -95,14 +96,14 @@ .nut-collapse__item-wrapper__content, .nut-collapse__item-extraWrapper__extraRender { display: block; - padding: $collapse-wrapper-content-padding; - color: $collapse-wrapper-content-color; - font-size: $collapse-wrapper-content-font-size; - line-height: $collapse-wrapper-content-line-height; - background-color: $collapse-wrapper-content-background-color; + padding: vars.$collapse-wrapper-content-padding; + color: vars.$collapse-wrapper-content-color; + font-size: vars.$collapse-wrapper-content-font-size; + line-height: vars.$collapse-wrapper-content-line-height; + background-color: vars.$collapse-wrapper-content-background-color; } .nut-collapse__item-wrapper__content--empty { - padding: $collapse-wrapper-empty-content-padding; + padding: vars.$collapse-wrapper-empty-content-padding; } } .nut-collapse__item-extraWrapper { @@ -121,11 +122,11 @@ will-change: auto; } .nut-collapse-item__title--disabled { - color: $collapse-item-disabled-color; + color: vars.$collapse-item-disabled-color; cursor: not-allowed; pointer-events: none; .collapse-icon { - color: $collapse-item-disabled-color; + color: vars.$collapse-item-disabled-color; } } .nut-collapse-item__title-mtitle { diff --git a/src/packages/__VUE/comment/index.scss b/src/packages/__VUE/comment/index.scss index ece91bceb2..4b44f3ff18 100644 --- a/src/packages/__VUE/comment/index.scss +++ b/src/packages/__VUE/comment/index.scss @@ -1,39 +1,40 @@ -@import '../rate/index.scss'; +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-comment { &-header { &__user { &-name { - color: $dark-color; + color: vars.$dark-color; } &-default { &-name { - color: $dark-color; + color: vars.$dark-color; } } } } &__follow { &-title { - color: $dark-color; + color: vars.$dark-color; } } &-bottom { &__cpx { - color: $dark-color; + color: vars.$dark-color; &-item { span { - color: $dark-color; + color: vars.$dark-color; } } } } .nut-comment-shop { - border-top: 1px solid $dark-color; + border-top: 1px solid vars.$dark-color; } } } @@ -68,7 +69,7 @@ @include oneline-ellipsis(); margin-right: 5px; font-size: 12px; - color: $comment-header-user-name-color; + color: vars.$comment-header-user-name-color; width: auto; max-width: 80px; } @@ -82,7 +83,7 @@ @include oneline-ellipsis(); font-size: 12px; - color: $comment-header-user-name-color; + color: vars.$comment-header-user-name-color; > span { margin-right: 8px; @@ -93,7 +94,7 @@ &-complex { display: flex; align-items: center; - color: $comment-header-user-name-color; + color: vars.$comment-header-user-name-color; &-name { margin-right: 10px; @@ -123,7 +124,7 @@ width: 100px; text-align: right; font-size: 12px; - color: $comment-header-time-color; + color: vars.$comment-header-time-color; } &__complex-score { @@ -145,7 +146,7 @@ display: inline-block; width: 1px; height: 6px; - background: $text-color; + background: vars.$text-color; opacity: 0.4; font-style: inherit; } @@ -264,14 +265,14 @@ position: relative; font-size: 14px; font-weight: bold; - color: $black; + color: vars.$black; padding-left: 8px; svg { position: absolute; left: 0; top: 13%; - color: $primary-color; + color: vars.$primary-color; transform: rotate(90deg); opacity: 0.4; } @@ -290,7 +291,7 @@ &-bottom { display: flex; justify-content: space-between; - color: $comment-bottom-label-color; + color: vars.$comment-bottom-label-color; margin-right: 5px; &__lable { @@ -302,7 +303,7 @@ display: flex; align-items: center; justify-content: flex-end; - color: $black; + color: vars.$black; &-item { position: relative; @@ -311,7 +312,7 @@ align-items: center; span { - color: $black; + color: vars.$black; margin-right: 5px; } @@ -324,9 +325,9 @@ top: 35px; right: 18px; width: max-content; - background: $white; + background: vars.$white; padding: 10px; - box-shadow: 0 0 6px $disable-color; + box-shadow: 0 0 6px vars.$disable-color; border-radius: 5px 0 5px 5px; &::after { @@ -339,7 +340,7 @@ border-left: 14px solid transparent; border-right: 0px solid transparent; border-top: 10px solid transparent; - border-bottom: 10px solid $white; + border-bottom: 10px solid vars.$white; } &::before { @@ -389,7 +390,7 @@ border-top: 1px solid rgba(0, 0, 0, 0.1); @include moreline-ellipsis(6); span { - color: $comment-shop-color; + color: vars.$comment-shop-color; } } } diff --git a/src/packages/__VUE/countdown/index.scss b/src/packages/__VUE/countdown/index.scss index 78a68bd85f..d6543cf8f7 100644 --- a/src/packages/__VUE/countdown/index.scss +++ b/src/packages/__VUE/countdown/index.scss @@ -1,5 +1,7 @@ +@use '../../styles/variables.scss' as vars; + .nut-countdown { - display: $countdown-display; - color: $countdown-color; - font-size: $countdown-font-size; + display: vars.$countdown-display; + color: vars.$countdown-color; + font-size: vars.$countdown-font-size; } diff --git a/src/packages/__VUE/countup/index.scss b/src/packages/__VUE/countup/index.scss index f7a4bdf2f3..a603041674 100644 --- a/src/packages/__VUE/countup/index.scss +++ b/src/packages/__VUE/countup/index.scss @@ -1,7 +1,9 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-countup { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; box-shadow: none; } } diff --git a/src/packages/__VUE/datepicker/index.scss b/src/packages/__VUE/datepicker/index.scss index 5c9b73d11a..0261f597b9 100644 --- a/src/packages/__VUE/datepicker/index.scss +++ b/src/packages/__VUE/datepicker/index.scss @@ -1 +1,2 @@ -@import '../picker/index.scss'; +// @import '../picker/index.scss'; +// @fo; diff --git a/src/packages/__VUE/dialog/index.scss b/src/packages/__VUE/dialog/index.scss index 16451b23d6..3095504f3a 100644 --- a/src/packages/__VUE/dialog/index.scss +++ b/src/packages/__VUE/dialog/index.scss @@ -1,10 +1,11 @@ -@import '../button/index.scss'; -@import '../popup/index.scss'; +// @import '../button/index.scss'; +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-dialog { &__header { - color: $dark-color3; + color: vars.$dark-color3; } } } @@ -13,7 +14,7 @@ display: flex; flex-direction: column; align-items: center; - width: $dialog-width; + width: vars.$dialog-width; min-height: 156px; padding: 28px 24px 16px 24px; box-sizing: border-box; @@ -23,8 +24,8 @@ text-align: center; height: 20px; font-size: 16px; - color: $dialog-header-color; - font-weight: $dialog-header-font-weight; + color: vars.$dialog-header-color; + font-weight: vars.$dialog-header-font-weight; @include oneline-ellipsis(); } &__content { @@ -35,7 +36,7 @@ max-height: 268px; line-height: 16px; font-size: 12px; - color: $text-color; + color: vars.$text-color; word-wrap: break-word; word-break: break-all; white-space: pre-wrap; @@ -44,7 +45,7 @@ display: flex; align-items: center; width: 100%; - justify-content: $dialog-footer-justify-content; + justify-content: vars.$dialog-footer-justify-content; &.vertical { flex-direction: column; diff --git a/src/packages/__VUE/divider/index.scss b/src/packages/__VUE/divider/index.scss index 28ae29a6ba..140d544d79 100644 --- a/src/packages/__VUE/divider/index.scss +++ b/src/packages/__VUE/divider/index.scss @@ -1,16 +1,18 @@ +@use '../../styles/variables.scss' as vars; + .nut-divider { display: flex; align-items: center; - font-size: $divider-text-font-size; - color: $divider-text-color; - margin: $divider-margin; + font-size: vars.$divider-text-font-size; + color: vars.$divider-text-color; + margin: vars.$divider-margin; &::before, &::after { content: ''; - border: $divider-line-height solid currentColor; - border-width: $divider-line-height 0 0; - height: $divider-line-height; + border: vars.$divider-line-height solid currentColor; + border-width: vars.$divider-line-height 0 0; + height: vars.$divider-line-height; flex: 1; } @@ -18,11 +20,11 @@ &.nut-divider-left, &.nut-divider-right { &::before { - margin-right: $divider-before-margin-right; + margin-right: vars.$divider-before-margin-right; } &::after { - margin-left: $divider-after-margin-left; + margin-left: vars.$divider-after-margin-left; } } @@ -54,10 +56,10 @@ &.nut-divider-vertical { position: relative; - top: $divider-vertical-top; + top: vars.$divider-vertical-top; display: inline-block; - height: $divider-vertical-height; - border-left: 1px solid $divider-vertical-border-left; - margin: $divider-vertical-margin; + height: vars.$divider-vertical-height; + border-left: 1px solid vars.$divider-vertical-border-left; + margin: vars.$divider-vertical-margin; } } diff --git a/src/packages/__VUE/ecard/index.scss b/src/packages/__VUE/ecard/index.scss index 0b448e5538..df5421fcb1 100644 --- a/src/packages/__VUE/ecard/index.scss +++ b/src/packages/__VUE/ecard/index.scss @@ -1,38 +1,38 @@ -@import '../inputnumber/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-ecard { - color: $dark-color3; + color: vars.$dark-color3; ::placeholder { color: rgb(29, 31, 32); } .nut-ecard__list__item { - background: $dark-background5; + background: vars.$dark-background5; &.active { - background: $dark-background6; - outline: 1px solid $dark-color2; - color: $dark-color2; + background: vars.$dark-background6; + outline: 1px solid vars.$dark-color2; + color: vars.$dark-color2; } } .nut-ecard__list__input { - color: $dark-color3; - background: $dark-background7; + color: vars.$dark-color3; + background: vars.$dark-background7; &.active { - background: $dark-background7; + background: vars.$dark-background7; > view > input { - background: $dark-background7; + background: vars.$dark-background7; } } .nut-ecard__list__input--con > input { background-color: transparent; - color: $dark-color3; + color: vars.$dark-color3; } } } @@ -56,7 +56,7 @@ &__item { width: 48%; height: 46px; - background: $ecard-bg-color; + background: vars.$ecard-bg-color; border-radius: 4px; margin-bottom: 12px; display: flex; @@ -64,8 +64,8 @@ align-items: center; &.active { - background: $white; - outline: 1px solid $primary-color; + background: vars.$white; + outline: 1px solid vars.$primary-color; border-radius: 4px; } } @@ -73,7 +73,7 @@ &__input { width: 100%; height: 46px; - background: $ecard-bg-color; + background: vars.$ecard-bg-color; color: rgba(0, 0, 0, 0.8); border-radius: 4px; display: flex; @@ -88,7 +88,7 @@ justify-content: flex-end; input { - caret-color: $primary-color; //光标颜色 + caret-color: vars.$primary-color; //光标颜色 text-align: right; background: transparent; margin-right: 10px; @@ -98,7 +98,7 @@ } .nut-ecard-input { - caret-color: $primary-color; //光标颜色 + caret-color: vars.$primary-color; //光标颜色 text-align: right; background: transparent; margin-right: 10px; @@ -109,11 +109,11 @@ } &.active { - background: $white; - outline: 1px solid $primary-color; + background: vars.$white; + outline: 1px solid vars.$primary-color; > view > input { - background: $white; + background: vars.$white; } } } @@ -125,7 +125,7 @@ justify-content: space-between; font-size: 20px; font-weight: normal; - color: $primary-color; + color: vars.$primary-color; } } } diff --git a/src/packages/__VUE/elevator/index.scss b/src/packages/__VUE/elevator/index.scss index adbcdcd672..38da1c1f89 100644 --- a/src/packages/__VUE/elevator/index.scss +++ b/src/packages/__VUE/elevator/index.scss @@ -1,15 +1,17 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-elevator { - background-color: $dark-background2; + background-color: vars.$dark-background2; &__list { &__item { - color: $dark-color; + color: vars.$dark-color; &__code { - color: $dark-color; + color: vars.$dark-color; } } &__fixed { - background-color: $dark-background2; + background-color: vars.$dark-background2; } } } @@ -28,36 +30,36 @@ } &__item { display: block; - font-size: $elevator-list-item-font-size; - color: $elevator-list-item-font-color; + font-size: vars.$elevator-list-item-font-size; + color: vars.$elevator-list-item-font-color; &__code { display: flex; position: relative; - height: $elevator-list-item-code-height; - line-height: $elevator-list-item-code-line-height; - font-size: $elevator-list-item-code-font-size; - color: $elevator-list-item-code-font-color; - padding: $elevator-list-item-code-padding; - font-weight: $elevator-list-item-code-font-weight; + height: vars.$elevator-list-item-code-height; + line-height: vars.$elevator-list-item-code-line-height; + font-size: vars.$elevator-list-item-code-font-size; + color: vars.$elevator-list-item-code-font-color; + padding: vars.$elevator-list-item-code-padding; + font-weight: vars.$elevator-list-item-code-font-weight; box-sizing: border-box; &::after { content: ' '; - width: $elevator-list-item-code-after-width; - height: $elevator-list-item-code-after-height; + width: vars.$elevator-list-item-code-after-width; + height: vars.$elevator-list-item-code-after-height; position: absolute; left: 0; bottom: 0; - background-color: $elevator-list-item-code-after-bg-color; + background-color: vars.$elevator-list-item-code-after-bg-color; } } &__name { display: flex; align-items: center; - padding: $elevator-list-item-name-padding; - height: $elevator-list-item-name-height; - line-height: $elevator-list-item-name-line-height; + padding: vars.$elevator-list-item-name-padding; + height: vars.$elevator-list-item-name-height; + line-height: vars.$elevator-list-item-name-line-height; &--highcolor { - color: $elevator-list-item-highcolor; + color: vars.$elevator-list-item-highcolor; } } } @@ -66,48 +68,48 @@ position: absolute; top: 0; left: 0; - padding: $elevator-list-item-code-padding; - height: $elevator-list-item-code-height; - line-height: $elevator-list-item-code-line-height; - font-size: $elevator-list-item-code-font-size; - color: $elevator-list-fixed-color; - font-weight: $elevator-list-item-code-font-weight; - background-color: $elevator-list-fixed-bg-color; + padding: vars.$elevator-list-item-code-padding; + height: vars.$elevator-list-item-code-height; + line-height: vars.$elevator-list-item-code-line-height; + font-size: vars.$elevator-list-item-code-font-size; + color: vars.$elevator-list-fixed-color; + font-weight: vars.$elevator-list-item-code-font-weight; + background-color: vars.$elevator-list-fixed-bg-color; box-sizing: border-box; - box-shadow: $elevator-list-fixed-box-shadow; + box-shadow: vars.$elevator-list-fixed-box-shadow; z-index: 1; } } &__code--current { - position: $elevator-list-item-code-current-position; - right: $elevator-list-item-code-current-right; - top: $elevator-list-item-code-current-top; - transform: $elevator-list-item-code-current-transform; - width: $elevator-list-item-code-current-width; - height: $elevator-list-item-code-current-height; - line-height: $elevator-list-item-code-current-line-height; - border-radius: $elevator-list-item-code-current-border-radius; - background: $elevator-list-item-code-current-bg-color; - box-shadow: $elevator-list-item-code-current-box-shadow; - text-align: $elevator-list-item-code-current-text-align; + position: vars.$elevator-list-item-code-current-position; + right: vars.$elevator-list-item-code-current-right; + top: vars.$elevator-list-item-code-current-top; + transform: vars.$elevator-list-item-code-current-transform; + width: vars.$elevator-list-item-code-current-width; + height: vars.$elevator-list-item-code-current-height; + line-height: vars.$elevator-list-item-code-current-line-height; + border-radius: vars.$elevator-list-item-code-current-border-radius; + background: vars.$elevator-list-item-code-current-bg-color; + box-shadow: vars.$elevator-list-item-code-current-box-shadow; + text-align: vars.$elevator-list-item-code-current-text-align; } &__bars { - position: $elevator-list-item-bars-position; - right: $elevator-list-item-bars-right; - top: $elevator-list-item-bars-top; - transform: $elevator-list-item-bars-transform; - padding: $elevator-list-item-bars-padding; - background-color: $elevator-list-item-bars-background-color; - border-radius: $elevator-list-item-bars-border-radius; - text-align: $elevator-list-item-bars-text-align; - z-index: $elevator-list-item-bars-z-index; + position: vars.$elevator-list-item-bars-position; + right: vars.$elevator-list-item-bars-right; + top: vars.$elevator-list-item-bars-top; + transform: vars.$elevator-list-item-bars-transform; + padding: vars.$elevator-list-item-bars-padding; + background-color: vars.$elevator-list-item-bars-background-color; + border-radius: vars.$elevator-list-item-bars-border-radius; + text-align: vars.$elevator-list-item-bars-text-align; + z-index: vars.$elevator-list-item-bars-z-index; &__inner { &__item { display: block; - padding: $elevator-list-item-bars-inner-item-padding; - font-size: $elevator-list-item-bars-inner-item-font-size; + padding: vars.$elevator-list-item-bars-inner-item-padding; + font-size: vars.$elevator-list-item-bars-inner-item-font-size; &.active { - color: $elevator-list-item-bars-inner-item-active-color; + color: vars.$elevator-list-item-bars-inner-item-active-color; } } } diff --git a/src/packages/__VUE/ellipsis/index.scss b/src/packages/__VUE/ellipsis/index.scss index 4bfc817215..3b424bacbf 100644 --- a/src/packages/__VUE/ellipsis/index.scss +++ b/src/packages/__VUE/ellipsis/index.scss @@ -1,8 +1,10 @@ +@use '../../styles/variables.scss' as vars; + .nut-ellipsis { display: flex; .nut-ellipsis__text { cursor: hand; - color: $ellipsis-expand-collapse-color; + color: vars.$ellipsis-expand-collapse-color; display: inline; } diff --git a/src/packages/__VUE/empty/index.scss b/src/packages/__VUE/empty/index.scss index 8e1aac21b0..892dee3165 100644 --- a/src/packages/__VUE/empty/index.scss +++ b/src/packages/__VUE/empty/index.scss @@ -1,6 +1,8 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-empty { - background: $dark-background; + background: vars.$dark-background; } } @@ -10,11 +12,11 @@ align-items: center; flex-direction: column; justify-content: center; - padding: $empty-padding; + padding: vars.$empty-padding; &__box { - width: $empty-image-size; - height: $empty-image-size; + width: vars.$empty-image-size; + height: vars.$empty-image-size; .img { width: 100%; @@ -30,10 +32,10 @@ } &__description { - margin-top: $empty-description-margin-top; - padding: $empty-description-padding; - color: $empty-description-color; - font-size: $empty-description-font-size; - line-height: $empty-description-line-height; + margin-top: vars.$empty-description-margin-top; + padding: vars.$empty-description-padding; + color: vars.$empty-description-color; + font-size: vars.$empty-description-font-size; + line-height: vars.$empty-description-line-height; } } diff --git a/src/packages/__VUE/fixednav/index.scss b/src/packages/__VUE/fixednav/index.scss index f0cc1f18d2..ebd0b34d46 100644 --- a/src/packages/__VUE/fixednav/index.scss +++ b/src/packages/__VUE/fixednav/index.scss @@ -1,8 +1,8 @@ -@import '../overlay/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-fixed-nav { position: fixed; - z-index: $fixednav-index; + z-index: vars.$fixednav-index; display: inline-block; height: 50px; right: 0; @@ -26,11 +26,11 @@ position: absolute; right: 0; - z-index: calc($fixednav-index + 1); + z-index: calc(vars.$fixednav-index + 1); width: 80px; padding-left: 12px; height: 100%; - background: $fixednav-btn-bg; + background: vars.$fixednav-btn-bg; border-radius: 45px 0px 0px 45px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); display: flex; @@ -41,7 +41,7 @@ width: 24px; line-height: 13px; font-size: 10px; - color: $fixednav-bg-color; + color: vars.$fixednav-bg-color; flex-shrink: 0; } .nut-icon { @@ -60,10 +60,10 @@ box-sizing: border-box; padding: 0; margin: 0; - z-index: $fixednav-index; + z-index: vars.$fixednav-index; flex-shrink: 0; height: 100%; - background: $fixednav-bg-color; + background: vars.$fixednav-bg-color; display: flex; justify-content: space-between; border-radius: 25px 0px 0px 25px; @@ -88,7 +88,7 @@ &.active { > .span { - color: $fixednav-item-active-color; + color: vars.$fixednav-item-active-color; } } @@ -99,7 +99,7 @@ } > .span { font-size: 10px; - color: $fixednav-font-color; + color: vars.$fixednav-font-color; } > .b { position: absolute; @@ -110,7 +110,7 @@ font-size: 10px; padding: 0 3px; color: white; - background: $primary-color; + background: vars.$primary-color; border-radius: 7px; text-align: center; min-width: 12px; diff --git a/src/packages/__VUE/form/index.scss b/src/packages/__VUE/form/index.scss index f9cd9ba20f..4c58bf6cb9 100644 --- a/src/packages/__VUE/form/index.scss +++ b/src/packages/__VUE/form/index.scss @@ -1 +1 @@ -@import '../cellgroup/index.scss'; +// @import '../cellgroup/index.scss'; diff --git a/src/packages/__VUE/formitem/index.scss b/src/packages/__VUE/formitem/index.scss index 9e198b0c65..e57730d6f3 100644 --- a/src/packages/__VUE/formitem/index.scss +++ b/src/packages/__VUE/formitem/index.scss @@ -1,11 +1,11 @@ -@import '../cell/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-form-item { &__body { &__slots { .nut-input-text { - color: $dark-color; + color: vars.$dark-color; } } } @@ -26,7 +26,7 @@ &.error { &.line { &::before { - border-bottom: 1px solid $form-item-error-line-color; + border-bottom: 1px solid vars.$form-item-error-line-color; transform: scaleX(1); transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; } @@ -34,22 +34,22 @@ } &__label { - font-size: $form-item-label-font-size; + font-size: vars.$form-item-label-font-size; font-weight: normal; - width: $form-item-label-width; - margin-right: $form-item-label-margin-right; + width: vars.$form-item-label-width; + margin-right: vars.$form-item-label-margin-right; flex: none !important; display: inline-block !important; word-wrap: break-word; - text-align: $form-item-label-text-align; + text-align: vars.$form-item-label-text-align; &.nut-cell__title { min-width: auto; } &.required { &::before { content: '*'; - color: $form-item-required-color; - margin-right: $form-item-required-margin-right; + color: vars.$form-item-required-color; + margin-right: vars.$form-item-required-margin-right; } &.nut-form-item__star-right { &::before { @@ -57,8 +57,8 @@ } &::after { content: '*'; - color: $form-item-required-color; - margin-left: $form-item-required-margin-right; + color: vars.$form-item-required-color; + margin-left: vars.$form-item-required-margin-right; } } } @@ -68,11 +68,11 @@ display: flex !important; flex-direction: column; &__slots { - text-align: $form-item-body-slots-text-align; + text-align: vars.$form-item-body-slots-text-align; .nut-input { - font-size: $form-item-body-font-size; - text-align: $form-item-body-input-text-align; - color: $black; + font-size: vars.$form-item-body-font-size; + text-align: vars.$form-item-body-input-text-align; + color: vars.$black; width: 100%; outline: 0 none; border: 0; @@ -85,14 +85,14 @@ .nut-textarea { padding: 0 !important; .nut-textarea__textarea { - text-align: $form-item-body-input-text-align; + text-align: vars.$form-item-body-input-text-align; } } } &__tips { - text-align: $form-item-tip-text-align; - font-size: $form-item-tip-font-size; - color: $form-item-error-message-color; + text-align: vars.$form-item-tip-text-align; + font-size: vars.$form-item-tip-font-size; + color: vars.$form-item-error-message-color; } } diff --git a/src/packages/__VUE/grid/index.scss b/src/packages/__VUE/grid/index.scss index 226780e879..3bab99ea85 100644 --- a/src/packages/__VUE/grid/index.scss +++ b/src/packages/__VUE/grid/index.scss @@ -1,7 +1,9 @@ +@use '../../styles/variables.scss' as vars; + .nut-grid { display: flex; flex-wrap: wrap; - border: 0 solid $grid-border-color; + border: 0 solid vars.$grid-border-color; &--border { border-top-width: 1px; diff --git a/src/packages/__VUE/griditem/index.scss b/src/packages/__VUE/griditem/index.scss index fb08b6ef15..57e2382433 100644 --- a/src/packages/__VUE/griditem/index.scss +++ b/src/packages/__VUE/griditem/index.scss @@ -1,11 +1,13 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-grid-item { &__content { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; } &__text { - color: $dark-color; + color: vars.$dark-color; } } } @@ -16,11 +18,11 @@ $block: &; &__text { - color: $grid-item-text-color; - font-size: $grid-item-text-font-size; + color: vars.$grid-item-text-color; + font-size: vars.$grid-item-text-font-size; line-height: 1.5; word-break: break-all; - margin: $grid-item-text-margin 0 0 0; + margin: vars.$grid-item-text-margin 0 0 0; } &__content { @@ -28,9 +30,9 @@ flex-direction: column; box-sizing: border-box; height: 100%; - padding: $grid-item-content-padding; - background: $grid-item-content-bg-color; - border: 0 solid $grid-border-color; + padding: vars.$grid-item-content-padding; + background: vars.$grid-item-content-bg-color; + border: 0 solid vars.$grid-border-color; &--border { border-right-width: 1px; @@ -58,7 +60,7 @@ flex-direction: column-reverse; #{$block}__text { - margin: 0 0 $grid-item-text-margin; + margin: 0 0 vars.$grid-item-text-margin; } } @@ -66,14 +68,14 @@ flex-direction: row; #{$block}__text { - margin: 0 0 0 $grid-item-text-margin; + margin: 0 0 0 vars.$grid-item-text-margin; } } &--horizontal#{&}--reverse { flex-direction: row-reverse; #{$block}__text { - margin: 0 $grid-item-text-margin 0 0; + margin: 0 vars.$grid-item-text-margin 0 0; } } @@ -86,9 +88,9 @@ left: 50%; width: 100%; height: 100%; - background-color: $black; + background-color: vars.$black; border: inherit; - border-color: $black; + border-color: vars.$black; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; diff --git a/src/packages/__VUE/icon/index.scss b/src/packages/__VUE/icon/index.scss index e76600bff0..8baaa5211c 100644 --- a/src/packages/__VUE/icon/index.scss +++ b/src/packages/__VUE/icon/index.scss @@ -1 +1,2 @@ @import '@nutui/icons-vue/dist/style_iconfont.css'; +// @forward '~@nutui/icons-vue/dist/style_iconfont.css'; diff --git a/src/packages/__VUE/image/index.scss b/src/packages/__VUE/image/index.scss index d44425cccf..5639943851 100644 --- a/src/packages/__VUE/image/index.scss +++ b/src/packages/__VUE/image/index.scss @@ -1,11 +1,13 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-image { .nut-img-loading { - background: $dark-background; + background: vars.$dark-background; } .nut-img-error { - background: $dark-background; + background: vars.$dark-background; } } } diff --git a/src/packages/__VUE/imagepreview/index.scss b/src/packages/__VUE/imagepreview/index.scss index a277ab11f2..408f4c1f32 100644 --- a/src/packages/__VUE/imagepreview/index.scss +++ b/src/packages/__VUE/imagepreview/index.scss @@ -1,7 +1,7 @@ -@import '../popup/index.scss'; -@import '../swiper/index.scss'; -@import '../swiperitem/index.scss'; -@import '../video/index.scss'; +// @use '../../styles/variables.scss' as *; +// @import '../swiper/index.scss'; +// @import '../swiperitem/index.scss'; +// @import '../video/index.scss'; .nut-image-preview { height: 100%; diff --git a/src/packages/__VUE/indicator/index.scss b/src/packages/__VUE/indicator/index.scss index edefeac9eb..25e6fa792f 100644 --- a/src/packages/__VUE/indicator/index.scss +++ b/src/packages/__VUE/indicator/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-indicator { &--block { display: block; @@ -25,24 +27,24 @@ &--dot { display: inline-block; vertical-align: middle; - width: $indicator-dot-size; - height: $indicator-dot-size; + width: vars.$indicator-dot-size; + height: vars.$indicator-dot-size; border-radius: 50%; - background-color: $indicator-dot-color; + background-color: vars.$indicator-dot-color; } &--number { display: inline-block; position: relative; - width: $indicator-size; - height: $indicator-size; + width: vars.$indicator-size; + height: vars.$indicator-size; text-align: center; - font-size: $indicator-number-font-size; - line-height: $indicator-size; - color: $indicator-color; + font-size: vars.$indicator-number-font-size; + line-height: vars.$indicator-size; + color: vars.$indicator-color; vertical-align: middle; - border: 1px solid $indicator-color; + border: 1px solid vars.$indicator-color; border-radius: 50%; - background-color: $indicator-bg-color; - box-shadow: 0 0 1px 1px $indicator-bg-color; + background-color: vars.$indicator-bg-color; + box-shadow: 0 0 1px 1px vars.$indicator-bg-color; } } diff --git a/src/packages/__VUE/infiniteloading/index.scss b/src/packages/__VUE/infiniteloading/index.scss index 029adb18e9..6616cc77a4 100644 --- a/src/packages/__VUE/infiniteloading/index.scss +++ b/src/packages/__VUE/infiniteloading/index.scss @@ -1,10 +1,12 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-infinite-loading { .nut-infinite__bottom { - color: $dark-color; + color: vars.$dark-color; .bottom-text { - color: $dark-color; + color: vars.$dark-color; } } } @@ -19,8 +21,8 @@ width: 100%; height: 50px; line-height: 50px; - font-size: $font-size-small; - color: $infiniteloading-bottom-color; + font-size: vars.$font-size-small; + color: vars.$infiniteloading-bottom-color; text-align: center; .nut-infinite__bottom-box { @@ -34,7 +36,7 @@ } &__text { font-size: 12px; - color: $text-color; + color: vars.$text-color; } } } diff --git a/src/packages/__VUE/input/index.scss b/src/packages/__VUE/input/index.scss index 61c6c7750e..9082c3dcd9 100644 --- a/src/packages/__VUE/input/index.scss +++ b/src/packages/__VUE/input/index.scss @@ -1,12 +1,14 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-input { - background: $dark-background; + background: vars.$dark-background; &__label { - color: $dark-color; + color: vars.$dark-color; } .input-text, &__text--readonly { - color: $dark-color; + color: vars.$dark-color; } } } @@ -29,14 +31,14 @@ textarea { padding: 10px 25px; display: flex; line-height: 20px; - background: $white; - font-size: $input-font-size; + background: vars.$white; + font-size: vars.$input-font-size; box-sizing: border-box; &.center { align-items: center; } &--border { - border-bottom: 1px solid $input-border-bottom; + border-bottom: 1px solid vars.$input-border-bottom; } .input-text, @@ -54,7 +56,7 @@ textarea { flex: 1; } .input-text { - font-size: $input-font-size; + font-size: vars.$input-font-size; // height: auto; // min-height: auto; } @@ -126,24 +128,24 @@ textarea { &::before { position: absolute; left: 14px; - color: $input-required-color; + color: vars.$input-required-color; content: '*'; } } &--disabled { - color: $input-disabled-color !important; + color: vars.$input-disabled-color !important; input:disabled { background: none; - color: $input-disabled-color; + color: vars.$input-disabled-color; cursor: not-allowed; opacity: 1; - -webkit-text-fill-color: $input-disabled-color; + -webkit-text-fill-color: vars.$input-disabled-color; } } &--error, &--error::placeholder { - color: $input-required-color; - -webkit-text-fill-color: $input-required-color; + color: vars.$input-required-color; + -webkit-text-fill-color: vars.$input-required-color; } } diff --git a/src/packages/__VUE/inputnumber/index.scss b/src/packages/__VUE/inputnumber/index.scss index 372c53821f..1f57f4caa9 100644 --- a/src/packages/__VUE/inputnumber/index.scss +++ b/src/packages/__VUE/inputnumber/index.scss @@ -1,51 +1,53 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-input-number { &__icon { - color: $dark-color; + color: vars.$dark-color; &--disabled { - color: $dark-color-gray; + color: vars.$dark-color-gray; } } input, &__text--readonly { - background-color: $dark-background; - color: $dark-color; - border: 1px solid $dark-color-gray; + background-color: vars.$dark-background; + color: vars.$dark-color; + border: 1px solid vars.$dark-color-gray; } &--disabled { input { - color: $dark-color-gray; + color: vars.$dark-color-gray; } } } } .nut-input-number { - display: $inputnumber-display; + display: vars.$inputnumber-display; align-items: center; - border: $inputnumber-border; - border-radius: $inputnumber-border-radius; - height: $inputnumber-height; - line-height: $inputnumber-line-height; - box-sizing: $inputnumber-border-box; + border: vars.$inputnumber-border; + border-radius: vars.$inputnumber-border-radius; + height: vars.$inputnumber-height; + line-height: vars.$inputnumber-line-height; + box-sizing: vars.$inputnumber-border-box; &--disabled { input { - color: $inputnumber-icon-void-color; + color: vars.$inputnumber-icon-void-color; } } &__icon { display: flex; align-items: center; - color: $inputnumber-icon-color; + color: vars.$inputnumber-icon-color; .nut-icon { - width: $inputnumber-icon-size; - height: $inputnumber-icon-size; - font-size: $inputnumber-icon-size; + width: vars.$inputnumber-icon-size; + height: vars.$inputnumber-icon-size; + font-size: vars.$inputnumber-icon-size; } cursor: pointer; &--disabled { - color: $inputnumber-icon-void-color; + color: vars.$inputnumber-icon-void-color; cursor: not-allowed; } } @@ -58,19 +60,19 @@ input, &__text--readonly, &__text--input { - width: $inputnumber-input-width; + width: vars.$inputnumber-input-width; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; outline: none; - border: $inputnumber-input-border; - font-size: $inputnumber-input-font-size; - color: $inputnumber-input-font-color; - margin: $inputnumber-input-margin; - background-color: $inputnumber-input-background-color; - border-radius: $inputnumber-input-border-radius; + border: vars.$inputnumber-input-border; + font-size: vars.$inputnumber-input-font-size; + color: vars.$inputnumber-input-font-color; + margin: vars.$inputnumber-input-margin; + background-color: vars.$inputnumber-input-background-color; + border-radius: vars.$inputnumber-input-border-radius; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { diff --git a/src/packages/__VUE/invoice/index.scss b/src/packages/__VUE/invoice/index.scss index c9b6904bde..4d058b0c60 100644 --- a/src/packages/__VUE/invoice/index.scss +++ b/src/packages/__VUE/invoice/index.scss @@ -1,13 +1,9 @@ -@import '../button/index.scss'; -@import '../radiogroup/index.scss'; -@import '../radio/index.scss'; -@import '../form/index.scss'; -@import '../formitem/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-invoice { .nut-invoice__submit { - background: $dark-background2; + background: vars.$dark-background2; } } } @@ -22,7 +18,7 @@ position: fixed; bottom: 0; width: 100%; - padding: $invoice-padding; + padding: vars.$invoice-padding; display: flex; align-items: center; justify-content: center; diff --git a/src/packages/__VUE/menu/index.scss b/src/packages/__VUE/menu/index.scss index 6daedc1b91..45e7756f36 100644 --- a/src/packages/__VUE/menu/index.scss +++ b/src/packages/__VUE/menu/index.scss @@ -1,10 +1,13 @@ +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-menu { .nut-menu__bar { - background-color: $dark-background; + background-color: vars.$dark-background; .nut-menu__item { - color: $dark-color; + color: vars.$dark-color; } } } @@ -13,35 +16,35 @@ .nut-menu { &.scroll-fixed { position: fixed; - top: $menu-scroll-fixed-top; - z-index: $menu-scroll-fixed-z-index; + top: vars.$menu-scroll-fixed-top; + z-index: vars.$menu-scroll-fixed-z-index; width: 100%; } .nut-menu__bar { position: relative; display: flex; - line-height: $menu-bar-line-height; - background-color: $white; - box-shadow: $menu-bar-box-shadow; + line-height: vars.$menu-bar-line-height; + background-color: vars.$white; + box-shadow: vars.$menu-bar-box-shadow; &.opened { - z-index: $menu-bar-opened-z-index; + z-index: vars.$menu-bar-opened-z-index; } .nut-menu__item { flex: 1; text-align: center; - font-size: $menu-item-font-size; - color: $menu-item-text-color; + font-size: vars.$menu-item-font-size; + color: vars.$menu-item-text-color; min-width: 0; &.active { - color: $menu-item-active-text-color; + color: vars.$menu-item-active-text-color; } &.disabled { - color: $menu-item-disabled-color; + color: vars.$menu-item-disabled-color; } .nut-menu__title-icon { @@ -58,8 +61,8 @@ .nut-menu__title-text { @include text-ellipsis; display: block; - padding-left: $menu-title-text-padding-left; - padding-right: $menu-title-text-padding-right; + padding-left: vars.$menu-title-text-padding-left; + padding-right: vars.$menu-title-text-padding-right; } &.active .nut-menu__title-icon { diff --git a/src/packages/__VUE/menuitem/index.scss b/src/packages/__VUE/menuitem/index.scss index b1e828e159..36bfe73481 100644 --- a/src/packages/__VUE/menuitem/index.scss +++ b/src/packages/__VUE/menuitem/index.scss @@ -1,30 +1,30 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-menu-item__content { .nut-menu-item__option { - color: $dark-color; + color: vars.$dark-color; } } } .nut-menu-item { position: fixed; - z-index: $menu-bar-opened-z-index; + z-index: vars.$menu-bar-opened-z-index; left: 0; right: 0; height: 100vh; overflow: hidden; .active { - font-weight: $menu-active-item-font-weight; - color: $menu-item-active-text-color !important; + font-weight: vars.$menu-active-item-font-weight; + color: vars.$menu-item-active-text-color !important; } } .nut-menu-item__content { - padding: $menu-item-content-padding; - max-height: $menu-item-content-max-height; + padding: vars.$menu-item-content-padding; + max-height: vars.$menu-item-content-max-height; display: flex; flex-wrap: wrap; &.nut-menu-item__overflow { @@ -36,17 +36,17 @@ } .nut-menu-item__option { - color: $title-color; - font-size: $font-size-2; - padding-top: $menu-item-option-padding-top; - padding-bottom: $menu-item-option-padding-bottom; + color: vars.$title-color; + font-size: vars.$font-size-2; + padding-top: vars.$menu-item-option-padding-top; + padding-bottom: vars.$menu-item-option-padding-bottom; display: flex; align-items: center; .nut-menu-item__span { display: flex; align-items: center; - margin-right: $menu-item-option-i-margin-right; + margin-right: vars.$menu-item-option-i-margin-right; } } } @@ -55,6 +55,6 @@ position: fixed; left: 0; right: 0; - z-index: $menu-bar-opened-z-index; + z-index: vars.$menu-bar-opened-z-index; background-color: transparent; } diff --git a/src/packages/__VUE/navbar/index.scss b/src/packages/__VUE/navbar/index.scss index 9a0dc1ffe2..4ba70b304c 100644 --- a/src/packages/__VUE/navbar/index.scss +++ b/src/packages/__VUE/navbar/index.scss @@ -1,9 +1,11 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-navbar { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; .title { - color: $dark-color; + color: vars.$dark-color; } } } @@ -11,13 +13,13 @@ position: relative; display: flex; align-items: center; - height: $navbar-height; + height: vars.$navbar-height; box-sizing: border-box; - padding: $navbar-padding; - background: $navbar-background; - box-shadow: $navbar-box-shadow; - font-size: $navbar-title-base-font; - color: $navbar-color; + padding: vars.$navbar-padding; + background: vars.$navbar-background; + box-shadow: vars.$navbar-box-shadow; + font-size: vars.$navbar-title-base-font; + color: vars.$navbar-color; overflow: hidden; &:active::before { opacity: 0.1; @@ -41,8 +43,8 @@ } &--fixed { &.nut-navbar--safe-area-inset-top { - height: calc($navbar-height + constant(safe-area-inset-top)); - height: calc($navbar-height + env(safe-area-inset-top)); + height: calc(vars.$navbar-height + constant(safe-area-inset-top)); + height: calc(vars.$navbar-height + env(safe-area-inset-top)); } } &--clickable { @@ -53,9 +55,9 @@ left: 50%; width: 100%; height: 100%; - background-color: $black; + background-color: vars.$black; border: inherit; - border-color: $black; + border-color: vars.$black; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; @@ -76,10 +78,10 @@ justify-content: center; align-items: center; .title { - min-width: $navbar-title-width; - font-size: $navbar-title-font; - font-weight: $navbar-title-font-weight; - color: $navbar-title-font-color; + min-width: vars.$navbar-title-width; + font-size: vars.$navbar-title-font; + font-weight: vars.$navbar-title-font-weight; + color: vars.$navbar-title-font-color; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -87,7 +89,7 @@ } &.icon { .icon { - margin: $navbar-title-icon-margin; + margin: vars.$navbar-title-icon-margin; } } .icon { @@ -97,7 +99,7 @@ display: inline; } &-desc { - font-size: $cell-title-desc-font; + font-size: vars.$cell-title-desc-font; } .text__title { display: inline-block; @@ -111,8 +113,8 @@ &__left { position: absolute; left: 0; - font-size: $cell-desc-font; - color: $cell-desc-color; + font-size: vars.$cell-desc-font; + color: vars.$cell-desc-color; display: flex; align-items: center; cursor: pointer; @@ -121,8 +123,8 @@ &__right { position: absolute; right: 0; - font-size: $cell-desc-font; - color: $cell-desc-color; + font-size: vars.$cell-desc-font; + color: vars.$cell-desc-color; display: flex; align-items: center; padding: 0 16px; diff --git a/src/packages/__VUE/noticebar/index.scss b/src/packages/__VUE/noticebar/index.scss index 56d170c153..86be653be4 100644 --- a/src/packages/__VUE/noticebar/index.scss +++ b/src/packages/__VUE/noticebar/index.scss @@ -1,27 +1,29 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-noticebar__page { - background: $dark-background2; - color: $dark-color; + background: vars.$dark-background2; + color: vars.$dark-color; } .nut-noticebar__vertical { .nut-noticebar__vertical-item { - color: $dark-color; + color: vars.$dark-color; } } } .nut-noticebar__page { display: flex; - padding: $noticebar-box-padding; - height: $noticebar-across-height; - font-size: $noticebar-font-size; + padding: vars.$noticebar-box-padding; + height: vars.$noticebar-across-height; + font-size: vars.$noticebar-font-size; position: relative; align-items: center; - background: $noticebar-background; - color: $noticebar-color; + background: vars.$noticebar-background; + color: vars.$noticebar-color; &--wrapable { height: auto; - padding: $noticebar-wrapable-padding; + padding: vars.$noticebar-wrapable-padding; .nut-noticebar__page-wrap { height: auto !important; .nut-noticebar__page-wrap-content { @@ -39,20 +41,20 @@ .nut-noticebar__page-lefticon { display: flex; align-items: center; - margin: $noticebar-lefticon-margin; + margin: vars.$noticebar-lefticon-margin; background-size: 100% 100%; } .nut-noticebar__page-righticon { display: flex; align-items: center; justify-content: center; - margin: $noticebar-righticon-margin; + margin: vars.$noticebar-righticon-margin; } .nut-noticebar__page-wrap { display: flex; flex: 1; - height: $noticebar-across-line-height; - line-height: $noticebar-across-line-height; + height: vars.$noticebar-across-line-height; + line-height: vars.$noticebar-across-line-height; overflow: hidden; position: relative; } @@ -93,7 +95,7 @@ // 垂直方向的滚动 @keyframes nut-notice-bar-play-vertical { to { - transform: translateY($noticebar-across-height); + transform: translateY(vars.$noticebar-across-height); } } @@ -102,12 +104,12 @@ position: relative; display: flex; justify-content: space-between; - height: $noticebar-across-height; - font-size: $noticebar-font-size; + height: vars.$noticebar-across-height; + font-size: vars.$noticebar-font-size; overflow: hidden; - padding: $noticebar-box-padding; - background: $noticebar-background; - color: $noticebar-color; + padding: vars.$noticebar-box-padding; + background: vars.$noticebar-background; + color: vars.$noticebar-color; .nut-noticebar__vertical-list { width: 100%; @@ -119,7 +121,7 @@ .nut-noticebar__vertical-item { // display: flex; // align-items: center; - height: $noticebar-across-height; + height: vars.$noticebar-across-height; width: 100%; text-overflow: ellipsis; white-space: nowrap; @@ -132,7 +134,7 @@ top: 999999px; } .go { - margin: $noticebar-righticon-margin; + margin: vars.$noticebar-righticon-margin; align-self: center; display: flex; } diff --git a/src/packages/__VUE/notify/index.scss b/src/packages/__VUE/notify/index.scss index 613374720f..fb344f2fe2 100644 --- a/src/packages/__VUE/notify/index.scss +++ b/src/packages/__VUE/notify/index.scss @@ -1,4 +1,4 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-fade-enter-active { transition: opacity 1s; @@ -16,31 +16,31 @@ display: block; width: 100%; box-sizing: border-box; - padding: $notify-padding; - color: $notify-text-color; - font-size: $notify-font-size; + padding: vars.$notify-padding; + color: vars.$notify-text-color; + font-size: vars.$notify-font-size; white-space: pre-wrap; text-align: center; word-wrap: break-word; - height: $notify-height; - line-height: $notify-line-height; + height: vars.$notify-height; + line-height: vars.$notify-line-height; &--base { - background: $notify-base-background-color; + background: vars.$notify-base-background-color; } &--primary { - background: $notify-primary-background-color; + background: vars.$notify-primary-background-color; } &--success { - background: $notify-success-background-color; + background: vars.$notify-success-background-color; } &--danger { - background: $notify-danger-background-color; + background: vars.$notify-danger-background-color; } &--warning { - background: $notify-warning-background-color; + background: vars.$notify-warning-background-color; } view { width: 100%; diff --git a/src/packages/__VUE/numberkeyboard/index.scss b/src/packages/__VUE/numberkeyboard/index.scss index a87f675310..0558d5d499 100644 --- a/src/packages/__VUE/numberkeyboard/index.scss +++ b/src/packages/__VUE/numberkeyboard/index.scss @@ -1,22 +1,22 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-number-keyboard { - background-color: $dark-background4; + background-color: vars.$dark-background4; .nut-key__wrapper { .nut-key { - color: $dark-color; - background-color: $dark-background5; + color: vars.$dark-color; + background-color: vars.$dark-background5; } } } } .nut-number-keyboard { - width: $numberkeyboard-width; - padding: $numberkeyboard-padding; - background-color: $numberkeyboard-background-color; + width: vars.$numberkeyboard-width; + padding: vars.$numberkeyboard-padding; + background-color: vars.$numberkeyboard-background-color; user-select: none; .nut-number-keyboard__header { @@ -25,10 +25,10 @@ align-items: center; justify-content: center; box-sizing: content-box; - height: $numberkeyboard-header-height; - padding: $numberkeyboard-header-padding; - color: $numberkeyboard-header-color; - font-size: $numberkeyboard-header-font-size; + height: vars.$numberkeyboard-header-height; + padding: vars.$numberkeyboard-header-padding; + color: vars.$numberkeyboard-header-color; + font-size: vars.$numberkeyboard-header-font-size; .nut-number-keyboard__title { display: inline-block; @@ -38,10 +38,10 @@ position: absolute; display: block; right: 0; - padding: $numberkeyboard-header-close-padding; - color: $numberkeyboard-header-close-color; - font-size: $numberkeyboard-header-close-font-size; - background-color: $numberkeyboard-header-close-background-color; + padding: vars.$numberkeyboard-header-close-padding; + color: vars.$numberkeyboard-header-close-color; + font-size: vars.$numberkeyboard-header-close-font-size; + background-color: vars.$numberkeyboard-header-close-background-color; border: none; cursor: pointer; } @@ -72,13 +72,13 @@ } .nut-key--finish { - font-size: $numberkeyboard-key-finish-font-size; - color: $numberkeyboard-key-finish-font-size-color; - background-color: $numberkeyboard-key-finish-background-color; + font-size: vars.$numberkeyboard-key-finish-font-size; + color: vars.$numberkeyboard-key-finish-font-size-color; + background-color: vars.$numberkeyboard-key-finish-background-color; } .activeFinsh { - background-color: $numberkeyboard-key-activeFinsh-background-color; + background-color: vars.$numberkeyboard-key-activeFinsh-background-color; } } } @@ -99,17 +99,17 @@ display: flex; align-items: center; justify-content: center; - height: $numberkeyboard-key-height; - font-size: $numberkeyboard-key-font-size; - line-height: $numberkeyboard-key-line-height; - background-color: $numberkeyboard-key-background-color; - color: $numberkeyboard-key-font-size-color; - border-radius: $numberkeyboard-key-border-radius; + height: vars.$numberkeyboard-key-height; + font-size: vars.$numberkeyboard-key-font-size; + line-height: vars.$numberkeyboard-key-line-height; + background-color: vars.$numberkeyboard-key-background-color; + color: vars.$numberkeyboard-key-font-size-color; + border-radius: vars.$numberkeyboard-key-border-radius; cursor: pointer; } .nut-key--active { - background-color: $numberkeyboard-key-active-background-color; + background-color: vars.$numberkeyboard-key-active-background-color; } img { diff --git a/src/packages/__VUE/overlay/index.scss b/src/packages/__VUE/overlay/index.scss index fc070c4467..6654e0cf0a 100644 --- a/src/packages/__VUE/overlay/index.scss +++ b/src/packages/__VUE/overlay/index.scss @@ -1,3 +1,6 @@ +// @use "../../styles/variables" as *; +@use '../../styles/variables' as vars; + .overlay-fade-enter-active, .overlay-fade-leave-active { transition-property: opacity; @@ -15,7 +18,7 @@ left: 0; width: 100%; height: 100%; - background: $overlay-bg-color; + background: vars.$overlay-bg-color; } .nut-overflow-hidden { diff --git a/src/packages/__VUE/pagination/index.scss b/src/packages/__VUE/pagination/index.scss index 0f2d68f91c..38e0f69101 100644 --- a/src/packages/__VUE/pagination/index.scss +++ b/src/packages/__VUE/pagination/index.scss @@ -1,26 +1,28 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-pagination { &-prev, &-item, &-next { - background: $dark-background; - border-color: $dark-color-gray; + background: vars.$dark-background; + border-color: vars.$dark-color-gray; } &-simple { - background: $dark-background; + background: vars.$dark-background; } .simple-border { - border-color: $dark-color-gray; + border-color: vars.$dark-color-gray; } .disabled { - background: $dark-background; + background: vars.$dark-background; } } } .nut-pagination { display: flex; - font-size: $pagination-font-size; - color: $pagination-color; + font-size: vars.$pagination-font-size; + color: vars.$pagination-color; &-contain { display: flex; } @@ -40,9 +42,9 @@ display: flex; align-items: center; justify-content: center; - background: $white; - border-radius: $pagination-item-border-radius; - border: $pagination-item-border-width solid $pagination-item-border-color; + background: vars.$white; + border-radius: vars.$pagination-item-border-radius; + border: vars.$pagination-item-border-width solid vars.$pagination-item-border-color; cursor: pointer; } &-prev, @@ -51,19 +53,19 @@ } &-prev, &-next { - padding: $pagination-prev-next-padding; + padding: vars.$pagination-prev-next-padding; } .simple-border { - border-right: $pagination-item-border-width solid $pagination-item-border-color; + border-right: vars.$pagination-item-border-width solid vars.$pagination-item-border-color; } .active { - color: $white; + color: vars.$white; border: none; - background: $pagination-active-background-color; + background: vars.$pagination-active-background-color; } .disabled { - color: $pagination-disable-color; - background-color: $pagination-disable-background-color; + color: vars.$pagination-disable-color; + background-color: vars.$pagination-disable-background-color; cursor: not-allowed; } } diff --git a/src/packages/__VUE/picker/index.scss b/src/packages/__VUE/picker/index.scss index cdff99f8fd..8c6c1e2b09 100644 --- a/src/packages/__VUE/picker/index.scss +++ b/src/packages/__VUE/picker/index.scss @@ -1,16 +1,19 @@ +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-picker { &__title { - color: $dark-color; + color: vars.$dark-color; } &-roller { &-item { - color: $dark-color; + color: vars.$dark-color; } &-item-tile { - color: $dark-color; + color: vars.$dark-color; } } @@ -23,10 +26,10 @@ } &-content { - color: $dark-color; + color: vars.$dark-color; } &-item { - color: $dark-color; + color: vars.$dark-color; } } } @@ -44,25 +47,25 @@ &__left { cursor: pointer; - padding: $picker-bar-button-padding; + padding: vars.$picker-bar-button-padding; display: flex; align-items: center; justify-content: center; min-width: 50px; height: 100%; - color: $picker-cancel-color; - font-size: $picker-bar-cancel-font-size; + color: vars.$picker-cancel-color; + font-size: vars.$picker-bar-cancel-font-size; } &__right { cursor: pointer; - padding: $picker-bar-button-padding; + padding: vars.$picker-bar-button-padding; display: flex; align-items: center; justify-content: center; min-width: 50px; height: 100%; - color: $picker-ok-color; - font-size: $picker-bar-ok-font-size; + color: vars.$picker-ok-color; + font-size: vars.$picker-bar-ok-font-size; } &__column { @@ -75,7 +78,7 @@ top: 50%; height: var(--lineHeight); width: 100%; - border: $picker-item-active-line-border; + border: vars.$picker-item-active-line-border; border-left: 0; border-right: 0; transform: scale(0.9); @@ -94,9 +97,9 @@ flex: 1; @include oneline-ellipsis(); text-align: center; - color: $picker-bar-title-color; - font-size: $picker-bar-title-font-size; - font-weight: $picker-bar-title-font-weight; + color: vars.$picker-bar-title-color; + font-size: vars.$picker-bar-title-font-size; + font-weight: vars.$picker-bar-title-font-weight; } &__wrapper { @@ -131,10 +134,10 @@ position: absolute; top: 0; width: 100%; - height: $picker-item-height; - line-height: $picker-item-height; - color: $picker-item-text-color; - font-size: $picker-item-text-font-size; + height: vars.$picker-item-height; + line-height: vars.$picker-item-height; + color: vars.$picker-item-text-color; + font-size: vars.$picker-item-text-font-size; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -149,8 +152,8 @@ display: block; text-align: center; width: 100%; - color: $picker-item-text-color; - font-size: $picker-item-text-font-size; + color: vars.$picker-item-text-color; + font-size: vars.$picker-item-text-font-size; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -160,8 +163,8 @@ display: block; text-align: center; width: 100%; - color: $picker-item-text-color; - font-size: $picker-item-text-font-size; + color: vars.$picker-item-text-color; + font-size: vars.$picker-item-text-font-size; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/packages/__VUE/popover/index.scss b/src/packages/__VUE/popover/index.scss index 233d6059ec..c1d1b4994a 100644 --- a/src/packages/__VUE/popover/index.scss +++ b/src/packages/__VUE/popover/index.scss @@ -1,4 +1,4 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-popover { position: absolute; @@ -13,14 +13,14 @@ &-top { bottom: 0; - border-top-color: $popover-white-background-color; + border-top-color: vars.$popover-white-background-color; border-bottom-width: 0; margin-bottom: -8px; } &-bottom { top: 0px; - border-bottom-color: $popover-white-background-color; + border-bottom-color: vars.$popover-white-background-color; border-top-width: 0; margin-top: -8px; @@ -42,7 +42,7 @@ &-left { right: 0px; - border-left-color: $popover-white-background-color; + border-left-color: vars.$popover-white-background-color; border-right-width: 0; margin-right: -8px; @@ -64,7 +64,7 @@ &-right { left: 0px; - border-right-color: $popover-white-background-color; + border-right-color: vars.$popover-white-background-color; border-left-width: 0; margin-left: -8px; @@ -112,7 +112,7 @@ display: flex; align-items: center; padding: 8px; - border-bottom: 1px solid $popover-border-bottom-color; + border-bottom: 1px solid vars.$popover-border-bottom-color; &:first-child { margin-top: 15px; @@ -135,7 +135,7 @@ } &.nut-popover-menu-disabled { - color: $popover-disable-color; + color: vars.$popover-disable-color; cursor: not-allowed; } } @@ -189,14 +189,14 @@ .nut-popover--dark { .nut-popover-content { - background: $popover-dark-background-color; - color: $popover-white-background-color; + background: vars.$popover-dark-background-color; + color: vars.$popover-white-background-color; &--bottom, &--bottom-start, &--bottom-end { .nut-popover-arrow { - border-bottom-color: $popover-dark-background-color; + border-bottom-color: vars.$popover-dark-background-color; } } @@ -204,7 +204,7 @@ &--top-start, &--top-end { .nut-popover-arrow { - border-top-color: $popover-dark-background-color; + border-top-color: vars.$popover-dark-background-color; } } @@ -212,7 +212,7 @@ &--left-start, &--left-end { .nut-popover-arrow { - border-left-color: $popover-dark-background-color; + border-left-color: vars.$popover-dark-background-color; } } @@ -220,7 +220,7 @@ &--right-start, &--right-end { .nut-popover-arrow { - border-right-color: $popover-dark-background-color; + border-right-color: vars.$popover-dark-background-color; } } } diff --git a/src/packages/__VUE/popup/index.scss b/src/packages/__VUE/popup/index.scss index 0038bbcfae..144ebadc4d 100644 --- a/src/packages/__VUE/popup/index.scss +++ b/src/packages/__VUE/popup/index.scss @@ -1,10 +1,12 @@ -@import '../overlay/index.scss'; +// 更换为@use 加载变量 +// @import '../overlay/index.scss'; +@use '../../styles/variables' as vars; .nut-theme-dark { .nut-popup { - background: $dark-background2; + background: vars.$dark-background2; &__close-icon { - color: $dark-color; + color: vars.$dark-color; } } } @@ -47,7 +49,7 @@ left: 50%; transform: translate(-50%, -50%); &.round { - border-radius: $popup-border-radius; + border-radius: vars.$popup-border-radius; } } @@ -56,7 +58,7 @@ left: 0; width: 100%; &.round { - border-radius: $popup-border-radius $popup-border-radius 0 0; + border-radius: vars.$popup-border-radius vars.$popup-border-radius 0 0; } &--safebottom { padding-bottom: constant(safe-area-inset-bottom); @@ -69,7 +71,7 @@ right: 0; &.round { - border-radius: $popup-border-radius 0 0 $popup-border-radius; + border-radius: vars.$popup-border-radius 0 0 vars.$popup-border-radius; } } @@ -78,7 +80,7 @@ left: 0; &.round { - border-radius: 0 $popup-border-radius $popup-border-radius 0; + border-radius: 0 vars.$popup-border-radius vars.$popup-border-radius 0; } } @@ -88,7 +90,7 @@ width: 100%; &.round { - border-radius: 0 0 $popup-border-radius $popup-border-radius; + border-radius: 0 0 vars.$popup-border-radius vars.$popup-border-radius; } } @@ -96,7 +98,7 @@ position: fixed; max-height: 100%; overflow-y: auto; - background-color: $white; + background-color: vars.$white; -webkit-overflow-scrolling: touch; &__close-icon { position: absolute !important; @@ -114,23 +116,23 @@ } &--top-left { - top: $popup-close-icon-margin; - left: $popup-close-icon-margin; + top: vars.$popup-close-icon-margin; + left: vars.$popup-close-icon-margin; } &--top-right { - top: $popup-close-icon-margin; - right: $popup-close-icon-margin; + top: vars.$popup-close-icon-margin; + right: vars.$popup-close-icon-margin; } &--bottom-left { - bottom: $popup-close-icon-margin; - left: $popup-close-icon-margin; + bottom: vars.$popup-close-icon-margin; + left: vars.$popup-close-icon-margin; } &--bottom-right { - right: $popup-close-icon-margin; - bottom: $popup-close-icon-margin; + right: vars.$popup-close-icon-margin; + bottom: vars.$popup-close-icon-margin; } } } diff --git a/src/packages/__VUE/price/index.scss b/src/packages/__VUE/price/index.scss index 9f931d175b..dbda621455 100644 --- a/src/packages/__VUE/price/index.scss +++ b/src/packages/__VUE/price/index.scss @@ -1,7 +1,9 @@ +@use '../../styles/variables.scss' as vars; + .nut-price { font-size: 0; display: inline; - color: $primary-color; + color: vars.$primary-color; &--strike { [class*='nut-price'] { text-decoration: line-through; @@ -9,46 +11,46 @@ } &--symbol { display: inline-block; - font-size: $font-size-3; + font-size: vars.$font-size-3; } &--large { display: inline-block; - font-size: $price-big-size; + font-size: vars.$price-big-size; } &--point { display: inline-block; - font-size: $price-big-size; + font-size: vars.$price-big-size; } &--decimal-large { display: inline-block; - font-size: $price-decimal-big-size; + font-size: vars.$price-decimal-big-size; } &--symbol-large { display: inline-block; - font-size: $price-symbol-big-size; + font-size: vars.$price-symbol-big-size; } &--normal { display: inline-block; - font-size: $price-medium-size; + font-size: vars.$price-medium-size; } &--decimal-normal { display: inline-block; - font-size: $price-decimal-medium-size; + font-size: vars.$price-decimal-medium-size; } &--symbol-normal { display: inline-block; - font-size: $price-symbol-medium-size; + font-size: vars.$price-symbol-medium-size; } &--small { display: inline-block; - font-size: $price-small-size; + font-size: vars.$price-small-size; } &--decimal-small { display: inline-block; - font-size: $price-decimal-small-size; + font-size: vars.$price-decimal-small-size; } &--symbol-small { display: inline-block; - font-size: $price-symbol-small-size; + font-size: vars.$price-symbol-small-size; } } diff --git a/src/packages/__VUE/progress/index.scss b/src/packages/__VUE/progress/index.scss index 9f68fa039b..eab1218d3d 100644 --- a/src/packages/__VUE/progress/index.scss +++ b/src/packages/__VUE/progress/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-progress { width: 100%; position: relative; @@ -5,14 +7,14 @@ align-items: center; .nut-progress-outer { flex: 1; - background-color: $progress-outer-background-color; - border-radius: $progress-outer-border-radius; + background-color: vars.$progress-outer-background-color; + border-radius: vars.$progress-outer-border-radius; height: 10px; .nut-progress-inner { width: 30%; height: 100%; - border-radius: $progress-outer-border-radius; - background: $progress-inner-background-color; + border-radius: vars.$progress-outer-border-radius; + background: vars.$progress-inner-background-color; -webkit-transition: all 0.4s; transition: all 0.4s; // position: relative; @@ -36,7 +38,7 @@ left: 0; right: 0; bottom: 0; - border-radius: $progress-outer-border-radius; + border-radius: vars.$progress-outer-border-radius; animation: progressActive 2s ease-in-out infinite; } } @@ -55,30 +57,30 @@ } } &.nut-progress-small { - height: $progress-small-height; + height: vars.$progress-small-height; .nut-progress-text { - font-size: $progress-small-text-font-size; - line-height: $progress-small-text-line-height; - padding: $progress-small-text-padding; - // top: $progress-small-text-top; + font-size: vars.$progress-small-text-font-size; + line-height: vars.$progress-small-text-line-height; + padding: vars.$progress-small-text-padding; + // top: vars.$progress-small-text-top; top: 50%; } } &.nut-progress-base { - height: $progress-base-height; + height: vars.$progress-base-height; .nut-progress-text { - font-size: $progress-base-text-font-size; - line-height: $progress-base-text-line-height; - padding: $progress-base-text-padding; + font-size: vars.$progress-base-text-font-size; + line-height: vars.$progress-base-text-line-height; + padding: vars.$progress-base-text-padding; top: 50%; } } &.nut-progress-large { - height: $progress-large-height; + height: vars.$progress-large-height; .nut-progress-text { - font-size: $progress-large-text-font-size; - line-height: $progress-large-text-line-height; - padding: $progress-large-text-padding; + font-size: vars.$progress-large-text-font-size; + line-height: vars.$progress-large-text-line-height; + padding: vars.$progress-large-text-padding; top: 50%; } } @@ -95,9 +97,9 @@ align-items: center; } .nut-progress-insidetext { - padding: $progress-insidetext-padding; - background: $progress-insidetext-background; - border-radius: $progress-insidetext-border-radius; + padding: vars.$progress-insidetext-padding; + background: vars.$progress-insidetext-background; + border-radius: vars.$progress-insidetext-border-radius; position: absolute; transition: all 0.4s; top: 50%; diff --git a/src/packages/__VUE/pullrefresh/index.scss b/src/packages/__VUE/pullrefresh/index.scss index 20e0159c8e..04e8191002 100644 --- a/src/packages/__VUE/pullrefresh/index.scss +++ b/src/packages/__VUE/pullrefresh/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-pull-refresh { height: 100%; overflow: hidden; @@ -23,8 +25,8 @@ height: 16px; } &-text { - font-size: $font-size-2; - color: $text-color; + font-size: vars.$font-size-2; + color: vars.$text-color; } } } diff --git a/src/packages/__VUE/radio/index.scss b/src/packages/__VUE/radio/index.scss index 42980764cd..0b3678792b 100644 --- a/src/packages/__VUE/radio/index.scss +++ b/src/packages/__VUE/radio/index.scss @@ -1,20 +1,22 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-radio { &__label { - color: $dark-color; + color: vars.$dark-color; &--disabled { - color: $radio-label-disable-color; + color: vars.$radio-label-disable-color; } } &__button { - background: $dark-background; - color: $dark-color; + background: vars.$dark-background; + color: vars.$dark-color; &--disabled { - color: $radio-label-disable-color; - border: 1px solid $radio-label-disable-color; + color: vars.$radio-label-disable-color; + border: 1px solid vars.$radio-label-disable-color; } } } @@ -35,7 +37,7 @@ flex-direction: row-reverse; .nut-radio__label { - margin-right: $radio-label-margin-left; + margin-right: vars.$radio-label-margin-left; margin-left: 0; } } @@ -43,18 +45,18 @@ &__button { display: inline-flex; align-items: center; - padding: $radio-button-padding; - font-size: $radio-button-font-size; + padding: vars.$radio-button-padding; + font-size: vars.$radio-button-font-size; background: #f6f7f9; - border-radius: $radio-button-border-radius; - color: $radio-label-font-color; + border-radius: vars.$radio-button-border-radius; + color: vars.$radio-label-font-color; box-sizing: border-box; border: 1px solid #f6f7f9; &--active { background: transparent; - color: $radio-label-font-active-color; - border: 1px solid $radio-label-button-border-color; + color: vars.$radio-label-font-active-color; + border: 1px solid vars.$radio-label-button-border-color; position: relative; &::after { @@ -65,61 +67,61 @@ left: 0; width: 100%; height: 100%; - background-color: $radio-label-button-background; - border-radius: $radio-button-border-radius; + background-color: vars.$radio-label-button-background; + border-radius: vars.$radio-button-border-radius; opacity: 0.05; content: ''; } } &--disabled { - color: $radio-label-disable-color; + color: vars.$radio-label-disable-color; border: none; } &--large { - height: $button-large-height; - line-height: $button-large-line-height; - font-size: $button-large-font-size; + height: vars.$button-large-height; + line-height: vars.$button-large-line-height; + font-size: vars.$button-large-font-size; } &--small { - height: $button-small-height; - line-height: $button-small-line-height; - padding: $button-small-padding; - font-size: $button-small-font-size; + height: vars.$button-small-height; + line-height: vars.$button-small-line-height; + padding: vars.$button-small-padding; + font-size: vars.$button-small-font-size; } &--mini { - height: $button-mini-height; - line-height: $button-mini-line-height; - padding: $button-mini-padding; - font-size: $button-mini-font-size; + height: vars.$button-mini-height; + line-height: vars.$button-mini-line-height; + padding: vars.$button-mini-padding; + font-size: vars.$button-mini-font-size; } } &__label { flex: 1; - margin-left: $radio-label-margin-left; - font-size: $radio-label-font-size; - color: $radio-label-font-color; + margin-left: vars.$radio-label-margin-left; + font-size: vars.$radio-label-font-size; + color: vars.$radio-label-font-color; &--disabled { - color: $radio-label-disable-color; + color: vars.$radio-label-disable-color; } } &__icon { - color: $radio-label-font-active-color; + color: vars.$radio-label-font-active-color; transition-duration: 0.3s; transition-property: color, border-color, background-color; } &__icon--unchecked { - color: $radio-icon-disable-color; + color: vars.$radio-icon-disable-color; } &__icon--disable { - color: $radio-icon-disable-color2; + color: vars.$radio-icon-disable-color2; } } diff --git a/src/packages/__VUE/range/index.scss b/src/packages/__VUE/range/index.scss index 17112740be..206f46cce9 100644 --- a/src/packages/__VUE/range/index.scss +++ b/src/packages/__VUE/range/index.scss @@ -1,17 +1,19 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-range-container { - background: $dark-background; + background: vars.$dark-background; .nut-range-min, .nut-range-max { - color: $dark-color-gray; + color: vars.$dark-color-gray; } .nut-range { &-mark-text { - color: $dark-color-gray; + color: vars.$dark-color-gray; } &-button { .number { - color: $dark-color; + color: vars.$dark-color; } } } @@ -25,8 +27,8 @@ align-items: center; .nut-range-min, .nut-range-max { - font-size: $font-size-1; - color: $range-tip-font-color; + font-size: vars.$font-size-1; + color: vars.$range-tip-font-color; user-select: none; } &-vertical { @@ -84,7 +86,7 @@ transform: translateY(-50%); &-active { .nut-range-tick { - background: $range-bar-bg-color; + background: vars.$range-bar-bg-color; } } } @@ -96,7 +98,7 @@ height: 11px; margin-left: -0px; border-radius: 50%; - background-color: $range-bg-color-tick; + background-color: vars.$range-bg-color-tick; } } } @@ -116,7 +118,7 @@ left: 0; width: 100%; height: 100%; - background-color: $range-bg-color; + background-color: vars.$range-bg-color; opacity: 0.5; content: ''; } @@ -126,19 +128,19 @@ position: relative; width: 100%; height: 100%; - background: $range-bar-bg-color; + background: vars.$range-bar-bg-color; border-radius: inherit; transition: all 0.2s; } &-button { display: block; - width: $range-bar-btn-width; - height: $range-bar-btn-height; - background-color: $range-bar-btn-bg-color; + width: vars.$range-bar-btn-width; + height: vars.$range-bar-btn-height; + background-color: vars.$range-bar-btn-bg-color; border-radius: 50%; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); - border: $range-bar-btn-border; + border: vars.$range-bar-btn-border; outline: none; &-wrapper, @@ -167,8 +169,8 @@ align-items: center; justify-content: center; user-select: none; - font-size: $font-size-1; - color: $range-tip-font-color; + font-size: vars.$font-size-1; + color: vars.$range-tip-font-color; transform: translate3d(0, -100%, 0); } } @@ -207,7 +209,7 @@ transform: translateX(-50%); &-active { .nut-range-tick { - background: $range-bar-bg-color; + background: vars.$range-bar-bg-color; } } } @@ -219,6 +221,6 @@ // margin-left: -11px; left: 0px; border-radius: 50%; - background-color: $range-bg-color-tick; + background-color: vars.$range-bg-color-tick; } } diff --git a/src/packages/__VUE/rate/index.scss b/src/packages/__VUE/rate/index.scss index 76e6f5d54a..f5ad8a8088 100644 --- a/src/packages/__VUE/rate/index.scss +++ b/src/packages/__VUE/rate/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-rate { display: inline-flex; &-item { @@ -10,12 +12,12 @@ } &__icon { - color: $rate-icon-color; + color: vars.$rate-icon-color; flex-shrink: 0; cursor: pointer; &--disabled { - color: $rate-icon-void-color; + color: vars.$rate-icon-void-color; } &--full { display: flex; diff --git a/src/packages/__VUE/searchbar/index.scss b/src/packages/__VUE/searchbar/index.scss index c81f6a9d0b..40332e2977 100644 --- a/src/packages/__VUE/searchbar/index.scss +++ b/src/packages/__VUE/searchbar/index.scss @@ -1,32 +1,34 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-searchbar { - background: $dark-background; + background: vars.$dark-background; &__search-label { - color: $dark-color; + color: vars.$dark-color; } .nut-searchbar__input-clear { & .nut-searchbar__nut-icon-mask-close { - color: $dark-color; + color: vars.$dark-color; &:hover { cursor: pointer; - color: $dark-color; + color: vars.$dark-color; } } } &__right-search-icon, &__left-search-icon { - color: $dark-color; + color: vars.$dark-color; } } } .nut-searchbar { display: flex; align-items: center; - width: $searchbar-width; - padding: $searchbar-padding; - background: $searchbar-background; + width: vars.$searchbar-width; + padding: vars.$searchbar-padding; + background: vars.$searchbar-background; box-sizing: border-box; - color: $searchbar-input-bar-color; + color: vars.$searchbar-input-bar-color; &.safe-area-inset-bottom { position: relative; @@ -40,12 +42,12 @@ width: 100%; height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom); - background: $searchbar-background; + background: vars.$searchbar-background; } } &::placeholder { - color: $searchbar-input-bar-placeholder-color; + color: vars.$searchbar-input-bar-placeholder-color; } &__search-label { @@ -55,13 +57,13 @@ &__search-input { display: flex; align-items: center; - width: $searchbar-input-width; - height: $searchbar-input-height; + width: vars.$searchbar-input-width; + height: vars.$searchbar-input-height; flex: 1; - padding: $searchbar-input-padding; - border-radius: $searchbar-input-border-radius; - box-shadow: $searchbar-input-box-shadow; - background: $searchbar-input-background; + padding: vars.$searchbar-input-padding; + border-radius: vars.$searchbar-input-border-radius; + box-shadow: vars.$searchbar-input-box-shadow; + background: vars.$searchbar-input-background; box-sizing: border-box; &.square { @@ -167,6 +169,6 @@ &__right-search-icon { margin-left: 16px; font-size: 14px; - color: $searchbar-right-out-color; + color: vars.$searchbar-right-out-color; } } diff --git a/src/packages/__VUE/shortpassword/index.scss b/src/packages/__VUE/shortpassword/index.scss index 963e1a1762..2d21e47a42 100644 --- a/src/packages/__VUE/shortpassword/index.scss +++ b/src/packages/__VUE/shortpassword/index.scss @@ -1,19 +1,19 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-short-password-title { - color: $dark-color; + color: vars.$dark-color; } .nut-short-password-wrapper { .nut-short-password__list { border: none; - background: $dark-background3; + background: vars.$dark-background3; .nut-short-password__item { position: relative; .nut-short-password__item-icon { - background: $dark-color; + background: vars.$dark-color; } &::after { @@ -35,16 +35,16 @@ .nut-short-password-title { line-height: 1; - font-size: $font-size-3; - color: $title-color; + font-size: vars.$font-size-3; + color: vars.$title-color; } .nut-short-password-subtitle { display: block; margin-top: 12px; line-height: 1; - font-size: $font-size-1; - color: $text-color; + font-size: vars.$font-size-1; + color: vars.$text-color; } .nut-short-password-wrapper { @@ -57,9 +57,9 @@ width: 100%; height: 41px; margin: 0 auto; - background: $shortpassword-background-color; + background: vars.$shortpassword-background-color; border-radius: 4px; - border: 1px solid $shortpassword-border-color; + border: 1px solid vars.$shortpassword-border-color; display: flex; z-index: 10; } @@ -87,14 +87,14 @@ .nut-short-password--error { line-height: 1; - font-size: $font-size-0; - color: $shortpassword-error; + font-size: vars.$font-size-0; + color: vars.$shortpassword-error; } .nut-short-password--forget { line-height: 1; - font-size: $font-size-1; - color: $shortpassword-forget; + font-size: vars.$font-size-1; + color: vars.$shortpassword-forget; display: flex; } } diff --git a/src/packages/__VUE/sidenavbar/index.scss b/src/packages/__VUE/sidenavbar/index.scss index cc457e6639..c5073017c6 100644 --- a/src/packages/__VUE/sidenavbar/index.scss +++ b/src/packages/__VUE/sidenavbar/index.scss @@ -1,9 +1,11 @@ +@use '../../styles/variables.scss' as vars; + .nut-side-navbar { overflow: auto; display: block; &__content { position: relative; - background-color: $sidenavbar-content-bg-color; + background-color: vars.$sidenavbar-content-bg-color; display: block; &__list { width: 100%; diff --git a/src/packages/__VUE/sidenavbaritem/index.scss b/src/packages/__VUE/sidenavbaritem/index.scss index e9cb6128d1..c368476416 100644 --- a/src/packages/__VUE/sidenavbaritem/index.scss +++ b/src/packages/__VUE/sidenavbaritem/index.scss @@ -1,20 +1,22 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-side-navbar-item { - background-color: $dark-background2; + background-color: vars.$dark-background2; &__title { - background-color: $dark-background2; - color: $dark-color; + background-color: vars.$dark-background2; + color: vars.$dark-color; } } } .nut-side-navbar-item { - height: $sidenavbar-item-height; - line-height: $sidenavbar-item-line-height; + height: vars.$sidenavbar-item-height; + line-height: vars.$sidenavbar-item-line-height; display: block; - font-size: $sidenavbar-item-font-size; - background-color: $sidenavbar-item-title-bg-color; + font-size: vars.$sidenavbar-item-font-size; + background-color: vars.$sidenavbar-item-title-bg-color; &__title { - color: $sidenavbar-item-title-color; - background-color: $sidenavbar-item-title-bg-color; + color: vars.$sidenavbar-item-title-color; + background-color: vars.$sidenavbar-item-title-bg-color; } } diff --git a/src/packages/__VUE/signature/index.scss b/src/packages/__VUE/signature/index.scss index d1d3bfbee4..0b64398640 100644 --- a/src/packages/__VUE/signature/index.scss +++ b/src/packages/__VUE/signature/index.scss @@ -1,4 +1,4 @@ -@import '../button/index.scss'; +// @import '../button/index.scss'; .nut-signature { .nut-signature-inner { diff --git a/src/packages/__VUE/skeleton/index.scss b/src/packages/__VUE/skeleton/index.scss index c39369dfb0..772152fe06 100644 --- a/src/packages/__VUE/skeleton/index.scss +++ b/src/packages/__VUE/skeleton/index.scss @@ -1,4 +1,5 @@ -@import '../avatar/index.scss'; +// @import '../avatar/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-skeleton { display: inline-block; @@ -9,7 +10,7 @@ display: flex; .avatarClass { margin-right: 20px; - background-color: $skeleton-content-avatar-background-color; + background-color: vars.$skeleton-content-avatar-background-color; } .nut-skeleton-content__line { @@ -19,7 +20,7 @@ .nut-skeleton-blockLine { width: 100%; margin-bottom: 10px; - background-color: $skeleton-content-line-background-color; + background-color: vars.$skeleton-content-line-background-color; } .nut-skeleton-blockTitle { width: 30%; @@ -46,7 +47,7 @@ width: 100%; height: 100%; z-index: 1; - background: $skeleton-animation-background-color; + background: vars.$skeleton-animation-background-color; background-repeat: no-repeat; animation: backpos 2s ease-in-out 0s infinite; } diff --git a/src/packages/__VUE/sku/index.scss b/src/packages/__VUE/sku/index.scss index 49fe03d3dd..639201bfe3 100644 --- a/src/packages/__VUE/sku/index.scss +++ b/src/packages/__VUE/sku/index.scss @@ -1,20 +1,18 @@ -@import '../price/index.scss'; -@import '../inputnumber/index.scss'; -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-sku { - background: $dark-background; + background: vars.$dark-background; &-select { &-item { &-title { - color: $dark-color; + color: vars.$dark-color; } &-skus { &-sku { - color: $dark-color; - background: $dark-background2; + color: vars.$dark-color; + background: vars.$dark-background2; } } } @@ -22,21 +20,21 @@ &-stepper { &-title { - color: $dark-color; + color: vars.$dark-color; } &-limit { - color: $dark-color; + color: vars.$dark-color; } &-count { &-lowestBuy { - color: $primary-color; + color: vars.$primary-color; } } } &-operate { &-btn { - background: $dark-background2; + background: vars.$dark-background2; } } } @@ -47,7 +45,7 @@ display: flex; flex-direction: column; padding: 0px; - background: $white; + background: vars.$white; &-header { height: 100px; display: flex; @@ -55,11 +53,11 @@ margin-top: 18px; padding: 0 18px; .nut-sku-header-img { - width: $sku-product-img-width; - height: $sku-product-img-height; + width: vars.$sku-product-img-width; + height: vars.$sku-product-img-height; flex-shrink: 0; margin-right: 12px; - border-radius: $sku-product-img-border-radius; + border-radius: vars.$sku-product-img-border-radius; } &-right { flex: 1; @@ -68,7 +66,7 @@ justify-content: flex-end; &-extra { font-size: 12px; - color: $text-color; + color: vars.$text-color; } } } @@ -88,31 +86,31 @@ flex-direction: column; &-title { height: 13px; - font-weight: $sku-spec-title-font-weight; - font-size: $sku-spec-title-font-size; - color: $sku-spec-title-color; - margin-bottom: $sku-spec-title-margin-bottom; + font-weight: vars.$sku-spec-title-font-weight; + font-size: vars.$sku-spec-title-font-size; + color: vars.$sku-spec-title-color; + margin-bottom: vars.$sku-spec-title-margin-bottom; } &-skus { display: flex; flex-wrap: wrap; &-sku { - margin-right: $sku-spec-margin-right; - height: $sku-spec-height; - line-height: $sku-spec-line-height; - padding: $sku-spec-padding; + margin-right: vars.$sku-spec-margin-right; + height: vars.$sku-spec-height; + line-height: vars.$sku-spec-line-height; + padding: vars.$sku-spec-padding; border-radius: 15px; - font-size: $sku-spec-font-size; - color: $sku-spec-color; + font-size: vars.$sku-spec-font-size; + color: vars.$sku-spec-color; flex-shrink: 0; margin-bottom: 12px; - background: $sku-spec-background; + background: vars.$sku-spec-background; border: 1px solid rgba(242, 242, 242, 1); &.active { background: transparent; - border: $sku-item-border; - color: $primary-color; + border: vars.$sku-item-border; + color: vars.$primary-color; position: relative; &::after { position: absolute; @@ -123,14 +121,14 @@ width: 100%; height: 100%; border-radius: 15px; - background-color: $sku-item-active-bg; + background-color: vars.$sku-item-active-bg; opacity: 0.15; content: ''; } } &.disable { - color: $text-color; - text-decoration: $sku-item-disable-line; + color: vars.$text-color; + text-decoration: vars.$sku-item-disable-line; } } } @@ -143,7 +141,7 @@ &-title { font-weight: bold; font-size: 13px; - color: $black; + color: vars.$black; margin-right: 12px; } &-limit { @@ -152,14 +150,14 @@ align-items: center; font-size: 12px; - color: $text-color; + color: vars.$text-color; } &-count { display: flex; align-items: center; &-lowestBuy { font-size: 12px; - color: $primary-color; + color: vars.$primary-color; } } } @@ -175,33 +173,33 @@ font-size: 12px; } &-btn { - height: $sku-operate-btn-height; + height: vars.$sku-operate-btn-height; width: 100%; display: flex; justify-content: space-between; align-items: center; - background: $white; + background: vars.$white; text-align: center; padding: 0 18px; box-sizing: border-box; - border-top: $sku-operate-btn-border-top; + border-top: vars.$sku-operate-btn-border-top; &-item { width: 100%; - height: $sku-operate-btn-item-height; - line-height: $sku-operate-btn-item-line-height; + height: vars.$sku-operate-btn-item-height; + line-height: vars.$sku-operate-btn-item-line-height; margin-right: 18px; - background: $sku-opetate-bg-default; + background: vars.$sku-opetate-bg-default; border-radius: 21px; - font-size: $sku-operate-btn-item-font-size; - font-weight: $sku-operate-btn-item-font-weight; - color: $white; + font-size: vars.$sku-operate-btn-item-font-size; + font-weight: vars.$sku-operate-btn-item-font-weight; + color: vars.$white; &:last-child { margin-right: 0; } } &-buy { - background: $sku-opetate-bg-buy; + background: vars.$sku-opetate-bg-buy; } } } diff --git a/src/packages/__VUE/space/index.scss b/src/packages/__VUE/space/index.scss index 5ec44bae90..4d93a56c4e 100644 --- a/src/packages/__VUE/space/index.scss +++ b/src/packages/__VUE/space/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-space { display: inline-flex; @@ -9,7 +11,7 @@ flex-direction: column; > .nut-space-item { &:not(:last-child) { - margin-bottom: $space-gap; + margin-bottom: vars.$space-gap; } } } @@ -18,14 +20,14 @@ flex-direction: row; > .nut-space-item { &:not(:last-child) { - margin-right: $space-gap; + margin-right: vars.$space-gap; } } &.nut-space-wrap { flex-wrap: wrap; - margin-bottom: calc(#{$space-gap} * -1); + margin-bottom: calc(#{vars.$space-gap} * -1); > .nut-space-item { - padding-bottom: $space-gap; + padding-bottom: vars.$space-gap; } } } diff --git a/src/packages/__VUE/step/index.scss b/src/packages/__VUE/step/index.scss index 06fa7ea477..1d2f165ecc 100644 --- a/src/packages/__VUE/step/index.scss +++ b/src/packages/__VUE/step/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-step { flex-grow: 0; flex-shrink: 0; @@ -17,15 +19,15 @@ right: -50%; display: inline-block; height: 1px; - background: $steps-base-line-color; + background: vars.$steps-base-line-color; } &-icon { position: relative; display: flex; - width: $steps-base-icon-width; - height: $steps-base-icon-height; - line-height: $steps-base-icon-line-height; - font-size: $steps-base-icon-font-size; + width: vars.$steps-base-icon-width; + height: vars.$steps-base-icon-height; + line-height: vars.$steps-base-icon-line-height; + font-size: vars.$steps-base-icon-font-size; align-items: center; justify-content: center; z-index: 1; @@ -35,8 +37,8 @@ align-items: center; } .nut-icon { - width: $steps-base-icon-font-size; - height: $steps-base-icon-font-size; + width: vars.$steps-base-icon-font-size; + height: vars.$steps-base-icon-font-size; } &.is-icon { border-radius: 50%; @@ -52,14 +54,14 @@ } &-title { display: block; - margin-bottom: $steps-base-title-margin-bottom; - font-size: $steps-base-title-font-size; - color: $steps-base-title-color; + margin-bottom: vars.$steps-base-title-margin-bottom; + font-size: vars.$steps-base-title-font-size; + color: vars.$steps-base-title-color; } &-content { display: block; - font-size: $steps-base-content-font-size; - color: $steps-base-content-color; + font-size: vars.$steps-base-content-font-size; + color: vars.$steps-base-content-color; } &:last-child { .nut-step-line { @@ -68,45 +70,45 @@ } &.nut-step-finish { .nut-step-head { - color: $steps-finish-head-color; - border-color: $steps-finish-head-border-color; + color: vars.$steps-finish-head-color; + border-color: vars.$steps-finish-head-border-color; } .nut-step-icon.is-icon { - background-color: $steps-finish-icon-text-color; + background-color: vars.$steps-finish-icon-text-color; } .nut-step-line { - background: $steps-finish-line-background; + background: vars.$steps-finish-line-background; } .nut-step-title { - color: $steps-finish-title-color; + color: vars.$steps-finish-title-color; } } &.nut-step-process { .nut-step-head { - color: $steps-process-head-color; - border-color: $steps-process-head-border-color; + color: vars.$steps-process-head-color; + border-color: vars.$steps-process-head-border-color; } .nut-step-icon.is-icon { - background-color: $steps-process-icon-text-color; + background-color: vars.$steps-process-icon-text-color; } .nut-step-title { - color: $steps-process-title-color; + color: vars.$steps-process-title-color; } } &.nut-step-wait { .nut-step-head { - color: $steps-wait-head-color; - border-color: $steps-wait-head-border-color; + color: vars.$steps-wait-head-color; + border-color: vars.$steps-wait-head-border-color; } .nut-step-icon.is-icon { - background-color: $steps-wait-icon-bg-color; - color: $steps-wait-icon-text-color; + background-color: vars.$steps-wait-icon-bg-color; + color: vars.$steps-wait-icon-text-color; .nut-icon { - color: $steps-wait-icon-color; + color: vars.$steps-wait-icon-color; } } .nut-step-content { - color: $steps-wait-content-color; + color: vars.$steps-wait-content-color; } } } @@ -123,27 +125,27 @@ .nut-step-icon { width: 8px; height: 8px; - background: $primary-color; + background: vars.$primary-color; border-radius: 50%; box-sizing: content-box; } .nut-step-wait { .nut-step-icon { - background-color: $steps-wait-icon-bg-color; + background-color: vars.$steps-wait-icon-bg-color; } .nut-step-content { - color: $steps-wait-content-color; + color: vars.$steps-wait-content-color; } } .nut-step-finish { .nut-step-icon { - background-color: $primary-color; + background-color: vars.$primary-color; } } .nut-step-process { .nut-step-icon { position: relative; - background-color: $primary-color; + background-color: vars.$primary-color; &:before { content: ''; display: inline-block; @@ -154,7 +156,7 @@ margin-top: -7px; width: 14px; height: 14px; - background-color: $primary-color-end; + background-color: vars.$primary-color-end; border-radius: 50%; opacity: 0.23; } @@ -192,27 +194,27 @@ .nut-step-icon { width: 8px; height: 8px; - background: $primary-color; + background: vars.$primary-color; border-radius: 50%; box-sizing: content-box; } .nut-step-wait { .nut-step-icon { - background-color: $steps-wait-icon-bg-color; + background-color: vars.$steps-wait-icon-bg-color; } .nut-step-content { - color: $steps-wait-content-color; + color: vars.$steps-wait-content-color; } } .nut-step-finish { .nut-step-icon { - background-color: $primary-color; + background-color: vars.$primary-color; } } .nut-step-process { .nut-step-icon { position: relative; - background-color: $primary-color; + background-color: vars.$primary-color; &:before { content: ''; display: inline-block; @@ -223,7 +225,7 @@ margin-top: -7px; width: 14px; height: 14px; - background-color: $primary-color-end; + background-color: vars.$primary-color-end; border-radius: 50%; opacity: 0.23; } diff --git a/src/packages/__VUE/subsidenavbar/index.scss b/src/packages/__VUE/subsidenavbar/index.scss index 0f95171b86..23b752747e 100644 --- a/src/packages/__VUE/subsidenavbar/index.scss +++ b/src/packages/__VUE/subsidenavbar/index.scss @@ -1,11 +1,13 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-sub-side-navbar { - background-color: $dark-background2; + background-color: vars.$dark-background2; &__title { - background-color: $dark-background3; - color: $dark-color; + background-color: vars.$dark-background3; + color: vars.$dark-color; &__text { - color: $dark-color; + color: vars.$dark-color; } } } @@ -17,22 +19,22 @@ position: relative; &__title { display: block; - width: $sidenavbar-sub-title-width; - height: $sidenavbar-sub-title-height; + width: vars.$sidenavbar-sub-title-width; + height: vars.$sidenavbar-sub-title-height; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; - border-bottom: 1px solid $sidenavbar-sub-title-border-color; - color: $sidenavbar-sub-title-text-color; - font-size: $sidenavbar-sub-title-font-size; - background-color: $sidenavbar-sub-title-bg-color; - border-radius: $sidenavbar-sub-title-radius; - border: $sidenavbar-sub-title-border; + border-bottom: 1px solid vars.$sidenavbar-sub-title-border-color; + color: vars.$sidenavbar-sub-title-text-color; + font-size: vars.$sidenavbar-sub-title-font-size; + background-color: vars.$sidenavbar-sub-title-bg-color; + border-radius: vars.$sidenavbar-sub-title-radius; + border: vars.$sidenavbar-sub-title-border; &__text { - line-height: $sidenavbar-sub-title-text-line-height; - color: $sidenavbar-sub-title-text-color; + line-height: vars.$sidenavbar-sub-title-text-line-height; + color: vars.$sidenavbar-sub-title-text-color; } &__icon { position: absolute; diff --git a/src/packages/__VUE/swiper/index.scss b/src/packages/__VUE/swiper/index.scss index ed59f9a5c6..ce81fca4be 100644 --- a/src/packages/__VUE/swiper/index.scss +++ b/src/packages/__VUE/swiper/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + .nut-swiper { position: relative; display: flex; @@ -22,10 +24,10 @@ bottom: 12px; transform: translateX(-50%); i { - width: $swiper-pagination-item-width; - height: $swiper-pagination-item-height; - margin-right: $swiper-pagination-item-margin-right; - border-radius: $swiper-pagination-item-border-radius; + width: vars.$swiper-pagination-item-width; + height: vars.$swiper-pagination-item-height; + margin-right: vars.$swiper-pagination-item-margin-right; + border-radius: vars.$swiper-pagination-item-border-radius; &:last-child { margin-right: 0; } diff --git a/src/packages/__VUE/switch/index.scss b/src/packages/__VUE/switch/index.scss index 12581cf6bf..a5bededccd 100644 --- a/src/packages/__VUE/switch/index.scss +++ b/src/packages/__VUE/switch/index.scss @@ -1,9 +1,11 @@ +@use '../../styles/variables.scss' as vars; + .nut-switch { cursor: pointer; display: inline-flex; align-items: center; - background-color: $primary-color; - border-radius: $switch-border-radius; + background-color: vars.$primary-color; + border-radius: vars.$switch-border-radius; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; @@ -16,18 +18,18 @@ } &.nut-switch-close { - background-color: $switch-close-bg-color; + background-color: vars.$switch-close-bg-color; } .nut-switch-button { display: flex; align-items: center; justify-content: center; border-radius: 50%; - background: $white; + background: vars.$white; transition: transform 0.3s; .nut-switch-label { - color: $white; - font-size: $font-size-1; + color: vars.$white; + font-size: vars.$font-size-1; &.open { transform: translateX(-16px); } @@ -40,18 +42,18 @@ opacity: 0.6; } &.nut-switch-base { - min-width: $switch-width; - height: $switch-height; - line-height: $switch-line-height; + min-width: vars.$switch-width; + height: vars.$switch-height; + line-height: vars.$switch-line-height; overflow: hidden; .nut-switch-button { - height: $switch-inside-height; - width: $switch-inside-width; - transform: $switch-inside-close-transform; + height: vars.$switch-inside-height; + width: vars.$switch-inside-width; + transform: vars.$switch-inside-close-transform; } &.nut-switch-open { .nut-switch-button { - transform: $switch-inside-open-transform; + transform: vars.$switch-inside-open-transform; } } } diff --git a/src/packages/__VUE/tabbar/index.scss b/src/packages/__VUE/tabbar/index.scss index a951684e05..b3c23d6c04 100644 --- a/src/packages/__VUE/tabbar/index.scss +++ b/src/packages/__VUE/tabbar/index.scss @@ -1,19 +1,21 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-tabbar { - background: $dark-background; + background: vars.$dark-background; } } .nut-tabbar { border: 0px; - box-shadow: $tabbar-box-shadow; - border-bottom: $tabbar-border-bottom; - border-top: $tabbar-border-top; + box-shadow: vars.$tabbar-box-shadow; + border-bottom: vars.$tabbar-border-bottom; + border-top: vars.$tabbar-border-top; width: 100%; display: flex; align-items: center; box-sizing: content-box; - background: $white; - height: $tabbar-height; + background: vars.$white; + height: vars.$tabbar-height; &:last-child { border-right: 0; diff --git a/src/packages/__VUE/tabbaritem/index.scss b/src/packages/__VUE/tabbaritem/index.scss index ad076a3865..ac23e58f50 100644 --- a/src/packages/__VUE/tabbaritem/index.scss +++ b/src/packages/__VUE/tabbaritem/index.scss @@ -1,9 +1,10 @@ -@import '../badge/index.scss'; +// @import '../badge/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-tabbar-item { &__icon--unactive { - color: $dark-color-gray; + color: vars.$dark-color-gray; } } } @@ -11,14 +12,14 @@ flex: 1; text-align: center; text-decoration: none; - color: $primary-color; + color: vars.$primary-color; height: 100%; display: flex; justify-content: center; align-items: center; &__icon--unactive { - color: $black; + color: vars.$black; } &_icon-box { @@ -36,15 +37,15 @@ &_tips { position: absolute; - background: $tabbar-active-color; - border: 1px solid $white; + background: vars.$tabbar-active-color; + border: 1px solid vars.$white; border-radius: 7px; text-align: center; top: -2px; right: -7px; - box-shadow: 0 0 0 1px $white; - font-size: $font-size-1; - color: $white; + box-shadow: 0 0 0 1px vars.$white; + font-size: vars.$font-size-1; + color: vars.$white; z-index: 1; } &_icon { @@ -57,13 +58,13 @@ } } &_nav-word { - font-size: $tabbar-item-text-font-size; - line-height: $tabbar-item-text-line-height; - margin-top: $tabbar-word-margin-top; + font-size: vars.$tabbar-item-text-font-size; + line-height: vars.$tabbar-item-text-line-height; + margin-top: vars.$tabbar-word-margin-top; display: block; } &_big-word { - font-size: $font-size-large; + font-size: vars.$font-size-large; line-height: 1; } } diff --git a/src/packages/__VUE/table/index.scss b/src/packages/__VUE/table/index.scss index 790bfac7e7..09eeea6d39 100644 --- a/src/packages/__VUE/table/index.scss +++ b/src/packages/__VUE/table/index.scss @@ -1,33 +1,35 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-table { &__main { - color: $dark-color; - background-color: $dark-background2; + color: vars.$dark-color; + background-color: vars.$dark-background2; &--striped { .nut-table__main__head { &__tr { - background-color: $dark-background3; + background-color: vars.$dark-background3; } } .nut-table__main__body { &__tr:nth-child(odd) { - background-color: $dark-color-gray; + background-color: vars.$dark-color-gray; } } .nut-table__main__body { &__tr:nth-child(even) { - background-color: $dark-background3; + background-color: vars.$dark-background3; } } } } &__summary { - color: $dark-color; - background-color: $dark-background; + color: vars.$dark-color; + background-color: vars.$dark-background; } &__nodata { - color: $dark-color; - background-color: $dark-background; + color: vars.$dark-color; + background-color: vars.$dark-background; } } } @@ -35,7 +37,7 @@ display: flex; width: 100%; flex-direction: column; - font-size: $font-size-2; + font-size: vars.$font-size-2; &__main { display: table; width: 100%; @@ -44,17 +46,17 @@ &--striped { .nut-table__main__head { &__tr { - background-color: $table-tr-even-bg-color; + background-color: vars.$table-tr-even-bg-color; } } .nut-table__main__body { &__tr:nth-child(odd) { - background-color: $table-tr-odd-bg-color; + background-color: vars.$table-tr-odd-bg-color; } } .nut-table__main__body { &__tr:nth-child(even) { - background-color: $table-tr-even-bg-color; + background-color: vars.$table-tr-even-bg-color; } } } @@ -64,11 +66,11 @@ display: table-row; &__th { display: table-cell; - padding: $table-cols-padding; + padding: vars.$table-cols-padding; } &__td { display: table-cell; - padding: $table-cols-padding; + padding: vars.$table-cols-padding; &__nodata { display: flex; height: 50px; @@ -77,7 +79,7 @@ } } &--border { - border: 1px solid $table-border-color; + border: 1px solid vars.$table-border-color; } &--alignleft, &--align { @@ -102,13 +104,13 @@ display: flex; align-items: center; height: 30px; - padding: $table-cols-padding; + padding: vars.$table-cols-padding; } &__nodata { display: flex; align-items: center; justify-content: center; height: 30px; - padding: $table-cols-padding; + padding: vars.$table-cols-padding; } } diff --git a/src/packages/__VUE/tabpane/index.scss b/src/packages/__VUE/tabpane/index.scss index 0674be3787..934bf9cc18 100644 --- a/src/packages/__VUE/tabpane/index.scss +++ b/src/packages/__VUE/tabpane/index.scss @@ -1,6 +1,8 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-tab-pane { - background: $dark-background2; + background: vars.$dark-background2; } } .nut-tab-pane { diff --git a/src/packages/__VUE/tabs/index.scss b/src/packages/__VUE/tabs/index.scss index e7667943ab..b65228b663 100644 --- a/src/packages/__VUE/tabs/index.scss +++ b/src/packages/__VUE/tabs/index.scss @@ -1,13 +1,15 @@ -@import '../sticky/index.scss'; +// @import '../sticky/index.scss'; +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-tabs { &__titles { - background: $dark-background3; + background: vars.$dark-background3; &-item { - color: $dark-color-gray; + color: vars.$dark-color-gray; &.active { - color: $dark-color; + color: vars.$dark-color; } } } @@ -15,7 +17,7 @@ .nut-tabs__titles { &-item { &.active { - background-color: $dark-background2; + background-color: vars.$dark-background2; } } } @@ -30,8 +32,8 @@ user-select: none; white-space: nowrap; flex-shrink: 0; - background: $tabs-titles-background-color; - border-radius: $tabs-titles-border-radius; + background: vars.$tabs-titles-background-color; + border-radius: vars.$tabs-titles-border-radius; .nut-tabs__list { width: 100%; display: flex; @@ -39,11 +41,11 @@ } .nut-tabs__titles-item { position: relative; - font-size: $tabs-titles-item-font-size; + font-size: vars.$tabs-titles-item-font-size; display: flex; align-items: center; justify-content: center; - color: $tabs-titles-item-color; + color: vars.$tabs-titles-item-color; &__text { text-align: center; &.ellipsis { @@ -56,7 +58,7 @@ font-size: 12px; width: 100%; height: 100%; - color: $tabs-tab-smile-color; + color: vars.$tabs-tab-smile-color; } } &__smile, @@ -70,21 +72,21 @@ left: 50%; transform: translate(-50%, 0); overflow: hidden; - border-radius: $tabs-titles-item-line-border-radius; - opacity: $tabs-titles-item-line-opacity; + border-radius: vars.$tabs-titles-item-line-border-radius; + opacity: vars.$tabs-titles-item-line-opacity; } &.active { font-weight: bold; - color: $tabs-titles-item-active-color; + color: vars.$tabs-titles-item-active-color; .nut-tabs__titles-item__line { content: ' '; - width: $tabs-horizontal-titles-item-active-line-width; + width: vars.$tabs-horizontal-titles-item-active-line-width; height: 3px; - background: $tabs-horizontal-tab-line-color; + background: vars.$tabs-horizontal-tab-line-color; } } &.disabled { - color: $disable-color; + color: vars.$disable-color; } } &-left { @@ -96,7 +98,7 @@ .nut-sticky__box > .nut-tabs__titles, > .nut-tabs__titles { flex-direction: row; - height: $tabs-horizontal-titles-height; + height: vars.$tabs-horizontal-titles-height; .nut-tabs__list { height: 100%; } @@ -106,7 +108,7 @@ } .nut-tabs__titles-item { flex: 1 0 auto; - min-width: $tabs-horizontal-titles-item-min-width; + min-width: vars.$tabs-horizontal-titles-item-min-width; width: 0; &__smile { @@ -115,7 +117,7 @@ font-size: 12px; width: 100%; height: 100%; - color: $tabs-tab-smile-color; + color: vars.$tabs-tab-smile-color; } } &-left { @@ -131,7 +133,7 @@ flex-direction: column; height: auto; padding: 10px 0; - width: $tabs-vertical-titles-width; + width: vars.$tabs-vertical-titles-width; .nut-tabs__list { flex-direction: column; } @@ -144,9 +146,9 @@ } } .nut-tabs__titles-item { - min-width: $tabs-horizontal-titles-item-min-width; + min-width: vars.$tabs-horizontal-titles-item-min-width; width: 100%; - height: $tabs-vertical-titles-item-height; + height: vars.$tabs-vertical-titles-item-height; flex: none; &__line { bottom: none; @@ -160,8 +162,8 @@ .nut-tabs__titles-item__line { left: 10px; width: 3px; - background: $tabs-vertical-tab-line-color; - height: $tabs-vertical-titles-item-active-line-height; + background: vars.$tabs-vertical-tab-line-color; + height: vars.$tabs-vertical-titles-item-active-line-height; } .nut-tabs__titles-item__smile { position: absolute; @@ -170,7 +172,7 @@ left: auto; width: 36px; transform: rotate(320deg); - height: $tabs-vertical-titles-item-active-line-height; + height: vars.$tabs-vertical-titles-item-active-line-height; } } } @@ -186,13 +188,13 @@ &__titles { &.large .nut-tabs__titles-item { - font-size: $tabs-titles-item-large-font-size; + font-size: vars.$tabs-titles-item-large-font-size; } &.normal .nut-tabs__titles-item { - font-size: $tabs-titles-item-font-size; + font-size: vars.$tabs-titles-item-font-size; } &.small .nut-tabs__titles-item { - font-size: $tabs-titles-item-small-font-size; + font-size: vars.$tabs-titles-item-small-font-size; } &::-webkit-scrollbar { display: none; diff --git a/src/packages/__VUE/tag/index.scss b/src/packages/__VUE/tag/index.scss index a1bcca1569..d438e05256 100644 --- a/src/packages/__VUE/tag/index.scss +++ b/src/packages/__VUE/tag/index.scss @@ -1,62 +1,64 @@ +@use '../../styles/variables.scss' as vars; + .nut-tag { padding: 0 4px; display: inline-flex; align-items: center; - font-size: $tag-font-size; - border-radius: $tag-default-border-radius; - height: $tag-height; + font-size: vars.$tag-font-size; + border-radius: vars.$tag-default-border-radius; + height: vars.$tag-height; &--default { - color: $tag-default-color; - background: $tag-default-background-color; - border: $tag-border-width solid transparent; + color: vars.$tag-default-color; + background: vars.$tag-default-background-color; + border: vars.$tag-border-width solid transparent; &.nut-tag--plain { - color: $tag-default-background-color; - border: $tag-border-width solid $tag-default-background-color; + color: vars.$tag-default-background-color; + border: vars.$tag-border-width solid vars.$tag-default-background-color; } } &--primary { - color: $tag-default-color; - background: $tag-primary-background-color; - border: $tag-border-width solid transparent; + color: vars.$tag-default-color; + background: vars.$tag-primary-background-color; + border: vars.$tag-border-width solid transparent; &.nut-tag--plain { - color: $tag-primary-background-color; - border: $tag-border-width solid $tag-primary-background-color; + color: vars.$tag-primary-background-color; + border: vars.$tag-border-width solid vars.$tag-primary-background-color; } } &--success { - color: $tag-default-color; - background: $tag-success-background-color; - border: $tag-border-width solid transparent; + color: vars.$tag-default-color; + background: vars.$tag-success-background-color; + border: vars.$tag-border-width solid transparent; &.nut-tag--plain { - color: $tag-success-background-color; - border: $tag-border-width solid $tag-success-background-color; + color: vars.$tag-success-background-color; + border: vars.$tag-border-width solid vars.$tag-success-background-color; } } &--danger { - color: $tag-default-color; - background: $tag-danger-background-color; - border: $tag-border-width solid transparent; + color: vars.$tag-default-color; + background: vars.$tag-danger-background-color; + border: vars.$tag-border-width solid transparent; &.nut-tag--plain { - color: $tag-danger-background-color-plain; - border: $tag-border-width solid $tag-danger-background-color-plain; + color: vars.$tag-danger-background-color-plain; + border: vars.$tag-border-width solid vars.$tag-danger-background-color-plain; } } &--warning { - color: $tag-default-color; - background: $tag-warning-background-color; - border: $tag-border-width solid transparent; + color: vars.$tag-default-color; + background: vars.$tag-warning-background-color; + border: vars.$tag-border-width solid transparent; &.nut-tag--plain { - color: $tag-warning-background-color; - border: $tag-border-width solid $tag-warning-background-color; + color: vars.$tag-warning-background-color; + border: vars.$tag-border-width solid vars.$tag-warning-background-color; } } &--round { - border-radius: $tag-round-border-radius; + border-radius: vars.$tag-round-border-radius; } &--mark { diff --git a/src/packages/__VUE/textarea/index.scss b/src/packages/__VUE/textarea/index.scss index d3fecdb2cd..17d550349c 100644 --- a/src/packages/__VUE/textarea/index.scss +++ b/src/packages/__VUE/textarea/index.scss @@ -1,8 +1,10 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-textarea { - background: $dark-background; + background: vars.$dark-background; &__textarea { - color: $dark-color; + color: vars.$dark-color; } } } @@ -11,25 +13,25 @@ width: 100%; box-sizing: border-box; display: flex; - background: $white; - font-size: $textarea-font; + background: vars.$white; + font-size: vars.$textarea-font; padding: 10px 25px; &--disabled { .nut-textarea__textarea, .nut-textarea__limit { cursor: not-allowed; - color: $textarea-disabled-color !important; + color: vars.$textarea-disabled-color !important; } } &__limit { position: absolute; right: 15px; bottom: 12px; - font-size: $textarea-font; - color: $textarea-limit-color; + font-size: vars.$textarea-font; + color: vars.$textarea-limit-color; } &__textarea { - // min-height: $textarea-height; + // min-height: vars.$textarea-height; outline: none; display: block; box-sizing: border-box; @@ -37,8 +39,8 @@ min-width: 0; margin: 0; padding: 0; - font-size: $textarea-font; - color: $textarea-text-color; + font-size: vars.$textarea-font; + color: vars.$textarea-text-color; text-align: left; background-color: transparent; border: none; diff --git a/src/packages/__VUE/timedetail/index.scss b/src/packages/__VUE/timedetail/index.scss index 3097961700..f59056b30b 100644 --- a/src/packages/__VUE/timedetail/index.scss +++ b/src/packages/__VUE/timedetail/index.scss @@ -1,13 +1,15 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-time-detail { - background-color: $dark-background2; + background-color: vars.$dark-background2; &__detail { &__list { &__item { - background-color: $dark-background; - color: $dark-color; + background-color: vars.$dark-background; + color: vars.$dark-color; &--curr { - color: $timeselect-timedetail-item-cur-text-color; + color: vars.$timeselect-timedetail-item-cur-text-color; } } } @@ -17,28 +19,28 @@ .nut-time-detail { display: flex; width: 100%; - padding: $timeselect-timedetail-padding; + padding: vars.$timeselect-timedetail-padding; &__detail { width: 100%; &__list { &__item { display: inline-block; - width: $timeselect-timedetail-item-width; - height: $timeselect-timedetail-item-height; - line-height: $timeselect-timedetail-item-line-height; + width: vars.$timeselect-timedetail-item-width; + height: vars.$timeselect-timedetail-item-height; + line-height: vars.$timeselect-timedetail-item-line-height; text-align: center; margin-right: 10px; margin-bottom: 10px; - background-color: $timeselect-timedetail-item-bg-color; - border-radius: $timeselect-timedetail-item-border-radius; - color: $timeselect-timedetail-item-text-color; - font-size: $timeselect-timedetail-item-text-font-size; + background-color: vars.$timeselect-timedetail-item-bg-color; + border-radius: vars.$timeselect-timedetail-item-border-radius; + color: vars.$timeselect-timedetail-item-text-color; + font-size: vars.$timeselect-timedetail-item-text-font-size; border: 1px solid transparent; font-weight: bold; &--curr { background-color: transparent; - border: 1px solid $timeselect-timedetail-item-cur-border; - color: $timeselect-timedetail-item-cur-text-color; + border: 1px solid vars.$timeselect-timedetail-item-cur-border; + color: vars.$timeselect-timedetail-item-cur-text-color; position: relative; &::after { position: absolute; @@ -48,7 +50,7 @@ left: 0; width: 100%; height: 100%; - background-color: $timeselect-timedetail-item-cur-bg-color; + background-color: vars.$timeselect-timedetail-item-cur-bg-color; opacity: 0.15; content: ''; } diff --git a/src/packages/__VUE/timepannel/index.scss b/src/packages/__VUE/timepannel/index.scss index 663781b8ad..05f1939619 100644 --- a/src/packages/__VUE/timepannel/index.scss +++ b/src/packages/__VUE/timepannel/index.scss @@ -1,26 +1,28 @@ +@use '../../styles/variables.scss' as vars; + .nut-theme-dark { .nut-time-pannel { - background-color: $dark-background3; - color: $dark-color-gray; + background-color: vars.$dark-background3; + color: vars.$dark-color-gray; &--curr { - background-color: $dark-background2; - color: $dark-color; + background-color: vars.$dark-background2; + color: vars.$dark-color; } } } .nut-time-pannel { display: flex; - width: $timeselect-timepannel-width; - height: $timeselect-timepannel-height; - padding: $timeselect-timepannel-padding; + width: vars.$timeselect-timepannel-width; + height: vars.$timeselect-timepannel-height; + padding: vars.$timeselect-timepannel-padding; align-items: center; justify-content: center; - color: $timeselect-timepannel-text-color; - font-size: $timeselect-timepannel-font-size; + color: vars.$timeselect-timepannel-text-color; + font-size: vars.$timeselect-timepannel-font-size; box-sizing: border-box; &--curr { - background-color: $timeselect-timepannel-cur-bg-color; - color: $timeselect-timepannel-cur-text-color; + background-color: vars.$timeselect-timepannel-cur-bg-color; + color: vars.$timeselect-timepannel-cur-text-color; font-weight: bold; } } diff --git a/src/packages/__VUE/timeselect/index.scss b/src/packages/__VUE/timeselect/index.scss index 39dce25cb2..22a31ad46a 100644 --- a/src/packages/__VUE/timeselect/index.scss +++ b/src/packages/__VUE/timeselect/index.scss @@ -1,19 +1,19 @@ -@import '../popup/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-time-select { - background-color: $dark-background2; + background-color: vars.$dark-background2; &__title { - background-color: $dark-background2; - color: $dark-color; + background-color: vars.$dark-background2; + color: vars.$dark-color; } &__content { &__pannel { - background-color: $dark-background3; - color: $dark-color; + background-color: vars.$dark-background3; + color: vars.$dark-color; } &__detail { - background-color: $dark-background2; + background-color: vars.$dark-background2; } } } @@ -25,12 +25,12 @@ overflow: hidden; &__title { display: flex; - width: $timeselect-title-width; - height: $timeselect-title-height; - line-height: $timeselect-title-line-height; + width: vars.$timeselect-title-width; + height: vars.$timeselect-title-height; + line-height: vars.$timeselect-title-line-height; padding-bottom: 10px; - font-size: $timeselect-title-font-size; - color: $timeselect-title-color; + font-size: vars.$timeselect-title-font-size; + color: vars.$timeselect-title-color; text-align: center; &__fixed { width: 100%; @@ -39,13 +39,13 @@ } &__content { width: 100%; - height: calc(100% - $timeselect-title-height - 10px); + height: calc(100% - vars.$timeselect-title-height - 10px); display: flex; &__pannel { width: 140px; height: 100%; overflow: auto; - background-color: $timeselect-pannel-bg-color; + background-color: vars.$timeselect-pannel-bg-color; } &__detail { width: calc(100% - 140px); diff --git a/src/packages/__VUE/toast/index.scss b/src/packages/__VUE/toast/index.scss index 1026e41a4f..9640602d74 100644 --- a/src/packages/__VUE/toast/index.scss +++ b/src/packages/__VUE/toast/index.scss @@ -1,3 +1,5 @@ +@use '../../styles/variables.scss' as vars; + @keyframes rotation { 0% { -webkit-transform: rotate(0deg); @@ -15,15 +17,15 @@ text-align: center; pointer-events: none; z-index: 9999; - font-family: $font-family; + font-family: vars.$font-family; &-small { .nut-toast-inner { - font-size: $font-size-small; + font-size: vars.$font-size-small; } } &-large { .nut-toast-inner { - font-size: $font-size-large; + font-size: vars.$font-size-large; } } &-cover { @@ -32,28 +34,28 @@ justify-content: center; pointer-events: auto; height: 100%; - background: $toast-cover-bg-color; + background: vars.$toast-cover-bg-color; } &-inner { display: inline-block; - font-size: $toast-text-font-size; + font-size: vars.$toast-text-font-size; min-width: 40%; max-width: 65%; text-align: center; - padding: $toast-inner-padding; + padding: vars.$toast-inner-padding; word-break: break-all; - background: $toast-inner-bg-color; - border-radius: $toast-inner-border-radius; - color: $toast-font-color; + background: vars.$toast-inner-bg-color; + border-radius: vars.$toast-inner-border-radius; + color: vars.$toast-font-color; } &-text { - font-size: $toast-text-font-size; + font-size: vars.$toast-text-font-size; &:empty { margin-bottom: -8px; } } &-title { - font-size: $toast-title-font-size; + font-size: vars.$toast-title-font-size; &:empty { margin-bottom: -8px; } diff --git a/src/packages/__VUE/tour/index.scss b/src/packages/__VUE/tour/index.scss index 456f61face..b65b853888 100644 --- a/src/packages/__VUE/tour/index.scss +++ b/src/packages/__VUE/tour/index.scss @@ -1,4 +1,5 @@ -@import '../popover/index.scss'; +// @import '../popover/index.scss'; +@use '../../styles/variables.scss' as vars; .nut-tour { &-mask { @@ -49,16 +50,16 @@ justify-content: flex-end; &-btn { display: inline-block; - border: 1px solid $disable-color; + border: 1px solid vars.$disable-color; margin-left: 4px; padding: 2px 4px; font-size: 12px; border-radius: 4px; - color: $text-color; + color: vars.$text-color; &.active { color: #fff; border: 0; - background: $primary-color; + background: vars.$primary-color; } } } diff --git a/src/packages/__VUE/trendarrow/index.scss b/src/packages/__VUE/trendarrow/index.scss index 188079dbf8..b5019d363e 100644 --- a/src/packages/__VUE/trendarrow/index.scss +++ b/src/packages/__VUE/trendarrow/index.scss @@ -1,11 +1,13 @@ +@use '../../styles/variables.scss' as vars; + .nut-trend-arrow { display: inline-block; - font-size: $trendarrow-font-size; + font-size: vars.$trendarrow-font-size; &-icon-before { - margin-right: $trendarrow-before-icon-margin; + margin-right: vars.$trendarrow-before-icon-margin; } &-icon-after { - margin-left: $trendarrow-before-icon-margin; + margin-left: vars.$trendarrow-before-icon-margin; } &-rate { vertical-align: middle; diff --git a/src/packages/__VUE/uploader/index.scss b/src/packages/__VUE/uploader/index.scss index a54d992983..f2336306eb 100644 --- a/src/packages/__VUE/uploader/index.scss +++ b/src/packages/__VUE/uploader/index.scss @@ -1,13 +1,15 @@ -@import '../progress/index.scss'; -@import '../button/index.scss'; +// @import '../progress/index.scss'; +// @import '../button/index.scss'; +@use '../../styles/mixins/index.scss' as *; +@use '../../styles/variables.scss' as vars; .nut-theme-dark { .nut-uploader__preview-list { - background: $dark-background2; - color: $dark-color; + background: vars.$dark-background2; + color: vars.$dark-color; } .close { - color: $dark-color !important; + color: vars.$dark-color !important; } } .nut-uploader { @@ -21,9 +23,9 @@ &__upload { position: relative; - background: $uploader-background; - width: $uploader-picture-width; - height: $uploader-picture-height; + background: vars.$uploader-background; + width: vars.$uploader-picture-width; + height: vars.$uploader-picture-height; display: flex; align-items: center; justify-content: center; @@ -64,7 +66,7 @@ align-items: center; justify-content: center; &__msg { - color: $white; + color: vars.$white; font-size: 12px; margin-top: 6px; } @@ -115,8 +117,8 @@ } &-img { position: relative; - width: $uploader-picture-width; - height: $uploader-picture-height; + width: vars.$uploader-picture-width; + height: vars.$uploader-picture-height; display: flex; align-items: center; justify-content: center; @@ -138,7 +140,7 @@ align-items: center; justify-content: center; font-size: 12px; - color: $white; + color: vars.$white; height: 0px; transition: height 0.3s; background: rgba(0, 0, 0, 0.54); @@ -161,7 +163,7 @@ display: flex; width: 100%; font-size: 12px; - color: $text-color; + color: vars.$text-color; padding: 10px; height: 100%; overflow: hidden; diff --git a/src/packages/__VUE/watermark/index.scss b/src/packages/__VUE/watermark/index.scss index 3de6221cb2..4e1c7ba5be 100644 --- a/src/packages/__VUE/watermark/index.scss +++ b/src/packages/__VUE/watermark/index.scss @@ -1,6 +1,8 @@ +@use '../../styles/variables.scss' as vars; + .nut-watermark { position: absolute; - z-index: $watermark-z-index; + z-index: vars.$watermark-z-index; left: 0; right: 0; top: 0; diff --git a/src/packages/styles/animation/drop.scss b/src/packages/styles/animation/drop.scss index 17da68804b..78b5138752 100644 --- a/src/packages/styles/animation/drop.scss +++ b/src/packages/styles/animation/drop.scss @@ -1,3 +1,5 @@ +@use '../mixins/index' as *; + @keyframes nutDropIn { 0% { opacity: 0; diff --git a/src/packages/styles/animation/ease.scss b/src/packages/styles/animation/ease.scss index 70ab5abb66..48991ccda8 100644 --- a/src/packages/styles/animation/ease.scss +++ b/src/packages/styles/animation/ease.scss @@ -1,3 +1,5 @@ +@use '../mixins/index' as *; + @keyframes nutEaseIn { 0% { opacity: 0; diff --git a/src/packages/styles/animation/fade.scss b/src/packages/styles/animation/fade.scss index a153b60733..8f457b98b6 100644 --- a/src/packages/styles/animation/fade.scss +++ b/src/packages/styles/animation/fade.scss @@ -1,3 +1,4 @@ +@use '../mixins/index' as *; @keyframes nutFadeIn { from { opacity: 0; diff --git a/src/packages/styles/animation/index.scss b/src/packages/styles/animation/index.scss index 7280290531..cfdb5429cf 100644 --- a/src/packages/styles/animation/index.scss +++ b/src/packages/styles/animation/index.scss @@ -1,6 +1,6 @@ // Animation -@import 'fade.scss'; -@import 'zoom.scss'; -@import 'ease.scss'; -@import 'drop.scss'; -@import 'rotate.scss'; +@forward 'fade'; +@forward 'zoom'; +@forward 'ease'; +@forward 'drop'; +@forward 'rotate'; diff --git a/src/packages/styles/animation/rotate.scss b/src/packages/styles/animation/rotate.scss index 86f16dcf76..d97a0c886a 100644 --- a/src/packages/styles/animation/rotate.scss +++ b/src/packages/styles/animation/rotate.scss @@ -1,3 +1,5 @@ +@use '../mixins/index' as *; + @keyframes rotation { 0% { -webkit-transform: rotate(0deg); diff --git a/src/packages/styles/animation/zoom.scss b/src/packages/styles/animation/zoom.scss index 8d3a445c91..f857b1836d 100644 --- a/src/packages/styles/animation/zoom.scss +++ b/src/packages/styles/animation/zoom.scss @@ -1,3 +1,5 @@ +@use '../mixins/index' as *; + @keyframes nutZoomIn { from { opacity: 0; diff --git a/src/packages/styles/index-jdb.scss b/src/packages/styles/index-jdb.scss new file mode 100644 index 0000000000..fb381ca67b --- /dev/null +++ b/src/packages/styles/index-jdb.scss @@ -0,0 +1,10 @@ +// src/packages/styles/index.scss +// 增加@forward 转发 放弃@import 方式 +// 转发变量 + +@forward 'variables-jdb'; + +// 转发动画 +@forward 'animation/index'; +// 转发混合器 +@forward 'mixins/index'; diff --git a/src/packages/styles/index-jddkh.scss b/src/packages/styles/index-jddkh.scss new file mode 100644 index 0000000000..9245317226 --- /dev/null +++ b/src/packages/styles/index-jddkh.scss @@ -0,0 +1,9 @@ +// src/packages/styles/index.scss +// 增加@forward 转发 放弃@import 方式 +// 转发变量 + +@forward 'variables-jddkh'; +// 转发动画 +@forward 'animation/index'; +// 转发混合器 +@forward 'mixins/index'; diff --git a/src/packages/styles/index-jdt.scss b/src/packages/styles/index-jdt.scss new file mode 100644 index 0000000000..f728f921a9 --- /dev/null +++ b/src/packages/styles/index-jdt.scss @@ -0,0 +1,9 @@ +// src/packages/styles/index.scss +// 增加@forward 转发 放弃@import 方式 +// 转发变量 + +@forward 'variables-jdt'; +// 转发动画 +@forward 'animation/index'; +// 转发混合器 +@forward 'mixins/index'; diff --git a/src/packages/styles/index.scss b/src/packages/styles/index.scss new file mode 100644 index 0000000000..546ca4c98d --- /dev/null +++ b/src/packages/styles/index.scss @@ -0,0 +1,9 @@ +// src/packages/styles/index.scss +// 增加@forward 转发 放弃@import 方式 +// 转发变量 +@forward 'variables'; + +// 转发动画 +@forward 'animation/index'; +// 转发混合器 +@forward 'mixins/index'; diff --git a/src/packages/styles/mixins/index.scss b/src/packages/styles/mixins/index.scss index f643ead6e4..80370a33ec 100644 --- a/src/packages/styles/mixins/index.scss +++ b/src/packages/styles/mixins/index.scss @@ -1,2 +1,2 @@ -@import 'make-animation.scss'; -@import 'text-ellipsis.scss'; +@forward 'make-animation'; +@forward 'text-ellipsis'; diff --git a/src/packages/styles/mixins/make-animation.scss b/src/packages/styles/mixins/make-animation.scss index ccfc1eef95..503266a52b 100644 --- a/src/packages/styles/mixins/make-animation.scss +++ b/src/packages/styles/mixins/make-animation.scss @@ -1,3 +1,4 @@ +@use '../variables' as *; @mixin make-animation($keyframeName, $timingFun: $animation-timing-fun, $duration: $animation-duration) { .#{$keyframeName}-enter-active, .#{$keyframeName}In, diff --git a/src/packages/styles/mixins/text-ellipsis.scss b/src/packages/styles/mixins/text-ellipsis.scss index 5d3ea1ab58..a84953c406 100644 --- a/src/packages/styles/mixins/text-ellipsis.scss +++ b/src/packages/styles/mixins/text-ellipsis.scss @@ -1,3 +1,4 @@ +// 单行文本省略号 @mixin text-ellipsis() { white-space: nowrap; overflow: hidden; diff --git a/src/packages/styles/variables-jdb.scss b/src/packages/styles/variables-jdb.scss index 37681d6018..edd1e32081 100644 --- a/src/packages/styles/variables-jdb.scss +++ b/src/packages/styles/variables-jdb.scss @@ -981,4 +981,4 @@ $trendarrow-before-icon-margin: 4px !default; // Space $space-gap: var(--nut-space-gap, 8px) !default; -@import './mixins/index'; +// @import './mixins/index'; diff --git a/src/packages/styles/variables-jddkh.scss b/src/packages/styles/variables-jddkh.scss index 1fd935027b..f9422656dc 100644 --- a/src/packages/styles/variables-jddkh.scss +++ b/src/packages/styles/variables-jddkh.scss @@ -913,4 +913,4 @@ $trendarrow-before-icon-margin: 4px !default; // Space $space-gap: var(--nut-space-gap, 8px) !default; -@import './mixins/index'; +// @import './mixins/index'; diff --git a/src/packages/styles/variables-jdt.scss b/src/packages/styles/variables-jdt.scss index 06db16cf44..cff7fde1df 100644 --- a/src/packages/styles/variables-jdt.scss +++ b/src/packages/styles/variables-jdt.scss @@ -937,4 +937,4 @@ $trendarrow-before-icon-margin: var(--nut-trendarrow-before-icon-margin, 4px) !d // Space $space-gap: var(--nut-space-gap, 8px) !default; -@import './mixins/index'; +// @import './mixins/index'; diff --git a/src/packages/styles/variables.scss b/src/packages/styles/variables.scss index f7ba1a892f..d20ec01cde 100644 --- a/src/packages/styles/variables.scss +++ b/src/packages/styles/variables.scss @@ -983,5 +983,3 @@ $trendarrow-before-icon-margin: var(--nut-trendarrow-before-icon-margin, 4px) !d // Space $space-gap: var(--nut-space-gap, 8px) !default; - -@import './mixins/index'; diff --git a/src/sites/assets/styles/READM.md b/src/sites/assets/styles/READM.md new file mode 100644 index 0000000000..fb0c553e18 --- /dev/null +++ b/src/sites/assets/styles/READM.md @@ -0,0 +1,19 @@ +# 迁移说明 + +关于@import 迁移@use + @forward 的说明 + +## 需要集中管理的变量和样式 + +1. 所有需要集中管理的样式和变量需要放在index.scss中或者通过@forward 在index中转发 +2. 集中管理后，在需要使用的地方通过@use 引入， `@use 'index'` , 引入后，就可以使用index中暴露的变量和样式,注意这里换成index实际路径 比如 `@use "@/packages/styles/index.scss" as *;`、 +3. 注意 被@forward 转发的文件里只定义变量和mixin，避免混写 导致循环引用和重复定义 + +## vite 配置 中的迁移 + +参考下面写法修改。 + +```bash +additionalData: `@use "@/packages/styles/index.scss" as *; @use "@/sites/assets/styles/index.scss" as *;` +``` + +目前v4中代码的@import 全部迁移成了@use + @forward ，避免高版本sass 编译报错或警告 diff --git a/src/sites/assets/styles/highlight.scss b/src/sites/assets/styles/highlight.scss index 4501050cde..ab1fa905c9 100644 --- a/src/sites/assets/styles/highlight.scss +++ b/src/sites/assets/styles/highlight.scss @@ -1,3 +1,5 @@ +// @use "variables"; +@use 'index.scss' as *; code { position: relative; display: block; diff --git a/src/sites/assets/styles/index.scss b/src/sites/assets/styles/index.scss new file mode 100644 index 0000000000..eb7d2fc817 --- /dev/null +++ b/src/sites/assets/styles/index.scss @@ -0,0 +1 @@ +@forward 'variables'; diff --git a/src/sites/assets/styles/md-style.scss b/src/sites/assets/styles/md-style.scss index 0c5668affb..c75aa0e80c 100644 --- a/src/sites/assets/styles/md-style.scss +++ b/src/sites/assets/styles/md-style.scss @@ -1,5 +1,5 @@ -@import 'highlight.scss'; - +@use 'index.scss' as *; +@use 'sass:color'; .doc-content-document { position: relative; min-width: 1000px; @@ -22,11 +22,11 @@ -webkit-font-smoothing: auto; &:hover { - color: darken($nutui-doc-blue, 10%); + color: color.scale($nutui-doc-blue, $lightness: -10%, $space: hsl); // 降低亮度 10% } &:active { - color: darken($nutui-doc-blue, 20%); + color: color.scale($nutui-doc-blue, $lightness: -20%, $space: hsl); // 降低亮度 20% } } diff --git a/src/sites/assets/styles/variables.scss b/src/sites/assets/styles/variables.scss index 31f1cff172..17ae0a18db 100644 --- a/src/sites/assets/styles/variables.scss +++ b/src/sites/assets/styles/variables.scss @@ -1,3 +1,4 @@ +@use '@/packages/styles/variables' as *; // doc $doc-default-color: #fa2c19; $doc-default-primary-bg: linear-gradient( diff --git a/src/sites/doc/components/demo-block/tsconfig.json b/src/sites/doc/components/demo-block/tsconfig.json index 8617c8a54f..2c11e2882c 100644 --- a/src/sites/doc/components/demo-block/tsconfig.json +++ b/src/sites/doc/components/demo-block/tsconfig.json @@ -11,5 +11,5 @@ "esModuleInterop": true, "lib": ["esnext", "dom"] }, - "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] + "include": ["./**/*.ts", "./**/*.d.ts", "./**/*.tsx", "./**/*.vue"] } diff --git a/src/sites/mobile/components/Index.vue b/src/sites/mobile/components/Index.vue index a72a3ea31d..fb00208f53 100644 --- a/src/sites/mobile/components/Index.vue +++ b/src/sites/mobile/components/Index.vue @@ -38,7 +38,7 @@ const info = {