@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/Card/card-bootstrap.scss

@@ -0,0 +1,168 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: var(--pgn-color-card-bg-base);
+  background-clip: border-box;
+  border: var(--pgn-size-card-border-width) solid var(--pgn-color-card-border-base);
+  position: relative;
+
+  @include border-radius(calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)));
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+
+      @include border-top-radius(
+        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
+      );
+    }
+
+    &:last-child {
+      border-bottom-width: 0;
+
+      @include border-bottom-radius(
+        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
+      );
+    }
+  }
+
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
+}
+
+.card-body {
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: var(--pgn-spacing-card-spacer-x);
+  color: var(--pgn-color-card-base);
+}
+
+// Card deck
+.card-deck {
+  .card {
+    margin-bottom: var(--pgn-spacing-card-margin-deck);
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: calc(var(--pgn-spacing-card-margin-deck) * -1);
+    margin-left: calc(var(--pgn-spacing-card-margin-deck) * -1);
+
+    .card {
+      flex: 1 0 0%;
+      margin-right: var(--pgn-spacing-card-margin-deck);
+      margin-bottom: 0; // Override the default
+      margin-left: var(--pgn-spacing-card-margin-deck);
+    }
+  }
+}
+
+// Card groups
+.card-group {
+  > .card {
+    margin-bottom: var(--pgn-spacing-card-margin-group);
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+
+    > .card {
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-right-radius: 0;
+          }
+
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            border-top-left-radius: 0;
+          }
+
+          .card-img-bottom,
+          .card-footer {
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Columns
+.card-columns {
+  .card {
+    margin-bottom: var(--pgn-spacing-card-columns-margin);
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: var(--pgn-spacing-card-columns-count);
+    column-gap: var(--pgn-spacing-card-columns-gap);
+    orphans: 1;
+    widows: 1;
+
+    .card {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+}
+
+// Accordion
+.accordion {
+  overflow-anchor: none;
+
+  > .card {
+    overflow: hidden;
+
+    &:not(:last-of-type) {
+      border-bottom: 0;
+
+      @include border-bottom-radius(0);
+    }
+
+    &:not(:first-of-type) {
+      @include border-top-radius(0);
+    }
+
+    > .card-header {
+      @include border-radius(0);
+
+      margin-bottom: calc(var(--pgn-size-card-border-width) * -1);
+    }
+  }
+}

package/src/Card/index.scss

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