site.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. html, body {
  2. height: 100vh;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body {
  7. display: grid;
  8. grid-template-rows: auto 1fr;
  9. grid-template-columns: minmax(200px, 0.17fr) 1fr;
  10. grid-gap: 0;
  11. }
  12. body.hidden-aside {
  13. grid-template-columns: 0 auto;
  14. }
  15. body.hidden-aside aside {
  16. transform: translateX(-100%);
  17. opacity: 0;
  18. }
  19. body aside {
  20. position: relative;
  21. height: inherit;
  22. background-color: #f9f9f9;
  23. border-right: 1px solid #ddd;
  24. overflow-y: auto;
  25. transition: transform 0.3s ease, opacity 0.3s ease;
  26. transform: translateX(0);
  27. display: flex;
  28. -ms-flex-direction: inherit;
  29. -webkit-flex-direction: inherit;
  30. flex-direction: column;
  31. }
  32. body aside > ul.nav {
  33. flex-grow: 1;
  34. }
  35. body aside > ul.nav > li.nav-item:first-of-type > a {
  36. border-bottom: 1px solid #ddd;
  37. }
  38. body aside > ul.nav > li.nav-item:not(:first-of-type) {
  39. border-bottom: 1px solid #ddd;
  40. }
  41. body aside > ul.nav > li.nav-item:not(:first-of-type) > a:not(.collapsed) {
  42. background-color: #f1f1f1;
  43. }
  44. body aside > ul.nav > li.nav-item > ul {
  45. padding: 0.625rem 0.625rem 0.625rem 0;
  46. border-top: 1px solid #ddd;
  47. }
  48. body aside > ul.nav > li.nav-item a {
  49. display: block;
  50. padding: 0.438rem 0.781rem;
  51. color: #333;
  52. text-decoration: none;
  53. cursor: pointer;
  54. }
  55. body aside > ul.nav > li.nav-item a:hover {
  56. background-color: #f0f0f0;
  57. }
  58. body aside footer {
  59. padding: 0.781rem;
  60. text-align: center;
  61. border-top: 1px solid #ddd;
  62. }
  63. body main {
  64. background-color: #ffffff;
  65. }
  66. body main > header {
  67. border-bottom: 1px solid #ddd;
  68. padding: 0.313rem 0.781rem;
  69. }
  70. body main > header .logo img {
  71. position: relative;
  72. top: -2px;
  73. }
  74. body main > div.container-fluid {
  75. padding: 0.781rem;
  76. }