@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Card/_variables.scss

@@ -0,0 +1,55 @@
+// Card
+
+$card-spacer-y:                      .75rem !default;
+$card-spacer-x:                      1.25rem !default;
+$card-border-width:                  $border-width !default;
+$card-border-radius:                 $border-radius !default;
+$card-border-color:                  rgba($black, .125) !default;
+$card-border-focus-color:            $primary-500 !default;
+$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
+$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
+$card-cap-bg:                        rgba($black, .03) !default;
+$card-cap-color:                     null !default;
+$card-height:                        null !default;
+$card-color:                         null !default;
+$card-bg:                            $white !default;
+$card-bg-dark:                       $primary-500 !default;
+$card-bg-muted:                      $light-200 !default;
+
+$card-img-overlay-padding:           1.25rem !default;
+
+$card-group-margin:                  calc($grid-gutter-width / 2) !default;
+$card-deck-margin:                   $card-group-margin !default;
+$card-grid-margin:                   $card-group-margin !default;
+$card-deck-margin-bottom:            map_get($spacers, 3) !default;
+$card-grid-margin-bottom:            map_get($spacers, 3) !default;
+
+$card-columns-count:                 3 !default;
+$card-columns-gap:                   1.25rem !default;
+$card-columns-margin:                $card-spacer-y !default;
+
+$card-divider-bg:                    $light-400 !default;
+
+$card-footer-actions-gap:            .5rem !default;
+
+$card-logo-left-offset:              1.5rem !default;
+$card-logo-bottom-offset:            1rem !default;
+$card-logo-left-offset-horizontal:   .4375rem !default;
+$card-logo-bottom-offset-horizontal: .4375rem !default;
+
+$card-logo-width:                    7.25rem !default;
+$card-logo-height:                   4.125rem !default;
+
+$card-image-border-radius:           $card-border-radius !default;
+$card-logo-border-radius:            .25rem !default;
+
+$card-footer-text-font-size:         $x-small-font-size;
+
+$card-image-horizontal-max-width:    240px !default;
+$card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
+$card-image-vertical-max-height:     140px !default;
+$loading-skeleton-spacer:            .313rem !default;
+
+$card-focus-border-offset:           5px !default;
+$card-focus-border-width:            2px !default;
+$card-focus-border-radius:           calc($card-focus-border-offset + $card-border-radius) !default;

package/src/Card/index.scss

@@ -1,15 +1,16 @@
-@import "card-bootstrap";
+@import "variables";
+@import "~bootstrap/scss/card";
 
 a .pgn__card,
 a.pgn__card {
-  color: var(--pgn-color-gray-700);
+  color: $gray-700;
   display: inline-block;
   text-decoration: none;
 }
 
 .pgn__card-grid {
   .row > div[class*="col-"] {
-    margin-bottom: var(--pgn-spacing-card-margin-grid-bottom);
+    margin-bottom: $card-grid-margin-bottom;
   }
 }
 
@@ -27,7 +28,7 @@ a.pgn__card {
 
 .pgn__card-deck {
   position: relative;
-  margin-bottom: var(--pgn-spacing-card-margin-deck-bottom);
+  margin-bottom: $card-deck-margin-bottom;
 
   &.pgn__card-deck-has-horizontal-scroll {
     .pgn__card-deck-row {
@@ -38,12 +39,12 @@ a.pgn__card {
   .pgn__card-deck-row {
     overflow: hidden;
     flex-wrap: nowrap;
-    padding-top: var(--pgn-spacing-card-focus-border-offset);
-    padding-bottom: var(--pgn-spacing-card-focus-border-offset);
+    padding-top: $card-focus-border-offset;
+    padding-bottom: $card-focus-border-offset;
 
     &:focus-visible {
-      outline: var(--pgn-size-card-focus-border-width) solid var(--pgn-color-card-border-focus-base);
-      border-radius: var(--pgn-size-card-focus-border-radius);
+      outline: $card-focus-border-width solid $card-border-focus-color;
+      border-radius: $card-focus-border-radius;
     }
   }
 }
@@ -54,7 +55,7 @@ a.pgn__card {
   }
 
   .pgn__card-carousel-subtitle {
-    font-size: var(--pgn-typography-font-size-sm);
+    font-size: $font-size-sm;
     margin-bottom: map-get($spacers, 2);
   }
 
@@ -72,16 +73,16 @@ a.pgn__card {
   &::before {
     content: "";
     position: absolute;
-    top: calc(-1 * var(--pgn-spacing-card-focus-border-offset));
-    right: calc(-1 * var(--pgn-spacing-card-focus-border-offset));
-    bottom: calc(-1 * var(--pgn-spacing-card-focus-border-offset));
-    left: calc(-1 * var(--pgn-spacing-card-focus-border-offset));
-    border: solid var(--pgn-size-card-focus-border-width) var(--pgn-color-card-border-focus-base);
-    border-radius: var(--pgn-size-card-focus-border-radius);
+    top: calc(-1 * #{$card-focus-border-offset});
+    right: calc(-1 * #{$card-focus-border-offset});
+    bottom: calc(-1 * #{$card-focus-border-offset});
+    left: calc(-1 * #{$card-focus-border-offset});
+    border: solid $card-focus-border-width $card-border-focus-color;
+    border-radius: $card-focus-border-radius;
   }
 
   &.pgn__card-dark::before {
-    border: solid var(--pgn-size-card-focus-border-width) var(--pgn-color-card-border-focus-dark);
+    border: solid $card-focus-border-width $card-border-focus-color-dark;
   }
 }
 
@@ -110,7 +111,7 @@ a.pgn__card {
   }
 
   .pgn__card-header {
-    padding: 0 var(--pgn-spacing-card-spacer-x);
+    padding: 0 $card-spacer-x;
     display: flex;
     justify-content: space-between;
 
@@ -124,8 +125,8 @@ a.pgn__card {
     }
 
     %header-title {
-      color: var(--pgn-color-black);
-      font-weight: var(--pgn-typography-font-weight-bold);
+      color: $black;
+      font-weight: $font-weight-bold;
       text-align: start;
     }
 
@@ -136,15 +137,15 @@ a.pgn__card {
     }
 
     .pgn__card-header-title-sm {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: $h4-font-size;
     }
 
     .pgn__card-header-title-md {
-      font-size: var(--pgn-typography-font-size-h3);
+      font-size: $h3-font-size;
     }
 
     %header-subtitle {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
       margin-top: map_get($spacers, 1);
     }
 
@@ -155,16 +156,16 @@ a.pgn__card {
     }
 
     .pgn__card-header-subtitle-sm {
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: $h5-font-size;
     }
 
     .pgn__card-header-subtitle-md {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: $h4-font-size;
     }
 
     .pgn__card-header-actions {
-      margin-top: var(--pgn-spacing-spacer-base);
-      margin-inline-start: var(--pgn-spacing-spacer-base);
+      margin-top: $spacer;
+      margin-inline-start: $spacer;
       flex-shrink: 0;
     }
 
@@ -179,7 +180,7 @@ a.pgn__card {
 
   .pgn__card-footer {
     width: 100%;
-    padding: var(--pgn-spacing-card-spacer-x);
+    padding: $card-spacer-x;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -189,7 +190,7 @@ a.pgn__card {
       padding-top: 0;
 
       & > * + * {
-        margin-inline-start: var(--pgn-spacing-card-footer-action-gap);
+        margin-inline-start: $card-footer-actions-gap;
       }
     }
 
@@ -200,11 +201,11 @@ a.pgn__card {
 
     &.vertical-stacked {
       flex-direction: column-reverse;
-      padding-top: var(--pgn-spacing-card-spacer-x) - var(--pgn-spacing-card-footer-action-gap);
+      padding-top: $card-spacer-x - $card-footer-actions-gap;
 
       & > * {
         width: 100%;
-        margin-top: var(--pgn-spacing-card-footer-action-gap);
+        margin-top: $card-footer-actions-gap;
       }
     }
 
@@ -212,23 +213,23 @@ a.pgn__card {
       flex-wrap: wrap;
 
       & > :not(:last-child) {
-        margin-inline-end: var(--pgn-spacing-card-footer-action-gap);
+        margin-inline-end: $card-footer-actions-gap;
       }
     }
 
     &.horizontal-stacked {
       flex-direction: column-reverse;
-      padding-top: var(--pgn-spacing-card-spacer-x) - var(--pgn-spacing-card-footer-action-gap);
+      padding-top: $card-spacer-x - $card-footer-actions-gap;
 
       & > * {
-        margin-top: var(--pgn-spacing-card-footer-action-gap);
+        margin-top: $card-footer-actions-gap;
       }
     }
 
     .pgn__card-footer-text {
-      color: var(--pgn-color-gray-700);
+      color: $gray-700;
       order: 1;
-      font-size: var(--pgn-typography-footer-text-font-size);
+      font-size: $card-footer-text-font-size;
 
       &.vertical {
         margin-inline-end: auto;
@@ -240,13 +241,13 @@ a.pgn__card {
       }
 
       &.horizontal {
-        margin-top: var(--pgn-spacing-card-spacer-x);
+        margin-top: $card-spacer-x;
         width: 100%;
         text-align: center;
       }
 
       &.horizontal-stacked {
-        margin-top: var(--pgn-spacing-card-spacer-x);
+        margin-top: $card-spacer-x;
         width: 100%;
         text-align: center;
         order: -1;
@@ -255,30 +256,30 @@ a.pgn__card {
   }
 
   .pgn__card-divider {
-    border-top: 1px solid var(--pgn-color-card-divider-bg);
+    border-top: 1px solid $card-divider-bg;
     height: 0;
   }
 
   .pgn__card-section {
-    padding: var(--pgn-spacing-card-spacer-x);
+    padding: $card-spacer-x;
     flex-grow: 1;
     text-align: start;
 
     &.is-muted {
-      background-color: var(--pgn-color-light-200);
+      background-color: $light-200;
     }
 
     .pgn__card-section-title {
-      color: var(--pgn-color-black);
-      font-weight: var(--pgn-typography-font-weight-bold);
-      font-size: var(--pgn-typography-font-size-h5);
-      margin-bottom: var(--pgn-spacing-card-spacer-y);
+      color: $black;
+      font-weight: $font-weight-bold;
+      font-size: $h5-font-size;
+      margin-bottom: $card-spacer-y;
     }
 
     .pgn__card-section-actions {
       display: flex;
       justify-content: flex-end;
-      margin-top: var(--pgn-spacing-card-spacer-y);
+      margin-top: $card-spacer-y;
     }
 
     dd {
@@ -293,8 +294,8 @@ a.pgn__card {
     object-fit: cover;
     max-height: inherit;
     width: 100%;
-    border-top-left-radius: var(--pgn-size-card-image-border-radius);
-    border-top-right-radius: var(--pgn-size-card-image-border-radius);
+    border-top-left-radius: $card-image-border-radius;
+    border-top-right-radius: $card-image-border-radius;
     display: none;
 
     &.show {
@@ -306,21 +307,21 @@ a.pgn__card {
     position: relative;
 
     &.horizontal {
-      max-width: var(--pgn-size-card-image-horizontal-width-max);
-      min-width: var(--pgn-size-card-image-horizontal-width-min);
+      max-width: $card-image-horizontal-max-width;
+      min-width: $card-image-horizontal-min-width;
       overflow: hidden;
 
       .pgn__card-image-cap {
         height: 100%;
         max-width: inherit;
-        border-radius: var(--pgn-size-card-image-border-radius) 0 0 var(--pgn-size-card-image-border-radius);
+        border-radius: $card-image-border-radius 0 0 $card-image-border-radius;
         width: auto;
         object-fit: cover;
       }
 
       .pgn__card-logo-cap {
-        inset-inline-start: var(--pgn-spacing-card-logo-left-offset-horizontal);
-        bottom: var(--pgn-spacing-card-logo-bottom-offset-horizontal);
+        inset-inline-start: $card-logo-left-offset-horizontal;
+        bottom: $card-logo-bottom-offset-horizontal;
       }
 
       .pgn__card-image-cap-loader {
@@ -332,14 +333,14 @@ a.pgn__card {
     }
 
     &.vertical {
-      max-height: var(--pgn-size-card-image-vertical-max-height);
+      max-height: $card-image-vertical-max-height;
     }
 
     .pgn__card-image-cap-loader {
       .react-loading-skeleton {
-        margin-bottom: calc(-1 * var(--pgn-spacing-card-loading-skeleton-spacer));
+        margin-bottom: -$loading-skeleton-spacer;
         position: relative;
-        top: calc(-1 * var(--pgn-spacing-card-loading-skeleton-spacer));
+        top: -$loading-skeleton-spacer;
         height: 100%;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
@@ -348,14 +349,14 @@ a.pgn__card {
 
     .pgn__card-logo-cap {
       position: absolute;
-      inset-inline-start: var(--pgn-spacing-card-logo-left-offset-base);
-      bottom: calc(-1 * var(--pgn-spacing-card-logo-bottom-offset-base));
-      width: var(--pgn-size-card-logo-width);
-      height: var(--pgn-size-card-logo-height);
-      border-radius: var(--pgn-size-card-border-radius-logo);
-      box-shadow: var(--pgn-elevation-box-shadow-level-1);
+      inset-inline-start: $card-logo-left-offset;
+      bottom: #{-$card-logo-bottom-offset};
+      width: $card-logo-width;
+      height: $card-logo-height;
+      border-radius: $card-logo-border-radius;
+      box-shadow: $level-1-box-shadow;
       padding: map_get($spacers, 2);
-      background-color: var(--pgn-color-white);
+      background-color: $white;
       display: none;
 
       &.show {
@@ -367,13 +368,13 @@ a.pgn__card {
   .pgn__card-status {
     box-shadow: none;
     margin-bottom: 0;
-    font-size: var(--pgn-typography-font-size-sm);
+    font-size: $font-size-sm;
     line-height: 1.5rem;
     text-align: start;
     position: relative;
-    padding: var(--pgn-spacing-card-spacer-y) var(--pgn-spacing-card-spacer-x);
+    padding: $card-spacer-y $card-spacer-x;
     border: 0 solid transparent;
-    border-radius: 0 0 var(--pgn-size-card-border-radius-base) var(--pgn-size-card-border-radius-base);
+    border-radius: 0 0 $card-border-radius $card-border-radius;
 
     .pgn__card-status__content {
       display: flex;
@@ -392,10 +393,10 @@ a.pgn__card {
     }
 
     .pgn__card-status__heading {
-      font-size: var(--pgn-typography-font-size-h4);
-      color: var(--pgn-color-black);
+      font-size: $h4-font-size;
+      color: $black;
       display: flex;
-      font-weight: var(--pgn-typography-font-weight-bold);
+      font-weight: $font-weight-bold;
       line-height: 1.5rem;
       margin-bottom: .5rem;
     }
@@ -420,13 +421,13 @@ a.pgn__card {
     }
 
     &.pgn__card-status__primary {
-      color: var(--pgn-color-white);
-      background-color: var(--pgn-color-primary-500);
-      border-color: var(--pgn-color-primary-500);
-      box-shadow: 0 0 0 1px var(--pgn-color-primary-500);
+      color: $white;
+      background-color: $primary-500;
+      border-color: $primary-500;
+      box-shadow: 0 0 0 1px $primary-500;
 
       .pgn__card-status__content-icon {
-        color: var(--pgn-color-white);
+        color: $white;
       }
     }
   }
@@ -438,15 +439,15 @@ a.pgn__card {
   border: 0;
 
   %dark-variant-content {
-    color: var(--pgn-color-white);
+    color: $white;
 
     a {
-      color: var(--pgn-color-white);
+      color: $white;
     }
   }
 
   &.pgn__card-dark {
-    background-color: var(--pgn-color-card-bg-dark);
+    background-color: $card-bg-dark;
 
     @extend %dark-variant-content;
 
@@ -478,11 +479,11 @@ a.pgn__card {
   }
 
   &.pgn__card-muted {
-    background-color: var(--pgn-color-card-bg-muted);
+    background-color: $card-bg-muted;
   }
 }
 
-@media (--pgn-size-breakpoint-max-width-xs) {
+@media (max-width: map-get($grid-breakpoints, "sm")) {
   .pgn__card-footer {
     &.horizontal > :not(:last-child) {
       margin-inline-end: 0;

package/src/Carousel/_variables.scss

@@ -0,0 +1,27 @@
+// Carousel
+
+$carousel-control-color:             $white !default;
+$carousel-control-width:             15% !default;
+$carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
+
+$carousel-indicator-width:           30px !default;
+$carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer:          3px !default;
+$carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
+
+$carousel-caption-width:             70% !default;
+$carousel-caption-color:             $white !default;
+
+$carousel-control-icon-width:        20px !default;
+
+$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+
+$carousel-transition-duration:       .6s !default;
+
+// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-transition:                transform $carousel-transition-duration ease-in-out !default;

package/src/Carousel/index.scss

@@ -1,168 +1,2 @@
-.carousel {
-  position: relative;
-}
-
-.carousel.pointer-event {
-  touch-action: pan-y;
-}
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-  @include clearfix();
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  transition: var(--pgn-transition-carousel-base);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  transform: translateX(-100%);
-}
-
-.carousel-fade {
-  .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
-  }
-
-  .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    z-index: 1;
-    opacity: 1;
-  }
-
-  .active.carousel-item-left,
-  .active.carousel-item-right {
-    z-index: 0;
-    opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
-  }
-}
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--pgn-size-carousel-control-width-base);
-  padding: 0;
-  color: var(--pgn-color-carousel-control-base);
-  text-align: center;
-  background: none;
-  border: 0;
-  opacity: var(--pgn-other-carousel-control-opacity-base);
-  transition: var(--pgn-transition-carousel-control);
-
-  @include hover-focus() {
-    color: var(--pgn-carousel-control-color);
-    text-decoration: none;
-    outline: 0;
-    opacity: var(--pgn-other-carousel-control-opacity-hover);
-  }
-}
-
-.carousel-control-prev {
-  left: 0;
-
-  @if $enable-gradients {
-    background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
-  }
-}
-
-.carousel-control-next {
-  right: 0;
-
-  @if $enable-gradients {
-    background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
-  }
-}
-
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: var(--pgn-size-carousel-control-width-icon);
-  height: var(--pgn-size-carousel-control-width-icon);
-  background: 50% / 100% 100% no-repeat;
-}
-
-.carousel-control-prev-icon {
-  background-image: var(--pgn-content-carousel-control-bg-prev-icon);
-}
-
-.carousel-control-next-icon {
-  background-image: var(--pgn-content-carousel-control-bg-next-icon);
-}
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0;
-  margin-right: var(--pgn-size-carousel-control-width-base);
-  margin-left: var(--pgn-size-carousel-control-width-base);
-  list-style: none;
-
-  li {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: var(--pgn-size-carousel-indicator-width);
-    height: var(--pgn-size-carousel-indicator-height-base);
-    margin-right: var(--pgn-spacing-carousel-indicator-spacer);
-    margin-left: var(--pgn-spacing-carousel-indicator-spacer);
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: var(--pgn-color-carousel-indicator-active-bg);
-    background-clip: padding-box;
-    border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
-    border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
-    opacity: .5;
-    transition: var(--pgn-transition-carousel-indicator);
-  }
-
-  .active {
-    opacity: 1;
-  }
-}
-
-.carousel-caption {
-  position: absolute;
-  right: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
-  bottom: 20px;
-  left: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: var(--pgn-color-carousel-caption);
-  text-align: center;
-}
+@import "variables";
+@import "~bootstrap/scss/carousel";