1 | @root-entry-name: 'default';
|
2 | @import (reference) '~antd/es/style/themes/index.less';
|
3 |
|
4 | @pro-layout-page-container: ~'@{ant-prefix}-pro-page-container';
|
5 |
|
6 | @pro-layout-page-container-content-margin: 24px 24px 0;
|
7 | @pro-layout-page-container-content-padding: inherit;
|
8 | @pro-layout-page-container-bg-color: inherit;
|
9 | @pro-layout-page-container-warp-bg-color: @component-background;
|
10 |
|
11 | .@{pro-layout-page-container}-children-content {
|
12 | margin: @pro-layout-page-container-content-margin;
|
13 | padding: @pro-layout-page-container-content-padding;
|
14 | }
|
15 |
|
16 | .@{pro-layout-page-container} {
|
17 | background-color: @pro-layout-page-container-bg-color;
|
18 | &-warp {
|
19 | background-color: @pro-layout-page-container-warp-bg-color;
|
20 | .@{ant-prefix}-tabs-nav {
|
21 | margin: 0;
|
22 | }
|
23 | }
|
24 | &-ghost {
|
25 | .@{pro-layout-page-container}-warp {
|
26 | background-color: transparent;
|
27 | }
|
28 |
|
29 | .@{pro-layout-page-container}-children-content {
|
30 | margin-top: 0;
|
31 | }
|
32 | }
|
33 | }
|
34 |
|
35 | .@{pro-layout-page-container}-main {
|
36 | .@{pro-layout-page-container}-detail {
|
37 | display: flex;
|
38 | }
|
39 |
|
40 | .@{pro-layout-page-container}-row {
|
41 | display: flex;
|
42 | width: 100%;
|
43 | }
|
44 |
|
45 | .@{pro-layout-page-container}-title-content {
|
46 | margin-bottom: 16px;
|
47 | }
|
48 |
|
49 | .@{pro-layout-page-container}-title,
|
50 | .@{pro-layout-page-container}-content {
|
51 | flex: auto;
|
52 | width: 100%;
|
53 | }
|
54 |
|
55 | .@{pro-layout-page-container}-extraContent,
|
56 | .@{pro-layout-page-container}-main {
|
57 | flex: 0 1 auto;
|
58 | }
|
59 |
|
60 | .@{pro-layout-page-container}-main {
|
61 | width: 100%;
|
62 | }
|
63 |
|
64 | .@{pro-layout-page-container}-title {
|
65 | margin-bottom: 16px;
|
66 | }
|
67 |
|
68 | .@{pro-layout-page-container}-logo {
|
69 | margin-bottom: 16px;
|
70 | }
|
71 |
|
72 | .@{pro-layout-page-container}-extraContent {
|
73 | min-width: 242px;
|
74 | margin-left: 88px;
|
75 | text-align: right;
|
76 | }
|
77 | }
|
78 |
|
79 | @media screen and (max-width: @screen-xl) {
|
80 | .@{pro-layout-page-container}-main {
|
81 | .@{pro-layout-page-container}-extraContent {
|
82 | margin-left: 44px;
|
83 | }
|
84 | }
|
85 | }
|
86 |
|
87 | @media screen and (max-width: @screen-lg) {
|
88 | .@{pro-layout-page-container}-main {
|
89 | .@{pro-layout-page-container}-extraContent {
|
90 | margin-left: 20px;
|
91 | }
|
92 | }
|
93 | }
|
94 |
|
95 | @media screen and (max-width: @screen-md) {
|
96 | .@{pro-layout-page-container}-main {
|
97 | .@{pro-layout-page-container}-row {
|
98 | display: block;
|
99 | }
|
100 |
|
101 | .@{pro-layout-page-container}-action,
|
102 | .@{pro-layout-page-container}-extraContent {
|
103 | margin-left: 0;
|
104 | text-align: left;
|
105 | }
|
106 | }
|
107 | }
|
108 |
|
109 | @media screen and (max-width: @screen-sm) {
|
110 | .@{pro-layout-page-container}-detail {
|
111 | display: block;
|
112 | }
|
113 | .@{pro-layout-page-container}-extraContent {
|
114 | margin-left: 0;
|
115 | }
|
116 | }
|