cloudron-box/dashboard/src/components/SettingsItem.vue

<script setup>
</script>

<template>
  <div class="settings-item">
    <div class="settings-item-body">
      <slot></slot>
    </div>
    <div class="setting-item-bottom" v-if="$slots.bottom">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<style>

.settings-item {
  border-radius: var(--pankow-border-radius);
  padding: 10px;
  margin-bottom: 10px;
}

.settings-item-body {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.settings-item-body :first-child {
  max-width: 720px;
}

@media (max-width: 576px) {
  .settings-item[wrap] .settings-item-body {
    flex-wrap: wrap;
  }
}

@media (hover: hover) {
  .settings-item:hover {
    background-color: var(--pankow-color-background-hover);
  }
}

.settings-item label {
  margin-top: 0;
}

.setting-item-bottom {
  width: 100%;
  margin-top: 10px;
}

</style>