mautourco-components 0.2.95 → 0.2.96
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.
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
.round-trip {
|
|
8
8
|
width: 100%;
|
|
9
|
+
container-type: inline-size;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.round-trip__content {
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
line-height: 20px; /* Matches other label styles */
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
/*
|
|
41
|
+
/* Fallback for older browsers - use media queries */
|
|
41
42
|
|
|
42
43
|
@media (max-width: 768px) {
|
|
43
44
|
.round-trip__row {
|
|
@@ -54,8 +55,6 @@
|
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
|
|
57
|
-
/* Tablet layout */
|
|
58
|
-
|
|
59
58
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
60
59
|
.round-trip__row--first {
|
|
61
60
|
flex-wrap: wrap;
|
|
@@ -70,6 +69,41 @@
|
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
|
|
72
|
+
/* Modern browsers with container query support */
|
|
73
|
+
|
|
74
|
+
@supports (container-type: inline-size) {
|
|
75
|
+
/* Responsive layout for mobile */
|
|
76
|
+
@container (max-width: 768px) {
|
|
77
|
+
.round-trip__row {
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: 12px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.round-trip__field--pax,
|
|
83
|
+
.round-trip__field--dates,
|
|
84
|
+
.round-trip__field--pickup-dropoff,
|
|
85
|
+
.round-trip__field--accommodation {
|
|
86
|
+
width: 100%;
|
|
87
|
+
flex: 1 1 100%;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Tablet layout */
|
|
92
|
+
@container (min-width: 769px) and (max-width: 1024px) {
|
|
93
|
+
.round-trip__row--first {
|
|
94
|
+
flex-wrap: wrap;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.round-trip__field--pax {
|
|
98
|
+
flex: 0 0 calc(50% - 6px);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.round-trip__field--dates {
|
|
102
|
+
flex: 0 0 calc(50% - 6px);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
73
107
|
.round-trip__date-picker--input {
|
|
74
108
|
height: 2.75rem !important;
|
|
75
109
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
width: 100%;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
gap: 0.75rem;
|
|
12
|
+
container-type: inline-size;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
/* Header with icon and label */
|
|
@@ -58,7 +59,7 @@
|
|
|
58
59
|
line-height: 1.5;
|
|
59
60
|
}
|
|
60
61
|
|
|
61
|
-
/*
|
|
62
|
+
/* Fallback for older browsers - use media queries */
|
|
62
63
|
|
|
63
64
|
@media (max-width: 768px) {
|
|
64
65
|
.transfer-line__content {
|
|
@@ -78,8 +79,6 @@
|
|
|
78
79
|
}
|
|
79
80
|
}
|
|
80
81
|
|
|
81
|
-
/* Tablet layout - 2 columns */
|
|
82
|
-
|
|
83
82
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
84
83
|
.transfer-line__content {
|
|
85
84
|
flex-wrap: wrap;
|
|
@@ -93,6 +92,43 @@
|
|
|
93
92
|
}
|
|
94
93
|
}
|
|
95
94
|
|
|
95
|
+
/* Modern browsers with container query support */
|
|
96
|
+
|
|
97
|
+
@supports (container-type: inline-size) {
|
|
98
|
+
/* Mobile layout - stack fields vertically */
|
|
99
|
+
@container (max-width: 768px) {
|
|
100
|
+
.transfer-line__content {
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.transfer-line__field--pax,
|
|
105
|
+
.transfer-line__field--date,
|
|
106
|
+
.transfer-line__field--pickup,
|
|
107
|
+
.transfer-line__field--dropoff {
|
|
108
|
+
width: 100%;
|
|
109
|
+
flex: 1 1 100%;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.transfer-line__delete {
|
|
113
|
+
justify-content: center;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Tablet layout - 2 columns */
|
|
118
|
+
@container (min-width: 769px) and (max-width: 1024px) {
|
|
119
|
+
.transfer-line__content {
|
|
120
|
+
flex-wrap: wrap;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.transfer-line__field--pax,
|
|
124
|
+
.transfer-line__field--date,
|
|
125
|
+
.transfer-line__field--pickup,
|
|
126
|
+
.transfer-line__field--dropoff {
|
|
127
|
+
flex: 0 0 calc(50% - 0.25rem);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
96
132
|
.transfer-line__field-label {
|
|
97
133
|
font-size: 0.875rem;
|
|
98
134
|
line-height: 1.25rem;
|
|
@@ -136,7 +172,7 @@
|
|
|
136
172
|
}
|
|
137
173
|
|
|
138
174
|
.transfer-line__date-picker {
|
|
139
|
-
height: 2.75rem;
|
|
175
|
+
height: 2.75rem !important;
|
|
140
176
|
}
|
|
141
177
|
|
|
142
178
|
/* Disabled state */
|
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.round-trip {
|
|
4
4
|
@apply w-full;
|
|
5
|
+
container-type: inline-size;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
.round-trip__content {
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
line-height: 20px; /* Matches other label styles */
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
/*
|
|
27
|
+
/* Fallback for older browsers - use media queries */
|
|
27
28
|
@media (max-width: 768px) {
|
|
28
29
|
.round-trip__row {
|
|
29
30
|
@apply flex-col;
|
|
@@ -39,7 +40,6 @@
|
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
|
|
42
|
-
/* Tablet layout */
|
|
43
43
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
44
44
|
.round-trip__row--first {
|
|
45
45
|
@apply flex-wrap;
|
|
@@ -54,6 +54,40 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
/* Modern browsers with container query support */
|
|
58
|
+
@supports (container-type: inline-size) {
|
|
59
|
+
/* Responsive layout for mobile */
|
|
60
|
+
@container (max-width: 768px) {
|
|
61
|
+
.round-trip__row {
|
|
62
|
+
@apply flex-col;
|
|
63
|
+
gap: 12px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.round-trip__field--pax,
|
|
67
|
+
.round-trip__field--dates,
|
|
68
|
+
.round-trip__field--pickup-dropoff,
|
|
69
|
+
.round-trip__field--accommodation {
|
|
70
|
+
@apply w-full;
|
|
71
|
+
flex: 1 1 100%;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Tablet layout */
|
|
76
|
+
@container (min-width: 769px) and (max-width: 1024px) {
|
|
77
|
+
.round-trip__row--first {
|
|
78
|
+
@apply flex-wrap;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.round-trip__field--pax {
|
|
82
|
+
flex: 0 0 calc(50% - 6px);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.round-trip__field--dates {
|
|
86
|
+
flex: 0 0 calc(50% - 6px);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
57
91
|
.round-trip__date-picker--input {
|
|
58
92
|
@apply !h-11;
|
|
59
93
|
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
.transfer-line {
|
|
4
4
|
@apply w-full flex flex-col gap-3;
|
|
5
|
+
container-type: inline-size;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
/* Header with icon and label */
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
line-height: 1.5;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
|
-
/*
|
|
39
|
+
/* Fallback for older browsers - use media queries */
|
|
39
40
|
@media (max-width: 768px) {
|
|
40
41
|
.transfer-line__content {
|
|
41
42
|
@apply flex-col;
|
|
@@ -54,7 +55,6 @@
|
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
|
|
57
|
-
/* Tablet layout - 2 columns */
|
|
58
58
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
59
59
|
.transfer-line__content {
|
|
60
60
|
@apply flex-wrap;
|
|
@@ -68,6 +68,42 @@
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
/* Modern browsers with container query support */
|
|
72
|
+
@supports (container-type: inline-size) {
|
|
73
|
+
/* Mobile layout - stack fields vertically */
|
|
74
|
+
@container (max-width: 768px) {
|
|
75
|
+
.transfer-line__content {
|
|
76
|
+
@apply flex-col;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.transfer-line__field--pax,
|
|
80
|
+
.transfer-line__field--date,
|
|
81
|
+
.transfer-line__field--pickup,
|
|
82
|
+
.transfer-line__field--dropoff {
|
|
83
|
+
@apply w-full;
|
|
84
|
+
flex: 1 1 100%;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.transfer-line__delete {
|
|
88
|
+
@apply justify-center;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Tablet layout - 2 columns */
|
|
93
|
+
@container (min-width: 769px) and (max-width: 1024px) {
|
|
94
|
+
.transfer-line__content {
|
|
95
|
+
@apply flex-wrap;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.transfer-line__field--pax,
|
|
99
|
+
.transfer-line__field--date,
|
|
100
|
+
.transfer-line__field--pickup,
|
|
101
|
+
.transfer-line__field--dropoff {
|
|
102
|
+
flex: 0 0 calc(50% - 0.25rem);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
71
107
|
.transfer-line__field-label {
|
|
72
108
|
@apply text-[var(--color-neutral-800)] text-sm font-normal;
|
|
73
109
|
}
|
|
@@ -86,7 +122,7 @@
|
|
|
86
122
|
}
|
|
87
123
|
|
|
88
124
|
.transfer-line__date-picker {
|
|
89
|
-
@apply h-11;
|
|
125
|
+
@apply !h-11;
|
|
90
126
|
}
|
|
91
127
|
|
|
92
128
|
/* Disabled state */
|