lafrite/Sousmargot
1
0
Fork 0
Code Issues Pull Requests Packages Releases Wiki Activity

Feat: use boxed for createMonth

Browse Source
This commit is contained in:
Bertrand Benjamin 2021-08-12 09:48:30 +02:00
parent a61fe7e10c
commit 8f32f5b1b9
3 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/CreateMonth.vue
View File

@ -1,8 +1,12 @@
<template>
<div id="create-month" >
<div class="month-presentation" id="new-month">
<div class="boxed-green month-presentation" id="new-month">
<div class="date">
<input type="month" v-model="monthDate">
<div class="actions">
<button class="validate" @click="save"> Valider </button>
<button class="cancel" @click="cancel"> Annuler </button>
</div>
</div>
<div class="datas">
<ul>
@ -32,11 +36,6 @@
</li>
</ul>
</div>
<div class="actions">
<button class="validate" @click="save"> Valider </button>
<button class="cancel" @click="cancel"> Annuler </button>
</div>
</div>
</div>
</template>
@ -93,14 +92,8 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
display: inline-flex;
flex-direction: row;
box-shadow: 5px 5px 10px gray;
border-left: 1rem solid green;
align-items: center;
justify-content: space-between;
border-radius: 10px;
width: 100%;
display: grid;
grid-template-columns: 140px 1fr;
}
.month-presentation > * {
margin: 20px;

8
src/components/MonthPresentation.vue
View File

@ -107,14 +107,8 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
/*
display: inline-flex;
flex-direction: row;
*/
display: grid;
grid-template-columns: 140px 6fr;
width: 100%;
grid-template-columns: 140px 1fr;
}
.month-presentation > * {
margin: 20px;

21
src/style.css
View File

@ -2,24 +2,20 @@ body {
background-color: whitesmoke;
}
.actions {
display: inline-flex;
flex-direction: column;
width: 120px;
}
button {
color: white;
padding: 15px 32px;
padding: 4px;
box-shadow: 1px 1px 2px gray;
text-align: center;
display: inline-block;
width: 100%;
font-size: 16px;
border-radius: 5px;
background-color: white;
margin-top: 5px;
font-size: 0.8em;
width: auto;
transition: all 0.2s ease-out;
}
button:hover {
transition: all 0.2s ease-out;
}
@ -56,6 +52,13 @@ button:hover {
background-color: white;
}
.boxed-green {
box-shadow: 2px 2px 5px gray;
border-left: 1rem solid green;
border-radius: 10px;
background-color: white;
}
.hightlights {
display: grid;
grid-template-columns: repeat(3, 1fr);