metered subscription page

This commit is contained in:
Čarodej
2021-12-15 10:53:59 +01:00
parent bb7831f717
commit 6cb3503870
5 changed files with 822 additions and 76 deletions
@@ -1,11 +1,13 @@
<template>
<div class="form-label">
<edit-2-icon v-if="!icon" size="22" class="icon text-theme dark-text-theme" />
<settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme dark-text-theme" />
<hard-drive-icon v-if="icon === 'hard-drive'" size="22" class="icon text-theme dark-text-theme" />
<smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme dark-text-theme" />
<key-icon v-if="icon === 'key'" size="22" class="icon text-theme dark-text-theme" />
<b class="label">
<div class="flex items-center mb-8">
<edit-2-icon v-if="!icon" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<file-text-icon v-if="icon === 'file-text'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<settings-icon v-if="icon === 'settings'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<hard-drive-icon v-if="icon === 'hard-drive'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<smartphone-icon v-if="icon === 'smartphone'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<bell-icon v-if="icon === 'bell'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<key-icon v-if="icon === 'key'" size="22" class="mr-3 vue-feather text-theme dark-text-theme" />
<b class="font-bold text-lg">
<slot></slot>
</b>
</div>
@@ -13,6 +15,8 @@
<script>
import {
BellIcon,
FileTextIcon,
HardDriveIcon,
KeyIcon,
Edit2Icon,
@@ -24,6 +28,8 @@
name: 'FormLabel',
props: ['icon'],
components: {
FileTextIcon,
BellIcon,
KeyIcon,
Edit2Icon,
SettingsIcon,
@@ -32,37 +38,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.form-label {
display: flex;
align-items: center;
margin-bottom: 30px;
.icon {
margin-right: 10px;
path, circle, rect, line {
color: inherit;
}
}
.label {
@include font-size(18);
font-weight: 700;
}
}
.dark {
.form-label {
.label {
color: $dark_mode_text_primary;
}
}
}
</style>