@flower-city-online/itinerary-lib 0.0.45 → 0.0.47

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.
@@ -1,3 +1,6 @@
1
+ // ============================================
2
+ // IMPORTS
3
+ // ============================================
1
4
  @use "@angular/material" as mat;
2
5
 
3
6
  @import "../itinerary-app/_styles/component-global-styles/search-bar.scss";
@@ -15,6 +18,16 @@
15
18
  @import "../itinerary-app/_styles/media-queries.scss";
16
19
  @import "../itinerary-app/_styles/colors";
17
20
 
21
+ // ============================================
22
+ // TAILWIND CSS
23
+ // ============================================
24
+ @tailwind base;
25
+ @tailwind components;
26
+ @tailwind utilities;
27
+
28
+ // ============================================
29
+ // VARIABLES
30
+ // ============================================
18
31
  :root {
19
32
  --font-gilroy-regular: "Gilroy-Regular", serif;
20
33
  --font-gilroy-bold: "Gilroy-Bold", serif;
@@ -23,14 +36,14 @@
23
36
  --font-gilroy-thin: "Gilroy-Thin", serif;
24
37
  --font-size-small: 9.85px;
25
38
  --font-size-medium: 11.49px;
39
+ --primary-color: $background-color-5;
40
+ --secondary-color: $scroll-color;
26
41
  }
27
42
 
28
43
  $custom-typography: mat.define-typography-config(
29
44
  $font-family: "Gilroy-Regular, serif",
30
45
  );
31
46
 
32
- @include mat.core();
33
-
34
47
  $ns-add-in-primary: mat.define-palette(mat.$indigo-palette);
35
48
  $ns-add-in-accent: mat.define-palette(mat.$pink-palette);
36
49
  $ns-add-in-warn: mat.define-palette(mat.$red-palette);
@@ -47,6 +60,10 @@ $ns-add-in-theme: mat.define-dark-theme(
47
60
  )
48
61
  );
49
62
 
63
+ // ============================================
64
+ // CSS WITH @ RULES
65
+ // ============================================
66
+ @include mat.core();
50
67
  @include mat.all-component-themes($ns-add-in-theme);
51
68
 
52
69
  @font-face {
@@ -74,7 +91,89 @@ $ns-add-in-theme: mat.define-dark-theme(
74
91
  src: url("../../assets/fonts/gilroy/Gilroy-Thin_0.ttf");
75
92
  }
76
93
 
77
- body {
94
+ @layer base {
95
+ .active-link {
96
+ @apply px-3 py-2 rounded-full bg-primary text-white;
97
+ }
98
+
99
+ .h1 {
100
+ @apply text-[48px] leading-tight md:text-[55px] md:leading-[1.3] mb-4 font-bold;
101
+ }
102
+
103
+ .h2 {
104
+ @apply text-[33px] leading-tight md:text-[46px] md:leading-[1.3] mb-4 font-bold;
105
+ }
106
+
107
+ .h3 {
108
+ @apply text-[26px] leading-tight md:text-[36px] md:leading-[1.3] mb-4 font-semibold;
109
+ }
110
+
111
+ p {
112
+ @apply leading-[1.3] text-gray-30 text-[14px];
113
+ }
114
+ }
115
+
116
+ @layer utilities {
117
+ .btn-white {
118
+ @apply medium-15 bg-white px-7 py-3 text-tertiary;
119
+ }
120
+
121
+ .btn-light {
122
+ @apply medium-15 bg-primary px-7 py-3 text-tertiary;
123
+ }
124
+
125
+ .btn-dark {
126
+ @apply ring-1 ring-tertiary medium-12 px-[14px] py-[7px] text-white transition-all rounded-full outset-shadow hover:bg-primary;
127
+ }
128
+
129
+ .btn-dark-outline {
130
+ @apply ring-1 ring-tertiary medium-15 bg-transparent px-7 py-[10px] text-tertiary transition-all hover:bg-tertiary hover:text-white;
131
+ }
132
+
133
+ .btn-secondary {
134
+ @apply ring-1 ring-secondary medium-15 bg-secondary px-7 py-[10px] text-white transition-all hover:bg-tertiary hover:ring-tertiary;
135
+ }
136
+
137
+ .max-container {
138
+ @apply mx-auto max-w-[1440px];
139
+ }
140
+
141
+ .padding-container {
142
+ @apply px-6 lg:px-14 3xl:px-0;
143
+ }
144
+
145
+ .max-padd-container {
146
+ @apply mx-auto max-w-[1440px] px-5 lg:px-14 3xl:px-0;
147
+ }
148
+ .max-padd-container-none {
149
+ @apply mx-auto max-w-[1440px] px-0 lg:px-0 3xl:px-0;
150
+ }
151
+ .max-padd-container2 {
152
+ @apply mx-auto max-w-[1440px] px-6 lg:px-7 3xl:px-0;
153
+ }
154
+
155
+ .flexCenter {
156
+ @apply flex items-center justify-center;
157
+ }
158
+
159
+ .flexBetween {
160
+ @apply flex items-center justify-between;
161
+ }
162
+
163
+ .flexStart {
164
+ @apply flex items-center justify-start;
165
+ }
166
+
167
+ .flexEnd {
168
+ @apply flex items-center justify-end;
169
+ }
170
+ }
171
+
172
+ // ============================================
173
+ // REMAINING CSS
174
+ // ============================================
175
+
176
+ .itinerary-lib {
78
177
  background: linear-gradient(
79
178
  191deg,
80
179
  $background-color-1 61.33%,
@@ -82,15 +181,30 @@ body {
82
181
  );
83
182
  background-repeat: no-repeat;
84
183
  background-attachment: fixed;
85
- }
184
+ margin: 0;
185
+ font-family: Gilroy-Regular;
86
186
 
87
- * {
88
- color: $text-color-3;
89
- }
187
+ * {
188
+ color: $text-color-3;
189
+ }
90
190
 
91
- @tailwind base;
92
- @tailwind components;
93
- @tailwind utilities;
191
+ .shadow-inset {
192
+ box-shadow: inset -3px -3px 10px rgba(255, 255, 255, 0.3);
193
+ }
194
+
195
+ .button-shadow {
196
+ box-shadow:
197
+ -5.744px -5.744px 11.487px 0px rgba(16, 16, 16, 0) inset,
198
+ 3.282px 1.641px 3.282px 0px $box-shadow-1 inset,
199
+ 2.462px 2.462px 4.923px 0px $box-shadow-2 inset,
200
+ -2.462px -2.462px 4.923px 0px rgba(0, 0, 0, 0.32) inset,
201
+ 4.923px 4.923px 9.846px 0px $box-shadow-3,
202
+ -4.102px -4.102px 8.205px 0px $box-shadow-4,
203
+ 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65),
204
+ -4.102px -4.102px 13.128px -2.462px rgba(203, 199, 209, 0.25);
205
+ background: $background-color-1;
206
+ }
207
+ }
94
208
 
95
209
  .bg-color {
96
210
  background: linear-gradient(
@@ -99,70 +213,292 @@ body {
99
213
  $background-color-10
100
214
  );
101
215
  /* Add other CSS properties as needed */
102
- }
103
216
 
104
- .shadow-inset {
105
- box-shadow: inset -3px -3px 10px rgba(255, 255, 255, 0.3);
106
- }
217
+ .text-shadow {
218
+ text-shadow:
219
+ 0px 0px 3.282px $text-color-3,
220
+ 0px 0px 16.41px $scroll-color,
221
+ 0px 0px 16.41px $scroll-color;
222
+ }
107
223
 
108
- .outset-shadow {
109
- box-shadow: -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25);
110
- }
111
- .outset-downshadow {
112
- box-shadow:
113
- -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25),
114
- 4px 4px 13.13px -1.46px rgba(0, 0, 0, 0.804);
115
- }
224
+ input[type="checkbox"]:checked {
225
+ color: white;
226
+ background-color: $scroll-color;
227
+ }
116
228
 
117
- .button-shadow {
118
- box-shadow:
119
- -5.744px -5.744px 11.487px 0px rgba(16, 16, 16, 0) inset,
120
- 3.282px 1.641px 3.282px 0px $box-shadow-1 inset,
121
- 2.462px 2.462px 4.923px 0px $box-shadow-2 inset,
122
- -2.462px -2.462px 4.923px 0px rgba(0, 0, 0, 0.32) inset,
123
- 4.923px 4.923px 9.846px 0px $box-shadow-3,
124
- -4.102px -4.102px 8.205px 0px $box-shadow-4,
125
- 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65),
126
- -4.102px -4.102px 13.128px -2.462px rgba(203, 199, 209, 0.25);
127
- background: $background-color-1;
128
- }
229
+ .searchbar-shadow {
230
+ box-shadow:
231
+ 13.949px 18.051px 16.41px 2.051px rgba(17, 16, 20, 0.7) inset,
232
+ -1.641px -1.641px 6.564px 0px rgba(203, 199, 209, 0.5) inset;
233
+ }
129
234
 
130
- .btn-selectable {
131
- --padding-start: 1.1em !important;
132
- --padding-end: 1.1em !important;
133
- }
235
+ .searchbar-shadow:checked {
236
+ box-shadow: transparent !important ;
237
+ }
238
+ .searchbar-shadow:focus {
239
+ box-shadow: transparent !important ;
240
+ }
241
+ .inset-shadow {
242
+ box-shadow:
243
+ 13.949px 18.051px 16.41px 2.051px rgba(17, 16, 20, 0.7) inset,
244
+ -1.641px -1.641px 6.564px 0px rgba(0, 0, 0, 0.5) inset;
245
+ }
134
246
 
135
- .btn-selectable.selected[_ngcontent-ng-c3164006478]::part(native) {
136
- background: none !important;
137
- }
138
- .text-shadow {
139
- text-shadow:
140
- 0px 0px 3.282px $text-color-3,
141
- 0px 0px 16.41px $scroll-color,
142
- 0px 0px 16.41px $scroll-color;
143
- }
247
+ .modal-height {
248
+ --lib-max--content-height: 1000px !important;
249
+ }
144
250
 
145
- .searchbar-shadow {
146
- box-shadow:
147
- 13.949px 18.051px 16.41px 2.051px rgba(17, 16, 20, 0.7) inset,
148
- -1.641px -1.641px 6.564px 0px rgba(203, 199, 209, 0.5) inset;
149
- }
251
+ .textbox-1 {
252
+ width: 100% !important;
253
+ padding: 0px !important;
254
+ }
255
+
256
+ .card-menu-bg {
257
+ border-radius: 6.564px !important;
258
+ background: linear-gradient(
259
+ 180deg,
260
+ $background-color-12 0%,
261
+ $background-color-13 100%
262
+ ) !important;
263
+ box-shadow:
264
+ 0px 1.641px 3.282px 0px rgba(0, 0, 0, 0.25),
265
+ 0px 3.282px 3.282px 0px rgba(0, 0, 0, 0.25),
266
+ 1.641px -1.641px 2.462px 0px rgba(0, 0, 0, 0.4) inset,
267
+ 0px -1.641px 6.564px 0px rgba(255, 255, 255, 0.2) inset !important;
268
+ }
269
+
270
+ .custom-heading-section-heading {
271
+ width: 100%;
272
+ padding: 8px 4px;
273
+ }
274
+
275
+ .bottom-rounded-container {
276
+ width: 100%;
277
+ height: 60px;
278
+ border-bottom-right-radius: 13px;
279
+ border-bottom-left-radius: 13px;
280
+ background: #27242c;
281
+
282
+ box-shadow:
283
+ 4px 4px 8px rgba(0, 0, 0, 0.6),
284
+ -4px -4px 8px rgba(60, 60, 60, 0.3);
285
+ }
286
+
287
+ .top-rounded-container {
288
+ width: 100%;
289
+ border-top-left-radius: 13.13px;
290
+ border-top-right-radius: 13.13px;
291
+ background: rgba(33, 31, 36, 1);
292
+ box-shadow: 4.1px 4.1px 77.95px 0px rgba(255, 255, 255, 0.32);
293
+ box-shadow: -2.46px -2.46px 13.13px 0px rgba(255, 255, 255, 0.1);
294
+ }
295
+
296
+ .small-radio {
297
+ height: 27px;
298
+ width: 27px;
299
+ }
300
+
301
+ ::-webkit-scrollbar-track {
302
+ background-color: var(
303
+ --secondary-color
304
+ ) !important; /* Change this to your desired track color */
305
+ }
306
+
307
+ /* Customize scrollbar thumb */
308
+ ::-webkit-scrollbar-thumb {
309
+ background-color: var(
310
+ --secondary-color
311
+ ) !important; /* Change this to your desired thumb color */
312
+ border-radius: 5px; /* Optional: Rounded corners on scrollbar thumb */
313
+ }
314
+
315
+ /* Customize scrollbar corners */
316
+ ::-webkit-scrollbar-corner {
317
+ background-color: var(
318
+ --secondary-color
319
+ ) !important; /* Change this to your desired corner color */
320
+ }
321
+
322
+ :host .button-native {
323
+ border-radius: var(--border-radius);
324
+ -moz-osx-font-smoothing: grayscale;
325
+ -webkit-font-smoothing: antialiased;
326
+ margin-left: 0;
327
+ margin-right: 0;
328
+ margin-top: 0;
329
+ margin-bottom: 0;
330
+ -webkit-padding-start: var(--padding-start);
331
+ padding-inline-start: var(--padding-start);
332
+ -webkit-padding-end: var(--padding-end);
333
+ padding-inline-end: var(--padding-end);
334
+ padding-top: var(--padding-top);
335
+ padding-bottom: var(--padding-bottom);
336
+ font-family: inherit;
337
+ font-size: inherit;
338
+ font-style: inherit;
339
+ font-weight: inherit;
340
+ letter-spacing: inherit;
341
+ text-decoration: inherit;
342
+ text-indent: inherit;
343
+ text-overflow: inherit;
344
+ text-transform: inherit;
345
+ text-align: inherit;
346
+ white-space: inherit;
347
+ color: inherit;
348
+ display: -ms-flexbox;
349
+ display: flex;
350
+ position: relative;
351
+ -ms-flex-align: center;
352
+ align-items: center;
353
+ width: 100%;
354
+ height: 100%;
355
+ min-height: inherit;
356
+ -webkit-transition: var(--transition);
357
+ transition: var(--transition);
358
+ border-width: var(--border-width);
359
+ border-style: var(--border-style);
360
+ border-color: var(--border-color);
361
+ outline: none;
362
+ background: var(--background);
363
+ line-height: 1;
364
+ -webkit-box-shadow: var(--box-shadow);
365
+ box-shadow: var(--box-shadow);
366
+ contain: layout style;
367
+ cursor: pointer;
368
+ opacity: var(--opacity);
369
+ overflow: var(--overflow);
370
+ z-index: 0;
371
+ -webkit-box-sizing: border-box;
372
+ box-sizing: border-box;
373
+ background: transparent;
374
+ -webkit-appearance: none;
375
+ -moz-appearance: none;
376
+ appearance: none;
377
+ background: transparent !important;
378
+ }
379
+
380
+ ion-modal.lib-bottom-modal.adapt-to-content-height .wrapper .dynamic-content {
381
+ margin-top: 30px;
382
+ }
383
+
384
+ .primary-percentage-bar {
385
+ --lib-percentage-buffer-background-color: rgb(44, 41, 48);
386
+ --lib-percentage-inner-background-color: white;
387
+ --lib-percentage-inner-box-shadow: 0px 0px 10px 2px rgba(255, 52, 125, 1);
388
+ --lib-percentage-height: 5px;
389
+ }
390
+
391
+ .maps-100vh .map-container {
392
+ height: calc(100vh - 75px) !important;
393
+ }
394
+
395
+ ion-range::part(knob) {
396
+ top: 26% !important;
397
+ }
398
+
399
+ .toggle-sm .lib-toggle-wrapper {
400
+ width: 75px !important;
401
+ }
402
+
403
+ .toggle-sm .lib-toggle-container__thumb--move-right {
404
+ cx: 45px !important;
405
+ }
406
+
407
+ .toggle-sm .lib-toggle-container {
408
+ width: 4em !important;
409
+ }
410
+
411
+ .checkbox-sm {
412
+ --size: 20px !important;
413
+ }
414
+
415
+ lib-image-deck {
416
+ left: 0;
417
+ }
418
+
419
+ .mat-mdc-menu-panel.lib-btn-menu-panel .mat-mdc-menu-content:not(:empty) {
420
+ padding-top: 3px !important;
421
+ padding-bottom: 8px !important;
422
+ }
423
+ .mat-mdc-menu-item {
424
+ margin-bottom: -7px !important;
425
+ }
426
+ .select-all-confirm {
427
+ display: none;
428
+ }
150
429
 
151
- .searchbar-shadow:checked {
152
- box-shadow: transparent !important ;
430
+ .color-gray-1 {
431
+ color: #bdbdbd;
432
+ }
433
+
434
+ .rounded-2 .input-group-wrapper {
435
+ border-radius: 24px !important;
436
+ }
437
+
438
+ lib-input-field-select {
439
+ --border-radius: 100px;
440
+ --input-field-margin: 0;
441
+ --label-font-size-floated: 11.0084px;
442
+ --label-color: rgba(255, 255, 255, 0.5);
443
+ --label-position-left: 4px;
444
+ --label-position-top: 14px;
445
+ --label-float-position-top: -3px;
446
+ --label-padding: 0px;
447
+ --label-font-family: "Gilroy-Regular", serif;
448
+ --label-font-style: normal;
449
+ --label-font-weight: 400;
450
+ --label-font-size: 14px;
451
+ --label-line-height: 160%;
452
+ --input-font-color: #fff;
453
+ --input-font-family: "Gilroy-Regular", serif;
454
+ --input-font-size: 16px;
455
+ --input-icon-color: #fe3c72;
456
+ --input-height: 48px;
457
+ --input-width: 100%;
458
+ --input-border: none;
459
+ --input-field-box-shadow:
460
+ inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7),
461
+ inset -2px -2px 8px rgba(203, 199, 209, 0.5);
462
+ --border: 3px solid #fe3c72;
463
+ --input-number-filed-font: "Open Sans", sans-serif;
464
+ --dropdown-background: linear-gradient(
465
+ 191.18deg,
466
+ #27242c 61.33%,
467
+ #0c0b0e 101.43%
468
+ );
469
+ --input-field-color: #fff --input-width: 100%;
470
+ --input-height: 48px;
471
+ --border-radius: 100px;
472
+ --input-icon-color: #fe3c72;
473
+ --dropdown-background: linear-gradient(
474
+ 191.18deg,
475
+ #27242c 61.33%,
476
+ #0c0b0e 101.43%
477
+ );
478
+ --input-font-family: "Gilroy-Regular", serif;
479
+ --label-color: rgba(255, 255, 255, 0.5);
480
+ --input-field-box-shadow:
481
+ inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7),
482
+ inset -2px -2px 8px rgba(203, 199, 209, 0.5);
483
+ }
484
+
485
+ .p-float-label .p-inputwrapper-filled ~ label {
486
+ top: -0.5rem !important;
487
+ font-size: 12px;
488
+ }
489
+
490
+ .p-dropdown-item {
491
+ padding: 0 0.5rem;
492
+ }
153
493
  }
154
- .searchbar-shadow:focus {
155
- box-shadow: transparent !important ;
494
+
495
+ .outset-shadow {
496
+ box-shadow: -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25);
156
497
  }
157
- .inset-shadow {
498
+ .outset-downshadow {
158
499
  box-shadow:
159
- 13.949px 18.051px 16.41px 2.051px rgba(17, 16, 20, 0.7) inset,
160
- -1.641px -1.641px 6.564px 0px rgba(0, 0, 0, 0.5) inset;
161
- }
162
-
163
- input[type="checkbox"]:checked {
164
- color: white;
165
- background-color: $scroll-color;
500
+ -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25),
501
+ 4px 4px 13.13px -1.46px rgba(0, 0, 0, 0.804);
166
502
  }
167
503
 
168
504
  .background-gradient {
@@ -185,10 +521,6 @@ input[type="checkbox"]:checked {
185
521
  margin-left: 10px;
186
522
  }
187
523
 
188
- .modal-height {
189
- --lib-max--content-height: 1000px !important;
190
- }
191
-
192
524
  .foodbox {
193
525
  border-radius: 82.05px;
194
526
  background: var(--Secondary, $background-color-11);
@@ -197,11 +529,6 @@ input[type="checkbox"]:checked {
197
529
  3.282px 3.282px 6.564px 0px rgba(0, 0, 0, 0.89);
198
530
  }
199
531
 
200
- .textbox-1 {
201
- width: 100% !important;
202
- padding: 0px !important;
203
- }
204
-
205
532
  .divider {
206
533
  width: 100%;
207
534
  border: 4.1px solid white;
@@ -242,120 +569,13 @@ input[type="checkbox"]:checked {
242
569
  }
243
570
 
244
571
  .normal-text-gray {
245
- color: #BDBDBD;
572
+ color: #bdbdbd;
246
573
  }
247
574
 
248
575
  .normal-text-gray-2 {
249
576
  color: #939195;
250
577
  }
251
578
 
252
- .card-menu-bg {
253
- border-radius: 6.564px !important;
254
- background: linear-gradient(
255
- 180deg,
256
- $background-color-12 0%,
257
- $background-color-13 100%
258
- ) !important;
259
- box-shadow:
260
- 0px 1.641px 3.282px 0px rgba(0, 0, 0, 0.25),
261
- 0px 3.282px 3.282px 0px rgba(0, 0, 0, 0.25),
262
- 1.641px -1.641px 2.462px 0px rgba(0, 0, 0, 0.4) inset,
263
- 0px -1.641px 6.564px 0px rgba(255, 255, 255, 0.2) inset !important;
264
- }
265
-
266
- @layer base {
267
- .active-link {
268
- @apply px-3 py-2 rounded-full bg-primary text-white;
269
- }
270
-
271
- .h1 {
272
- @apply text-[48px] leading-tight md:text-[55px] md:leading-[1.3] mb-4 font-bold;
273
- }
274
-
275
- .h2 {
276
- @apply text-[33px] leading-tight md:text-[46px] md:leading-[1.3] mb-4 font-bold;
277
- }
278
-
279
- .h3 {
280
- @apply text-[26px] leading-tight md:text-[36px] md:leading-[1.3] mb-4 font-semibold;
281
- }
282
-
283
- p {
284
- @apply leading-[1.3] text-gray-30 text-[14px];
285
- }
286
- }
287
-
288
- @layer utilities {
289
- .btn-white {
290
- @apply medium-15 bg-white px-7 py-3 text-tertiary;
291
- }
292
-
293
- .btn-light {
294
- @apply medium-15 bg-primary px-7 py-3 text-tertiary;
295
- }
296
-
297
- .btn-dark {
298
- @apply ring-1 ring-tertiary medium-12 px-[14px] py-[7px] text-white transition-all rounded-full outset-shadow hover:bg-primary;
299
- }
300
-
301
- .btn-dark-outline {
302
- @apply ring-1 ring-tertiary medium-15 bg-transparent px-7 py-[10px] text-tertiary transition-all hover:bg-tertiary hover:text-white;
303
- }
304
-
305
- .btn-secondary {
306
- @apply ring-1 ring-secondary medium-15 bg-secondary px-7 py-[10px] text-white transition-all hover:bg-tertiary hover:ring-tertiary;
307
- }
308
-
309
- .max-container {
310
- @apply mx-auto max-w-[1440px];
311
- }
312
-
313
- .padding-container {
314
- @apply px-6 lg:px-14 3xl:px-0;
315
- }
316
-
317
- .max-padd-container {
318
- @apply mx-auto max-w-[1440px] px-5 lg:px-14 3xl:px-0;
319
- }
320
- .max-padd-container-none {
321
- @apply mx-auto max-w-[1440px] px-0 lg:px-0 3xl:px-0;
322
- }
323
- .max-padd-container2 {
324
- @apply mx-auto max-w-[1440px] px-6 lg:px-7 3xl:px-0;
325
- }
326
-
327
- .flexCenter {
328
- @apply flex items-center justify-center;
329
- }
330
-
331
- .flexBetween {
332
- @apply flex items-center justify-between;
333
- }
334
-
335
- .flexStart {
336
- @apply flex items-center justify-start;
337
- }
338
-
339
- .flexEnd {
340
- @apply flex items-center justify-end;
341
- }
342
- }
343
-
344
- :root {
345
- --primary-color: $background-color-5;
346
- --secondary-color: $scroll-color;
347
- }
348
-
349
- body {
350
- margin: 0;
351
- font-family: Gilroy-Regular;
352
- }
353
-
354
- .custom-heading-section-heading {
355
- width: 100%;
356
- padding: 8px 4px;
357
- }
358
-
359
579
  .discard {
360
580
  color: $text-color-3;
361
581
  text-shadow:
@@ -369,231 +589,21 @@ body {
369
589
  line-height: 160%;
370
590
  }
371
591
 
372
- .small-radio {
373
- height: 27px;
374
- width: 27px;
375
- }
376
-
377
- .bottom-rounded-container {
378
- width: 100%;
379
- height: 60px;
380
- border-bottom-right-radius: 13px;
381
- border-bottom-left-radius: 13px;
382
- background: #27242c;
383
-
384
- box-shadow:
385
- 4px 4px 8px rgba(0, 0, 0, 0.6),
386
- -4px -4px 8px rgba(60, 60, 60, 0.3);
387
- }
388
-
389
- .top-rounded-container {
390
- width: 100%;
391
- border-top-left-radius: 13.13px;
392
- border-top-right-radius: 13.13px;
393
- background: rgba(33, 31, 36, 1);
394
- box-shadow: 4.1px 4.1px 77.95px 0px rgba(255, 255, 255, 0.32);
395
- box-shadow: -2.46px -2.46px 13.13px 0px rgba(255, 255, 255, 0.1);
396
- }
397
-
398
592
  .drawer-shadow {
399
593
  box-shadow:
400
594
  -2.462px -2.462px 13.128px 0px rgba(255, 255, 255, 0.1),
401
595
  4.102px 4.102px 77.948px 0px rgba(255, 255, 255, 0.32);
402
596
  }
403
597
 
404
- ::-webkit-scrollbar-track {
405
- background-color: var(
406
- --secondary-color
407
- ) !important; /* Change this to your desired track color */
408
- }
409
-
410
- /* Customize scrollbar thumb */
411
- ::-webkit-scrollbar-thumb {
412
- background-color: var(
413
- --secondary-color
414
- ) !important; /* Change this to your desired thumb color */
415
- border-radius: 5px; /* Optional: Rounded corners on scrollbar thumb */
416
- }
417
-
418
- /* Customize scrollbar corners */
419
- ::-webkit-scrollbar-corner {
420
- background-color: var(
421
- --secondary-color
422
- ) !important; /* Change this to your desired corner color */
423
- }
424
-
425
598
  .fading-line {
426
599
  display: none;
427
600
  }
428
601
 
429
- :host .button-native {
430
- border-radius: var(--border-radius);
431
- -moz-osx-font-smoothing: grayscale;
432
- -webkit-font-smoothing: antialiased;
433
- margin-left: 0;
434
- margin-right: 0;
435
- margin-top: 0;
436
- margin-bottom: 0;
437
- -webkit-padding-start: var(--padding-start);
438
- padding-inline-start: var(--padding-start);
439
- -webkit-padding-end: var(--padding-end);
440
- padding-inline-end: var(--padding-end);
441
- padding-top: var(--padding-top);
442
- padding-bottom: var(--padding-bottom);
443
- font-family: inherit;
444
- font-size: inherit;
445
- font-style: inherit;
446
- font-weight: inherit;
447
- letter-spacing: inherit;
448
- text-decoration: inherit;
449
- text-indent: inherit;
450
- text-overflow: inherit;
451
- text-transform: inherit;
452
- text-align: inherit;
453
- white-space: inherit;
454
- color: inherit;
455
- display: -ms-flexbox;
456
- display: flex;
457
- position: relative;
458
- -ms-flex-align: center;
459
- align-items: center;
460
- width: 100%;
461
- height: 100%;
462
- min-height: inherit;
463
- -webkit-transition: var(--transition);
464
- transition: var(--transition);
465
- border-width: var(--border-width);
466
- border-style: var(--border-style);
467
- border-color: var(--border-color);
468
- outline: none;
469
- background: var(--background);
470
- line-height: 1;
471
- -webkit-box-shadow: var(--box-shadow);
472
- box-shadow: var(--box-shadow);
473
- contain: layout style;
474
- cursor: pointer;
475
- opacity: var(--opacity);
476
- overflow: var(--overflow);
477
- z-index: 0;
478
- -webkit-box-sizing: border-box;
479
- box-sizing: border-box;
480
- background: transparent;
481
- -webkit-appearance: none;
482
- -moz-appearance: none;
483
- appearance: none;
484
- background: transparent !important;
485
- }
486
-
487
- ion-modal.lib-bottom-modal.adapt-to-content-height .wrapper .dynamic-content {
488
- margin-top: 30px;
489
- }
490
-
491
- .primary-percentage-bar {
492
- --lib-percentage-buffer-background-color: rgb(44, 41, 48);
493
- --lib-percentage-inner-background-color: white;
494
- --lib-percentage-inner-box-shadow: 0px 0px 10px 2px rgba(255, 52, 125, 1);
495
- --lib-percentage-height: 5px;
496
- }
497
-
498
- .maps-100vh .map-container {
499
- height: calc(100vh - 75px) !important;
500
- }
501
-
502
- ion-range::part(knob) {
503
- top: 26% !important;
504
- }
505
-
506
- .toggle-sm .lib-toggle-wrapper {
507
- width: 75px !important;
508
- }
509
-
510
- .toggle-sm .lib-toggle-container__thumb--move-right {
511
- cx: 45px !important;
512
- }
513
-
514
- .toggle-sm .lib-toggle-container {
515
- width: 4em !important;
516
- }
517
-
518
- .checkbox-sm {
519
- --size: 20px !important;
520
- }
521
-
522
- lib-image-deck {
523
- left: 0;
524
- }
525
-
526
- .mat-mdc-menu-panel.lib-btn-menu-panel .mat-mdc-menu-content:not(:empty) {
527
- padding-top: 3px !important;
528
- padding-bottom: 8px !important;
529
- }
530
- .mat-mdc-menu-item {
531
- margin-bottom: -7px !important;
532
- }
533
- .select-all-confirm {
534
- display: none;
535
- }
536
-
537
- .color-gray-1 {
538
- color: #bdbdbd;
539
- }
540
-
541
- .rounded-2 .input-group-wrapper {
542
- border-radius: 24px !important;
543
- }
544
-
545
- lib-input-field-select {
546
- --border-radius: 100px;
547
- --input-field-margin: 0;
548
- --label-font-size-floated: 11.0084px;
549
- --label-color: rgba(255, 255, 255, 0.5);
550
- --label-position-left: 4px;
551
- --label-position-top: 14px;
552
- --label-float-position-top: -3px;
553
- --label-padding: 0px;
554
- --label-font-family: "Gilroy-Regular", serif;
555
- --label-font-style: normal;
556
- --label-font-weight: 400;
557
- --label-font-size: 14px;
558
- --label-line-height: 160%;
559
- --input-font-color: #fff;
560
- --input-font-family: "Gilroy-Regular", serif;
561
- --input-font-size: 16px;
562
- --input-icon-color: #fe3c72;
563
- --input-height: 48px;
564
- --input-width: 100%;
565
- --input-border: none;
566
- --input-field-box-shadow:
567
- inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7),
568
- inset -2px -2px 8px rgba(203, 199, 209, 0.5);
569
- --border: 3px solid #fe3c72;
570
- --input-number-filed-font: "Open Sans", sans-serif;
571
- --dropdown-background: linear-gradient(
572
- 191.18deg,
573
- #27242c 61.33%,
574
- #0c0b0e 101.43%
575
- );
576
- --input-field-color: #fff --input-width: 100%;
577
- --input-height: 48px;
578
- --border-radius: 100px;
579
- --input-icon-color: #fe3c72;
580
- --dropdown-background: linear-gradient(
581
- 191.18deg,
582
- #27242c 61.33%,
583
- #0c0b0e 101.43%
584
- );
585
- --input-font-family: "Gilroy-Regular", serif;
586
- --label-color: rgba(255, 255, 255, 0.5);
587
- --input-field-box-shadow:
588
- inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7),
589
- inset -2px -2px 8px rgba(203, 199, 209, 0.5);
590
- }
591
-
592
- .p-float-label .p-inputwrapper-filled ~ label {
593
- top: -0.5rem !important;
594
- font-size: 12px;
602
+ .btn-selectable {
603
+ --padding-start: 1.1em !important;
604
+ --padding-end: 1.1em !important;
595
605
  }
596
606
 
597
- .p-dropdown-item {
598
- padding: 0 0.5rem;
599
- }
607
+ .btn-selectable.selected[_ngcontent-ng-c3164006478]::part(native) {
608
+ background: none !important;
609
+ }