dnet40/modules/uoa-admin-portal/css/partials/pages/_wizard.scss @ 49060
1 |
#wizard { |
---|---|
2 |
|
3 |
#content { |
4 |
padding: 0 0 40px; |
5 |
|
6 |
.content-wrapper { |
7 |
margin-top: 0; |
8 |
}
|
9 |
}
|
10 |
|
11 |
.header { |
12 |
padding: 11px 0 9px 0; |
13 |
background: #5A6474; |
14 |
font-family: $helvetica; |
15 |
text-align: center; |
16 |
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); |
17 |
|
18 |
.sidebar-toggler { |
19 |
position: absolute; |
20 |
color: #fff; |
21 |
padding: 15px; |
22 |
top: 3px; |
23 |
z-index: 99; |
24 |
left: 8px; |
25 |
cursor: pointer; |
26 |
|
27 |
i { |
28 |
font-size: 37px; |
29 |
}
|
30 |
}
|
31 |
|
32 |
.steps { |
33 |
width: 79%; |
34 |
margin: 0 auto; |
35 |
border-radius: 2px 2px 0 0; |
36 |
|
37 |
.step { |
38 |
width: 25%; |
39 |
float: left; |
40 |
padding-top: 20px; |
41 |
padding-bottom: 20px; |
42 |
text-align: center; |
43 |
color: #f5f5f5; |
44 |
text-shadow: 1px 1px rgba(0, 0, 0, 0.05); |
45 |
position: relative; |
46 |
font-size: 13px; |
47 |
font-weight: 500; |
48 |
|
49 |
@media (max-width: $maxSmall) { |
50 |
width: 100%; |
51 |
padding: 10px 0; |
52 |
}
|
53 |
|
54 |
&.active { |
55 |
span { |
56 |
background: #94A1B8; |
57 |
}
|
58 |
}
|
59 |
|
60 |
&:after { |
61 |
content: ''; |
62 |
position: absolute; |
63 |
bottom: 31px; |
64 |
left: 55%; |
65 |
display: block; |
66 |
height: 2px; |
67 |
background: #94A1B8; |
68 |
width: 100%; |
69 |
|
70 |
@media (max-width: $maxMedium) { |
71 |
left: 57%; |
72 |
}
|
73 |
|
74 |
@media (max-width: $maxSmall) { |
75 |
display: none; |
76 |
}
|
77 |
}
|
78 |
|
79 |
&:last-child { |
80 |
&:after { |
81 |
display: none; |
82 |
}
|
83 |
}
|
84 |
|
85 |
span { |
86 |
width: 23px; |
87 |
height: 23px; |
88 |
display: block; |
89 |
position: relative; |
90 |
margin: 0 auto; |
91 |
margin-top: 13px; |
92 |
border-radius: 25px; |
93 |
background: #5A6474; |
94 |
border: 2px solid #94A1B8; |
95 |
|
96 |
@include transition(all .2s linear); |
97 |
|
98 |
@media (max-width: $maxSmall) { |
99 |
position: absolute; |
100 |
top: 0; |
101 |
right: 0; |
102 |
width: 15px; |
103 |
height: 15px; |
104 |
}
|
105 |
}
|
106 |
}
|
107 |
}
|
108 |
}
|
109 |
|
110 |
.form-wizard { |
111 |
background: #fff; |
112 |
margin: 0 auto; |
113 |
margin-top: 42px; |
114 |
width: 65%; |
115 |
position: relative; |
116 |
|
117 |
@media (max-width: $maxSmall) { |
118 |
width: 84%; |
119 |
}
|
120 |
|
121 |
.step { |
122 |
opacity: 0; |
123 |
position: absolute; |
124 |
width: 100%; |
125 |
|
126 |
&.active { |
127 |
opacity: 1; |
128 |
z-index: 3; |
129 |
}
|
130 |
|
131 |
.form-group { |
132 |
margin-bottom: 21px; |
133 |
|
134 |
.column { |
135 |
width: 30%; |
136 |
float: left; |
137 |
|
138 |
@media (max-width: $maxSmall) { |
139 |
width: 100%; |
140 |
margin-bottom: 20px; |
141 |
}
|
142 |
}
|
143 |
}
|
144 |
|
145 |
/* step 2 avatar display */
|
146 |
.display-field { |
147 |
margin-top: 6px; |
148 |
|
149 |
.display { |
150 |
float: left; |
151 |
background: #eeeeee; |
152 |
width: 100px; |
153 |
height: 100px; |
154 |
display: table; |
155 |
text-align: center; |
156 |
|
157 |
span { |
158 |
color: #9B9B9B; |
159 |
font-weight: bold; |
160 |
font-family: $helvetica; |
161 |
font-size: 13px; |
162 |
display: table-cell; |
163 |
vertical-align: middle; |
164 |
}
|
165 |
}
|
166 |
|
167 |
input { |
168 |
float: left; |
169 |
margin-top: 30px; |
170 |
margin-left: 20px; |
171 |
}
|
172 |
}
|
173 |
|
174 |
/* step 3 expiration date inputs */
|
175 |
.expiration-field { |
176 |
width: 63% !important; |
177 |
|
178 |
input { |
179 |
width: 48%; |
180 |
float: left; |
181 |
|
182 |
&:last-child { |
183 |
float: right; |
184 |
}
|
185 |
}
|
186 |
}
|
187 |
|
188 |
/* final step success */
|
189 |
.success { |
190 |
text-align: center; |
191 |
|
192 |
.ion-checkmark-circled { |
193 |
font-size: 47px; |
194 |
color: #3DA838; |
195 |
}
|
196 |
|
197 |
h3 { |
198 |
margin-top: 25px; |
199 |
font-size: 21px; |
200 |
color: #556579; |
201 |
}
|
202 |
|
203 |
.button { |
204 |
margin-top: 40px; |
205 |
}
|
206 |
}
|
207 |
|
208 |
.form-actions { |
209 |
margin-top: 40px; |
210 |
text-align: center; |
211 |
|
212 |
.button { |
213 |
margin: 0 10px; |
214 |
}
|
215 |
}
|
216 |
}
|
217 |
}
|
218 |
|
219 |
}
|
220 |
|
221 |
|
222 |
|
- « Previous
- 1
- …
- 25
- 26
- 27
- Next »