richie-education 2.34.1-dev10 → 2.34.1-dev16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.34.1-dev10",
+  "version": "2.34.1-dev16",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

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'),

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,76 @@
   // 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);
+          max-width: 100%;
+
+          &--full-width {
+            left: 0;
+            transform: inherit;
+          }
+
+          & > 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);
+            }
+          }
+        }
+      }
+    }
 
     @include sv-flex(1, 0, auto);
     display: flex;
@@ -213,15 +287,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 +317,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 +343,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 +416,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/objects/_selector.scss

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