1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | :root {
|
14 | --st-background: unset;
|
15 | --st-border: 1px solid #eeeeee;
|
16 | --st-anchor-default-primary-color: #60bef5;
|
17 | --st-anchor-default-secondary-color: #dbe0e5;
|
18 | --st-anchor-active-primary-color: #009EF7;
|
19 | --st-anchor-active-secondary-color: #ffffff;
|
20 | --st-anchor-disabled-primary-color: #eeeeee;
|
21 | --st-anchor-disabled-secondary-color: #dbe0e5;
|
22 | --st-loader-color: #009EF7;
|
23 | --st-loader-background-color: #f8f9fa;
|
24 | --st-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
|
25 | }
|
26 |
|
27 |
|
28 | .st {
|
29 | position: relative;
|
30 | }
|
31 |
|
32 | .st *,
|
33 | .st *::before,
|
34 | .st *::after {
|
35 | box-sizing: border-box;
|
36 | }
|
37 |
|
38 | .st > .tab-content {
|
39 | position: relative;
|
40 | overflow: hidden;
|
41 | height: auto;
|
42 | }
|
43 |
|
44 | .st > .tab-content > .tab-pane {
|
45 | padding: 0.8rem;
|
46 | }
|
47 |
|
48 | .st > .nav {
|
49 | display: flex;
|
50 | flex-wrap: wrap;
|
51 | list-style: none;
|
52 | padding-left: 0;
|
53 | margin-top: 0;
|
54 | margin-bottom: 0;
|
55 | }
|
56 |
|
57 | @media screen and (max-width: 640px) {
|
58 | .st > .nav {
|
59 | flex-direction: column !important;
|
60 | flex: 1 auto;
|
61 | }
|
62 | }
|
63 |
|
64 | .st > .nav .nav-link {
|
65 | position: relative;
|
66 | display: block;
|
67 | padding: 0.5rem 1rem;
|
68 | height: 100%;
|
69 | min-height: 100%;
|
70 | text-decoration: none;
|
71 | }
|
72 |
|
73 | .st > .nav .nav-link:hover, .st > .nav .nav-link:active, .st > .nav .nav-link:focus {
|
74 | text-decoration: none;
|
75 | }
|
76 |
|
77 | .st > .nav .nav-link::-moz-focus-inner {
|
78 | border: 0;
|
79 | }
|
80 |
|
81 | .st > .nav .nav-link.disabled {
|
82 | pointer-events: none;
|
83 | cursor: not-allowed;
|
84 | }
|
85 |
|
86 | .st > .nav .nav-link.hidden {
|
87 | display: none;
|
88 | visibility: none;
|
89 | }
|
90 |
|
91 | .st.st-vertical {
|
92 | display: flex !important;
|
93 | flex-wrap: nowrap;
|
94 | }
|
95 |
|
96 | .st.st-vertical > .nav {
|
97 | flex-direction: column !important;
|
98 | flex: 1 auto;
|
99 | }
|
100 |
|
101 | .st.st-vertical > .nav .nav-link {
|
102 | text-align: left;
|
103 | }
|
104 |
|
105 | .st.st-vertical > .nav > li, .st.st-vertical > .nav .nav-link {
|
106 | flex-grow: unset !important;
|
107 | }
|
108 |
|
109 | .st.st-vertical > .tab-content {
|
110 | flex: 1 100%;
|
111 | }
|
112 |
|
113 | .st.st-justified > .nav > li, .st.st-justified > .nav .nav-link {
|
114 | flex-basis: 0;
|
115 | flex-grow: 1;
|
116 | text-align: center;
|
117 | }
|
118 |
|
119 | .st.st-loading {
|
120 | -webkit-user-select: none;
|
121 | -moz-user-select: none;
|
122 | user-select: none;
|
123 | }
|
124 |
|
125 | .st.st-loading::after {
|
126 | content: "";
|
127 | display: block;
|
128 | position: absolute;
|
129 | opacity: 1;
|
130 | top: 0;
|
131 | left: 0;
|
132 | height: 100%;
|
133 | width: 100%;
|
134 | background: var(--st-loader-background-wrapper-color);
|
135 | z-index: 2;
|
136 | }
|
137 |
|
138 | .st.st-loading::before {
|
139 | content: "";
|
140 | display: inline-block;
|
141 | position: absolute;
|
142 | top: 45%;
|
143 | left: 45%;
|
144 | width: 2rem;
|
145 | height: 2rem;
|
146 | border: 10px solid var(--st-loader-color);
|
147 | border-top: 10px solid var(--st-loader-background-color);
|
148 | border-radius: 50%;
|
149 | z-index: 10;
|
150 | -webkit-animation: spin 1s linear infinite;
|
151 | animation: spin 1s linear infinite;
|
152 | }
|
153 |
|
154 | @-webkit-keyframes spin {
|
155 | 0% {
|
156 | transform: rotate(0deg);
|
157 | }
|
158 |
|
159 | 100% {
|
160 | transform: rotate(360deg);
|
161 | }
|
162 | }
|
163 |
|
164 | @keyframes spin {
|
165 | 0% {
|
166 | transform: rotate(0deg);
|
167 | }
|
168 |
|
169 | 100% {
|
170 | transform: rotate(360deg);
|
171 | }
|
172 | }
|
173 |
|
174 |
|
175 | .st-theme-basic {
|
176 | border: var(--st-border);
|
177 | background: var(--st-background);
|
178 | }
|
179 |
|
180 | .st-theme-basic > .nav {
|
181 | box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
|
182 | }
|
183 |
|
184 | .st-theme-basic > .nav .nav-link {
|
185 | position: relative;
|
186 | height: 100%;
|
187 | min-height: 100%;
|
188 | color: var(--st-anchor-default-primary-color);
|
189 | }
|
190 |
|
191 | .st-theme-basic > .nav .nav-link::after {
|
192 | content: "";
|
193 | position: absolute;
|
194 | pointer-events: none;
|
195 | height: 2px;
|
196 | width: 0;
|
197 | left: 0px;
|
198 | bottom: -1px;
|
199 | transition: all 0.35s ease 0.15s;
|
200 | width: 100%;
|
201 | }
|
202 |
|
203 | .st-theme-basic > .nav .nav-link.active {
|
204 | color: var(--st-anchor-active-primary-color) !important;
|
205 | }
|
206 |
|
207 | .st-theme-basic > .nav .nav-link.active::after {
|
208 | background: var(--st-anchor-active-primary-color) !important;
|
209 | }
|
210 |
|
211 | .st-theme-basic > .nav .nav-link.disabled {
|
212 | color: var(--st-anchor-disabled-primary-color) !important;
|
213 | }
|
214 |
|
215 | .st-theme-basic.st-vertical > .nav {
|
216 | box-shadow: 0.125rem 0 0.25rem rgba(0, 0, 0, 0.1) !important;
|
217 | }
|
218 |
|
219 | .st-theme-basic.st-vertical > .nav .nav-link::after {
|
220 | height: 100%;
|
221 | width: 2px;
|
222 | top: 0px;
|
223 | left: unset;
|
224 | bottom: unset;
|
225 | right: -1px;
|
226 | }
|
227 |
|
228 | .st-theme-elite {
|
229 | border-left: 1px solid var(--st-anchor-active-primary-color);
|
230 | border-right: 1px solid var(--st-anchor-active-primary-color);
|
231 | border-bottom: 1px solid var(--st-anchor-active-primary-color);
|
232 | border-radius: 0.5em;
|
233 | }
|
234 |
|
235 | .st-theme-elite > .nav {
|
236 | background-color: #ffffff;
|
237 | border-bottom: 1px solid var(--st-anchor-active-primary-color);
|
238 | margin-right: -1px;
|
239 | margin-left: -1px;
|
240 | }
|
241 |
|
242 | .st-theme-elite > .nav .nav-link {
|
243 | border: 1px solid transparent;
|
244 | border-bottom-width: 0;
|
245 | color: var(--st-anchor-default-primary-color);
|
246 | }
|
247 |
|
248 | .st-theme-elite > .nav .nav-link.active {
|
249 | color: var(--st-anchor-active-primary-color) !important;
|
250 | border-color: var(--st-anchor-active-primary-color) !important;
|
251 | border-top-left-radius: 0.5em;
|
252 | border-top-right-radius: 0.5em;
|
253 | }
|
254 |
|
255 | .st-theme-elite > .nav .nav-link.active::after {
|
256 | content: "";
|
257 | position: absolute;
|
258 | background: #ffffff;
|
259 | height: 1px;
|
260 | width: 100%;
|
261 | left: 0px;
|
262 | bottom: -1px;
|
263 | }
|
264 |
|
265 | .st-theme-elite > .nav .nav-link.disabled {
|
266 | color: var(--st-anchor-disabled-primary-color) !important;
|
267 | }
|
268 |
|
269 | .st-theme-elite.st-vertical {
|
270 | border-left: unset;
|
271 | border-top: 1px solid var(--st-anchor-active-primary-color);
|
272 | border-right: 1px solid var(--st-anchor-active-primary-color);
|
273 | border-bottom: 1px solid var(--st-anchor-active-primary-color);
|
274 | }
|
275 |
|
276 | .st-theme-elite.st-vertical > .nav {
|
277 | border-right: 1px solid var(--st-anchor-active-primary-color);
|
278 | border-bottom: unset;
|
279 | margin-top: -1px;
|
280 | margin-bottom: -1px;
|
281 | margin-right: 0;
|
282 | margin-left: 0;
|
283 | }
|
284 |
|
285 | .st-theme-elite.st-vertical > .nav .nav-link {
|
286 | border-bottom-width: 1px;
|
287 | border-right-width: 0;
|
288 | }
|
289 |
|
290 | .st-theme-elite.st-vertical > .nav .nav-link.active {
|
291 | border-top-left-radius: 0.5em;
|
292 | border-bottom-left-radius: 0.5em;
|
293 | border-top-right-radius: unset;
|
294 | }
|
295 |
|
296 | .st-theme-elite.st-vertical > .nav .nav-link.active::after {
|
297 | height: 100%;
|
298 | width: 1px;
|
299 | top: 0px;
|
300 | left: auto;
|
301 | right: -1px;
|
302 | }
|
303 |
|
304 | .st-theme-pills > .nav {
|
305 | position: relative;
|
306 | background: var(--st-anchor-default-primary-color);
|
307 | padding: 0.3em !important;
|
308 | border-radius: 2em;
|
309 | }
|
310 |
|
311 | .st-theme-pills > .nav .nav-link {
|
312 | height: 100%;
|
313 | min-height: 100%;
|
314 | color: var(--st-anchor-default-secondary-color) !important;
|
315 | border-radius: 2em;
|
316 | }
|
317 |
|
318 | .st-theme-pills > .nav .nav-link.active {
|
319 | color: var(--st-anchor-active-secondary-color) !important;
|
320 | background: var(--st-anchor-active-primary-color);
|
321 | box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.1);
|
322 | }
|
323 |
|
324 | .st-theme-pills > .nav .nav-link.disabled {
|
325 | color: var(--st-anchor-disabled-secondary-color) !important;
|
326 | }
|
327 |
|
328 | .st-theme-brick > .nav {
|
329 | border-color: var(--st-anchor-active-primary-color);
|
330 | border-bottom-style: solid;
|
331 | border-bottom-width: 2px;
|
332 | }
|
333 |
|
334 | .st-theme-brick > .nav .nav-link {
|
335 | background: transparent;
|
336 | height: 100%;
|
337 | min-height: 100%;
|
338 | color: var(--st-anchor-default-primary-color) !important;
|
339 | }
|
340 |
|
341 | .st-theme-brick > .nav .nav-link.active {
|
342 | color: var(--st-anchor-active-secondary-color) !important;
|
343 | background: var(--st-anchor-active-primary-color) !important;
|
344 | border-top-left-radius: 8px;
|
345 | border-top-right-radius: 8px;
|
346 | }
|
347 |
|
348 | .st-theme-brick > .nav .nav-link.disabled {
|
349 | color: var(--st-anchor-disabled-primary-color) !important;
|
350 | }
|
351 |
|
352 | .st-theme-brick.st-vertical > .nav {
|
353 | border-right-style: solid;
|
354 | border-right-width: 2px;
|
355 | border-bottom: unset;
|
356 | }
|
357 |
|
358 | .st-theme-brick.st-vertical > .nav .nav-link.active {
|
359 | border-top-left-radius: 8px;
|
360 | border-bottom-left-radius: 8px;
|
361 | border-top-right-radius: unset;
|
362 | }
|
363 |
|
364 | .st-theme-forge > .nav {
|
365 | border-right: 1px solid var(--st-anchor-default-secondary-color);
|
366 | }
|
367 |
|
368 | .st-theme-forge > .nav .nav-link {
|
369 | position: relative;
|
370 | height: 100%;
|
371 | min-height: 100%;
|
372 | padding: 10px;
|
373 | color: var(--st-anchor-default-primary-color);
|
374 | border-style: solid;
|
375 | border-width: 3px 0 1px 1px;
|
376 | border-color: var(--st-anchor-default-secondary-color);
|
377 | }
|
378 |
|
379 | .st-theme-forge > .nav .nav-link:hover, .st-theme-forge > .nav .nav-link:focus {
|
380 | color: var(--st-anchor-active-primary-color) !important;
|
381 | }
|
382 |
|
383 | .st-theme-forge > .nav .nav-link.active {
|
384 | color: var(--st-anchor-active-primary-color) !important;
|
385 | border-top-color: var(--st-anchor-active-primary-color);
|
386 | }
|
387 |
|
388 | .st-theme-forge > .nav .nav-link.active::after {
|
389 | content: "";
|
390 | position: absolute;
|
391 | background: #ffffff;
|
392 | height: 1px;
|
393 | width: 100%;
|
394 | left: 0px;
|
395 | bottom: -1px;
|
396 | }
|
397 |
|
398 | .st-theme-forge > .nav .nav-link.disabled {
|
399 | color: var(--st-anchor-disabled-primary-color) !important;
|
400 | }
|
401 |
|
402 | .st-theme-forge.st-vertical > .nav {
|
403 | border-top: 1px solid var(--st-anchor-default-secondary-color);
|
404 | border-right: unset;
|
405 | }
|
406 |
|
407 | .st-theme-forge.st-vertical > .nav .nav-link {
|
408 | border-width: 0 1px 1px 3px;
|
409 | }
|
410 |
|
411 | .st-theme-forge.st-vertical > .nav .nav-link.active {
|
412 | border-left-color: var(--st-anchor-active-primary-color);
|
413 | }
|
414 |
|
415 | .st-theme-forge.st-vertical > .nav .nav-link.active::after {
|
416 | height: 100%;
|
417 | width: 1px;
|
418 | top: 0px;
|
419 | left: auto;
|
420 | right: -1px;
|
421 | }
|
422 |
|
423 | .st-theme-blocks > .nav .nav-link {
|
424 | position: relative;
|
425 | height: 100%;
|
426 | min-height: 100%;
|
427 | color: var(--st-anchor-default-primary-color);
|
428 | border-radius: 0.475rem;
|
429 | }
|
430 |
|
431 | .st-theme-blocks > .nav .nav-link.active {
|
432 | box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 0.3);
|
433 | color: var(--st-anchor-active-secondary-color) !important;
|
434 | background-color: var(--st-anchor-active-primary-color);
|
435 | }
|
436 |
|
437 | .st-theme-blocks > .nav .nav-link.disabled {
|
438 | color: var(--st-anchor-disabled-primary-color) !important;
|
439 | } |
\ | No newline at end of file |