@bagelink/vue 0.0.239 → 0.0.241

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/ModalForm.vue.d.ts.map +1 -1
  2. package/dist/components/form/BglField.vue.d.ts.map +1 -1
  3. package/dist/components/form/BglForm.vue.d.ts.map +1 -1
  4. package/dist/index.cjs +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/style.css +36 -17
  7. package/package.json +1 -1
  8. package/src/components/ModalForm.vue +33 -6
  9. package/src/components/form/BglField.vue +21 -6
  10. package/src/components/form/BglForm.vue +32 -6
  11. package/src/plugins/modal.ts +1 -1
  12. package/src/styles/modal.css +26 -14
  13. package/src/styles/theme.css +9 -1
package/dist/components/ModalForm.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/ModalForm.vue"],"names":[],"mappings":"AAYA;AAEA,OAAO,EAGK,KAAK,cAAc,EAAE,KAAK,UAAU,EAC/C,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;gDA6NC,GAAG,KAAK,QAAQ,IAAI,CAAC;;;0CAE3B,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;gDAFT,GAAG,KAAK,QAAQ,IAAI,CAAC;;;0CAE3B,MAAM,KAAK,IAAI;;;AAfjC,wBAmBG"}
1
+ {"version":3,"file":"ModalForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/ModalForm.vue"],"names":[],"mappings":"AAuCA;AAEA,OAAO,EAGK,KAAK,cAAc,EAAE,KAAK,UAAU,EAC/C,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;gDA6NC,GAAG,KAAK,QAAQ,IAAI,CAAC;;;0CAE3B,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;gDAFT,GAAG,KAAK,QAAQ,IAAI,CAAC;;;0CAE3B,MAAM,KAAK,IAAI;;;AAfjC,wBAmBG"}
package/dist/components/form/BglField.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAUA;AAEA,OAAO,EACN,KAAK,KAAK,EACV,MAAM,eAAe,CAAC;;WAuHf,KAAK;gBACA,OAAO,MAAM,EAAE,GAAG,CAAC;;;;;;WADxB,KAAK;gBACA,OAAO,MAAM,EAAE,GAAG,CAAC;;;;;;gBAAnB,OAAO,MAAM,EAAE,GAAG,CAAC;;AAPhC,wBAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
1
+ {"version":3,"file":"BglField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglField.vue"],"names":[],"mappings":"AAyBA;AAEA,OAAO,EACN,KAAK,KAAK,EACV,MAAM,eAAe,CAAC;;WAuHf,KAAK;gBACA,OAAO,MAAM,EAAE,GAAG,CAAC;;;;;;WADxB,KAAK;gBACA,OAAO,MAAM,EAAE,GAAG,CAAC;;;;;;gBAAnB,OAAO,MAAM,EAAE,GAAG,CAAC;;AAPhC,wBAUG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
package/dist/components/form/BglForm.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BglForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglForm.vue"],"names":[],"mappings":"AAYA;AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoOpD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"BglForm.vue.d.ts","sourceRoot":"","sources":["../../../src/components/form/BglForm.vue"],"names":[],"mappings":"AAsCA;AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoOpD,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AACxD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
package/dist/index.cjs CHANGED
@@ -14992,7 +14992,7 @@ const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
14992
14992
  };
14993
14993
  }
14994
14994
  });
14995
- const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-6b6bbb1b"]]);
14995
+ const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-766bb68f"]]);
14996
14996
  const _hoisted_1$D = { class: "accordion-item" };
14997
14997
  const _hoisted_2$x = {
14998
14998
  key: 0,
package/dist/index.mjs CHANGED
@@ -14990,7 +14990,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
14990
14990
  };
14991
14991
  }
14992
14992
  });
14993
- const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-6b6bbb1b"]]);
14993
+ const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-766bb68f"]]);
14994
14994
  const _hoisted_1$D = { class: "accordion-item" };
14995
14995
  const _hoisted_2$x = {
14996
14996
  key: 0,
package/dist/style.css CHANGED
@@ -434,23 +434,28 @@
434
434
  bottom: 0;
435
435
  background-color: rgba(0, 0, 0, 0.7);
436
436
  z-index: 999;
437
- display: flex;
438
- justify-content: center;
439
- align-items: center;
440
437
  pointer-events: none;
441
438
  opacity: 0;
442
439
  transition: all ease-in-out 0.3s;
440
+ max-height: 100vh;
443
441
  overflow: auto;
442
+ margin: 0 auto;
443
+ width: 100%;
444
+ text-align: center;
445
+ display: grid;
446
+ align-items: center;
444
447
  }
445
448
 
449
+
446
450
  .modal {
447
451
  width: 96%;
448
452
  max-width: 680px;
449
453
  transform: scale(0.5);
450
454
  opacity: 0;
451
455
  transition: all ease-in-out 0.15s;
452
- margin-top: 6rem;
453
- margin-bottom: 4rem;
456
+ margin-left: auto;
457
+ margin-right: auto;
458
+ height: fit-content;
454
459
  }
455
460
 
456
461
  .small-modal .modal {
@@ -465,7 +470,7 @@
465
470
  position: -webkit-sticky;
466
471
  position: sticky;
467
472
  padding-top: 1rem;
468
- top: -2rem;
473
+ top: 0rem;
469
474
  z-index: 3;
470
475
  background: var(--bgl-white);
471
476
  }
@@ -478,13 +483,17 @@
478
483
  inset-inline-end: -600px;
479
484
  transform: scale(1);
480
485
  opacity: 1;
481
- position: fixed;
482
- top: 20px;
483
- bottom: 20px;
486
+ /* position: fixed; */
487
+ /* top: 20px; */
488
+ /* bottom: 20px; */
484
489
  max-width: 600px;
485
490
  width: 90%;
486
- margin-top: 0;
487
- margin-bottom: 0;
491
+ margin-top: 20px;
492
+ margin-bottom: 20px;
493
+ margin-inline-start: auto;
494
+ margin-inline-end: 20px;
495
+ min-height: calc(100vh - 40px);
496
+
488
497
  }
489
498
 
490
499
  .is-active .modal {
@@ -504,6 +513,7 @@
504
513
 
505
514
  .is-side.bg-dark.is-active {
506
515
  opacity: 1;
516
+ align-items: stretch;
507
517
  }
508
518
 
509
519
  .is-side.is-active .modal {
@@ -512,20 +522,21 @@
512
522
 
513
523
  @media screen and (max-width: 910px) {
514
524
  .tool-bar {
515
- margin: -2rem 0 1rem;
525
+ margin: -1rem 0rem 1rem;
526
+ padding-bottom: 1rem;
516
527
  align-items: center;
517
528
  }
518
529
 
519
530
  .is-active.is-side .modal {
520
- inset-inline-end: 5%;
531
+ margin-inline-end: 5%;
532
+ margin-inline-start: 5%;
521
533
  }
522
534
  }
523
-
524
- .modal-title[data-v-6b6bbb1b] {
535
+ .modal-title[data-v-766bb68f] {
525
536
  margin-top: 0.5rem;
526
537
  }
527
538
  @media screen and (max-width: 910px) {
528
- .modal-title[data-v-6b6bbb1b] {
539
+ .modal-title[data-v-766bb68f] {
529
540
  margin-top: 1rem;
530
541
  }
531
542
  }
@@ -2859,10 +2870,17 @@ h6 {}
2859
2870
  font-weight: 600;
2860
2871
  font-size: 20px;
2861
2872
  margin-top: 0.5rem;
2862
- margin-bottom: 20px;
2873
+ margin-bottom: 0 !important;
2863
2874
  width: 100%;
2864
2875
  -webkit-padding-end: 40px;
2865
2876
  padding-inline-end: 40px;
2877
+ line-height: 2;
2878
+ display: -webkit-box;
2879
+ max-width: 100%;
2880
+ -webkit-line-clamp: 1;
2881
+ -webkit-box-orient: vertical;
2882
+ overflow: hidden;
2883
+ text-overflow: ellipsis;
2866
2884
  }
2867
2885
  .modal-footer {
2868
2886
  gap: 1rem;
@@ -2875,6 +2893,7 @@ h6 {}
2875
2893
  display: flex;
2876
2894
  justify-content: space-between;
2877
2895
  align-items: center;
2896
+ gap: 0;
2878
2897
  }
2879
2898
  * {
2880
2899
  box-sizing: border-box;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.239",
4
+ "version": "0.0.241",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/components/ModalForm.vue CHANGED
@@ -1,12 +1,39 @@
1
1
  <template>
2
- <Modal :side="side" ref="modal" :dismissable="dismissable" :title="title">
3
- <BagelForm v-model="formData" :schema="computedFormSchema" />
4
- <template #footer v-if="onDelete || onSubmit">
2
+ <Modal
3
+ :side="side"
4
+ ref="modal"
5
+ :dismissable="dismissable"
6
+ :title="title"
7
+ >
8
+ <BagelForm
9
+ v-model="formData"
10
+ :schema="computedFormSchema"
11
+ />
12
+ <template
13
+ #footer
14
+ v-if="onDelete || onSubmit"
15
+ >
5
16
  <div>
6
- <Btn thin flat value="Cancel" @click="closeModal()" />
7
- <Btn thin icon="delete" v-if="onDelete" flat value="Delete" @click="runDelete()" color="red" />
17
+ <Btn
18
+ thin
19
+ flat
20
+ value="Cancel"
21
+ @click="closeModal()"
22
+ />
23
+ <Btn
24
+ thin
25
+ icon="delete"
26
+ v-if="onDelete"
27
+ flat
28
+ value="Delete"
29
+ @click="runDelete()"
30
+ color="red"
31
+ />
8
32
  </div>
9
- <Btn value="Submit" @click="runSubmit()" />
33
+ <Btn
34
+ value="Submit"
35
+ @click="runSubmit()"
36
+ />
10
37
  </template>
11
38
  </Modal>
12
39
  </template>
package/src/components/form/BglField.vue CHANGED
@@ -1,11 +1,26 @@
1
1
  <template>
2
- <component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
3
- :class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="iffer(field, fieldData)" :is="is"
4
- :label="field.label" :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
5
- :defaultValue="field.defaultValue" :options="field.options" :hint="field.hint"
6
- @update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)">
2
+ <component
3
+ :required="field.required"
4
+ v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
5
+ :class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
6
+ v-if="iffer(field, fieldData)"
7
+ :is="is"
8
+ :label="field.label"
9
+ :id="field.id"
10
+ :placeholder="field.placeholder || field.label"
11
+ v-model="fieldData"
12
+ :defaultValue="field.defaultValue"
13
+ :options="field.options"
14
+ :hint="field.hint"
15
+ @update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)"
16
+ >
7
17
  {{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
8
- <BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
18
+ <BglField
19
+ v-model="formData"
20
+ v-for="(child, ii) in field.children"
21
+ :key="child.id || ii"
22
+ :field="child"
23
+ />
9
24
  </component>
10
25
  </template>
11
26
 
package/src/components/form/BglForm.vue CHANGED
@@ -1,10 +1,36 @@
1
1
  <template>
2
- <component :is="id?'div':'form'" ref="form" @submit.prevent="runSubmit">
3
- <Title tag="h4" :label="label" v-if="label" />
4
- <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
5
- <Btn class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete" color="red"
6
- thin />
7
- <Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
2
+ <component
3
+ :is="id?'div':'form'"
4
+ ref="form"
5
+ @submit.prevent="runSubmit"
6
+ >
7
+ <Title
8
+ tag="h4"
9
+ :label="label"
10
+ v-if="label"
11
+ />
12
+ <BglField
13
+ v-for="(field, i) in schema"
14
+ :key="field.id || `${i}p`"
15
+ :field="field"
16
+ v-model="data"
17
+ />
18
+ <Btn
19
+ class="del-top"
20
+ v-if="data?.id && onDelete"
21
+ @click="runDelete"
22
+ value="Delete"
23
+ flat
24
+ icon="delete"
25
+ color="red"
26
+ thin
27
+ />
28
+ <Btn
29
+ v-if="!$slots.submit && onSubmit"
30
+ value="Submit"
31
+ type="submit"
32
+ thin
33
+ />
8
34
  <div v-else>
9
35
  <slot name="submit" />
10
36
  </div>
package/src/plugins/modal.ts CHANGED
@@ -86,7 +86,7 @@ export const ModalPlugin: Plugin = {
86
86
  return modalStack.map((modal, index) => {
87
87
  const renderComponent = modal.modalType === 'modalForm' ? ModalForm : Modal;
88
88
  return h(
89
- renderComponent as any,
89
+ renderComponent,
90
90
  {
91
91
  ...modal.modalOptions,
92
92
  'onUpdate:isModalVisible': () => hideModal(index),
package/src/styles/modal.css CHANGED
@@ -6,23 +6,28 @@
6
6
  bottom: 0;
7
7
  background-color: rgba(0, 0, 0, 0.7);
8
8
  z-index: 999;
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
9
  pointer-events: none;
13
10
  opacity: 0;
14
11
  transition: all ease-in-out 0.3s;
12
+ max-height: 100vh;
15
13
  overflow: auto;
14
+ margin: 0 auto;
15
+ width: 100%;
16
+ text-align: center;
17
+ display: grid;
18
+ align-items: center;
16
19
  }
17
20
 
21
+
18
22
  .modal {
19
23
  width: 96%;
20
24
  max-width: 680px;
21
25
  transform: scale(0.5);
22
26
  opacity: 0;
23
27
  transition: all ease-in-out 0.15s;
24
- margin-top: 6rem;
25
- margin-bottom: 4rem;
28
+ margin-left: auto;
29
+ margin-right: auto;
30
+ height: fit-content;
26
31
  }
27
32
 
28
33
  .small-modal .modal {
@@ -37,7 +42,7 @@
37
42
  position: -webkit-sticky;
38
43
  position: sticky;
39
44
  padding-top: 1rem;
40
- top: -2rem;
45
+ top: 0rem;
41
46
  z-index: 3;
42
47
  background: var(--bgl-white);
43
48
  }
@@ -50,13 +55,17 @@
50
55
  inset-inline-end: -600px;
51
56
  transform: scale(1);
52
57
  opacity: 1;
53
- position: fixed;
54
- top: 20px;
55
- bottom: 20px;
58
+ /* position: fixed; */
59
+ /* top: 20px; */
60
+ /* bottom: 20px; */
56
61
  max-width: 600px;
57
62
  width: 90%;
58
- margin-top: 0;
59
- margin-bottom: 0;
63
+ margin-top: 20px;
64
+ margin-bottom: 20px;
65
+ margin-inline-start: auto;
66
+ margin-inline-end: 20px;
67
+ min-height: calc(100vh - 40px);
68
+
60
69
  }
61
70
 
62
71
  .is-active .modal {
@@ -76,6 +85,7 @@
76
85
 
77
86
  .is-side.bg-dark.is-active {
78
87
  opacity: 1;
88
+ align-items: stretch;
79
89
  }
80
90
 
81
91
  .is-side.is-active .modal {
@@ -84,11 +94,13 @@
84
94
 
85
95
  @media screen and (max-width: 910px) {
86
96
  .tool-bar {
87
- margin: -2rem 0 1rem;
97
+ margin: -1rem 0rem 1rem;
98
+ padding-bottom: 1rem;
88
99
  align-items: center;
89
100
  }
90
101
 
91
102
  .is-active.is-side .modal {
92
- inset-inline-end: 5%;
103
+ margin-inline-end: 5%;
104
+ margin-inline-start: 5%;
93
105
  }
94
- }
106
+ }
package/src/styles/theme.css CHANGED
@@ -87,10 +87,17 @@
87
87
  font-weight: 600;
88
88
  font-size: 20px;
89
89
  margin-top: 0.5rem;
90
- margin-bottom: 20px;
90
+ margin-bottom: 0 !important;
91
91
  width: 100%;
92
92
  -webkit-padding-end: 40px;
93
93
  padding-inline-end: 40px;
94
+ line-height: 2;
95
+ display: -webkit-box;
96
+ max-width: 100%;
97
+ -webkit-line-clamp: 1;
98
+ -webkit-box-orient: vertical;
99
+ overflow: hidden;
100
+ text-overflow: ellipsis;
94
101
  }
95
102
 
96
103
  .modal-footer {
@@ -105,6 +112,7 @@
105
112
  display: flex;
106
113
  justify-content: space-between;
107
114
  align-items: center;
115
+ gap: 0;
108
116
  }
109
117
 
110
118
  * {