richie-education 2.34.1-dev4 → 2.34.1-dev45

package/scss/colors/_theme.scss

@@ -47,6 +47,14 @@ $r-theme: (
     item-cta-hollow-background: transparent,
     item-cta-hollow-border: transparent,
     item-divider-border: r-color('light-grey'),
+    dropdown-border-radius: 8px,
+    dropdown-padding: 0.5rem,
+    dropdown-gap: 0.5rem,
+    dropdown-background-color: r-color('azure2'),
+    dropdown-item-background-color: r-color('indianred3'),
+    dropdown-item-text-color: r-color('white'),
+    dropdown-item-border-radius: 4px,
+    dropdown-item-padding: 0.5rem 1rem,
   ),
   body-content: (
     base-color: r-color('black'),
@@ -209,8 +217,8 @@ $r-theme: (
   ),
   course-glimpse: (
     card-background: r-color('white'),
-    base-shadow: 0 0 6px r-color('light-grey'),
-    base-hover-shadow: 0 0 6px r-color('battleship-grey'),
+    base-shadow: 0 0 8px #00000033,
+    base-hover-shadow: 0 0 4px #00000055,
     cta-background: r-color('battleship-grey'),
     empty-color: r-color('slate-grey'),
     icon-shadow: (
@@ -224,8 +232,15 @@ $r-theme: (
     organization-color: r-color('firebrick6'),
     code-color: r-color('battleship-grey'),
     svg-icon-fill: r-color('white'),
-    footer: $battleship-grey-scheme,
     organization-shadow: 0 0 6px r-color('light-grey'),
+    footer: $battleship-grey-scheme,
+    footer-offer-paid: $indianred3-scheme,
+    footer-offer-subscription: $indianred3-scheme,
+    footer-offer-partially_free: $indianred3-scheme,
+    footer-offer-certificate: null,
+    offer-icon-visibility: visible,
+    offer-certificate-icon-visibility: visible,
+    offer-price-visibility: visible,
   ),
   category-badges: (
     primary-item: $indianred3-scheme,
@@ -483,6 +498,8 @@ $r-theme: (
   ),
   program-detail: (
     cover-empty-background: r-color('smoke'),
+    checkmark-list-decoration: url('../../richie/images/components/checkmark.svg'),
+    checkmark-list-decoration-color: r-color('indianred3'),
   ),
   registered-credit-card: (
     title-color: r-color('charcoal'),

package/scss/components/_header.scss

@@ -168,6 +168,10 @@
       flex-wrap: nowrap;
     }
 
+    & > .topbar__list {
+      position: relative;
+    }
+
     // Aside menu variation
     &--aside {
       @include sv-flex(1, 0, auto);
@@ -197,6 +201,81 @@
   // Menu item element
   &__item {
     $item-selector: &;
+    &.dropdown {
+      display: block;
+      position: static;
+
+      & > button {
+        width: 100%;
+
+        & > .icon {
+          height: 1rem;
+          margin-left: 0.5rem;
+          width: 1rem;
+        }
+      }
+
+      & ul[role='menu'] {
+        padding-left: 0.5rem;
+      }
+    }
+
+    @include media-breakpoint-up($r-topbar-breakpoint) {
+      &.dropdown {
+        // See header_menu.html for the definition of the variables
+        --active-background-color: #{r-theme-val(topbar, dropdown-item-background-color)};
+        --active-text-color: #{r-theme-val(topbar, dropdown-item-text-color)};
+
+        & > button[aria-expanded='true'] {
+          background-color: r-theme-val(topbar, dropdown-background-color);
+        }
+
+        & > button[aria-expanded='true'] + .topbar__sublist {
+          display: block;
+        }
+
+        & > .topbar__sublist {
+          background: r-theme-val(topbar, dropdown-background-color);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+          border-radius: r-theme-val(topbar, dropdown-border-radius);
+          display: none;
+          position: absolute;
+          transform: translateX(-8px);
+          width: max-content;
+          max-width: 100%;
+
+          & > ul[role='menu'] {
+            display: flex;
+            flex-wrap: wrap;
+            gap: r-theme-val(topbar, dropdown-gap);
+            padding: r-theme-val(topbar, dropdown-padding);
+          }
+
+          & .topbar__item > a {
+            background-color: #fff;
+            border-radius: r-theme-val(topbar, dropdown-item-border-radius);
+            padding: r-theme-val(topbar, dropdown-item-padding);
+            &::after {
+              display: none;
+            }
+
+            &:is(:focus, :hover) {
+              background-color: var(--active-background-color);
+              color: var(--active-text-color);
+            }
+          }
+
+          &--full-width {
+            left: 0;
+            transform: inherit;
+          }
+
+          &--position-right {
+            transform: translateX(calc(-100% + (var(--button-width) + 8px)));
+          }
+        }
+      }
+    }
 
     @include sv-flex(1, 0, auto);
     display: flex;
@@ -213,15 +292,23 @@
       --r--menu--item--hover--color: #{r-theme-val(topbar, item-hover-color)};
     }
 
-    & > a {
+    & > button {
+      @include button-reset-style();
+      --radius: #{r-theme-val(topbar, dropdown-border-radius)};
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    & > a,
+    & > button {
       @include sv-flex(1, 0, 100%);
+      align-items: center;
+      color: inherit;
       display: flex;
-      padding: 1rem 0.2rem 1rem 1rem;
       flex-direction: row;
-      align-items: center;
       font-family: inherit;
       font-weight: inherit;
-      color: inherit;
+      justify-content: space-between;
+      padding: 1rem 0.2rem 1rem 1rem;
 
       @include media-breakpoint-up($r-topbar-breakpoint) {
         padding: 1rem 1rem;
@@ -235,18 +322,22 @@
 
           // If there is no default hover color we assume there is also no variant
           @if r-theme-val(topbar, item-hover-color) {
-            &::after {
-              content: '';
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              height: 8px;
+            &:is(a)::after {
               background-color: var(--r--menu--item--hover--color);
               border-top-left-radius: 0.2rem;
               border-top-right-radius: 0.2rem;
+              bottom: 0;
+              content: '';
+              height: 8px;
+              left: 0;
+              position: absolute;
+              right: 0;
             }
           }
+
+          &:is(button) {
+            background-color: r-theme-val(topbar, dropdown-background-color);
+          }
         }
       }
     }
@@ -257,8 +348,10 @@
 
     // Current page item or current ancestor
     &--selected,
-    &--ancestor {
-      & > a {
+    &--ancestor,
+    &:has(.topbar__sublist .topbar__item.topbar__item--selected) {
+      & > a,
+      & > button {
         position: relative;
         color: r-theme-val(topbar, item-active-color);
 
@@ -328,7 +421,8 @@
     }
 
     // Item divider
-    & + #{$item-selector} {
+    & + #{$item-selector},
+    & > .topbar__list #{$item-selector} {
       @if r-theme-val(topbar, item-divider-border) {
         border-top: $onepixel solid r-theme-val(topbar, item-divider-border);
       }

package/scss/components/_subheader.scss

@@ -170,6 +170,41 @@ $r-subheader-search-title-width: 19rem !default; // aligned on computed search r
       position: relative;
       padding-bottom: 56.25%; // Aspect ratio 16/9
 
+      .video-player-image {
+        img {
+          filter: brightness(0.85);
+          object-fit: cover;
+        }
+        img,
+        span {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          bottom: 0;
+          margin: auto;
+        }
+        span {
+          text-align: center;
+          font: 48px/1.5 sans-serif;
+          fill: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        span svg {
+          transition: 0.5s;
+          width: 85px;
+          height: 85px;
+        }
+        img:hover,
+        span:hover svg {
+          fill-opacity: 1;
+          filter: drop-shadow(3px 3px 30px rgb(0 0 0 / 0.65));
+        }
+        span svg {
+          filter: drop-shadow(3px 3px 12px rgb(0 0 0 / 0.25));
+        }
+      }
       iframe {
         height: 100%;
         position: absolute;

package/scss/components/templates/courses/cms/_program_detail.scss

@@ -2,11 +2,13 @@
 //
 
 .program-detail {
+  $detail-selector: &;
   margin: 0 auto;
   padding: 0;
 
   &__block {
     @include detail-block;
+
     @if $body-padding-fix {
       @include content-padding-fix($target: '&:last-child');
     }
@@ -54,6 +56,75 @@
     padding-right: $grid-gutter-width;
   }
 
+  &__objectives {
+    ul {
+      padding-left: 0.3rem;
+      list-style-type: none;
+
+      li {
+        position: relative;
+        margin-top: 0.5rem;
+        font-size: 1rem;
+        padding-left: 1.5rem;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0.2rem;
+          left: 0;
+          width: 0.8rem;
+          height: 0.8rem;
+          background-repeat: no-repeat;
+          background-color: r-theme-val(program-detail, checkmark-list-decoration-color);
+          -webkit-mask: r-theme-val(program-detail, checkmark-list-decoration);
+          mask: r-theme-val(program-detail, checkmark-list-decoration);
+          -webkit-mask-size: cover;
+          mask-size: cover;
+        }
+      }
+    }
+  }
+
+  &__content {
+    @include media-breakpoint-up(lg) {
+      padding-right: 3rem;
+    }
+  }
+
+  &__aside {
+    padding: 1rem 0;
+
+    @include media-breakpoint-up(lg) {
+      @include sv-flex(1, 0, $r-program-aside);
+      padding: 3rem 1rem;
+    }
+
+    #{$detail-selector}__row {
+      margin-bottom: 1.5rem;
+    }
+
+    #{$detail-selector}__title {
+      @include font-size($h3-font-size);
+      padding-bottom: 1rem;
+
+      @if r-theme-val(course-detail, aside-title-border) {
+        border-bottom: $onepixel solid r-theme-val(course-detail, aside-title-border);
+      }
+    }
+  }
+
+  &__main {
+    @include media-breakpoint-up(lg) {
+      @include sv-flex(1, 0, calc(100% - #{$r-program-subheader-aside}));
+      display: flex;
+      justify-content: flex-start;
+      align-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+  }
+
   &__courses {
     @include make-col-ready();
     @include make-col(12);

package/scss/objects/_course_glimpses.scss

@@ -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,
@@ -322,9 +332,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 +362,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 +420,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