@qite/tide-components 1.0.13 → 1.0.14

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 (73) hide show
  1. package/build/build-cjs/index.js +11 -11
  2. package/build/build-esm/index.js +11 -11
  3. package/package.json +1 -1
  4. package/styles/abstracts/_mixins.scss +74 -74
  5. package/styles/abstracts/_variables.scss +57 -57
  6. package/styles/base/_fonts.scss +2 -2
  7. package/styles/base/_normalize.scss +227 -227
  8. package/styles/base/_typography.scss +35 -35
  9. package/styles/booking-joker-variables.scss +596 -596
  10. package/styles/booking-product-variables.scss +330 -330
  11. package/styles/booking-product.scss +438 -438
  12. package/styles/booking-qsm-variables.scss +501 -501
  13. package/styles/booking-qsm.scss +52 -52
  14. package/styles/booking-search-results-variables.scss +734 -734
  15. package/styles/booking-search-results.scss +53 -53
  16. package/styles/booking-wizard-variables.scss +603 -603
  17. package/styles/booking-wizard.scss +61 -61
  18. package/styles/components/_accordion.scss +67 -67
  19. package/styles/components/_animations.scss +39 -39
  20. package/styles/components/_base.scss +107 -107
  21. package/styles/components/_booking.scss +906 -906
  22. package/styles/components/_breadcrumb.scss +92 -92
  23. package/styles/components/_button.scss +238 -238
  24. package/styles/components/_checkbox.scss +230 -230
  25. package/styles/components/_contact.scss +255 -255
  26. package/styles/components/_content.scss +336 -336
  27. package/styles/components/_cta.scss +238 -238
  28. package/styles/components/_date-list.scss +41 -41
  29. package/styles/components/_date-range-picker.scss +223 -223
  30. package/styles/components/_decrement-increment.scss +35 -35
  31. package/styles/components/_dropdown.scss +77 -77
  32. package/styles/components/_error.scss +50 -50
  33. package/styles/components/_faq.scss +30 -30
  34. package/styles/components/_flight-option.scss +1444 -1444
  35. package/styles/components/_flyin.scss +830 -830
  36. package/styles/components/_footer.scss +135 -135
  37. package/styles/components/_form.scss +1704 -1704
  38. package/styles/components/_gallery.scss +317 -317
  39. package/styles/components/_header.scss +113 -113
  40. package/styles/components/_image-with-text.scss +206 -206
  41. package/styles/components/_img-slider.scss +175 -175
  42. package/styles/components/_info-message.scss +75 -75
  43. package/styles/components/_input.scss +35 -35
  44. package/styles/components/_list.scss +185 -185
  45. package/styles/components/_loader.scss +152 -152
  46. package/styles/components/_login.scss +140 -140
  47. package/styles/components/_map-view.scss +1100 -1100
  48. package/styles/components/_mixins.scss +579 -579
  49. package/styles/components/_navbar.scss +765 -765
  50. package/styles/components/_passenger-picker.scss +306 -306
  51. package/styles/components/_phone-input.scss +8 -8
  52. package/styles/components/_placeholders.scss +165 -165
  53. package/styles/components/_pricing-summary.scss +163 -163
  54. package/styles/components/_qsm.scss +17 -17
  55. package/styles/components/_radiobutton.scss +170 -170
  56. package/styles/components/_search.scss +2197 -2197
  57. package/styles/components/_select-wrapper.scss +81 -81
  58. package/styles/components/_slider.scss +120 -120
  59. package/styles/components/_spinner.scss +29 -29
  60. package/styles/components/_step-indicators.scss +187 -187
  61. package/styles/components/_table.scss +81 -81
  62. package/styles/components/_tide-form.scss +578 -578
  63. package/styles/components/_tree.scss +648 -648
  64. package/styles/components/_typeahead.scss +275 -275
  65. package/styles/components/_variables.scss +89 -89
  66. package/styles/content-blocks-variables.scss +543 -543
  67. package/styles/content-blocks.scss +66 -66
  68. package/styles/font.scss +2 -2
  69. package/styles/qsm/_calendar.scss +274 -274
  70. package/styles/qsm/_qsm.scss +1097 -1097
  71. package/styles/search.scss +1200 -1200
  72. package/styles/tide-form-variables.scss +275 -275
  73. package/styles/tide-form.scss +56 -56
package/styles/components/_checkbox.scss CHANGED
@@ -1,230 +1,230 @@
1
- .checkbox {
2
- @extend %reset;
3
- position: relative;
4
- padding: 15px * 0.3 0 15px * 0.3 0px;
5
- @include row;
6
- align-items: flex-start;
7
- justify-content: flex-start;
8
- font-family: var(--tide-booking-checkbox-font-family);
9
- user-select: none;
10
- @extend %transition-easing;
11
-
12
- @include media-xl {
13
- padding: 15px * 0.3 0 15px * 0.3 0px;
14
- }
15
-
16
- &:hover,
17
- &:focus,
18
- &:active {
19
- // color: $gray-dark;
20
- }
21
-
22
- & + & {
23
- margin-top: 10px;
24
- }
25
-
26
- &__description {
27
- @extend %reset;
28
- width: 100%;
29
- display: flex;
30
- @include row;
31
- justify-content: space-between;
32
- word-break: break-word;
33
- }
34
-
35
- &__label {
36
- cursor: pointer;
37
- display: flex;
38
- align-items: center;
39
- gap: 10px;
40
- @extend %transition-easing;
41
- }
42
-
43
- &__input {
44
- position: relative;
45
- min-width: 50px;
46
- height: 28px;
47
- min-height: auto;
48
- left: 0;
49
- padding: 0;
50
- margin-top: 1px;
51
- margin-left: 0;
52
- display: inline-flex;
53
- align-items: center;
54
- border-radius: 25px;
55
- border: 1.5px solid var(--tide-booking-toggle-switch-background);
56
- background: var(--tide-booking-toggle-switch-background);
57
- appearance: none;
58
- @extend %transition-easing;
59
- cursor: pointer;
60
-
61
- @include media-xl {
62
- min-width: 50px;
63
- height: 28px;
64
- }
65
-
66
- &:focus,
67
- &:hover {
68
- border: none;
69
- }
70
-
71
- &:checked {
72
- border-color: var(--tide-booking-toggle-switch-background-toggled);
73
- background: var(--tide-booking-toggle-switch-background-toggled);
74
-
75
- &:after {
76
- transform: translate(100%, -50%);
77
- }
78
-
79
- span {
80
- // color: hotpink;
81
- }
82
- }
83
-
84
- &:after {
85
- content: '';
86
- position: absolute;
87
- width: 20px;
88
- height: 20px;
89
- // transform: translate3D(2px, 0, 0);
90
- top: 50%;
91
- left: 4%;
92
- transform: translate(0%, -50%);
93
- border: 1px solid transparent;
94
- border-radius: 50%;
95
- background: var(--tide-booking-toggle-switch-after-color);
96
- @include transitionEasing($duration: 0.2s);
97
-
98
- @include media-xl {
99
- width: 20px;
100
- height: 20px;
101
- }
102
- }
103
- }
104
-
105
- &__details {
106
- @extend %reset;
107
- @include row--sm;
108
- margin-left: auto;
109
- }
110
-
111
- // &__sidenote {
112
- // @extend %reset;
113
- // white-space: nowrap;
114
- // @include transitionEasing($duration: 0.2s);
115
-
116
- // @include media-sm {
117
- // padding-left: 15px;
118
- // margin-left: auto;
119
- // text-align: right;
120
- // justify-content: flex-end;
121
- // }
122
-
123
- // @include media-md {
124
- // padding-left: 15px * 2;
125
- // }
126
- // }
127
-
128
- &__value {
129
- @extend %reset;
130
- padding-left: 10px;
131
- margin-top: 15px * 0.3;
132
- margin-left: auto;
133
- flex-shrink: 0;
134
- font-style: normal;
135
- text-align: right;
136
- justify-content: flex-end;
137
- white-space: nowrap;
138
- @include transitionEasing($duration: 0.2s);
139
-
140
- @include media-sm {
141
- width: 13rem;
142
- flex-grow: 0;
143
- margin-top: 0;
144
- margin-left: 15px;
145
- }
146
-
147
- @include media-md {
148
- margin-left: 15px * 2;
149
- }
150
- }
151
-
152
- &--reverse {
153
- padding-left: 0;
154
- padding-right: 15px * 4;
155
-
156
- .checkbox__input {
157
- left: initial;
158
- right: 0;
159
- }
160
- }
161
-
162
- span {
163
- @extend %transition-easing;
164
- }
165
-
166
- &--label {
167
- cursor: default;
168
-
169
- .checkbox__input {
170
- border: none;
171
- background-color: transparent;
172
- cursor: default;
173
- appearance: none;
174
- }
175
-
176
- .checkbox__label {
177
- cursor: default;
178
- }
179
- }
180
- }
181
-
182
- // .footer {
183
- // .checkbox__input + span {
184
- // margin-top: 0.3rem;
185
- // }
186
- // }
187
-
188
- .form {
189
- &__group--error .checkbox {
190
- color: var(--tide-booking-invalid);
191
-
192
- &__label {
193
- color: var(--tide-booking-invalid);
194
- }
195
-
196
- &__input {
197
- background: var(--tide-booking-invalid-light);
198
-
199
- &:after {
200
- background: var(--tide-booking-invalid);
201
- }
202
- }
203
- }
204
-
205
- &__region-header .checkbox {
206
- margin-top: 0px;
207
- margin-bottom: 15px;
208
- white-space: nowrap;
209
-
210
- @include media-xs {
211
- margin-bottom: initial;
212
- margin-left: auto;
213
- }
214
-
215
- // .checkbox__input {
216
- // margin-top: -2.5px;
217
- // }
218
- }
219
- }
220
-
221
- .schedule {
222
- &__mode-toggle .checkbox {
223
- padding-left: 0;
224
- }
225
-
226
- &__mode-toggle .checkbox__input {
227
- position: relative;
228
- margin-right: 1em;
229
- }
230
- }
1
+ .checkbox {
2
+ @extend %reset;
3
+ position: relative;
4
+ padding: 15px * 0.3 0 15px * 0.3 0px;
5
+ @include row;
6
+ align-items: flex-start;
7
+ justify-content: flex-start;
8
+ font-family: var(--tide-booking-checkbox-font-family);
9
+ user-select: none;
10
+ @extend %transition-easing;
11
+
12
+ @include media-xl {
13
+ padding: 15px * 0.3 0 15px * 0.3 0px;
14
+ }
15
+
16
+ &:hover,
17
+ &:focus,
18
+ &:active {
19
+ // color: $gray-dark;
20
+ }
21
+
22
+ & + & {
23
+ margin-top: 10px;
24
+ }
25
+
26
+ &__description {
27
+ @extend %reset;
28
+ width: 100%;
29
+ display: flex;
30
+ @include row;
31
+ justify-content: space-between;
32
+ word-break: break-word;
33
+ }
34
+
35
+ &__label {
36
+ cursor: pointer;
37
+ display: flex;
38
+ align-items: center;
39
+ gap: 10px;
40
+ @extend %transition-easing;
41
+ }
42
+
43
+ &__input {
44
+ position: relative;
45
+ min-width: 50px;
46
+ height: 28px;
47
+ min-height: auto;
48
+ left: 0;
49
+ padding: 0;
50
+ margin-top: 1px;
51
+ margin-left: 0;
52
+ display: inline-flex;
53
+ align-items: center;
54
+ border-radius: 25px;
55
+ border: 1.5px solid var(--tide-booking-toggle-switch-background);
56
+ background: var(--tide-booking-toggle-switch-background);
57
+ appearance: none;
58
+ @extend %transition-easing;
59
+ cursor: pointer;
60
+
61
+ @include media-xl {
62
+ min-width: 50px;
63
+ height: 28px;
64
+ }
65
+
66
+ &:focus,
67
+ &:hover {
68
+ border: none;
69
+ }
70
+
71
+ &:checked {
72
+ border-color: var(--tide-booking-toggle-switch-background-toggled);
73
+ background: var(--tide-booking-toggle-switch-background-toggled);
74
+
75
+ &:after {
76
+ transform: translate(100%, -50%);
77
+ }
78
+
79
+ span {
80
+ // color: hotpink;
81
+ }
82
+ }
83
+
84
+ &:after {
85
+ content: '';
86
+ position: absolute;
87
+ width: 20px;
88
+ height: 20px;
89
+ // transform: translate3D(2px, 0, 0);
90
+ top: 50%;
91
+ left: 4%;
92
+ transform: translate(0%, -50%);
93
+ border: 1px solid transparent;
94
+ border-radius: 50%;
95
+ background: var(--tide-booking-toggle-switch-after-color);
96
+ @include transitionEasing($duration: 0.2s);
97
+
98
+ @include media-xl {
99
+ width: 20px;
100
+ height: 20px;
101
+ }
102
+ }
103
+ }
104
+
105
+ &__details {
106
+ @extend %reset;
107
+ @include row--sm;
108
+ margin-left: auto;
109
+ }
110
+
111
+ // &__sidenote {
112
+ // @extend %reset;
113
+ // white-space: nowrap;
114
+ // @include transitionEasing($duration: 0.2s);
115
+
116
+ // @include media-sm {
117
+ // padding-left: 15px;
118
+ // margin-left: auto;
119
+ // text-align: right;
120
+ // justify-content: flex-end;
121
+ // }
122
+
123
+ // @include media-md {
124
+ // padding-left: 15px * 2;
125
+ // }
126
+ // }
127
+
128
+ &__value {
129
+ @extend %reset;
130
+ padding-left: 10px;
131
+ margin-top: 15px * 0.3;
132
+ margin-left: auto;
133
+ flex-shrink: 0;
134
+ font-style: normal;
135
+ text-align: right;
136
+ justify-content: flex-end;
137
+ white-space: nowrap;
138
+ @include transitionEasing($duration: 0.2s);
139
+
140
+ @include media-sm {
141
+ width: 13rem;
142
+ flex-grow: 0;
143
+ margin-top: 0;
144
+ margin-left: 15px;
145
+ }
146
+
147
+ @include media-md {
148
+ margin-left: 15px * 2;
149
+ }
150
+ }
151
+
152
+ &--reverse {
153
+ padding-left: 0;
154
+ padding-right: 15px * 4;
155
+
156
+ .checkbox__input {
157
+ left: initial;
158
+ right: 0;
159
+ }
160
+ }
161
+
162
+ span {
163
+ @extend %transition-easing;
164
+ }
165
+
166
+ &--label {
167
+ cursor: default;
168
+
169
+ .checkbox__input {
170
+ border: none;
171
+ background-color: transparent;
172
+ cursor: default;
173
+ appearance: none;
174
+ }
175
+
176
+ .checkbox__label {
177
+ cursor: default;
178
+ }
179
+ }
180
+ }
181
+
182
+ // .footer {
183
+ // .checkbox__input + span {
184
+ // margin-top: 0.3rem;
185
+ // }
186
+ // }
187
+
188
+ .form {
189
+ &__group--error .checkbox {
190
+ color: var(--tide-booking-invalid);
191
+
192
+ &__label {
193
+ color: var(--tide-booking-invalid);
194
+ }
195
+
196
+ &__input {
197
+ background: var(--tide-booking-invalid-light);
198
+
199
+ &:after {
200
+ background: var(--tide-booking-invalid);
201
+ }
202
+ }
203
+ }
204
+
205
+ &__region-header .checkbox {
206
+ margin-top: 0px;
207
+ margin-bottom: 15px;
208
+ white-space: nowrap;
209
+
210
+ @include media-xs {
211
+ margin-bottom: initial;
212
+ margin-left: auto;
213
+ }
214
+
215
+ // .checkbox__input {
216
+ // margin-top: -2.5px;
217
+ // }
218
+ }
219
+ }
220
+
221
+ .schedule {
222
+ &__mode-toggle .checkbox {
223
+ padding-left: 0;
224
+ }
225
+
226
+ &__mode-toggle .checkbox__input {
227
+ position: relative;
228
+ margin-right: 1em;
229
+ }
230
+ }