@qite/tide-booking-component 1.4.93 → 1.4.95

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 (181) hide show
  1. package/.prettierrc +9 -9
  2. package/.vs/ProjectSettings.json +3 -3
  3. package/.vs/VSWorkspaceState.json +5 -5
  4. package/build/build-cjs/index.js +81 -27
  5. package/build/build-cjs/src/booking-wizard/features/booking/booking-slice.d.ts +2 -1
  6. package/build/build-cjs/src/booking-wizard/features/booking/selectors.d.ts +4 -3
  7. package/build/build-cjs/src/booking-wizard/features/price-details/price-details-slice.d.ts +1 -0
  8. package/build/build-cjs/src/booking-wizard/features/price-details/selectors.d.ts +1 -0
  9. package/build/build-cjs/src/booking-wizard/features/sidebar/sidebar.d.ts +1 -0
  10. package/build/build-cjs/src/booking-wizard/types.d.ts +1 -0
  11. package/build/build-cjs/src/shared/utils/localization-util.d.ts +1 -0
  12. package/build/build-esm/index.js +81 -27
  13. package/build/build-esm/src/booking-wizard/features/booking/booking-slice.d.ts +2 -1
  14. package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts +4 -3
  15. package/build/build-esm/src/booking-wizard/features/price-details/price-details-slice.d.ts +1 -0
  16. package/build/build-esm/src/booking-wizard/features/price-details/selectors.d.ts +1 -0
  17. package/build/build-esm/src/booking-wizard/features/sidebar/sidebar.d.ts +1 -0
  18. package/build/build-esm/src/booking-wizard/types.d.ts +1 -0
  19. package/build/build-esm/src/shared/utils/localization-util.d.ts +1 -0
  20. package/package.json +83 -83
  21. package/src/booking-product/components/age-select.tsx +35 -35
  22. package/src/booking-product/components/amount-input.tsx +51 -51
  23. package/src/booking-product/components/date-range-picker/calendar.tsx +155 -155
  24. package/src/booking-product/components/footer.tsx +54 -54
  25. package/src/booking-product/components/header.tsx +57 -57
  26. package/src/booking-product/components/icon.tsx +200 -200
  27. package/src/booking-product/components/list-view.tsx +54 -54
  28. package/src/booking-product/components/rating.tsx +21 -21
  29. package/src/booking-product/components/rooms.tsx +171 -171
  30. package/src/booking-product/constants.ts +1 -1
  31. package/src/booking-product/index.tsx +21 -21
  32. package/src/booking-product/settings-context.ts +16 -16
  33. package/src/booking-product/types.ts +30 -30
  34. package/src/booking-product/utils/api.ts +26 -26
  35. package/src/booking-product/utils/price.ts +28 -28
  36. package/src/booking-wizard/api-settings-slice.ts +24 -24
  37. package/src/booking-wizard/components/icon.tsx +398 -398
  38. package/src/booking-wizard/components/labeled-input.tsx +56 -56
  39. package/src/booking-wizard/components/labeled-select.tsx +54 -54
  40. package/src/booking-wizard/components/message.tsx +21 -21
  41. package/src/booking-wizard/components/multi-range-filter.tsx +99 -99
  42. package/src/booking-wizard/components/phone-input.tsx +146 -146
  43. package/src/booking-wizard/components/print-offer-button.tsx +53 -53
  44. package/src/booking-wizard/components/product-card.tsx +23 -23
  45. package/src/booking-wizard/declarations.d.ts +4 -4
  46. package/src/booking-wizard/features/booking/booking-self-contained.tsx +16 -1
  47. package/src/booking-wizard/features/booking/booking-slice.ts +9 -1
  48. package/src/booking-wizard/features/booking/booking.tsx +16 -1
  49. package/src/booking-wizard/features/booking/selectors.ts +5 -0
  50. package/src/booking-wizard/features/flight-options/flight-filter.tsx +371 -371
  51. package/src/booking-wizard/features/flight-options/flight-option-flight.tsx +354 -354
  52. package/src/booking-wizard/features/flight-options/flight-option-modal.tsx +211 -211
  53. package/src/booking-wizard/features/flight-options/flight-option.tsx +57 -57
  54. package/src/booking-wizard/features/flight-options/flight-utils.ts +423 -423
  55. package/src/booking-wizard/features/price-details/price-details-api.ts +20 -20
  56. package/src/booking-wizard/features/price-details/price-details-slice.ts +2 -0
  57. package/src/booking-wizard/features/price-details/selectors.ts +1 -0
  58. package/src/booking-wizard/features/price-details/util.ts +115 -115
  59. package/src/booking-wizard/features/product-options/no-options.tsx +18 -18
  60. package/src/booking-wizard/features/product-options/none-option.tsx +73 -73
  61. package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx +53 -53
  62. package/src/booking-wizard/features/product-options/option-booking-group.tsx +152 -152
  63. package/src/booking-wizard/features/product-options/option-item.tsx +236 -236
  64. package/src/booking-wizard/features/product-options/option-pax-card.tsx +159 -159
  65. package/src/booking-wizard/features/product-options/option-pax-group.tsx +122 -122
  66. package/src/booking-wizard/features/product-options/option-room.tsx +226 -226
  67. package/src/booking-wizard/features/product-options/option-unit-group.tsx +138 -138
  68. package/src/booking-wizard/features/room-options/room-utils.ts +154 -154
  69. package/src/booking-wizard/features/room-options/room.tsx +123 -123
  70. package/src/booking-wizard/features/room-options/traveler-rooms.tsx +64 -64
  71. package/src/booking-wizard/features/sidebar/index.tsx +2 -0
  72. package/src/booking-wizard/features/sidebar/sidebar-flight.tsx +66 -66
  73. package/src/booking-wizard/features/sidebar/sidebar.tsx +17 -1
  74. package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx +23 -23
  75. package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx +23 -23
  76. package/src/booking-wizard/features/summary/summary-flight.tsx +36 -36
  77. package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx +60 -60
  78. package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx +56 -56
  79. package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx +58 -58
  80. package/src/booking-wizard/features/summary/summary-slice.ts +27 -27
  81. package/src/booking-wizard/features/travelers-form/travelers-form-slice.ts +157 -157
  82. package/src/booking-wizard/features/travelers-form/travelers-form-util.ts +10 -10
  83. package/src/booking-wizard/features/travelers-form/type-ahead-input.tsx +85 -85
  84. package/src/booking-wizard/features/travelers-form/validate-form.ts +178 -178
  85. package/src/booking-wizard/index.tsx +27 -27
  86. package/src/booking-wizard/store.ts +26 -26
  87. package/src/booking-wizard/types.ts +1 -0
  88. package/src/booking-wizard/use-offer-printer.ts +108 -108
  89. package/src/content/components/LanguageSwitcher.tsx +158 -158
  90. package/src/content/components/accordion.tsx +30 -30
  91. package/src/content/components/contact.tsx +211 -211
  92. package/src/content/components/personal-contact-form.tsx +809 -809
  93. package/src/content/header/index.tsx +43 -43
  94. package/src/content/header/types.ts +26 -26
  95. package/src/qsm/components/date-picker/index.tsx +152 -152
  96. package/src/qsm/components/date-range-picker/calendar-day.tsx +49 -49
  97. package/src/qsm/components/date-range-picker/calendar.tsx +211 -211
  98. package/src/qsm/components/date-range-picker/index.tsx +404 -404
  99. package/src/qsm/index.tsx +26 -26
  100. package/src/qsm/store/qsm-store.ts +13 -13
  101. package/src/search-results/components/flight/flight-card.tsx +38 -38
  102. package/src/search-results/components/flight/flight-leg.tsx +61 -61
  103. package/src/search-results/components/flight/flight-path.tsx +23 -23
  104. package/src/search-results/components/multi-range-filter.tsx +104 -104
  105. package/src/search-results/components/search-results-container/search-results-container.tsx +2 -2
  106. package/src/search-results/index.tsx +24 -24
  107. package/src/search-results/search-results-configuration-context.ts +6 -6
  108. package/src/search-results/store/search-results-store.ts +13 -13
  109. package/src/shared/components/loader.tsx +16 -16
  110. package/src/shared/translations/ar-SA.json +2 -1
  111. package/src/shared/translations/da-DK.json +2 -1
  112. package/src/shared/translations/de-DE.json +2 -1
  113. package/src/shared/translations/en-GB.json +2 -1
  114. package/src/shared/translations/es-ES.json +2 -1
  115. package/src/shared/translations/fr-BE.json +2 -1
  116. package/src/shared/translations/fr-FR.json +2 -1
  117. package/src/shared/translations/is-IS.json +2 -1
  118. package/src/shared/translations/it-IT.json +2 -1
  119. package/src/shared/translations/ja-JP.json +2 -1
  120. package/src/shared/translations/nl-BE.json +2 -1
  121. package/src/shared/translations/nl-NL.json +2 -1
  122. package/src/shared/translations/no-NO.json +2 -1
  123. package/src/shared/translations/pl-PL.json +2 -1
  124. package/src/shared/translations/pt-PT.json +2 -1
  125. package/src/shared/translations/sv-SE.json +2 -1
  126. package/src/shared/utils/class-util.ts +7 -7
  127. package/src/shared/utils/query-string-util.ts +91 -91
  128. package/src/shared/utils/tide-api-utils.ts +34 -34
  129. package/src/shared/utils/use-media-query-util.ts +19 -19
  130. package/styles/abstracts/_mixins.scss +74 -74
  131. package/styles/abstracts/_variables.scss +57 -57
  132. package/styles/base/_fonts.scss +2 -2
  133. package/styles/base/_normalize.scss +227 -227
  134. package/styles/base/_typography.scss +35 -35
  135. package/styles/booking-joker-variables.scss +596 -596
  136. package/styles/booking-product-variables.scss +330 -330
  137. package/styles/booking-product.scss +438 -438
  138. package/styles/booking-qsm-variables.scss +501 -501
  139. package/styles/booking-qsm.scss +52 -52
  140. package/styles/booking-wizard-variables.scss +603 -603
  141. package/styles/booking-wizard.scss +61 -61
  142. package/styles/components/_accordion.scss +67 -67
  143. package/styles/components/_animations.scss +39 -39
  144. package/styles/components/_base.scss +107 -107
  145. package/styles/components/_breadcrumb.scss +92 -92
  146. package/styles/components/_button.scss +238 -238
  147. package/styles/components/_checkbox.scss +230 -230
  148. package/styles/components/_contact.scss +239 -239
  149. package/styles/components/_cta.scss +238 -238
  150. package/styles/components/_date-list.scss +41 -41
  151. package/styles/components/_date-range-picker.scss +223 -223
  152. package/styles/components/_decrement-increment.scss +35 -35
  153. package/styles/components/_dropdown.scss +72 -72
  154. package/styles/components/_faq.scss +27 -27
  155. package/styles/components/_flight-option.scss +1419 -1419
  156. package/styles/components/_gallery.scss +314 -314
  157. package/styles/components/_header.scss +113 -113
  158. package/styles/components/_img-slider.scss +175 -175
  159. package/styles/components/_info-message.scss +75 -75
  160. package/styles/components/_input.scss +35 -35
  161. package/styles/components/_list.scss +185 -185
  162. package/styles/components/_loader.scss +70 -70
  163. package/styles/components/_mixins.scss +579 -579
  164. package/styles/components/_passenger-picker.scss +306 -306
  165. package/styles/components/_phone-input.scss +8 -8
  166. package/styles/components/_placeholders.scss +165 -165
  167. package/styles/components/_qsm.scss +17 -17
  168. package/styles/components/_radiobutton.scss +170 -170
  169. package/styles/components/_select-wrapper.scss +76 -76
  170. package/styles/components/_slider.scss +128 -128
  171. package/styles/components/_spinner.scss +29 -29
  172. package/styles/components/_step-indicators.scss +161 -161
  173. package/styles/components/_table.scss +81 -81
  174. package/styles/components/_typeahead.scss +275 -275
  175. package/styles/components/_variables.scss +89 -89
  176. package/styles/content-blocks-variables.scss +507 -507
  177. package/styles/font.scss +2 -2
  178. package/styles/qsm/_calendar.scss +274 -274
  179. package/styles/qsm/_qsm.scss +1094 -1094
  180. package/styles/search.scss +1200 -1200
  181. package/tsconfig.json +24 -24
package/styles/components/_cta.scss CHANGED
@@ -1,238 +1,238 @@
1
- .cta {
2
- @extend %cta;
3
- @extend %transition-easing;
4
-
5
- // &:not(&--disabled) {
6
- // opacity: 1;
7
- // outline: none;
8
- // fill: var(--tide-booking-cta-icon-color);
9
- // color: var(--tide-booking-cta-color);
10
- // background: var(--tide-booking-cta-background);
11
- // }
12
-
13
- @include media-xl {
14
- //font-size: 1.7rem;
15
- }
16
-
17
- &--add {
18
- @include media-xs {
19
- margin: var(--tide-booking-cta-margin-secondary);
20
- }
21
-
22
- span {
23
- display: flex;
24
- align-items: center;
25
- gap: 5px;
26
- }
27
- }
28
-
29
- &--disabled {
30
- opacity: 0.5;
31
- pointer-events: none;
32
- cursor: not-allowed;
33
-
34
- &:hover,
35
- &:focus,
36
- &:active {
37
- opacity: 0.5;
38
- }
39
- }
40
-
41
- &--icon {
42
- flex-shrink: 0;
43
- white-space: nowrap;
44
- }
45
-
46
- &--secondary {
47
- @extend %cta--secondary;
48
-
49
- // &:not(&--disabled) {
50
- // opacity: 1;
51
- // outline: none;
52
- // fill: var(--tide-booking-cta-icon-color-secondary);
53
- // color: var(--tide-booking-cta-color-secondary);
54
- // background: var(--tide-booking-cta-background-secondary);
55
- // }
56
-
57
- .icon {
58
- width: 16px;
59
- height: 16px;
60
- }
61
- }
62
-
63
- &--select {
64
- background: var(--tide-booking-cta-background-select);
65
- color: var(--tide-booking-cta-color-select);
66
- border: var(--tide-booking-cta-border-select);
67
- border-radius: var(--tide-booking-cta-border-radius-select);
68
-
69
- &:hover,
70
- &:focus,
71
- &:active {
72
- border: var(--tide-booking-cta-border-select-hover);
73
- background: var(--tide-booking-cta-background-select-hover);
74
- color: var(--tide-booking-cta-color-select-hover);
75
- }
76
- }
77
-
78
- &--selected {
79
- background: var(--tide-booking-cta-background-selected);
80
- color: var(--tide-booking-cta-color-selected);
81
- border: var(--tide-booking-cta-border-selected);
82
- border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
83
-
84
- &:before {
85
- content: '';
86
- width: 13px;
87
- height: 6px;
88
- margin-right: 8px;
89
- display: inline-flex;
90
- flex-shrink: 0;
91
- border-left: 1.5px solid var(--tide-booking-cta-color-selected-icon);
92
- border-bottom: 1.5px solid var(--tide-booking-cta-color-selected-icon);
93
- transform: rotate(-45deg) translate3D(2px, -1px, 0);
94
- }
95
-
96
- &:hover,
97
- &:focus,
98
- &:active {
99
- border: var(--tide-booking-cta-border-selected);
100
- background: var(--tide-booking-cta-background-selected);
101
- color: var(--tide-booking-cta-color-selected);
102
- }
103
- }
104
-
105
- &--filter {
106
- position: absolute;
107
- right: 15px;
108
- top: -70px;
109
- width: auto;
110
- display: flex;
111
- align-items: center;
112
- padding: 10px;
113
- gap: 5px;
114
- background: var(--tide-booking-flight-options-filter-btn-background);
115
- color: var(--tide-booking-flight-options-filter-btn-color);
116
- border: var(--tide-booking-flight-options-filter-btn-border);
117
- border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
118
-
119
- @include media-xs {
120
- padding: var(--tide-booking-cta-padding);
121
- }
122
-
123
- span {
124
- display: none;
125
-
126
- @include media-xs {
127
- display: flex;
128
- }
129
- }
130
-
131
- svg {
132
- fill: var(--tide-booking-flight-options-filter-btn-icon-color);
133
- }
134
-
135
- &:hover,
136
- &:focus,
137
- &:active {
138
- border: var(--tide-booking-flight-options-filter-btn-hover-border);
139
- background: var(--tide-booking-flight-options-filter-btn-hover-background);
140
- color: var(--tide-booking-flight-options-filter-btn-hover-color);
141
-
142
- svg {
143
- fill: var(--tide-booking-flight-options-filter-btn-hover-icon-color);
144
- }
145
- }
146
- }
147
-
148
- &--close {
149
- padding: 0px;
150
- background: transparent;
151
- border: none;
152
- position: absolute;
153
- top: -5px;
154
- right: 0px;
155
- justify-content: flex-end;
156
-
157
- .icon {
158
- width: 25px;
159
- height: 25px;
160
- fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
161
- }
162
-
163
- &:hover,
164
- &:focus,
165
- &:active {
166
- border: none;
167
- background: transparent;
168
-
169
- .icon {
170
- fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
171
- }
172
- }
173
- }
174
-
175
- &--add-remove {
176
- padding: 5px;
177
- background: var(--tide-booking-form-summary-voucher-remove-btn-background);
178
- border: var(--tide-booking-form-summary-voucher-remove-btn-border);
179
- border-radius: var(--tide-booking-form-summary-voucher-remove-btn-border-radius);
180
- display: flex;
181
- justify-content: center;
182
- align-items: center;
183
- @extend %transition-easing;
184
-
185
- .icon {
186
- width: 16px;
187
- height: 16px;
188
- fill: var(--tide-booking-form-summary-voucher-remove-btn-color);
189
- @extend %transition-easing;
190
- }
191
-
192
- &:hover,
193
- &:focus,
194
- &:active {
195
- border: var(--tide-booking-form-summary-voucher-remove-btn-border-hover);
196
- background: var(--tide-booking-form-summary-voucher-remove-btn-background-hover);
197
-
198
- .icon {
199
- fill: var(--tide-booking-form-summary-voucher-remove-btn-color-hover);
200
- }
201
- }
202
- }
203
-
204
- &--remove {
205
- height: var(--tide-booking-cta-height-remove);
206
- width: var(--tide-booking-cta-width-remove);
207
- padding: var(--tide-booking-cta-padding-remove);
208
- color: var(--tide-booking-cta-color-remove);
209
- text-decoration: var(--tide-booking-cta-text-decoration-remove);
210
- background: var(--tide-booking-cta-background-remove);
211
- border: var(--tide-booking-cta-border-remove);
212
- border-radius: var(--tide-booking-cta-border-radius-remove);
213
- display: flex;
214
- justify-content: center;
215
- align-items: center;
216
- @extend %transition-easing;
217
-
218
- .icon {
219
- width: var(--tide-booking-cta-icon-size-remove);
220
- height: var(--tide-booking-cta-icon-size-remove);
221
- fill: var(--tide-booking-cta-icon-color-remove);
222
- @extend %transition-easing;
223
- }
224
-
225
- &:hover,
226
- &:focus,
227
- &:active {
228
- background: var(--tide-booking-cta-background-remove-hover);
229
- color: var(--tide-booking-cta-color-remove-hover);
230
- text-decoration: var(--tide-booking-cta-text-decoration-remove-hover);
231
- border: var(--tide-booking-cta-border-remove-hover);
232
-
233
- .icon {
234
- fill: var(--tide-booking-cta-icon-color-remove-hover);
235
- }
236
- }
237
- }
238
- }
1
+ .cta {
2
+ @extend %cta;
3
+ @extend %transition-easing;
4
+
5
+ // &:not(&--disabled) {
6
+ // opacity: 1;
7
+ // outline: none;
8
+ // fill: var(--tide-booking-cta-icon-color);
9
+ // color: var(--tide-booking-cta-color);
10
+ // background: var(--tide-booking-cta-background);
11
+ // }
12
+
13
+ @include media-xl {
14
+ //font-size: 1.7rem;
15
+ }
16
+
17
+ &--add {
18
+ @include media-xs {
19
+ margin: var(--tide-booking-cta-margin-secondary);
20
+ }
21
+
22
+ span {
23
+ display: flex;
24
+ align-items: center;
25
+ gap: 5px;
26
+ }
27
+ }
28
+
29
+ &--disabled {
30
+ opacity: 0.5;
31
+ pointer-events: none;
32
+ cursor: not-allowed;
33
+
34
+ &:hover,
35
+ &:focus,
36
+ &:active {
37
+ opacity: 0.5;
38
+ }
39
+ }
40
+
41
+ &--icon {
42
+ flex-shrink: 0;
43
+ white-space: nowrap;
44
+ }
45
+
46
+ &--secondary {
47
+ @extend %cta--secondary;
48
+
49
+ // &:not(&--disabled) {
50
+ // opacity: 1;
51
+ // outline: none;
52
+ // fill: var(--tide-booking-cta-icon-color-secondary);
53
+ // color: var(--tide-booking-cta-color-secondary);
54
+ // background: var(--tide-booking-cta-background-secondary);
55
+ // }
56
+
57
+ .icon {
58
+ width: 16px;
59
+ height: 16px;
60
+ }
61
+ }
62
+
63
+ &--select {
64
+ background: var(--tide-booking-cta-background-select);
65
+ color: var(--tide-booking-cta-color-select);
66
+ border: var(--tide-booking-cta-border-select);
67
+ border-radius: var(--tide-booking-cta-border-radius-select);
68
+
69
+ &:hover,
70
+ &:focus,
71
+ &:active {
72
+ border: var(--tide-booking-cta-border-select-hover);
73
+ background: var(--tide-booking-cta-background-select-hover);
74
+ color: var(--tide-booking-cta-color-select-hover);
75
+ }
76
+ }
77
+
78
+ &--selected {
79
+ background: var(--tide-booking-cta-background-selected);
80
+ color: var(--tide-booking-cta-color-selected);
81
+ border: var(--tide-booking-cta-border-selected);
82
+ border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
83
+
84
+ &:before {
85
+ content: '';
86
+ width: 13px;
87
+ height: 6px;
88
+ margin-right: 8px;
89
+ display: inline-flex;
90
+ flex-shrink: 0;
91
+ border-left: 1.5px solid var(--tide-booking-cta-color-selected-icon);
92
+ border-bottom: 1.5px solid var(--tide-booking-cta-color-selected-icon);
93
+ transform: rotate(-45deg) translate3D(2px, -1px, 0);
94
+ }
95
+
96
+ &:hover,
97
+ &:focus,
98
+ &:active {
99
+ border: var(--tide-booking-cta-border-selected);
100
+ background: var(--tide-booking-cta-background-selected);
101
+ color: var(--tide-booking-cta-color-selected);
102
+ }
103
+ }
104
+
105
+ &--filter {
106
+ position: absolute;
107
+ right: 15px;
108
+ top: -70px;
109
+ width: auto;
110
+ display: flex;
111
+ align-items: center;
112
+ padding: 10px;
113
+ gap: 5px;
114
+ background: var(--tide-booking-flight-options-filter-btn-background);
115
+ color: var(--tide-booking-flight-options-filter-btn-color);
116
+ border: var(--tide-booking-flight-options-filter-btn-border);
117
+ border-radius: var(--tide-booking-flight-options-filter-btn-border-radius);
118
+
119
+ @include media-xs {
120
+ padding: var(--tide-booking-cta-padding);
121
+ }
122
+
123
+ span {
124
+ display: none;
125
+
126
+ @include media-xs {
127
+ display: flex;
128
+ }
129
+ }
130
+
131
+ svg {
132
+ fill: var(--tide-booking-flight-options-filter-btn-icon-color);
133
+ }
134
+
135
+ &:hover,
136
+ &:focus,
137
+ &:active {
138
+ border: var(--tide-booking-flight-options-filter-btn-hover-border);
139
+ background: var(--tide-booking-flight-options-filter-btn-hover-background);
140
+ color: var(--tide-booking-flight-options-filter-btn-hover-color);
141
+
142
+ svg {
143
+ fill: var(--tide-booking-flight-options-filter-btn-hover-icon-color);
144
+ }
145
+ }
146
+ }
147
+
148
+ &--close {
149
+ padding: 0px;
150
+ background: transparent;
151
+ border: none;
152
+ position: absolute;
153
+ top: -5px;
154
+ right: 0px;
155
+ justify-content: flex-end;
156
+
157
+ .icon {
158
+ width: 25px;
159
+ height: 25px;
160
+ fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
161
+ }
162
+
163
+ &:hover,
164
+ &:focus,
165
+ &:active {
166
+ border: none;
167
+ background: transparent;
168
+
169
+ .icon {
170
+ fill: var(--tide-booking-flight-options-filter-header-close-icon-color);
171
+ }
172
+ }
173
+ }
174
+
175
+ &--add-remove {
176
+ padding: 5px;
177
+ background: var(--tide-booking-form-summary-voucher-remove-btn-background);
178
+ border: var(--tide-booking-form-summary-voucher-remove-btn-border);
179
+ border-radius: var(--tide-booking-form-summary-voucher-remove-btn-border-radius);
180
+ display: flex;
181
+ justify-content: center;
182
+ align-items: center;
183
+ @extend %transition-easing;
184
+
185
+ .icon {
186
+ width: 16px;
187
+ height: 16px;
188
+ fill: var(--tide-booking-form-summary-voucher-remove-btn-color);
189
+ @extend %transition-easing;
190
+ }
191
+
192
+ &:hover,
193
+ &:focus,
194
+ &:active {
195
+ border: var(--tide-booking-form-summary-voucher-remove-btn-border-hover);
196
+ background: var(--tide-booking-form-summary-voucher-remove-btn-background-hover);
197
+
198
+ .icon {
199
+ fill: var(--tide-booking-form-summary-voucher-remove-btn-color-hover);
200
+ }
201
+ }
202
+ }
203
+
204
+ &--remove {
205
+ height: var(--tide-booking-cta-height-remove);
206
+ width: var(--tide-booking-cta-width-remove);
207
+ padding: var(--tide-booking-cta-padding-remove);
208
+ color: var(--tide-booking-cta-color-remove);
209
+ text-decoration: var(--tide-booking-cta-text-decoration-remove);
210
+ background: var(--tide-booking-cta-background-remove);
211
+ border: var(--tide-booking-cta-border-remove);
212
+ border-radius: var(--tide-booking-cta-border-radius-remove);
213
+ display: flex;
214
+ justify-content: center;
215
+ align-items: center;
216
+ @extend %transition-easing;
217
+
218
+ .icon {
219
+ width: var(--tide-booking-cta-icon-size-remove);
220
+ height: var(--tide-booking-cta-icon-size-remove);
221
+ fill: var(--tide-booking-cta-icon-color-remove);
222
+ @extend %transition-easing;
223
+ }
224
+
225
+ &:hover,
226
+ &:focus,
227
+ &:active {
228
+ background: var(--tide-booking-cta-background-remove-hover);
229
+ color: var(--tide-booking-cta-color-remove-hover);
230
+ text-decoration: var(--tide-booking-cta-text-decoration-remove-hover);
231
+ border: var(--tide-booking-cta-border-remove-hover);
232
+
233
+ .icon {
234
+ fill: var(--tide-booking-cta-icon-color-remove-hover);
235
+ }
236
+ }
237
+ }
238
+ }
package/styles/components/_date-list.scss CHANGED
@@ -1,41 +1,41 @@
1
- .date-list {
2
- display: flex;
3
- }
4
-
5
- .date-list__item + .date-list__item:before {
6
- content: '';
7
- width: 5px;
8
- height: 5px;
9
- margin: 0 5px 0 3px;
10
- display: inline-flex;
11
- border-right: 1.5px solid var(--tide-booking-radiobutton-color-text);
12
- border-bottom: 1.5px solid var(--tide-booking-radiobutton-color-text);
13
- transform: rotate(-45deg) translate3D(1px, -3px, 0);
14
-
15
- @include media-lg {
16
- width: 7px;
17
- height: 7px;
18
- transform: rotate(-45deg) translate3D(3px, -1px, 0);
19
- }
20
- }
21
-
22
- .tree {
23
- .date-list {
24
- margin: 15px * 0.3 0 0 0;
25
-
26
- @include media-md {
27
- width: 180px;
28
- margin: 0;
29
- }
30
-
31
- @include media-xl {
32
- width: 200px;
33
- }
34
- }
35
-
36
- &--selected {
37
- .date-list__item + .date-list__item:before {
38
- border-color: var(--tide-booking-input-selected-color);
39
- }
40
- }
41
- }
1
+ .date-list {
2
+ display: flex;
3
+ }
4
+
5
+ .date-list__item + .date-list__item:before {
6
+ content: '';
7
+ width: 5px;
8
+ height: 5px;
9
+ margin: 0 5px 0 3px;
10
+ display: inline-flex;
11
+ border-right: 1.5px solid var(--tide-booking-radiobutton-color-text);
12
+ border-bottom: 1.5px solid var(--tide-booking-radiobutton-color-text);
13
+ transform: rotate(-45deg) translate3D(1px, -3px, 0);
14
+
15
+ @include media-lg {
16
+ width: 7px;
17
+ height: 7px;
18
+ transform: rotate(-45deg) translate3D(3px, -1px, 0);
19
+ }
20
+ }
21
+
22
+ .tree {
23
+ .date-list {
24
+ margin: 15px * 0.3 0 0 0;
25
+
26
+ @include media-md {
27
+ width: 180px;
28
+ margin: 0;
29
+ }
30
+
31
+ @include media-xl {
32
+ width: 200px;
33
+ }
34
+ }
35
+
36
+ &--selected {
37
+ .date-list__item + .date-list__item:before {
38
+ border-color: var(--tide-booking-input-selected-color);
39
+ }
40
+ }
41
+ }