@qite/tide-booking-component 1.2.5 → 1.3.0

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 (141) hide show
  1. package/.vs/ProjectSettings.json +3 -3
  2. package/.vs/VSWorkspaceState.json +5 -5
  3. package/README.md +8 -8
  4. package/build/build-cjs/booking-wizard/components/print-offer-button.d.ts +17 -0
  5. package/build/build-cjs/booking-wizard/types.d.ts +7 -0
  6. package/build/build-cjs/booking-wizard/use-offer-printer.d.ts +13 -0
  7. package/build/build-cjs/index.js +223 -72
  8. package/build/build-cjs/shared/utils/localization-util.d.ts +5 -0
  9. package/build/build-cjs/shared/utils/tide-api-utils.d.ts +1 -0
  10. package/build/build-esm/booking-wizard/components/print-offer-button.d.ts +17 -0
  11. package/build/build-esm/booking-wizard/types.d.ts +7 -0
  12. package/build/build-esm/booking-wizard/use-offer-printer.d.ts +13 -0
  13. package/build/build-esm/index.js +224 -73
  14. package/build/build-esm/shared/utils/localization-util.d.ts +5 -0
  15. package/build/build-esm/shared/utils/tide-api-utils.d.ts +1 -0
  16. package/package.json +75 -75
  17. package/rollup.config.js +23 -23
  18. package/src/booking-product/components/age-select.tsx +35 -35
  19. package/src/booking-product/components/amount-input.tsx +78 -78
  20. package/src/booking-product/components/date-range-picker/calendar-day.tsx +58 -58
  21. package/src/booking-product/components/date-range-picker/calendar.tsx +178 -178
  22. package/src/booking-product/components/date-range-picker/index.tsx +196 -196
  23. package/src/booking-product/components/dates.tsx +136 -136
  24. package/src/booking-product/components/footer.tsx +69 -69
  25. package/src/booking-product/components/header.tsx +79 -79
  26. package/src/booking-product/components/icon.tsx +251 -251
  27. package/src/booking-product/components/product.tsx +314 -314
  28. package/src/booking-product/components/rating.tsx +21 -21
  29. package/src/booking-product/components/rooms.tsx +195 -195
  30. package/src/booking-product/index.tsx +30 -30
  31. package/src/booking-product/settings-context.ts +14 -14
  32. package/src/booking-product/types.ts +28 -28
  33. package/src/booking-product/utils/api.ts +25 -25
  34. package/src/booking-product/utils/price.ts +29 -29
  35. package/src/booking-wizard/api-settings-slice.ts +24 -24
  36. package/src/booking-wizard/components/icon.tsx +508 -508
  37. package/src/booking-wizard/components/labeled-input.tsx +64 -64
  38. package/src/booking-wizard/components/labeled-select.tsx +69 -69
  39. package/src/booking-wizard/components/message.tsx +34 -34
  40. package/src/booking-wizard/components/multi-range-filter.tsx +113 -113
  41. package/src/booking-wizard/components/print-offer-button.tsx +66 -0
  42. package/src/booking-wizard/components/product-card.tsx +37 -37
  43. package/src/booking-wizard/components/step-indicator.tsx +51 -51
  44. package/src/booking-wizard/components/step-route.tsx +27 -27
  45. package/src/booking-wizard/declarations.d.ts +4 -4
  46. package/src/booking-wizard/features/booking/api.ts +49 -49
  47. package/src/booking-wizard/features/booking/booking-self-contained.tsx +384 -384
  48. package/src/booking-wizard/features/booking/booking-slice.ts +662 -662
  49. package/src/booking-wizard/features/booking/booking.tsx +356 -356
  50. package/src/booking-wizard/features/booking/constants.ts +16 -16
  51. package/src/booking-wizard/features/booking/selectors.ts +441 -441
  52. package/src/booking-wizard/features/confirmation/confirmation.tsx +97 -97
  53. package/src/booking-wizard/features/error/error.tsx +78 -78
  54. package/src/booking-wizard/features/flight-options/flight-filter.tsx +432 -432
  55. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +385 -385
  56. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +229 -229
  57. package/src/booking-wizard/features/flight-options/flight-option.tsx +81 -81
  58. package/src/booking-wizard/features/flight-options/flight-utils.ts +516 -516
  59. package/src/booking-wizard/features/flight-options/index.tsx +196 -196
  60. package/src/booking-wizard/features/price-details/price-details-api.ts +24 -24
  61. package/src/booking-wizard/features/price-details/price-details-slice.ts +178 -178
  62. package/src/booking-wizard/features/price-details/util.ts +155 -155
  63. package/src/booking-wizard/features/product-options/no-options.tsx +21 -21
  64. package/src/booking-wizard/features/product-options/none-option.tsx +120 -120
  65. package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +64 -64
  66. package/src/booking-wizard/features/product-options/option-booking-group.tsx +216 -216
  67. package/src/booking-wizard/features/product-options/option-item.tsx +317 -317
  68. package/src/booking-wizard/features/product-options/option-pax-card.tsx +201 -201
  69. package/src/booking-wizard/features/product-options/option-pax-group.tsx +175 -175
  70. package/src/booking-wizard/features/product-options/option-room.tsx +321 -321
  71. package/src/booking-wizard/features/product-options/option-unit-group.tsx +198 -198
  72. package/src/booking-wizard/features/product-options/option-units-card.tsx +185 -185
  73. package/src/booking-wizard/features/product-options/options-form.tsx +563 -459
  74. package/src/booking-wizard/features/room-options/index.tsx +187 -187
  75. package/src/booking-wizard/features/room-options/room-utils.ts +190 -190
  76. package/src/booking-wizard/features/room-options/room.tsx +160 -160
  77. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +75 -75
  78. package/src/booking-wizard/features/sidebar/index.tsx +76 -76
  79. package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +68 -68
  80. package/src/booking-wizard/features/sidebar/sidebar-util.ts +177 -177
  81. package/src/booking-wizard/features/sidebar/sidebar.tsx +364 -364
  82. package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +25 -25
  83. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +25 -25
  84. package/src/booking-wizard/features/summary/summary-flight.tsx +39 -39
  85. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +69 -69
  86. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +63 -63
  87. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +66 -66
  88. package/src/booking-wizard/features/summary/summary-slice.ts +28 -28
  89. package/src/booking-wizard/features/summary/summary.tsx +674 -674
  90. package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +164 -164
  91. package/src/booking-wizard/features/travelers-form/travelers-form.tsx +754 -754
  92. package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +101 -101
  93. package/src/booking-wizard/features/travelers-form/validate-form.ts +245 -245
  94. package/src/booking-wizard/index.tsx +36 -36
  95. package/src/booking-wizard/settings-context.ts +67 -60
  96. package/src/booking-wizard/store.ts +31 -31
  97. package/src/booking-wizard/types.ts +283 -276
  98. package/src/booking-wizard/use-offer-printer.ts +136 -0
  99. package/src/index.ts +4 -4
  100. package/src/shared/components/loader.tsx +16 -16
  101. package/src/shared/translations/en-GB.json +237 -232
  102. package/src/shared/translations/fr-BE.json +238 -233
  103. package/src/shared/translations/nl-BE.json +237 -232
  104. package/src/shared/types.ts +4 -4
  105. package/src/shared/utils/class-util.ts +9 -9
  106. package/src/shared/utils/localization-util.ts +62 -62
  107. package/src/shared/utils/query-string-util.ts +119 -119
  108. package/src/shared/utils/tide-api-utils.ts +36 -36
  109. package/styles/booking-product-variables.scss +394 -394
  110. package/styles/booking-product.scss +446 -446
  111. package/styles/booking-wizard-variables.scss +873 -871
  112. package/styles/booking-wizard.scss +59 -59
  113. package/styles/components/_animations.scss +39 -39
  114. package/styles/components/_base.scss +107 -107
  115. package/styles/components/_booking.scss +879 -879
  116. package/styles/components/_button.scss +238 -238
  117. package/styles/components/_checkbox.scss +219 -219
  118. package/styles/components/_cta.scss +208 -208
  119. package/styles/components/_date-list.scss +41 -41
  120. package/styles/components/_date-range-picker.scss +225 -225
  121. package/styles/components/_decrement-increment.scss +35 -35
  122. package/styles/components/_dropdown.scss +72 -72
  123. package/styles/components/_flight-option.scss +1429 -1429
  124. package/styles/components/_form.scss +1583 -1583
  125. package/styles/components/_info-message.scss +71 -71
  126. package/styles/components/_input.scss +25 -25
  127. package/styles/components/_list.scss +187 -187
  128. package/styles/components/_loader.scss +72 -72
  129. package/styles/components/_mixins.scss +550 -550
  130. package/styles/components/_placeholders.scss +166 -166
  131. package/styles/components/_pricing-summary.scss +155 -155
  132. package/styles/components/_qsm.scss +17 -17
  133. package/styles/components/_radiobutton.scss +170 -170
  134. package/styles/components/_select-wrapper.scss +80 -80
  135. package/styles/components/_spinner.scss +29 -29
  136. package/styles/components/_step-indicators.scss +168 -168
  137. package/styles/components/_table.scss +81 -81
  138. package/styles/components/_tree.scss +530 -530
  139. package/styles/components/_typeahead.scss +281 -281
  140. package/styles/components/_variables.scss +89 -89
  141. package/tsconfig.json +24 -24
package/styles/booking-product-variables.scss CHANGED
@@ -1,394 +1,394 @@
1
- :root {
2
- // COLOR ASSIGNMENTS
3
- --tide-booking-color-primary: #333399;
4
- --tide-booking-color-primary-gradient: linear-gradient(
5
- 204.08deg,
6
- #333399 1.64%,
7
- #282878 84.55%
8
- );
9
- --tide-booking-color-primary-fade: #ebebf8;
10
- --tide-booking-color-primary-extra-fade: #f8f8fd;
11
- --tide-booking-color-primary-light: #cdcdee;
12
- --tide-booking-color-primary-dark: #282878;
13
- --tide-booking-color-secondary: #1f9470;
14
- --tide-booking-color-secondary-light: #11b684;
15
-
16
- --tide-booking-color-star: #ecb911;
17
- // --tide-booking-invalid: #e74c3c;
18
- --tide-booking-invalid: #871d11;
19
- --tide-booking-invalid-light: #fce8e6;
20
- --tide-booking-invalid-dark: #871d11;
21
- --tide-booking-price-increase: #e81212;
22
- --tide-booking-price-decrease: #19a364;
23
-
24
- --tide-booking-white: #ffffff;
25
- --tide-booking-gray-light: #f5f5f5;
26
- --tide-booking-gray-xlight: #fbfbfb;
27
- --tide-booking-gray--medium-light: #efefef;
28
- --tide-booking-gray-background-light: #e2e2e2;
29
- --tide-booking-gray-border-light: #f3f3f3;
30
- --tide-booking-gray-checkbox-bg: #bdbdbd;
31
- --tide-booking-gray-medium: #cbcbcb;
32
- --tide-booking-gray-dark: #666666;
33
- --tide-booking-black: #0a0a0a;
34
- --tide-booking-transparent: transparent;
35
-
36
- // BACKGROUNDS
37
- --tide-booking-bg: #fafafa;
38
-
39
- // TYPOGRAPHY
40
- --tide-booking-font-heading: "Outfit", serif;
41
- --tide-booking-font-body: "Outfit", serif;
42
- --tide-booking-font-handwritten: "Outfit", serif;
43
-
44
- --tide-booking-font-size-body: 14px;
45
- --tide-booking-font-size-body-lg: 16px;
46
- --tide-booking-line-height-body: 1;
47
-
48
- // GRID
49
- --tide-booking-container-wide: 1690px;
50
- --tide-booking-container-medium: 1200px;
51
- --tide-booking-container-small: 900px;
52
- --tide-booking-container-article: 650px;
53
- --tide-booking-gutter: 15px;
54
-
55
- // MEDIA QUERIES
56
- --tide-booking-screen-xs: 576px;
57
- --tide-booking-screen-sm: 768px;
58
- --tide-booking-screen-md: 992px;
59
- --tide-booking-screen-lg: 1200px;
60
- --tide-booking-screen-xl: 1650px;
61
- --tide-booking-screen-xxl: 1920px;
62
-
63
- //HEADINGS
64
- --tide-booking-heading-color: var(--tide-booking-black);
65
-
66
- //h1
67
- --tide-booking-h1: 22px;
68
- --tide-booking-h1-sm: 25px;
69
- --tide-booking-h1-xl: 25px;
70
-
71
- //h2
72
- --tide-booking-h2: 18px;
73
- --tide-booking-h2-sm: 23px;
74
- --tide-booking-h2-xl: 23px;
75
-
76
- //h3
77
- --tide-booking-h3: 20px;
78
- --tide-booking-h3-sm: 23px;
79
- --tide-booking-h3-xl: 23px;
80
-
81
- //h4
82
- --tide-booking-h4: 18px;
83
- --tide-booking-h4-sm: 20px;
84
- --tide-booking-h4-xl: 20px;
85
-
86
- //h5
87
- --tide-booking-h5: 18px;
88
- --tide-booking-h5-xl: 20px;
89
-
90
- //h6
91
- --tide-booking-h6: 16px;
92
- --tide-booking-h6-md: 18px;
93
-
94
- //a
95
- --tide-booking-a-color: var(--tide-booking-color-primary);
96
- --tide-booking-a-text-decoration: underline;
97
- --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
98
- --tide-booking-a-text-decoration-hover: underline;
99
- --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
100
- --tide-booking-a-text-decoration-focus: underline;
101
-
102
- //BOOKING PRODUCT
103
- --tide-booking-component-background: var(--tide-booking-white);
104
- --tide-booking-component-radius: 10px;
105
- --tide-booking-component-border: 1.5px solid
106
- var(--tide-booking-color-primary-fade);
107
-
108
- //HEADER
109
- --tide-booking-component-header-background: var(
110
- --tide-booking-color-primary-gradient
111
- );
112
- --tide-booking-component-header-color: var(--tide-booking-white);
113
- --tide-booking-component-header-border-radius: 10px 10px 0px 0px;
114
-
115
- --tide-booking-component-header-star-rating: var(--tide-booking-color-star);
116
- --tide-booking-component-header-title-color: var(--tide-booking-white);
117
- --tide-booking-component-header-title-font: var(--tide-booking-font-heading);
118
-
119
- --tide-booking-component-header-icon-color: var(--tide-booking-white);
120
-
121
- //price header
122
- --tide-booking-component-header-price-font-family: var(
123
- --tide-booking-font-body
124
- );
125
- --tide-booking-component-header-price-font-size--mobile: 22px;
126
- --tide-booking-component-header-price-font-size--desktop: 25px;
127
- --tide-booking-component-header-price-font-weight: 400;
128
- --tide-booking-component-header-price-color: var(--tide-booking-white);
129
-
130
- //small fontsize
131
- --tide-booking-small-font-size--mobile: 13px;
132
- --tide-booking-small-font-size--desktop: 15px;
133
-
134
- //CTA
135
- --tide-booking-cta-height: 40px;
136
- --tide-booking-cta-height-xs: 45px;
137
- --tide-booking-cta-width: 100%;
138
- --tide-booking-cta-width-xs: auto;
139
- --tide-booking-cta-padding: 10px 20px;
140
- --tide-booking-cta-color: var(--tide-booking-white);
141
- --tide-booking-cta-background: linear-gradient(
142
- 204.08deg,
143
- #11b684 1.64%,
144
- #1f9470 84.55%
145
- );
146
- --tide-booking-cta-font-family: var(--tide-booking-font-body);
147
- --tide-booking-cta-font-size: 16px;
148
- --tide-booking-cta-font-size-xs: 18px;
149
- --tide-booking-cta-font-weight: 400;
150
- --tide-booking-cta-text-decoration: none;
151
- --tide-booking-cta-border: none;
152
- --tide-booking-cta-border-radius: 5px;
153
-
154
- //CTA__ICON
155
- --tide-booking-cta-icon-color: var(--tide-booking-white);
156
- --tide-booking-cta-icon-size: 16px;
157
-
158
- //CTA__HOVER
159
- --tide-booking-cta-background-hover: linear-gradient(
160
- 204.08deg,
161
- #11b684 1.64%,
162
- #1f9470 84.55%
163
- );
164
- --tide-booking-cta-color-hover: var(--tide-booking-white);
165
- --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
166
- --tide-booking-cta-border-hover: none;
167
- --tide-booking-cta-text-decoration-hover: none;
168
-
169
- //CTA__FOCUS
170
- --tide-booking-cta-background-focus: linear-gradient(
171
- 204.08deg,
172
- #11b684 1.64%,
173
- #1f9470 84.55%
174
- );
175
- --tide-booking-cta-color-focus: var(--tide-booking-white);
176
- --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
177
- --tide-booking-cta-border-focus: none;
178
- --tide-booking-cta-text-decoration-focus: none;
179
-
180
- //CTA--SECONDARY
181
- --tide-booking-cta-height-secondary: 25px;
182
- --tide-booking-cta-height-xs-secondary: 30px;
183
- --tide-booking-cta-width-secondary: auto;
184
- --tide-booking-cta-padding-secondary: 0px;
185
- --tide-booking-cta-margin-secondary: 0px 0 0 0;
186
- --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
187
- --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
188
- --tide-booking-cta-border-secondary: none;
189
- --tide-booking-cta-border-radius-secondary: 5px;
190
- --tide-booking-cta-text-decoration-secondary: underline;
191
- --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
192
- --tide-booking-cta-font-size-secondary: 16px;
193
- --tide-booking-cta-font-size-xs-secondary: 18px;
194
- --tide-booking-cta-font-weight-secondary: 400;
195
-
196
- //CTA--SECONDARY__ICON
197
- --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
198
- --tide-booking-cta-icon-size-secondary: 16px;
199
-
200
- //CTA--SECONDARY__HOVER
201
- --tide-booking-cta-background-secondary-hover: var(
202
- --tide-booking-transparent
203
- );
204
- --tide-booking-cta-color-secondary-hover: var(
205
- --tide-booking-color-primary-dark
206
- );
207
- --tide-booking-cta-icon-color-secondary-hover: var(
208
- --tide-booking-color-primary-dark
209
- );
210
- --tide-booking-cta-border-secondary-hover: none;
211
- --tide-booking-cta-text-decoration-secondary-hover: underline;
212
-
213
- //CTA--SECONDARY__FOCUS
214
- --tide-booking-cta-background-secondary-focus: var(
215
- --tide-booking-transparent
216
- );
217
- --tide-booking-cta-color-secondary-focus: var(
218
- --tide-booking-color-primary-dark
219
- );
220
- --tide-booking-cta-icon-color-secondary-focus: var(
221
- --tide-booking-color-primary-dark
222
- );
223
- --tide-booking-cta-border-secondary-focus: none;
224
- --tide-booking-cta-text-decoration-secondary-focus: underline;
225
-
226
- //INCREMENT__DECREMENT
227
- //INCREMENT__DECREMENT--btns
228
- --tide-booking-decrement-increment-width: 30px;
229
- --tide-booking-decrement-increment-height: 30px;
230
- --tide-booking-decrement-increment-border-radius: 5px;
231
- --tide-booking-decrement-increment-border: 0px solid
232
- var(--tide-booking-color-primary-fade);
233
- --tide-booking-decrement-increment-background: linear-gradient(
234
- 8.14deg,
235
- #dce1ff 19.75%,
236
- #e5e8fb 65.25%
237
- );
238
- --tide-booking-decrement-increment-color: var(--tide-booking-color-primary);
239
-
240
- //INCREMENT__DECREMENT--btns--icon
241
- --tide-booking-decrement-increment-icon-width: 15px;
242
- --tide-booking-decrement-increment-icon-height: 15px;
243
- --tide-booking-decrement-increment-icon-color: var(
244
- --tide-booking-color-primary
245
- );
246
-
247
- //INCREMENT__DECREMENT--btns--hover
248
- --tide-booking-decrement-increment-background-hover: linear-gradient(
249
- 8.14deg,
250
- #b4c0ff 19.75%,
251
- #c2caf6 65.25%
252
- );
253
- --tide-booking-decrement-increment-color-hover: var(
254
- --tide-booking-color-primary-dark
255
- );
256
- --tide-booking-decrement-increment-border-hover: 0px solid
257
- var(--tide-booking-color-primary-fade);
258
-
259
- //INCREMENT__DECREMENT--btns--icon--hover
260
- --tide-booking-decrement-increment-icon-color-hover: var(
261
- --tide-booking-color-primary-dark
262
- );
263
-
264
- //INCREMENT__DECREMENT--btns--focus
265
- --tide-booking-decrement-increment-background-focus: linear-gradient(
266
- 8.14deg,
267
- #b4c0ff 19.75%,
268
- #c2caf6 65.25%
269
- );
270
- --tide-booking-decrement-increment-color-focus: var(
271
- --tide-booking-color-primary
272
- );
273
- --tide-booking-decrement-increment-border-focus: 0px solid
274
- var(--tide-booking-color-primary-fade);
275
-
276
- //INCREMENT__DECREMENT--btns--icon--focus
277
- --tide-booking-decrement-increment-icon-color-focus: var(
278
- --tide-booking-color-primary-dark
279
- );
280
-
281
- //INCREMENT__DECREMENT--LABEL
282
- --tide-booking-decrement-increment-label-font: var(
283
- --tide-booking-font-size-body
284
- );
285
- --tide-booking-decrement-increment-label-font-weight: 400;
286
- --tide-booking-decrement-increment-label-color: var(--tide-booking-black);
287
-
288
- //INCREMENT__DECREMENT--NUMBER
289
- --tide-booking-decrement-increment-number-font: var(
290
- --tide-booking-font-size-body
291
- );
292
- --tide-booking-decrement-increment-number-font-weight: 400;
293
- --tide-booking-decrement-increment-number-color: var(
294
- --tide-booking-color-primary
295
- );
296
-
297
- //DROPDOWN
298
- --tide-booking-dropdown-background: var(--tide-booking-white);
299
- --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-medium);
300
- --tide-booking-dropdown-border-radius: 5px;
301
- --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
302
-
303
- --tide-booking-dropdown-border-focus: 1.5px solid
304
- var(--tide-booking-color-primary-light);
305
-
306
- --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
307
- --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
308
-
309
- --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
310
-
311
- //DATEPICKER
312
- --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
313
- --tide-booking-datepicker-container-border: 1.5px solid
314
- var(--tide-booking-gray-border-light);
315
- --tide-booking-datepicker-close-color: var(--tide-booking-color-primary);
316
-
317
- --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
318
- --tide-booking-datepicker-prev-next-background: var(
319
- --tide-booking-transparent
320
- );
321
-
322
- --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);
323
-
324
- --tide-booking-datepicker-month-color: var(--tide-booking-black);
325
- --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);
326
-
327
- //DATEPICKER--DAY
328
- --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
329
- --tide-booking-datepicker-day-background: var(--tide-booking-gray-xlight);
330
- --tide-booking-datepicker-day-border: 1.5px solid
331
- var(--tide-booking-gray-border-light);
332
- --tide-booking-datepicker-day-border-radius: 5px;
333
-
334
- //DATEPICKER--DAY--HOVER
335
- --tide-booking-datepicker-day-border-hover: 1.5px solid
336
- var(--tide-booking-color-primary);
337
- --tide-booking-datepicker-day-background-hover: var(
338
- --tide-booking-gray-xlight
339
- );
340
- --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);
341
-
342
- //DATEPICKER--DAY--SELECTED
343
- --tide-booking-datepicker-day-border-selected: 1.5px solid
344
- var(--tide-booking-color-primary);
345
- --tide-booking-datepicker-day-background-selected: var(
346
- --tide-booking-color-primary
347
- );
348
- --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);
349
-
350
- //DATEPICKER--DAY--SELECTED--HOVER
351
- --tide-booking-datepicker-day-border-selected-hover: 1.5px solid
352
- var(--tide-booking-color-primary-light);
353
- --tide-booking-datepicker-day-background-selected-hover: var(
354
- --tide-booking-color-primary-light
355
- );
356
- --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);
357
-
358
- //DATEPICKER--DAY--DISABLED
359
- --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
360
- --tide-booking-datepicker-day-background-disabled: var(
361
- --tide-booking-gray-xlight
362
- );
363
- --tide-booking-datepicker-day-border-disabled: 1.5px solid
364
- var(--tide-booking-gray-border-light);
365
-
366
- //DATEPICKER--DAY--OUTSIDE-MONTH
367
- --tide-booking-datepicker-day-color-outside-month: var(
368
- --tide-booking-gray-medium
369
- );
370
- --tide-booking-datepicker-day-background-outside-month: transparent;
371
- --tide-booking-datepicker-day-border-outside-month: 1.5px solid
372
- var(--tide-booking-gray-border-light);
373
- --tide-booking-datepicker-day-opacity-outside-month: 0.6;
374
-
375
- //DATEPICKER--INPUT
376
- --tide-booking-datepicker-input-height: 45px;
377
- --tide-booking-datepicker-input-height-lg: 55px;
378
- --tide-booking-datepicker-input-background: var(--tide-booking-white);
379
- --tide-booking-datepicker-input-border: 1.5px solid
380
- var(--tide-booking-gray-border-light);
381
- --tide-booking-datepicker-input-border-radius: 5px;
382
- --tide-booking-datepicker-input-color: var(--tide-booking-black);
383
-
384
- --tide-booking-datepicker-input-label-color: var(
385
- --tide-booking-color-primary-dark
386
- );
387
-
388
- //SPINNER
389
- --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
390
- --tide-booking-spinner-border-top-color: #dce1ff;
391
-
392
- //ANIMATION
393
- --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
394
- }
1
+ :root {
2
+ // COLOR ASSIGNMENTS
3
+ --tide-booking-color-primary: #333399;
4
+ --tide-booking-color-primary-gradient: linear-gradient(
5
+ 204.08deg,
6
+ #333399 1.64%,
7
+ #282878 84.55%
8
+ );
9
+ --tide-booking-color-primary-fade: #ebebf8;
10
+ --tide-booking-color-primary-extra-fade: #f8f8fd;
11
+ --tide-booking-color-primary-light: #cdcdee;
12
+ --tide-booking-color-primary-dark: #282878;
13
+ --tide-booking-color-secondary: #1f9470;
14
+ --tide-booking-color-secondary-light: #11b684;
15
+
16
+ --tide-booking-color-star: #ecb911;
17
+ // --tide-booking-invalid: #e74c3c;
18
+ --tide-booking-invalid: #871d11;
19
+ --tide-booking-invalid-light: #fce8e6;
20
+ --tide-booking-invalid-dark: #871d11;
21
+ --tide-booking-price-increase: #e81212;
22
+ --tide-booking-price-decrease: #19a364;
23
+
24
+ --tide-booking-white: #ffffff;
25
+ --tide-booking-gray-light: #f5f5f5;
26
+ --tide-booking-gray-xlight: #fbfbfb;
27
+ --tide-booking-gray--medium-light: #efefef;
28
+ --tide-booking-gray-background-light: #e2e2e2;
29
+ --tide-booking-gray-border-light: #f3f3f3;
30
+ --tide-booking-gray-checkbox-bg: #bdbdbd;
31
+ --tide-booking-gray-medium: #cbcbcb;
32
+ --tide-booking-gray-dark: #666666;
33
+ --tide-booking-black: #0a0a0a;
34
+ --tide-booking-transparent: transparent;
35
+
36
+ // BACKGROUNDS
37
+ --tide-booking-bg: #fafafa;
38
+
39
+ // TYPOGRAPHY
40
+ --tide-booking-font-heading: "Outfit", serif;
41
+ --tide-booking-font-body: "Outfit", serif;
42
+ --tide-booking-font-handwritten: "Outfit", serif;
43
+
44
+ --tide-booking-font-size-body: 14px;
45
+ --tide-booking-font-size-body-lg: 16px;
46
+ --tide-booking-line-height-body: 1;
47
+
48
+ // GRID
49
+ --tide-booking-container-wide: 1690px;
50
+ --tide-booking-container-medium: 1200px;
51
+ --tide-booking-container-small: 900px;
52
+ --tide-booking-container-article: 650px;
53
+ --tide-booking-gutter: 15px;
54
+
55
+ // MEDIA QUERIES
56
+ --tide-booking-screen-xs: 576px;
57
+ --tide-booking-screen-sm: 768px;
58
+ --tide-booking-screen-md: 992px;
59
+ --tide-booking-screen-lg: 1200px;
60
+ --tide-booking-screen-xl: 1650px;
61
+ --tide-booking-screen-xxl: 1920px;
62
+
63
+ //HEADINGS
64
+ --tide-booking-heading-color: var(--tide-booking-black);
65
+
66
+ //h1
67
+ --tide-booking-h1: 22px;
68
+ --tide-booking-h1-sm: 25px;
69
+ --tide-booking-h1-xl: 25px;
70
+
71
+ //h2
72
+ --tide-booking-h2: 18px;
73
+ --tide-booking-h2-sm: 23px;
74
+ --tide-booking-h2-xl: 23px;
75
+
76
+ //h3
77
+ --tide-booking-h3: 20px;
78
+ --tide-booking-h3-sm: 23px;
79
+ --tide-booking-h3-xl: 23px;
80
+
81
+ //h4
82
+ --tide-booking-h4: 18px;
83
+ --tide-booking-h4-sm: 20px;
84
+ --tide-booking-h4-xl: 20px;
85
+
86
+ //h5
87
+ --tide-booking-h5: 18px;
88
+ --tide-booking-h5-xl: 20px;
89
+
90
+ //h6
91
+ --tide-booking-h6: 16px;
92
+ --tide-booking-h6-md: 18px;
93
+
94
+ //a
95
+ --tide-booking-a-color: var(--tide-booking-color-primary);
96
+ --tide-booking-a-text-decoration: underline;
97
+ --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
98
+ --tide-booking-a-text-decoration-hover: underline;
99
+ --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
100
+ --tide-booking-a-text-decoration-focus: underline;
101
+
102
+ //BOOKING PRODUCT
103
+ --tide-booking-component-background: var(--tide-booking-white);
104
+ --tide-booking-component-radius: 10px;
105
+ --tide-booking-component-border: 1.5px solid
106
+ var(--tide-booking-color-primary-fade);
107
+
108
+ //HEADER
109
+ --tide-booking-component-header-background: var(
110
+ --tide-booking-color-primary-gradient
111
+ );
112
+ --tide-booking-component-header-color: var(--tide-booking-white);
113
+ --tide-booking-component-header-border-radius: 10px 10px 0px 0px;
114
+
115
+ --tide-booking-component-header-star-rating: var(--tide-booking-color-star);
116
+ --tide-booking-component-header-title-color: var(--tide-booking-white);
117
+ --tide-booking-component-header-title-font: var(--tide-booking-font-heading);
118
+
119
+ --tide-booking-component-header-icon-color: var(--tide-booking-white);
120
+
121
+ //price header
122
+ --tide-booking-component-header-price-font-family: var(
123
+ --tide-booking-font-body
124
+ );
125
+ --tide-booking-component-header-price-font-size--mobile: 22px;
126
+ --tide-booking-component-header-price-font-size--desktop: 25px;
127
+ --tide-booking-component-header-price-font-weight: 400;
128
+ --tide-booking-component-header-price-color: var(--tide-booking-white);
129
+
130
+ //small fontsize
131
+ --tide-booking-small-font-size--mobile: 13px;
132
+ --tide-booking-small-font-size--desktop: 15px;
133
+
134
+ //CTA
135
+ --tide-booking-cta-height: 40px;
136
+ --tide-booking-cta-height-xs: 45px;
137
+ --tide-booking-cta-width: 100%;
138
+ --tide-booking-cta-width-xs: auto;
139
+ --tide-booking-cta-padding: 10px 20px;
140
+ --tide-booking-cta-color: var(--tide-booking-white);
141
+ --tide-booking-cta-background: linear-gradient(
142
+ 204.08deg,
143
+ #11b684 1.64%,
144
+ #1f9470 84.55%
145
+ );
146
+ --tide-booking-cta-font-family: var(--tide-booking-font-body);
147
+ --tide-booking-cta-font-size: 16px;
148
+ --tide-booking-cta-font-size-xs: 18px;
149
+ --tide-booking-cta-font-weight: 400;
150
+ --tide-booking-cta-text-decoration: none;
151
+ --tide-booking-cta-border: none;
152
+ --tide-booking-cta-border-radius: 5px;
153
+
154
+ //CTA__ICON
155
+ --tide-booking-cta-icon-color: var(--tide-booking-white);
156
+ --tide-booking-cta-icon-size: 16px;
157
+
158
+ //CTA__HOVER
159
+ --tide-booking-cta-background-hover: linear-gradient(
160
+ 204.08deg,
161
+ #11b684 1.64%,
162
+ #1f9470 84.55%
163
+ );
164
+ --tide-booking-cta-color-hover: var(--tide-booking-white);
165
+ --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
166
+ --tide-booking-cta-border-hover: none;
167
+ --tide-booking-cta-text-decoration-hover: none;
168
+
169
+ //CTA__FOCUS
170
+ --tide-booking-cta-background-focus: linear-gradient(
171
+ 204.08deg,
172
+ #11b684 1.64%,
173
+ #1f9470 84.55%
174
+ );
175
+ --tide-booking-cta-color-focus: var(--tide-booking-white);
176
+ --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
177
+ --tide-booking-cta-border-focus: none;
178
+ --tide-booking-cta-text-decoration-focus: none;
179
+
180
+ //CTA--SECONDARY
181
+ --tide-booking-cta-height-secondary: 25px;
182
+ --tide-booking-cta-height-xs-secondary: 30px;
183
+ --tide-booking-cta-width-secondary: auto;
184
+ --tide-booking-cta-padding-secondary: 0px;
185
+ --tide-booking-cta-margin-secondary: 0px 0 0 0;
186
+ --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
187
+ --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
188
+ --tide-booking-cta-border-secondary: none;
189
+ --tide-booking-cta-border-radius-secondary: 5px;
190
+ --tide-booking-cta-text-decoration-secondary: underline;
191
+ --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
192
+ --tide-booking-cta-font-size-secondary: 16px;
193
+ --tide-booking-cta-font-size-xs-secondary: 18px;
194
+ --tide-booking-cta-font-weight-secondary: 400;
195
+
196
+ //CTA--SECONDARY__ICON
197
+ --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
198
+ --tide-booking-cta-icon-size-secondary: 16px;
199
+
200
+ //CTA--SECONDARY__HOVER
201
+ --tide-booking-cta-background-secondary-hover: var(
202
+ --tide-booking-transparent
203
+ );
204
+ --tide-booking-cta-color-secondary-hover: var(
205
+ --tide-booking-color-primary-dark
206
+ );
207
+ --tide-booking-cta-icon-color-secondary-hover: var(
208
+ --tide-booking-color-primary-dark
209
+ );
210
+ --tide-booking-cta-border-secondary-hover: none;
211
+ --tide-booking-cta-text-decoration-secondary-hover: underline;
212
+
213
+ //CTA--SECONDARY__FOCUS
214
+ --tide-booking-cta-background-secondary-focus: var(
215
+ --tide-booking-transparent
216
+ );
217
+ --tide-booking-cta-color-secondary-focus: var(
218
+ --tide-booking-color-primary-dark
219
+ );
220
+ --tide-booking-cta-icon-color-secondary-focus: var(
221
+ --tide-booking-color-primary-dark
222
+ );
223
+ --tide-booking-cta-border-secondary-focus: none;
224
+ --tide-booking-cta-text-decoration-secondary-focus: underline;
225
+
226
+ //INCREMENT__DECREMENT
227
+ //INCREMENT__DECREMENT--btns
228
+ --tide-booking-decrement-increment-width: 30px;
229
+ --tide-booking-decrement-increment-height: 30px;
230
+ --tide-booking-decrement-increment-border-radius: 5px;
231
+ --tide-booking-decrement-increment-border: 0px solid
232
+ var(--tide-booking-color-primary-fade);
233
+ --tide-booking-decrement-increment-background: linear-gradient(
234
+ 8.14deg,
235
+ #dce1ff 19.75%,
236
+ #e5e8fb 65.25%
237
+ );
238
+ --tide-booking-decrement-increment-color: var(--tide-booking-color-primary);
239
+
240
+ //INCREMENT__DECREMENT--btns--icon
241
+ --tide-booking-decrement-increment-icon-width: 15px;
242
+ --tide-booking-decrement-increment-icon-height: 15px;
243
+ --tide-booking-decrement-increment-icon-color: var(
244
+ --tide-booking-color-primary
245
+ );
246
+
247
+ //INCREMENT__DECREMENT--btns--hover
248
+ --tide-booking-decrement-increment-background-hover: linear-gradient(
249
+ 8.14deg,
250
+ #b4c0ff 19.75%,
251
+ #c2caf6 65.25%
252
+ );
253
+ --tide-booking-decrement-increment-color-hover: var(
254
+ --tide-booking-color-primary-dark
255
+ );
256
+ --tide-booking-decrement-increment-border-hover: 0px solid
257
+ var(--tide-booking-color-primary-fade);
258
+
259
+ //INCREMENT__DECREMENT--btns--icon--hover
260
+ --tide-booking-decrement-increment-icon-color-hover: var(
261
+ --tide-booking-color-primary-dark
262
+ );
263
+
264
+ //INCREMENT__DECREMENT--btns--focus
265
+ --tide-booking-decrement-increment-background-focus: linear-gradient(
266
+ 8.14deg,
267
+ #b4c0ff 19.75%,
268
+ #c2caf6 65.25%
269
+ );
270
+ --tide-booking-decrement-increment-color-focus: var(
271
+ --tide-booking-color-primary
272
+ );
273
+ --tide-booking-decrement-increment-border-focus: 0px solid
274
+ var(--tide-booking-color-primary-fade);
275
+
276
+ //INCREMENT__DECREMENT--btns--icon--focus
277
+ --tide-booking-decrement-increment-icon-color-focus: var(
278
+ --tide-booking-color-primary-dark
279
+ );
280
+
281
+ //INCREMENT__DECREMENT--LABEL
282
+ --tide-booking-decrement-increment-label-font: var(
283
+ --tide-booking-font-size-body
284
+ );
285
+ --tide-booking-decrement-increment-label-font-weight: 400;
286
+ --tide-booking-decrement-increment-label-color: var(--tide-booking-black);
287
+
288
+ //INCREMENT__DECREMENT--NUMBER
289
+ --tide-booking-decrement-increment-number-font: var(
290
+ --tide-booking-font-size-body
291
+ );
292
+ --tide-booking-decrement-increment-number-font-weight: 400;
293
+ --tide-booking-decrement-increment-number-color: var(
294
+ --tide-booking-color-primary
295
+ );
296
+
297
+ //DROPDOWN
298
+ --tide-booking-dropdown-background: var(--tide-booking-white);
299
+ --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-medium);
300
+ --tide-booking-dropdown-border-radius: 5px;
301
+ --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
302
+
303
+ --tide-booking-dropdown-border-focus: 1.5px solid
304
+ var(--tide-booking-color-primary-light);
305
+
306
+ --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
307
+ --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
308
+
309
+ --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
310
+
311
+ //DATEPICKER
312
+ --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
313
+ --tide-booking-datepicker-container-border: 1.5px solid
314
+ var(--tide-booking-gray-border-light);
315
+ --tide-booking-datepicker-close-color: var(--tide-booking-color-primary);
316
+
317
+ --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
318
+ --tide-booking-datepicker-prev-next-background: var(
319
+ --tide-booking-transparent
320
+ );
321
+
322
+ --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);
323
+
324
+ --tide-booking-datepicker-month-color: var(--tide-booking-black);
325
+ --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);
326
+
327
+ //DATEPICKER--DAY
328
+ --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
329
+ --tide-booking-datepicker-day-background: var(--tide-booking-gray-xlight);
330
+ --tide-booking-datepicker-day-border: 1.5px solid
331
+ var(--tide-booking-gray-border-light);
332
+ --tide-booking-datepicker-day-border-radius: 5px;
333
+
334
+ //DATEPICKER--DAY--HOVER
335
+ --tide-booking-datepicker-day-border-hover: 1.5px solid
336
+ var(--tide-booking-color-primary);
337
+ --tide-booking-datepicker-day-background-hover: var(
338
+ --tide-booking-gray-xlight
339
+ );
340
+ --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);
341
+
342
+ //DATEPICKER--DAY--SELECTED
343
+ --tide-booking-datepicker-day-border-selected: 1.5px solid
344
+ var(--tide-booking-color-primary);
345
+ --tide-booking-datepicker-day-background-selected: var(
346
+ --tide-booking-color-primary
347
+ );
348
+ --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);
349
+
350
+ //DATEPICKER--DAY--SELECTED--HOVER
351
+ --tide-booking-datepicker-day-border-selected-hover: 1.5px solid
352
+ var(--tide-booking-color-primary-light);
353
+ --tide-booking-datepicker-day-background-selected-hover: var(
354
+ --tide-booking-color-primary-light
355
+ );
356
+ --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);
357
+
358
+ //DATEPICKER--DAY--DISABLED
359
+ --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
360
+ --tide-booking-datepicker-day-background-disabled: var(
361
+ --tide-booking-gray-xlight
362
+ );
363
+ --tide-booking-datepicker-day-border-disabled: 1.5px solid
364
+ var(--tide-booking-gray-border-light);
365
+
366
+ //DATEPICKER--DAY--OUTSIDE-MONTH
367
+ --tide-booking-datepicker-day-color-outside-month: var(
368
+ --tide-booking-gray-medium
369
+ );
370
+ --tide-booking-datepicker-day-background-outside-month: transparent;
371
+ --tide-booking-datepicker-day-border-outside-month: 1.5px solid
372
+ var(--tide-booking-gray-border-light);
373
+ --tide-booking-datepicker-day-opacity-outside-month: 0.6;
374
+
375
+ //DATEPICKER--INPUT
376
+ --tide-booking-datepicker-input-height: 45px;
377
+ --tide-booking-datepicker-input-height-lg: 55px;
378
+ --tide-booking-datepicker-input-background: var(--tide-booking-white);
379
+ --tide-booking-datepicker-input-border: 1.5px solid
380
+ var(--tide-booking-gray-border-light);
381
+ --tide-booking-datepicker-input-border-radius: 5px;
382
+ --tide-booking-datepicker-input-color: var(--tide-booking-black);
383
+
384
+ --tide-booking-datepicker-input-label-color: var(
385
+ --tide-booking-color-primary-dark
386
+ );
387
+
388
+ //SPINNER
389
+ --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
390
+ --tide-booking-spinner-border-top-color: #dce1ff;
391
+
392
+ //ANIMATION
393
+ --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
394
+ }