UNPKG

15.1 kBCSSView Raw
1.ant-pro-basicLayout {
2 display: flex;
3 flex-direction: column;
4 width: 100%;
5 min-height: 100%;
6}
7.ant-pro-basicLayout .ant-layout-header.ant-pro-fixed-header {
8 position: fixed;
9 top: 0;
10}
11.ant-pro-basicLayout .ant-layout-header.ant-pro-header-light {
12 background: #fff;
13}
14.ant-pro-basicLayout-content {
15 position: relative;
16 margin: 24px;
17}
18.ant-pro-basicLayout-content .ant-pro-page-container {
19 margin: -24px -24px 0;
20}
21.ant-pro-basicLayout-content-disable-margin {
22 margin: 0;
23}
24.ant-pro-basicLayout-content-disable-margin .ant-pro-page-container {
25 margin: 0;
26}
27.ant-pro-basicLayout-content > .ant-layout {
28 max-height: 100%;
29}
30.ant-pro-basicLayout .ant-pro-basicLayout-is-children.ant-pro-basicLayout-fix-siderbar {
31 height: 100vh;
32 overflow: hidden;
33 transform: rotate(0);
34}
35.ant-pro-basicLayout .ant-pro-basicLayout-has-header .tech-page-container {
36 height: calc(100vh - 48px);
37}
38.ant-pro-basicLayout .ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-has-header .tech-page-container {
39 height: calc(100vh - 48px - 48px);
40}
41.ant-pro-basicLayout .ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children {
42 min-height: calc(100vh - 48px);
43}
44.ant-pro-basicLayout .ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-has-header .ant-pro-basicLayout-is-children.ant-pro-basicLayout-fix-siderbar {
45 height: calc(100vh - 48px);
46}
47
48.ant-pro-fixed-header {
49 z-index: 9;
50 width: 100%;
51}
52.ant-pro-fixed-header-action {
53 transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
54}
55.ant-pro-header-realDark {
56 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
57}
58
59.ant-pro-global-header {
60 position: relative;
61 display: flex;
62 align-items: center;
63 height: 100%;
64 padding: 0 16px;
65 background: #fff;
66 box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
67}
68.ant-pro-global-header > * {
69 height: 100%;
70}
71.ant-pro-global-header-collapsed-button {
72 display: flex;
73 align-items: center;
74 margin-left: 16px;
75 font-size: 20px;
76}
77.ant-pro-global-header-layout-mix {
78 background-color: #001529;
79}
80.ant-pro-global-header-layout-mix .ant-pro-global-header-logo h1 {
81 color: #fff;
82}
83.ant-pro-global-header-layout-mix .anticon {
84 color: #fff;
85}
86.ant-pro-global-header-logo {
87 position: relative;
88 overflow: hidden;
89}
90.ant-pro-global-header-logo a {
91 display: flex;
92 align-items: center;
93 height: 100%;
94}
95.ant-pro-global-header-logo a img {
96 height: 28px;
97}
98.ant-pro-global-header-logo a h1 {
99 height: 32px;
100 margin: 0 0 0 12px;
101 color: #1890ff;
102 font-weight: 600;
103 font-size: 18px;
104 line-height: 32px;
105}
106.ant-pro-global-header-logo-rtl a h1 {
107 margin: 0 12px 0 0;
108}
109.ant-pro-global-header-menu .anticon {
110 margin-right: 8px;
111}
112.ant-pro-global-header-menu .ant-dropdown-menu-item {
113 min-width: 160px;
114}
115.ant-pro-global-header .dark {
116 height: 48px;
117}
118.ant-pro-global-header .dark .action {
119 color: rgba(255, 255, 255, 0.85);
120}
121.ant-pro-global-header .dark .action > i {
122 color: rgba(255, 255, 255, 0.85);
123}
124.ant-pro-global-header .dark .action:hover,
125.ant-pro-global-header .dark .action.opened {
126 background: #1890ff;
127}
128.ant-pro-global-header .dark .action .ant-badge {
129 color: rgba(255, 255, 255, 0.85);
130}
131
132.ant-pro-sider {
133 position: relative;
134 background-color: #001529;
135 border-right: 0;
136}
137.ant-pro-sider .ant-menu {
138 background: transparent;
139}
140.ant-pro-sider.ant-layout-sider-light .ant-menu-item a {
141 color: rgba(0, 0, 0, 0.85);
142}
143.ant-pro-sider.ant-layout-sider-light .ant-menu-item-selected a,
144.ant-pro-sider.ant-layout-sider-light .ant-menu-item a:hover {
145 color: #1890ff;
146}
147.ant-pro-sider-logo {
148 position: relative;
149 display: flex;
150 align-items: center;
151 padding: 16px 16px;
152 cursor: pointer;
153 transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
154}
155.ant-pro-sider-logo > a {
156 display: flex;
157 align-items: center;
158 justify-content: center;
159 min-height: 32px;
160}
161.ant-pro-sider-logo img {
162 display: inline-block;
163 height: 32px;
164 vertical-align: middle;
165}
166.ant-pro-sider-logo h1 {
167 display: inline-block;
168 height: 32px;
169 margin: 0 0 0 12px;
170 color: white;
171 font-weight: 600;
172 font-size: 18px;
173 line-height: 32px;
174 vertical-align: middle;
175 animation: pro-layout-title-hide 0.3s;
176}
177.ant-pro-sider-extra {
178 margin-bottom: 16px;
179 padding: 0 16px;
180}
181.ant-pro-sider-extra-no-logo {
182 margin-top: 16px;
183}
184.ant-pro-sider-menu {
185 position: relative;
186 z-index: 10;
187 min-height: 100%;
188 box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
189}
190.ant-pro-sider .ant-layout-sider-children {
191 display: flex;
192 flex-direction: column;
193 height: 100%;
194 /* 滚动条滑块 */
195}
196.ant-pro-sider .ant-layout-sider-children ::-webkit-scrollbar {
197 width: 6px;
198 height: 6px;
199}
200.ant-pro-sider .ant-layout-sider-children ::-webkit-scrollbar-track {
201 background: rgba(255, 255, 255, 0.15);
202 border-radius: 3px;
203 box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
204}
205.ant-pro-sider .ant-layout-sider-children ::-webkit-scrollbar-thumb {
206 background: rgba(255, 255, 255, 0.2);
207 border-radius: 3px;
208 box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
209}
210.ant-pro-sider.ant-layout-sider-collapsed .ant-menu-inline-collapsed {
211 width: 48px;
212}
213.ant-pro-sider.ant-layout-sider-collapsed .ant-pro-sider-logo {
214 padding: 16px 8px;
215}
216.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
217 position: fixed;
218 top: 0;
219 left: 0;
220 z-index: 100;
221 height: 100%;
222 overflow: auto;
223 overflow-x: hidden;
224 box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
225}
226.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed > .ant-menu-root :not(.ant-pro-sider-link-menu) {
227 height: calc(100vh - 48px);
228 overflow-y: auto;
229}
230.ant-pro-sider-light {
231 background-color: #fff;
232 box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
233}
234.ant-pro-sider-light .ant-layout-sider-children {
235 /* 滚动条滑块 */
236}
237.ant-pro-sider-light .ant-layout-sider-children ::-webkit-scrollbar-track {
238 background: rgba(0, 0, 0, 0.06);
239 border-radius: 3px;
240 box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
241}
242.ant-pro-sider-light .ant-layout-sider-children ::-webkit-scrollbar-thumb {
243 background: rgba(0, 0, 0, 0.12);
244 border-radius: 3px;
245 box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
246}
247.ant-pro-sider-light .ant-pro-sider-logo h1 {
248 color: #1890ff;
249}
250.ant-pro-sider-light .ant-menu-light {
251 border-right-color: transparent;
252}
253.ant-pro-sider-light .ant-pro-sider-collapsed-button {
254 border-top: 1px solid #f0f0f0;
255}
256.ant-pro-sider-icon {
257 width: 14px;
258 vertical-align: baseline;
259}
260.ant-pro-sider-links {
261 width: 100%;
262}
263.ant-pro-sider-links ul.ant-menu-root {
264 height: auto;
265}
266.ant-pro-sider-collapsed-button {
267 border-top: 1px solid rgba(0, 0, 0, 0.25);
268}
269.ant-pro-sider-collapsed-button .anticon {
270 font-size: 16px;
271}
272.ant-pro-sider .top-nav-menu li.ant-menu-item {
273 height: 100%;
274 line-height: 1;
275}
276.ant-pro-sider .drawer .drawer-content {
277 background: #001529;
278}
279@keyframes pro-layout-title-hide {
280 0% {
281 display: none;
282 opacity: 0;
283 }
284 80% {
285 display: none;
286 opacity: 0;
287 }
288 100% {
289 display: unset;
290 opacity: 1;
291 }
292}
293
294.ant-pro-top-nav-header {
295 position: relative;
296 width: 100%;
297 height: 100%;
298 box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
299 transition: background 0.3s, width 0.2s;
300}
301.ant-pro-top-nav-header .ant-menu {
302 background: transparent;
303}
304.ant-pro-top-nav-header.light {
305 background-color: #fff;
306}
307.ant-pro-top-nav-header.light .ant-pro-top-nav-header-logo h1 {
308 color: rgba(0, 0, 0, 0.85);
309}
310.ant-pro-top-nav-header.light .anticon {
311 color: inherit;
312}
313.ant-pro-top-nav-header-main {
314 display: flex;
315 height: 100%;
316 padding-left: 16px;
317}
318.ant-pro-top-nav-header-main-left {
319 display: flex;
320 min-width: 192px;
321}
322.ant-pro-top-nav-header .anticon {
323 color: #fff;
324}
325.ant-pro-top-nav-header-logo {
326 position: relative;
327 min-width: 165px;
328 height: 100%;
329 overflow: hidden;
330}
331.ant-pro-top-nav-header-logo img,
332.ant-pro-top-nav-header-logo a > svg {
333 display: inline-block;
334 height: 32px;
335 vertical-align: middle;
336}
337.ant-pro-top-nav-header-logo h1 {
338 display: inline-block;
339 margin: 0 0 0 12px;
340 color: #fff;
341 font-size: 16px;
342 vertical-align: top;
343}
344.ant-pro-top-nav-header-menu {
345 min-width: 0;
346}
347.ant-pro-top-nav-header-menu .ant-menu.ant-menu-horizontal {
348 height: 100%;
349 border: none;
350}
351
352.ant-pro-global-footer {
353 margin: 48px 0 24px 0;
354 padding: 0 16px;
355 text-align: center;
356}
357.ant-pro-global-footer-links {
358 margin-bottom: 8px;
359}
360.ant-pro-global-footer-links a {
361 color: rgba(0, 0, 0, 0.45);
362 transition: all 0.3s;
363}
364.ant-pro-global-footer-links a:not(:last-child) {
365 margin-right: 40px;
366}
367.ant-pro-global-footer-links a:hover {
368 color: rgba(0, 0, 0, 0.85);
369}
370.ant-pro-global-footer-copyright {
371 color: rgba(0, 0, 0, 0.45);
372 font-size: 14px;
373}
374
375.ant-pro-grid-content {
376 width: 100%;
377}
378.ant-pro-grid-content.wide {
379 max-width: 1200px;
380 margin: 0 auto;
381}
382
383.ant-pro-setting-drawer-content {
384 position: relative;
385 min-height: 100%;
386}
387.ant-pro-setting-drawer-content .ant-list-item span {
388 flex: 1;
389}
390.ant-pro-setting-drawer-block-checkbox {
391 display: flex;
392}
393.ant-pro-setting-drawer-block-checkbox-item {
394 position: relative;
395 width: 44px;
396 height: 36px;
397 margin-right: 16px;
398 overflow: hidden;
399 background-color: #f0f2f5;
400 border-radius: 4px;
401 box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
402 cursor: pointer;
403}
404.ant-pro-setting-drawer-block-checkbox-item::before {
405 position: absolute;
406 top: 0;
407 left: 0;
408 width: 33%;
409 height: 100%;
410 background-color: #fff;
411 content: '';
412}
413.ant-pro-setting-drawer-block-checkbox-item::after {
414 position: absolute;
415 top: 0;
416 left: 0;
417 width: 100%;
418 height: 25%;
419 background-color: #fff;
420 content: '';
421}
422.ant-pro-setting-drawer-block-checkbox-item-realDark {
423 background-color: rgba(0, 21, 41, 0.85);
424}
425.ant-pro-setting-drawer-block-checkbox-item-realDark::before {
426 background-color: rgba(0, 21, 41, 0.65);
427 content: '';
428}
429.ant-pro-setting-drawer-block-checkbox-item-realDark::after {
430 background-color: rgba(0, 21, 41, 0.85);
431}
432.ant-pro-setting-drawer-block-checkbox-item-light::before {
433 background-color: #fff;
434 content: '';
435}
436.ant-pro-setting-drawer-block-checkbox-item-light::after {
437 background-color: #fff;
438}
439.ant-pro-setting-drawer-block-checkbox-item-dark::before,
440.ant-pro-setting-drawer-block-checkbox-item-side::before {
441 z-index: 1;
442 background-color: #001529;
443 content: '';
444}
445.ant-pro-setting-drawer-block-checkbox-item-dark::after,
446.ant-pro-setting-drawer-block-checkbox-item-side::after {
447 background-color: #fff;
448}
449.ant-pro-setting-drawer-block-checkbox-item-top::before {
450 background-color: transparent;
451 content: '';
452}
453.ant-pro-setting-drawer-block-checkbox-item-top::after {
454 background-color: #001529;
455}
456.ant-pro-setting-drawer-block-checkbox-item-mix::before {
457 background-color: #fff;
458 content: '';
459}
460.ant-pro-setting-drawer-block-checkbox-item-mix::after {
461 background-color: #001529;
462}
463.ant-pro-setting-drawer-block-checkbox-selectIcon {
464 position: absolute;
465 right: 6px;
466 bottom: 4px;
467 color: #1890ff;
468 font-weight: bold;
469 font-size: 14px;
470 pointer-events: none;
471}
472.ant-pro-setting-drawer-block-checkbox-selectIcon .action {
473 color: #1890ff;
474}
475.ant-pro-setting-drawer-color_block {
476 display: inline-block;
477 width: 38px;
478 height: 22px;
479 margin: 4px;
480 margin-right: 12px;
481 vertical-align: middle;
482 border-radius: 4px;
483 cursor: pointer;
484}
485.ant-pro-setting-drawer-title {
486 margin-bottom: 12px;
487 color: rgba(0, 0, 0, 0.85);
488 font-size: 14px;
489 line-height: 22px;
490}
491.ant-pro-setting-drawer-handle {
492 position: absolute;
493 top: 240px;
494 right: 300px;
495 z-index: 0;
496 display: flex;
497 align-items: center;
498 justify-content: center;
499 width: 48px;
500 height: 48px;
501 font-size: 16px;
502 text-align: center;
503 background-color: #1890ff;
504 border-radius: 4px 0 0 4px;
505 cursor: pointer;
506 pointer-events: auto;
507}
508.ant-pro-setting-drawer-production-hint {
509 margin-top: 16px;
510 font-size: 12px;
511}
512
513.ant-pro-setting-drawer-content .theme-color {
514 margin-top: 16px;
515 overflow: hidden;
516}
517.ant-pro-setting-drawer-content .theme-color .theme-color-title {
518 margin-bottom: 12px;
519 font-size: 14px;
520 line-height: 22px;
521}
522.ant-pro-setting-drawer-content .theme-color .theme-color-block {
523 float: left;
524 width: 20px;
525 height: 20px;
526 margin-top: 8px;
527 margin-right: 8px;
528 color: #fff;
529 font-weight: bold;
530 text-align: center;
531 border-radius: 2px;
532 cursor: pointer;
533}
534
535.ant-pro-page-container-children-content {
536 margin: 24px 24px 0;
537 padding: inherit;
538}
539.ant-pro-page-container {
540 background-color: inherit;
541}
542.ant-pro-page-container-warp {
543 background-color: #fff;
544}
545.ant-pro-page-container-warp .ant-tabs-nav {
546 margin: 0;
547}
548.ant-pro-page-container-ghost .ant-pro-page-container-warp {
549 background-color: transparent;
550}
551.ant-pro-page-container-ghost .ant-pro-page-container-children-content {
552 margin-top: 0;
553}
554.ant-pro-page-container-main .ant-pro-page-container-detail {
555 display: flex;
556}
557.ant-pro-page-container-main .ant-pro-page-container-row {
558 display: flex;
559 width: 100%;
560}
561.ant-pro-page-container-main .ant-pro-page-container-title-content {
562 margin-bottom: 16px;
563}
564.ant-pro-page-container-main .ant-pro-page-container-title,
565.ant-pro-page-container-main .ant-pro-page-container-content {
566 flex: auto;
567 width: 100%;
568}
569.ant-pro-page-container-main .ant-pro-page-container-extraContent,
570.ant-pro-page-container-main .ant-pro-page-container-main {
571 flex: 0 1 auto;
572}
573.ant-pro-page-container-main .ant-pro-page-container-main {
574 width: 100%;
575}
576.ant-pro-page-container-main .ant-pro-page-container-title {
577 margin-bottom: 16px;
578}
579.ant-pro-page-container-main .ant-pro-page-container-logo {
580 margin-bottom: 16px;
581}
582.ant-pro-page-container-main .ant-pro-page-container-extraContent {
583 min-width: 242px;
584 margin-left: 88px;
585 text-align: right;
586}
587@media screen and (max-width: 1200px) {
588 .ant-pro-page-container-main .ant-pro-page-container-extraContent {
589 margin-left: 44px;
590 }
591}
592@media screen and (max-width: 992px) {
593 .ant-pro-page-container-main .ant-pro-page-container-extraContent {
594 margin-left: 20px;
595 }
596}
597@media screen and (max-width: 768px) {
598 .ant-pro-page-container-main .ant-pro-page-container-row {
599 display: block;
600 }
601 .ant-pro-page-container-main .ant-pro-page-container-action,
602 .ant-pro-page-container-main .ant-pro-page-container-extraContent {
603 margin-left: 0;
604 text-align: left;
605 }
606}
607@media screen and (max-width: 576px) {
608 .ant-pro-page-container-detail {
609 display: block;
610 }
611 .ant-pro-page-container-extraContent {
612 margin-left: 0;
613 }
614}
615
616.ant-pro-footer-bar {
617 position: fixed;
618 right: 0;
619 bottom: 0;
620 z-index: 99;
621 display: flex;
622 align-items: center;
623 width: 100%;
624 padding: 0 24px;
625 line-height: 44px;
626 background: #fff;
627 border-top: 1px solid #f0f0f0;
628 box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
629 transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
630}
631.ant-pro-footer-bar-left {
632 flex: 1;
633}
634.ant-pro-footer-bar-right > * {
635 margin-right: 8px;
636}
637.ant-pro-footer-bar-right > *:last-child {
638 margin: 0;
639}
640