| 提交 | 用户 | age | ||
| 2f6253 | 1 | @import (reference) '../../../design/index.less'; |
| 陈 | 2 | |
| 66acb2 | 3 | .active-style() { |
| V | 4 | color: @white; |
| 5 | background: linear-gradient( | |
| 6 | 118deg, | |
| 770283 | 7 | rgba(@primary-color, 0.8), |
| 66acb2 | 8 | rgba(@primary-color, 1) |
| V | 9 | ) !important; |
| 10 | } | |
| 11 | ||
| 2f6253 | 12 | .active-menu-style() { |
| 陈 | 13 | .ant-menu-item-selected, |
| 14 | .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { | |
| 66acb2 | 15 | .active-style(); |
| 2f6253 | 16 | } |
| 陈 | 17 | } |
| 18 | ||
| 19 | .basic-menu { | |
| 66acb2 | 20 | width: 100%; |
| V | 21 | |
| 96c10d | 22 | &-wrap { |
| V | 23 | height: 100%; |
| 24 | } | |
| 25 | ||
| 26 | // collapsed show title start | |
| 27 | .show-title { | |
| 28 | max-width: unset !important; | |
| 29 | opacity: 1 !important; | |
| 30 | } | |
| 31 | ||
| 5737e4 | 32 | &.collapsed-show-title.ant-menu-inline-collapsed { |
| 66acb2 | 33 | .basic-menu-item__level1 { |
| V | 34 | padding: 2px 0; |
| 35 | } | |
| 36 | ||
| 96c10d | 37 | & > li[role='menuitem']:not(.ant-menu-submenu), |
| 5737e4 | 38 | & > li > .ant-menu-submenu-title { |
| V | 39 | display: flex; |
| 96c10d | 40 | margin-top: 10px; |
| 5737e4 | 41 | font-size: 12px; |
| V | 42 | flex-direction: column; |
| 770283 | 43 | align-items: center; |
| 4f6b65 | 44 | line-height: 24px; |
| 5737e4 | 45 | } |
| e3cbc9 | 46 | |
| 96c10d | 47 | & > li > .ant-menu-submenu-title { |
| V | 48 | line-height: 24px; |
| e3cbc9 | 49 | } |
| 5737e4 | 50 | } |
| V | 51 | |
| 96c10d | 52 | // collapsed show title end |
| bda3e5 | 53 | .ant-menu-submenu-title { |
| V | 54 | > .basic-menu__name { |
| 7692ff | 55 | .basic-menu__tag { |
| V | 56 | float: right; |
| 57 | margin-top: @app-menu-item-height / 2; | |
| 58 | transform: translate(0%, -50%); | |
| 59 | } | |
| bda3e5 | 60 | } |
| V | 61 | } |
| 96c10d | 62 | |
| bda3e5 | 63 | .ant-menu-item { |
| V | 64 | transition: unset; |
| 65 | ||
| 66 | > .basic-menu__name { | |
| 67 | .basic-menu__tag { | |
| 68 | float: right; | |
| 69 | margin-top: @app-menu-item-height / 2; | |
| 70 | transform: translate(0%, -50%); | |
| 71 | } | |
| 72 | } | |
| a3887f | 73 | } |
| V | 74 | |
| 75 | &__tag { | |
| 76 | display: inline-block; | |
| 77 | padding: 2px 4px; | |
| 78 | margin-right: 4px; | |
| 79 | font-size: 12px; | |
| 80 | line-height: 14px; | |
| 81 | color: #fff; | |
| 82 | border-radius: 2px; | |
| 83 | ||
| 84 | &.dot { | |
| 85 | width: 8px; | |
| 86 | height: 8px; | |
| 87 | padding: 0; | |
| 88 | border-radius: 50%; | |
| 89 | } | |
| 90 | ||
| 91 | &.primary { | |
| 92 | background: @primary-color; | |
| 93 | } | |
| 94 | ||
| 95 | &.error { | |
| 96 | background: @error-color; | |
| 97 | } | |
| 98 | ||
| 99 | &.success { | |
| 100 | background: @success-color; | |
| 101 | } | |
| 102 | ||
| 103 | &.warn { | |
| 104 | background: @warning-color; | |
| 105 | } | |
| 106 | } | |
| 96c10d | 107 | // scrollbar -s tart |
| V | 108 | &__content { |
| 31e271 | 109 | /* 滚动槽 */ |
| V | 110 | &::-webkit-scrollbar { |
| 96c10d | 111 | width: 4px; |
| V | 112 | height: 4px; |
| 31e271 | 113 | } |
| V | 114 | |
| 115 | &::-webkit-scrollbar-track { | |
| 116 | background: rgba(0, 0, 0, 0); | |
| 117 | } | |
| 118 | ||
| 119 | &::-webkit-scrollbar-thumb { | |
| 96c10d | 120 | background: rgba(255, 255, 255, 0.2); |
| V | 121 | border-radius: 3px; |
| 31e271 | 122 | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); |
| V | 123 | } |
| 124 | ||
| 125 | ::-webkit-scrollbar-thumb:hover { | |
| 126 | background: @border-color-dark; | |
| 127 | } | |
| 128 | } | |
| 96c10d | 129 | // scrollbar end |
| 31e271 | 130 | |
| 96c10d | 131 | &__sidebar-hor { |
| V | 132 | // overflow: hidden; |
| 770283 | 133 | |
| 2f6253 | 134 | &.ant-menu-horizontal { |
| 陈 | 135 | display: flex; |
| 136 | border: 0; | |
| 137 | align-items: center; | |
| 138 | ||
| 139 | .basic-menu-item__level1 { | |
| 140 | margin-right: 2px; | |
| 141 | } | |
| 142 | ||
| 143 | &.ant-menu-light { | |
| 96c10d | 144 | .basic-menu-item__level1 { |
| V | 145 | &.top-active-menu { |
| 146 | color: @primary-color; | |
| 147 | border-bottom: 3px solid @primary-color; | |
| 148 | } | |
| 149 | } | |
| 150 | ||
| 2f6253 | 151 | .ant-menu-item { |
| 陈 | 152 | &.basic-menu-item__level1 { |
| 770283 | 153 | height: @header-height; |
| V | 154 | line-height: @header-height; |
| 2f6253 | 155 | } |
| 陈 | 156 | } |
| 157 | ||
| 158 | .ant-menu-submenu:hover, | |
| 159 | .ant-menu-item-open, | |
| 160 | .ant-menu-submenu-open, | |
| 161 | .ant-menu-item-selected, | |
| 770283 | 162 | .ant-menu-submenu-selected, |
| 2f6253 | 163 | .ant-menu-item:hover, |
| 陈 | 164 | .ant-menu-item-active, |
| 165 | .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, | |
| 166 | .ant-menu-submenu-active, | |
| 167 | .ant-menu-submenu-title:hover { | |
| 349d19 | 168 | color: @primary-color !important; |
| 2f6253 | 169 | border-bottom: 3px solid @primary-color; |
| 陈 | 170 | } |
| 171 | ||
| 172 | .ant-menu-submenu { | |
| 173 | &:hover { | |
| 174 | border-bottom: 3px solid @primary-color; | |
| 175 | } | |
| 176 | ||
| 177 | &.ant-menu-selected, | |
| 178 | &.ant-menu-submenu-selected { | |
| 179 | border-bottom: 3px solid @primary-color; | |
| 180 | } | |
| 181 | } | |
| 182 | } | |
| 183 | ||
| 184 | &.ant-menu-dark { | |
| 185 | background: transparent; | |
| 186 | ||
| 96c10d | 187 | .ant-menu-submenu:hover, |
| V | 188 | .ant-menu-item-open, |
| 189 | .ant-menu-submenu-open, | |
| 190 | .ant-menu-item-selected, | |
| 191 | .ant-menu-submenu-selected, | |
| 192 | .ant-menu-item:hover, | |
| 193 | .ant-menu-item-active, | |
| 194 | .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, | |
| 195 | .ant-menu-submenu-active, | |
| 196 | .ant-menu-submenu-title:hover { | |
| 197 | color: #fff; | |
| 198 | background: @top-menu-active-bg-color !important; | |
| 199 | } | |
| 200 | ||
| 2f6253 | 201 | .ant-menu-item:hover, |
| 陈 | 202 | .ant-menu-item-active, |
| 203 | .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, | |
| 204 | .ant-menu-submenu-active, | |
| 205 | .ant-menu-submenu-title:hover { | |
| 206 | background: @top-menu-active-bg-color; | |
| 207 | } | |
| 208 | ||
| 209 | .basic-menu-item__level1 { | |
| 96c10d | 210 | background: transparent; |
| V | 211 | |
| 212 | &.top-active-menu { | |
| 213 | color: @white; | |
| 214 | background: @top-menu-active-bg-color; | |
| 215 | border-radius: 2px 2px 0 0; | |
| 216 | } | |
| 217 | ||
| 2f6253 | 218 | &.ant-menu-item-selected, |
| 陈 | 219 | &.ant-menu-submenu-selected { |
| 96c10d | 220 | background: @top-menu-active-bg-color !important; |
| 2f6253 | 221 | } |
| 陈 | 222 | } |
| 223 | ||
| 96c10d | 224 | .ant-menu-item, |
| 2f6253 | 225 | .ant-menu-submenu { |
| 陈 | 226 | &.basic-menu-item__level1, |
| 227 | .ant-menu-submenu-title { | |
| 228 | height: @header-height; | |
| 229 | line-height: @header-height; | |
| 230 | } | |
| 231 | } | |
| 232 | } | |
| 233 | } | |
| 234 | } | |
| 235 | ||
| 4f6b65 | 236 | &:not(.basic-menu__sidebar-hor).ant-menu-inline-collapsed { |
| V | 237 | .basic-menu-item__level1 { |
| 238 | > div { | |
| 239 | align-items: center; | |
| 240 | } | |
| 241 | } | |
| 242 | } | |
| 243 | ||
| 96c10d | 244 | &.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) { |
| V | 245 | // Reset menu item row height |
| 4f6b65 | 246 | .ant-menu-item:not(.basic-menu-item__level1), |
| 96c10d | 247 | .ant-menu-sub.ant-menu-inline > .ant-menu-item, |
| V | 248 | .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { |
| 249 | height: @app-menu-item-height; | |
| 250 | margin: 0; | |
| 251 | line-height: @app-menu-item-height; | |
| 252 | } | |
| 2f6253 | 253 | } |
| 陈 | 254 | |
| 255 | // 层级样式 | |
| 96c10d | 256 | &.ant-menu-dark:not(.basic-menu__sidebar-hor) { |
| V | 257 | overflow-x: hidden; |
| 7692ff | 258 | background: @sider-dark-bg-color; |
| 96c10d | 259 | .active-menu-style(); |
| 2f6253 | 260 | |
| 陈 | 261 | .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1, |
| 262 | .ant-menu-submenu-selected.basic-menu-menu-item__level1 { | |
| 263 | color: @white; | |
| 264 | } | |
| 265 | ||
| 266 | .basic-menu-item__level1 { | |
| 7692ff | 267 | background-color: @sider-dark-bg-color; |
| 66acb2 | 268 | |
| 31e271 | 269 | > .ant-menu-sub > li { |
| 7692ff | 270 | background-color: @sider-dark-lighten-1-bg-color; |
| 31e271 | 271 | } |
| 2f6253 | 272 | } |
| 陈 | 273 | |
| 7c4dd2 | 274 | .basic-menu-item__level2:not(.ant-menu-item-selected), |
| N | 275 | .ant-menu-sub { |
| 7692ff | 276 | background-color: @sider-dark-lighten-1-bg-color; |
| 2f6253 | 277 | } |
| 陈 | 278 | |
| 279 | .basic-menu-item__level3:not(.ant-menu-item-selected) { | |
| 7692ff | 280 | background-color: @sider-dark-lighten-2-bg-color; |
| 2f6253 | 281 | } |
| 陈 | 282 | |
| 283 | .ant-menu-submenu-title { | |
| 70fba7 | 284 | display: flex; |
| V | 285 | height: @app-menu-item-height; |
| 96c10d | 286 | // margin: 0; |
| 70fba7 | 287 | align-items: center; |
| V | 288 | } |
| 289 | ||
| 290 | &.ant-menu-inline-collapsed { | |
| 5cff73 | 291 | .ant-menu-submenu-selected, |
| V | 292 | .ant-menu-item-selected { |
| 7692ff | 293 | background: @sider-dark-darken-bg-color !important; |
| 5cff73 | 294 | } |
| 2f6253 | 295 | } |
| 陈 | 296 | } |
| 297 | ||
| 96c10d | 298 | &.ant-menu-light:not(.basic-menu__sidebar-hor) { |
| 770283 | 299 | overflow-x: hidden; |
| V | 300 | border-right: none; |
| 301 | ||
| 96c10d | 302 | // .ant-menu-item-selected { |
| V | 303 | // background: fade(@primary-color, 18%); |
| 304 | // } | |
| 2f6253 | 305 | |
| 陈 | 306 | .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1, |
| 307 | .ant-menu-submenu-selected.basic-menu-menu-item__level1 { | |
| 308 | color: @primary-color; | |
| 309 | } | |
| 310 | } | |
| 311 | ||
| 312 | // 关键字的颜色 | |
| 313 | &__keyword { | |
| 314 | color: lighten(@primary-color, 20%); | |
| 315 | } | |
| 316 | ||
| 317 | // 激活的子菜单样式 | |
| 318 | .ant-menu-item.ant-menu-item-selected { | |
| 319 | position: relative; | |
| 96c10d | 320 | } |
| V | 321 | |
| 322 | &.basic-menu__second.ant-menu-inline-collapsed:not(.basic-menu__sidebar-hor) { | |
| 323 | // Reset menu item row height | |
| 324 | .ant-menu-item, | |
| 325 | .ant-menu-sub.ant-menu-inline > .ant-menu-item, | |
| 326 | .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { | |
| 327 | display: flex; | |
| 328 | height: @app-menu-item-height * 1.4; | |
| 329 | padding: 6px 0 !important; | |
| 330 | margin: 0; | |
| 331 | line-height: @app-menu-item-height; | |
| 332 | align-items: center; | |
| 333 | } | |
| 2f6253 | 334 | } |
| 陈 | 335 | } |
| 336 | ||
| 337 | // 触发器样式 | |
| 338 | .ant-layout-sider { | |
| 339 | &-dark { | |
| 340 | .ant-layout-sider-trigger { | |
| 341 | color: darken(@white, 25%); | |
| 342 | background: @trigger-dark-bg-color; | |
| 343 | ||
| 344 | &:hover { | |
| 345 | color: @white; | |
| 346 | background: @trigger-dark-hover-bg-color; | |
| 347 | } | |
| 348 | } | |
| 349 | } | |
| 350 | ||
| 351 | &-light { | |
| 352 | .ant-layout-sider-trigger { | |
| 353 | color: @text-color-base; | |
| 770283 | 354 | border-top: 1px solid @border-color-light; |
| 2f6253 | 355 | } |
| 陈 | 356 | } |
| 357 | } | |
| 358 | ||
| 359 | .ant-menu-dark { | |
| 360 | &.ant-menu-submenu-popup { | |
| 361 | > ul { | |
| 7692ff | 362 | background: @sider-dark-bg-color; |
| 2f6253 | 363 | } |
| 陈 | 364 | |
| 365 | .active-menu-style(); | |
| 366 | } | |
| 367 | } | |
| 96c10d | 368 | |
| V | 369 | .hide-title { |
| 370 | .ant-menu-inline-collapsed > .ant-menu-item, | |
| 371 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, | |
| 372 | .ant-menu-inline-collapsed | |
| 373 | > .ant-menu-item-group | |
| 374 | > .ant-menu-item-group-list | |
| 375 | > .ant-menu-submenu | |
| 376 | > .ant-menu-submenu-title, | |
| 377 | .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title { | |
| 378 | padding-right: 20px !important; | |
| 379 | padding-left: 20px !important; | |
| 380 | } | |
| 381 | ||
| 382 | .ant-menu-inline-collapsed { | |
| 383 | .basic-menu-item__level1 { | |
| 384 | display: flex; | |
| 385 | justify-content: center; | |
| 386 | } | |
| 387 | } | |
| 388 | } | |
