@bagelink/vue 0.0.1020 → 0.0.1023

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 (18) hide show
  1. package/dist/components/Btn.vue.d.ts +3 -0
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/form/FieldArray.vue.d.ts.map +1 -1
  4. package/dist/components/form/inputs/RangeInput.vue.d.ts +11 -14
  5. package/dist/components/form/inputs/RangeInput.vue.d.ts.map +1 -1
  6. package/dist/components/form/inputs/TelInput.vue.d.ts +2 -2
  7. package/dist/components/layout/TabsNav.vue.d.ts +25 -1
  8. package/dist/components/layout/TabsNav.vue.d.ts.map +1 -1
  9. package/dist/index.cjs +150 -109
  10. package/dist/index.mjs +150 -109
  11. package/dist/style.css +350 -323
  12. package/package.json +1 -1
  13. package/src/components/Btn.vue +5 -3
  14. package/src/components/form/FieldArray.vue +1 -2
  15. package/src/components/form/inputs/RangeInput.vue +142 -77
  16. package/src/components/layout/TabsNav.vue +14 -12
  17. package/src/styles/appearance.css +8 -0
  18. package/src/styles/theme.css +258 -256
package/dist/style.css CHANGED
@@ -55,62 +55,62 @@
55
55
  max-height: 300px;
56
56
  }
57
57
 
58
- .bgl_btn[data-v-521354bb] {
58
+ .bgl_btn[data-v-c23a3626] {
59
59
  --btn-bg: var(--bgl-primary);
60
60
  --btn-color: var(--bgl-light-text);
61
61
  --btn-flat-color: var(--bgl-text-color);
62
62
  }
63
- .bgl_btn-green[data-v-521354bb] {
63
+ .bgl_btn-green[data-v-c23a3626] {
64
64
  --btn-bg: var(--bgl-green);
65
65
  --btn-color: var(--bgl-light-text);
66
66
  --btn-flat-color: var(--bgl-green);
67
67
  }
68
- .bgl_btn-yellow[data-v-521354bb] {
68
+ .bgl_btn-yellow[data-v-c23a3626] {
69
69
  --btn-bg: var(--bgl-yellow);
70
70
  --btn-color: var(--bgl-black);
71
71
  --btn-flat-color: var(--bgl-yellow);
72
72
  }
73
- .bgl_btn-blue[data-v-521354bb] {
73
+ .bgl_btn-blue[data-v-c23a3626] {
74
74
  --btn-bg: var(--bgl-blue);
75
75
  --btn-color: var(--bgl-light-text);
76
76
  --btn-flat-color: var(--bgl-blue);
77
77
  }
78
- .bgl_btn-primary[data-v-521354bb] {
78
+ .bgl_btn-primary[data-v-c23a3626] {
79
79
  --btn-bg: var(--bgl-primary);
80
80
  --btn-color: var(--bgl-light-text);
81
81
  --btn-flat-color: var(--bgl-primary);
82
82
  }
83
- .bgl_btn-red[data-v-521354bb] {
83
+ .bgl_btn-red[data-v-c23a3626] {
84
84
  --btn-bg: var(--bgl-red);
85
85
  --btn-color: var(--bgl-light-text);
86
86
  --btn-flat-color: var(--bgl-red);
87
87
  }
88
- .bgl_btn-white[data-v-521354bb] {
88
+ .bgl_btn-white[data-v-c23a3626] {
89
89
  --btn-bg: var(--bgl-white);
90
90
  --btn-color: var(--bgl-black);
91
91
  --btn-flat-color: var(--bgl-white);
92
92
  }
93
- .bgl_btn-black[data-v-521354bb] {
93
+ .bgl_btn-black[data-v-c23a3626] {
94
94
  --btn-bg: var(--bgl-black);
95
95
  --btn-color: var(--bgl-light-text);
96
96
  --btn-flat-color: var(--bgl-black);
97
97
  }
98
- .bgl_btn-gray[data-v-521354bb] {
98
+ .bgl_btn-gray[data-v-c23a3626] {
99
99
  --btn-bg: var(--bgl-gray-light);
100
100
  --btn-color: var(--bgl-black);
101
101
  --btn-flat-color: var(--bgl-gray);
102
102
  }
103
- .bgl_btn-light[data-v-521354bb] {
103
+ .bgl_btn-light[data-v-c23a3626] {
104
104
  --btn-bg: var(--bgl-primary-light);
105
105
  --btn-color: var(--bgl-primary);
106
106
  --btn-flat-color: var(--bgl-primary-light);
107
107
  }
108
- .bgl_btn-gray-light[data-v-521354bb] {
108
+ .bgl_btn-gray-light[data-v-c23a3626] {
109
109
  --btn-bg: var(--bgl-gray-light);
110
110
  --btn-color: var(--bgl-gray);
111
111
  --btn-flat-color: var(--bgl-gray-light);
112
112
  }
113
- .bgl_btn[data-v-521354bb] {
113
+ .bgl_btn[data-v-c23a3626] {
114
114
  padding-left: var(--btn-padding);
115
115
  padding-right: var(--btn-padding);
116
116
  transition: var(--bgl-transition);
@@ -118,7 +118,7 @@
118
118
  color: var(--btn-color);
119
119
  text-decoration: none;
120
120
  }
121
- .bgl_btn.bgl_btn-icon[data-v-521354bb] {
121
+ .bgl_btn.bgl_btn-icon[data-v-c23a3626] {
122
122
  padding-left: 0;
123
123
  padding-right: 0;
124
124
  height: var(--btn-height);
@@ -127,69 +127,69 @@
127
127
  font-size: 1rem;
128
128
  flex-shrink: 0;
129
129
  }
130
- a[data-v-521354bb] {
130
+ a[data-v-c23a3626] {
131
131
  text-decoration: none;
132
132
  }
133
- .bgl_btn-flex[data-v-521354bb] {
133
+ .bgl_btn-flex[data-v-c23a3626] {
134
134
  display: flex;
135
135
  align-items: center;
136
136
  gap: 0.5rem;
137
137
  justify-content: center;
138
138
  height: 100%;
139
139
  }
140
- .bgl_btn .bgl_btn-icon[data-v-521354bb]{
140
+ .bgl_btn .bgl_btn-icon[data-v-c23a3626]{
141
141
  font-size: calc(var(--input-font-size) * 1.3);
142
142
  }
143
- .bgl_btn[data-v-521354bb]:hover,
144
- .bgl_btn-icon[data-v-521354bb]:hover {
143
+ .bgl_btn[data-v-c23a3626]:hover,
144
+ .bgl_btn-icon[data-v-c23a3626]:hover {
145
145
  filter: var(--bgl-hover-filter);
146
146
  }
147
- .bgl_btn[data-v-521354bb]:active:not(:disabled),
148
- .bgl_btn-icon[data-v-521354bb]:active:not(:disabled) {
147
+ .bgl_btn[data-v-c23a3626]:active:not(:disabled),
148
+ .bgl_btn-icon[data-v-c23a3626]:active:not(:disabled) {
149
149
  filter: var(--bgl-active-filter);
150
150
  }
151
- .bgl_btn.bgl_btn_flat[data-v-521354bb] {
151
+ .bgl_btn.bgl_btn_flat[data-v-c23a3626] {
152
152
  background: transparent;
153
153
  color: var(--btn-flat-color);
154
154
  }
155
- .bgl_btn_flat[data-v-521354bb]:hover:not(:disabled),
156
- .bgl_btn-icon.bgl_btn_flat[data-v-521354bb]:hover:not(:disabled) {
155
+ .bgl_btn_flat[data-v-c23a3626]:hover:not(:disabled),
156
+ .bgl_btn-icon.bgl_btn_flat[data-v-c23a3626]:hover:not(:disabled) {
157
157
  background: var(--bgl-gray-20);
158
158
  }
159
- .bgl_btn.bgl_btn_flat[data-v-521354bb]:active:not(:disabled),
160
- .bgl_btn-icon.bgl_btn_flat[data-v-521354bb]:active:not(:disabled) {
159
+ .bgl_btn.bgl_btn_flat[data-v-c23a3626]:active:not(:disabled),
160
+ .bgl_btn-icon.bgl_btn_flat[data-v-c23a3626]:active:not(:disabled) {
161
161
  background: var(--bgl-gray-40);
162
162
  }
163
- .bgl_btn.thin[data-v-521354bb] {
163
+ .bgl_btn.thin[data-v-c23a3626] {
164
164
  padding-inline: calc(var(--btn-padding) / 3);
165
165
  border-radius: calc(var(--btn-border-radius) / 1.5);
166
166
  }
167
- .bgl_btn.round[data-v-521354bb] {
167
+ .bgl_btn.round[data-v-c23a3626] {
168
168
  border-radius: 1000px;
169
169
  }
170
- .bgl_btn-icon.thin[data-v-521354bb] {
170
+ .bgl_btn-icon.thin[data-v-c23a3626] {
171
171
  height: calc(var(--btn-height) / 1.5);
172
172
  width: calc(var(--btn-height) / 1.5);
173
173
  line-height: normal;
174
174
  }
175
- .bgl_btn-icon.thin .bgl_btn-flex[data-v-521354bb] {
175
+ .bgl_btn-icon.thin .bgl_btn-flex[data-v-c23a3626] {
176
176
  height: 100%;
177
177
  }
178
- [dir="rtl"] .bgl_btn-icon[data-v-521354bb]{
178
+ [dir="rtl"] .bgl_btn-icon[data-v-c23a3626]{
179
179
  transform: rotateY(180deg);
180
180
  }
181
- .bgl_btn-border[data-v-521354bb], .bgl_btn-icon.bgl_btn_flat.bgl_btn-border[data-v-521354bb] {
181
+ .bgl_btn-border[data-v-c23a3626], .bgl_btn-icon.bgl_btn_flat.bgl_btn-border[data-v-c23a3626] {
182
182
  border: 1px solid var(--btn-flat-color);
183
183
  background: transparent;
184
184
  color: var(--btn-flat-color);
185
185
  }
186
- .bgl_btn-border[data-v-521354bb]:hover {
186
+ .bgl_btn-border[data-v-c23a3626]:hover {
187
187
  color: var(--btn-flat-color);
188
188
  }
189
- .bgl_btn-border[data-v-521354bb]:active:not(:disabled) {
189
+ .bgl_btn-border[data-v-c23a3626]:active:not(:disabled) {
190
190
  filter: brightness(80%);
191
191
  }
192
- .bgl_btn[data-v-521354bb]:disabled {
192
+ .bgl_btn[data-v-c23a3626]:disabled {
193
193
  opacity: 0.6;
194
194
  filter: grayscale(0.3);
195
195
  cursor: not-allowed;
@@ -510,7 +510,7 @@ data[data-v-6c27f163] {
510
510
  .fi[data-v-f99f1900]:before{ content:" "
511
511
  }
512
512
 
513
- .bgl_tabs_wrap[data-v-dbce6d28] {
513
+ .bgl_tabs_wrap[data-v-bbb66a44] {
514
514
  background: var(--input-bg);
515
515
  border-radius: calc(var(--input-border-radius) * 1.4);
516
516
  padding-inline: calc(var(--btn-padding) / 8);
@@ -518,7 +518,7 @@ data[data-v-6c27f163] {
518
518
  box-shadow: inset 0 0 10px #00000012;
519
519
  gap: 0.25rem;
520
520
  }
521
- .bgl_tab[data-v-dbce6d28] {
521
+ .bgl_tab[data-v-bbb66a44] {
522
522
  border: none;
523
523
  background: transparent;
524
524
  cursor: pointer;
@@ -530,10 +530,10 @@ data[data-v-6c27f163] {
530
530
  transition: var(--bgl-transition);
531
531
  color: inherit
532
532
  }
533
- .bgl_tab[data-v-dbce6d28]:hover {
533
+ .bgl_tab[data-v-bbb66a44]:hover {
534
534
  background: rgba(255, 255, 255, .4);
535
535
  }
536
- .bgl_tabs_wrap[data-v-dbce6d28]::before {
536
+ .bgl_tabs_wrap[data-v-bbb66a44]::before {
537
537
  content: '';
538
538
  position: absolute;
539
539
  top: calc(var(--btn-padding) / 8);
@@ -545,46 +545,46 @@ data[data-v-6c27f163] {
545
545
  transition: var(--bgl-transition);
546
546
  z-index: 0;
547
547
  }
548
- .bgl_flat-tabs.bgl_tabs_wrap[data-v-dbce6d28] {
548
+ .bgl_flat-tabs.bgl_tabs_wrap[data-v-bbb66a44] {
549
549
  background: transparent;
550
550
  box-shadow: none;
551
551
  }
552
- .bgl_flat-tabs.bgl_tabs_wrap[data-v-dbce6d28]::before{
552
+ .bgl_flat-tabs.bgl_tabs_wrap[data-v-bbb66a44]::before{
553
553
  background: transparent;
554
554
  border-bottom: 1px solid var(--bgl-primary);
555
555
  border-radius: 0;
556
556
  top: calc(var(--btn-padding) * 1.25);
557
557
  bottom: unset;
558
558
  }
559
- .bgl_flat-tabs .active.bgl_tab[data-v-dbce6d28]{
559
+ .bgl_flat-tabs .active.bgl_tab[data-v-bbb66a44]{
560
560
  color: var(--bgl-primary)
561
561
  }
562
- .bgl_flat-tabs .bgl_tab[data-v-dbce6d28]:hover {
562
+ .bgl_flat-tabs .bgl_tab[data-v-bbb66a44]:hover {
563
563
  background: rgba(255, 255, 255, .1);
564
564
  }
565
- .bgl_vertical-tabs[data-v-dbce6d28]{
565
+ .bgl_vertical-tabs[data-v-bbb66a44]{
566
566
  grid-auto-flow: row;
567
567
  align-items: start;
568
568
  justify-items: start;
569
569
  gap: 1rem
570
570
  }
571
- .bgl_vertical-tabs .bgl_tab[data-v-dbce6d28]{
571
+ .bgl_vertical-tabs .bgl_tab[data-v-bbb66a44]{
572
572
  padding-inline: 0;
573
573
  border-radius: 0;
574
574
  border-bottom: 1px solid transparent;
575
575
  }
576
- .bgl_vertical-tabs .bgl_tab[data-v-dbce6d28]:hover{
576
+ .bgl_vertical-tabs .bgl_tab[data-v-bbb66a44]:hover{
577
577
  background: transparent;
578
578
  border-bottom: 1px solid var(--bgl-primary);
579
579
  }
580
- .bgl_vertical-tabs .bgl_tab.active[data-v-dbce6d28]{
580
+ .bgl_vertical-tabs .bgl_tab.active[data-v-bbb66a44]{
581
581
  border-bottom: 1px solid var(--bgl-primary);
582
582
  }
583
- .bgl_vertical-tabs.bgl_tabs_wrap[data-v-dbce6d28]::before{
583
+ .bgl_vertical-tabs.bgl_tabs_wrap[data-v-bbb66a44]::before{
584
584
  border: none;
585
585
  }
586
586
  @media screen and (max-width: 910px) {
587
- .bgl_vertical-tabs[data-v-dbce6d28]{
587
+ .bgl_vertical-tabs[data-v-bbb66a44]{
588
588
  grid-auto-flow: column;
589
589
  overflow: auto;
590
590
  max-width: 100vw;
@@ -593,10 +593,10 @@ data[data-v-6c27f163] {
593
593
  gap: 1rem;
594
594
  position: relative;
595
595
  }
596
- .bgl_vertical-tabs[data-v-dbce6d28]::-webkit-scrollbar {
596
+ .bgl_vertical-tabs[data-v-bbb66a44]::-webkit-scrollbar {
597
597
  display: none;
598
598
  }
599
- .bgl_vertical-tabs .bgl_tab[data-v-dbce6d28]{
599
+ .bgl_vertical-tabs .bgl_tab[data-v-bbb66a44]{
600
600
  white-space: nowrap;
601
601
  }
602
602
  }
@@ -1140,42 +1140,60 @@ pre code.hljs{
1140
1140
  color: var(--bgl-light-text);
1141
1141
  }
1142
1142
 
1143
- .range-slide input[data-v-ded4d62d] {
1144
- -webkit-appearance: none;
1143
+ .range-slider-position-txt[data-v-dae624bd]{
1144
+ top: calc(var(--bgl-range-thumb-size) / 2 ) ;
1145
+ transition: transform 0.1s, opacity 0.5s;
1146
+ transform: scale(0.5);
1147
+ }
1148
+ .range-slider:hover .range-slider-position-txt[data-v-dae624bd]{
1149
+ opacity: 1;
1150
+ transform: scale(1);
1151
+ }
1152
+ .range-slider[data-v-dae624bd] {
1153
+ height: var(--bgl-range-track-size);
1154
+ display: flex;
1155
+ align-items: center;
1156
+ margin-top: calc(var(--bgl-range-thumb-size) / 2 + 0.5rem) ;
1157
+ }
1158
+ .range-slider-txt[data-v-dae624bd]{
1159
+ margin-top: calc(var(--bgl-range-thumb-size) / 2) !important;
1160
+ }
1161
+ input[type="range"][data-v-dae624bd] {
1162
+ position: absolute;
1145
1163
  width: 100%;
1146
- border-radius: 5px;
1147
- outline: none;
1148
- transition: background 0.3s ease;
1164
+ height: 100%;
1165
+ height: var(--bgl-range-thumb-size);
1166
+ background: transparent;
1167
+ pointer-events: none;
1168
+ appearance: none;
1169
+ margin: 0;
1149
1170
  }
1150
- .range-slide input[data-v-ded4d62d]::-webkit-slider-thumb {
1151
- -webkit-appearance: none;
1171
+ input[type="range"][data-v-dae624bd]::-webkit-slider-thumb {
1172
+ pointer-events: all;
1152
1173
  appearance: none;
1153
- /* margin-top: calc(-1 * var(--thickness, 8px) / 2); */
1154
- margin-top: 0;
1155
- width: 16px;
1156
- height: 16px;
1157
- background: var(--bgl-primary);
1158
- border: 1px solid var(--input-bg);
1174
+ width: var(--bgl-range-thumb-size);
1175
+ height: var(--bgl-range-thumb-size);
1176
+ background: var(--bgl-white);
1159
1177
  border-radius: 50%;
1178
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
1179
+ position: relative;
1180
+ z-index: 2;
1160
1181
  cursor: pointer;
1182
+ transition: var(--bgl-transition);
1161
1183
  }
1162
- .range-slide input[data-v-ded4d62d]::-moz-range-thumb {
1163
- width: 16px;
1164
- height: 16px;
1165
- margin-top: calc(-1 * var(--thickness, 8px) / 2);
1166
- background: var(--bgl-primary);
1167
- border: 1px solid var(--input-bg);
1168
- border-radius: 50%;
1169
- cursor: pointer;
1184
+ input[type="range"][data-v-dae624bd]::-webkit-slider-thumb:hover {
1185
+ box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2) var(--bgl-primary-tint);
1186
+ filter: brightness(90%);
1170
1187
  }
1171
- .range-slide.disabled input[type='range'][data-v-ded4d62d]::-webkit-slider-thumb {
1172
- display: none;
1188
+ input[type="range"][data-v-dae624bd]:focus::-webkit-slider-thumb {
1189
+ outline: none;
1190
+ box-shadow: 0 0 0 calc(var(--bgl-range-thumb-size) / 2.2) var(--bgl-primary-tint);
1173
1191
  }
1174
- .range-slide input[data-v-ded4d62d]::-webkit-slider-runnable-track,
1175
- .range-slide input[data-v-ded4d62d]::-moz-range-track {
1176
- width: 100%;
1177
- background: transparent;
1178
- border-radius: 5px;
1192
+ .track[data-v-dae624bd] {
1193
+ height: var(--bgl-range-track-height);
1194
+ background: var(--bgl-bg);
1195
+ margin-inline-start: calc(var(--bgl-range-thumb-size) / 2);
1196
+ width: calc(100% - var(--bgl-range-thumb-size));
1179
1197
  }
1180
1198
 
1181
1199
  .tableBoxSelect[data-v-4548b70f]::after {
@@ -13448,6 +13466,9 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
13448
13466
  .shadow {
13449
13467
  box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
13450
13468
  }
13469
+ .shadow-none {
13470
+ box-shadow: none !important;
13471
+ }
13451
13472
  .shadow-30 {
13452
13473
  box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
13453
13474
  }
@@ -14078,6 +14099,10 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
14078
14099
  box-shadow: 0 0 20px 0 var(--bgl-shadow) !important;
14079
14100
  }
14080
14101
 
14102
+ .m_shadow-none {
14103
+ box-shadow: none !important;
14104
+ }
14105
+
14081
14106
  .m_shadow-30 {
14082
14107
  box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
14083
14108
  }
@@ -14093,338 +14118,340 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
14093
14118
  }
14094
14119
  /* TEHEME */
14095
14120
  :root {
14096
- --bgl-primary: var(--bgl-blue);
14097
- --bgl-primary-tint: #2e5bff80;
14098
- --bgl-primary-light: #eef6ff;
14099
- --bgl-black: #282929;
14100
- --bgl-black-tint: #28292980;
14101
- --bgl-white: #fff;
14102
- --bgl-gray: #b7b7b7;
14103
- --bgl-gray-light: #f5f8fa;
14104
- --bgl-gray-80: #e8ecef;
14105
- --bgl-gray-20: rgba(183, 183, 183, 0.2);
14106
- --bgl-gray-40: rgba(183, 183, 183, 0.4);
14107
- --bgl-accent-color: var(--bgl-primary);
14108
- --bgl-bg: #f4f6fa;
14109
- --bgl-shadow: #00000031;
14110
- --border-color: #00000020;
14111
- --placeholder-color: #00000040;
14112
- --label-color: #00000080;
14113
- --input-bg: #f5f8fa;
14114
- --input-color: #000000;
14115
- --bgl-box-bg: var(--bgl-white);
14116
- --bgl-popup-bg: var(--bgl-white);
14117
- --bgl-popup-text: var(--bgl-black);
14118
- --bgl-text-color: var(--bgl-black);
14119
- --bgl-light-text: var(--bgl-white);
14120
- --bgl-richtext-color: var(--bgl-white);
14121
- --bgl-code-bg: var(--bgl-black);
14122
- --bgl-code-color: var(--bgl-white);
14123
- --bgl-dark-bg: rgba(0, 0, 0, 0.7);
14124
- --bgl-selection-bg: var(--bgl-blue-dark);
14125
- --bgl-selection-color: var(--bgl-white);
14126
- --bgl-scrollbar-thumb: var(--bgl-gray);
14127
- --pill-btn-color: var(--bgl-white);
14128
- --pill-btn-bg: var(--placeholder-color);
14129
- --bgl-selected: var(--bgl-gray-light);
14130
- --skeleton-bg: #f0f0f0;
14131
- --skeleton-pulse: var(--bgl-bg);
14121
+ --bgl-primary: var(--bgl-blue);
14122
+ --bgl-primary-tint: #2e5bff80;
14123
+ --bgl-primary-light: #eef6ff;
14124
+ --bgl-black: #282929;
14125
+ --bgl-black-tint: #28292980;
14126
+ --bgl-white: #fff;
14127
+ --bgl-gray: #b7b7b7;
14128
+ --bgl-gray-light: #f5f8fa;
14129
+ --bgl-gray-80: #e8ecef;
14130
+ --bgl-gray-20: rgba(183, 183, 183, 0.2);
14131
+ --bgl-gray-40: rgba(183, 183, 183, 0.4);
14132
+ --bgl-accent-color: var(--bgl-primary);
14133
+ --bgl-bg: #f4f6fa;
14134
+ --bgl-shadow: #00000031;
14135
+ --border-color: #00000020;
14136
+ --placeholder-color: #00000040;
14137
+ --label-color: #00000080;
14138
+ --input-bg: #f5f8fa;
14139
+ --input-color: #000000;
14140
+ --bgl-box-bg: var(--bgl-white);
14141
+ --bgl-popup-bg: var(--bgl-white);
14142
+ --bgl-popup-text: var(--bgl-black);
14143
+ --bgl-text-color: var(--bgl-black);
14144
+ --bgl-light-text: var(--bgl-white);
14145
+ --bgl-richtext-color: var(--bgl-white);
14146
+ --bgl-code-bg: var(--bgl-black);
14147
+ --bgl-code-color: var(--bgl-white);
14148
+ --bgl-dark-bg: rgba(0, 0, 0, 0.7);
14149
+ --bgl-selection-bg: var(--bgl-blue-dark);
14150
+ --bgl-selection-color: var(--bgl-white);
14151
+ --bgl-scrollbar-thumb: var(--bgl-gray);
14152
+ --pill-btn-color: var(--bgl-white);
14153
+ --pill-btn-bg: var(--placeholder-color);
14154
+ --bgl-selected: var(--bgl-gray-light);
14155
+ --skeleton-bg: #f0f0f0;
14156
+ --skeleton-pulse: var(--bgl-bg);
14132
14157
  }
14133
14158
  /* TYPE */
14134
14159
  :root {
14135
- --bgl-font: 'Lexend', 'Ploni', sans-serif;
14136
- --input-font-size: 16px;
14160
+ --bgl-font: 'Lexend', 'Ploni', sans-serif;
14161
+ --input-font-size: 16px;
14137
14162
  }
14138
14163
  /* DIMENSIONS */
14139
14164
  :root {
14140
- --bgl-font-size: 16px;
14141
- --input-height: 40px;
14142
- --label-font-size: 12px;
14143
- --input-border-radius: 7px;
14144
- --card-border-radius: 12px;
14145
- --btn-border-radius: 10px;
14146
- --btn-padding: 30px;
14147
- --btn-height: 40px;
14148
- --pill-border-radius: 8px;
14149
- --pill-height: 30px;
14150
- --skeleton-radius: 0.25rem;
14151
- --skeleton-margin: 1rem;
14165
+ --bgl-font-size: 16px;
14166
+ --input-height: 40px;
14167
+ --label-font-size: 12px;
14168
+ --input-border-radius: 7px;
14169
+ --card-border-radius: 12px;
14170
+ --btn-border-radius: 10px;
14171
+ --btn-padding: 30px;
14172
+ --btn-height: 40px;
14173
+ --pill-border-radius: 8px;
14174
+ --pill-height: 30px;
14175
+ --skeleton-radius: 0.25rem;
14176
+ --skeleton-margin: 1rem;
14177
+ --bgl-range-thumb-size: 20px;
14178
+ --bgl-range-track-height: 10px;
14152
14179
  }
14153
14180
  /* MISC */
14154
14181
  :root {
14155
- --bgl-transition: all 200ms ease;
14156
- --bgl-transition-400: all 400ms ease;
14157
- --bgl-hover-filter: brightness(90%);
14158
- --bgl-active-filter: brightness(70%);
14182
+ --bgl-transition: all 200ms ease;
14183
+ --bgl-transition-400: all 400ms ease;
14184
+ --bgl-hover-filter: brightness(90%);
14185
+ --bgl-active-filter: brightness(70%);
14159
14186
  }
14160
14187
  /* OTHER COLORS */
14161
14188
  :root {
14162
- --bgl-blue: #2e5bff;
14163
- --bgl-blue-20: rgba(46, 91, 255, 20%);
14164
- --bgl-blue-dark: #191c30;
14165
- --bgl-blue-light: #eef6ff;
14166
- --bgl-pink: #f1416c;
14167
- --bgl-red: #ed6c6f;
14168
- --bgl-red-tint: #fbe2e2;
14169
- --bgl-yellow: #ffbb00;
14170
- --bgl-yellow-light: #fff6d5;
14171
- --bgl-green: #75c98f;
14172
- --whatsapp-gray: #89959f;
14173
- --whatsapp-green: #e0fcd6;
14174
- --whatsapp-blue: #71bce6;
14189
+ --bgl-blue: #2e5bff;
14190
+ --bgl-blue-20: rgba(46, 91, 255, 20%);
14191
+ --bgl-blue-dark: #191c30;
14192
+ --bgl-blue-light: #eef6ff;
14193
+ --bgl-pink: #f1416c;
14194
+ --bgl-red: #ed6c6f;
14195
+ --bgl-red-tint: #fbe2e2;
14196
+ --bgl-yellow: #ffbb00;
14197
+ --bgl-yellow-light: #fff6d5;
14198
+ --bgl-green: #75c98f;
14199
+ --whatsapp-gray: #89959f;
14200
+ --whatsapp-green: #e0fcd6;
14201
+ --whatsapp-blue: #71bce6;
14175
14202
  }
14176
14203
  .testMe * {
14177
- outline: 1px dotted red;
14204
+ outline: 1px dotted red;
14178
14205
  }
14179
14206
  .Vue-Toastification__toast {
14180
- border-radius: var(--card-border-radius);
14181
- box-shadow: none;
14207
+ border-radius: var(--card-border-radius);
14208
+ box-shadow: none;
14182
14209
  }
14183
14210
  .Vue-Toastification__toast--default {
14184
- background: var(--bgl-primary);
14211
+ background: var(--bgl-primary);
14185
14212
  }
14186
14213
  .Vue-Toastification__close-button {
14187
- height: 1.5rem;
14188
- line-height: 1rem;
14214
+ height: 1.5rem;
14215
+ line-height: 1rem;
14189
14216
  }
14190
14217
  ::-moz-selection {
14191
- color: var(--bgl-selection-color);
14192
- background: var(--bgl-selection-bg);
14218
+ color: var(--bgl-selection-color);
14219
+ background: var(--bgl-selection-bg);
14193
14220
  }
14194
14221
  ::selection {
14195
- color: var(--bgl-selection-color);
14196
- background: var(--bgl-selection-bg);
14222
+ color: var(--bgl-selection-color);
14223
+ background: var(--bgl-selection-bg);
14197
14224
  }
14198
14225
  .popup {
14199
- border-radius: 15px;
14200
- background: var(--bgl-popup-bg);
14201
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
14202
- padding: 2rem;
14203
- min-width: 300px;
14204
- text-align: center;
14226
+ border-radius: 15px;
14227
+ background: var(--bgl-popup-bg);
14228
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
14229
+ padding: 2rem;
14230
+ min-width: 300px;
14231
+ text-align: center;
14205
14232
  }
14206
14233
  .tabs {
14207
- -moz-column-gap: 1rem;
14208
- column-gap: 1rem;
14209
- margin-top: 20px;
14210
- margin-bottom: -2rem;
14211
- border-top: 1px solid var(--border-color);
14212
- width: calc(100% + 4rem);
14213
- -webkit-margin-start: -2rem;
14214
- margin-inline-start: -2rem;
14215
- -webkit-padding-start: 2rem;
14216
- padding-inline-start: 2rem;
14217
- overflow: auto;
14218
- display: flex;
14234
+ -moz-column-gap: 1rem;
14235
+ column-gap: 1rem;
14236
+ margin-top: 20px;
14237
+ margin-bottom: -2rem;
14238
+ border-top: 1px solid var(--border-color);
14239
+ width: calc(100% + 4rem);
14240
+ -webkit-margin-start: -2rem;
14241
+ margin-inline-start: -2rem;
14242
+ -webkit-padding-start: 2rem;
14243
+ padding-inline-start: 2rem;
14244
+ overflow: auto;
14245
+ display: flex;
14219
14246
  }
14220
14247
  .tab {
14221
- font-size: 14px;
14222
- font-weight: 600;
14223
- line-height: 2.5;
14224
- cursor: pointer;
14225
- transition: var(--bgl-transition);
14226
- border-bottom: 2px solid transparent;
14227
- padding: 0 5px;
14228
- white-space: nowrap;
14229
- text-decoration: none;
14230
- color: inherit;
14248
+ font-size: 14px;
14249
+ font-weight: 600;
14250
+ line-height: 2.5;
14251
+ cursor: pointer;
14252
+ transition: var(--bgl-transition);
14253
+ border-bottom: 2px solid transparent;
14254
+ padding: 0 5px;
14255
+ white-space: nowrap;
14256
+ text-decoration: none;
14257
+ color: inherit;
14231
14258
  }
14232
14259
  .tab.active {
14233
- color: var(--bgl-primary);
14234
- border-bottom: 2px solid var(--bgl-primary);
14260
+ color: var(--bgl-primary);
14261
+ border-bottom: 2px solid var(--bgl-primary);
14235
14262
  }
14236
14263
  .tab:hover {
14237
- color: var(--bgl-primary);
14264
+ color: var(--bgl-primary);
14238
14265
  }
14239
14266
  .tab:active {
14240
- -webkit-filter: brightness(70%);
14241
- filter: brightness(70%);
14267
+ -webkit-filter: brightness(70%);
14268
+ filter: brightness(70%);
14242
14269
  }
14243
14270
  .router-tab {
14244
- font-size: 14px;
14245
- font-weight: 600;
14246
- line-height: 2.5;
14247
- cursor: pointer;
14248
- transition: var(--bgl-transition);
14249
- border-bottom: 2px solid transparent;
14250
- padding: 0 5px;
14251
- white-space: nowrap;
14252
- text-decoration: none;
14253
- color: inherit;
14271
+ font-size: 14px;
14272
+ font-weight: 600;
14273
+ line-height: 2.5;
14274
+ cursor: pointer;
14275
+ transition: var(--bgl-transition);
14276
+ border-bottom: 2px solid transparent;
14277
+ padding: 0 5px;
14278
+ white-space: nowrap;
14279
+ text-decoration: none;
14280
+ color: inherit;
14254
14281
  }
14255
14282
  .router-tab.router-link-active {
14256
- color: var(--bgl-primary);
14257
- border-bottom: 2px solid var(--bgl-primary);
14283
+ color: var(--bgl-primary);
14284
+ border-bottom: 2px solid var(--bgl-primary);
14258
14285
  }
14259
14286
  .router-tab:hover {
14260
- color: var(--bgl-primary);
14287
+ color: var(--bgl-primary);
14261
14288
  }
14262
14289
  .router-tab:active {
14263
- -webkit-filter: brightness(70%);
14264
- filter: brightness(70%);
14290
+ -webkit-filter: brightness(70%);
14291
+ filter: brightness(70%);
14265
14292
  }
14266
14293
  .entity-container {
14267
- display: grid;
14268
- height: 100%;
14269
- grid-template-columns: minmax(300px, 1fr) 3fr;
14270
- grid-gap: 1rem;
14271
- -moz-column-gap: 1rem;
14272
- column-gap: 1rem;
14273
- grid-template-rows: 1fr;
14274
- grid-template-areas: 'list-view detail-view';
14275
- transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
14276
- transition:
14277
- grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
14278
- -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
14279
- transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
14294
+ display: grid;
14295
+ height: 100%;
14296
+ grid-template-columns: minmax(300px, 1fr) 3fr;
14297
+ grid-gap: 1rem;
14298
+ -moz-column-gap: 1rem;
14299
+ column-gap: 1rem;
14300
+ grid-template-rows: 1fr;
14301
+ grid-template-areas: 'list-view detail-view';
14302
+ transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
14303
+ transition:
14304
+ grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
14305
+ -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
14306
+ transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
14280
14307
  }
14281
14308
  .detail-main {
14282
- overflow-y: auto;
14309
+ overflow-y: auto;
14283
14310
  }
14284
14311
  .content-row p {
14285
- margin: 0 0 10px 0;
14312
+ margin: 0 0 10px 0;
14286
14313
  }
14287
14314
  .id {
14288
- color: var(--bgl-gray);
14289
- font-size: 9px;
14315
+ color: var(--bgl-gray);
14316
+ font-size: 9px;
14290
14317
  }
14291
14318
  .field {
14292
- --field-count: 1;
14293
- --width: calc(100% / var(--field-count));
14294
- grid-auto-columns: minmax(var(--width), var(--width));
14295
- font-size: 10px;
14296
- text-align: z;
14319
+ --field-count: 1;
14320
+ --width: calc(100% / var(--field-count));
14321
+ grid-auto-columns: minmax(var(--width), var(--width));
14322
+ font-size: 10px;
14323
+ text-align: z;
14297
14324
  }
14298
14325
  .detail-view-inner {
14299
- display: grid;
14300
- height: 100%;
14301
- overflow: hidden;
14302
- grid-template-rows: -webkit-max-content 1fr;
14303
- grid-template-rows: max-content 1fr;
14304
- gap: 1rem;
14326
+ display: grid;
14327
+ height: 100%;
14328
+ overflow: hidden;
14329
+ grid-template-rows: -webkit-max-content 1fr;
14330
+ grid-template-rows: max-content 1fr;
14331
+ gap: 1rem;
14305
14332
  }
14306
14333
  .detail-view-inner-wrap {
14307
- height: 100%;
14308
- overflow: hidden;
14309
- transition: var(--bgl-transition);
14334
+ height: 100%;
14335
+ overflow: hidden;
14336
+ transition: var(--bgl-transition);
14310
14337
  }
14311
14338
  .table-list-wrap {
14312
- overflow: auto;
14339
+ overflow: auto;
14313
14340
  }
14314
14341
  [dir='rtl'] .data-row .bgl_icon-font,
14315
14342
  [dir='rtl'] .embedded-field .bgl_icon-font {
14316
- transform: rotateY(180deg) !important;
14343
+ transform: rotateY(180deg) !important;
14317
14344
  }
14318
14345
  .copy-url {
14319
- background-color: var(--bgl-gray-light);
14320
- border-radius: var(--btn-border-radius);
14321
- padding: 0.5rem 1rem;
14322
- align-items: center;
14323
- justify-content: flex-start;
14324
- margin-bottom: 1rem;
14325
- display: flex;
14326
- justify-content: space-between;
14346
+ background-color: var(--bgl-gray-light);
14347
+ border-radius: var(--btn-border-radius);
14348
+ padding: 0.5rem 1rem;
14349
+ align-items: center;
14350
+ justify-content: flex-start;
14351
+ margin-bottom: 1rem;
14352
+ display: flex;
14353
+ justify-content: space-between;
14327
14354
  }
14328
14355
  .copy-url a {
14329
- margin: 0;
14330
- font-size: 12px;
14331
- opacity: 0.8;
14332
- color: var(--bgl-text-color);
14333
- word-break: break-all;
14356
+ margin: 0;
14357
+ font-size: 12px;
14358
+ opacity: 0.8;
14359
+ color: var(--bgl-text-color);
14360
+ word-break: break-all;
14334
14361
  }
14335
14362
  .list-view {
14336
- grid-area: list-view;
14337
- grid-template-areas: 'list-header' 'list-content';
14338
- grid-template-columns: 1fr;
14339
- overflow-y: auto;
14340
- grid-template-rows: -webkit-max-content 1fr;
14341
- grid-template-rows: max-content 1fr;
14342
- transition: var(--transition);
14363
+ grid-area: list-view;
14364
+ grid-template-areas: 'list-header''list-content';
14365
+ grid-template-columns: 1fr;
14366
+ overflow-y: auto;
14367
+ grid-template-rows: -webkit-max-content 1fr;
14368
+ grid-template-rows: max-content 1fr;
14369
+ transition: var(--transition);
14343
14370
  }
14344
14371
  .shekel {
14345
- line-height: 0;
14372
+ line-height: 0;
14346
14373
  }
14347
14374
  .view-wrapper {
14348
- height: 100%;
14349
- position: relative;
14350
- overflow: hidden;
14375
+ height: 100%;
14376
+ position: relative;
14377
+ overflow: hidden;
14351
14378
  }
14352
14379
  @media screen and (max-width: 1000px) {
14353
- .entity-container {
14354
- grid-template-columns: minmax(22vw, 1fr) 2fr;
14355
- }
14380
+ .entity-container {
14381
+ grid-template-columns: minmax(22vw, 1fr) 2fr;
14382
+ }
14356
14383
  }
14357
14384
  @media screen and (max-width: 910px) {
14358
- .tab {
14359
- font-size: 12px;
14360
- }
14385
+ .tab {
14386
+ font-size: 12px;
14387
+ }
14361
14388
 
14362
- .entity-container {
14363
- grid-template-columns: 1fr;
14364
- gap: 0;
14365
- }
14389
+ .entity-container {
14390
+ grid-template-columns: 1fr;
14391
+ gap: 0;
14392
+ }
14366
14393
 
14367
- .detail-view-inner {
14368
- border-radius: var(--card-border-radius);
14369
- background: var(--bgl-box-bg);
14370
- }
14394
+ .detail-view-inner {
14395
+ border-radius: var(--card-border-radius);
14396
+ background: var(--bgl-box-bg);
14397
+ }
14371
14398
 
14372
- .detail-view-inner-wrap {
14373
- position: absolute;
14374
- height: 100%;
14375
- width: 100%;
14376
- background: var(--bgl-bg);
14377
- }
14399
+ .detail-view-inner-wrap {
14400
+ position: absolute;
14401
+ height: 100%;
14402
+ width: 100%;
14403
+ background: var(--bgl-bg);
14404
+ }
14378
14405
 
14379
- .detail-view-inner-wrap.bgl_card {
14380
- background: var(--bgl-box-bg);
14381
- }
14406
+ .detail-view-inner-wrap.bgl_card {
14407
+ background: var(--bgl-box-bg);
14408
+ }
14382
14409
 
14383
- .bgl_card {
14384
- padding: 1rem 1rem;
14385
- }
14410
+ .bgl_card {
14411
+ padding: 1rem 1rem;
14412
+ }
14386
14413
 
14387
- .tabs {
14388
- -moz-column-gap: 10px;
14389
- column-gap: 10px;
14390
- margin-top: 10px;
14391
- margin-bottom: -15px;
14392
- box-sizing: border-box;
14393
- -webkit-margin-start: -1rem;
14394
- margin-inline-start: -1rem;
14395
- -webkit-padding-start: 1rem;
14396
- padding-inline-start: 1rem;
14397
- max-width: calc(100vw - 2rem);
14398
- }
14414
+ .tabs {
14415
+ -moz-column-gap: 10px;
14416
+ column-gap: 10px;
14417
+ margin-top: 10px;
14418
+ margin-bottom: -15px;
14419
+ box-sizing: border-box;
14420
+ -webkit-margin-start: -1rem;
14421
+ margin-inline-start: -1rem;
14422
+ -webkit-padding-start: 1rem;
14423
+ padding-inline-start: 1rem;
14424
+ max-width: calc(100vw - 2rem);
14425
+ }
14399
14426
 
14400
- .popup {
14401
- border-radius: 15px;
14402
- background: var(--bgl-popup-bg);
14403
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
14404
- padding: 2rem;
14405
- min-width: 0;
14406
- max-width: 90%;
14407
- max-height: 90vh;
14408
- overflow-x: auto;
14409
- text-align: center;
14410
- }
14427
+ .popup {
14428
+ border-radius: 15px;
14429
+ background: var(--bgl-popup-bg);
14430
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
14431
+ padding: 2rem;
14432
+ min-width: 0;
14433
+ max-width: 90%;
14434
+ max-height: 90vh;
14435
+ overflow-x: auto;
14436
+ text-align: center;
14437
+ }
14411
14438
 
14412
- .detail-main {
14413
- overflow-y: unset;
14414
- }
14439
+ .detail-main {
14440
+ overflow-y: unset;
14441
+ }
14415
14442
 
14416
- .detail-section {
14417
- height: -webkit-fit-content;
14418
- height: -moz-fit-content;
14419
- height: fit-content;
14420
- }
14443
+ .detail-section {
14444
+ height: -webkit-fit-content;
14445
+ height: -moz-fit-content;
14446
+ height: fit-content;
14447
+ }
14421
14448
 
14422
- .field {
14423
- display: flex;
14424
- flex-wrap: wrap;
14425
- gap: 0.5rem;
14426
- align-items: center;
14427
- }
14449
+ .field {
14450
+ display: flex;
14451
+ flex-wrap: wrap;
14452
+ gap: 0.5rem;
14453
+ align-items: center;
14454
+ }
14428
14455
  }
14429
14456
  [theme="dark"] {
14430
14457
  --bgl-primary: #1c4fe1;