1 | @root-entry-name: 'default';
|
2 | @import (reference) '~antd/es/style/themes/index.less';
|
3 |
|
4 | @ant-pro-setting-drawer: ~'@{ant-prefix}-pro-setting-drawer';
|
5 |
|
6 | .@{ant-pro-setting-drawer} {
|
7 | &-content {
|
8 | position: relative;
|
9 | min-height: 100%;
|
10 | .@{ant-prefix}-list-item {
|
11 | span {
|
12 | flex: 1;
|
13 | }
|
14 | }
|
15 | }
|
16 |
|
17 | &-block-checkbox {
|
18 | display: flex;
|
19 | &-item {
|
20 | position: relative;
|
21 | width: 44px;
|
22 | height: 36px;
|
23 | margin-right: 16px;
|
24 | overflow: hidden;
|
25 | background-color: #f0f2f5;
|
26 | border-radius: 4px;
|
27 | box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
|
28 | cursor: pointer;
|
29 |
|
30 | &::before {
|
31 | position: absolute;
|
32 | top: 0;
|
33 | left: 0;
|
34 | width: 33%;
|
35 | height: 100%;
|
36 | background-color: #fff;
|
37 | content: '';
|
38 | }
|
39 | &::after {
|
40 | position: absolute;
|
41 | top: 0;
|
42 | left: 0;
|
43 | width: 100%;
|
44 | height: 25%;
|
45 | background-color: #fff;
|
46 | content: '';
|
47 | }
|
48 |
|
49 | &-realDark {
|
50 | background-color: fade(@menu-dark-bg, 85%);
|
51 | &::before {
|
52 | background-color: fade(@menu-dark-bg, 65%);
|
53 | content: '';
|
54 | }
|
55 | &::after {
|
56 | background-color: fade(@menu-dark-bg, 85%);
|
57 | }
|
58 | }
|
59 |
|
60 |
|
61 | &-light {
|
62 | &::before {
|
63 | background-color: @white;
|
64 | content: '';
|
65 | }
|
66 | &::after {
|
67 | background-color: @white;
|
68 | }
|
69 | }
|
70 |
|
71 |
|
72 | &-dark,
|
73 |
|
74 | &-side {
|
75 | &::before {
|
76 | z-index: 1;
|
77 | background-color: @menu-dark-bg;
|
78 | content: '';
|
79 | }
|
80 | &::after {
|
81 | background-color: @white;
|
82 | }
|
83 | }
|
84 |
|
85 |
|
86 | &-top {
|
87 | &::before {
|
88 | background-color: transparent;
|
89 | content: '';
|
90 | }
|
91 | &::after {
|
92 | background-color: @menu-dark-bg;
|
93 | }
|
94 | }
|
95 |
|
96 |
|
97 | &-mix {
|
98 | &::before {
|
99 | background-color: @white;
|
100 | content: '';
|
101 | }
|
102 | &::after {
|
103 | background-color: @menu-dark-bg;
|
104 | }
|
105 | }
|
106 | }
|
107 | &-selectIcon {
|
108 | position: absolute;
|
109 | right: 6px;
|
110 | bottom: 4px;
|
111 | color: @primary-color;
|
112 | font-weight: bold;
|
113 | font-size: 14px;
|
114 | pointer-events: none;
|
115 | .action {
|
116 | color: @primary-color;
|
117 | }
|
118 | }
|
119 | }
|
120 |
|
121 | &-color_block {
|
122 | display: inline-block;
|
123 | width: 38px;
|
124 | height: 22px;
|
125 | margin: 4px;
|
126 | margin-right: 12px;
|
127 | vertical-align: middle;
|
128 | border-radius: 4px;
|
129 | cursor: pointer;
|
130 | }
|
131 |
|
132 | &-title {
|
133 | margin-bottom: 12px;
|
134 | color: @heading-color;
|
135 | font-size: 14px;
|
136 | line-height: 22px;
|
137 | }
|
138 |
|
139 | &-handle {
|
140 | position: absolute;
|
141 | top: 240px;
|
142 | right: 300px;
|
143 | z-index: 0;
|
144 | display: flex;
|
145 | align-items: center;
|
146 | justify-content: center;
|
147 | width: 48px;
|
148 | height: 48px;
|
149 | font-size: 16px;
|
150 | text-align: center;
|
151 | background-color: @primary-color;
|
152 | border-radius: 4px 0 0 4px;
|
153 | cursor: pointer;
|
154 | pointer-events: auto;
|
155 | }
|
156 |
|
157 | &-production-hint {
|
158 | margin-top: 16px;
|
159 | font-size: 12px;
|
160 | }
|
161 | }
|