verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 107 Releases Wiki Activity

refs 5987 var-colors fixed
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Jorge Penadés 2023-08-17 10:32:24 +02:00
parent b7e9aee1d5
commit 76071240d1
5 changed files with 18 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/ui/CardDescriptor.vue
View File

@ -127,7 +127,7 @@ watch($props, async () => {
</QItemLabel> </QItemLabel>
</QItem> </QItem>
</QList> </QList>
<div class="list-box"> <div class="list-box q-mt-xs">
<slot name="body" :entity="entity" /> <slot name="body" :entity="entity" />
</div> </div>
</div> </div>
@ -161,11 +161,12 @@ watch($props, async () => {
display: flex; display: flex;
padding: 2px 16px; padding: 2px 16px;
.label { .label {
color: $label-color; color: var(--vn-label);
font-size: 12px; font-size: 12px;
width: 47%; width: 47%;
} }
.value { .value {
color: var(--vn-text);
font-size: 14px; font-size: 14px;
margin-left: 12px; margin-left: 12px;
width: 47%; width: 47%;
@ -178,32 +179,9 @@ watch($props, async () => {
} }
} }
} }
body.body--light {
.descriptor {
.vn-label-value {
.label {
color: var(--vn-label);
}
.value {
color: var(--vn-text);
}
}
}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
body.body--light {
.descriptor {
.subtitle {
color: $gray;
}
.list-box {
background-color: $lighter-gray;
}
}
}
$descriptor-items-box: rgba(87, 86, 86, 0.2);
.title { .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -213,17 +191,18 @@ $descriptor-items-box: rgba(87, 86, 86, 0.2);
} }
} }
.subtitle { .subtitle {
color: var(--vn-text);
font-size: 16px; font-size: 16px;
color: $white; margin-bottom: 15px;
} }
.list-box { .list-box {
width: 90%; width: 90%;
background-color: $descriptor-items-box; background-color: var(--vn-gray);
margin: 10px auto; margin: 10px auto;
padding: 10px 5px 10px 0px; padding: 10px 5px 10px 0px;
border-radius: 8px; border-radius: 8px;
.q-item__label { .q-item__label {
color: $label-color; color: var(--vn-label);
} }
} }
.descriptor { .descriptor {

60
src/components/ui/CardList.vue
View File

@ -25,34 +25,21 @@ const $props = defineProps({
</QCard> </QCard>
</template> </template>
<style lang="scss"> <style lang="scss">
body.body--light {
.card-list-body {
.vn-label-value {
.label {
color: $gray;
}
.value {
color: $light-black;
}
}
}
}
.card-list-body { .card-list-body {
.vn-label-value { .vn-label-value {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: 10px; gap: 2%;
width: 100%; width: 50%;
.label { .label {
max-width: 90px; width: 30%;
flex: 1; color: var(--vn-label);
color: $label-color;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.value { .value {
flex: 1; width: 60%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -68,19 +55,10 @@ body.body--light {
font-size: 25px; font-size: 25px;
} }
} }
@media (min-width: 1024px) and (max-width: 1200px) { @media (max-width: $breakpoint-xs) {
.card-list-body { .card-list-body {
.vn-label-value { .vn-label-value {
max-width: 150px; width: 100%;
}
}
}
@media (max-width: 460px) {
.card-list-body {
.vn-label-value {
.value {
max-width: 150px;
}
} }
} }
} }
@ -96,7 +74,7 @@ body.body--light {
justify-content: space-between; justify-content: space-between;
} }
.card:hover { .card:hover {
background-color: $light-gray; background-color: var(--vn-gray);
} }
.title { .title {
color: $primary; color: $primary;
@ -106,30 +84,12 @@ body.body--light {
.list-items { .list-items {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;
display: grid; display: flex;
grid-template-columns: repeat(2, 1fr); flex-wrap: wrap;
row-gap: 10px;
margin-right: 10px;
} }
.actions { .actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
@media screen and (min-width: $breakpoint-lg) {
.list-items {
column-gap: 10vw;
}
}
@media screen and (min-width: $breakpoint-sm) {
.list-items {
column-gap: 5vw;
}
}
@media (max-width: $breakpoint-xs) {
.list-items {
grid-template-columns: 1fr;
grid-gap: 5px;
}
}
</style> </style>

8
src/components/ui/CardSummary.vue
View File

@ -66,14 +66,6 @@ watch(props, async () => {
</template> </template>
<style lang="scss"> <style lang="scss">
body.body--light {
.summary {
.header {
color: $white;
}
}
}
.summary.container { .summary.container {
display: flex; display: flex;
justify-content: center; justify-content: center;

7
src/css/quasar.variables.scss
View File

@ -16,11 +16,6 @@ $primary: #ec8916;
$secondary: #26a69a; $secondary: #26a69a;
$accent: #9c27b0; $accent: #9c27b0;
$white: #fff; $white: #fff;
$black: #000;
$light-black: #4e4c4c;
$gray: gray;
$light-gray: #57565633;
$lighter-gray: #5756560f;
$positive: #21ba45; $positive: #21ba45;
$negative: #c10015; $negative: #c10015;
@ -52,5 +47,3 @@ $dark-shadow-color: #000;
$dark: #292929; $dark: #292929;
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24); $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
$spacing-md: 16px; $spacing-md: 16px;
$label-color: #ffffff99;

2
src/pages/Ticket/TicketList.vue
View File

@ -120,7 +120,7 @@ function viewSummary(id) {
/> />
</template> </template>
<template #actions> <template #actions>
<QBtn icon="preview" @click="viewSummary(row.id)"> <QBtn flat icon="preview" @click="viewSummary(row.id)">
<QTooltip> <QTooltip>
{{ t('components.smartCard.openSummary') }} {{ t('components.smartCard.openSummary') }}
</QTooltip> </QTooltip>