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

refs 5987 fixed cardList margin and breakpoint
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Jorge Penadés 2023-08-11 14:49:34 +02:00
parent 3d4aca52f8
commit 787844a930
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,7 @@ const $props = defineProps({
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: 10px; gap: 10px;
width: 100%;
.label { .label {
max-width: 90px; max-width: 90px;
flex: 1; flex: 1;
@ -55,6 +56,13 @@ const $props = defineProps({
font-size: 25px; font-size: 25px;
} }
} }
@media (min-width: 1024px) and (max-width: 1200px) {
.card-list-body {
.vn-label-value {
max-width: 150px;
}
}
}
@media (max-width: 460px) { @media (max-width: 460px) {
.card-list-body { .card-list-body {
.vn-label-value { .vn-label-value {
@ -90,12 +98,18 @@ const $props = defineProps({
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
row-gap: 10px; row-gap: 10px;
column-gap: 10vw; column-gap: 10vw;
margin-right: 5px; margin-right: 10px;
} }
.actions { .actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
}
@media (min-width: 1024px) and (max-width: 1100px) {
.list-items {
column-gap: 5vw;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.list-items { .list-items {