page-aside-fixed.css 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .page-aside-fix .page-aside .page-aside-inner {
  2. position: fixed !important;
  3. top: 66px;
  4. bottom: 0;
  5. width: 260px;
  6. overflow-y: scroll;
  7. background-color: #fff;
  8. transition: top .5s ease, left .5s ease, width .5s ease, opacity .3s ease;
  9. }
  10. .page-aside-fix .page-aside .page-aside-section .list-group-item.active, .page-aside-fix .page-aside .page-aside-section .list-group-item.active:focus, .page-aside-fix .page-aside .page-aside-section .list-group-item.active:hover {
  11. z-index: auto;
  12. }
  13. .page-aside-fix + .site-footer {
  14. margin-left: 260px;
  15. }
  16. .site-menubar-unfold .page-aside-fix + .site-footer {
  17. margin-left: 520px;
  18. }
  19. .site-menubar-fold .page-aside-fix + .site-footer {
  20. margin-left: 350px;
  21. }
  22. @media (max-width: 1199px) {
  23. .page-aside-fix .page-aside {
  24. width: 220px;
  25. }
  26. .page-aside-fix .page-aside .page-aside-inner {
  27. width: 220px;
  28. }
  29. .page-aside-fix + .site-footer {
  30. margin-left: 220px;
  31. }
  32. .site-menubar-unfold .page-aside-fix + .site-footer {
  33. margin-left: 480px;
  34. }
  35. .site-menubar-fold .page-aside-fix + .site-footer {
  36. margin-left: 310px;
  37. }
  38. }
  39. @media (max-width: 767px) {
  40. .page-aside-fix .page-aside {
  41. width: 0;
  42. }
  43. .page-aside-fix .page-aside .page-aside-inner {
  44. position: absolute;
  45. left: -220px;
  46. z-index: 0;
  47. width: 220px;
  48. }
  49. .page-aside-fix .page-aside.open {
  50. width: 220px;
  51. }
  52. .page-aside-fix .page-aside.open .page-aside-inner {
  53. left: 0;
  54. }
  55. .page-aside-fix .page-aside .page-aside-switch {
  56. z-index: 1;
  57. }
  58. .page-aside-fix + .site-footer {
  59. margin-left: 0 !important;
  60. }
  61. }