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

23
src/style.css
View File

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