AmSettingsCard.vue
118 lines
| 1 | <template> |
| 2 | <div |
| 3 | class="am-settings-card" |
| 4 | :class="{ 'am-settings-card--draggable': props.draggable }" |
| 5 | @click="(evt) => emits('click', evt)" |
| 6 | > |
| 7 | <div v-if="props.draggable" class="am-settings-card__drag-handle"> |
| 8 | <span class="am-icon-drag"></span> |
| 9 | </div> |
| 10 | <div class="am-settings-card__inner am-settings-card__header"> |
| 11 | <span v-if="$slots.header"> |
| 12 | <slot name="header"></slot> |
| 13 | </span> |
| 14 | <span v-if="props.header"> |
| 15 | {{ props.header }} |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="am-settings-card__inner am-settings-card__content"> |
| 19 | <span v-if="!props.content"> |
| 20 | <slot name="default"></slot> |
| 21 | </span> |
| 22 | <span v-if="!$slots.default"> |
| 23 | {{ props.content }} |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
| 27 | </template> |
| 28 | |
| 29 | <script setup> |
| 30 | const props = defineProps({ |
| 31 | header: { |
| 32 | type: String, |
| 33 | default: '', |
| 34 | }, |
| 35 | content: { |
| 36 | type: String, |
| 37 | default: '', |
| 38 | }, |
| 39 | draggable: { |
| 40 | type: Boolean, |
| 41 | default: false, |
| 42 | }, |
| 43 | }) |
| 44 | const emits = defineEmits(['click']) |
| 45 | </script> |
| 46 | |
| 47 | <script> |
| 48 | export default { |
| 49 | name: 'AmSettingsCard', |
| 50 | } |
| 51 | </script> |
| 52 | |
| 53 | <style lang="scss"> |
| 54 | @mixin am-settings-card-block { |
| 55 | .am-settings-card { |
| 56 | padding: 8px 12px; |
| 57 | border-radius: 9px; |
| 58 | border: 1px solid $shade-250; |
| 59 | box-shadow: 0 1px 3px fade-out($shade-250, 0.3); |
| 60 | font-family: var(--am-font-family); |
| 61 | box-sizing: border-box; |
| 62 | cursor: pointer; |
| 63 | |
| 64 | &--draggable { |
| 65 | position: relative; |
| 66 | padding-left: 32px; |
| 67 | } |
| 68 | |
| 69 | * { |
| 70 | font-family: var(--am-font-family); |
| 71 | box-sizing: border-box; |
| 72 | } |
| 73 | |
| 74 | &__drag-handle { |
| 75 | position: absolute; |
| 76 | top: 50%; |
| 77 | left: 6px; |
| 78 | transform: translateY(-50%); |
| 79 | cursor: move; |
| 80 | |
| 81 | .am-icon-drag { |
| 82 | font-size: 24px; |
| 83 | color: $shade-900; |
| 84 | } |
| 85 | } |
| 86 | |
| 87 | &__inner { |
| 88 | margin-bottom: 4px; |
| 89 | |
| 90 | &:last-child { |
| 91 | margin-bottom: 0; |
| 92 | } |
| 93 | } |
| 94 | |
| 95 | &__header { |
| 96 | font-size: 14px; |
| 97 | font-weight: 500; |
| 98 | font-style: normal; |
| 99 | line-height: 1.42857; |
| 100 | color: $shade-900; |
| 101 | } |
| 102 | |
| 103 | &__content { |
| 104 | font-size: 13px; |
| 105 | font-weight: 400; |
| 106 | font-style: normal; |
| 107 | line-height: 1.3846; |
| 108 | color: $shade-700; |
| 109 | } |
| 110 | } |
| 111 | } |
| 112 | |
| 113 | // admin |
| 114 | #amelia-app-backend-new { |
| 115 | @include am-settings-card-block; |
| 116 | } |
| 117 | </style> |
| 118 |