-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.css
110 lines (94 loc) · 2.07 KB
/
app.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
body {
color: #343a40;
}
textarea.form-control:focus,
input[type='text']:focus,
input[type='password']:focus,
input[type='datetime']:focus,
input[type='datetime-local']:focus,
input[type='date']:focus,
input[type='month']:focus,
input[type='time']:focus,
input[type='week']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='color']:focus,
.uneditable-input:focus,
.form-select:focus {
border-color: #19875499;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #19875499;
outline: 0 none;
}
.step-progress {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.step-progress .step::before {
content: '';
display: block;
border: 2px solid var(--bs-gray-300);
background: var(--bs-white);
width: 0.75rem;
aspect-ratio: 1;
margin: 0 auto 0.5rem auto;
border-radius: 50%;
}
.step-progress .step.step-active::before {
border-color: var(--bs-success);
}
.step-progress .step.step-complete::before {
--offset: 3px;
background-color: var(--bs-success);
border-color: var(--bs-success);
width: calc(0.75rem + var(--offset));
margin-top: calc(var(--offset) * -1);
}
.step-progress .step button {
border: 0;
background: transparent;
color: var(--bs-gray-600);
}
.step-progress .step.step-complete button {
color: var(--bs-gray-800);
}
.step-progress .step.step-active button {
font-weight: 700;
}
.toggle:has([type='checkbox']:checked) ~ div {
display: flex !important;
}
.pointer {
cursor: pointer !important;
}
.image-upload-placeholder {
background: var(--bs-gray-100);
border: 1px dashed var(--bs-gray-500);
padding: 8px 40px;
aspect-ratio: 1;
}
.image-upload-placeholder:hover {
background-color: var(--bs-gray-200);
}
.form-footer {
background: var(--bs-white);
width: 100%;
position: fixed;
left: 0;
bottom: 0;
}
@media (min-width: 992px) {
body {
background: var(--bs-gray-100);
}
.w-lg-75 {
width: 75% !important;
}
.form-footer {
width: 100%;
position: static;
}
}