Mercurial > gemma
view client/src/components/ui/UITableBody.vue @ 5629:84d01a536bec 729-node-js-newer-version
Transformed scss and sass styles into css
author | Luisa Beerboom <lbeerboom@intevation.de> |
---|---|
date | Thu, 11 May 2023 13:23:52 +0200 |
parents | 7768f14f6535 |
children |
line wrap: on
line source
<template> <div class="table-body text-left small" :style="'overflow-y: auto; max-height: ' + maxHeight" v-if="data.length" > <div v-for="(item, index) in data" :key="key(index)" :class="['row-container border-top', { active: isActive(item) }]" > <div class="row mx-0"> <slot :item="item" :index="index" name="row"></slot> </div> <div class="expand" v-if="isActive(item)"> <slot :item="item" :index="index" name="expand"></slot> </div> </div> </div> <div v-else class="small text-center py-3 border-top"> <translate>No results.</translate> </div> </template> <style> .table-body .row-container > .row:hover { background-color: #fcfcfc; } .table-body .row-container > .row .table-cell { display: flex; align-items: center; padding: 1.5px 3px; border-right: solid 1px #dee2e6; } .table-body .row-container > .row .table-cell:last-child { border-right: none; } .table-body .row-container > .row .table-cell.center { justify-content: center; } .table-body .row-container .expand { border-bottom: solid 2px var(--color-info); } .table-body .row-container.active > .row { color: #fff; } .table-body .row-container.active > .row .table-cell { border-right-color: rgba(255, 255, 255, 0.3); background-color: var(--color-info); color: #fff; } .table-body .row-container.active > .row .table-cell a { color: #fff !important; } </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: { data: { type: Array }, maxHeight: { type: String, default: "18rem" }, isActive: { type: Function, default: () => false } }, methods: { key(index) { return index; } } }; </script>