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