@bagelink/vue 0.0.435 → 0.0.437

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 (5) hide show
  1. package/dist/style.css +124 -83
  2. package/package.json +1 -1
  3. package/src/styles/bagel.css +60 -8
  4. package/src/styles/modal.css +74 -75
  5. package/src/styles/scrollbar.css +1 -2
package/dist/style.css CHANGED
@@ -376,124 +376,122 @@ a[data-v-d09a83c5] {
376
376
  filter: brightness(80%);
377
377
  }
378
378
  .bg-dark {
379
- position: fixed;
380
- top: 0;
381
- right: 0;
382
- left: 0;
383
- bottom: 0;
384
- background-color: rgba(0, 0, 0, 0.7);
385
- z-index: 999;
386
- pointer-events: none;
387
- opacity: 0;
388
- transition: all ease-in-out 0.3s;
389
- max-height: 100vh;
390
- overflow: auto;
391
- margin: 0 auto;
392
- width: 100%;
393
- display: grid;
394
- align-items: center;
379
+ position: fixed;
380
+ top: 0;
381
+ right: 0;
382
+ left: 0;
383
+ bottom: 0;
384
+ background-color: rgba(0, 0, 0, 0.7);
385
+ z-index: 999;
386
+ pointer-events: none;
387
+ opacity: 0;
388
+ transition: all ease-in-out 0.3s;
389
+ max-height: 100vh;
390
+ overflow: scroll;
391
+ margin: 0 auto;
392
+ width: 100%;
393
+ display: grid;
394
+ align-items: center;
395
+ overflow-x: hidden;
395
396
  }
396
397
 
398
+
397
399
  .bg-lignt {
398
- background-color: var(--bgl-white);
400
+ background-color: var(--bgl-white);
399
401
  }
400
402
 
401
403
  .modal {
402
- width: 96%;
403
- max-width: 720px;
404
- /* transform: scale(0.5); */
405
- /* opacity: 0; */
406
- transition: all ease-in-out 0.18s;
407
- margin-left: auto;
408
- margin-right: auto;
409
- height: fit-content;
404
+ width: 96%;
405
+ max-width: 720px;
406
+ /* transform: scale(0.5); */
407
+ /* opacity: 0; */
408
+ transition: all ease-in-out 0.18s;
409
+ margin-left: auto;
410
+ margin-right: auto;
411
+ height: fit-content;
410
412
  }
411
413
 
412
414
  .small-modal .modal {
413
- max-width: 300px;
414
- text-align: center;
415
+ max-width: 300px;
416
+ text-align: center;
415
417
  }
416
418
 
417
419
  .tool-bar {
418
- margin: -2rem -1rem 1rem;
419
- display: flex;
420
- justify-content: space-between;
421
- position: -webkit-sticky;
422
- position: sticky;
423
- padding-top: 1rem;
424
- top: 0rem;
425
- z-index: 3;
426
- background: var(--bgl-white);
420
+ margin: -2rem -1rem 1rem;
421
+ display: flex;
422
+ justify-content: space-between;
423
+ position: -webkit-sticky;
424
+ position: sticky;
425
+ padding-top: 1rem;
426
+ top: 0rem;
427
+ z-index: 3;
428
+ background: var(--bgl-white);
427
429
  }
428
430
 
429
431
  .modal-size {
430
- cursor: pointer;
432
+ cursor: pointer;
431
433
  }
432
434
 
433
435
  .is-side .modal {
434
- inset-inline-end: -1720px;
435
- transform: scale(1);
436
- opacity: 1;
437
- /* position: fixed; */
438
- /* top: 20px; */
439
- /* bottom: 20px; */
440
- max-width: 600px;
441
- width: 90%;
442
- margin-top: 20px;
443
- margin-bottom: 20px;
444
- margin-inline-start: auto;
445
- margin-inline-end: 20px;
446
- min-height: calc(100vh - 40px);
447
- transform: translateX(100%);
436
+ inset-inline-end: -1720px;
437
+ transform: scale(1);
438
+ opacity: 1;
439
+ max-width: 600px;
440
+ width: 90%;
441
+ margin-top: 20px;
442
+ margin-bottom: 20px;
443
+ margin-inline-start: auto;
444
+ margin-inline-end: 20px;
445
+ min-height: calc(100vh - 40px);
446
+ transform: translateX(100%);
448
447
  }
449
448
 
450
449
  .is-active .modal {
451
- transform: scale(1);
452
- opacity: 1;
453
- box-shadow: 6px 6px 20px 20px #0000001c;
450
+ transform: scale(1);
451
+ opacity: 1;
452
+ box-shadow: 6px 6px 20px 20px #0000001c;
454
453
  }
455
454
 
456
455
  .bg-lignt .modal {
457
- transform: scale(1);
458
- border: 1px solid var(--border-color);
456
+ transform: scale(1);
457
+ border: 1px solid var(--border-color);
459
458
  }
460
459
 
461
460
  .bg-lignt.is-active .modal {
462
- box-shadow: none;
461
+ box-shadow: none;
463
462
  }
464
463
 
465
464
  .is-active.is-side .modal {
466
- inset-inline-end: 0px;
467
- transform: translateX(0%);
465
+ inset-inline-end: 0px;
466
+ transform: translateX(0%);
468
467
  }
469
468
 
470
469
  .bg-dark.is-active {
471
- opacity: 1;
472
- pointer-events: all;
470
+ opacity: 1;
471
+ pointer-events: all;
473
472
  }
474
473
 
475
474
  .is-side.bg-dark.is-active {
476
- opacity: 1;
477
- align-items: stretch;
475
+ opacity: 1;
476
+ align-items: stretch;
478
477
  }
479
478
 
480
479
  .is-side.is-active .modal {
481
- pointer-events: all;
480
+ pointer-events: all;
482
481
  }
483
482
 
484
483
  @media screen and (max-width: 910px) {
485
- .tool-bar {
486
- margin: -1rem 0rem 1rem;
487
- padding-bottom: 1rem;
488
- align-items: center;
489
- }
484
+ .tool-bar {
485
+ margin: -1rem 0rem 1rem;
486
+ padding-bottom: 1rem;
487
+ align-items: center;
488
+ }
490
489
 
491
- .is-active.is-side .modal {
492
- margin-inline-end: 5%;
493
- margin-inline-start: 5%;
494
- }
490
+ .is-active.is-side .modal {
491
+ margin-inline-end: 5%;
492
+ margin-inline-start: 5%;
493
+ }
495
494
  }
496
-
497
495
  .modal-title {
498
496
  text-align: center;
499
497
  font-weight: 600;
@@ -5589,8 +5587,7 @@ select {
5589
5587
  height: 0.5rem;
5590
5588
  }
5591
5589
  ::-webkit-scrollbar-track {
5592
- /* border-left: 1px solid var(--bgl-gray-light); */
5593
- /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
5590
+ /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
5594
5591
  }
5595
5592
  ::-webkit-scrollbar-thumb {
5596
5593
  background-color: var(--bgl-gray);
@@ -6295,19 +6292,63 @@ select {
6295
6292
  --transition: all 0.2s cubic-bezier(0.1, 0.5, 0.33, 1);
6296
6293
  --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
6297
6294
  }
6298
- body {
6299
- max-width: 100vw;
6300
- height: 100vh;
6301
- padding: 0;
6302
- margin: 0;
6303
- }
6304
6295
  .grid>* {
6305
6296
  min-height: 0;
6306
6297
  }
6307
6298
  * {
6308
6299
  box-sizing: border-box;
6309
6300
  }
6310
- @media (min-width: 992px) {}
6301
+ html {
6302
+ -ms-text-size-adjust: 100%;
6303
+ -webkit-text-size-adjust: 100%;
6304
+ height: 100%;
6305
+ background-attachment: scroll;
6306
+ }
6307
+ body {
6308
+ margin: 0;
6309
+ min-height: 100%;
6310
+ background-color: var(--bgl-bg);
6311
+ font-family: var(--bgl-font);
6312
+ font-size: 18px;
6313
+ font-weight: 400;
6314
+ line-height: 1.65;
6315
+ width: auto;
6316
+ height: auto;
6317
+ }
6318
+ a {
6319
+ background-color: transparent;
6320
+ cursor: pointer;
6321
+ display: inline-block;
6322
+ color: inherit;
6323
+ }
6324
+ a:active,
6325
+ a:hover {
6326
+ outline: 0;
6327
+ }
6328
+ b,
6329
+ strong {
6330
+ font-weight: bold;
6331
+ }
6332
+ hr {
6333
+ box-sizing: content-box;
6334
+ }
6335
+ img,
6336
+ video,
6337
+ canvas,
6338
+ audio,
6339
+ iframe,
6340
+ embed,
6341
+ object {
6342
+ max-width: 100%;
6343
+ vertical-align: middle;
6344
+ border: 0;
6345
+ }
6346
+ input,
6347
+ button,
6348
+ textarea,
6349
+ select {
6350
+ font: inherit;
6351
+ }
6311
6352
  @media screen and (max-width: 910px) {
6312
6353
 
6313
6354
  body {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.435",
4
+ "version": "0.0.437",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
package/src/styles/bagel.css CHANGED
@@ -16,13 +16,6 @@
16
16
  --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
17
17
  }
18
18
 
19
- body {
20
- max-width: 100vw;
21
- height: 100vh;
22
- padding: 0;
23
- margin: 0;
24
- }
25
-
26
19
  .grid>* {
27
20
  min-height: 0;
28
21
  }
@@ -31,7 +24,66 @@ body {
31
24
  box-sizing: border-box;
32
25
  }
33
26
 
34
- @media (min-width: 992px) {}
27
+
28
+ html {
29
+ -ms-text-size-adjust: 100%;
30
+ -webkit-text-size-adjust: 100%;
31
+ height: 100%;
32
+ background-attachment: scroll;
33
+ }
34
+
35
+ body {
36
+ margin: 0;
37
+ min-height: 100%;
38
+ background-color: var(--bgl-bg);
39
+ font-family: var(--bgl-font);
40
+ font-size: 18px;
41
+ font-weight: 400;
42
+ line-height: 1.65;
43
+ width: auto;
44
+ height: auto;
45
+ }
46
+
47
+ a {
48
+ background-color: transparent;
49
+ cursor: pointer;
50
+ display: inline-block;
51
+ color: inherit;
52
+ }
53
+
54
+ a:active,
55
+ a:hover {
56
+ outline: 0;
57
+ }
58
+
59
+ b,
60
+ strong {
61
+ font-weight: bold;
62
+ }
63
+
64
+ hr {
65
+ box-sizing: content-box;
66
+ }
67
+
68
+ img,
69
+ video,
70
+ canvas,
71
+ audio,
72
+ iframe,
73
+ embed,
74
+ object {
75
+ max-width: 100%;
76
+ vertical-align: middle;
77
+ border: 0;
78
+ }
79
+
80
+ input,
81
+ button,
82
+ textarea,
83
+ select {
84
+ font: inherit;
85
+ }
86
+
35
87
 
36
88
  @media screen and (max-width: 910px) {
37
89
 
package/src/styles/modal.css CHANGED
@@ -1,118 +1,117 @@
1
1
  .bg-dark {
2
- position: fixed;
3
- top: 0;
4
- right: 0;
5
- left: 0;
6
- bottom: 0;
7
- background-color: rgba(0, 0, 0, 0.7);
8
- z-index: 999;
9
- pointer-events: none;
10
- opacity: 0;
11
- transition: all ease-in-out 0.3s;
12
- max-height: 100vh;
13
- overflow: auto;
14
- margin: 0 auto;
15
- width: 100%;
16
- display: grid;
17
- align-items: center;
2
+ position: fixed;
3
+ top: 0;
4
+ right: 0;
5
+ left: 0;
6
+ bottom: 0;
7
+ background-color: rgba(0, 0, 0, 0.7);
8
+ z-index: 999;
9
+ pointer-events: none;
10
+ opacity: 0;
11
+ transition: all ease-in-out 0.3s;
12
+ max-height: 100vh;
13
+ overflow: scroll;
14
+ margin: 0 auto;
15
+ width: 100%;
16
+ display: grid;
17
+ align-items: center;
18
+ overflow-x: hidden;
18
19
  }
19
20
 
21
+
20
22
  .bg-lignt {
21
- background-color: var(--bgl-white);
23
+ background-color: var(--bgl-white);
22
24
  }
23
25
 
24
26
  .modal {
25
- width: 96%;
26
- max-width: 720px;
27
- /* transform: scale(0.5); */
28
- /* opacity: 0; */
29
- transition: all ease-in-out 0.18s;
30
- margin-left: auto;
31
- margin-right: auto;
32
- height: fit-content;
27
+ width: 96%;
28
+ max-width: 720px;
29
+ /* transform: scale(0.5); */
30
+ /* opacity: 0; */
31
+ transition: all ease-in-out 0.18s;
32
+ margin-left: auto;
33
+ margin-right: auto;
34
+ height: fit-content;
33
35
  }
34
36
 
35
37
  .small-modal .modal {
36
- max-width: 300px;
37
- text-align: center;
38
+ max-width: 300px;
39
+ text-align: center;
38
40
  }
39
41
 
40
42
  .tool-bar {
41
- margin: -2rem -1rem 1rem;
42
- display: flex;
43
- justify-content: space-between;
44
- position: -webkit-sticky;
45
- position: sticky;
46
- padding-top: 1rem;
47
- top: 0rem;
48
- z-index: 3;
49
- background: var(--bgl-white);
43
+ margin: -2rem -1rem 1rem;
44
+ display: flex;
45
+ justify-content: space-between;
46
+ position: -webkit-sticky;
47
+ position: sticky;
48
+ padding-top: 1rem;
49
+ top: 0rem;
50
+ z-index: 3;
51
+ background: var(--bgl-white);
50
52
  }
51
53
 
52
54
  .modal-size {
53
- cursor: pointer;
55
+ cursor: pointer;
54
56
  }
55
57
 
56
58
  .is-side .modal {
57
- inset-inline-end: -1720px;
58
- transform: scale(1);
59
- opacity: 1;
60
- /* position: fixed; */
61
- /* top: 20px; */
62
- /* bottom: 20px; */
63
- max-width: 600px;
64
- width: 90%;
65
- margin-top: 20px;
66
- margin-bottom: 20px;
67
- margin-inline-start: auto;
68
- margin-inline-end: 20px;
69
- min-height: calc(100vh - 40px);
70
- transform: translateX(100%);
59
+ inset-inline-end: -1720px;
60
+ transform: scale(1);
61
+ opacity: 1;
62
+ max-width: 600px;
63
+ width: 90%;
64
+ margin-top: 20px;
65
+ margin-bottom: 20px;
66
+ margin-inline-start: auto;
67
+ margin-inline-end: 20px;
68
+ min-height: calc(100vh - 40px);
69
+ transform: translateX(100%);
71
70
  }
72
71
 
73
72
  .is-active .modal {
74
- transform: scale(1);
75
- opacity: 1;
76
- box-shadow: 6px 6px 20px 20px #0000001c;
73
+ transform: scale(1);
74
+ opacity: 1;
75
+ box-shadow: 6px 6px 20px 20px #0000001c;
77
76
  }
78
77
 
79
78
  .bg-lignt .modal {
80
- transform: scale(1);
81
- border: 1px solid var(--border-color);
79
+ transform: scale(1);
80
+ border: 1px solid var(--border-color);
82
81
  }
83
82
 
84
83
  .bg-lignt.is-active .modal {
85
- box-shadow: none;
84
+ box-shadow: none;
86
85
  }
87
86
 
88
87
  .is-active.is-side .modal {
89
- inset-inline-end: 0px;
90
- transform: translateX(0%);
88
+ inset-inline-end: 0px;
89
+ transform: translateX(0%);
91
90
  }
92
91
 
93
92
  .bg-dark.is-active {
94
- opacity: 1;
95
- pointer-events: all;
93
+ opacity: 1;
94
+ pointer-events: all;
96
95
  }
97
96
 
98
97
  .is-side.bg-dark.is-active {
99
- opacity: 1;
100
- align-items: stretch;
98
+ opacity: 1;
99
+ align-items: stretch;
101
100
  }
102
101
 
103
102
  .is-side.is-active .modal {
104
- pointer-events: all;
103
+ pointer-events: all;
105
104
  }
106
105
 
107
106
  @media screen and (max-width: 910px) {
108
- .tool-bar {
109
- margin: -1rem 0rem 1rem;
110
- padding-bottom: 1rem;
111
- align-items: center;
112
- }
113
-
114
- .is-active.is-side .modal {
115
- margin-inline-end: 5%;
116
- margin-inline-start: 5%;
117
- }
118
- }
107
+ .tool-bar {
108
+ margin: -1rem 0rem 1rem;
109
+ padding-bottom: 1rem;
110
+ align-items: center;
111
+ }
112
+
113
+ .is-active.is-side .modal {
114
+ margin-inline-end: 5%;
115
+ margin-inline-start: 5%;
116
+ }
117
+ }
package/src/styles/scrollbar.css CHANGED
@@ -4,8 +4,7 @@
4
4
  }
5
5
 
6
6
  ::-webkit-scrollbar-track {
7
- /* border-left: 1px solid var(--bgl-gray-light); */
8
- /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
7
+ /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
9
8
  }
10
9
 
11
10
  ::-webkit-scrollbar-thumb {