Fix styling on DatePicker Vue component
MODIFY
resources/assets/js/components/DatePicker.vue
resources/assets/js/components/DatePicker.vue
<template>
- <div>
+ <div class="row spacing-bottom-medium" style="justify-content: space-between;">
<input type="hidden" name="date" :value="year + '-' + month + '-' + date" />
- <div>
+ <div class="column tight">
+ <div class="row gutter">
+ <div class="column tight">
<button v-on:click="previousYear">Previous</button>
- {{ year }}
+ </div>
+ <div class="column tight align-middle">{{ year }}</div>
+ <div class="column tight">
<button @click="nextYear">Next</button>
</div>
- <div>
+ </div>
+ </div>
+ <div class="column tight">
+ <div class="row gutter">
+ <div class="column tight">
<button @click="previousMonth">Previous</button>
- {{ month }}
+ </div>
+ <div class="column tight align-middle">{{ month }}</div>
+ <div class="column tight">
<button @click="nextMonth">Next</button>
</div>
- <div>
+ </div>
+ </div>
+ <div class="column tight">
+ <div class="row gutter">
+ <div class="column tight">
<button @click="previousDate">Previous</button>
- {{ date }}
+ </div>
+ <div class="column tight align-middle">{{ date }}</div>
+ <div class="column tight">
<button @click="nextDate">Next</button>
</div>
</div>
+ </div>
+ </div>
</template>
<script>

MODIFY
resources/assets/sass/components/spacing.scss
resources/assets/sass/components/spacing.scss
padding-bottom: 48px;
}
+ &-medium {
+ padding-bottom: 32px;
+ }
+
&-small {
padding-bottom: 16px;
}

Fix styling on DatePicker Vue component