BasicLayout.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. @import "~antd/lib/style/themes/default.less";
  2. .header {
  3. padding: 0 12px 0 0;
  4. background: #fff;
  5. box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  6. position: relative;
  7. }
  8. .logo {
  9. height: 64px;
  10. position: relative;
  11. line-height: 64px;
  12. padding-left: (@menu-collapsed-width - 32px) / 2;
  13. transition: all .3s;
  14. background: #002140;
  15. overflow: hidden;
  16. img {
  17. display: inline-block;
  18. vertical-align: middle;
  19. height: 32px;
  20. }
  21. h1 {
  22. color: #fff;
  23. display: inline-block;
  24. vertical-align: middle;
  25. font-size: 20px;
  26. margin: 0 0 0 12px;
  27. font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  28. font-weight: 600;
  29. }
  30. }
  31. .trigger {
  32. font-size: 20px;
  33. line-height: 64px;
  34. cursor: pointer;
  35. transition: all .3s;
  36. padding: 0 24px;
  37. &:hover {
  38. background: @primary-1;
  39. }
  40. }
  41. @media screen and (max-width: @screen-xs) {
  42. .trigger {
  43. display: none;
  44. }
  45. }
  46. .right {
  47. float: right;
  48. height: 100%;
  49. .action {
  50. cursor: pointer;
  51. padding: 0 12px;
  52. display: inline-block;
  53. transition: all .3s;
  54. height: 100%;
  55. > i {
  56. font-size: 16px;
  57. vertical-align: middle;
  58. }
  59. &:global(.ant-popover-open),
  60. &:hover {
  61. background: @primary-1;
  62. }
  63. }
  64. .search {
  65. padding: 0;
  66. margin: 0 12px;
  67. &:hover {
  68. background: transparent;
  69. }
  70. }
  71. .account {
  72. .avatar {
  73. margin: 20px 8px 20px 0;
  74. color: @primary-color;
  75. background: rgba(255, 255, 255, .85);
  76. vertical-align: middle;
  77. }
  78. }
  79. }
  80. .menu {
  81. :global(.anticon) {
  82. margin-right: 8px;
  83. }
  84. :global(.ant-dropdown-menu-item) {
  85. width: 160px;
  86. }
  87. }
  88. :global {
  89. .ant-layout {
  90. overflow-x: hidden;
  91. }
  92. }
  93. .sider {
  94. min-height: 100vh;
  95. box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  96. position: relative;
  97. z-index: 10;
  98. }