30天挑戰：「CSS progress bar (stepper) 」技術記錄

2021-08-05 10:48 CSS 2021鐵人賽

總結

記錄頭尾至頂至底的進度條之 HTML 結構與 CSS 設定

手機版畫面

桌面版畫面

全部 stepper 的 HTML 結構都維持一致，代表日後可改用程式碼搭配迴圈動態產生 progress bar 內容
stepper 的步驟數字不使用 CSS 偽元素，避免分散產生內容的相關邏輯
- 補充理由：「步驟數字不建議放到偽元素裡面，因為擴展為更多步驟，變數不好塞」、「（如果數字透過偽元素處理的話，）實務上若遇到多語系需求，或是不同數字的表達方式等等，就容易傷腦筋」
使用complete、active與pending三種 CSS class name 來明確標註不同狀態，增加原始碼的好讀性

第 9 行.step-container：注意並沒有使用justify-content: space-between;
第 18 行.step-item：
- 使用flex: 1 1;讓 flex item 佔據所有空間
- overflow-x: hidden;乃是為了配合 progress bar line，重要的伏筆（？）
第 26 行.step-item:not(:first-child)：除了第一個 stepper 外，其餘 stepper 一律使用padding-left往右側退1rem
第 30 行.step-item:last-child：使用flex: none;讓最後一個 stepper 完全不額外佔據任何空間
第 34-35 行：設定.icon與.content為display: inline-block;，即可直接水平排列
第 39 行.icon：
- 設定flex: none;避免圖示本身被壓縮變形
- 使用text-align: center;與line-height: 32px;讓文字水平垂直置中
第 53 行.step-item:not(:last-child)：
- 54 行.content設定為position: relative;作為 progress bar line 的定位基準點
- 60 行.content::after：繪製 progress bar line，設定left: calc(100% + 1rem);讓線條往右推移，並因為第 18 行已經設定.step-item需overflow-x: hidden;，所以多餘的線條長度會直接被隱藏起來
- 66 行width: 99999px;：直接設定一個足夠長的線段數值
第 73 行.content-text：手機版時不顯示，故display: none;
79-106 行：針對不同的狀態進行顏色調整
第 109 行：在桌面版要顯示.content-text，將display: inline-block;加回