refactor(ui): polish semi mileage discovery
This commit is contained in:
@@ -14551,6 +14551,8 @@
|
||||
flex: 0 0 auto;
|
||||
gap: 0;
|
||||
overflow: visible;
|
||||
container-name: mileage-discovery;
|
||||
container-type: inline-size;
|
||||
border: 1px solid #d8e3ef;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
@@ -14702,6 +14704,27 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-mileage-source-trigger.semi-button .semi-button-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.v2-mileage-source-trigger.semi-button .semi-button-content > span,
|
||||
.v2-mileage-source-trigger.semi-button .semi-button-content > em {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-mileage-source-trigger.semi-button .semi-button-content > b {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.v2-mileage-source-trigger.semi-button:hover,
|
||||
.v2-mileage-source-trigger.semi-button[aria-expanded="true"] {
|
||||
border-color: #aec6e4;
|
||||
@@ -14715,7 +14738,10 @@
|
||||
}
|
||||
|
||||
.v2-mileage-ranges {
|
||||
display: flex;
|
||||
min-height: 38px;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 9px;
|
||||
@@ -14723,14 +14749,22 @@
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.v2-mileage-ranges > span {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.v2-mileage-ranges > .semi-button-group {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-mileage-ranges .semi-button {
|
||||
min-height: 30px;
|
||||
min-width: 52px;
|
||||
flex: 1 1 0;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
@@ -15003,9 +15037,9 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@media (min-width: 681px) and (max-width: 1050px) {
|
||||
@container mileage-discovery (min-width: 681px) and (max-width: 1100px) {
|
||||
.v2-mileage-query-panel .v2-mileage-filter {
|
||||
grid-template-columns: minmax(200px, 1.25fr) minmax(220px, 1fr) auto;
|
||||
grid-template-columns: minmax(260px, 1.25fr) minmax(242px, .95fr) auto;
|
||||
grid-template-areas:
|
||||
"vehicle date submit"
|
||||
"source ranges ranges";
|
||||
@@ -15028,8 +15062,35 @@
|
||||
grid-area: source;
|
||||
}
|
||||
|
||||
.v2-mileage-query-panel .v2-mileage-source-trigger.semi-button {
|
||||
width: 100%;
|
||||
min-width: 190px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.v2-mileage-query-panel .v2-mileage-ranges {
|
||||
display: flex;
|
||||
grid-area: ranges;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.v2-mileage-query-panel .v2-mileage-ranges > span {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
padding-inline: 7px 5px;
|
||||
color: #718196;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-mileage-query-panel .v2-mileage-ranges .semi-button {
|
||||
min-width: 52px;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user