style: rediseñar disparador de rutas para ser compacto y adaptativo
This commit is contained in:
@ -831,13 +831,14 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
|
||||
<span class="material-icons">search</span>
|
||||
</div>
|
||||
|
||||
<!-- Normal Trigger -->
|
||||
<!-- Normal Trigger: Compacto con texto -->
|
||||
<div
|
||||
v-else
|
||||
class="uber-search-trigger"
|
||||
class="uber-search-trigger-compact"
|
||||
@click="openUberSearch"
|
||||
>
|
||||
<span class="material-icons search-icon">directions_bus</span>
|
||||
<span class="trigger-label">ver rutas</span>
|
||||
</div>
|
||||
|
||||
<!-- Nuevo Banner de Parada Cercana Alineado -->
|
||||
@ -1416,24 +1417,65 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
|
||||
background: var(--header-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
height: 56px;
|
||||
border-radius: 18px;
|
||||
height: 44px; /* Tamaño compacto ajustado */
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
padding: 0 16px;
|
||||
box-shadow: var(--shadow);
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: 100%; /* Take full width of container */
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.uber-search-trigger-compact {
|
||||
background: var(--active-color) !important;
|
||||
color: #101820 !important; /* Texto oscuro para el amarillo SIBU */
|
||||
height: 44px; /* Tamaño del logo / botones header */
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
width: fit-content;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* En modo claro, el botón es azul, usamos texto blanco */
|
||||
html.light-theme .uber-search-trigger-compact {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.uber-search-trigger-compact:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.uber-search-trigger-compact .search-icon {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.trigger-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uber-search-trigger.circular {
|
||||
width: 60px;
|
||||
width: 44px; /* Mantener cuadrado */
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.triggers-row {
|
||||
|
||||
Reference in New Issue
Block a user