@ozdao/prometheus-framework 0.0.73 → 0.0.75

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. package/dist/configurator/components/layouts/layoutConfigurator.vue.d.ts +2 -0
  2. package/dist/configurator/components/pages/Styles.vue.d.ts +2 -0
  3. package/dist/files.server.js +159 -0
  4. package/dist/files.server.mjs +160 -0
  5. package/dist/modules/community/components/elements/Textarea.vue.d.ts +2 -1
  6. package/package.json +9 -1
  7. package/src/components/Button/Button.vue +3 -3
  8. package/src/components/EmptyState/EmptyState.vue +1 -1
  9. package/src/components/Field/Field.vue +1 -1
  10. package/src/components/FieldPhone/FieldPhone.vue +1 -1
  11. package/src/components/Header/Header.vue +2 -2
  12. package/src/components/Loader/Loader.vue +2 -2
  13. package/src/components/Navigation/Navigation.vue +1 -1
  14. package/src/components/Status/Status.vue +1 -1
  15. package/src/components/Upload/Upload.vue +1 -1
  16. package/src/configurator/components/layouts/layoutConfigurator.vue +97 -0
  17. package/src/configurator/components/pages/Styles.vue +173 -0
  18. package/src/configurator/router/configurator.router.js +16 -0
  19. package/src/modules/auth/components/pages/SignIn.vue +1 -1
  20. package/src/modules/backoffice/components/pages/Profile.vue +1 -1
  21. package/src/modules/community/components/elements/Image.vue +1 -1
  22. package/src/modules/community/components/elements/ImageUpload.vue +1 -1
  23. package/src/modules/community/components/elements/Textarea.vue +35 -17
  24. package/src/modules/community/components/pages/BlogPost.vue +1 -1
  25. package/src/modules/community/components/pages/CreateBlogPost.vue +125 -143
  26. package/src/modules/files/files.client.js +17 -0
  27. package/src/modules/files/files.server.js +13 -0
  28. package/src/modules/orders/components/partials/ShopCart.vue +1 -1
  29. package/src/modules/organizations/components/blocks/CardOrganization.vue +1 -1
  30. package/src/modules/organizations/components/blocks/DepartmentMemberModify.vue +2 -2
  31. package/src/modules/organizations/components/blocks/DepartmentSubDepartmentModify.vue +2 -2
  32. package/src/modules/organizations/components/blocks/EmptyState.vue +1 -1
  33. package/src/modules/organizations/components/pages/OrganizationEdit.vue +1 -1
  34. package/src/modules/organizations/components/sections/PlaceModify.vue +1 -1
  35. package/src/modules/organizations/components/sections/Places.vue +1 -1
  36. package/src/modules/products/components/blocks/ProductCard.vue +1 -1
  37. package/src/modules/products/components/pages/OrganizationCreate.vue +1 -1
  38. package/src/styles/base/all.scss +18 -114
  39. package/src/styles/base/backgrounds.scss +91 -0
  40. package/src/styles/base/hovers.scss +1 -1
  41. package/src/styles/base/positions.scss +8 -8
  42. package/src/styles/base/scrolling.scss +2 -2
  43. package/src/styles/base/shadows.scss +3 -7
  44. package/src/styles/components/button.scss +7 -7
  45. package/src/styles/config.scss +31 -10
  46. package/src/styles/typography.scss +1 -1
  47. package/src/modules/community/components/pages/BlogPost.old.vue +0 -111
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
+ export default _default;
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
2
+ export default _default;
@@ -0,0 +1,159 @@
1
+ "use strict";
2
+ const _commonjsHelpers = require("./_commonjsHelpers-3b53548e.js");
3
+ const require$$0 = require("multer");
4
+ const require$$1 = require("path");
5
+ const require$$2 = require("fs");
6
+ require("jsonwebtoken");
7
+ require("mongodb");
8
+ const multer = require$$0;
9
+ const path = require$$1;
10
+ const fs = require$$2;
11
+ const createMulterStorage = (folderName, publicPath) => {
12
+ return multer.diskStorage({
13
+ destination: function(req, file, cb) {
14
+ let user = {};
15
+ try {
16
+ user = JSON.parse(req.cookies.user);
17
+ } catch (err) {
18
+ return cb(new Error("Unable to parse user from cookies"));
19
+ }
20
+ if (!user._id) {
21
+ return cb(new Error("No user _id found in cookies"));
22
+ }
23
+ const userUploadPath = path.join(publicPath, "users", String(user._id), folderName);
24
+ fs.mkdirSync(userUploadPath, { recursive: true });
25
+ cb(null, userUploadPath);
26
+ },
27
+ filename: function(req, file, cb) {
28
+ cb(null, Date.now() + path.extname(file.originalname));
29
+ }
30
+ });
31
+ };
32
+ const createStorage = (folderName, publicPath) => {
33
+ return multer.diskStorage({
34
+ destination: function(req, file, cb) {
35
+ let user = {};
36
+ try {
37
+ user = JSON.parse(req.cookies.user);
38
+ } catch (err) {
39
+ return cb(new Error("Unable to parse user from cookies"));
40
+ }
41
+ if (!user._id) {
42
+ return cb(new Error("No user _id found in cookies"));
43
+ }
44
+ const userUploadPath = path.join(publicPath, folderName);
45
+ fs.mkdirSync(userUploadPath, { recursive: true });
46
+ cb(null, userUploadPath);
47
+ },
48
+ filename: function(req, file, cb) {
49
+ cb(null, Date.now() + path.extname(file.originalname));
50
+ }
51
+ });
52
+ };
53
+ const controllerFactory$1 = (db, publicPath) => {
54
+ const uploadImageController = async (req, res, next) => {
55
+ const upload = multer({ storage: createMulterStorage("blog", publicPath) }).single("file");
56
+ console.log(req.file);
57
+ upload(req, res, function(err) {
58
+ if (err instanceof multer.MulterError) {
59
+ console.log(err);
60
+ return res.status(500).json(err);
61
+ } else if (err) {
62
+ console.log(err);
63
+ return res.status(500).json(err);
64
+ }
65
+ if (!req.file) {
66
+ return res.status(400).send({ message: "No file uploaded." });
67
+ }
68
+ const user = JSON.parse(req.cookies.user);
69
+ res.status(200).send({
70
+ message: "File uploaded successfully.",
71
+ filename: req.file.filename,
72
+ filepath: `/users/${user._id}/blog/${req.file.filename}`
73
+ });
74
+ });
75
+ };
76
+ const uploadFileController = async (req, res, next) => {
77
+ const folderName = req.query.folderName;
78
+ const upload = multer({ storage: createStorage(folderName, publicPath) }).single("file");
79
+ upload(req, res, function(err) {
80
+ if (err instanceof multer.MulterError) {
81
+ console.log(err);
82
+ return res.status(500).json(err);
83
+ } else if (err) {
84
+ console.log(err);
85
+ return res.status(500).json(err);
86
+ }
87
+ if (!req.file) {
88
+ return res.status(400).send({ message: "No file uploaded." });
89
+ }
90
+ JSON.parse(req.cookies.user);
91
+ res.status(200).send({
92
+ message: "File uploaded successfully.",
93
+ filename: req.file.filename,
94
+ filepath: `/${folderName}/${req.file.filename}`
95
+ });
96
+ });
97
+ };
98
+ const uploadMultipleFile = async (req, res, next) => {
99
+ const folderName = req.query.folderName;
100
+ const upload = multer({ storage: createStorage(folderName) }).array("file");
101
+ upload(req, res, function(err) {
102
+ if (err instanceof multer.MulterError) {
103
+ console.log(err);
104
+ return res.status(500).json(err);
105
+ } else if (err) {
106
+ console.log(err);
107
+ return res.status(500).json(err);
108
+ }
109
+ if (!req.files || req.files.length === 0) {
110
+ return res.status(400).send({ message: "No file uploaded." });
111
+ }
112
+ JSON.parse(req.cookies.user);
113
+ res.status(200).send(req.files.map((file) => ({
114
+ message: "File uploaded successfully.",
115
+ filename: file.filename,
116
+ filepath: `/${folderName}/${file.filename}`
117
+ })));
118
+ });
119
+ };
120
+ return {
121
+ uploadImageController,
122
+ uploadFileController,
123
+ uploadMultipleFile
124
+ };
125
+ };
126
+ var files_controller = controllerFactory$1;
127
+ const controllerFactory = files_controller;
128
+ var files_routes = function(app, db, origins, publicPath) {
129
+ const controller = controllerFactory(db, publicPath);
130
+ app.use(function(req, res, next) {
131
+ const origin = req.headers.origin;
132
+ if (origins.includes(origin)) {
133
+ res.setHeader("Access-Control-Allow-Origin", origin);
134
+ }
135
+ res.header("Access-Control-Allow-Headers", "x-access-token, Origin, Content-Type, Accept");
136
+ next();
137
+ });
138
+ app.post(
139
+ "/api/upload/image",
140
+ controller.uploadImageController
141
+ );
142
+ app.post(
143
+ "/api/upload/file",
144
+ controller.uploadFileController
145
+ );
146
+ app.post(
147
+ "/api/upload/multiple",
148
+ controller.uploadMultipleFile
149
+ );
150
+ };
151
+ const filesController = files_controller;
152
+ const filesRoutes = files_routes;
153
+ var files_server = {
154
+ filesController,
155
+ filesRoutes
156
+ // FileModel
157
+ };
158
+ const files_server$1 = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(files_server);
159
+ module.exports = files_server$1;
@@ -0,0 +1,160 @@
1
+ import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-83b1d755.mjs";
2
+ import require$$0 from "multer";
3
+ import require$$1 from "path";
4
+ import require$$2 from "fs";
5
+ import "jsonwebtoken";
6
+ import "mongodb";
7
+ const multer = require$$0;
8
+ const path = require$$1;
9
+ const fs = require$$2;
10
+ const createMulterStorage = (folderName, publicPath) => {
11
+ return multer.diskStorage({
12
+ destination: function(req, file, cb) {
13
+ let user = {};
14
+ try {
15
+ user = JSON.parse(req.cookies.user);
16
+ } catch (err) {
17
+ return cb(new Error("Unable to parse user from cookies"));
18
+ }
19
+ if (!user._id) {
20
+ return cb(new Error("No user _id found in cookies"));
21
+ }
22
+ const userUploadPath = path.join(publicPath, "users", String(user._id), folderName);
23
+ fs.mkdirSync(userUploadPath, { recursive: true });
24
+ cb(null, userUploadPath);
25
+ },
26
+ filename: function(req, file, cb) {
27
+ cb(null, Date.now() + path.extname(file.originalname));
28
+ }
29
+ });
30
+ };
31
+ const createStorage = (folderName, publicPath) => {
32
+ return multer.diskStorage({
33
+ destination: function(req, file, cb) {
34
+ let user = {};
35
+ try {
36
+ user = JSON.parse(req.cookies.user);
37
+ } catch (err) {
38
+ return cb(new Error("Unable to parse user from cookies"));
39
+ }
40
+ if (!user._id) {
41
+ return cb(new Error("No user _id found in cookies"));
42
+ }
43
+ const userUploadPath = path.join(publicPath, folderName);
44
+ fs.mkdirSync(userUploadPath, { recursive: true });
45
+ cb(null, userUploadPath);
46
+ },
47
+ filename: function(req, file, cb) {
48
+ cb(null, Date.now() + path.extname(file.originalname));
49
+ }
50
+ });
51
+ };
52
+ const controllerFactory$1 = (db, publicPath) => {
53
+ const uploadImageController = async (req, res, next) => {
54
+ const upload = multer({ storage: createMulterStorage("blog", publicPath) }).single("file");
55
+ console.log(req.file);
56
+ upload(req, res, function(err) {
57
+ if (err instanceof multer.MulterError) {
58
+ console.log(err);
59
+ return res.status(500).json(err);
60
+ } else if (err) {
61
+ console.log(err);
62
+ return res.status(500).json(err);
63
+ }
64
+ if (!req.file) {
65
+ return res.status(400).send({ message: "No file uploaded." });
66
+ }
67
+ const user = JSON.parse(req.cookies.user);
68
+ res.status(200).send({
69
+ message: "File uploaded successfully.",
70
+ filename: req.file.filename,
71
+ filepath: `/users/${user._id}/blog/${req.file.filename}`
72
+ });
73
+ });
74
+ };
75
+ const uploadFileController = async (req, res, next) => {
76
+ const folderName = req.query.folderName;
77
+ const upload = multer({ storage: createStorage(folderName, publicPath) }).single("file");
78
+ upload(req, res, function(err) {
79
+ if (err instanceof multer.MulterError) {
80
+ console.log(err);
81
+ return res.status(500).json(err);
82
+ } else if (err) {
83
+ console.log(err);
84
+ return res.status(500).json(err);
85
+ }
86
+ if (!req.file) {
87
+ return res.status(400).send({ message: "No file uploaded." });
88
+ }
89
+ JSON.parse(req.cookies.user);
90
+ res.status(200).send({
91
+ message: "File uploaded successfully.",
92
+ filename: req.file.filename,
93
+ filepath: `/${folderName}/${req.file.filename}`
94
+ });
95
+ });
96
+ };
97
+ const uploadMultipleFile = async (req, res, next) => {
98
+ const folderName = req.query.folderName;
99
+ const upload = multer({ storage: createStorage(folderName) }).array("file");
100
+ upload(req, res, function(err) {
101
+ if (err instanceof multer.MulterError) {
102
+ console.log(err);
103
+ return res.status(500).json(err);
104
+ } else if (err) {
105
+ console.log(err);
106
+ return res.status(500).json(err);
107
+ }
108
+ if (!req.files || req.files.length === 0) {
109
+ return res.status(400).send({ message: "No file uploaded." });
110
+ }
111
+ JSON.parse(req.cookies.user);
112
+ res.status(200).send(req.files.map((file) => ({
113
+ message: "File uploaded successfully.",
114
+ filename: file.filename,
115
+ filepath: `/${folderName}/${file.filename}`
116
+ })));
117
+ });
118
+ };
119
+ return {
120
+ uploadImageController,
121
+ uploadFileController,
122
+ uploadMultipleFile
123
+ };
124
+ };
125
+ var files_controller = controllerFactory$1;
126
+ const controllerFactory = files_controller;
127
+ var files_routes = function(app, db, origins, publicPath) {
128
+ const controller = controllerFactory(db, publicPath);
129
+ app.use(function(req, res, next) {
130
+ const origin = req.headers.origin;
131
+ if (origins.includes(origin)) {
132
+ res.setHeader("Access-Control-Allow-Origin", origin);
133
+ }
134
+ res.header("Access-Control-Allow-Headers", "x-access-token, Origin, Content-Type, Accept");
135
+ next();
136
+ });
137
+ app.post(
138
+ "/api/upload/image",
139
+ controller.uploadImageController
140
+ );
141
+ app.post(
142
+ "/api/upload/file",
143
+ controller.uploadFileController
144
+ );
145
+ app.post(
146
+ "/api/upload/multiple",
147
+ controller.uploadMultipleFile
148
+ );
149
+ };
150
+ const filesController = files_controller;
151
+ const filesRoutes = files_routes;
152
+ var files_server = {
153
+ filesController,
154
+ filesRoutes
155
+ // FileModel
156
+ };
157
+ const files_server$1 = /* @__PURE__ */ getDefaultExportFromCjs(files_server);
158
+ export {
159
+ files_server$1 as default
160
+ };
@@ -9,7 +9,8 @@ declare const _default: import("vue").DefineComponent<{}, {
9
9
  readonly content?: any;
10
10
  readonly prop?: any;
11
11
  readonly obj?: any;
12
+ readonly setFocus?: any;
12
13
  };
13
- $emit: (event: "focus" | "deleteBlock" | "addBlock", ...args: any[]) => void;
14
+ $emit: (event: "focus" | "deleteBlock" | "addBlock" | "updateBlock", ...args: any[]) => void;
14
15
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
15
16
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ozdao/prometheus-framework",
3
- "version": "0.0.73",
3
+ "version": "0.0.75",
4
4
  "description": "Web3 Framework focused on user experience and ease of development.",
5
5
  "author": "OZ DAO <hello@ozdao.dev>",
6
6
  "license": "GPL-3.0-or-later",
@@ -108,6 +108,14 @@
108
108
  "./modules/events/client": {
109
109
  "import": "./dist/events.client.js",
110
110
  "require": "./dist/events.client.cjs"
111
+ },
112
+ "./modules/files/client": {
113
+ "import": "./dist/events.client.js",
114
+ "require": "./dist/events.client.cjs"
115
+ },
116
+ "./modules/files/server": {
117
+ "import": "./dist/server.client.js",
118
+ "require": "./dist/server.client.cjs"
111
119
  }
112
120
  },
113
121
  "browser": {
@@ -51,12 +51,12 @@
51
51
 
52
52
  } catch (err) {
53
53
 
54
- button.value.classList.replace('bg-main', 'bg-light-red');
54
+ button.value.classList.replace('bg-main', 'bg-fourth-nano');
55
55
 
56
56
  error.value = '❌';
57
57
 
58
58
  setTimeout(() => {
59
- button.value.classList.replace('bg-light-red', 'bg-main');
59
+ button.value.classList.replace('bg-fourth-nano', 'bg-main');
60
60
  button.value.style.pointerEvents = 'auto';
61
61
  loading.value = false;
62
62
  finished.value = false;
@@ -132,7 +132,7 @@
132
132
  transition: all 0.33s ease;
133
133
 
134
134
  &:hover {
135
- // background: rgba(var(--second), 1);;
135
+ // background: rgb(var(--second));;
136
136
 
137
137
  opacity: 1;
138
138
 
@@ -3,7 +3,7 @@
3
3
  <h3 class="mn-regular">{{ title }}</h3>
4
4
  <p class="mn-small t-transp p-medium">{{ description }}</p>
5
5
 
6
- <button v-if="action" @click="callback" class="t-white bg-blue w-100 button">
6
+ <button v-if="action" @click="callback" class="t-white bg-second w-100 button">
7
7
  {{ action }}
8
8
  </button>
9
9
  </section>
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="[$attrs.class, { 'bg-light-red': validation }]" class="flex-center flex-nowrap flex">
2
+ <div :class="[$attrs.class, { 'bg-fourth-nano': validation }]" class="flex-center flex-nowrap flex">
3
3
  <!-- Label -->
4
4
  <div v-if="label" class="t-transp mn-r-small">
5
5
  <span>{{label}}</span>
@@ -739,7 +739,7 @@
739
739
 
740
740
  <template>
741
741
  <div
742
- :class="['vue3-reactive-tel-input', { 'bg-light-red': validation }, $attrs.class, rootClass, { disabled: disabled },classes]"
742
+ :class="['vue3-reactive-tel-input', { 'bg-fourth-nano': validation }, $attrs.class, rootClass, { disabled: disabled },classes]"
743
743
  :style="[rootStyle, styles]"
744
744
  ref="rootElement"
745
745
  >
@@ -160,12 +160,12 @@
160
160
 
161
161
  <style lang="scss" scoped>
162
162
  .router-link-exact-active, .router-link-exact-active:visited {
163
- color: rgba(var(--main), 1);
163
+ color: rgb(var(--main));
164
164
  }
165
165
 
166
166
  .location-button {
167
167
  &:hover {
168
- box-shadow: inset 0 0 0 2px var(--main);
168
+ box-shadow: inset 0 0 0 2px rgb(var(--main));
169
169
  }
170
170
  }
171
171
 
@@ -42,7 +42,7 @@ export default {
42
42
  stroke-dasharray: 1, 200;
43
43
  stroke-dashoffset: 0;
44
44
  stroke-linecap: round;
45
- stroke: rgba(var(--main), 1);
45
+ stroke: rgb(var(--main));
46
46
  animation: dash 1.5s ease-in-out infinite;
47
47
  }
48
48
 
@@ -52,7 +52,7 @@ export default {
52
52
  left: 50%;
53
53
  transform: translate(-50%, -50%);
54
54
  font-size: 0.8rem;
55
- color: rgba(var(--main), 1);;
55
+ color: rgb(var(--main));;
56
56
  }
57
57
 
58
58
  .status-text {
@@ -97,7 +97,7 @@ const { t } = useI18n(text)
97
97
  <style lang="scss" scoped>
98
98
 
99
99
  .router-link-active, .router-link-exact-active {
100
- color: rgba(var(--main), 1) !important;
100
+ color: rgb(var(--main)) !important;
101
101
  }
102
102
 
103
103
  </style>
@@ -5,7 +5,7 @@
5
5
  radius-small
6
6
  pd-small
7
7
  t-white
8
- bg-red
8
+ bg-fourth
9
9
  ">
10
10
  <p class="w-100">
11
11
  {{store.globals.state.error.message}}
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="[$attrs.class, { 'bg-light-red': validation }]" class="flex-center flex-nowrap flex">
2
+ <div :class="[$attrs.class, { 'bg-fourth-nano': validation }]" class="flex-center flex-nowrap flex">
3
3
  <!-- Label -->
4
4
  <div v-if="label" class="t-transp mn-r-small">
5
5
  <span>{{label}}</span>
@@ -0,0 +1,97 @@
1
+ <template>
2
+ <section id="account" class="cols-2-1_3 gap-medium pd-big">
3
+ <!-- ---------------------------------------------------------------- -->
4
+ <!-- 02. Page Tabs -->
5
+ <!-- ---------------------------------------------------------------- -->
6
+ <div class="pd-medium menu-tabs">
7
+ 123
8
+ <!-- {{store.auth.state.access.roles}} -->
9
+ <!-- <button v-if="store.auth.state.access.roles.includes('ROLE_ADMIN')" @click="$router.push('/account/community')" :class="{'product-tab-active': $route.path === '/account/community'}" class="mn-small product-tab"> -->
10
+ <!-- Blog -->
11
+ <!-- </button> -->
12
+
13
+ <!-- <button v-if="store.auth.state.access.roles.includes('ROLE_ADMIN')" @click="$router.push('/account/gallery')" :class="{'product-tab-active': $route.path === '/account/gallery'}" class="mn-medium product-tab"> -->
14
+ <!-- Gallery -->
15
+ <!-- </button> -->
16
+ <button @click="logout()" class="w-100 mn-t-semi bg-main button">Выйти</button>
17
+ </div>
18
+
19
+
20
+ <div class="w-100">
21
+ <router-view v-slot="{ Component, route }">
22
+ <transition name="scaleIn" mode="out-in">
23
+ <component ref="page" :key="route.path" :is="Component" />
24
+ </transition>
25
+ </router-view>
26
+ </div>
27
+
28
+ </section>
29
+ </template>
30
+
31
+
32
+ <script setup>
33
+ import { computed, onMounted,reactive,toRefs } from 'vue'
34
+
35
+ import { useRoute,useRouter } from 'vue-router'
36
+ import { useStore } from '@/store';
37
+
38
+ const store = useStore()
39
+
40
+ const route = useRoute()
41
+ const router = useRouter()
42
+
43
+ let data = reactive({currentTab: 'user'})
44
+ let reactiveData = toRefs(data)
45
+ function changeTab (tab) {data.currentTab = tab; console.log(data.currentTab) }
46
+
47
+
48
+ function logout () {
49
+ store.auth.actions.logout()
50
+ router.push({name: 'Sign In'})
51
+ }
52
+
53
+ </script>
54
+
55
+ <style lang="scss">
56
+ #account {
57
+ padding-top: 8rem;
58
+ }
59
+ .menu-tabs {
60
+
61
+ min-width: 16rem;
62
+ height: min-content;
63
+
64
+ border-radius: 1rem;
65
+ background: #f7f7f7;
66
+
67
+ .product-tab {
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: flex-start;
71
+
72
+
73
+
74
+ background: transparent;
75
+
76
+ text-align: left;
77
+
78
+ padding: 0.5rem;
79
+ border-radius: 0.5rem;
80
+ width: 100%;
81
+
82
+ svg { opacity: 0.33; margin-right: 1rem; }
83
+
84
+ &:hover {
85
+ cursor: pointer;
86
+ }
87
+
88
+ &-active {
89
+ color: rgb(var(--main));
90
+ background: white;
91
+
92
+ svg { opacity: 1; path { fill: rgb(var(--main));} }
93
+ }
94
+
95
+ }
96
+ }
97
+ </style>