New CSS Styling Guide

How to use: import main.scss to your vue component

 @import "@/assets/css/main.scss";

Available css class:

• .auto-overflow-container used in wrapper div so the div is scrollable and responsive

• .is-rounded add rounded corners with 0.5rem radius

• .ellipsis make the word ellipsis, must add max-width to the div

• .buttons wrapper class css for buttons to add margin

• .icon used in <b-icon class="icon"></b-icon> to add margin right to the icon

• .icon-wrapper used as wrapper css class for button and text so that it is vertically alligned

<div class="icon-wrapper">
<b-icon class="icon"></b-icon>
Example Text
</div>

available components:

• ListItem.vue

 import ListItem from '@/components/list/ListItem'

<ListItem>
<template #title>Place title here</template>
<template #info>Place info here, for example date, author</template>
<template #content>place content here</template>
<template #actions>place actions here, usually b-dropdown
<b-dropdown aria-role="list" position="is-bottom-left" @click.prevent.stop>
<button class="button is-text" slot="trigger">
<b-icon icon="ellipsis-v" size="is-small" class="icon"></b-icon>
</button>
<b-dropdown-item
aria-role="listitem"
@click="goToEditAnnouncement(announcement.id)"
v-if="accessList.edit">
<span class="icon-wrapper">
<b-icon icon="edit" class="icon" size="is-small"></b-icon>
Edit
</span>
</b-dropdown-item>
</b-dropdown>
</template>
</ListItem>