richie-education 2.34.1-dev5 → 2.34.1-dev52

package/scss/components/templates/richie/slider/_slider.scss

@@ -1,142 +1,208 @@
-$r-slider-title-fontsize: $h1-font-size !default;
+$r-slider-slide-height: clamp(400px, 50vh, 600px) !default;
+$r-slider-title-fontsize: $h2-font-size !default;
 $r-slider-title-fontweight: $font-weight-bold !default;
 $r-slider-title-fontfamily: $headings-font-family !default;
-$r-slider-content-fontsize: $h4-font-size !default;
+$r-slider-content-fontsize: 1rem !default;
 $r-slider-content-line-height: 1.1 !default;
+$r-slider-content-line-clamp: 4 !default;
+.richie-react--slider {
+  min-height: $r-slider-slide-height;
+}
 
 .slider {
+  overflow: hidden;
   position: relative;
-  width: 100%;
-  // Reserved space for slide indexes
-  padding-bottom: 1.75rem;
+}
 
-  &__items {
-    display: flex;
-    overflow-x: hidden;
+.slider__slideshow {
+  display: flex;
+  height: $r-slider-slide-height;
+  position: relative;
+}
+
+.slider__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
+}
 
-  &__tools {
-    @include make-container-max-widths();
-    margin: 0 auto;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-content: center;
+.slider__slideshow-overlay {
+  @include make-container();
+  @include make-container-max-widths();
+  height: clamp(400px, 50vh, 600px);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: none;
+
+  // Re-enable pointer events for children
+  & > * {
+    pointer-events: auto;
   }
+}
 
-  &__next,
-  &__previous {
+.slider__navigation-button {
+  @include button-reset-style();
+  cursor: pointer;
+  margin: 0;
+  height: 100%;
+  padding: 0;
+  position: relative;
+  display: inline-block;
+  text-align: right;
+
+  $width: 50vw;
+  &:before {
+    content: '';
+    display: block;
+    width: $width;
+    height: 100%;
     position: absolute;
-    top: 25%;
-    left: 0;
-    right: 0;
-    background: none;
-    border: 0;
-
-    svg {
-      width: 5rem;
-      height: 5rem;
-      color: r-theme-val(slider-plugin, arrows-color);
-    }
+    top: 0;
+    z-index: -1;
+  }
 
-    &:hover {
-      svg {
-        color: r-theme-val(slider-plugin, arrows-hover-color);
-      }
+  &:first-child {
+    --hover-offet-x: -10%;
+    &:before {
+      left: $width * -1;
+    }
+  }
+  &:last-child {
+    --hover-offet-x: 10%;
+    &:before {
+      right: $width * -1;
     }
   }
 
-  &__next {
-    left: auto;
-    right: 0;
+  &:hover > .icon {
+    transform: scale(1.2) translateX(var(--hover-offet-x));
   }
 
-  &__previous {
-    left: 0;
-    right: auto;
+  & > .icon {
+    transition: transform 300ms $r-ease-out;
+    color: r-theme-val(slider-plugin, arrows-fill-color);
+    stroke: r-theme-val(slider-plugin, arrows-stroke-color);
+    stroke-width: r-theme-val(slider-plugin, arrows-stroke-width);
+    height: 4rem;
+    width: 4rem;
   }
+}
 
-  &__indexes {
-    @include make-container-max-widths();
-    margin: 0 auto;
-    width: 100%;
-    padding: 0.5rem;
-    position: absolute;
-    bottom: 0;
+.slider__panel {
+  @include make-container();
+  @include make-container-max-widths();
+
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.slider__bullet {
+  &-list {
     display: flex;
-    justify-content: flex-end;
+    flex-direction: row;
+    gap: 6px;
     align-items: center;
+    justify-content: flex-end;
   }
 
-  &__index {
-    @include sv-flex(1, 0, 1.9rem);
-    padding: 0;
-    height: 1rem;
-    background: transparent;
-    border: 0;
+  &-item {
+    @include button-reset-style();
+    cursor: pointer;
+    width: 2rem;
+    transform-origin: left center;
+    padding-block: 1rem;
+    position: relative;
+    display: block;
 
-    &::before {
+    &:before {
       content: '';
       display: block;
-      height: 0.2rem;
-      background: r-theme-val(slider-plugin, index-color);
-      border: 0;
+      width: 100%;
+      height: 3px;
+      border-radius: 50vw;
+      background-color: r-theme-val(slider-plugin, index-color);
+      position: absolute;
+      transform-origin: left center;
+      transition: height 400ms $r-ease-out;
+      translate: 0 -50%;
+      transform: scaleY(1);
     }
 
-    &--active {
-      pointer-events: none;
-
-      &::before {
-        height: 0.5rem;
-      }
+    &:hover:before,
+    &:focus:before,
+    &--active:before {
+      height: 7px;
     }
 
-    &:hover {
-      &::before {
-        background: r-theme-val(slider-plugin, index-hover-color);
-      }
+    &:hover:before,
+    &:focus:before {
+      background-color: r-theme-val(slider-plugin, index-hover-color);
     }
-  }
 
-  &__index + &__index {
-    margin-left: 0.3rem;
+    &--active:before {
+      background-color: r-theme-val(slider-plugin, index-active-color);
+    }
   }
 }
 
-.slider-item {
-  @include sv-flex(1, 0, 100%);
-  display: block;
-  color: inherit;
-  text-decoration: none;
-
-  // Disable any hover event on content since it can be in a link
-  &:hover,
-  *:hover {
-    color: inherit !important;
-    text-decoration: none !important;
-  }
+.slide__content {
+  max-width: 680px;
 
-  &__image {
-    display: block;
-    margin: 0 0 1rem 0;
-    width: 100%;
-  }
+  &--transitioning {
+    .slide__title > span,
+    .slide__description {
+      transition: inherit;
+    }
 
-  &__container {
-    @include make-container-max-widths();
-    position: relative;
-    margin: 0 auto;
-  }
+    .slide__title > span {
+      transform: translateY(150%);
+      opacity: 0;
+    }
 
-  &__title {
-    @include font-size($r-slider-title-fontsize);
-    font-family: $r-slider-title-fontfamily;
-    font-weight: $r-slider-title-fontweight;
-    margin: 0 0 0.5rem 0;
+    .slide__description {
+      opacity: 0;
+    }
   }
+}
 
-  &__content {
-    @include font-size($r-slider-content-fontsize);
-    line-height: $r-slider-content-line-height;
+.slide__title {
+  overflow: hidden;
+  display: inline-block;
+  font-size: $r-slider-title-fontsize;
+  font-weight: $r-slider-title-fontweight;
+  font-family: $r-slider-title-fontfamily;
+
+  & > span {
+    display: inline-block;
+    transform: translateY(0%);
+    opacity: 1;
+    transition-property: transform, opacity;
+    transition-duration: 0.8s, 0.4s;
+    transition-delay: 0s, 0.1s;
+    transition-timing-function: $r-ease-out, $r-ease-in;
   }
 }
+
+.slide__description {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $r-slider-content-line-clamp;
+  line-clamp: $r-slider-content-line-clamp;
+  display: -webkit-box;
+  overflow: hidden;
+  min-height: $r-slider-content-line-clamp *
+    ($r-slider-content-fontsize * $r-slider-content-line-height);
+  opacity: 1;
+  transition: opacity 0.3s 0.4s $r-ease-in;
+  font-size: $r-slider-content-fontsize;
+  line-height: $r-slider-content-line-height;
+}

package/scss/objects/_course_glimpses.scss

@@ -4,6 +4,7 @@
 
 // Course-glimpse-list related variables
 $r-course-glimpse-gutter: 0.8rem !default;
+$r-course-glimpse-title-line-height: 1.3em;
 
 .course-glimpse-list {
   @include make-container-max-widths();
@@ -46,7 +47,6 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   // Apply card styles for elements
   @include m-o-card(
     $border: 0,
-    $background: r-theme-val(course-glimpse, card-background),
     $media-margin: 0,
     $wrapper-padding: 1.7rem $course-glimpse-content-padding-sides 0.5rem,
     $foot-divider: null
@@ -57,10 +57,8 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
 
   position: relative;
   margin: $r-course-glimpse-gutter;
-  border-radius: $border-radius-lg;
-  box-shadow: r-theme-val(course-glimpse, base-shadow);
+
   min-width: 16rem;
-  overflow: hidden;
 
   @include media-breakpoint-up(sm) {
     @include sv-flex(1, 0, calc(50% - #{$r-course-glimpse-gutter * 2}));
@@ -83,8 +81,16 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     pointer-events: auto;
   }
 
-  &:hover,
-  &:focus-within {
+  &__body {
+    box-shadow: r-theme-val(course-glimpse, base-shadow);
+    border-radius: $border-radius-lg;
+    overflow: hidden;
+    transition: box-shadow 0.5s $r-ease-out;
+    z-index: 1;
+  }
+
+  &:hover &__body,
+  &:focus-within &__body {
     color: inherit;
     text-decoration: none;
     border: 0;
@@ -149,6 +155,7 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   &__content {
     font-size: 0.9rem;
     color: r-theme-val(course-glimpse, content-color);
+    background: map-get(r-theme-val(course-glimpse, footer), 'background');
   }
 
   &__wrapper {
@@ -156,6 +163,9 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     display: flex;
     flex-direction: column;
     position: relative;
+    color: r-theme-val(course-glimpse, card-background);
+    border-radius: 0 0 $border-radius-lg $border-radius-lg;
+    background-color: r-theme-val(course-glimpse, card-background);
   }
 
   &__title,
@@ -165,7 +175,7 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     font-family: $r-font-family-montserrat;
     font-weight: $font-weight-boldest;
     flex: 1 0 1.3em * 3; // 3 lines;
-    line-height: 1.3em;
+    line-height: $r-course-glimpse-title-line-height;
     margin-bottom: 1rem;
   }
 
@@ -190,11 +200,14 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   }
 
   &__title-text {
+    --max-lines: 3;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: var(--max-lines);
+    line-clamp: var(--max-lines);
     display: block;
     display: -webkit-box;
     overflow: hidden;
+    min-height: calc($r-course-glimpse-title-line-height * var(--max-lines));
   }
 
   &__link:focus &__title-text {
@@ -322,9 +335,26 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
   border-bottom-left-radius: $border-radius-lg;
   border-bottom-right-radius: $border-radius-lg;
   font-size: 0.7rem;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 0;
+  transition: transform 0.25s $r-ease-out;
 
-  &__date {
-    @include sv-flex(1, 0, auto);
+  &:after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: -15px;
+    height: 30px;
+    left: 0;
+    right: 0;
+    @include r-button-colors(r-theme-val(course-glimpse, footer), $apply-border: true);
+    z-index: -1;
+  }
+
+  &__column {
+    @include sv-flex(0, 130px, auto);
     display: flex;
     margin: 0;
     padding: 0.45rem 0;
@@ -335,7 +365,54 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     .icon {
       margin-right: 0.5rem;
     }
+
+    span {
+      display: inline-block;
+      max-width: 15ch;
+      font-variant-numeric: tabular-nums;
+    }
   }
+
+  &__price {
+    .offer-certificate__icon {
+      $visibility: r-theme-val(course-glimpse, offer-certificate-icon-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+    }
+    .offer__icon {
+      $visibility: r-theme-val(course-glimpse, offer-icon-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+    }
+
+    .offer__icon {
+      margin-right: 0;
+      & + .offer__price {
+        margin-left: 0.25rem;
+      }
+    }
+
+    .offer__price {
+      $visibility: r-theme-val(course-glimpse, offer-price-visibility);
+      @if $visibility == hidden {
+        display: none;
+      }
+      visibility: $visibility;
+      // Align vertically the price with the icon
+      margin-top: calc(1ex - 1cap);
+    }
+  }
+}
+
+.course-glimpse:hover .course-glimpse-footer,
+.course-glimpse:hover .course-glimpse__large-footer,
+.course-glimpse:focus-within .course-glimpse-footer,
+.course-glimpse:focus-within .course-glimpse__large-footer {
+  transform: translateY(4px);
 }
 
 //
@@ -346,3 +423,25 @@ $course-glimpse-content-padding-sides: 0.7rem !default;
     @include sv-flex(1, 0, calc(33.33333% - #{$r-course-glimpse-gutter * 2}));
   }
 }
+
+// Course Glimpse Variant according to the offer
+$offer-schemes: (
+  certificate: r-theme-val(course-glimpse, footer-offer-certificate),
+  free: r-theme-val(course-glimpse, footer-offer-free),
+  paid: r-theme-val(course-glimpse, footer-offer-paid),
+  partially_free: r-theme-val(course-glimpse, footer-offer-partially_free),
+  subscription: r-theme-val(course-glimpse, footer-offer-subscription),
+);
+
+@each $offer, $scheme in $offer-schemes {
+  @if $scheme != null {
+    .course-glimpse--offer-#{$offer} {
+      .course-glimpse-footer {
+        @include r-button-colors($scheme, $apply-border: true);
+        &:after {
+          background: map-get($scheme, 'background');
+        }
+      }
+    }
+  }
+}

package/scss/objects/_selector.scss

@@ -1,5 +1,6 @@
 .selector {
   position: relative;
+  z-index: 200;
 
   &__button {
     appearance: none;

package/scss/settings/_variables.scss

@@ -152,11 +152,13 @@ $r-footer-logo-width-lg: 11.875rem !default;
 // full width like common blocks. Usefull if you plan to remove course run from
 // template
 $r-course-aside: 35% !default;
+$r-program-aside: 25% !default;
 
 // Subheader aside column width in course detail. Unlike, $r-course-aside this
 // variable cannot be null. Otherwise to homegenize layout, it should have the
 // same value than $r-course-aside.
 $r-course-subheader-aside: 35% !default;
+$r-program-subheader-aside: 25% !default;
 
 // Course search page shared variables
 $r-search-filters-gutter: 0.2rem !default;
@@ -173,6 +175,8 @@ $r-section-grid-sizes: (
   '33x33x33': 1fr 1fr 1fr,
   '25x75': 25% 2fr,
   '75x25': 2fr 25%,
+  '35x65': 35% 2fr,
+  '65x35': 2fr 35%,
 );
 
 // Define gutter size to apply on Section grid