settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

separator for cellection quotes

Browse Source
This commit is contained in:
Settel 2021-11-28 20:59:33 +01:00
parent 1d30b13078
commit 571193698d
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/src/components/QuoteListItem.vue
View File

@ -1,11 +1,14 @@
<template>
<div class="quote-list-item__container">
<div class="quote-list-item__quote">
{{ quote.quote }}
</div>
<div class="quote-list-item__actions">
<div class="quote-list-item__icon quote-list-item__icon-edit" @click="edit" />
<div class="quote-list-item__icon quote-list-item__icon-delete" @click="remove" />
<div class="quote-list-item">
<div class="quote-list-item__separator" />
<div class="quote-list-item__container">
<div class="quote-list-item__quote">
{{ quote.quote }}
</div>
<div class="quote-list-item__actions">
<div class="quote-list-item__icon quote-list-item__icon-edit" @click="edit" />
<div class="quote-list-item__icon quote-list-item__icon-delete" @click="remove" />
</div>
</div>
</div>
</template>
@ -29,9 +32,17 @@ export default {
<style lang="scss">
@import '~/assets/css/components';
.quote-list-item__container ~ .quote-list-item__container {
}
.quote-list-item {
& ~ & &__separator {
height: 1px;
margin: 0 40%;
background-color: $primary-text-color;
}
&__container {
display: flex;
padding: 48px 32px;
}
&__quote {
color: $primary-text-color;