Split postcss files

This commit is contained in:
Hubert Van De Walle 2020-08-14 17:19:23 +02:00
parent fb49d45677
commit 4c38512038
9 changed files with 206 additions and 185 deletions

43
css/button.pcss Normal file
View File

@ -0,0 +1,43 @@
.btn {
@apply font-semibold py-2 px-4 rounded;
&:focus {
@apply outline-none shadow-outline;
}
}
.btn-teal {
@apply bg-teal-500 text-white;
&:focus {
@apply bg-teal-600;
}
&:hover {
@apply bg-teal-600;
}
}
.btn-green {
@apply bg-green-500 text-white;
&:focus {
@apply bg-green-600;
}
&:hover {
@apply bg-green-600;
}
}
.btn-red {
@apply bg-red-500 text-white;
&:focus {
@apply bg-red-600;
}
&:hover {
@apply bg-red-600;
}
}

92
css/note.pcss Normal file
View File

@ -0,0 +1,92 @@
#note {
a {
@apply text-blue-700 underline;
}
p {
@apply my-4;
}
blockquote, figure {
@apply my-4 mx-10;
}
hr {
@apply border;
}
h1 {
@apply text-4xl font-bold my-2;
}
h2 {
@apply text-2xl font-bold my-3;
}
h3 {
@apply text-lg font-bold my-4;
}
h4 {
@apply text-base font-bold my-5;
}
h5 {
@apply text-sm font-bold my-6;
}
h6 {
@apply text-xs font-bold my-10;
}
ul,
menu {
@apply list-disc my-1 pl-10;
}
ol {
@apply list-decimal my-4 pl-10;
}
ul,
ol {
ul {
list-style-type: circle;
}
ul,
ol {
ul {
list-style-type: square;
}
}
}
dd {
@apply pl-10;
}
dl {
@apply my-4;
}
ul,
ol,
dl {
ul,
ol,
dl {
margin: 0;
}
}
b,
strong {
font-weight: bold;
}
pre {
@apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-700;
}
}

11
css/other.pcss Normal file
View File

@ -0,0 +1,11 @@
.nav {
height: 64px;
}
.centered {
min-height: calc(100vh - 64px);
}
.tag {
@apply italic font-semibold text-sm bg-teal-500 text-gray-900 rounded-full py-1 px-2 align-middle;
}

View File

@ -2,14 +2,15 @@
"name": "css",
"version": "1.0.0",
"scripts": {
"css": "NODE_ENV=dev MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.css --output ../app/src/main/resources/static/styles.css",
"css-purge": "NODE_ENV=production MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.css --output ../app/src/main/resources/static/styles.css"
"css": "NODE_ENV=dev MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.pcss --output ../app/src/main/resources/static/styles.css",
"css-purge": "NODE_ENV=production MANIFEST=../app/src/main/resources/css-manifest.json postcss build styles.pcss --output ../app/src/main/resources/static/styles.css"
},
"dependencies": {
"autoprefixer": "^9.8.6",
"cssnano": "^4.1.10",
"postcss-cli": "^7.1.1",
"postcss-hash": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-nested": "^4.2.3",
"tailwindcss": "^1.5.1"
}

31
css/pagination.pcss Normal file
View File

@ -0,0 +1,31 @@
nav.pages {
@apply flex pl-0 list-none rounded my-2 flex justify-center;
:first-child {
@apply rounded-l;
}
:last-child {
@apply rounded-r;
}
:not(:last-child) {
@apply border-r-0;
}
a {
@apply relative block py-2 px-3 leading-tight border bg-gray-800 border-gray-700 text-teal-300;
&:hover {
@apply bg-gray-700;
}
&:active {
@apply bg-teal-800 border-gray-700 text-white;
&:hover {
@apply bg-gray-700;
}
}
}
}

View File

@ -1,5 +1,6 @@
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-nested'),
require('tailwindcss'),
require('autoprefixer'),

View File

@ -1,181 +0,0 @@
@tailwind base;
@tailwind components;
.btn {
@apply font-semibold py-2 px-4 rounded;
&:focus {
@apply outline-none shadow-outline;
}
}
.btn-teal {
@apply bg-teal-500 text-white;
&:focus {
@apply bg-teal-600;
}
&:hover {
@apply bg-teal-600;
}
}
.btn-green {
@apply bg-green-500 text-white;
&:focus {
@apply bg-green-600;
}
&:hover {
@apply bg-green-600;
}
}
.btn-red {
@apply bg-red-500 text-white;
&:focus {
@apply bg-red-600;
}
&:hover {
@apply bg-red-600;
}
}
.nav {
height: 64px;
}
.centered {
min-height: calc(100vh - 64px);
}
.tag {
@apply italic font-semibold text-sm bg-teal-500 text-gray-900 rounded-full py-1 px-2 align-middle;
}
nav.pages {
@apply flex pl-0 list-none rounded my-2 flex justify-center;
}
nav.pages :first-child {
@apply rounded-l;
}
nav.pages :last-child {
@apply rounded-r;
}
nav.pages :not(:last-child) {
@apply border-r-0;
}
nav.pages a {
@apply relative block py-2 px-3 leading-tight border bg-gray-800 border-gray-700 text-teal-300;
}
nav.pages a:hover {
@apply bg-gray-700;
}
nav.pages a.active {
@apply bg-teal-800 border-gray-700 text-white;
}
nav.pages a.active:hover {
@apply bg-gray-700;
}
#note a {
@apply text-blue-700 underline;
}
#note p {
@apply my-4;
}
#note blockquote,
#note figure {
@apply my-4 mx-10;
}
#note hr {
@apply border; }
#note h1 {
@apply text-4xl font-bold my-2; }
#note h2 {
@apply text-2xl font-bold my-3; }
#note h3 {
@apply text-lg font-bold my-4; }
#note h4 {
@apply text-base font-bold my-5; }
#note h5 {
@apply text-sm font-bold my-6; }
#note h6 {
@apply text-xs font-bold my-10; }
#note ul,
#note menu {
@apply list-disc my-1 pl-10; }
#note ol {
@apply list-decimal my-4 pl-10; }
#note ul ul,
#note ol ul {
list-style-type: circle; }
#note ul ul ul,
#note ul ol ul,
#note ol ul ul,
#note ol ol ul {
list-style-type: square; }
#note dd {
@apply pl-10; }
#note dl {
@apply my-4; }
#note ul ul,
#note ul ol,
#note ul menu,
#note ul dl,
#note ol ul,
#note ol ol,
#note ol menu,
#note ol dl,
#note menu ul,
#note menu ol,
#note menu menu,
#note menu dl,
#note dl ul,
#note dl ol,
#note dl menu,
#note dl dl {
margin: 0; }
#note legend {
@apply py-0 px-1; }
#note fieldset {
@apply my-0 mx-1 pt-0 px-1 pb-2; }
#note b,
#note strong {
font-weight: bold; }
#note pre {
@apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-700; }
@tailwind utilities;

13
css/styles.pcss Normal file
View File

@ -0,0 +1,13 @@
/*noinspection CssUnknownTarget*/
@import "tailwindcss/base";
/*noinspection CssUnknownTarget*/
@import "tailwindcss/components";
@import "./button.pcss";
@import "./note.pcss";
@import "./pagination.pcss";
@import "./other.pcss";
/*noinspection CssUnknownTarget*/
@import "tailwindcss/utilities";

View File

@ -1246,6 +1246,16 @@ postcss-hash@^2.0.0:
mkdirp "^0.5.1"
postcss "^7.0.2"
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.3"
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
@ -1489,7 +1499,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.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
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==
@ -1574,7 +1584,7 @@ resolve-from@^3.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
integrity sha1-six699nWiBvItuZTM17rywoYh0g=
resolve@^1.14.2:
resolve@^1.1.7, resolve@^1.14.2:
version "1.17.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==