Add and use postcss-import, move button component
This commit is contained in:
parent
2b86365e0c
commit
1f10536d46
|
@ -32,6 +32,7 @@
|
|||
"eslint": "^5.8.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"jest": "^24.7.1",
|
||||
"postcss-import": "^12.0.1",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
tailwindcss: './tailwind.config.js',
|
||||
'postcss-nested': {},
|
||||
autoprefixer: {}
|
||||
|
|
18
src/assets/css/components/button.css
Normal file
18
src/assets/css/components/button.css
Normal file
|
@ -0,0 +1,18 @@
|
|||
.btn {
|
||||
@apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply bg-blue-400
|
||||
}
|
||||
}
|
||||
|
||||
.btn.is-secondary {
|
||||
@apply bg-gray-500;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply bg-gray-600
|
||||
}
|
||||
}
|
||||
|
12
src/assets/css/custom-base.css
Normal file
12
src/assets/css/custom-base.css
Normal file
|
@ -0,0 +1,12 @@
|
|||
html {
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
@apply font-bold
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl
|
||||
}
|
1
src/assets/css/custom-components.css
Normal file
1
src/assets/css/custom-components.css
Normal file
|
@ -0,0 +1 @@
|
|||
@import 'components/button';
|
|
@ -1,36 +1,9 @@
|
|||
@tailwind base;
|
||||
@import 'tailwindcss/base';
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
}
|
||||
@import 'custom-base';
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
@apply font-bold
|
||||
}
|
||||
@import 'tailwindcss/components';
|
||||
|
||||
h2 {
|
||||
@apply text-2xl
|
||||
}
|
||||
@import 'custom-components';
|
||||
|
||||
@tailwind components;
|
||||
|
||||
.btn {
|
||||
@apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply bg-blue-400
|
||||
}
|
||||
}
|
||||
|
||||
.btn.is-secondary {
|
||||
@apply bg-gray-500;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply bg-gray-600
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss/utilities';
|
||||
|
|
28
yarn.lock
28
yarn.lock
|
@ -7967,7 +7967,7 @@ performance-now@^2.1.0:
|
|||
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
|
||||
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
|
||||
|
||||
pify@^2.0.0:
|
||||
pify@^2.0.0, pify@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||
integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
|
||||
|
@ -8120,6 +8120,16 @@ postcss-functions@^3.0.0:
|
|||
postcss "^6.0.9"
|
||||
postcss-value-parser "^3.3.0"
|
||||
|
||||
postcss-import@^12.0.1:
|
||||
version "12.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
|
||||
integrity sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==
|
||||
dependencies:
|
||||
postcss "^7.0.1"
|
||||
postcss-value-parser "^3.2.3"
|
||||
read-cache "^1.0.0"
|
||||
resolve "^1.1.7"
|
||||
|
||||
postcss-js@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.1.tgz#4154e906ff410930afab63a24210be1b831e89a9"
|
||||
|
@ -8403,7 +8413,7 @@ postcss-unique-selectors@^4.0.1:
|
|||
postcss "^7.0.0"
|
||||
uniqs "^2.0.0"
|
||||
|
||||
postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
|
||||
postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
|
||||
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
|
||||
|
@ -8700,6 +8710,13 @@ react-is@^16.8.4:
|
|||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
|
||||
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
|
||||
|
||||
read-cache@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
|
||||
integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
|
||||
dependencies:
|
||||
pify "^2.3.0"
|
||||
|
||||
read-pkg-up@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
|
||||
|
@ -9053,6 +9070,13 @@ resolve@1.1.7:
|
|||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
|
||||
integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
|
||||
|
||||
resolve@^1.1.7:
|
||||
version "1.11.1"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
|
||||
integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
|
||||
dependencies:
|
||||
path-parse "^1.0.6"
|
||||
|
||||
resolve@^1.10.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1:
|
||||
version "1.11.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
|
||||
|
|
Reference in a new issue