Skip to content
Snippets Groups Projects
Commit 680cf278 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt :koala:
Browse files

feat: improve small-viewport-support in FormTable

parent 1a7e58bd
No related branches found
No related tags found
No related merge requests found
<template>
<div class="form-table tw-grid tw-items-start tw-gap-3">
<div class="form-table">
<slot />
</div>
</template>
......@@ -7,23 +7,27 @@
<script lang="ts" setup>
import { provide } from 'vue'
provide('formGroupClass', 'tw-contents')
</script>
defineOptions({
compatConfig: { MODE: 3 },
})
<script lang="ts">
export default {
compatConfig: {
MODE: 3,
},
}
provide('formGroupClass', 'md:tw-contents')
</script>
<style scoped>
<style lang="postcss" scoped>
.form-table {
grid-template-columns: fit-content(200px) minmax(0, 2fr);
@apply tw-flex tw-flex-col tw-gap-3 md:tw-grid md:tw-items-start;
@media (min-width: theme('screens.md')) {
grid-template-columns: fit-content(200px) minmax(0, 2fr);
}
}
.form-table:deep(.form-group) {
@apply tw-mb-0;
}
.form-table:deep(.form-group-description) {
@apply tw-flex-col;
@apply md:tw-flex-col md:!tw-mb-0 tw-justify-self-start;
}
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment