1 | @root-entry-name: 'default';
|
2 | @import (reference) '~antd/es/style/themes/index.less';
|
3 | @import (reference) '../../BasicLayout.less';
|
4 |
|
5 | @pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
|
6 |
|
7 | @nav-header-height: @pro-layout-header-height;
|
8 |
|
9 | .@{pro-layout-sider-menu-prefix-cls} {
|
10 | position: relative;
|
11 | background-color: @layout-sider-background;
|
12 | border-right: 0;
|
13 |
|
14 |
|
15 | .@{ant-prefix}-menu {
|
16 | background: transparent;
|
17 | }
|
18 |
|
19 | &.@{ant-prefix}-layout-sider-light {
|
20 | .@{ant-prefix}-menu-item a {
|
21 | color: @heading-color;
|
22 | }
|
23 | .@{ant-prefix}-menu-item-selected a,
|
24 | .@{ant-prefix}-menu-item a:hover {
|
25 | color: @primary-color;
|
26 | }
|
27 | }
|
28 |
|
29 | &-logo {
|
30 | position: relative;
|
31 | display: flex;
|
32 | align-items: center;
|
33 | padding: 16px 16px;
|
34 | cursor: pointer;
|
35 | transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
36 |
|
37 | > a {
|
38 | display: flex;
|
39 | align-items: center;
|
40 | justify-content: center;
|
41 | min-height: 32px;
|
42 | }
|
43 |
|
44 | img {
|
45 | display: inline-block;
|
46 | height: 32px;
|
47 | vertical-align: middle;
|
48 | }
|
49 |
|
50 | h1 {
|
51 | display: inline-block;
|
52 | height: 32px;
|
53 | margin: 0 0 0 12px;
|
54 | color: white;
|
55 | font-weight: 600;
|
56 | font-size: 18px;
|
57 | line-height: 32px;
|
58 | vertical-align: middle;
|
59 | animation: pro-layout-title-hide 0.3s;
|
60 | }
|
61 | }
|
62 |
|
63 | &-extra {
|
64 | margin-bottom: 16px;
|
65 | padding: 0 16px;
|
66 | &-no-logo {
|
67 | margin-top: 16px;
|
68 | }
|
69 | }
|
70 |
|
71 | &-menu {
|
72 | position: relative;
|
73 | z-index: 10;
|
74 | min-height: 100%;
|
75 | box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
76 | }
|
77 |
|
78 | .@{ant-prefix}-layout-sider-children {
|
79 | display: flex;
|
80 | flex-direction: column;
|
81 | height: 100%;
|
82 |
|
83 | ::-webkit-scrollbar {
|
84 | width: 6px;
|
85 | height: 6px;
|
86 | }
|
87 |
|
88 | ::-webkit-scrollbar-track {
|
89 | background: rgba(255, 255, 255, 0.15);
|
90 | border-radius: 3px;
|
91 | box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
|
92 | }
|
93 |
|
94 |
|
95 | ::-webkit-scrollbar-thumb {
|
96 | background: rgba(255, 255, 255, 0.2);
|
97 | border-radius: 3px;
|
98 | box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
|
99 | }
|
100 | }
|
101 |
|
102 | &.@{ant-prefix}-layout-sider-collapsed {
|
103 | .@{ant-prefix}-menu-inline-collapsed {
|
104 | width: 48px;
|
105 | }
|
106 | .@{pro-layout-sider-menu-prefix-cls} {
|
107 | &-logo {
|
108 | padding: 16px 8px;
|
109 | }
|
110 | }
|
111 | }
|
112 |
|
113 | &.@{ant-prefix}-layout-sider.@{pro-layout-sider-menu-prefix-cls}-fixed {
|
114 | position: fixed;
|
115 | top: 0;
|
116 | left: 0;
|
117 | z-index: 100;
|
118 | height: 100%;
|
119 | overflow: auto;
|
120 | overflow-x: hidden;
|
121 | box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
122 | > .@{ant-prefix}-menu-root {
|
123 | :not(.@{pro-layout-sider-menu-prefix-cls}-link-menu) {
|
124 | height: ~'calc(100vh - @{nav-header-height})';
|
125 | overflow-y: auto;
|
126 | }
|
127 | }
|
128 | }
|
129 |
|
130 | &-light {
|
131 | background-color: @component-background;
|
132 | box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
133 |
|
134 | .@{ant-prefix}-layout-sider-children {
|
135 | ::-webkit-scrollbar-track {
|
136 | background: rgba(0, 0, 0, 0.06);
|
137 | border-radius: 3px;
|
138 | box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
|
139 | }
|
140 |
|
141 |
|
142 | ::-webkit-scrollbar-thumb {
|
143 | background: rgba(0, 0, 0, 0.12);
|
144 | border-radius: 3px;
|
145 | box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
|
146 | }
|
147 | }
|
148 |
|
149 | .@{pro-layout-sider-menu-prefix-cls}-logo {
|
150 | h1 {
|
151 | color: @primary-color;
|
152 | }
|
153 | }
|
154 | .@{ant-prefix}-menu-light {
|
155 | border-right-color: transparent;
|
156 | }
|
157 |
|
158 | .@{pro-layout-sider-menu-prefix-cls}-collapsed-button {
|
159 | border-top: @border-width-base @border-style-base @border-color-split;
|
160 | }
|
161 | }
|
162 |
|
163 | &-icon {
|
164 | width: 14px;
|
165 | vertical-align: baseline;
|
166 | }
|
167 |
|
168 | &-links {
|
169 | width: 100%;
|
170 | ul.@{ant-prefix}-menu-root {
|
171 | height: auto;
|
172 | }
|
173 | }
|
174 |
|
175 | &-collapsed-button {
|
176 | border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.25);
|
177 | .anticon {
|
178 | font-size: 16px;
|
179 | }
|
180 | }
|
181 |
|
182 | .top-nav-menu li.@{ant-prefix}-menu-item {
|
183 | height: 100%;
|
184 | line-height: 1;
|
185 | }
|
186 | .drawer .drawer-content {
|
187 | background: @layout-sider-background;
|
188 | }
|
189 | }
|
190 |
|
191 | @keyframes pro-layout-title-hide {
|
192 | 0% {
|
193 | display: none;
|
194 | opacity: 0;
|
195 | }
|
196 | 80% {
|
197 | display: none;
|
198 | opacity: 0;
|
199 | }
|
200 | 100% {
|
201 | display: unset;
|
202 | opacity: 1;
|
203 | }
|
204 | }
|