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>