128 lines
2.9 KiB
CSS
128 lines
2.9 KiB
CSS
/* Define CSS variable for transition speed at the root level */
|
|
:root {
|
|
--transition-speed: 0.5s; /* Define the transition speed variable */
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.form-card, .results-card {
|
|
position: absolute;
|
|
width: 300px;
|
|
padding: 20px;
|
|
background-color: white;
|
|
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
|
|
/* Use the CSS variable for the transition speed */
|
|
transition: all var(--transition-speed) ease-in-out;
|
|
}
|
|
|
|
.form-card {
|
|
z-index: 2; /* Ensure form card is on top */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 320px; /* Define a fixed width for the form */
|
|
padding: 20px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
|
|
transition: all var(--transition-speed) ease-in-out;
|
|
}
|
|
|
|
.results-card {
|
|
z-index: 1; /* Ensure results card is behind the form card */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 0; /* Initially invisible */
|
|
|
|
/* Apply the CSS variable for transition speed */
|
|
transition: all var(--transition-speed) ease-in-out, opacity var(--transition-speed) ease-in-out;
|
|
}
|
|
|
|
/* When active, form slides to the left and results slide to the right */
|
|
.form-card.active {
|
|
/* Move the form when the results card is shown */
|
|
left: 40%;
|
|
transform: translateX(-40%);
|
|
}
|
|
|
|
.results-card.active {
|
|
left: 60%;
|
|
transform: translateX(-60%);
|
|
opacity: 1; /* Gradually fade in */
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
input[type="text"], input[type="email"] {
|
|
padding: 10px; /* Padding inside text boxes */
|
|
margin-bottom: 15px; /* Space between form fields */
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
width: 100%; /* Make the input take the full width of the form */
|
|
box-sizing: border-box; /* Ensure padding doesn't affect width */
|
|
}
|
|
|
|
button {
|
|
padding: 10px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.autocomplete-items {
|
|
position: absolute;
|
|
border: 1px solid #d4d4d4;
|
|
border-bottom: none;
|
|
border-top: none;
|
|
z-index: 99;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
background-color: white;
|
|
}
|
|
|
|
.autocomplete-items div {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
|
|
.autocomplete-items div:hover {
|
|
background-color: #e9e9e9;
|
|
} |