Feat: css things

This commit is contained in:
Bertrand Benjamin 2021-07-08 16:52:43 +02:00
parent 1309c9147a
commit c8f58cc20d
7 changed files with 115 additions and 8 deletions

View File

@ -7,8 +7,8 @@
<month-form></month-form>
</div>
<div class="actions">
<button> Valider </button>
<button> Annuler </button>
<button class="validate"> Valider </button>
<button class="cancel"> Annuler </button>
</div>
</div>
</template>
@ -43,5 +43,19 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
display: inline-flex;
flex-direction: row;
background-color: darkgray;
align-items: center;
justify-content: space-between;
width: 100%;
}
.month-presentation > * {
margin: 20px;
}
.date > input {
width: 150px;
}
</style>

View File

@ -6,7 +6,7 @@
<input type="number" id="ca-theo">
</li>
<li>
<label for="ca-retro">CA au moment de la rétrocession</label>
<label for="ca-retro">CA rétrocession</label>
<input type="number" id="ca-retro">
</li>
<li>
@ -45,5 +45,24 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
margin: 0px;
width: 30%;
display: flex;
flex-direction: column-reverse;
}
li > label {
font-size: 0.8em;
}
input {
width: 4em;
font-size: 1.5em;
}
</style>

View File

@ -14,7 +14,7 @@
</ul>
</div>
<div class="actions">
<button> Éditer </button>
<button class="edit"> Éditer </button>
</div>
</div>
</template>
@ -34,5 +34,17 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
display: inline-flex;
flex-direction: row;
background-color: grey;
align-items: center;
justify-content: space-between;
width: 100%;
}
.month-presentation > * {
margin: 20px;
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<ul id="months">
<ul>
<li v-for="month in months" :key="month.date">
<month-presentation :month=month></month-presentation>
</li>
@ -25,7 +25,40 @@ export default {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
padding-bottom: 10px;
}
li:last-of-type {
padding-bottom: 0;
}
.action {
display: inline-flex;
flex-direction: column;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
width: 100%;
font-size: 16px;
}
.validate {
background-color: green;
}
.cancel {
background-color: red;
}
.edit {
background-color: orange;
}
</style>

View File

@ -2,6 +2,7 @@ import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import '@/style.css'
const app = createApp(App)

25
src/style.css Normal file
View File

@ -0,0 +1,25 @@
.actions {
display: inline-flex;
flex-direction: column;
width: 120px;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
width: 100%;
font-size: 16px;
}
.validate {
background-color: green;
}
.cancel {
background-color: red;
}
.edit {
background-color: orange;
}

View File

@ -1,6 +1,6 @@
<template>
<h1>Home</h1>
<section>
<section id="months">
<h2> Mois </h2>
<create-month></create-month>
<months-list></months-list>
@ -32,5 +32,8 @@ export default {
}
</script>
<style>
<style scoped>
#months {
width: 70%;
}
</style>