@qite/tide-components 1.0.10 → 1.0.12

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 (81) hide show
  1. package/build/build-cjs/index.js +753 -480
  2. package/build/build-cjs/src/booking-wizard/features/booking/selectors.d.ts +1 -0
  3. package/build/build-cjs/src/booking-wizard/features/travelers-form/validate-form.d.ts +2 -1
  4. package/build/build-cjs/src/booking-wizard/types.d.ts +8 -1
  5. package/build/build-cjs/src/shared/booking/travelers-form.d.ts +8 -3
  6. package/build/build-esm/index.js +755 -482
  7. package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts +1 -0
  8. package/build/build-esm/src/booking-wizard/features/travelers-form/validate-form.d.ts +2 -1
  9. package/build/build-esm/src/booking-wizard/types.d.ts +8 -1
  10. package/build/build-esm/src/shared/booking/travelers-form.d.ts +8 -3
  11. package/package.json +2 -2
  12. package/styles/abstracts/_mixins.scss +74 -74
  13. package/styles/abstracts/_variables.scss +57 -57
  14. package/styles/base/_fonts.scss +2 -2
  15. package/styles/base/_normalize.scss +227 -227
  16. package/styles/base/_typography.scss +35 -35
  17. package/styles/booking-joker-variables.scss +596 -596
  18. package/styles/booking-product-variables.scss +330 -330
  19. package/styles/booking-product.scss +438 -438
  20. package/styles/booking-qsm-variables.scss +501 -501
  21. package/styles/booking-qsm.scss +52 -52
  22. package/styles/booking-search-results-variables.scss +734 -734
  23. package/styles/booking-search-results.scss +53 -53
  24. package/styles/booking-wizard-variables.scss +603 -603
  25. package/styles/booking-wizard.scss +61 -61
  26. package/styles/components/_accordion.scss +67 -67
  27. package/styles/components/_animations.scss +39 -39
  28. package/styles/components/_base.scss +107 -107
  29. package/styles/components/_booking.scss +906 -906
  30. package/styles/components/_breadcrumb.scss +92 -92
  31. package/styles/components/_button.scss +238 -238
  32. package/styles/components/_checkbox.scss +230 -230
  33. package/styles/components/_contact.scss +255 -255
  34. package/styles/components/_content.scss +336 -336
  35. package/styles/components/_cta.scss +238 -238
  36. package/styles/components/_date-list.scss +41 -41
  37. package/styles/components/_date-range-picker.scss +223 -223
  38. package/styles/components/_decrement-increment.scss +35 -35
  39. package/styles/components/_dropdown.scss +77 -77
  40. package/styles/components/_error.scss +50 -50
  41. package/styles/components/_faq.scss +30 -30
  42. package/styles/components/_flight-option.scss +1432 -1432
  43. package/styles/components/_flyin.scss +830 -830
  44. package/styles/components/_footer.scss +135 -135
  45. package/styles/components/_form.scss +1704 -1693
  46. package/styles/components/_gallery.scss +317 -317
  47. package/styles/components/_header.scss +113 -113
  48. package/styles/components/_image-with-text.scss +206 -206
  49. package/styles/components/_img-slider.scss +175 -175
  50. package/styles/components/_info-message.scss +75 -75
  51. package/styles/components/_input.scss +35 -35
  52. package/styles/components/_list.scss +185 -185
  53. package/styles/components/_loader.scss +152 -152
  54. package/styles/components/_login.scss +140 -140
  55. package/styles/components/_map-view.scss +1100 -1100
  56. package/styles/components/_mixins.scss +579 -579
  57. package/styles/components/_navbar.scss +765 -765
  58. package/styles/components/_passenger-picker.scss +306 -306
  59. package/styles/components/_phone-input.scss +8 -8
  60. package/styles/components/_placeholders.scss +165 -165
  61. package/styles/components/_pricing-summary.scss +163 -163
  62. package/styles/components/_qsm.scss +17 -17
  63. package/styles/components/_radiobutton.scss +170 -170
  64. package/styles/components/_search.scss +2197 -2197
  65. package/styles/components/_select-wrapper.scss +81 -81
  66. package/styles/components/_slider.scss +128 -128
  67. package/styles/components/_spinner.scss +29 -29
  68. package/styles/components/_step-indicators.scss +187 -187
  69. package/styles/components/_table.scss +81 -81
  70. package/styles/components/_tide-form.scss +578 -578
  71. package/styles/components/_tree.scss +648 -648
  72. package/styles/components/_typeahead.scss +275 -275
  73. package/styles/components/_variables.scss +89 -89
  74. package/styles/content-blocks-variables.scss +543 -543
  75. package/styles/content-blocks.scss +66 -66
  76. package/styles/font.scss +2 -2
  77. package/styles/qsm/_calendar.scss +274 -274
  78. package/styles/qsm/_qsm.scss +1097 -1097
  79. package/styles/search.scss +1200 -1200
  80. package/styles/tide-form-variables.scss +275 -275
  81. package/styles/tide-form.scss +56 -56
@@ -1,255 +1,255 @@
1
- @use '../components/mixins' as mixins;
2
-
3
- .contact {
4
- display: flex;
5
- flex-direction: column;
6
- gap: 20px;
7
-
8
- &__card {
9
- display: flex;
10
- flex-direction: column;
11
- gap: 30px;
12
- background-color: white;
13
- border: none;
14
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15
- border-radius: 24px;
16
- padding: 30px 30px;
17
-
18
- @include mixins.media-sm {
19
- padding: 40px 60px;
20
- }
21
-
22
- &--headbooker {
23
- display: flex;
24
- flex-direction: column;
25
- gap: 20px;
26
- background: #f8f8fd;
27
-
28
- @include mixins.media-md {
29
- flex-direction: row;
30
- align-items: center;
31
- justify-content: space-between;
32
- }
33
-
34
- h4 {
35
- font-weight: 600;
36
- }
37
- }
38
- }
39
-
40
- &__title {
41
- display: flex;
42
- align-items: center;
43
- gap: 5px;
44
- color: var(--tide-booking-heading-color);
45
- margin: 0;
46
-
47
- h3,
48
- h4,
49
- h5 {
50
- margin-bottom: 0px;
51
- }
52
-
53
- span {
54
- color: var(--tide-booking-text-medium);
55
- }
56
- }
57
-
58
- &__radio {
59
- display: flex;
60
- flex-direction: column;
61
- gap: 10px;
62
- position: relative;
63
- &--error {
64
- position: absolute;
65
- left: 0px;
66
- bottom: -20px;
67
- transition: all 0.3s ease-in-out;
68
- margin: 0px 0px;
69
- margin-bottom: 0px;
70
- font-size: 14px;
71
- color: var(--tide-booking-invalid-dark);
72
- }
73
-
74
- .radiobutton {
75
- &__input {
76
- cursor: pointer;
77
- margin-top: 0px;
78
- }
79
- }
80
- }
81
-
82
- &__form {
83
- display: flex;
84
- flex-wrap: wrap;
85
- gap: 20px;
86
- row-gap: 25px;
87
-
88
- &__group {
89
- position: relative;
90
- display: flex;
91
- flex-direction: column;
92
- flex: 1 1 100%;
93
-
94
- &--75 {
95
- @include mixins.media-sm {
96
- flex: 1 1 calc(75% - 20px);
97
- }
98
- }
99
-
100
- &--66 {
101
- @include mixins.media-sm {
102
- flex: 1 1 calc(66.666% - 20px);
103
- }
104
- }
105
-
106
- &--50 {
107
- @include mixins.media-sm {
108
- flex: 1 1 calc(50% - 10px);
109
- }
110
- }
111
-
112
- &--33 {
113
- @include mixins.media-sm {
114
- flex: 1 1 calc(50% - 10px);
115
- }
116
-
117
- @include mixins.media-lg {
118
- flex: 1 1 calc(33.333% - 14px);
119
- }
120
- }
121
-
122
- &--25 {
123
- @include mixins.media-sm {
124
- flex: 1 1 calc(50% - 10px);
125
- }
126
-
127
- @include mixins.media-lg {
128
- flex: 1 1 calc(25% - 15px);
129
- }
130
- }
131
-
132
- &:has(.contact__error) {
133
- input,
134
- textarea {
135
- // border-color: var(--tide-booking-invalid-dark);
136
- background: var(--tide-booking-invalid-light);
137
-
138
- &::placeholder {
139
- color: var(--tide-booking-invalid-dark);
140
- }
141
- }
142
- }
143
- }
144
-
145
- &__label {
146
- margin-bottom: 10px;
147
- color: var(--tide-booking-input-label-color);
148
- font-weight: var(--tide-booking-input-label-font-weight);
149
- font-style: var(--tide-booking-input-label-font-style);
150
- }
151
-
152
- &__actions {
153
- max-width: 200px;
154
- }
155
- }
156
-
157
- &__error {
158
- position: absolute;
159
- left: 0px;
160
- bottom: -15px;
161
- transition: all 0.3s ease-in-out;
162
- margin: 0px 15px;
163
- margin-bottom: 0px;
164
- font-size: 14px;
165
- color: var(--tide-booking-invalid-dark);
166
- }
167
-
168
- &__dropdown {
169
- position: relative;
170
-
171
- &--error {
172
- .contact__dropdown__trigger {
173
- background: var(--tide-booking-invalid-light);
174
- color: var(--tide-booking-invalid-dark);
175
- }
176
- }
177
-
178
- &__trigger {
179
- width: 100%;
180
- height: 44px;
181
- padding: 0 12px;
182
- color: var(--tide-booking-dropdown-color);
183
- background: var(--tide-booking-dropdown-background);
184
- border: var(--tide-booking-dropdown-border);
185
- border-radius: var(--tide-booking-dropdown-border-radius);
186
- transition: all 0.3s ease-in-out;
187
-
188
- display: flex;
189
- align-items: center;
190
- justify-content: space-between;
191
-
192
- cursor: pointer;
193
- font-size: var(--tide-booking-font-size-body-lg);
194
- line-height: 1;
195
-
196
- &:hover {
197
- border: var(--tide-booking-dropdown-border-hover);
198
- color: var(--tide-booking-dropdown-color-hover);
199
- background: var(--tide-booking-dropdown-background-hover);
200
- }
201
-
202
- &:focus {
203
- outline: none;
204
- border: var(--tide-booking-dropdown-border-focus);
205
- color: var(--tide-booking-dropdown-color-focus);
206
- background: var(--tide-booking-dropdown-background-focus);
207
- }
208
- }
209
-
210
- &__menu {
211
- position: absolute;
212
- z-index: 10;
213
- top: calc(100% + 4px);
214
- left: 0;
215
- right: 0;
216
-
217
- background: #fff;
218
- border: 1px solid #ccc;
219
- border-radius: 4px;
220
-
221
- max-height: 220px;
222
- overflow-y: auto;
223
- @extend %scrollbar-thin;
224
- padding: 0px 0;
225
- margin: 0px;
226
- }
227
-
228
- &__option {
229
- width: 100%;
230
- padding: 15px 15px;
231
-
232
- background: none;
233
- border: none;
234
- text-align: left;
235
-
236
- cursor: pointer;
237
- font-size: 14px;
238
- line-height: 1.5;
239
-
240
- @include media-md {
241
- font-size: 16px;
242
- }
243
-
244
- &:hover,
245
- &--active {
246
- background: #f2f2f2;
247
- }
248
-
249
- &:focus {
250
- outline: none;
251
- background: #eaeaea;
252
- }
253
- }
254
- }
255
- }
1
+ @use '../components/mixins' as mixins;
2
+
3
+ .contact {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: 20px;
7
+
8
+ &__card {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: 30px;
12
+ background-color: white;
13
+ border: none;
14
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
15
+ border-radius: 24px;
16
+ padding: 30px 30px;
17
+
18
+ @include mixins.media-sm {
19
+ padding: 40px 60px;
20
+ }
21
+
22
+ &--headbooker {
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: 20px;
26
+ background: #f8f8fd;
27
+
28
+ @include mixins.media-md {
29
+ flex-direction: row;
30
+ align-items: center;
31
+ justify-content: space-between;
32
+ }
33
+
34
+ h4 {
35
+ font-weight: 600;
36
+ }
37
+ }
38
+ }
39
+
40
+ &__title {
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 5px;
44
+ color: var(--tide-booking-heading-color);
45
+ margin: 0;
46
+
47
+ h3,
48
+ h4,
49
+ h5 {
50
+ margin-bottom: 0px;
51
+ }
52
+
53
+ span {
54
+ color: var(--tide-booking-text-medium);
55
+ }
56
+ }
57
+
58
+ &__radio {
59
+ display: flex;
60
+ flex-direction: column;
61
+ gap: 10px;
62
+ position: relative;
63
+ &--error {
64
+ position: absolute;
65
+ left: 0px;
66
+ bottom: -20px;
67
+ transition: all 0.3s ease-in-out;
68
+ margin: 0px 0px;
69
+ margin-bottom: 0px;
70
+ font-size: 14px;
71
+ color: var(--tide-booking-invalid-dark);
72
+ }
73
+
74
+ .radiobutton {
75
+ &__input {
76
+ cursor: pointer;
77
+ margin-top: 0px;
78
+ }
79
+ }
80
+ }
81
+
82
+ &__form {
83
+ display: flex;
84
+ flex-wrap: wrap;
85
+ gap: 20px;
86
+ row-gap: 25px;
87
+
88
+ &__group {
89
+ position: relative;
90
+ display: flex;
91
+ flex-direction: column;
92
+ flex: 1 1 100%;
93
+
94
+ &--75 {
95
+ @include mixins.media-sm {
96
+ flex: 1 1 calc(75% - 20px);
97
+ }
98
+ }
99
+
100
+ &--66 {
101
+ @include mixins.media-sm {
102
+ flex: 1 1 calc(66.666% - 20px);
103
+ }
104
+ }
105
+
106
+ &--50 {
107
+ @include mixins.media-sm {
108
+ flex: 1 1 calc(50% - 10px);
109
+ }
110
+ }
111
+
112
+ &--33 {
113
+ @include mixins.media-sm {
114
+ flex: 1 1 calc(50% - 10px);
115
+ }
116
+
117
+ @include mixins.media-lg {
118
+ flex: 1 1 calc(33.333% - 14px);
119
+ }
120
+ }
121
+
122
+ &--25 {
123
+ @include mixins.media-sm {
124
+ flex: 1 1 calc(50% - 10px);
125
+ }
126
+
127
+ @include mixins.media-lg {
128
+ flex: 1 1 calc(25% - 15px);
129
+ }
130
+ }
131
+
132
+ &:has(.contact__error) {
133
+ input,
134
+ textarea {
135
+ // border-color: var(--tide-booking-invalid-dark);
136
+ background: var(--tide-booking-invalid-light);
137
+
138
+ &::placeholder {
139
+ color: var(--tide-booking-invalid-dark);
140
+ }
141
+ }
142
+ }
143
+ }
144
+
145
+ &__label {
146
+ margin-bottom: 10px;
147
+ color: var(--tide-booking-input-label-color);
148
+ font-weight: var(--tide-booking-input-label-font-weight);
149
+ font-style: var(--tide-booking-input-label-font-style);
150
+ }
151
+
152
+ &__actions {
153
+ max-width: 200px;
154
+ }
155
+ }
156
+
157
+ &__error {
158
+ position: absolute;
159
+ left: 0px;
160
+ bottom: -15px;
161
+ transition: all 0.3s ease-in-out;
162
+ margin: 0px 15px;
163
+ margin-bottom: 0px;
164
+ font-size: 14px;
165
+ color: var(--tide-booking-invalid-dark);
166
+ }
167
+
168
+ &__dropdown {
169
+ position: relative;
170
+
171
+ &--error {
172
+ .contact__dropdown__trigger {
173
+ background: var(--tide-booking-invalid-light);
174
+ color: var(--tide-booking-invalid-dark);
175
+ }
176
+ }
177
+
178
+ &__trigger {
179
+ width: 100%;
180
+ height: 44px;
181
+ padding: 0 12px;
182
+ color: var(--tide-booking-dropdown-color);
183
+ background: var(--tide-booking-dropdown-background);
184
+ border: var(--tide-booking-dropdown-border);
185
+ border-radius: var(--tide-booking-dropdown-border-radius);
186
+ transition: all 0.3s ease-in-out;
187
+
188
+ display: flex;
189
+ align-items: center;
190
+ justify-content: space-between;
191
+
192
+ cursor: pointer;
193
+ font-size: var(--tide-booking-font-size-body-lg);
194
+ line-height: 1;
195
+
196
+ &:hover {
197
+ border: var(--tide-booking-dropdown-border-hover);
198
+ color: var(--tide-booking-dropdown-color-hover);
199
+ background: var(--tide-booking-dropdown-background-hover);
200
+ }
201
+
202
+ &:focus {
203
+ outline: none;
204
+ border: var(--tide-booking-dropdown-border-focus);
205
+ color: var(--tide-booking-dropdown-color-focus);
206
+ background: var(--tide-booking-dropdown-background-focus);
207
+ }
208
+ }
209
+
210
+ &__menu {
211
+ position: absolute;
212
+ z-index: 10;
213
+ top: calc(100% + 4px);
214
+ left: 0;
215
+ right: 0;
216
+
217
+ background: #fff;
218
+ border: 1px solid #ccc;
219
+ border-radius: 4px;
220
+
221
+ max-height: 220px;
222
+ overflow-y: auto;
223
+ @extend %scrollbar-thin;
224
+ padding: 0px 0;
225
+ margin: 0px;
226
+ }
227
+
228
+ &__option {
229
+ width: 100%;
230
+ padding: 15px 15px;
231
+
232
+ background: none;
233
+ border: none;
234
+ text-align: left;
235
+
236
+ cursor: pointer;
237
+ font-size: 14px;
238
+ line-height: 1.5;
239
+
240
+ @include media-md {
241
+ font-size: 16px;
242
+ }
243
+
244
+ &:hover,
245
+ &--active {
246
+ background: #f2f2f2;
247
+ }
248
+
249
+ &:focus {
250
+ outline: none;
251
+ background: #eaeaea;
252
+ }
253
+ }
254
+ }
255
+ }