You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

wizard.vue 902B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="layout">
  3. <!-- Window Buttons -->
  4. <LayoutTopbar />
  5. <!-- Content -->
  6. <div id="layout-content" class="layout__content">
  7. <nuxt />
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. }
  14. </script>
  15. <style lang="scss" scoped>
  16. .layout {
  17. @apply h-full;
  18. display: grid;
  19. grid-template-columns: 100%;
  20. grid-template-rows: 30px 1fr;
  21. grid-template-areas: "topbar" "content";
  22. .layout__topbar {
  23. grid-area: topbar;
  24. }
  25. .layout__content {
  26. @apply relative overflow-hidden overflow-y-auto;
  27. @apply p-6 border-t border-dark-500;
  28. grid-area: content;
  29. height: calc(100vh - 30px);
  30. }
  31. }
  32. </style>
  33. <style lang="scss">
  34. .layout__header {
  35. @apply flex flex-col justify-center items-center;
  36. @apply text-3xl font-semibold mb-8;
  37. height: 80px;
  38. .title {
  39. @apply text-xl text-white;
  40. }
  41. .subtitle {
  42. @apply text-lg;
  43. }
  44. }
  45. </style>