You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.5 KiB

8 months ago
  1. // stylelint-disable function-disallowed-list
  2. %offcanvas-css-vars {
  3. // scss-docs-start offcanvas-css-vars
  4. --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  5. --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  6. --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  7. --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  8. --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  9. --#{$prefix}offcanvas-color: #{$offcanvas-color};
  10. --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  11. --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  12. --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  13. --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
  14. --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
  15. --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
  16. // scss-docs-end offcanvas-css-vars
  17. }
  18. @each $breakpoint in map-keys($grid-breakpoints) {
  19. $next: breakpoint-next($breakpoint, $grid-breakpoints);
  20. $infix: breakpoint-infix($next, $grid-breakpoints);
  21. .offcanvas#{$infix} {
  22. @extend %offcanvas-css-vars;
  23. }
  24. }
  25. @each $breakpoint in map-keys($grid-breakpoints) {
  26. $next: breakpoint-next($breakpoint, $grid-breakpoints);
  27. $infix: breakpoint-infix($next, $grid-breakpoints);
  28. .offcanvas#{$infix} {
  29. @include media-breakpoint-down($next) {
  30. position: fixed;
  31. bottom: 0;
  32. z-index: var(--#{$prefix}offcanvas-zindex);
  33. display: flex;
  34. flex-direction: column;
  35. max-width: 100%;
  36. color: var(--#{$prefix}offcanvas-color);
  37. visibility: hidden;
  38. background-color: var(--#{$prefix}offcanvas-bg);
  39. background-clip: padding-box;
  40. outline: 0;
  41. @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
  42. @include transition(var(--#{$prefix}offcanvas-transition));
  43. &.offcanvas-start {
  44. top: 0;
  45. left: 0;
  46. width: var(--#{$prefix}offcanvas-width);
  47. border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  48. transform: translateX(-100%);
  49. }
  50. &.offcanvas-end {
  51. top: 0;
  52. right: 0;
  53. width: var(--#{$prefix}offcanvas-width);
  54. border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  55. transform: translateX(100%);
  56. }
  57. &.offcanvas-top {
  58. top: 0;
  59. right: 0;
  60. left: 0;
  61. height: var(--#{$prefix}offcanvas-height);
  62. max-height: 100%;
  63. border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  64. transform: translateY(-100%);
  65. }
  66. &.offcanvas-bottom {
  67. right: 0;
  68. left: 0;
  69. height: var(--#{$prefix}offcanvas-height);
  70. max-height: 100%;
  71. border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
  72. transform: translateY(100%);
  73. }
  74. &.showing,
  75. &.show:not(.hiding) {
  76. transform: none;
  77. }
  78. &.showing,
  79. &.hiding,
  80. &.show {
  81. visibility: visible;
  82. }
  83. }
  84. @if not ($infix == "") {
  85. @include media-breakpoint-up($next) {
  86. --#{$prefix}offcanvas-height: auto;
  87. --#{$prefix}offcanvas-border-width: 0;
  88. background-color: transparent !important; // stylelint-disable-line declaration-no-important
  89. .offcanvas-header {
  90. display: none;
  91. }
  92. .offcanvas-body {
  93. display: flex;
  94. flex-grow: 0;
  95. padding: 0;
  96. overflow-y: visible;
  97. // Reset `background-color` in case `.bg-*` classes are used in offcanvas
  98. background-color: transparent !important; // stylelint-disable-line declaration-no-important
  99. }
  100. }
  101. }
  102. }
  103. }
  104. .offcanvas-backdrop {
  105. @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
  106. }
  107. .offcanvas-header {
  108. display: flex;
  109. align-items: center;
  110. padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
  111. .btn-close {
  112. padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
  113. margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
  114. }
  115. }
  116. .offcanvas-title {
  117. margin-bottom: 0;
  118. line-height: var(--#{$prefix}offcanvas-title-line-height);
  119. }
  120. .offcanvas-body {
  121. flex-grow: 1;
  122. padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
  123. overflow-y: auto;
  124. }