Mercurial > gemma
view client/src/components/ui/UIBoxHeader.vue @ 4238:fe24cdde614d
styles-config: prepare components for WMS-Layer styling and set default color values
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 17:21:14 +0200 |
parents | c36940e53788 |
children | 36cbf14b878a |
line wrap: on
line source
<template> <h6 :class="['box-header', { small }]"> <span class="box-title"> <font-awesome-icon :icon="icon" class="box-icon" v-if="icon" fixed-width /> {{ title }} </span> <div class="d-flex flex-row"> <span class="box-control" v-for="(action, index) in actions" :key="index" @click="action.callback" > <font-awesome-icon :icon="action.icon" :spin="action.icon === 'spinner'" /> </span> <span class="box-control" @click="closeCallback" v-if="closeCallback"> <font-awesome-icon icon="times" /> </span> </div> </h6> </template> <style lang="sass"> .box-header display: flex justify-content: space-between align-items: center min-height: 34px padding-left: .5rem border-bottom: 1px solid #dee2e6 color: $color-info margin-bottom: 0 padding: 0.25rem font-weight: bold background: white border-top-left-radius: .25rem border-top-right-radius: .25rem .box-title padding-left: 0.25rem .box-icon margin-right: 0.25rem .box-control margin-left: 3px &.small padding: 0.1rem 0.1rem 0.1rem 0.25rem min-height: 27px </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ export default { props: { icon: String, title: String, closeCallback: Function, actions: Array, small: Boolean } }; </script>