@openedx/paragon 22.4.0 → 23.0.0-alpha.1

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,3 @@
-@import "variables";
-
 %pagination-icon-button-right {
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
@@ -27,11 +25,11 @@
     &:first-child .page-link {
       margin-left: 0;
 
-      @include border-left-radius($border-radius);
+      @include border-left-radius(var(--pgn-size-border-radius-base));
     }
 
     &:last-child .page-link {
-      @include border-right-radius($border-radius);
+      @include border-right-radius(var(--pgn-size-border-radius-base));
     }
 
     &:first-child .btn-icon.page-link {
@@ -48,7 +46,7 @@
 
     > .btn {
       transition: none;
-      line-height: $pagination-line-height;
+      line-height: var(--pgn-typography-pagination-line-height);
     }
   }
 
@@ -57,14 +55,14 @@
 
   &-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;
@@ -77,7 +75,7 @@
       &.previous,
       &.next {
         padding: 0;
-        width: $pagination-icon-width;
+        width: var(--pgn-size-pagination-icon-width);
       }
     }
   }
@@ -85,15 +83,15 @@
   &-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);
       }
     }
   }
@@ -105,19 +103,19 @@
 
   &-inverse {
     .ellipsis {
-      color: $white;
+      color: var(--pgn-color-white);
     }
 
     .dropdown .dropdown-toggle::after {
-      border-top: $pagination-toggle-border solid $pagination-dropdown-color-inverse;
+      border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-pagination-dropdown-text-inverse);
     }
   }
 
   &-reduced {
     &-dropdown-menu {
       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;
@@ -127,9 +125,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;
@@ -138,25 +136,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);
       }
     }
   }
@@ -168,15 +166,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);
       }
     }
   }
@@ -184,7 +182,7 @@
 
 .page-link {
   border: none;
-  margin-left: -$pagination-border-width;
+  margin-left: -var(--pgn-size-pagination-border-width);
 
   &:focus {
     z-index: 3;

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);
+}