mautourco-components 0.2.4 → 0.2.7

package/src/styles/components/organism/round-trip.css

@@ -1,55 +1,55 @@
-/* RoundTrip Component Styles */
-
-.round-trip {
-  @apply w-full;
-}
-
-.round-trip__content {
-  @apply flex gap-2 flex-wrap w-full;
-}
-
-/* Field containers */
-.round-trip__field {
-  @apply flex-1 min-w-0 flex flex-col gap-2;
-}
-
-.round-trip__field p {
-  @apply leading-5;
-}
-
-
-.round-trip__field-label {
-  @apply text-[var(--color-neutral-800)] text-sm font-normal;
-  line-height: 20px; /* Matches other label styles */
-}
-
-/* Responsive layout for mobile */
-@media (max-width: 768px) {
-  .round-trip__row {
-    @apply flex-col;
-    gap: 12px;
-  }
-
-  .round-trip__field--pax,
-  .round-trip__field--dates,
-  .round-trip__field--pickup-dropoff,
-  .round-trip__field--accommodation {
-    @apply w-full;
-    flex: 1 1 100%;
-  }
-}
-
-/* Tablet layout */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .round-trip__row--first {
-    @apply flex-wrap;
-  }
-
-  .round-trip__field--pax {
-    flex: 0 0 calc(50% - 6px);
-  }
-
-  .round-trip__field--dates {
-    flex: 0 0 calc(50% - 6px);
-  }
-}
+/* RoundTrip Component Styles */
+
+.round-trip {
+  @apply w-full;
+}
+
+.round-trip__content {
+  @apply flex gap-2 flex-wrap w-full;
+}
+
+/* Field containers */
+.round-trip__field {
+  @apply flex-1 min-w-0 flex flex-col gap-2;
+}
+
+.round-trip__field p {
+  @apply leading-5;
+}
+
+
+.round-trip__field-label {
+  @apply text-[var(--color-neutral-800)] text-sm font-normal;
+  line-height: 20px; /* Matches other label styles */
+}
+
+/* Responsive layout for mobile */
+@media (max-width: 768px) {
+  .round-trip__row {
+    @apply flex-col;
+    gap: 12px;
+  }
+
+  .round-trip__field--pax,
+  .round-trip__field--dates,
+  .round-trip__field--pickup-dropoff,
+  .round-trip__field--accommodation {
+    @apply w-full;
+    flex: 1 1 100%;
+  }
+}
+
+/* Tablet layout */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .round-trip__row--first {
+    @apply flex-wrap;
+  }
+
+  .round-trip__field--pax {
+    flex: 0 0 calc(50% - 6px);
+  }
+
+  .round-trip__field--dates {
+    flex: 0 0 calc(50% - 6px);
+  }
+}

package/src/styles/components/organism/search-bar-transfer.css

@@ -1,128 +1,129 @@
-/* SearchBarTransfer Component Styles */
-
-.search-bar-transfer {
-  @apply w-full bg-white border border-[var(--color-border-subtle)] rounded-3xl p-8 flex flex-col gap-8;
-  box-shadow: var(--spacing-base-0, 0) var(--spacing-base-0, 0) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0) var(--spacing-base-05, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0) rgba(48, 54, 66, 0.10);
-}
-
-/* Header */
-.search-bar-transfer__header {
-  @apply flex items-center justify-between w-full;
-}
-
-.search-bar-transfer__title {
-  @apply text-[var(--color-text-accent)] font-bold text-3xl leading-9;
-  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
-}
-
-/* Mode Selector (Segmented Button) */
-.search-bar-transfer__mode-selector {
-  @apply flex items-center;
-}
-
-/* Transfer Type Selector */
-.search-bar-transfer__transfer-type {
-  @apply flex items-center justify-between w-full;
-}
-
-.search-bar-transfer__transfer-type-label {
-  color: var(--color-text-subtle);
-}
-
-.search-bar-transfer__add-buttons {
-  @apply flex gap-2;
-}
-
-/* Transfer Lines */
-.search-bar-transfer__transfer-lines {
-  @apply flex flex-col gap-8 w-full;
-}
-
-/* Category Header */
-.search-bar-transfer__category-header {
-  @apply flex items-center gap-2;
-  color: var(--color-text-default);
-}
-
-/* Divider between categories */
-.search-bar-transfer__divider {
-  @apply w-full;
-  margin: var(--spacing-base-4, 16px) 0;
-}
-
-/* Actions (Bottom Section) */
-.search-bar-transfer__actions {
-  @apply flex items-center justify-between w-full;
-}
-
-.search-bar-transfer__cta {
-  @apply flex gap-4 items-center;
-}
-
-/* Error Toast */
-.search-bar-transfer__error {
-  @apply flex items-center overflow-hidden rounded border;
-  border-width: 1px;
-  border-color: var(--color-danger-600);
-  background-color: var(--color-danger-50);
-}
-
-.search-bar-transfer__error-bar {
-  @apply h-full;
-  width: 8px;
-  background-color: var(--color-danger-600);
-}
-
-.search-bar-transfer__error-content {
-  @apply flex items-center gap-2 p-3;
-}
-
-.search-bar-transfer__error-icon {
-  color: var(--color-danger-600);
-}
-
-.search-bar-transfer__error-text {
-  color: var(--color-danger-600);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .search-bar-transfer {
-    @apply p-6;
-    gap: 24px;
-  }
-
-  .search-bar-transfer__header {
-    @apply flex-col items-start gap-4;
-  }
-
-  .search-bar-transfer__title {
-    @apply text-2xl;
-  }
-
-  .search-bar-transfer__transfer-type {
-    @apply flex-col items-start gap-4;
-  }
-
-  .search-bar-transfer__add-buttons {
-    @apply flex-wrap w-full;
-  }
-
-  .search-bar-transfer__actions {
-    @apply flex-col items-start gap-4;
-  }
-
-  .search-bar-transfer__cta {
-    @apply flex-col w-full;
-  }
-
-  .search-bar-transfer__error {
-    @apply w-full;
-  }
-}
-
-@media (min-width: 769px) and (max-width: 1024px) {
-  .search-bar-transfer {
-    gap: 28px;
-  }
+/* SearchBarTransfer Component Styles */
+
+.search-bar-transfer {
+  @apply w-full bg-white border border-[var(--color-border-subtle)] rounded-3xl p-8 flex flex-col gap-8;
+  box-shadow: var(--spacing-base-0, 0) var(--spacing-base-0, 0) var(--backdrop-blur-backdrop-blur-sm, 4px) var(--spacing-base-0, 0) rgba(48, 54, 66, 0.11), var(--spacing-base-0, 0) var(--spacing-base-05, 2px) var(--backdrop-blur-backdrop-blur-xs, 2px) var(--spacing-base-0, 0) rgba(48, 54, 66, 0.10);
+}
+
+/* Header */
+.search-bar-transfer__header {
+  @apply flex items-center justify-between w-full;
+}
+
+.search-bar-transfer__title {
+  color: var(--color-text-accent, #0f7173);
+}
+
+/* Mode Selector (Segmented Button) */
+.search-bar-transfer__mode-selector {
+  @apply flex items-center;
+}
+
+/* Transfer Type Selector */
+.search-bar-transfer__transfer-type {
+  @apply flex items-center justify-between w-full;
+}
+
+.search-bar-transfer__transfer-type-label {
+  color: var(--color-text-subtle);
+}
+
+.search-bar-transfer__add-buttons {
+  @apply flex gap-2;
+}
+
+/* Transfer Lines */
+.search-bar-transfer__transfer-lines {
+  @apply flex flex-col gap-8 w-full;
+}
+
+/* Category Header */
+.search-bar-transfer__category-header {
+  @apply flex items-center gap-2;
+  color: var(--color-text-default);
+}
+
+/* Divider between categories */
+.search-bar-transfer__divider {
+  @apply w-full;
+  margin: var(--spacing-base-4, 16px) 0;
+}
+
+/* Actions (Bottom Section) */
+.search-bar-transfer__actions {
+  @apply flex items-center justify-between w-full;
+}
+
+.search-bar-transfer__cta {
+  @apply flex gap-4 items-center;
+}
+
+/* Error Toast */
+.search-bar-transfer__error {
+  @apply flex items-center overflow-hidden rounded border;
+  border-width: 1px;
+  border-color: var(--color-danger-600);
+  background-color: var(--color-danger-50);
+}
+
+.search-bar-transfer__error-bar {
+  @apply h-full;
+  width: 8px;
+  background-color: var(--color-danger-600);
+}
+
+.search-bar-transfer__error-content {
+  @apply flex items-center gap-2 p-3;
+}
+
+.search-bar-transfer__error-icon {
+  color: var(--color-danger-600);
+}
+
+.search-bar-transfer__error-text {
+  color: var(--color-danger-600);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .search-bar-transfer {
+    @apply p-6;
+    gap: 24px;
+  }
+
+  .search-bar-transfer__header {
+    @apply flex-col items-start gap-4;
+  }
+
+  .search-bar-transfer__title {
+    /* Responsive: Utiliser les tokens heading-sm (24px) sur mobile */
+    font-size: var(--font-size-text-2xl, 24px);
+    line-height: var(--font-leading-leading-2xl, 36px);
+  }
+
+  .search-bar-transfer__transfer-type {
+    @apply flex-col items-start gap-4;
+  }
+
+  .search-bar-transfer__add-buttons {
+    @apply flex-wrap w-full;
+  }
+
+  .search-bar-transfer__actions {
+    @apply flex-col items-start gap-4;
+  }
+
+  .search-bar-transfer__cta {
+    @apply flex-col w-full;
+  }
+
+  .search-bar-transfer__error {
+    @apply w-full;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .search-bar-transfer {
+    gap: 28px;
+  }
 }