perf(web): make mileage exports cancellable
This commit is contained in:
@@ -1018,6 +1018,13 @@ button, a { -webkit-tap-highlight-color: transparent; }
|
||||
.v2-mileage-result-actions > button { display: inline-flex; height: 32px; align-items: center; gap: 6px; border: 1px solid #cbd8e8; border-radius: 7px; background: #fff; padding: 0 11px; color: #315f9f; cursor: pointer; font-size: 10px; font-weight: 650; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
|
||||
.v2-mileage-result-actions > button:hover { border-color: #99b6dd; background: #f5f9ff; box-shadow: 0 2px 7px rgba(37,99,235,.08); }
|
||||
.v2-mileage-result-actions > button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
|
||||
.v2-mileage-export-progress { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; border-bottom: 1px solid #e4e9f0; background: #f7faff; padding: 9px 18px; }
|
||||
.v2-mileage-export-progress > span { display: flex; min-width: 190px; align-items: center; justify-content: space-between; gap: 12px; color: #315f9f; font-size: 10px; }
|
||||
.v2-mileage-export-progress > span strong { font-weight: 650; }.v2-mileage-export-progress > span small { color: #6f8198; font-variant-numeric: tabular-nums; }
|
||||
.v2-mileage-export-progress > i { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 999px; background: #dce8f8; }
|
||||
.v2-mileage-export-progress > i b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--v2-blue); transition: width .18s ease; }
|
||||
.v2-mileage-export-progress > i.is-indeterminate b { width: 38%; animation: v2-export-progress 1.1s ease-in-out infinite; }
|
||||
@keyframes v2-export-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
|
||||
.v2-mileage-table-wrap { min-height: 0; flex: 1; overflow: auto; }
|
||||
.v2-mileage-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
|
||||
.v2-mileage-table th { position: sticky; z-index: 2; top: 0; height: 42px; border-bottom: 1px solid #dfe6ef; background: #f8fafc; padding: 0 14px; color: #59677b; font-size: 11px; font-weight: 650; text-align: left; white-space: nowrap; }
|
||||
@@ -1257,6 +1264,8 @@ button, a { -webkit-tap-highlight-color: transparent; }
|
||||
.v2-mileage-results > header div { align-items: flex-start; flex-direction: column; gap: 3px; }
|
||||
.v2-mileage-results > header .v2-mileage-result-actions { width: 100%; align-items: center; justify-content: space-between; flex-direction: row; gap: 8px; }
|
||||
.v2-mileage-result-actions > button { height: 34px; flex: 0 0 auto; }
|
||||
.v2-mileage-export-progress { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px 12px; }
|
||||
.v2-mileage-export-progress > span { min-width: 0; }
|
||||
.v2-mileage-table-wrap { display: none; }
|
||||
.v2-mileage-mobile-list { display: flex; flex-direction: column; }
|
||||
.v2-mileage-mobile-list article { border-bottom: 1px solid #e9eef5; padding: 14px 12px; }
|
||||
|
||||
Reference in New Issue
Block a user