From d62db082e7e5807ff8bc956137d894e9038450a4 Mon Sep 17 00:00:00 2001 From: Pig Fang Date: Mon, 27 Jan 2020 15:49:09 +0800 Subject: [PATCH] add scss --- package.json | 4 +- .../admin/PluginsManagement/InfoBox.scss | 43 ++++++++ .../admin/PluginsManagement/InfoBox.styl | 31 ------ .../views/admin/PluginsManagement/InfoBox.tsx | 2 +- resources/assets/src/webpack.d.ts | 4 + resources/assets/tests/webpack.d.ts | 4 + webpack.config.js | 4 +- yarn.lock | 104 +++++++++++++++++- 8 files changed, 157 insertions(+), 39 deletions(-) create mode 100644 resources/assets/src/views/admin/PluginsManagement/InfoBox.scss delete mode 100644 resources/assets/src/views/admin/PluginsManagement/InfoBox.styl diff --git a/package.json b/package.json index a49b44a3..dc645ae8 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,8 @@ "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", + "sass": "^1.25.0", + "sass-loader": "^8.0.2", "style-loader": "^1.1.2", "stylus": "^0.54.7", "stylus-loader": "^3.0.2", @@ -202,7 +204,7 @@ ], "moduleNameMapper": { "^@/(.*)$": "/resources/assets/src/$1", - "\\.(css|styl)$": "/resources/assets/tests/__mocks__/style.ts", + "\\.(s?css|styl)$": "/resources/assets/tests/__mocks__/style.ts", "\\.(png|jpg)$": "/resources/assets/tests/__mocks__/file.ts" }, "setupFilesAfterEnv": [ diff --git a/resources/assets/src/views/admin/PluginsManagement/InfoBox.scss b/resources/assets/src/views/admin/PluginsManagement/InfoBox.scss new file mode 100644 index 00000000..ba450302 --- /dev/null +++ b/resources/assets/src/views/admin/PluginsManagement/InfoBox.scss @@ -0,0 +1,43 @@ +.box { + cursor: default; + transition-property: box-shadow; + transition-duration: 0.3s; + width: 32%; + @media (max-width: 1280px) { + width: 47%; + } + @media (max-width: 768px) { + width: 100%; + } + + &:hover { + box-shadow: 0 0.5rem 1rem rgba(#000, 0.15); + } +} + +.content { + max-width: 85%; +} + +.actions { + margin-top: -7px; + + a { + transition-property: color; + transition-duration: 0.3s; + color: #000; + &:hover { + color: #999; + } + &:not(:last-child) { + margin-right: 9px; + } + } +} + +.description { + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/resources/assets/src/views/admin/PluginsManagement/InfoBox.styl b/resources/assets/src/views/admin/PluginsManagement/InfoBox.styl deleted file mode 100644 index 5d11ef8d..00000000 --- a/resources/assets/src/views/admin/PluginsManagement/InfoBox.styl +++ /dev/null @@ -1,31 +0,0 @@ -.box - cursor default - transition-property box-shadow - transition-duration 0.3s - width 32% - @media (max-width: 1280px) - width 47% - @media (max-width: 768px) - width 100% - &:hover - box-shadow 0 .5rem 1rem rgba(0,0,0,.15) - -.content - max-width 85% - -.actions - margin-top -7px - a - transition-property color - transition-duration 0.3s - color #000 - &:hover - color #999 - &:not(:last-child) - margin-right 9px - -.description - font-size 14px - white-space nowrap - overflow hidden - text-overflow ellipsis diff --git a/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx b/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx index e02d6b73..54afeaf9 100644 --- a/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx +++ b/resources/assets/src/views/admin/PluginsManagement/InfoBox.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react' import { trans } from '../../../scripts/i18n' import { Plugin } from './types' -import styles from './InfoBox.styl' +import styles from './InfoBox.scss' interface Props { plugin: Plugin diff --git a/resources/assets/src/webpack.d.ts b/resources/assets/src/webpack.d.ts index 8c582452..e89f05da 100644 --- a/resources/assets/src/webpack.d.ts +++ b/resources/assets/src/webpack.d.ts @@ -7,3 +7,7 @@ declare module '*.vue' { declare module '*.styl' { export default {} as Record } + +declare module '*.scss' { + export default {} as Record +} diff --git a/resources/assets/tests/webpack.d.ts b/resources/assets/tests/webpack.d.ts index 8c582452..e89f05da 100644 --- a/resources/assets/tests/webpack.d.ts +++ b/resources/assets/tests/webpack.d.ts @@ -7,3 +7,7 @@ declare module '*.vue' { declare module '*.styl' { export default {} as Record } + +declare module '*.scss' { + export default {} as Record +} diff --git a/webpack.config.js b/webpack.config.js index bc34d8ce..5aa7c3fb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -55,7 +55,7 @@ const config = { ], }, { - test: /views.*\.styl$/, + test: /\.scss$/, use: [ 'style-loader', { @@ -70,7 +70,7 @@ const config = { }, }, 'postcss-loader', - 'stylus-loader', + 'sass-loader', ], }, { diff --git a/yarn.lock b/yarn.lock index b912c3be..5af389e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1930,6 +1930,14 @@ anymatch@^2.0.0: micromatch "^3.1.4" normalize-path "^2.1.1" +anymatch@~3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142" + integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + aproba@^1.0.3, aproba@^1.1.1: version "1.2.0" resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" @@ -2230,6 +2238,11 @@ binary-extensions@^1.0.0: resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65" integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw== +binary-extensions@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c" + integrity sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow== + bluebird@^3.1.1, bluebird@^3.5.5: version "3.5.5" resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f" @@ -2325,7 +2338,7 @@ braces@^2.3.1, braces@^2.3.2: split-string "^3.0.2" to-regex "^3.0.1" -braces@^3.0.1: +braces@^3.0.1, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -2682,6 +2695,21 @@ chartjs-color@^2.1.0: chartjs-color-string "^0.6.0" color-convert "^1.9.3" +"chokidar@>=2.0.0 <4.0.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450" + integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.3.0" + optionalDependencies: + fsevents "~2.1.2" + chokidar@^2.0.2, chokidar@^2.1.8: version "2.1.8" resolved "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -2770,6 +2798,15 @@ cliui@^5.0.0: strip-ansi "^5.2.0" wrap-ansi "^5.1.0" +clone-deep@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387" + integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ== + dependencies: + is-plain-object "^2.0.4" + kind-of "^6.0.2" + shallow-clone "^3.0.0" + clone@^1.0.1: version "1.0.4" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" @@ -4795,6 +4832,11 @@ fsevents@^1.2.7: nan "^2.12.1" node-pre-gyp "^0.12.0" +fsevents@~2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805" + integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -4871,6 +4913,13 @@ glob-parent@^5.0.0: dependencies: is-glob "^4.0.1" +glob-parent@~5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2" + integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw== + dependencies: + is-glob "^4.0.1" + glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: version "7.1.4" resolved "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255" @@ -5491,6 +5540,13 @@ is-binary-path@^1.0.0: dependencies: binary-extensions "^1.0.0" +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -5607,7 +5663,7 @@ is-glob@^3.1.0: dependencies: is-extglob "^2.1.0" -is-glob@^4.0.0, is-glob@^4.0.1: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== @@ -7114,7 +7170,7 @@ normalize-path@^2.1.1: dependencies: remove-trailing-separator "^1.0.1" -normalize-path@^3.0.0: +normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== @@ -7634,7 +7690,7 @@ performance-now@^2.1.0: resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= -picomatch@^2.0.5: +picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7: version "2.2.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a" integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA== @@ -8432,6 +8488,13 @@ readdirp@^2.2.1: micromatch "^3.1.10" readable-stream "^2.0.2" +readdirp@~3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.3.0.tgz#984458d13a1e42e2e9f5841b129e162f369aff17" + integrity sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ== + dependencies: + picomatch "^2.0.7" + realpath-native@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c" @@ -8792,6 +8855,24 @@ sane@^4.0.3: minimist "^1.1.1" walker "~1.0.5" +sass-loader@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d" + integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ== + dependencies: + clone-deep "^4.0.1" + loader-utils "^1.2.3" + neo-async "^2.6.1" + schema-utils "^2.6.1" + semver "^6.3.0" + +sass@^1.25.0: + version "1.25.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.25.0.tgz#f8bd7dfbb39d6b0305e27704a8ebe637820693f3" + integrity sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw== + dependencies: + chokidar ">=2.0.0 <4.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -8838,6 +8919,14 @@ schema-utils@^2.5.0, schema-utils@^2.6.0: ajv "^6.10.2" ajv-keywords "^3.4.1" +schema-utils@^2.6.1: + version "2.6.4" + resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.4.tgz#a27efbf6e4e78689d91872ee3ccfa57d7bdd0f53" + integrity sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ== + dependencies: + ajv "^6.10.2" + ajv-keywords "^3.4.1" + scope-analyzer@^2.0.1: version "2.0.5" resolved "https://registry.yarnpkg.com/scope-analyzer/-/scope-analyzer-2.0.5.tgz#72c9c6770c3e66984f84c7d3c7045998a1a7db8a" @@ -8987,6 +9076,13 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallow-clone@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3" + integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA== + dependencies: + kind-of "^6.0.2" + shallow-copy@~0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"