diff --git a/README.md b/README.md index 7064491..25b5821 100755 --- a/README.md +++ b/README.md @@ -1 +1,75 @@ -# TBD +# Nuxt Minimal Starter + +Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/app/assets/styles/button.css b/app/assets/styles/button.css index 3a78022..ebc7ca1 100755 --- a/app/assets/styles/button.css +++ b/app/assets/styles/button.css @@ -1,7 +1,7 @@ .Button { --padding: .2rem; - --background: var(--color-gradient-main-dark); - --color: var(--color-lightest); + --background: var(--color-main); + --color: var(--color-white); --background-hover: var(--color-main-dark); position: relative; @@ -13,58 +13,9 @@ transition: var(--transition-default); outline: none; border: none; - background: var(--background); + background: transparent; color: var(--color); - &.transparent { - --background: transparent; - box-shadow: none; - padding: .5em 1.5em; - border-radius: var(--radius-default); - } - - &.raised { - box-shadow: var(--box-shadow-z2); - padding: .5em 1.5em; - border-radius: var(--radius-default); - - &.danger { - --background: var(--color-gradient-error); - --color: var(--color-lightest); - } - } - - &.text { - --background: transparent; - --color: var(--color-darkest); - padding: .5em 1.5em; - border-radius: var(--radius-default); - - &:hover { - --background: rgba(0, 0, 0, 0.05); - } - - &.white { - --color: var(--color-lightest); - } - - &.danger { - --color: var(--color-error); - - &:hover { - --background: rgba(255, 0, 0, 0.1); - } - } - } - - &.round { - display: flex; - justify-content: center; - align-items: center; - border-radius: 100%; - padding: .5rem; - } - &.cta { background: var(--background); color: var(--color); @@ -78,9 +29,9 @@ } &.cta.white { - --background: var(--color-lightest); + --background: var(--color-white); --color: var(--color-main); - --background-hover: var(--color-light); + --background-hover: var(--color-grey); } &.icon-button { diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css index 91eb4bc..9c47667 100644 --- a/app/assets/styles/buttonGroup.css +++ b/app/assets/styles/buttonGroup.css @@ -1,13 +1,9 @@ .ButtonGroup { display: flex; - background: var(--color-main); - border-radius: var(--radius-default); - overflow: hidden; - box-shadow: var(--box-shadow-z2); & button { - --color: var(--color-light); - --background: var(--color-main-darkest); + --color: var(--color-white-transparent); + --background: var(--color-main); all: unset; display: flex; align-items: center; @@ -21,7 +17,7 @@ transition: var(--transition-default); &.active { - --color: var(--color-lightest); + --color: var(--color-white); --background: var(--color-main-dark); } diff --git a/app/assets/styles/footer.css b/app/assets/styles/footer.css index b23b844..23c47e5 100644 --- a/app/assets/styles/footer.css +++ b/app/assets/styles/footer.css @@ -1,11 +1,9 @@ .Footer { - position: relative; - background: var(--color-darkest); + background: var(--color-main-dark); padding: 1rem; - z-index: 100; & h4 { - color: var(--color-lightest); + color: var(--color-white); text-align: center; margin-bottom: 1rem; } @@ -14,7 +12,7 @@ display: flex; gap: 1rem; justify-content: space-between; - color: var(--color-light); + color: var(--color-white-transparent); } & .socials { @@ -35,7 +33,7 @@ gap: 1rem; & a { - color: var(--color-lightest); + color: var(--color-white); text-decoration: none; } } diff --git a/app/assets/styles/formInput.css b/app/assets/styles/formInput.css index 3d9c8a0..44d228d 100755 --- a/app/assets/styles/formInput.css +++ b/app/assets/styles/formInput.css @@ -1,52 +1,44 @@ .Input { - &.error { - & .input-wrapper { - border-color: var(--color-error); - outline-width: 2px; - } + position: relative; + flex: 25% 1 0; + border: 2px solid var(--color-blue); + border-radius: var(--radius-default); + overflow: hidden; + transition: var(--transition-default); + outline: 0 solid var(--color-white); - & span { - color: var(--color-error); - } - } - - & span { - font-size: .65em; - } - - & .input-wrapper { - position: relative; - flex: 25% 1 0; - border: 2px solid var(--color-main-dark); - border-radius: var(--radius-default); - overflow: hidden; + & label { + position: absolute; + left: .5rem; + font-size: 1.5em; + top: .7rem; transition: var(--transition-default); - outline: 0 solid var(--color-lightest); + } - & label { - position: absolute; - font-size: .8em; + & input { + all: unset; + width: calc(100% - 1rem); + font-size: 1.2em; + padding: 1.3rem .5rem .5rem .5rem; + background: var(--color-white); + + &[type="number"] { + text-align: right; + } + } + + &:has(input:invalid) { + border-color: var(--color-red); + outline-width: 2px; + } + + & input:focus, + & input:not(:placeholder-shown) { + & + label { + color: var(--color-main); + font-size: 1em; top: .3rem; - left: .5rem; - transition: var(--transition-default); - } - - & input { - all: unset; - width: calc(100% - 1rem); - padding: 1.3rem .5rem .5rem .5rem; - background: var(--color-lightest); - - &[type="number"] { - text-align: right; - } - } - - & input:focus, - & input:not(:placeholder-shown) { - & + label { - color: var(--color-main-dark); - } + right: .5rem; } } } \ No newline at end of file diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 9a68aee..f35ce72 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -1,50 +1,28 @@ :root { --padding-default: 1rem; - --padding-small: .5rem; - --radius-default: 3px; + --radius-default: 5px; --transition-default: 150ms; - --color-success: #328104; - --color-error: #A20606; - --color-blue-light: #0DDCE7; - --color-blue: #05B0FF; - --color-blue-dark: #0266F2; - --color-blue-darkest: #013174; - - --color-darkest: #292929; - --color-dark: #404040; - --color-middle: #707070; - --color-light: #E0E0E6; - --color-lightest: #FAFAFF; - - --color-green-light: #05FFC5; - --color-green: #02F276; - --color-green-dark: #09DC33; - --color-green-darkest: #07B029; - --color-green-darkest-most: #157C2A; + --color-black: #333; + --color-white: white; + --color-white-transparent: rgba(255, 255, 255, 0.67); + --color-red: #cc0001; + --color-blue-light: #61a7fd; + --color-blue: #2e86de; + --color-blue-dark: #1b4b7f; + --color-grey: #c7c7c7; + --color-orange: #DE9C2F; --color-main: var(--color-blue); --color-main-light: var(--color-blue-light); --color-main-dark: var(--color-blue-dark); - --color-main-darkest: var(--color-blue-darkest); - --color-accent: var(--color-green); - --color-accent-light: var(--color-green-light); - --color-accent-dark: var(--color-green-dark); - --color-accent-darkest: var(--color-green-darkest); - - --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light)); - --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark)); - --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light)); - --color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark)); - --color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909); - --color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909); + --color-accent: var(--color-orange); --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23); --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23); - } * { @@ -58,7 +36,7 @@ body { height: 100%; overflow-x: hidden; font-family: sans-serif; - color: var(--color-darkest); + color: var(--color-black); } .dot { @@ -101,6 +79,7 @@ body { .card { overflow: hidden; border-radius: var(--radius-default); + border: 1px solid var(--color-main); box-shadow: var(--box-shadow-z2); } @@ -129,7 +108,7 @@ body { } .text-white { - color: var(--color-lightest); + color: var(--color-white); } .bg-main { @@ -146,50 +125,4 @@ body { .bg-main-dark-hover:hover { background-color: var(--color-main-dark); -} - -.gap-default { - gap: 1rem; -} - -.bg-blue { - background: var(--color-blue); -} - -.bg-white { - background: var(--color-lightest); -} - -.padding { - gap: 1rem; - padding: var(--padding-default); -} - -.padding-small { - gap: 1rem; - padding: var(--padding-small); -} - -dialog { - top: 50%; - left: 50%; - width: 100vw; - transform: translate(-50%, -50%); - border: none; - border-radius: var(--radius-default); - - font-size: 1rem; - - & header { - justify-content: space-between; - align-items: center; - } - - & footer { - justify-content: space-between; - } - - &::backdrop { - background: rgba(0, 0, 0, 0.5); - } } \ No newline at end of file diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 568236a..e515471 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -3,19 +3,16 @@ align-items: center; justify-content: space-between; padding: var(--padding-default); - background-color: rgba(255 255 255 / .8); - backdrop-filter: blur(10px); + background-color: var(--color-white); box-shadow: var(--box-shadow-z2); - color: var(--color-darkest); position: sticky; top: 0; - z-index: 100; + z-index: 1; & strong { font-size: 2em; - & span { - color: var(--color-main-dark); + color: var(--color-main); } } @@ -41,7 +38,7 @@ top: 0; height: 100dvh; transition: 150ms ease-in-out; - background: var(--color-lightest); + background: var(--color-white); font-size: 2em; align-items: end; z-index: 100; diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index b8702ea..47acd68 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -1,117 +1,93 @@ .PriceCard { - position: relative; - overflow: hidden; width: 100%; + display: grid; transition: 150ms; + grid-template-rows: auto 1fr auto; + max-height: 400px; opacity: 1; - color: var(--color-darkest); - background: black; - .bottom { - position: absolute; - z-index: 1; + &.deleting { + max-height: 0; + opacity: 0; + } + + &.folded { + grid-template-rows: auto 0fr auto; + } + + & > header { + color: var(--color-white); display: flex; - align-items: stretch; - width: 100%; - height: 100%; + justify-content: space-between; + align-items: center; + font-size: 1.3em; - & > * { - flex-grow: 1; - color: var(--color-lightest); - font-size: 2rem; - display: flex; - align-items: center; - - & .icon { - filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4)); - } - } - - & .bg-edit { - background: var(--color-gradient-main-dark); - padding: 2rem; - text-align: left; - } - - & .bg-delete { - background: var(--color-gradient-error-reverse); - padding: 2rem; - text-align: right; - justify-content: flex-end; + & > .Button { + color: var(--color-white); + border: 2px solid var(--color-white); } } - .top { - position: relative; - background: var(--color-lightest); - z-index: 2; + & aside { + overflow: hidden; + } + + & footer { + display: flex; + justify-content: space-between; + align-items: center; + + & > .Button.delete { + scale: 0; + } + + & > .Button.deletable { + scale: 1; + } + } + + & .padding { gap: 1rem; - padding: 1rem; - border-radius: var(--radius-default); + padding: var(--padding-default); + } - &.animated { - transition: var(--transition-default); + & .bg-blue { + background: var(--color-blue); + } + + & .bg-white { + background: var(--color-white); + } + + & .wrapper { + display: flex; + flex-direction: row; + width: 100%; + gap: 1rem; + justify-content: space-between; + + & > * { + flex-basis: 25%; + flex-grow: 1; } - & > header { - display: flex; - justify-content: space-between; + & > .info { align-items: center; - color: var(--color-darkest); - & .icon { - font-size: 1rem; - cursor: pointer; + & > .icon { + color: var(--color-blue-light); + font-size: 2rem; + padding: .2rem; } - } - & .name-price { - display: flex; - gap: .5rem; + & > .price { + font-size: 1.2rem; + } - & > span:nth-child(1) { + & > .pro { + font-size: .8rem; font-weight: bold; - max-width: 210px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - & > span:nth-child(2)::before { - content: '•'; - margin-right: .5rem; - color: var(--color-middle); - } - } - - & .wrapper { - display: flex; - flex-direction: row; - width: 100%; - gap: 1rem; - justify-content: space-between; - - & > .info { - flex-grow: 0; - align-items: center; - gap: .25rem; - font-weight: bold; - - & > .price { - display: flex; - align-items: center; - gap: .5rem; - - & > .icon { - color: var(--color-main-dark); - } - } - - & > .pro { - font-size: .6rem; - color: var(--color-middle); - font-weight: lighter; - } + color: var(--color-main-light); } } } diff --git a/app/assets/styles/toolbar.css b/app/assets/styles/toolbar.css index a634889..44f305f 100755 --- a/app/assets/styles/toolbar.css +++ b/app/assets/styles/toolbar.css @@ -1,10 +1,9 @@ .Toolbar { display: flex; justify-content: space-evenly; - background: var(--color-main-darkest); + background: var(--color-main); position: sticky; bottom: 0; - z-index: 100; box-shadow: var(--box-shadow-upper); & > .Button { diff --git a/app/components/Pp/ButtonGroup.vue b/app/components/Pp/ButtonGroup.vue index 71b90d4..322b6f7 100644 --- a/app/components/Pp/ButtonGroup.vue +++ b/app/components/Pp/ButtonGroup.vue @@ -1,5 +1,5 @@ - - \ No newline at end of file diff --git a/app/components/Pp/FormInput.vue b/app/components/Pp/FormInput.vue index cd1ec71..66c8a94 100755 --- a/app/components/Pp/FormInput.vue +++ b/app/components/Pp/FormInput.vue @@ -1,20 +1,17 @@ @@ -25,9 +22,9 @@ type Props = { min ?: number step ?: number required ?: boolean - message ?: string label : string id : string + uid : string } const { @@ -35,9 +32,15 @@ const { required = false, step = 0.01, min = 1, + max, + label, + id, + uid, } = defineProps() const emit = defineEmits(['blur']) const text = defineModel() + +const makeId = () => `${id}_${uid}` diff --git a/app/components/Pp/Header.vue b/app/components/Pp/Header.vue index 6398aac..082dfe8 100755 --- a/app/components/Pp/Header.vue +++ b/app/components/Pp/Header.vue @@ -1,8 +1,6 @@