xref: /aosp_15_r20/external/executorch/docs/source/_static/css/progress-bar.css (revision 523fa7a60841cd1ecfb9cc4201f1ca8b03ed023a) 
1/**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 * All rights reserved.
4 *
5 * This source code is licensed under the BSD-style license found in the
6 * LICENSE file in the root directory of this source tree.
7 */
8
9.progress-bar-wrapper {
10  margin-top: auto;
11  display: flex;
12  justify-content: space-between;
13  margin-bottom: 20px;
14  position: sticky;
15  top: 0;
16  background: white;
17  padding-top: 20px;
18  padding-bottom: 20px;
19  z-index: 2;
20}
21
22.progress-bar-item {
23  position: relative;
24  display: flex;
25  flex-direction: column;
26  align-items: center;
27  flex: 1;
28
29  @media (max-width: 768px) {
30     font-size: 12px;
31   }
32}
33
34.progress-bar-item::before {
35  position: absolute;
36  content: "";
37  border-bottom: 2px solid #ccc;
38  width: 100%;
39  top: 20px;
40  left: -50%;
41  z-index: 2;
42}
43
44.progress-bar-item::after {
45  position: absolute;
46  content: "";
47  border-bottom: 2px solid #ccc;
48  width: 100%;
49  top: 20px;
50  left: 50%;
51  z-index: 2;
52}
53
54.progress-bar-item .step-number {
55  position: relative;
56  z-index: 5;
57  display: flex;
58  justify-content: center;
59  align-items: center;
60  width: 40px;
61  height: 40px;
62  border-radius: 50%;
63  border-color: #812CE5;
64  border-style: solid;
65  border-width: 1px;
66  color: #812CE5;
67  background: #fff;
68  margin-bottom: 6px;
69}
70
71.progress-bar-item.active {
72  font-weight: bold;
73}
74
75.progress-bar-item.completed .step-number {
76  background-color: #812CE5;
77  color: white;
78}
79
80.progress-bar-item.completed::after {
81  position: absolute;
82  content: "";
83  border-bottom: 2px solid #812CE5;
84  width: 100%;
85  top: 20px;
86  left: 50%;
87  z-index: 3;
88}
89
90.progress-bar-item:first-child::before {
91  content: none;
92}
93
94.progress-bar-item:last-child::after {
95  content: none;
96}
97
98.progress-bar-item a:link {
99    color: #262626 !important;
100}
101
102.step-caption:first-child {
103    margin-left: 10px;
104}
105
106.step-caption {
107    text-align: center;
108}
109
110.step-caption a:link {
111    color: #262626 !important;
112}
113
114.step-caption a:hover {
115    color: #ee4c2c;
116    text-decoration: underline;
117}
118