From 918ffc13d4dd6b9c489c4c6b97a880820ad6e032 Mon Sep 17 00:00:00 2001 From: Michal Date: Mon, 4 Mar 2024 13:19:33 +0000 Subject: [PATCH] feat: added pico v2 --- package-lock.json | 11 ++++++---- package.json | 2 +- src/assets/form.css | 52 ++++++++++++++++++++++----------------------- 3 files changed, 34 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 39225d5..a1d0e27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@m-media/vue3-gate-keeper": "^0.1.5", "@m-media/vue3-meta-tags": "^0.0.4", - "@picocss/pico": "^1.5.6", + "@picocss/pico": "^2.0.6", "@stripe/stripe-js": "^1.42.1", "pinia": "^2.0.23", "vue": "^3.2.41", @@ -950,9 +950,12 @@ "dev": true }, "node_modules/@picocss/pico": { - "version": "1.5.13", - "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.13.tgz", - "integrity": "sha512-BPTeE4JC95+7/vsG9r+6hDR1qUkV4YZ1blI/TI6peOmM94XubjmUDE3jUi4f6DBV6WmCL76ueTct/NerJ33E8A==" + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-2.0.6.tgz", + "integrity": "sha512-/d8qsykowelD6g8k8JYgmCagOIulCPHMEc2NC4u7OjmpQLmtSetLhEbt0j1n3fPNJVcrT84dRp0RfJBn3wJROA==", + "engines": { + "node": ">=18.19.0" + } }, "node_modules/@pinia/testing": { "version": "0.0.14", diff --git a/package.json b/package.json index a32cb59..b7018d5 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "dependencies": { "@m-media/vue3-gate-keeper": "^0.1.5", "@m-media/vue3-meta-tags": "^0.0.4", - "@picocss/pico": "^1.5.6", + "@picocss/pico": "^2.0.6", "@stripe/stripe-js": "^1.42.1", "pinia": "^2.0.23", "vue": "^3.2.41", diff --git a/src/assets/form.css b/src/assets/form.css index cbcbc5a..d2084a6 100644 --- a/src/assets/form.css +++ b/src/assets/form.css @@ -2,53 +2,53 @@ /* Any invalid */ :where(input, select, textarea, .input):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week], :placeholder-shown, :focus):invalid { - background-image: var(--icon-invalid); - padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-left: var(--form-element-spacing-horizontal); - -webkit-padding-start: var(--form-element-spacing-horizontal) !important; - padding-inline-start: var(--form-element-spacing-horizontal) !important; - -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + background-image: var(--pico-icon-invalid); + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; + padding-left: var(--pico-form-element-spacing-horizontal); + -webkit-padding-start: var(--pico-form-element-spacing-horizontal) !important; + padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; + -webkit-padding-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; background-position: center right .75rem; background-size: 1rem auto; background-repeat: no-repeat; } :where(input, select, textarea, .input):not(:placeholder-shown, :focus):invalid { - --border-color: var(--form-element-invalid-border-color); + --border-color: var(--pico-form-element-invalid-border-color); } :where(input, select, textarea, .input):not(:placeholder-shown, :focus):invalid+small { - color: var(--form-element-invalid-border-color); + color: var(--pico-form-element-invalid-border-color); } .input { - padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); - margin-bottom: var(--spacing); + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom: var(--pico-spacing); width: 100%; - --background-color: var(--form-element-background-color); - --border-color: var(--form-element-border-color); - --color: var(--form-element-color); + --background-color: var(--pico-form-element-background-color); + --border-color: var(--pico-form-element-border-color); + --color: var(--pico-form-element-color); --box-shadow: none; - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); outline: 0; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); - transition: background-color var(--transition), - border-color var(--transition), color var(--transition), - box-shadow var(--transition); + background-color: var(--pico-background-color); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + font-weight: var(--pico-font-weight); + transition: background-color var(--pico-transition), + border-color var(--pico-transition), color var(--pico-transition), + box-shadow var(--pico-transition); font-size: 1rem; - line-height: var(--line-height); + line-height: var(--pico-line-height); font-family: inherit; letter-spacing: inherit; - height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); /* Below helps with Stripe input */ overflow: hidden; } .input::placeholder { - color: var(--form-element-placeholder-color); + color: var(--pico-form-element-placeholder-color); } \ No newline at end of file