@qite/tide-booking-component 1.2.5 → 1.3.1

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 +62 -60
  96. package/src/booking-wizard/store.ts +31 -31
  97. package/src/booking-wizard/types.ts +278 -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-wizard-variables.scss CHANGED
@@ -1,871 +1,873 @@
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: 16px;
45
- --tide-booking-font-size-body-lg: 18px;
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: 32.5px;
68
- --tide-booking-h1-sm: 48px;
69
- --tide-booking-h1-xl: 48px;
70
-
71
- //h2
72
- --tide-booking-h2: 24px;
73
- --tide-booking-h2-sm: 30px;
74
- --tide-booking-h2-xl: 30px;
75
-
76
- //h3
77
- --tide-booking-h3: 22px;
78
- --tide-booking-h3-sm: 25px;
79
- --tide-booking-h3-xl: 25px;
80
-
81
- //h4
82
- --tide-booking-h4: 18px;
83
- --tide-booking-h4-sm: 23px;
84
- --tide-booking-h4-xl: 23px;
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
- //TOGGLE-SWITCH
103
- --tide-booking-toggle-switch-background: var(--tide-booking-gray-medium);
104
- --tide-booking-toggle-switch-border-radius: 5px;
105
- --tide-booking-toggle-switch-after-color: var(--tide-booking-white);
106
-
107
- //TOGGLE-SWITCH--TOGGLED
108
- --tide-booking-toggle-switch-background-toggled: var(
109
- --tide-booking-color-primary
110
- );
111
-
112
- //FORM--INPUT
113
- --tide-booking-form-input-background: var(--tide-booking-gray-xlight);
114
- --tide-booking-form-input-border: 1.5px solid
115
- var(--tide-booking-gray--medium-light);
116
- --tide-booking-form-input-border-radius: 5px;
117
-
118
- //FORM--INPUT--FOCUS/ACTIVE
119
- --tide-booking-form-input-border-focus: 1.5px solid
120
- var(--tide-booking-color-primary);
121
-
122
- //FORM--INPUT--PLACEHOLDER
123
- --tide-booking-form-input-placeholder-color: var(--tide-booking-gray-dark);
124
- --tide-booking-form-input-placeholder-font-style: normal;
125
-
126
- //RADIOBUTTON
127
- --tide-booking-radiobutton-border: 1.5px solid
128
- var(--tide-booking-gray-checkbox-bg);
129
- --tide-booking-radiobutton-background: var(--tide-booking-white);
130
- --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
131
- --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
132
- --tide-booking-radiobutton-font-size: 16px;
133
- --tide-booking-radiobutton-font-weight: 400;
134
-
135
- //RADIOBUTTON--INPUT--CHECKED
136
- --tide-booking-radiobutton-input-checked-color-text: var(
137
- --tide-booking-color-primary
138
- );
139
- --tide-booking-radiobutton-input-checked-background: var(
140
- --tide-booking-white
141
- );
142
- --tide-booking-radiobutton-input-checked-border: 1.5px solid
143
- var(--tide-booking-color-primary);
144
-
145
- //CHECKBOX--INPUT--CHECKED--AFTER
146
- --tide-booking-radiobutton-input-checked-after-color: var(
147
- --tide-booking-color-primary
148
- );
149
-
150
- //CHECKBOX
151
- --tide-booking-checkbox-border: 1.5px solid
152
- var(--tide-booking-gray-checkbox-bg);
153
- --tide-booking-checkbox-border-radius: 0px;
154
- --tide-booking-checkbox-background: var(--tide-booking-white);
155
- --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
156
- --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
157
- --tide-booking-checkbox-font-size: 16px;
158
- --tide-booking-checkbox-font-weight: 400;
159
-
160
- //CHECKBOX--INPUT--CHECKED
161
- --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
162
- --tide-booking-checkbox-input-checked-color-text: var(
163
- --tide-booking-color-primary
164
- );
165
- --tide-booking-checkbox-input-checked-background: var(
166
- --tide-booking-color-primary
167
- );
168
- --tide-booking-checkbox-input-checked-border: 1.5px solid
169
- var(--tide-booking-color-primary);
170
-
171
- //SLIDER
172
- --tide-booking-slider-track-background: var(--tide-booking-color-primary);
173
- --tide-booking-slider-range-background: var(--tide-booking-gray-medium);
174
- --tide-booking-slider-thumb-border-color: var(--tide-booking-white);
175
- --tide-booking-slider-thumb-background: var(--tide-booking-color-primary);
176
-
177
- //BOOKING PRODUCT
178
- --tide-booking-component-background: var(--tide-booking-bg);
179
- --tide-booking-component-radius: 10px;
180
- --tide-booking-component-border: 1.5px solid
181
- var(--tide-booking-color-primary-fade);
182
-
183
- //HEADER
184
- --tide-booking-component-header-background: var(
185
- --tide-booking-color-primary-gradient
186
- );
187
- --tide-booking-component-header-color: var(--tide-booking-white);
188
- --tide-booking-component-header-border-radius: 10px 10px 0px 0px;
189
-
190
- --tide-booking-component-header-star-rating: var(--tide-booking-color-star);
191
- --tide-booking-component-header-title-color: var(--tide-booking-white);
192
- --tide-booking-component-header-title-font: var(--tide-booking-font-heading);
193
-
194
- --tide-booking-component-header-icon-color: var(--tide-booking-white);
195
-
196
- //price header
197
- --tide-booking-component-header-price-font-family: var(
198
- --tide-booking-font-body
199
- );
200
- --tide-booking-component-header-price-font-size--mobile: 25px;
201
- --tide-booking-component-header-price-font-size--desktop: 36px;
202
- --tide-booking-component-header-price-font-weight: 400;
203
- --tide-booking-component-header-price-color: var(--tide-booking-white);
204
-
205
- //small fontsize
206
- --tide-booking-small-font-size--mobile: 13px;
207
- --tide-booking-small-font-size--desktop: 15px;
208
-
209
- //CTA
210
- --tide-booking-cta-height: 40px;
211
- --tide-booking-cta-height-xs: 45px;
212
- --tide-booking-cta-width: 100%;
213
- --tide-booking-cta-width-xs: auto;
214
- --tide-booking-cta-padding: 10px 20px;
215
- --tide-booking-cta-color: var(--tide-booking-white);
216
- --tide-booking-cta-background: linear-gradient(
217
- 204.08deg,
218
- #11b684 1.64%,
219
- #1f9470 84.55%
220
- );
221
- --tide-booking-cta-font-family: var(--tide-booking-font-body);
222
- --tide-booking-cta-font-size: 16px;
223
- --tide-booking-cta-font-size-xs: 18px;
224
- --tide-booking-cta-font-weight: 400;
225
- --tide-booking-cta-text-decoration: none;
226
- --tide-booking-cta-border: none;
227
- --tide-booking-cta-border-radius: 5px;
228
-
229
- //CTA__ICON
230
- --tide-booking-cta-icon-color: var(--tide-booking-white);
231
- --tide-booking-cta-icon-size: 16px;
232
-
233
- //CTA__HOVER
234
- --tide-booking-cta-background-hover: linear-gradient(
235
- 204.08deg,
236
- #11b684 1.64%,
237
- #1f9470 84.55%
238
- );
239
- --tide-booking-cta-color-hover: var(--tide-booking-white);
240
- --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
241
- --tide-booking-cta-border-hover: none;
242
- --tide-booking-cta-text-decoration-hover: none;
243
-
244
- //CTA__FOCUS
245
- --tide-booking-cta-background-focus: linear-gradient(
246
- 204.08deg,
247
- #11b684 1.64%,
248
- #1f9470 84.55%
249
- );
250
- --tide-booking-cta-color-focus: var(--tide-booking-white);
251
- --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
252
- --tide-booking-cta-border-focus: none;
253
- --tide-booking-cta-text-decoration-focus: none;
254
-
255
- //CTA--SECONDARY
256
- --tide-booking-cta-height-secondary: 40px;
257
- --tide-booking-cta-height-xs-secondary: 45px;
258
- --tide-booking-cta-width-secondary: auto;
259
- --tide-booking-cta-padding-secondary: 10px 20px;
260
- --tide-booking-cta-margin-secondary: 0px 0 0 0;
261
- --tide-booking-cta-background-secondary: linear-gradient(
262
- 8.14deg,
263
- #dce1ff 19.75%,
264
- #e5e8fb 65.25%
265
- );
266
- --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
267
- --tide-booking-cta-border-secondary: none;
268
- --tide-booking-cta-border-radius-secondary: 5px;
269
- --tide-booking-cta-text-decoration-secondary: none;
270
- --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
271
- --tide-booking-cta-font-size-secondary: 16px;
272
- --tide-booking-cta-font-size-xs-secondary: 18px;
273
- --tide-booking-cta-font-weight-secondary: 400;
274
-
275
- //CTA--SECONDARY__ICON
276
- --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
277
- --tide-booking-cta-icon-size-secondary: 16px;
278
-
279
- //CTA--SECONDARY__HOVER
280
- --tide-booking-cta-background-secondary-hover: linear-gradient(
281
- 8.14deg,
282
- #b4c0ff 19.75%,
283
- #c2caf6 65.25%
284
- );
285
- --tide-booking-cta-color-secondary-hover: var(
286
- --tide-booking-color-primary-dark
287
- );
288
- --tide-booking-cta-icon-color-secondary-hover: var(
289
- --tide-booking-color-primary-dark
290
- );
291
- --tide-booking-cta-border-secondary-hover: none;
292
- --tide-booking-cta-text-decoration-secondary-hover: none;
293
-
294
- //CTA--SECONDARY__FOCUS
295
- --tide-booking-cta-background-secondary-focus: linear-gradient(
296
- 8.14deg,
297
- #b4c0ff 19.75%,
298
- #c2caf6 65.25%
299
- );
300
- --tide-booking-cta-color-secondary-focus: var(
301
- --tide-booking-color-primary-dark
302
- );
303
- --tide-booking-cta-icon-color-secondary-focus: var(
304
- --tide-booking-color-primary-dark
305
- );
306
- --tide-booking-cta-border-secondary-focus: none;
307
- --tide-booking-cta-text-decoration-secondary-focus: none;
308
-
309
- //CTA--SELECT
310
- --tide-booking-cta-background-select: linear-gradient(
311
- 8.14deg,
312
- #dce1ff 19.75%,
313
- #e5e8fb 65.25%
314
- );
315
- --tide-booking-cta-color-select: var(--tide-booking-color-primary);
316
- --tide-booking-cta-border-select: none;
317
- --tide-booking-cta-border-radius-select: 5px;
318
-
319
- //CTA--SELECT--HOVER/FOCUS/ACTIVE
320
- --tide-booking-cta-background-select-hover: linear-gradient(
321
- 8.14deg,
322
- #b4c0ff 19.75%,
323
- #c2caf6 65.25%
324
- );
325
- --tide-booking-cta-color-select-hover: var(--tide-booking-color-primary-dark);
326
- --tide-booking-cta-border-select-hover: none;
327
-
328
- //CTA--SELECTED
329
- --tide-booking-cta-background-selected: var(
330
- --tide-booking-color-primary-gradient
331
- );
332
- --tide-booking-cta-color-selected: var(--tide-booking-white);
333
- --tide-booking-cta-border-selected: none;
334
- --tide-booking-cta-border-radius-selected: 5px;
335
- --tide-booking-cta-color-selected-icon: var(--tide-booking-white);
336
-
337
- //DROPDOWN
338
- --tide-booking-dropdown-background: var(--tide-booking-white);
339
- --tide-booking-dropdown-border: 1.5px solid
340
- var(--tide-booking-color-primary-light);
341
- --tide-booking-dropdown-border-radius: 5px;
342
- --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
343
-
344
- --tide-booking-dropdown-border-focus: 1.5px solid
345
- var(--tide-booking-color-primary-light);
346
-
347
- --tide-booking-dropdown-arrow-color: var(--tide-booking-color-primary);
348
- --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
349
-
350
- --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
351
-
352
- //SPINNER
353
- --tide-booking-spinner-border: 5px solid var(--tide-booking-color-primary);
354
- --tide-booking-spinner-border-top-color: #dce1ff;
355
-
356
- --tide-booking-spinner-background: var(--tide-booking-white);
357
- --tide-booking-spinner-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
358
-
359
- //ANIMATION
360
- --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
361
-
362
- //BOOKING-WIZARD
363
- --tide-booking-wizard-background: var(--tide-booking-bg);
364
- --tide-booking-wizard-title-color: var(--tide-booking-black);
365
- --tide-booking-wizard-heading-color: var(--tide-booking-black);
366
-
367
- //BOOKING-WIZARD--GENERAL-STEP-COMPONENTS
368
- --tide-booking-step-card-background: var(--tide-booking-white);
369
- --tide-booking-step-card-border: 1.5px solid
370
- var(--tide-booking-gray-border-light);
371
- --tide-booking-step-card-border-radius: 10px;
372
-
373
- --tide-booking-step-toggle-btn-background: linear-gradient(
374
- 8.14deg,
375
- #dce1ff 19.75%,
376
- #e5e8fb 65.25%
377
- );
378
- --tide-booking-step-toggle-btn-border: none;
379
- --tide-booking-step-toggle-btn-border-radius: 5px;
380
- --tide-booking-step-toggle-btn-color: var(--tide-booking-color-primary);
381
- //HOVER,FOCUS
382
- --tide-booking-step-toggle-btn-background-hover: linear-gradient(
383
- 8.14deg,
384
- #b4c0ff 19.75%,
385
- #c2caf6 65.25%
386
- );
387
- --tide-booking-step-toggle-btn-color-hover: var(
388
- --tide-booking-color-primary-dark
389
- );
390
- --tide-booking-step-toggle-btn-border-hover: none;
391
-
392
- //STEP-INDICATORS
393
- --tide-booking-step-indicators-line-trough: 2px dashed
394
- var(--tide-booking-gray-medium);
395
-
396
- --tide-booking-step-indicators-icon-color: var(--tide-booking-black);
397
- --tide-booking-step-indicators-icon-background: var(--tide-booking-white);
398
- --tide-booking-step-indicators-icon-border: 1px solid
399
- var(--tide-booking-gray-border-light);
400
- --tide-booking-step-indicators-icon-border-radius: 50%;
401
- --tide-booking-step-indicators-icon-font-family: var(
402
- --tide-booking-font-heading
403
- );
404
- --tide-booking-step-indicators-icon-font-size: 16px;
405
- --tide-booking-step-indicators-icon-font-weight: 400;
406
- --tide-booking-step-indicators-icon-color-text: var(--tide-booking-black);
407
-
408
- //STEP-INDICATORS--ACTIVE
409
- --tide-booking-step-indicators-icon-color-active: var(--tide-booking-white);
410
- --tide-booking-step-indicators-icon-background-active: var(
411
- --tide-booking-color-primary
412
- );
413
- --tide-booking-step-indicators-icon-border-active: 1px solid
414
- var(--tide-booking-color-primary);
415
- --tide-booking-step-indicators-icon-check-color-active: var(
416
- --tide-booking-white
417
- );
418
- --tide-booking-step-indicators-icon-color-text-active: var(
419
- --tide-booking-color-primary
420
- );
421
-
422
- //STEP-INDICATORS--COMPLETED
423
- --tide-booking-step-indicators-icon-color-completed: var(
424
- --tide-booking-white
425
- );
426
- --tide-booking-step-indicators-icon-background-completed: var(
427
- --tide-booking-color-primary
428
- );
429
- --tide-booking-step-indicators-icon-border-completed: 1px solid
430
- var(--tide-booking-color-primary);
431
- --tide-booking-step-indicators-icon-check-color-completed: var(
432
- --tide-booking-white
433
- );
434
- --tide-booking-step-indicators-icon-color-text-completed: var(
435
- --tide-booking-transparent
436
- );
437
-
438
- //SIDEBAR
439
- --tide-booking-sidebar-frame-radius: 10px;
440
- //SIDEBAR--HEADER
441
- --tide-booking-sidebar-header-background: var(
442
- --tide-booking-color-primary-gradient
443
- );
444
- --tide-booking-sidebar-header-color: var(--tide-booking-white);
445
- --tide-booking-sidebar-header-font-family: var(--tide-booking-font-heading);
446
- --tide-booking-sidebar-header-font-size: 20px;
447
- --tide-booking-sidebar-header-font-weight: 400;
448
- --tide-booking-sidebar-header-border-radius: 10px 10px 0px 0px;
449
-
450
- //MOBILE--TOGGLE
451
- --tide-booking-sidebar-btn-toggle-background: rgba(255, 255, 255, 0.2);
452
- --tide-booking-sidebar-btn-toggle-color: var(--tide-booking-white);
453
- --tide-booking-sidebar-btn-toggle-border: none;
454
- --tide-booking-sidebar-btn-toggle-border-radius: 5px;
455
-
456
- //SIDEBAR--BODY
457
- --tide-booking-sidebar-body-background: var(--tide-booking-white);
458
- --tide-booking-sidebar-body-border: 1.5px solid
459
- var(--tide-booking-gray-border-light);
460
- --tide-booking-sidebar-body-border-radius: 5px;
461
- --tide-booking-sidebar-body-font-family: var(--tide-booking-font-body);
462
- --tide-booking-sidebar-body-font-size: 16px;
463
- --tide-booking-sidebar-body-font-weight: 400;
464
- --tide-booking-sidebar-body-color: var(--tide-booking-gray-dark);
465
-
466
- --tide-booking-sidebar-body-label-color: var(--tide-booking-black);
467
- --tide-booking-sidebar-body-label-font-size: 16px;
468
- --tide-booking-sidebar-body-label-font-weight: 400;
469
-
470
- --tide-booking-sidebar-body-title-color: var(--tide-booking-black);
471
- --tide-booking-sidebar-body-title-font-size: 18px;
472
- --tide-booking-sidebar-body-title-font-family: var(
473
- --tide-booking-font-heading
474
- );
475
- --tide-booking-sidebar-body-title-font-weight: 600;
476
-
477
- --tide-booking-sidebar-body-flight-font-weight: 600;
478
- --tide-booking-sidebar-body-flight-color: var(--tide-booking-gray-dark);
479
-
480
- //SIDEBAR--FOOTER
481
- --tide-booking-sidebar-footer-background: var(--tide-booking-white);
482
- --tide-booking-sidebar-footer-border: 1.5px solid
483
- var(--tide-booking-gray-border-light);
484
- --tide-booking-sidebar-footer-border-radius: 0px 0px 10px 10px;
485
-
486
- --tide-booking-sidebar-footer-advance-font-size: 18px;
487
- --tide-booking-sidebar-footer-advance-font-weight: 400;
488
- --tide-booking-sidebar-footer-advance-color: var(--tide-booking-gray-medium);
489
-
490
- --tide-booking-sidebar-footer-total-font-size: 20px;
491
- --tide-booking-sidebar-footer-total-font-weight: 600;
492
- --tide-booking-sidebar-footer-total-color: var(--tide-booking-color-primary);
493
-
494
- --tide-booking-sidebar-footer-small-font-size: 14px;
495
- --tide-booking-sidebar-footer-small-font-weight: 400;
496
- --tide-booking-sidebar-footer-small-color: var(--tide-booking-gray-medium);
497
- --tide-booking-sidebar-footer-small-strong-color: var(
498
- --tide-booking-gray-dark
499
- );
500
-
501
- //STEP-1--FLIGHT-OPTIONS
502
- --tide-booking-flight-options-card-background: var(
503
- --tide-booking-step-card-background
504
- );
505
- --tide-booking-flight-options-card-border: var(
506
- --tide-booking-step-card-border
507
- );
508
- --tide-booking-flight-options-card-border-radius: var(
509
- --tide-booking-step-card-border-radius
510
- );
511
-
512
- --tide-booking-flight-options-card-header-background: var(
513
- --tide-booking-step-card-background
514
- );
515
- --tide-booking-flight-options-card-header-border: var(
516
- --tide-booking-step-card-border
517
- );
518
-
519
- --tide-booking-flight-options-times-title-font-family: var(
520
- --tide-booking-font-body
521
- );
522
- --tide-booking-flight-options-times-title-color: var(--tide-booking-black);
523
- --tide-booking-flight-options-times-title-font-weight: 700;
524
-
525
- --tide-booking-flight-options-times-font-family: var(
526
- --tide-booking-font-body
527
- );
528
- --tide-booking-flight-options-times-color: var(--tide-booking-gray-dark);
529
-
530
- --tide-booking-flight-options-dapart-arrive-icon--color: var(
531
- --tide-booking-color-primary
532
- );
533
-
534
- --tide-booking-flight-options-stops-line-color: var(
535
- --tide-booking-color-primary
536
- );
537
- --tide-booking-flight-options-stop-color: var(--tide-booking-color-primary);
538
- --tide-booking-flight-options-stop-border: 3px solid var(--tide-booking-white);
539
- --tide-booking-flight-options-stoptime-border-color: var(
540
- --tide-booking-black
541
- );
542
-
543
- --tide-booking-flight-options-detail-card-background: var(
544
- --tide-booking-color-primary-extra-fade
545
- );
546
- --tide-booking-flight-options-detail-card-border: none;
547
- --tide-booking-flight-options-detail-card-border-radius: 10px;
548
-
549
- --tide-booking-flight-options-detail-toggle-icon-color: var(
550
- --tide-booking-step-toggle-btn-color
551
- );
552
- --tide-booking-flight-options-detail-toggle-background: var(
553
- --tide-booking-step-toggle-btn-background
554
- );
555
- --tide-booking-flight-options-detail-toggle-border: var(
556
- --tide-booking-step-toggle-btn-border
557
- );
558
- --tide-booking-flight-options-detail-toggle-border-radius: var(
559
- --tide-booking-step-toggle-btn-border-radius
560
- );
561
-
562
- //HOVER,FOCUS
563
- --tide-booking-flight-options-detail-toggle-icon-color-hover: var(
564
- --tide-booking-step-toggle-btn-color-hover
565
- );
566
- --tide-booking-flight-options-detail-toggle-background-hover: var(
567
- --tide-booking-step-toggle-btn-background-hover
568
- );
569
- --tide-booking-flight-options-detail-toggle-border-hover: var(
570
- --tide-booking-step-toggle-btn-border-hover
571
- );
572
-
573
- //FLIGHT-OPTIONS--FILTER
574
- --tide-booking-flight-options-filter-container-background: var(
575
- --tide-booking-white
576
- );
577
- --tide-booking-flight-options-filter-container-box-shadow: 0px 0px 5px
578
- rgba(158, 158, 158, 0.447);
579
-
580
- //FLIGHT-OPTIONS--FILTER--BTN
581
- --tide-booking-flight-options-filter-btn-background: var(
582
- --tide-booking-transparent
583
- );
584
- --tide-booking-flight-options-filter-btn-color: var(
585
- --tide-booking-color-primary
586
- );
587
- --tide-booking-flight-options-filter-btn-border: 1.5px solid
588
- var(--tide-booking-color-primary);
589
- --tide-booking-flight-options-filter-btn-border-radius: 5px;
590
- --tide-booking-flight-options-filter-btn-icon-color: var(
591
- --tide-booking-color-primary
592
- );
593
-
594
- --tide-booking-flight-options-filter-btn-hover-background: var(
595
- --tide-booking-color-primary-gradient
596
- );
597
- --tide-booking-flight-options-filter-btn-hover-color: var(
598
- --tide-booking-white
599
- );
600
- --tide-booking-flight-options-filter-btn-hover-border: 1.5px solid
601
- var(--tide-booking-transparent);
602
- --tide-booking-flight-options-filter-btn-hover-icon-color: var(
603
- --tide-booking-white
604
- );
605
-
606
- //FLIGHT-OPTIONS--FILTER--HEADER
607
- --tide-booking-flight-options-filter-header-text-color: var(
608
- --tide-booking-gray-dark
609
- );
610
- --tide-booking-flight-options-filter-header-text-font-weight: 300;
611
- --tide-booking-flight-options-filter-header-text-strong-color: var(
612
- --tide-booking-color-secondary
613
- );
614
- --tide-booking-flight-options-filter-header-text-strong-font-weight: 600;
615
- --tide-booking-flight-options-filter-header-close-icon-color: var(
616
- --tide-booking-color-primary
617
- );
618
-
619
- //FLIGHT-OPTIONS--FILTER--GROUP-TITLE
620
- --tide-booking-flight-options-filter-group-title-text-color: var(
621
- --tide-booking-gray-dark
622
- );
623
- --tide-booking-flight-options-filter-group-title-text-font-weight: 500;
624
- --tide-booking-flight-options-filter-group-title-text-font-family: var(
625
- --tide-booking-font-body
626
- );
627
- --tide-booking-flight-options-filter-group-title-text-border: 1.5px solid
628
- var(--tide-booking-gray-border-light);
629
-
630
- --tide-booking-flight-options-filter-group-title-subtext-color: var(
631
- --tide-booking-gray-dark
632
- );
633
- --tide-booking-flight-options-filter-group-title-subtext-font-weight: 400;
634
- --tide-booking-flight-options-filter-group-title-subtext-font-family: var(
635
- --tide-booking-font-body
636
- );
637
-
638
- //STEP-2--ROOM-OPTIONS
639
-
640
- --tide-booking-room-options-card-background: var(
641
- --tide-booking-step-card-background
642
- );
643
- --tide-booking-room-options-card-border: var(--tide-booking-step-card-border);
644
- --tide-booking-room-options-card-border-radius: var(
645
- --tide-booking-step-card-border-radius
646
- );
647
-
648
- --tide-booking-room-options-image-border-radius: 10px;
649
-
650
- --tide-booking-room-options-usp-list-color: var(--tide-booking-gray-dark);
651
- --tide-booking-room-options-usp-list-font-weight: 400;
652
- --tide-booking-room-options-usp-list-icon-color: var(
653
- --tide-booking-color-primary
654
- );
655
-
656
- --tide-booking-room-options-title-color: var(--tide-booking-black);
657
- --tide-booking-room-options-title-font-family: var(
658
- --tide-booking-font-heading
659
- );
660
- --tide-booking-room-options-title-font-weight: 500;
661
-
662
- --tide-booking-room-options-dropdown-select-border: var(
663
- --tide-booking-dropdown-border
664
- );
665
- --tide-booking-room-options-dropdown-select-border-radius: var(
666
- --tide-booking-dropdown-border-radius
667
- );
668
- --tide-booking-room-options-dropdown-select-font-family: var(
669
- --tide-booking-dropdown-font-family
670
- );
671
- --tide-booking-room-options-dropdown-select-color: var(
672
- --tide-booking-dropdown-color
673
- );
674
- --tide-booking-room-options-dropdown-select-background: var(
675
- --tide-booking-dropdown-background
676
- );
677
- --tide-booking-room-options-dropdown-select-border-focus: var(
678
- --tide-booking-dropdown-border-focus
679
- );
680
-
681
- --tide-booking-room-options-dropdown-select-icon-color: var(
682
- --tide-booking-dropdown-arrow-color
683
- );
684
-
685
- //ALTERNATIVE--ROOM-OPTIONS
686
- --tide-booking-room-options-alternative-btn-color: var(
687
- --tide-booking-color-secondary
688
- );
689
- --tide-booking-room-options-alternative-btn-text-decoration: underline;
690
-
691
- //ALTERNATIVE--ROOM-OPTIONS--HOVER
692
- --tide-booking-room-options-alternative-btn-color-hover: var(
693
- --tide-booking-color-secondary-light
694
- );
695
- --tide-booking-room-options-alternative-btn-text-decoration-hover: none;
696
-
697
- //ALTERNATIVE--ROOM-OPTIONS--HEADER
698
- --tide-booking-room-options-alternative-header-color: var(
699
- --tide-booking-black
700
- );
701
-
702
- //STEP-3 EXTA-OPTIONS
703
- --tide-booking-extra-options-card-background: var(
704
- --tide-booking-step-card-background
705
- );
706
- --tide-booking-extra-options-card-border: var(
707
- --tide-booking-step-card-border
708
- );
709
- --tide-booking-extra-options-card-border-radius: var(
710
- --tide-booking-step-card-border-radius
711
- );
712
-
713
- --tide-booking-extra-options-card-title-color: var(--tide-booking-black);
714
-
715
- //TAG
716
- --tide-booking-tag-background: linear-gradient(
717
- 204.08deg,
718
- #11b684 1.64%,
719
- #1f9470 84.55%
720
- );
721
- --tide-booking-tag-border: none;
722
- --tide-booking-tag-border-radius: 0 5px 5px 0;
723
- --tide-booking-tag-color: var(--tide-booking-white);
724
- --tide-booking-tag-font-family: var(--tide-booking-font-body);
725
- --tide-booking-tag-font-weight: 400;
726
-
727
- //INPUT--SELECTED
728
- --tide-booking-input-selected-background: #667dff10;
729
- --tide-booking-input-selected-border: none;
730
- --tide-booking-input-selected-border-radius: 5px;
731
- --tide-booking-input-selected-color: var(--tide-booking-color-primary);
732
-
733
- //TOGGLE
734
- --tide-booking-flight-extra-options-toggle-icon-color: var(
735
- --tide-booking-step-toggle-btn-color
736
- );
737
- --tide-booking-flight-extra-options-toggle-background: var(
738
- --tide-booking-step-toggle-btn-background
739
- );
740
- --tide-booking-flight-extra-options-toggle-border: var(
741
- --tide-booking-step-toggle-btn-border
742
- );
743
- --tide-booking-flight-extra-options-toggle-border-radius: var(
744
- --tide-booking-step-toggle-btn-border-radius
745
- );
746
-
747
- //HOVER,FOCUS
748
- --tide-booking-flight-extra-options-toggle-icon-color-hover: var(
749
- --tide-booking-step-toggle-btn-color-hover
750
- );
751
- --tide-booking-flight-extra-options-toggle-background-hover: var(
752
- --tide-booking-step-toggle-btn-background-hover
753
- );
754
- --tide-booking-flight-extra-options-toggle-border-hover: var(
755
- --tide-booking-step-toggle-btn-border-hover
756
- );
757
-
758
- //STEP-4--FORM
759
- --tide-booking-form-card-background: var(--tide-booking-step-card-background);
760
- --tide-booking-form-card-border: var(--tide-booking-step-card-border);
761
- --tide-booking-form-card-border-radius: var(
762
- --tide-booking-step-card-border-radius
763
- );
764
-
765
- //GROUP--BORDER
766
- --tide-booking-form-group-border: 1.5px solid
767
- var(--tide-booking-color-primary-fade);
768
-
769
- //LABEL
770
- --tide-booking-form-label-color: var(--tide-booking-gray-dark);
771
- --tide-booking-form-label-font-family: var(--tide-booking-font-body);
772
- --tide-booking-form-label-font-weight: 300;
773
-
774
- //TYPEAHEAD--AGENT
775
- --tide-booking-form-typeahead-agent-background: var(
776
- --tide-booking-gray-xlight
777
- );
778
- --tide-booking-form-typeahead-agent-border: 1.5px solid
779
- var(--tide-booking-gray--medium-light);
780
- --tide-booking-form-typeahead-agent-border-radius: 5px;
781
- --tide-booking-form-typeahead-agent-color: var(--tide-booking-black);
782
- --tide-booking-form-typeahead-agent-font-family: var(
783
- --tide-booking-font-body
784
- );
785
- --tide-booking-form-typeahead-agent-icon-color: var(--tide-booking-black);
786
- --tide-booking-form-typeahead-agent-clear-icon-color: var(
787
- --tide-booking-color-primary
788
- );
789
-
790
- --tide-booking-form-typeahead-agent-placeholder-color: var(
791
- --tide-booking-gray-medium
792
- );
793
- --tide-booking-form-typeahead-agent-placeholder-font-family: var(
794
- --tide-booking-font-body
795
- );
796
-
797
- //TYPEAHEAD--AGENT--HOVER/FOCUS
798
- --tide-booking-form-typeahead-agent-background-hover: var(
799
- --tide-booking-white
800
- );
801
- --tide-booking-form-typeahead-agent-border-hover: 1.5px solid
802
- var(--tide-booking-color-primary);
803
- --tide-booking-form-typeahead-agent-color-hover: var(--tide-booking-black);
804
- --tide-booking-form-typeahead-agent-icon-color-hover: var(
805
- --tide-booking-color-primary
806
- );
807
-
808
- //TYPEAHEAD--AGENT--OPTIONS
809
- --tide-booking-form-typeahead-agent-options-background: var(
810
- --tide-booking-white
811
- );
812
- --tide-booking-form-typeahead-agent-options-border: 1.5px solid
813
- var(--tide-booking-gray-border-light);
814
- --tide-booking-form-typeahead-agent-options-border-radius: 5px;
815
- --tide-booking-form-typeahead-agent-options-color: var(
816
- --tide-booking-gray-dark
817
- );
818
-
819
- //TYPEAHEAD--AGENT--OPTIONS--HOVER
820
- --tide-booking-form-typeahead-agent-options-background-hover: var(
821
- --tide-booking-gray-border-light
822
- );
823
- --tide-booking-form-typeahead-agent-options-color-hover: var(
824
- --tide-booking-black
825
- );
826
-
827
- //TYPEAHEAD--AGENT--OPTIONS--HIGHLIGHT
828
- --tide-booking-form-typeahead-agent-options-color-highlight: var(
829
- --tide-booking-black
830
- );
831
- --tide-booking-form-typeahead-agent-options-font-weight-highlight: 600;
832
-
833
- //STEP-5--OVERVIEW
834
- --tide-booking-form-summary-background: var(
835
- --tide-booking-step-card-background
836
- );
837
- --tide-booking-form-summary-border: var(--tide-booking-step-card-border);
838
- --tide-booking-form-summary-border-radius: var(
839
- --tide-booking-step-card-border-radius
840
- );
841
-
842
- //VOUCHER--REMOVE-BTN
843
- --tide-booking-form-summary-voucher-remove-btn-background: var(
844
- --tide-booking-transparent
845
- );
846
- --tide-booking-form-summary-voucher-remove-btn-color: var(
847
- --tide-booking-color-primary
848
- );
849
- --tide-booking-form-summary-voucher-remove-btn-border: none;
850
- --tide-booking-form-summary-voucher-remove-btn-border-radius: 5px;
851
-
852
- //VOUCHER--REMOVE-BTN--HOVER
853
- --tide-booking-form-summary-voucher-remove-btn-background-hover: var(
854
- --tide-booking-transparent
855
- );
856
- --tide-booking-form-summary-voucher-remove-btn-color-hover: var(
857
- --tide-booking-color-primary-dark
858
- );
859
- --tide-booking-form-summary-voucher-remove-btn-border-hover: none;
860
-
861
- //STEP-6--CONFIRMATION
862
- --tide-booking-confirmation-background: var(
863
- --tide-booking-step-card-background
864
- );
865
- --tide-booking-confirmation-border: var(--tide-booking-step-card-border);
866
- --tide-booking-confirmation-border-radius: var(
867
- --tide-booking-step-card-border-radius
868
- );
869
-
870
- --tide-booking-confirmation-icon-color: var(--tide-booking-color-secondary);
871
- }
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: 16px;
45
+ --tide-booking-font-size-body-lg: 18px;
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: 32.5px;
68
+ --tide-booking-h1-sm: 48px;
69
+ --tide-booking-h1-xl: 48px;
70
+
71
+ //h2
72
+ --tide-booking-h2: 24px;
73
+ --tide-booking-h2-sm: 30px;
74
+ --tide-booking-h2-xl: 30px;
75
+
76
+ //h3
77
+ --tide-booking-h3: 22px;
78
+ --tide-booking-h3-sm: 25px;
79
+ --tide-booking-h3-xl: 25px;
80
+
81
+ //h4
82
+ --tide-booking-h4: 18px;
83
+ --tide-booking-h4-sm: 23px;
84
+ --tide-booking-h4-xl: 23px;
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
+ //TOGGLE-SWITCH
103
+ --tide-booking-toggle-switch-background: var(--tide-booking-gray-medium);
104
+ --tide-booking-toggle-switch-border-radius: 5px;
105
+ --tide-booking-toggle-switch-after-color: var(--tide-booking-white);
106
+
107
+ //TOGGLE-SWITCH--TOGGLED
108
+ --tide-booking-toggle-switch-background-toggled: var(
109
+ --tide-booking-color-primary
110
+ );
111
+
112
+ //FORM--INPUT
113
+ --tide-booking-form-input-background: var(--tide-booking-gray-xlight);
114
+ --tide-booking-form-input-border: 1.5px solid
115
+ var(--tide-booking-gray--medium-light);
116
+ --tide-booking-form-input-border-radius: 5px;
117
+ --tide-booking-form-input-height: 45px;
118
+
119
+ //FORM--INPUT--FOCUS/ACTIVE
120
+ --tide-booking-form-input-border-focus: 1.5px solid
121
+ var(--tide-booking-color-primary);
122
+
123
+ //FORM--INPUT--PLACEHOLDER
124
+ --tide-booking-form-input-placeholder-color: var(--tide-booking-gray-dark);
125
+ --tide-booking-form-input-placeholder-font-style: normal;
126
+
127
+ //RADIOBUTTON
128
+ --tide-booking-radiobutton-border: 1.5px solid
129
+ var(--tide-booking-gray-checkbox-bg);
130
+ --tide-booking-radiobutton-background: var(--tide-booking-white);
131
+ --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
132
+ --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
133
+ --tide-booking-radiobutton-font-size: 16px;
134
+ --tide-booking-radiobutton-font-weight: 400;
135
+
136
+ //RADIOBUTTON--INPUT--CHECKED
137
+ --tide-booking-radiobutton-input-checked-color-text: var(
138
+ --tide-booking-color-primary
139
+ );
140
+ --tide-booking-radiobutton-input-checked-background: var(
141
+ --tide-booking-white
142
+ );
143
+ --tide-booking-radiobutton-input-checked-border: 1.5px solid
144
+ var(--tide-booking-color-primary);
145
+
146
+ //CHECKBOX--INPUT--CHECKED--AFTER
147
+ --tide-booking-radiobutton-input-checked-after-color: var(
148
+ --tide-booking-color-primary
149
+ );
150
+
151
+ //CHECKBOX
152
+ --tide-booking-checkbox-border: 1.5px solid
153
+ var(--tide-booking-gray-checkbox-bg);
154
+ --tide-booking-checkbox-border-radius: 0px;
155
+ --tide-booking-checkbox-background: var(--tide-booking-white);
156
+ --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
157
+ --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
158
+ --tide-booking-checkbox-font-size: 16px;
159
+ --tide-booking-checkbox-font-weight: 400;
160
+
161
+ //CHECKBOX--INPUT--CHECKED
162
+ --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
163
+ --tide-booking-checkbox-input-checked-color-text: var(
164
+ --tide-booking-color-primary
165
+ );
166
+ --tide-booking-checkbox-input-checked-background: var(
167
+ --tide-booking-color-primary
168
+ );
169
+ --tide-booking-checkbox-input-checked-border: 1.5px solid
170
+ var(--tide-booking-color-primary);
171
+
172
+ //SLIDER
173
+ --tide-booking-slider-track-background: var(--tide-booking-color-primary);
174
+ --tide-booking-slider-range-background: var(--tide-booking-gray-medium);
175
+ --tide-booking-slider-thumb-border-color: var(--tide-booking-white);
176
+ --tide-booking-slider-thumb-background: var(--tide-booking-color-primary);
177
+
178
+ //BOOKING PRODUCT
179
+ --tide-booking-component-background: var(--tide-booking-bg);
180
+ --tide-booking-component-radius: 10px;
181
+ --tide-booking-component-border: 1.5px solid
182
+ var(--tide-booking-color-primary-fade);
183
+
184
+ //HEADER
185
+ --tide-booking-component-header-background: var(
186
+ --tide-booking-color-primary-gradient
187
+ );
188
+ --tide-booking-component-header-color: var(--tide-booking-white);
189
+ --tide-booking-component-header-border-radius: 10px 10px 0px 0px;
190
+
191
+ --tide-booking-component-header-star-rating: var(--tide-booking-color-star);
192
+ --tide-booking-component-header-title-color: var(--tide-booking-white);
193
+ --tide-booking-component-header-title-font: var(--tide-booking-font-heading);
194
+
195
+ --tide-booking-component-header-icon-color: var(--tide-booking-white);
196
+
197
+ //price header
198
+ --tide-booking-component-header-price-font-family: var(
199
+ --tide-booking-font-body
200
+ );
201
+ --tide-booking-component-header-price-font-size--mobile: 25px;
202
+ --tide-booking-component-header-price-font-size--desktop: 36px;
203
+ --tide-booking-component-header-price-font-weight: 400;
204
+ --tide-booking-component-header-price-color: var(--tide-booking-white);
205
+
206
+ //small fontsize
207
+ --tide-booking-small-font-size--mobile: 13px;
208
+ --tide-booking-small-font-size--desktop: 15px;
209
+
210
+ //CTA
211
+ --tide-booking-cta-height: 40px;
212
+ --tide-booking-cta-height-xs: 45px;
213
+ --tide-booking-cta-width: 100%;
214
+ --tide-booking-cta-width-xs: auto;
215
+ --tide-booking-cta-padding: 10px 20px;
216
+ --tide-booking-cta-color: var(--tide-booking-white);
217
+ --tide-booking-cta-background: linear-gradient(
218
+ 204.08deg,
219
+ #11b684 1.64%,
220
+ #1f9470 84.55%
221
+ );
222
+ --tide-booking-cta-font-family: var(--tide-booking-font-body);
223
+ --tide-booking-cta-font-size: 16px;
224
+ --tide-booking-cta-font-size-xs: 18px;
225
+ --tide-booking-cta-font-weight: 400;
226
+ --tide-booking-cta-text-decoration: none;
227
+ --tide-booking-cta-border: none;
228
+ --tide-booking-cta-border-radius: 5px;
229
+
230
+ //CTA__ICON
231
+ --tide-booking-cta-icon-color: var(--tide-booking-white);
232
+ --tide-booking-cta-icon-size: 16px;
233
+
234
+ //CTA__HOVER
235
+ --tide-booking-cta-background-hover: linear-gradient(
236
+ 204.08deg,
237
+ #11b684 1.64%,
238
+ #1f9470 84.55%
239
+ );
240
+ --tide-booking-cta-color-hover: var(--tide-booking-white);
241
+ --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
242
+ --tide-booking-cta-border-hover: none;
243
+ --tide-booking-cta-text-decoration-hover: none;
244
+
245
+ //CTA__FOCUS
246
+ --tide-booking-cta-background-focus: linear-gradient(
247
+ 204.08deg,
248
+ #11b684 1.64%,
249
+ #1f9470 84.55%
250
+ );
251
+ --tide-booking-cta-color-focus: var(--tide-booking-white);
252
+ --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
253
+ --tide-booking-cta-border-focus: none;
254
+ --tide-booking-cta-text-decoration-focus: none;
255
+
256
+ //CTA--SECONDARY
257
+ --tide-booking-cta-height-secondary: 40px;
258
+ --tide-booking-cta-height-xs-secondary: 45px;
259
+ --tide-booking-cta-width-secondary: auto;
260
+ --tide-booking-cta-padding-secondary: 10px 20px;
261
+ --tide-booking-cta-margin-secondary: 0px 0 0 0;
262
+ --tide-booking-cta-background-secondary: linear-gradient(
263
+ 8.14deg,
264
+ #dce1ff 19.75%,
265
+ #e5e8fb 65.25%
266
+ );
267
+ --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
268
+ --tide-booking-cta-border-secondary: none;
269
+ --tide-booking-cta-border-radius-secondary: 5px;
270
+ --tide-booking-cta-text-decoration-secondary: none;
271
+ --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
272
+ --tide-booking-cta-font-size-secondary: 16px;
273
+ --tide-booking-cta-font-size-xs-secondary: 18px;
274
+ --tide-booking-cta-font-weight-secondary: 400;
275
+
276
+ //CTA--SECONDARY__ICON
277
+ --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
278
+ --tide-booking-cta-icon-size-secondary: 16px;
279
+
280
+ //CTA--SECONDARY__HOVER
281
+ --tide-booking-cta-background-secondary-hover: linear-gradient(
282
+ 8.14deg,
283
+ #b4c0ff 19.75%,
284
+ #c2caf6 65.25%
285
+ );
286
+ --tide-booking-cta-color-secondary-hover: var(
287
+ --tide-booking-color-primary-dark
288
+ );
289
+ --tide-booking-cta-icon-color-secondary-hover: var(
290
+ --tide-booking-color-primary-dark
291
+ );
292
+ --tide-booking-cta-border-secondary-hover: none;
293
+ --tide-booking-cta-text-decoration-secondary-hover: none;
294
+
295
+ //CTA--SECONDARY__FOCUS
296
+ --tide-booking-cta-background-secondary-focus: linear-gradient(
297
+ 8.14deg,
298
+ #b4c0ff 19.75%,
299
+ #c2caf6 65.25%
300
+ );
301
+ --tide-booking-cta-color-secondary-focus: var(
302
+ --tide-booking-color-primary-dark
303
+ );
304
+ --tide-booking-cta-icon-color-secondary-focus: var(
305
+ --tide-booking-color-primary-dark
306
+ );
307
+ --tide-booking-cta-border-secondary-focus: none;
308
+ --tide-booking-cta-text-decoration-secondary-focus: none;
309
+
310
+ //CTA--SELECT
311
+ --tide-booking-cta-background-select: linear-gradient(
312
+ 8.14deg,
313
+ #dce1ff 19.75%,
314
+ #e5e8fb 65.25%
315
+ );
316
+ --tide-booking-cta-color-select: var(--tide-booking-color-primary);
317
+ --tide-booking-cta-border-select: none;
318
+ --tide-booking-cta-border-radius-select: 5px;
319
+
320
+ //CTA--SELECT--HOVER/FOCUS/ACTIVE
321
+ --tide-booking-cta-background-select-hover: linear-gradient(
322
+ 8.14deg,
323
+ #b4c0ff 19.75%,
324
+ #c2caf6 65.25%
325
+ );
326
+ --tide-booking-cta-color-select-hover: var(--tide-booking-color-primary-dark);
327
+ --tide-booking-cta-border-select-hover: none;
328
+
329
+ //CTA--SELECTED
330
+ --tide-booking-cta-background-selected: var(
331
+ --tide-booking-color-primary-gradient
332
+ );
333
+ --tide-booking-cta-color-selected: var(--tide-booking-white);
334
+ --tide-booking-cta-border-selected: none;
335
+ --tide-booking-cta-border-radius-selected: 5px;
336
+ --tide-booking-cta-color-selected-icon: var(--tide-booking-white);
337
+
338
+ //DROPDOWN
339
+ --tide-booking-dropdown-background: var(--tide-booking-white);
340
+ --tide-booking-dropdown-border: 1.5px solid
341
+ var(--tide-booking-color-primary-light);
342
+ --tide-booking-dropdown-border-radius: 5px;
343
+ --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
344
+ --tide-booking-dropdown-height: 45px;
345
+
346
+ --tide-booking-dropdown-border-focus: 1.5px solid
347
+ var(--tide-booking-color-primary-light);
348
+
349
+ --tide-booking-dropdown-arrow-color: var(--tide-booking-color-primary);
350
+ --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
351
+
352
+ --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
353
+
354
+ //SPINNER
355
+ --tide-booking-spinner-border: 5px solid var(--tide-booking-color-primary);
356
+ --tide-booking-spinner-border-top-color: #dce1ff;
357
+
358
+ --tide-booking-spinner-background: var(--tide-booking-white);
359
+ --tide-booking-spinner-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
360
+
361
+ //ANIMATION
362
+ --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);
363
+
364
+ //BOOKING-WIZARD
365
+ --tide-booking-wizard-background: var(--tide-booking-bg);
366
+ --tide-booking-wizard-title-color: var(--tide-booking-black);
367
+ --tide-booking-wizard-heading-color: var(--tide-booking-black);
368
+
369
+ //BOOKING-WIZARD--GENERAL-STEP-COMPONENTS
370
+ --tide-booking-step-card-background: var(--tide-booking-white);
371
+ --tide-booking-step-card-border: 1.5px solid
372
+ var(--tide-booking-gray-border-light);
373
+ --tide-booking-step-card-border-radius: 10px;
374
+
375
+ --tide-booking-step-toggle-btn-background: linear-gradient(
376
+ 8.14deg,
377
+ #dce1ff 19.75%,
378
+ #e5e8fb 65.25%
379
+ );
380
+ --tide-booking-step-toggle-btn-border: none;
381
+ --tide-booking-step-toggle-btn-border-radius: 5px;
382
+ --tide-booking-step-toggle-btn-color: var(--tide-booking-color-primary);
383
+ //HOVER,FOCUS
384
+ --tide-booking-step-toggle-btn-background-hover: linear-gradient(
385
+ 8.14deg,
386
+ #b4c0ff 19.75%,
387
+ #c2caf6 65.25%
388
+ );
389
+ --tide-booking-step-toggle-btn-color-hover: var(
390
+ --tide-booking-color-primary-dark
391
+ );
392
+ --tide-booking-step-toggle-btn-border-hover: none;
393
+
394
+ //STEP-INDICATORS
395
+ --tide-booking-step-indicators-line-trough: 2px dashed
396
+ var(--tide-booking-gray-medium);
397
+
398
+ --tide-booking-step-indicators-icon-color: var(--tide-booking-black);
399
+ --tide-booking-step-indicators-icon-background: var(--tide-booking-white);
400
+ --tide-booking-step-indicators-icon-border: 1px solid
401
+ var(--tide-booking-gray-border-light);
402
+ --tide-booking-step-indicators-icon-border-radius: 50%;
403
+ --tide-booking-step-indicators-icon-font-family: var(
404
+ --tide-booking-font-heading
405
+ );
406
+ --tide-booking-step-indicators-icon-font-size: 16px;
407
+ --tide-booking-step-indicators-icon-font-weight: 400;
408
+ --tide-booking-step-indicators-icon-color-text: var(--tide-booking-black);
409
+
410
+ //STEP-INDICATORS--ACTIVE
411
+ --tide-booking-step-indicators-icon-color-active: var(--tide-booking-white);
412
+ --tide-booking-step-indicators-icon-background-active: var(
413
+ --tide-booking-color-primary
414
+ );
415
+ --tide-booking-step-indicators-icon-border-active: 1px solid
416
+ var(--tide-booking-color-primary);
417
+ --tide-booking-step-indicators-icon-check-color-active: var(
418
+ --tide-booking-white
419
+ );
420
+ --tide-booking-step-indicators-icon-color-text-active: var(
421
+ --tide-booking-color-primary
422
+ );
423
+
424
+ //STEP-INDICATORS--COMPLETED
425
+ --tide-booking-step-indicators-icon-color-completed: var(
426
+ --tide-booking-white
427
+ );
428
+ --tide-booking-step-indicators-icon-background-completed: var(
429
+ --tide-booking-color-primary
430
+ );
431
+ --tide-booking-step-indicators-icon-border-completed: 1px solid
432
+ var(--tide-booking-color-primary);
433
+ --tide-booking-step-indicators-icon-check-color-completed: var(
434
+ --tide-booking-white
435
+ );
436
+ --tide-booking-step-indicators-icon-color-text-completed: var(
437
+ --tide-booking-transparent
438
+ );
439
+
440
+ //SIDEBAR
441
+ --tide-booking-sidebar-frame-radius: 10px;
442
+ //SIDEBAR--HEADER
443
+ --tide-booking-sidebar-header-background: var(
444
+ --tide-booking-color-primary-gradient
445
+ );
446
+ --tide-booking-sidebar-header-color: var(--tide-booking-white);
447
+ --tide-booking-sidebar-header-font-family: var(--tide-booking-font-heading);
448
+ --tide-booking-sidebar-header-font-size: 20px;
449
+ --tide-booking-sidebar-header-font-weight: 400;
450
+ --tide-booking-sidebar-header-border-radius: 10px 10px 0px 0px;
451
+
452
+ //MOBILE--TOGGLE
453
+ --tide-booking-sidebar-btn-toggle-background: rgba(255, 255, 255, 0.2);
454
+ --tide-booking-sidebar-btn-toggle-color: var(--tide-booking-white);
455
+ --tide-booking-sidebar-btn-toggle-border: none;
456
+ --tide-booking-sidebar-btn-toggle-border-radius: 5px;
457
+
458
+ //SIDEBAR--BODY
459
+ --tide-booking-sidebar-body-background: var(--tide-booking-white);
460
+ --tide-booking-sidebar-body-border: 1.5px solid
461
+ var(--tide-booking-gray-border-light);
462
+ --tide-booking-sidebar-body-border-radius: 5px;
463
+ --tide-booking-sidebar-body-font-family: var(--tide-booking-font-body);
464
+ --tide-booking-sidebar-body-font-size: 16px;
465
+ --tide-booking-sidebar-body-font-weight: 400;
466
+ --tide-booking-sidebar-body-color: var(--tide-booking-gray-dark);
467
+
468
+ --tide-booking-sidebar-body-label-color: var(--tide-booking-black);
469
+ --tide-booking-sidebar-body-label-font-size: 16px;
470
+ --tide-booking-sidebar-body-label-font-weight: 400;
471
+
472
+ --tide-booking-sidebar-body-title-color: var(--tide-booking-black);
473
+ --tide-booking-sidebar-body-title-font-size: 18px;
474
+ --tide-booking-sidebar-body-title-font-family: var(
475
+ --tide-booking-font-heading
476
+ );
477
+ --tide-booking-sidebar-body-title-font-weight: 600;
478
+
479
+ --tide-booking-sidebar-body-flight-font-weight: 600;
480
+ --tide-booking-sidebar-body-flight-color: var(--tide-booking-gray-dark);
481
+
482
+ //SIDEBAR--FOOTER
483
+ --tide-booking-sidebar-footer-background: var(--tide-booking-white);
484
+ --tide-booking-sidebar-footer-border: 1.5px solid
485
+ var(--tide-booking-gray-border-light);
486
+ --tide-booking-sidebar-footer-border-radius: 0px 0px 10px 10px;
487
+
488
+ --tide-booking-sidebar-footer-advance-font-size: 18px;
489
+ --tide-booking-sidebar-footer-advance-font-weight: 400;
490
+ --tide-booking-sidebar-footer-advance-color: var(--tide-booking-gray-medium);
491
+
492
+ --tide-booking-sidebar-footer-total-font-size: 20px;
493
+ --tide-booking-sidebar-footer-total-font-weight: 600;
494
+ --tide-booking-sidebar-footer-total-color: var(--tide-booking-color-primary);
495
+
496
+ --tide-booking-sidebar-footer-small-font-size: 14px;
497
+ --tide-booking-sidebar-footer-small-font-weight: 400;
498
+ --tide-booking-sidebar-footer-small-color: var(--tide-booking-gray-medium);
499
+ --tide-booking-sidebar-footer-small-strong-color: var(
500
+ --tide-booking-gray-dark
501
+ );
502
+
503
+ //STEP-1--FLIGHT-OPTIONS
504
+ --tide-booking-flight-options-card-background: var(
505
+ --tide-booking-step-card-background
506
+ );
507
+ --tide-booking-flight-options-card-border: var(
508
+ --tide-booking-step-card-border
509
+ );
510
+ --tide-booking-flight-options-card-border-radius: var(
511
+ --tide-booking-step-card-border-radius
512
+ );
513
+
514
+ --tide-booking-flight-options-card-header-background: var(
515
+ --tide-booking-step-card-background
516
+ );
517
+ --tide-booking-flight-options-card-header-border: var(
518
+ --tide-booking-step-card-border
519
+ );
520
+
521
+ --tide-booking-flight-options-times-title-font-family: var(
522
+ --tide-booking-font-body
523
+ );
524
+ --tide-booking-flight-options-times-title-color: var(--tide-booking-black);
525
+ --tide-booking-flight-options-times-title-font-weight: 700;
526
+
527
+ --tide-booking-flight-options-times-font-family: var(
528
+ --tide-booking-font-body
529
+ );
530
+ --tide-booking-flight-options-times-color: var(--tide-booking-gray-dark);
531
+
532
+ --tide-booking-flight-options-dapart-arrive-icon--color: var(
533
+ --tide-booking-color-primary
534
+ );
535
+
536
+ --tide-booking-flight-options-stops-line-color: var(
537
+ --tide-booking-color-primary
538
+ );
539
+ --tide-booking-flight-options-stop-color: var(--tide-booking-color-primary);
540
+ --tide-booking-flight-options-stop-border: 3px solid var(--tide-booking-white);
541
+ --tide-booking-flight-options-stoptime-border-color: var(
542
+ --tide-booking-black
543
+ );
544
+
545
+ --tide-booking-flight-options-detail-card-background: var(
546
+ --tide-booking-color-primary-extra-fade
547
+ );
548
+ --tide-booking-flight-options-detail-card-border: none;
549
+ --tide-booking-flight-options-detail-card-border-radius: 10px;
550
+
551
+ --tide-booking-flight-options-detail-toggle-icon-color: var(
552
+ --tide-booking-step-toggle-btn-color
553
+ );
554
+ --tide-booking-flight-options-detail-toggle-background: var(
555
+ --tide-booking-step-toggle-btn-background
556
+ );
557
+ --tide-booking-flight-options-detail-toggle-border: var(
558
+ --tide-booking-step-toggle-btn-border
559
+ );
560
+ --tide-booking-flight-options-detail-toggle-border-radius: var(
561
+ --tide-booking-step-toggle-btn-border-radius
562
+ );
563
+
564
+ //HOVER,FOCUS
565
+ --tide-booking-flight-options-detail-toggle-icon-color-hover: var(
566
+ --tide-booking-step-toggle-btn-color-hover
567
+ );
568
+ --tide-booking-flight-options-detail-toggle-background-hover: var(
569
+ --tide-booking-step-toggle-btn-background-hover
570
+ );
571
+ --tide-booking-flight-options-detail-toggle-border-hover: var(
572
+ --tide-booking-step-toggle-btn-border-hover
573
+ );
574
+
575
+ //FLIGHT-OPTIONS--FILTER
576
+ --tide-booking-flight-options-filter-container-background: var(
577
+ --tide-booking-white
578
+ );
579
+ --tide-booking-flight-options-filter-container-box-shadow: 0px 0px 5px
580
+ rgba(158, 158, 158, 0.447);
581
+
582
+ //FLIGHT-OPTIONS--FILTER--BTN
583
+ --tide-booking-flight-options-filter-btn-background: var(
584
+ --tide-booking-transparent
585
+ );
586
+ --tide-booking-flight-options-filter-btn-color: var(
587
+ --tide-booking-color-primary
588
+ );
589
+ --tide-booking-flight-options-filter-btn-border: 1.5px solid
590
+ var(--tide-booking-color-primary);
591
+ --tide-booking-flight-options-filter-btn-border-radius: 5px;
592
+ --tide-booking-flight-options-filter-btn-icon-color: var(
593
+ --tide-booking-color-primary
594
+ );
595
+
596
+ --tide-booking-flight-options-filter-btn-hover-background: var(
597
+ --tide-booking-color-primary-gradient
598
+ );
599
+ --tide-booking-flight-options-filter-btn-hover-color: var(
600
+ --tide-booking-white
601
+ );
602
+ --tide-booking-flight-options-filter-btn-hover-border: 1.5px solid
603
+ var(--tide-booking-transparent);
604
+ --tide-booking-flight-options-filter-btn-hover-icon-color: var(
605
+ --tide-booking-white
606
+ );
607
+
608
+ //FLIGHT-OPTIONS--FILTER--HEADER
609
+ --tide-booking-flight-options-filter-header-text-color: var(
610
+ --tide-booking-gray-dark
611
+ );
612
+ --tide-booking-flight-options-filter-header-text-font-weight: 300;
613
+ --tide-booking-flight-options-filter-header-text-strong-color: var(
614
+ --tide-booking-color-secondary
615
+ );
616
+ --tide-booking-flight-options-filter-header-text-strong-font-weight: 600;
617
+ --tide-booking-flight-options-filter-header-close-icon-color: var(
618
+ --tide-booking-color-primary
619
+ );
620
+
621
+ //FLIGHT-OPTIONS--FILTER--GROUP-TITLE
622
+ --tide-booking-flight-options-filter-group-title-text-color: var(
623
+ --tide-booking-gray-dark
624
+ );
625
+ --tide-booking-flight-options-filter-group-title-text-font-weight: 500;
626
+ --tide-booking-flight-options-filter-group-title-text-font-family: var(
627
+ --tide-booking-font-body
628
+ );
629
+ --tide-booking-flight-options-filter-group-title-text-border: 1.5px solid
630
+ var(--tide-booking-gray-border-light);
631
+
632
+ --tide-booking-flight-options-filter-group-title-subtext-color: var(
633
+ --tide-booking-gray-dark
634
+ );
635
+ --tide-booking-flight-options-filter-group-title-subtext-font-weight: 400;
636
+ --tide-booking-flight-options-filter-group-title-subtext-font-family: var(
637
+ --tide-booking-font-body
638
+ );
639
+
640
+ //STEP-2--ROOM-OPTIONS
641
+
642
+ --tide-booking-room-options-card-background: var(
643
+ --tide-booking-step-card-background
644
+ );
645
+ --tide-booking-room-options-card-border: var(--tide-booking-step-card-border);
646
+ --tide-booking-room-options-card-border-radius: var(
647
+ --tide-booking-step-card-border-radius
648
+ );
649
+
650
+ --tide-booking-room-options-image-border-radius: 10px;
651
+
652
+ --tide-booking-room-options-usp-list-color: var(--tide-booking-gray-dark);
653
+ --tide-booking-room-options-usp-list-font-weight: 400;
654
+ --tide-booking-room-options-usp-list-icon-color: var(
655
+ --tide-booking-color-primary
656
+ );
657
+
658
+ --tide-booking-room-options-title-color: var(--tide-booking-black);
659
+ --tide-booking-room-options-title-font-family: var(
660
+ --tide-booking-font-heading
661
+ );
662
+ --tide-booking-room-options-title-font-weight: 500;
663
+
664
+ --tide-booking-room-options-dropdown-select-border: var(
665
+ --tide-booking-dropdown-border
666
+ );
667
+ --tide-booking-room-options-dropdown-select-border-radius: var(
668
+ --tide-booking-dropdown-border-radius
669
+ );
670
+ --tide-booking-room-options-dropdown-select-font-family: var(
671
+ --tide-booking-dropdown-font-family
672
+ );
673
+ --tide-booking-room-options-dropdown-select-color: var(
674
+ --tide-booking-dropdown-color
675
+ );
676
+ --tide-booking-room-options-dropdown-select-background: var(
677
+ --tide-booking-dropdown-background
678
+ );
679
+ --tide-booking-room-options-dropdown-select-border-focus: var(
680
+ --tide-booking-dropdown-border-focus
681
+ );
682
+
683
+ --tide-booking-room-options-dropdown-select-icon-color: var(
684
+ --tide-booking-dropdown-arrow-color
685
+ );
686
+
687
+ //ALTERNATIVE--ROOM-OPTIONS
688
+ --tide-booking-room-options-alternative-btn-color: var(
689
+ --tide-booking-color-secondary
690
+ );
691
+ --tide-booking-room-options-alternative-btn-text-decoration: underline;
692
+
693
+ //ALTERNATIVE--ROOM-OPTIONS--HOVER
694
+ --tide-booking-room-options-alternative-btn-color-hover: var(
695
+ --tide-booking-color-secondary-light
696
+ );
697
+ --tide-booking-room-options-alternative-btn-text-decoration-hover: none;
698
+
699
+ //ALTERNATIVE--ROOM-OPTIONS--HEADER
700
+ --tide-booking-room-options-alternative-header-color: var(
701
+ --tide-booking-black
702
+ );
703
+
704
+ //STEP-3 EXTA-OPTIONS
705
+ --tide-booking-extra-options-card-background: var(
706
+ --tide-booking-step-card-background
707
+ );
708
+ --tide-booking-extra-options-card-border: var(
709
+ --tide-booking-step-card-border
710
+ );
711
+ --tide-booking-extra-options-card-border-radius: var(
712
+ --tide-booking-step-card-border-radius
713
+ );
714
+
715
+ --tide-booking-extra-options-card-title-color: var(--tide-booking-black);
716
+
717
+ //TAG
718
+ --tide-booking-tag-background: linear-gradient(
719
+ 204.08deg,
720
+ #11b684 1.64%,
721
+ #1f9470 84.55%
722
+ );
723
+ --tide-booking-tag-border: none;
724
+ --tide-booking-tag-border-radius: 0 5px 5px 0;
725
+ --tide-booking-tag-color: var(--tide-booking-white);
726
+ --tide-booking-tag-font-family: var(--tide-booking-font-body);
727
+ --tide-booking-tag-font-weight: 400;
728
+
729
+ //INPUT--SELECTED
730
+ --tide-booking-input-selected-background: #667dff10;
731
+ --tide-booking-input-selected-border: none;
732
+ --tide-booking-input-selected-border-radius: 5px;
733
+ --tide-booking-input-selected-color: var(--tide-booking-color-primary);
734
+
735
+ //TOGGLE
736
+ --tide-booking-flight-extra-options-toggle-icon-color: var(
737
+ --tide-booking-step-toggle-btn-color
738
+ );
739
+ --tide-booking-flight-extra-options-toggle-background: var(
740
+ --tide-booking-step-toggle-btn-background
741
+ );
742
+ --tide-booking-flight-extra-options-toggle-border: var(
743
+ --tide-booking-step-toggle-btn-border
744
+ );
745
+ --tide-booking-flight-extra-options-toggle-border-radius: var(
746
+ --tide-booking-step-toggle-btn-border-radius
747
+ );
748
+
749
+ //HOVER,FOCUS
750
+ --tide-booking-flight-extra-options-toggle-icon-color-hover: var(
751
+ --tide-booking-step-toggle-btn-color-hover
752
+ );
753
+ --tide-booking-flight-extra-options-toggle-background-hover: var(
754
+ --tide-booking-step-toggle-btn-background-hover
755
+ );
756
+ --tide-booking-flight-extra-options-toggle-border-hover: var(
757
+ --tide-booking-step-toggle-btn-border-hover
758
+ );
759
+
760
+ //STEP-4--FORM
761
+ --tide-booking-form-card-background: var(--tide-booking-step-card-background);
762
+ --tide-booking-form-card-border: var(--tide-booking-step-card-border);
763
+ --tide-booking-form-card-border-radius: var(
764
+ --tide-booking-step-card-border-radius
765
+ );
766
+
767
+ //GROUP--BORDER
768
+ --tide-booking-form-group-border: 1.5px solid
769
+ var(--tide-booking-color-primary-fade);
770
+
771
+ //LABEL
772
+ --tide-booking-form-label-color: var(--tide-booking-gray-dark);
773
+ --tide-booking-form-label-font-family: var(--tide-booking-font-body);
774
+ --tide-booking-form-label-font-weight: 300;
775
+
776
+ //TYPEAHEAD--AGENT
777
+ --tide-booking-form-typeahead-agent-background: var(
778
+ --tide-booking-gray-xlight
779
+ );
780
+ --tide-booking-form-typeahead-agent-border: 1.5px solid
781
+ var(--tide-booking-gray--medium-light);
782
+ --tide-booking-form-typeahead-agent-border-radius: 5px;
783
+ --tide-booking-form-typeahead-agent-color: var(--tide-booking-black);
784
+ --tide-booking-form-typeahead-agent-font-family: var(
785
+ --tide-booking-font-body
786
+ );
787
+ --tide-booking-form-typeahead-agent-icon-color: var(--tide-booking-black);
788
+ --tide-booking-form-typeahead-agent-clear-icon-color: var(
789
+ --tide-booking-color-primary
790
+ );
791
+
792
+ --tide-booking-form-typeahead-agent-placeholder-color: var(
793
+ --tide-booking-gray-medium
794
+ );
795
+ --tide-booking-form-typeahead-agent-placeholder-font-family: var(
796
+ --tide-booking-font-body
797
+ );
798
+
799
+ //TYPEAHEAD--AGENT--HOVER/FOCUS
800
+ --tide-booking-form-typeahead-agent-background-hover: var(
801
+ --tide-booking-white
802
+ );
803
+ --tide-booking-form-typeahead-agent-border-hover: 1.5px solid
804
+ var(--tide-booking-color-primary);
805
+ --tide-booking-form-typeahead-agent-color-hover: var(--tide-booking-black);
806
+ --tide-booking-form-typeahead-agent-icon-color-hover: var(
807
+ --tide-booking-color-primary
808
+ );
809
+
810
+ //TYPEAHEAD--AGENT--OPTIONS
811
+ --tide-booking-form-typeahead-agent-options-background: var(
812
+ --tide-booking-white
813
+ );
814
+ --tide-booking-form-typeahead-agent-options-border: 1.5px solid
815
+ var(--tide-booking-gray-border-light);
816
+ --tide-booking-form-typeahead-agent-options-border-radius: 5px;
817
+ --tide-booking-form-typeahead-agent-options-color: var(
818
+ --tide-booking-gray-dark
819
+ );
820
+
821
+ //TYPEAHEAD--AGENT--OPTIONS--HOVER
822
+ --tide-booking-form-typeahead-agent-options-background-hover: var(
823
+ --tide-booking-gray-border-light
824
+ );
825
+ --tide-booking-form-typeahead-agent-options-color-hover: var(
826
+ --tide-booking-black
827
+ );
828
+
829
+ //TYPEAHEAD--AGENT--OPTIONS--HIGHLIGHT
830
+ --tide-booking-form-typeahead-agent-options-color-highlight: var(
831
+ --tide-booking-black
832
+ );
833
+ --tide-booking-form-typeahead-agent-options-font-weight-highlight: 600;
834
+
835
+ //STEP-5--OVERVIEW
836
+ --tide-booking-form-summary-background: var(
837
+ --tide-booking-step-card-background
838
+ );
839
+ --tide-booking-form-summary-border: var(--tide-booking-step-card-border);
840
+ --tide-booking-form-summary-border-radius: var(
841
+ --tide-booking-step-card-border-radius
842
+ );
843
+
844
+ //VOUCHER--REMOVE-BTN
845
+ --tide-booking-form-summary-voucher-remove-btn-background: var(
846
+ --tide-booking-transparent
847
+ );
848
+ --tide-booking-form-summary-voucher-remove-btn-color: var(
849
+ --tide-booking-color-primary
850
+ );
851
+ --tide-booking-form-summary-voucher-remove-btn-border: none;
852
+ --tide-booking-form-summary-voucher-remove-btn-border-radius: 5px;
853
+
854
+ //VOUCHER--REMOVE-BTN--HOVER
855
+ --tide-booking-form-summary-voucher-remove-btn-background-hover: var(
856
+ --tide-booking-transparent
857
+ );
858
+ --tide-booking-form-summary-voucher-remove-btn-color-hover: var(
859
+ --tide-booking-color-primary-dark
860
+ );
861
+ --tide-booking-form-summary-voucher-remove-btn-border-hover: none;
862
+
863
+ //STEP-6--CONFIRMATION
864
+ --tide-booking-confirmation-background: var(
865
+ --tide-booking-step-card-background
866
+ );
867
+ --tide-booking-confirmation-border: var(--tide-booking-step-card-border);
868
+ --tide-booking-confirmation-border-radius: var(
869
+ --tide-booking-step-card-border-radius
870
+ );
871
+
872
+ --tide-booking-confirmation-icon-color: var(--tide-booking-color-secondary);
873
+ }