generated from gitea_admin/default
93 lines
1.7 KiB
Vue
93 lines
1.7 KiB
Vue
<template>
|
|
<div class="rounded-card-list">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.rounded-card-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 13px;
|
|
justify-content: flex-start;
|
|
margin-left: 13px;
|
|
}
|
|
@media (max-width: 572px) {
|
|
.rounded-card-list {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
// Taille des cards
|
|
@media (max-width: 599px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 260px;
|
|
flex: 1 1 260px;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
@media (min-width: 600px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 260px;
|
|
flex: 1 1 260px;
|
|
}
|
|
}
|
|
@media (min-width: 700px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 280px;
|
|
flex: 1 1 280px;
|
|
}
|
|
}
|
|
@media (min-width: 800px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 280px;
|
|
flex: 1 1 280px;
|
|
}
|
|
}
|
|
@media (min-width: 900px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 260px;
|
|
flex: 1 1 260px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 280px;
|
|
flex: 1 1 280px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1100px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 270px;
|
|
flex: 1 1 300px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 258px;
|
|
flex: 1 1 258px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1300px) {
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 283px;
|
|
flex: 1 1 283px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
// style appliqué au composant enfant via sa classe
|
|
.rounded-card-list > .rounded-card {
|
|
max-width: 308px;
|
|
flex: 1 1 308px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|