Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix workflow left image

Browse Source
This commit is contained in:
Aravind R
2026-06-09 19:57:56 +05:30
parent c4722a6c99
commit d56e710e28
4 changed files with 106 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/sections/EVLogisticSection.tsx
View File

@@ -271,7 +271,10 @@ export default function EVLogisticSection() {
opacity: 0;
transform: translateY(20px);
will-change: transform, opacity;
transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
border-radius 0.45s cubic-bezier(0.25, 1, 0.5, 1),
box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.ev-logistic-accordion-item:last-child {
@@ -283,6 +286,41 @@ export default function EVLogisticSection() {
background: rgba(192, 18, 39, 0.015);
}
/* ---- Active (expanded) item: subtle premium highlight ----
A soft ~5% red tint, a 16–20px rounded container, a 3px red
accent on the left (drawn as an inset shadow so the row never
shifts) and an extremely soft shadow for quiet depth. The grid
dividers directly above and below the active row are hidden so
the tinted block reads as one clean, rounded surface — refined
and integrated, never a floating "card". overflow:hidden clips
the progress bar to the rounded corners (it does not clip the
element's own outer shadow). */
.ev-logistic-accordion-item.active {
background: rgba(192, 18, 39, 0.045);
border-top-color: transparent;
border-radius: 16px;
overflow: hidden;
box-shadow:
inset 3px 0 0 0 #c01227,
0 4px 14px -12px rgba(17, 17, 17, 0.12);
}
.ev-logistic-accordion-item.active + .ev-logistic-accordion-item {
border-top-color: transparent;
}
.ev-logistic-accordion-item.active:last-child {
border-bottom-color: transparent;
}
/* Comfortable internal padding on the active row so the content
feels more structured and clears the left accent. */
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
padding-left: 28px;
padding-right: 28px;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
padding-left: 28px;
padding-right: 28px;
}
/* Spacious row padding for luxurious design - INCREASED font size for headers */
.ev-logistic-accordion-header {
width: 100%;
@@ -299,7 +337,8 @@ export default function EVLogisticSection() {
font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
font-weight: 700;
color: #111111;
transition: color 0.3s ease;
transition: color 0.3s ease,
padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.ev-logistic-accordion-header span:first-child {
@@ -372,6 +411,7 @@ export default function EVLogisticSection() {
line-height: 1.6;
color: #555555;
font-weight: 500;
transition: padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Underline track & sweeping active red bar */
@@ -401,6 +441,13 @@ export default function EVLogisticSection() {
transform: scaleX(1);
}
/* The active row now carries its own highlight (tint + left accent),
so the bottom sweeping red bar is redundant and clashes with the
rounded corners — hide it while the row is expanded. */
.ev-logistic-accordion-item.active .ev-logistic-accordion-progress-track {
display: none;
}
/* Responsiveness constraints */
@media (max-width: 1024px) {
.ev-logistic-section {
@@ -453,11 +500,25 @@ export default function EVLogisticSection() {
font-size: 19px;
padding: 22px 8px;
}
.ev-logistic-accordion-content-inner {
padding: 0;
font-size: 15.5px;
}
/* Keep the active row's comfortable padding proportional on phones
(smaller bump than desktop so it never crowds the narrow column). */
.ev-logistic-accordion-item.active {
border-radius: 16px;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
padding-left: 16px;
padding-right: 16px;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
padding-left: 16px;
padding-right: 16px;
}
}
`}} />