_off-canvas.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. // Off canvas menus
  2. $off-canvas-breakpoint: $size-lg !default;
  3. .off-canvas {
  4. display: flex;
  5. flex-flow: nowrap;
  6. height: 100%;
  7. position: relative;
  8. width: 100%;
  9. .off-canvas-toggle {
  10. display: block;
  11. position: absolute;
  12. top: $layout-spacing;
  13. transition: none;
  14. z-index: $zindex-0;
  15. @if $rtl == true {
  16. right: $layout-spacing;
  17. } @else {
  18. left: $layout-spacing;
  19. }
  20. }
  21. .off-canvas-sidebar {
  22. background: $bg-color;
  23. bottom: 0;
  24. min-width: 10rem;
  25. overflow-y: auto;
  26. position: fixed;
  27. top: 0;
  28. transition: transform .25s ease;
  29. z-index: $zindex-2;
  30. @if $rtl == true {
  31. right: 0;
  32. transform: translateX(100%);
  33. } @else {
  34. left: 0;
  35. transform: translateX(-100%);
  36. }
  37. }
  38. .off-canvas-content {
  39. flex: 1 1 auto;
  40. height: 100%;
  41. padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
  42. }
  43. .off-canvas-overlay {
  44. background: rgba($dark-color, .1);
  45. border-color: transparent;
  46. border-radius: 0;
  47. bottom: 0;
  48. display: none;
  49. height: 100%;
  50. left: 0;
  51. position: fixed;
  52. right: 0;
  53. top: 0;
  54. width: 100%;
  55. }
  56. .off-canvas-sidebar {
  57. &:target,
  58. &.active {
  59. transform: translateX(0);
  60. }
  61. &:target ~ .off-canvas-overlay,
  62. &.active ~ .off-canvas-overlay {
  63. display: block;
  64. z-index: $zindex-1;
  65. }
  66. }
  67. }
  68. // Responsive layout
  69. @media (min-width: $off-canvas-breakpoint) {
  70. .off-canvas {
  71. &.off-canvas-sidebar-show {
  72. .off-canvas-toggle {
  73. display: none;
  74. }
  75. .off-canvas-sidebar {
  76. flex: 0 0 auto;
  77. position: relative;
  78. transform: none;
  79. }
  80. .off-canvas-overlay {
  81. display: none !important;
  82. }
  83. }
  84. }
  85. }