@design-factory/design-factory 15.2.3 → 16.0.0

package/styles/scss/components/pagination/_pagination.scss

@@ -1,63 +1,39 @@
-@mixin df-pagination-size($size, $border-radius, $font-size, $icon-left-offset, $transformX-offset) {
-  .page-item {
-    .page-link {
-      height: $size;
-      min-width: $size;
-      border-radius: $border-radius;
-      line-height: $size;
-      font-size: $font-size;
-    }
-    .page-link[aria-label] {
-      span:after {
-        font-size: $font-size !important; // needs to override the styles of @extend %df-icon-style;
-        @include ltr {
-          left: $icon-left-offset !important; // needs to override the styles of @extend %df-icon-style;
-          transform: translateX($transformX-offset);
-        }
-        @include rtl {
-          right: $icon-left-offset !important;
-          transform: translateX(-$transformX-offset);
-        }
-        line-height: $size !important;
-        // needs to override the styles of @extend %df-icon-style;
-      }
-    }
-  }
-  .page-item + .page-item {
-    @include ltr {
-      margin-left: $df-pagination-between-list-item-space;
-    }
-    @include rtl {
-      margin-right: $df-pagination-between-list-item-space;
-    }
-  }
-}
 @mixin replace-span-innertext-with-icon($iconContent) {
   .page-link[aria-label] {
-    border-radius: $df-pagination-direction-border-radius;
-    span {
-      font-size: 0px; // use this trick because visibility: hidden is not working correctly on IE (it also hides the :after content)
-      text-decoration: none;
-    }
     span:after {
-      color: $df-pagination-icon-color;
-      @extend %df-icon-style;
-      position: absolute;
       content: $iconContent;
     }
   }
 }
 
-.df-custom-pages-input {
-  min-width: $df-custom-pages-input-minwidth;
-}
-
 .pagination {
-  --df-pagination-focus-color: var(--df-pagination-color);
-  --df-pagination-focus-bg: var(--df-pagination-bg);
-  margin-bottom: $df-pagination-margin-bottom;
+  --#{$prefix}pagination-size: #{$df-pagination-size-base};
+  --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-base};
+  --#{$prefix}pagination-item-font-size: #{$font-size-base};
+  --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-base};
+  --#{$prefix}pagination-icon-translateX-offset: #{$df-pagination-icon-translateX-offset};
+  --#{$prefix}pagination-between-list-item-space: #{$df-pagination-between-list-item-space};
+  --#{$prefix}custom-pages-sm-vertical-alignment: #{$df-custom-pages-sm-vertical-alignment};
+  --#{$prefix}pagination-direction-border-radius: #{$df-pagination-direction-border-radius};
+  --#{$prefix}pagination-margin-bottom: #{$df-pagination-margin-bottom};
+  --#{$prefix}pagination-icon-color: #{$df-pagination-icon-color};
+  
+  margin-bottom: var(--#{$prefix}pagination-margin-bottom);
   .page-item {
+    @if variable-exists($name: 'df-enableBranding2023') and $df-enableBranding2023 {
+      &.active > .page-link {
+        &:hover {
+          background-color: var(--#{$prefix}pagination-hover-bg);
+          color: var(--#{$prefix}pagination-hover-color);
+        }
+      }
+    }
     .page-link {
+      height: var(--#{$prefix}pagination-size);
+      min-width: var(--#{$prefix}pagination-size);
+      border-radius: var(--#{$prefix}pagination-item-border-radius);
+      line-height: var(--#{$prefix}pagination-size);
+      font-size: var(--#{$prefix}pagination-item-font-size);
       border: none;
       text-align: center;
       margin: 0 0.0625rem; // 0.0625rem = 1px with font-size=16
@@ -68,7 +44,7 @@
       &:focus {
         z-index: 2;
         &:hover {
-          --df-pagination-focus-bg: var(--df-pagination-hover-bg);
+          --#{$prefix}pagination-focus-bg: var(--#{$prefix}pagination-hover-bg);
         }
       }
       z-index: initial; // overides z-index: 2 so that it is below the active page link
@@ -77,6 +53,27 @@
       cursor: $df-pagination-disabled-cursor;
     }
     .page-link[aria-label] {
+      border-radius: var(--#{$prefix}pagination-direction-border-radius) !important;
+      span {
+        font-size: 0px; // use this trick because visibility: hidden is not working correctly on IE (it also hides the :after content)
+        text-decoration: none;
+        &:after {
+          color: var(--#{$prefix}pagination-icon-color);
+          @extend %df-icon-style;
+          position: absolute;
+          font-size: var(--#{$prefix}pagination-item-font-size) !important; // needs to override the styles of @extend %df-icon-style;
+          @include ltr {
+            left: var(--#{$prefix}pagination-icon-offset-start) !important; // needs to override the styles of @extend %df-icon-style;
+            transform: translateX(var(--#{$prefix}pagination-icon-translateX-offset));
+          }
+          @include rtl {
+            right: var(--#{$prefix}pagination-icon-offset-start) !important;
+            transform: translateX(calc(-1 * var(--#{$prefix}pagination-icon-translateX-offset)));
+          }
+          line-height: var(--#{$prefix}pagination-size) !important;
+          // needs to override the styles of @extend %df-icon-style;
+        }
+      }
       &:hover {
         span:after {
           text-decoration: underline;
@@ -90,8 +87,8 @@
   .page-item.disabled .page-link span:after {
     color: $pagination-disabled-color !important;
   }
-  // TODO: First Part When icons customization feature will be added to ngbootstrap, use it and remove following css
-  // Link to ngbootsrap issue : https://github.com/ng-bootstrap/ng-bootstrap/issues/899
+  // TODO: First Part When icons customization feature will be added to ng-bootstrap, use it and remove following css
+  // Link to ng-bootsrap issue : https://github.com/ng-bootstrap/ng-bootstrap/issues/899
   // css style to modify the arrow texts with DF icons
   // first case: boundaryLinks = false
   li.page-item:nth-of-type(1) {
@@ -110,45 +107,34 @@
       @include replace-span-innertext-with-icon($df-pagination-previous-icon-code);
     }
   }
-  // css style to handle the different sizes of pagination (sm, lg, ...)
-  @include df-pagination-size(
-    $df-pagination-size-base,
-    $df-pagination-border-radius-base,
-    $font-size-base,
-    $df-pagination-icon-left-offset-base,
-    $df-pagination-icon-translateX-offset
-  );
-  &.pagination-lg {
-    @include df-pagination-size(
-      $df-pagination-size-lg,
-      $df-pagination-border-radius-lg,
-      $font-size-lg,
-      $df-pagination-icon-left-offset-lg,
-      $df-pagination-icon-translateX-offset
-    );
-    .df-custom-pages-input {
-      min-width: $df-custom-pages-input-minwidth-lg;
+  .page-item + .page-item {
+    @include ltr {
+      margin-left: var(--#{$prefix}pagination-between-list-item-space);
+    }
+    @include rtl {
+      margin-right: var(--#{$prefix}pagination-between-list-item-space);
     }
   }
+  &.pagination-lg {
+    --#{$prefix}pagination-size: #{$df-pagination-size-lg};
+    --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-lg};
+    --#{$prefix}pagination-item-font-size: #{$font-size-lg};
+    --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-lg};
+    --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-lg};
+  }
 
   &.pagination-sm {
-    @include df-pagination-size(
-      $df-pagination-size-sm,
-      $df-pagination-border-radius-sm,
-      $font-size-sm,
-      $df-pagination-icon-left-offset-sm,
-      $df-pagination-icon-translateX-offset
-    );
-
-    .df-custom-pages-input {
-      min-width: $df-custom-pages-input-minwidth-sm;
-    }    
+    --#{$prefix}pagination-size: #{$df-pagination-size-sm};
+    --#{$prefix}pagination-item-border-radius: #{$df-pagination-border-radius-sm};
+    --#{$prefix}pagination-item-font-size: #{$font-size-sm};
+    --#{$prefix}pagination-icon-offset-start: #{$df-pagination-icon-offset-start-sm};
+    --#{$prefix}custom-pages-input-minwidth: #{$df-custom-pages-input-minwidth-sm};
   }
 }
 
 .df-custom-pages {
   .pagination-sm {
-    align-items: $df-custom-pages-sm-vertical-alignment;
+    align-items: var(--#{$prefix}custom-pages-sm-vertical-alignment);
     .page-item {
       height: fit-content;
       height: -moz-max-content;

package/styles/scss/components/pagination/_pagination.variables.scss

@@ -6,22 +6,19 @@ $df-pagination-border-radius-base: 0.175rem !default;
 $df-pagination-border-radius-sm: 0.15rem !default;
 $df-pagination-border-radius-lg: 0.2rem !default;
 
-$df-pagination-icon-left-offset-base: 50% !default;
-$df-pagination-icon-left-offset-lg: $df-pagination-icon-left-offset-base !default;
-$df-pagination-icon-left-offset-sm: $df-pagination-icon-left-offset-base !default;
+$df-pagination-icon-offset-start-base: 50% !default;
+$df-pagination-icon-offset-start-lg: $df-pagination-icon-offset-start-base !default;
+$df-pagination-icon-offset-start-sm: $df-pagination-icon-offset-start-base !default;
 $df-pagination-icon-color: $df-font-icon-color !default;
-$df-pagination-icon-translateX-offset: -$df-pagination-icon-left-offset-base !default;
+$df-pagination-icon-translateX-offset: -$df-pagination-icon-offset-start-base !default;
 
 $df-pagination-first-icon-code: '\ef22' !default; // .icon-df-first-item
 $df-pagination-previous-icon-code: '\ea32' !default; // .icon-chevron-left
 $df-pagination-next-icon-code: '\ea33' !default; // .icon-chevron-right
 $df-pagination-last-icon-code: '\ef23' !default; // .icon-df-last-item
 
-$df-pagination-disabled-cursor: $df-disabled-cursor !default;
+$df-pagination-disabled-cursor: var(--#{$prefix}disabled-cursor) !default;
 $df-pagination-direction-border-radius: 50% !default;
 $df-pagination-between-list-item-space: 0.2rem !default;
 $df-pagination-margin-bottom: 0px !default; // reset the ul margin.
-$df-custom-pages-input-minwidth-sm: 32px !default;
-$df-custom-pages-input-minwidth: 40px !default;
-$df-custom-pages-input-minwidth-lg: 48px !default;
 $df-custom-pages-sm-vertical-alignment: center !default;

package/styles/scss/components/pagination/_pagination_container.scss

@@ -4,6 +4,9 @@
     color: var(--#{$prefix}pagination-active-color);
     @include gradient-bg(var(--#{$prefix}pagination-active-bg));
     border-color: var(--#{$prefix}pagination-active-border-color);
+    &:hover {
+      background-color: var(--#{$prefix}pagination-hover-bg);
+    }
   }
   .disabled > .page-link {
     color: var(--#{$prefix}pagination-disabled-color);

package/styles/scss/components/popover/_popover.mixin.scss

@@ -2,12 +2,9 @@
   @if $enable-shadows == false {
     box-shadow: var(--#{$prefix}popover-box-shadow);
   }
-  padding: $df-popover-padding;
-  @include media-breakpoint-up(xs) {
-    max-width: $df-popover-max-width-mobile;
-  }
-  @include media-breakpoint-up(sm) {
-    max-width: $df-popover-max-width;
+  padding: var(--#{$prefix}popover-padding);
+  @include media-breakpoint-down(sm) {
+    --#{$prefix}popover-max-width: #{$df-popover-max-width-mobile};
   }
 
   &.bs-popover-top:not(.bs-popover-top-left):not(.bs-popover-top-right) .arrow,
@@ -15,43 +12,33 @@
     transform: translateX(-50%);
   }
 
-  &.bs-popover-left:not(.bs-popover-left-top):not(.bs-popover-left-bottom) .arrow,
-  &.bs-popover-right:not(.bs-popover-right-top):not(.bs-popover-right-bottom) .arrow {
+  &.bs-popover-start:not(.bs-popover-start-top):not(.bs-popover-start-bottom) .arrow,
+  &.bs-popover-end:not(.bs-popover-end-top):not(.bs-popover-end-bottom) .arrow {
     transform: translateY(-50%);
   }
 
   .popover-header {
-    margin: $df-popover-header-default-margin;
-    font-size: $h3-font-size;
-    line-height: $df-popover-header-line-height;
+    margin: var(--#{$prefix}popover-header-margin);
+    font-size: var(--#{$prefix}popover-header-font-size);
+    line-height: var(--#{$prefix}popover-header-line-height);
   }
 
   .popover-body {
-    margin: $df-popover-body-default-margin;
-    font-size: $font-size-base;
+    margin: var(--#{$prefix}popover-body-margin);
+    font-size: var(--#{$prefix}popover-body-font-size);
   }
   &.popover-sm {
-    padding: $df-popover-sm-padding;
-    .popover-header {
-      margin: $df-popover-header-sm-margin;
-      font-size: $h4-font-size;
-    }
-
-    .popover-body {
-      margin: $df-popover-body-sm-margin;
-      font-size: $font-size-sm;
-    }
+    --#{$prefix}popover-padding: #{$df-popover-sm-padding};
+    --#{$prefix}popover-header-margin: #{$df-popover-header-sm-margin};
+    --#{$prefix}popover-header-font-size: #{$h4-font-size};
+    --#{$prefix}popover-body-font-size: #{$font-size-sm};
+    --#{$prefix}popover-body-margin: #{$df-popover-body-sm-margin};
   }
   &.popover-lg {
-    padding: $df-popover-lg-padding;
-    .popover-header {
-      margin: $df-popover-header-lg-margin;
-      font-size: $h2-font-size;
-    }
-
-    .popover-body {
-      margin: $df-popover-body-lg-margin;
-      font-size: $font-size-lg;
-    }
+    --#{$prefix}popover-padding: #{$df-popover-lg-padding};
+    --#{$prefix}popover-header-margin: #{$df-popover-header-lg-margin};
+    --#{$prefix}popover-header-font-size: #{$h2-font-size};
+    --#{$prefix}popover-body-font-size: #{$font-size-lg};
+    --#{$prefix}popover-body-margin: #{$df-popover-body-lg-margin};
   }
 }

package/styles/scss/components/popover/_popover.scss

@@ -1,24 +1,42 @@
 @import 'popover.mixin';
 
 .popover {
-  @include popover-mixin;
+  --#{$prefix}popover-margin: #{$df-popover-margin};
+  --#{$prefix}popover-padding: #{$df-popover-padding};
+  --#{$prefix}popover-header-line-height: #{$df-popover-header-line-height};
+  --#{$prefix}popover-header-margin: #{$df-popover-header-default-margin};
+  --#{$prefix}popover-body-margin: #{$df-popover-body-default-margin};
+  --#{$prefix}popover-header-font-size: #{$h3-font-size};
+  --#{$prefix}popover-body-font-size: #{$font-size-base};
+
+  @include popover-mixin();
 }
 
+// BS override
 .bs-popover-top {
-  margin-bottom: $popover-arrow-height + $df-popover-margin;
+  > .popover-arrow {
+    bottom: calc((var(--#{$prefix}popover-arrow-height) * -1));
+  }
 }
 
-.bs-popover-right {
-  margin-left: $popover-arrow-height + $df-popover-margin;
+.bs-popover-end {
+  > .popover-arrow {
+    left: calc((var(--#{$prefix}popover-arrow-height) * -1));
+  }
 }
 
 .bs-popover-bottom {
-  margin-top: $popover-arrow-height + $df-popover-margin;
+  > .popover-arrow {
+    top: calc((var(--#{$prefix}popover-arrow-height) * -1));
+  }
 }
 
-.bs-popover-left {
-  margin-right: $popover-arrow-height + $df-popover-margin;
+.bs-popover-start {
+  > .popover-arrow {
+    right: calc((var(--#{$prefix}popover-arrow-height) * -1));
+  }
 }
+// End of override
 
 .popover-header {
   border-bottom: none;

package/styles/scss/components/popover/_popover_container.scss

@@ -1,144 +1,172 @@
 @import 'popover.mixin';
 
+// TODO update this file with the new file from bootstrap
+// Ref file is popover.scss in BS folder.
+// Attention I backport the fix from the override in popover.scss in this file too
 #{$df-css-namespace-selector} {
   &.popover {
     @include popover-mixin();
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: $zindex-popover;
+    // scss-docs-start popover-css-vars
+    --#{$prefix}popover-zindex: #{$zindex-popover};
+    --#{$prefix}popover-max-width: #{$popover-max-width};
+    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+    --#{$prefix}popover-bg: #{$popover-bg};
+    --#{$prefix}popover-border-width: #{$popover-border-width};
+    --#{$prefix}popover-border-color: #{$popover-border-color};
+    --#{$prefix}popover-border-radius: #{$popover-border-radius};
+    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+    --#{$prefix}popover-header-color: #{$popover-header-color};
+    --#{$prefix}popover-header-bg: #{$popover-header-bg};
+    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+    --#{$prefix}popover-body-color: #{$popover-body-color};
+    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+    // scss-docs-end popover-css-vars
+  
+    z-index: var(--#{$prefix}popover-zindex);
     display: block;
+    max-width: var(--#{$prefix}popover-max-width);
     // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
     // So reset our font and text properties to avoid inheriting weird values.
     @include reset-text();
-    @include font-size($popover-font-size);
+    @include font-size(var(--#{$prefix}popover-font-size));
     // Allow breaking very long words so they don't overflow the popover's bounds
     word-wrap: break-word;
-    background-color: $popover-bg;
+    background-color: var(--#{$prefix}popover-bg);
     background-clip: padding-box;
-    border: $popover-border-width solid $popover-border-color;
-    @include border-radius($popover-border-radius);
-
-    @if $enable-shadows {
-      @include box-shadow(var(--#{$prefix}popover-box-shadow));
-    } @else {
-      box-shadow: var(--#{$prefix}popover-box-shadow);
-    }
-
-    .popover-arrow {
-      position: absolute;
+    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    @include border-radius(var(--#{$prefix}popover-border-radius));
+    @include box-shadow(var(--#{$prefix}popover-box-shadow));
+  
+    &.popover-arrow {
       display: block;
-      width: $popover-arrow-width;
-      height: $popover-arrow-height;
-
+      width: var(--#{$prefix}popover-arrow-width);
+      height: var(--#{$prefix}popover-arrow-height);
+  
       &::before,
       &::after {
         position: absolute;
         display: block;
-        content: '';
+        content: "";
         border-color: transparent;
         border-style: solid;
+        border-width: 0;
       }
     }
   }
-
+  
   &.bs-popover-top {
-    margin-bottom: $popover-arrow-height + $df-popover-margin;
-
     > .popover-arrow {
-      bottom: subtract(-$popover-arrow-height, $popover-border-width);
-
+      bottom: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+  
+      &::before,
+      &::after {
+        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      }
+  
       &::before {
         bottom: 0;
-        border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-        border-top-color: $popover-arrow-outer-color;
+        border-top-color: var(--#{$prefix}popover-arrow-border);
       }
   
       &::after {
-        bottom: $popover-border-width;
-        border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-        border-top-color: $popover-arrow-color;
+        bottom: var(--#{$prefix}popover-border-width);
+        border-top-color: var(--#{$prefix}popover-bg);
       }
     }
   }
-
-  &.bs-popover-right {
-    margin-left: $popover-arrow-height + $df-popover-margin;
-
+  
+  /* rtl:begin:ignore */
+  &.bs-popover-end {
     > .popover-arrow {
-      left: subtract(-$popover-arrow-height, $popover-border-width);
-      width: $popover-arrow-height;
-      height: $popover-arrow-width;
-
+      left: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+      width: var(--#{$prefix}popover-arrow-height);
+      height: var(--#{$prefix}popover-arrow-width);
+  
+      &::before,
+      &::after {
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      }
+  
       &::before {
         left: 0;
-        border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
-        border-right-color: $popover-arrow-outer-color;
+        border-right-color: var(--#{$prefix}popover-arrow-border);
       }
   
       &::after {
-        left: $popover-border-width;
-        border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
-        border-right-color: $popover-arrow-color;
+        left: var(--#{$prefix}popover-border-width);
+        border-right-color: var(--#{$prefix}popover-bg);
       }
     }
   }
-
+  
+  /* rtl:end:ignore */
+  
   &.bs-popover-bottom {
-    margin-top: $popover-arrow-height + $df-popover-margin;
-
     > .popover-arrow {
-      top: subtract(-$popover-arrow-height, $popover-border-width);
-
+      top: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+  
+      &::before,
+      &::after {
+        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      }
+  
       &::before {
         top: 0;
-        border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
-        border-bottom-color: $popover-arrow-outer-color;
+        border-bottom-color: var(--#{$prefix}popover-arrow-border);
       }
   
       &::after {
-        top: $popover-border-width;
-        border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
-        border-bottom-color: $popover-arrow-color;
+        top: var(--#{$prefix}popover-border-width);
+        border-bottom-color: var(--#{$prefix}popover-bg);
       }
     }
-
+  
     // This will remove the popover-header's border just below the arrow
     .popover-header::before {
       position: absolute;
       top: 0;
       left: 50%;
       display: block;
-      width: $popover-arrow-width;
-      margin-left: -$popover-arrow-width * .5;
-      content: '';
-      border-bottom: $popover-border-width solid $popover-header-bg;
+      width: var(--#{$prefix}popover-arrow-width);
+      margin-left: calc(var(--#{$prefix}popover-arrow-width) * -.5); // stylelint-disable-line function-disallowed-list
+      content: "";
+      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     }
   }
-
-  &.bs-popover-left {
-    margin-right: $popover-arrow-height + $df-popover-margin;
-
+  
+  /* rtl:begin:ignore */
+  &.bs-popover-start {
     > .popover-arrow {
-      right: subtract(-$popover-arrow-height, $popover-border-width);
-      width: $popover-arrow-height;
-      height: $popover-arrow-width;
-
+      right: calc((var(--#{$prefix}popover-arrow-height) * -1)); // stylelint-disable-line function-disallowed-list
+      width: var(--#{$prefix}popover-arrow-height);
+      height: var(--#{$prefix}popover-arrow-width);
+  
+      &::before,
+      &::after {
+        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      }
+  
       &::before {
         right: 0;
-        border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
-        border-left-color: $popover-arrow-outer-color;
+        border-left-color: var(--#{$prefix}popover-arrow-border);
       }
   
       &::after {
-        right: $popover-border-width;
-        border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
-        border-left-color: $popover-arrow-color;
+        right: var(--#{$prefix}popover-border-width);
+        border-left-color: var(--#{$prefix}popover-bg);
       }
     }
   }
-
+  
+  /* rtl:end:ignore */
+  
   &.bs-popover-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-popover-top;
@@ -153,4 +181,25 @@
       @extend .bs-popover-start;
     }
   }
+  
+  // Offset the popover to account for the popover arrow
+  &.popover-header {
+    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+    margin-bottom: 0; // Reset the default from Reboot
+    @include font-size(var(--#{$prefix}popover-header-font-size));
+    color: var(--#{$prefix}popover-header-color);
+    background-color: var(--#{$prefix}popover-header-bg);
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
+  
+    &:empty {
+      display: none;
+    }
+  }
+  
+  &.popover-body {
+    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+    color: var(--#{$prefix}popover-body-color);
+  }
+  
 }