From ac100de8d8e0fc85e34cde9aec6262259b12f96c Mon Sep 17 00:00:00 2001 From: Cristiano Magro <cristiano.magro@vola.it> Date: Mon, 30 Dec 2024 21:53:48 +0100 Subject: [PATCH] style scoped locali --- 07 - development setup/vue-cli-03-finished/src/App.vue | 92 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 92 insertions(+), 0 deletions(-) diff --git a/07 - development setup/vue-cli-03-finished/src/App.vue b/07 - development setup/vue-cli-03-finished/src/App.vue new file mode 100644 index 0000000..7640378 --- /dev/null +++ b/07 - development setup/vue-cli-03-finished/src/App.vue @@ -0,0 +1,92 @@ +<template> + <section> + <header> + <h1>My Friends</h1> + </header> + <ul> + <friend-contact></friend-contact> + <friend-contact></friend-contact> + </ul> + </section> +</template> + +<script> +export default { + data() { + return { + friends: [ + { + id: "manuel", + name: "Manuel Lorenz", + phone: "0123 45678 90", + email: "manuel@localhost.com", + }, + { + id: "julie", + name: "Julie Jones", + phone: "0987 654421 21", + email: "julie@localhost.com", + }, + ], + }; + }, +}; +</script> + +<style> +* { + box-sizing: border-box; +} +html { + font-family: "Jost", sans-serif; +} +body { + margin: 0; +} +header { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 3rem auto; + border-radius: 10px; + padding: 1rem; + background-color: #58004d; + color: white; + text-align: center; + width: 90%; + max-width: 40rem; +} +#app ul { + margin: 0; + padding: 0; + list-style: none; +} +#app li { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 1rem auto; + border-radius: 10px; + padding: 1rem; + text-align: center; + width: 90%; + max-width: 40rem; +} +#app h2 { + font-size: 2rem; + border-bottom: 4px solid #ccc; + color: #58004d; + margin: 0 0 1rem 0; +} +#app button { + font: inherit; + cursor: pointer; + border: 1px solid #ff0077; + background-color: #ff0077; + color: white; + padding: 0.05rem 1rem; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26); +} +#app button:hover, +#app button:active { + background-color: #ec3169; + border-color: #ec3169; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); +} +</style> \ No newline at end of file -- Gitblit v1.8.0