Feat: css things
This commit is contained in:
parent
1309c9147a
commit
c8f58cc20d
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
25
src/style.css
Normal 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;
|
||||
}
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user