@openedx/paragon 21.7.1 → 22.0.0-alpha.16

package/src/PageBanner/index.scss

@@ -1,56 +1,52 @@
-// stylelint-disable-next-line selector-class-pattern
+// stylelint-disable selector-class-pattern
 .pgn__pageBanner-component {
   width: 100%;
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: $x-small-font-size;
+  font-size: var(--pgn-typography-font-size-small-x);
+  background-color: var(--pgn-page-baner-bg, inherit);
+  color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: $small-font-size;
+    font-size: var(--pgn-typography-font-size-small-base);
   }
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__dark {
-  background-color: $dark-500;
-  color: white;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-dark);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-dark);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__light {
-  background-color: $light-400;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-light);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-light);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__accentA {
-  background-color: $accent-a;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-a);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-a);
 }
-// stylelint-disable-next-line selector-class-pattern
+
 .pgn__pageBanner__accentB {
-  background-color: $accent-b;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-b);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-b);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__warning {
-  background-color: $warning-100;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-warning);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-warning);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-content {
   display: flex;
   flex-grow: 1;
   justify-content: center;
   align-items: center;
-  padding: map_get($spacers, 2) map_get($spacers, 2\.5);
+  padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-2-5);
   text-align: center;
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-dismissButtonContainer {
   min-width: 32px;
   min-height: 32px;

package/src/Pagination/index.scss

@@ -1,5 +1,4 @@
-@import "variables";
-@import "~bootstrap/scss/pagination";
+@import "pagination-bootstrap";
 
 .pagination {
   align-items: center;
@@ -31,11 +30,11 @@
   .page-link {
     &.previous .pgn__icon {
       margin-inline-start: 0;
-      margin-inline-end: $pagination-margin-x;
+      margin-inline-end: var(--pgn-spacing-pagination-margin-x);
     }
 
     &.next .pgn__icon {
-      margin-inline-start: $pagination-margin-x;
+      margin-inline-start: var(--pgn-spacing-pagination-margin-x);
       margin-inline-end: 0;
     }
   }
@@ -43,13 +42,13 @@
   .page-item {
     &:first-child .page-link {
       [dir="rtl"] & {
-        border-radius: 0 $pagination-border-radius-lg $pagination-border-radius-lg 0;
+        border-radius: 0 var(--pgn-size-pagination-border-radius-lg) var(--pgn-size-pagination-border-radius-lg) 0;
       }
     }
 
     &:last-child .page-link {
       [dir="rtl"] & {
-        border-radius: $pagination-border-radius-lg 0 0 $pagination-border-radius-lg;
+        border-radius: var(--pgn-size-pagination-border-radius-lg) 0 0 var(--pgn-size-pagination-border-radius-lg);
       }
     }
   }
@@ -59,8 +58,8 @@
   border: none;
 
   &.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: $pagination-bg;
-    color: $pagination-focus-color-text;
+    background-color: var(--pgn-color-pagination-bg-base);
+    color: var(--pgn-color-pagination-focus-text);
   }
 
   &:focus {
@@ -68,9 +67,15 @@
   }
 
   &.btn-primary:focus::before {
-    border: $pagination-focus-border-width solid $pagination-focus-color;
+    border: var(--pgn-size-pagination-focus-border-width) solid var(--pgn-color-pagination-focus-base);
 
-    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+    @include button-size(
+      var(--pgn-spacing-btn-padding-y-base),
+      var(--pgn-spacing-btn-padding-x-base),
+      var(--pgn-typography-btn-font-size-base),
+      var(--pgn-typography-btn-line-height-base),
+      var(--pgn-size-btn-border-radius-base)
+    );
   }
 
   div {
@@ -92,25 +97,25 @@
 .page-item {
   > .btn {
     transition: none;
-    line-height: $pagination-line-height;
+    line-height: var(--pgn-typography-pagination-line-height);
   }
 
   &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: $pagination-focus-color;
-    color: $pagination-bg;
+    background-color: var(--pgn-color-pagination-focus-base);
+    color: var(--pgn-color-pagination-bg-base);
   }
 }
 
 .pagination-small {
   .page-link {
-    font-size: $pagination-font-size-sm;
-    line-height: $pagination-line-height;
+    font-size: var(--pgn-typography-pagination-font-size-sm);
+    line-height: var(--pgn-typography-pagination-line-height);
     padding: .375rem .78rem;
 
     &.previous,
     &.next {
-      padding: 0 $pagination-padding-y;
-      line-height: $pagination-secondary-height-sm;
+      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
+      line-height: var(--pgn-size-pagination-secondary-height-sm);
 
       div {
         display: flex;
@@ -124,7 +129,7 @@
       &.previous,
       &.next {
         padding: 0;
-        width: $pagination-icon-width;
+        width: var(--pgn-size-pagination-icon-width);
       }
     }
   }
@@ -133,15 +138,15 @@
 .pagination-secondary {
   button.next,
   button.previous {
-    height: $pagination-secondary-height;
-    padding: 0 $pagination-padding-y;
+    height: var(--pgn-size-pagination-secondary-height-base);
+    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
   }
 
   &.pagination-small {
     button.next,
     button.previous {
-      height: $pagination-secondary-height-sm;
-      line-height: $pagination-line-height;
+      height: var(--pgn-size-pagination-secondary-height-sm);
+      line-height: var(--pgn-typography-pagination-line-height);
     }
   }
 
@@ -157,7 +162,7 @@
 .pagination-inverse {
   %dark-styles {
     background-color: transparent;
-    color: $white;
+    color: var(--pgn-color-white);
   }
 
   .pgn__dark-styles {
@@ -170,8 +175,8 @@
     }
 
     &.active button.page-link {
-      background-color: $pagination-bg;
-      color: $pagination-color;
+      background-color: var(--pgn-color-pagination-bg-base);
+      color: var(--pgn-color-pagination-text-base);
     }
 
     button.page-link {
@@ -183,7 +188,7 @@
     }
 
     &:not(.active):focus {
-      box-shadow: $level-1-box-shadow;
+      box-shadow: var(--pgn-elevation-box-shadow-level-1);
     }
   }
 
@@ -196,10 +201,10 @@
 
   .dropdown {
     .btn-tertiary {
-      color: $pagination-color-inverse;
+      color: var(--pgn-color-pagination-text-inverse);
 
       &::after {
-        border-top: $pagination-toggle-border solid $pagination-color-inverse;
+        border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-pagination-text-inverse);
       }
 
       &:active,
@@ -208,7 +213,7 @@
       }
 
       &:not(:disabled):not(.disabled):active {
-        color: $pagination-color-inverse;
+        color: var(--pgn-color-pagination-text-inverse);
       }
     }
   }
@@ -220,8 +225,8 @@
 
 .pgn__reduced-pagination-dropdown {
   overflow-y: auto;
-  max-height: $pagination-reduced-dropdown-max-height;
-  min-width: $pagination-reduced-dropdown-min-width;
+  max-height: var(--pgn-size-pagination-reduced-dropdown-max-height);
+  min-width: var(--pgn-size-pagination-reduced-dropdown-min-width);
 
   a {
     text-align: center;
@@ -232,9 +237,9 @@
   .dropdown-toggle::after {
     width: 0;
     height: 0;
-    border-left: $pagination-toggle-border solid transparent;
-    border-right: $pagination-toggle-border solid transparent;
-    border-top: $pagination-toggle-border solid $gray-700;
+    border-left: var(--pgn-size-pagination-toggle-border-base) solid transparent;
+    border-right: var(--pgn-size-pagination-toggle-border-base) solid transparent;
+    border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-gray-700);
     transform: rotate(0);
     inset-inline-start: .5rem;
     top: 0;
@@ -243,25 +248,25 @@
 
   button.next,
   button.previous {
-    height: $pagination-secondary-height;
-    padding: 0 $pagination-padding-y;
+    height: var(--pgn-size-pagination-secondary-height-base);
+    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
   }
 
   &.pagination-small {
     .btn.dropdown-toggle {
-      font-size: $pagination-font-size-sm;
+      font-size: var(--pgn-typography-pagination-font-size-sm);
 
       &::after {
-        border-left-width: $pagination-toggle-border-sm;
-        border-right-width: $pagination-toggle-border-sm;
-        border-top-width: $pagination-toggle-border-sm;
+        border-left-width: var(--pgn-size-pagination-toggle-border-sm);
+        border-right-width: var(--pgn-size-pagination-toggle-border-sm);
+        border-top-width: var(--pgn-size-pagination-toggle-border-sm);
       }
     }
 
     button.previous,
     button.next {
-      line-height: $pagination-icon-height;
-      height: $pagination-icon-height;
+      line-height: var(--pgn-size-pagination-icon-height);
+      height: var(--pgn-size-pagination-icon-height);
     }
   }
 
@@ -281,15 +286,15 @@
 
   button.next,
   button.previous {
-    padding: $pagination-padding-y;
-    height: $pagination-secondary-height;
+    padding: var(--pgn-spacing-pagination-padding-y-base);
+    height: var(--pgn-size-pagination-secondary-height-base);
   }
 
   &.pagination-small {
     button.next,
     button.previous {
-      padding: 0 $pagination-padding-y;
-      height: $pagination-secondary-height-sm;
+      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
+      height: var(--pgn-size-pagination-secondary-height-sm);
     }
   }
 

package/src/Pagination/pagination-bootstrap.scss

@@ -0,0 +1,83 @@
+.pagination {
+  display: flex;
+
+  @include list-unstyled();
+  @include border-radius();
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: var(--pgn-spacing-pagination-padding-y-base) var(--pgn-spacing-pagination-padding-x-base);
+  margin-left: calc(var(--pgn-size-pagination-border-width) * -1);
+  line-height: var(--pgn-typography-pagination-line-height);
+  color: var(--pgn-color-pagination-text-base);
+  text-decoration: none;
+  background-color: var(--pgn-color-pagination-bg-base);
+  border: var(--pgn-size-pagination-border-width) solid var(--pgn-color-pagination-border-base);
+
+  &:hover {
+    z-index: 2;
+    color: var(--pgn-color-pagination-text-hover);
+    text-decoration: none;
+    background-color: var(--pgn-color-pagination-bg-hover);
+    border-color: var(--pgn-color-pagination-border-hover);
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: var(--pgn-size-pagination-focus-outline);
+    box-shadow: var(--pgn-elevation-pagination-focus-box-shadow);
+  }
+}
+
+.page-item {
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+
+      @include border-left-radius(var(--pgn-size-border-radius-base));
+    }
+  }
+
+  &:last-child {
+    .page-link {
+      @include border-right-radius(var(--pgn-size-border-radius-base));
+    }
+  }
+
+  &.active .page-link {
+    z-index: 3;
+    color: var(--pgn-color-pagination-text-active);
+    background-color: var(--pgn-color-pagination-bg-active);
+    border-color: var(--pgn-color-pagination-border-active);
+  }
+
+  &.disabled .page-link {
+    color: var(--pgn-color-pagination-text-disabled);
+    pointer-events: none;
+    cursor: auto;
+    background-color: var(--pgn-color-pagination-bg-disabled);
+    border-color: var(--pgn-color-pagination-border-disabled);
+  }
+}
+
+.pagination-lg {
+  @include pagination-size(
+    var(--pgn-spacing-pagination-padding-y-lg),
+    var(--pgn-spacing-pagination-padding-x-lg),
+    var(--pgn-typography-font-size-lg),
+    var(--pgn-typography-line-height-lg),
+    var(--pgn-size-pagination-border-radius-lg)
+  );
+}
+
+.pagination-sm {
+  @include pagination-size(
+    var(--pgn-spacing-pagination-padding-y-sm),
+    var(--pgn-spacing-pagination-padding-x-sm),
+    var(--pgn-typography-font-size-sm),
+    var(--pgn-typography-line-height-sm),
+    var(--pgn-size-pagination-border-radius-sm)
+  );
+}

package/src/Popover/index.scss

@@ -1,31 +1,30 @@
-@import "variables";
 @import "mixins";
-@import "~bootstrap/scss/popover";
+@import "popover-bootstrap";
 
 .popover {
-  filter: $popover-box-shadow;
+  filter: var(--pgn-elevation-popover-box-shadow);
 
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: $h5-font-size;
+    font-size: var(--pgn-typography-font-size-h5);
   }
 
   .pgn__icon {
-    margin-inline-end: $popover-icon-margin-right;
-    height: $popover-icon-height;
-    width: $popover-icon-width;
+    margin-inline-end: var(--pgn-spacing-popover-icon-margin-right);
+    height: var(--pgn-size-popover-icon-height);
+    width: var(--pgn-size-popover-icon-width);
   }
 }
 
 .popover-success {
-  @include get-popover-variant($popover-success-bg, $popover-success-icon-color);
+  @include get-popover-variant(var(--pgn-color-popover-success-bg), var(--pgn-color-popover-success-icon));
 }
 
 .popover-warning {
-  @include get-popover-variant($popover-warning-bg, $popover-warning-icon-color);
+  @include get-popover-variant(var(--pgn-color-popover-warning-bg), var(--pgn-color-popover-warning-icon));
 }
 
 .popover-danger {
-  @include get-popover-variant($popover-danger-bg, $popover-danger-icon-color);
+  @include get-popover-variant(var(--pgn-color-popover-danger-bg), var(--pgn-color-popover-danger-icon));
 }

package/src/Popover/popover-bootstrap.scss

@@ -0,0 +1,198 @@
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--pgn-elevation-popover-zindex);
+  display: block;
+  max-width: var(--pgn-size-popover-max-width);
+
+  @include reset-text();
+  @include font-size(var(--pgn-typography-popover-font-size));
+
+  word-wrap: break-word;
+  background-color: var(--pgn-color-popover-bg);
+  background-clip: padding-box;
+  border: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-border);
+  box-shadow: var(--pgn-elevation-popover-box-shadow);
+
+  @include border-radius(var(--pgn-size-popover-border-radius));
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: var(--pgn-size-popover-arrow-width);
+    height: var(--pgn-size-popover-arrow-height);
+    margin: 0 var(--pgn-size-popover-border-radius);
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      display: block;
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-popover-top {
+  margin-bottom: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    bottom: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+
+    &::before {
+      bottom: 0;
+      border-width: var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-top-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      bottom: var(--pgn-size-popover-border-width);
+      border-width: var(--pgn-size-popover-arrow-height) calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-top-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+}
+
+.bs-popover-right {
+  margin-left: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    left: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    width: var(--pgn-size-popover-arrow-height);
+    height: var(--pgn-size-popover-arrow-width);
+    margin: var(--pgn-size-popover-border-radius) 0;
+
+    &::before {
+      left: 0;
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-right-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      left: var(--pgn-size-popover-border-width);
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0;
+      border-right-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+}
+
+.bs-popover-bottom {
+  margin-top: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    top: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+
+    &::before {
+      top: 0;
+      border-width:
+        0 calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5);
+      border-bottom-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      top: var(--pgn-size-popover-border-width);
+      border-width:
+        0 calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height)
+        calc(var(--pgn-size-popover-arrow-width) * .5);
+      border-bottom-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+
+  // This will remove the popover-header's border just below the arrow
+  .popover-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: var(--pgn-size-popover-arrow-width);
+    margin-left: calc(var(--pgn-size-popover-arrow-width) * -.5);
+    border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-bg);
+  }
+}
+
+.bs-popover-left {
+  margin-right: var(--pgn-size-popover-arrow-height);
+
+  > .arrow {
+    right: calc(-1 * calc(var(--pgn-size-popover-border-width) + var(--pgn-size-popover-arrow-height)));
+    width: var(--pgn-size-popover-arrow-height);
+    height: var(--pgn-size-popover-arrow-width);
+    margin: var(--pgn-size-popover-border-radius) 0;
+
+    &::before {
+      right: 0;
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height);
+      border-left-color: var(--pgn-color-popover-arrow-outer);
+    }
+
+    &::after {
+      right: var(--pgn-size-popover-border-width);
+      border-width:
+        calc(var(--pgn-size-popover-arrow-width) * .5) 0
+        calc(var(--pgn-size-popover-arrow-width) * .5)
+        var(--pgn-size-popover-arrow-height);
+      border-left-color: var(--pgn-color-popover-arrow-base);
+    }
+  }
+}
+
+.bs-popover-auto {
+  &[x-placement^="top"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-top;
+  }
+
+  &[x-placement^="right"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-right;
+  }
+
+  &[x-placement^="bottom"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-bottom;
+  }
+
+  &[x-placement^="left"] {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .bs-popover-left;
+  }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  padding: var(--pgn-spacing-popover-header-padding-y) var(--pgn-spacing-popover-header-padding-x);
+  margin-bottom: 0;
+
+  @include font-size(var(--pgn-typography-font-size-base));
+
+  color: var(--pgn-color-popover-header-text);
+  background-color: var(--pgn-color-popover-header-bg);
+  border-bottom: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-header-border-bottom-dark);
+
+  @include border-top-radius(calc(var(--pgn-size-popover-border-radius) - var(--pgn-size-popover-border-width)));
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-body {
+  padding: var(--pgn-spacing-popover-body-padding-y) var(--pgn-spacing-popover-body-padding-x);
+  color: var(--pgn-color-popover-body);
+}