index.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. @import '~antd/lib/style/themes/default.less';
  2. @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
  3. .logo {
  4. height: 64px;
  5. position: relative;
  6. line-height: 64px;
  7. padding-left: (@menu-collapsed-width - 32px) / 2;
  8. transition: all 0.3s;
  9. background: #002140;
  10. overflow: hidden;
  11. img {
  12. display: inline-block;
  13. vertical-align: middle;
  14. height: 32px;
  15. }
  16. h1 {
  17. color: white;
  18. display: inline-block;
  19. vertical-align: middle;
  20. font-size: 20px;
  21. margin: 0 0 0 12px;
  22. font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  23. font-weight: 600;
  24. }
  25. }
  26. .sider {
  27. min-height: 100vh;
  28. box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  29. position: relative;
  30. z-index: 10;
  31. &.light {
  32. background-color: white;
  33. .logo {
  34. background: white;
  35. border-bottom: 1px solid @border-color-split;
  36. h1 {
  37. color: @primary-color;
  38. }
  39. }
  40. }
  41. }
  42. .icon {
  43. width: 14px;
  44. margin-right: 10px;
  45. }
  46. :global {
  47. .drawer .drawer-content {
  48. background: #001529;
  49. }
  50. .ant-menu-inline-collapsed {
  51. & > .ant-menu-item .sider-menu-item-img + span,
  52. &
  53. > .ant-menu-item-group
  54. > .ant-menu-item-group-list
  55. > .ant-menu-item
  56. .sider-menu-item-img
  57. + span,
  58. & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
  59. max-width: 0;
  60. display: inline-block;
  61. opacity: 0;
  62. }
  63. }
  64. .ant-menu-item .sider-menu-item-img + span,
  65. .ant-menu-submenu-title .sider-menu-item-img + span {
  66. transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
  67. opacity: 1;
  68. }
  69. }