epfl-elements 5.5.0 → 5.7.0

package/dist/components/organisms/header/header-light-submenu.twig

@@ -0,0 +1,39 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+{% if long_nav_lang is not defined %}{% set long_nav_lang = false %}{% endif %}
+{% if nav_user is not defined %}{% set nav_user = false %}{% endif %}
+{% set site_title = site_title|default('sub site name') %}
+
+<header role="banner" class="header header-light">
+  <div class="header-light-content">
+    <a class="logo" href="https://www.epfl.ch">
+      <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
+    </a>
+    <p class="site-title">
+      <a href="#">{{site_title}}</a>
+    </p>
+    <ul class="nav-header d-none d-xl-flex">
+      <li class="dropdown">
+        <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownSubMenu-1">
+          Liste des options
+        </button>
+        <ul id="dropdownSubMenu-1" class="dropdown-menu" aria-labelledby="dropdownMenuButton-1">
+          <li class="dropdown-item"><a href="#">Option 1</a></li>
+          <li class="dropdown-item current-menu-item"><a href="#">Option 2</a></li>
+          <li class="dropdown-item"><a href="#">Option 3</a></li>
+        </ul>
+      </li>
+    </ul>
+    {% include '@molecules/search/search-mobile.twig' %}
+    {% include '@molecules/search/search.twig' %}
+    {%  if nav_user %}
+      {% include '@atoms/nav-user/nav-user.twig' %}
+    {% endif %}
+    {%  if long_nav_lang %}
+      {% include '@atoms/nav-lang/nav-lang.twig' %}
+    {% endif %}
+    {%  if long_nav_lang == false %}
+      {% include '@atoms/nav-lang/nav-lang-short.twig' %}
+    {% endif %}
+    {% include '@atoms/nav-toggle-mobile/nav-toggle-mobile.twig' %}
+  </div>
+</header>

package/dist/components/organisms/header/header-light.twig

@@ -11,25 +11,12 @@
     <p class="site-title">
       <a href="#">{{site_title}}</a>
     </p>
-    <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
-      {% if dropdown %}
-      <li class="dropdown">
-        <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Liste des options
-        </button>
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-          <a class="dropdown-item" href="#">Option 1</a>
-          <a class="dropdown-item active" href="#">Option 2</a>
-          <a class="dropdown-item" href="#">Option 3</a>
-        </div>
-      </li>
-      {% else %}
-        {% for i in 1..5 %}
+    <ul class="nav-header d-none d-xl-flex">
+      {% for i in 1..5 %}
       <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
         <a class="nav-item" href="#">Page {{ i }}</a>
       </li>
-        {% endfor %}
-      {% endif %}
+      {% endfor %}
     </ul>
     {% include '@molecules/search/search-mobile.twig' %}
     {% include '@molecules/search/search.twig' %}

package/dist/components/organisms/header/header.yml

@@ -11,6 +11,19 @@ variants:
       * EPFL logo should link to the main EPFL website (https://www.epfl.ch);
       * Sub site name should link to the sub site homepage (e.g. https://actu.epfl.ch, https://people.epfl.ch, etc );
       * Use `<p class="site-title">` for the sub site title rather than a `<h1>` tag – `<h1>` title should be placed in the page content instead.
+  - name: light-submenu
+    title: Header light with submenu
+    notes: |
+      * EPFL logo should link to the main EPFL website (https://www.epfl.ch);
+      * Sub site name should link to the sub site homepage (e.g. https://actu.epfl.ch, https://people.epfl.ch, etc );
+      * Use `<p class="site-title">` for the sub site title rather than a `<h1>` tag – `<h1>` title should be placed in the page content instead.
+
+      ⚠️ **Be very careful with the use of ARIA for the submenu component** (remember: no ARIA is better than bad ARIA). The following attributes should be used:
+        * `aria-haspopup="true"`, `aria-expanded="false"` and `aria-controls="dropdownSubMenuID"` **on the submenu toggle button** (`.dropdown-toggle`).
+          * When the submenu is open, `aria-expanded` will automatically be set to `true`.
+          * `dropdownSubMenuID` must match the ID of `.dropdown-menu`.
+          * `aria-labelledby="dropdownMenuButton"` **on the submenu `<ul>` wrapper** (`.dropdown-menu`).
+          * `dropdownMenuButton` must match the ID of the submenu toggle button (`.dropdown-toggle`).
   - name: light-drawer
     title: Header light with drawer
     notes: |

package/dist/components/pages/event-detail/event-detail.twig

@@ -3,7 +3,7 @@
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}
-  {% include '@organisms/header/header-light.twig' with { site_title: 'Event title', dropdown: true } %}
+  {% include '@organisms/header/header-light-submenu.twig' with { site_title: 'Event title' } %}
 {% endblock %}
 
 {% block breadcrumb %}

package/dist/components/pages/event-list/event-list.twig

@@ -10,16 +10,16 @@
         <img src="svg/epfl-logo.svg" alt="Logo EPFL, École polytechnique fédérale de Lausanne" class="img-fluid">
       </a>
       <h1>Memento</h1>
-      <ul aria-hidden="true" class="nav-header d-none d-xl-flex">
+      <ul class="nav-header d-none d-xl-flex">
         <li class="dropdown">
-          <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button class="btn btn-link dropdown-toggle nav-item" type="button" id="dropdownMenuButton-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownSubMenu-1">
             Mémentos
           </button>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-            <a class="dropdown-item" href="#">Option 1</a>
-            <a class="dropdown-item active" href="#">Option 2</a>
-            <a class="dropdown-item" href="#">Option 3</a>
-          </div>
+          <ul id="dropdownSubMenu-1" class="dropdown-menu" aria-labelledby="dropdownMenuButton-1">
+            <li class="dropdown-item"><a href="#">Option 1</a></li>
+            <li class="dropdown-item current-menu-item"><a href="#">Option 2</a></li>
+            <li class="dropdown-item"><a href="#">Option 3</a></li>
+          </ul>
         </li>
         <li id="menu-item-{{ loop.index }}" {% if loop.index == 2 %} class="current-menu-item"{% endif %}>
           <a class="nav-item" href="#">Annoncer un événement</a>
@@ -54,11 +54,11 @@
 
 <div class="container mt-5">
   <h3 class="h6">Prochains événements</h3>
-  
+
   <div class="events-filters mt-4">
-    
+
     <form action="" method="get">
-      
+
       {% include '@molecules/form-group/form-group-search.twig' %}
 
       <div class="form-group form-group-select form-group-categories">
@@ -109,17 +109,17 @@
           <option value="">Expert</option>
         </select>
       </div>
-      
+
       <div class="dropdown dropdown-date">
         <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Date</button>
         <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
           {% include '@molecules/datepicker/datepicker.twig' %}
         </div>
       </div>
-      
+
     </form>
   </div>
-  
+
   <div class="event-filter-tags mt-2">
     <div class="tag-group">
       <label for="">Filtres de recherche</label>
@@ -133,7 +133,7 @@
       </div>
     </div>
   </div>
-  
+
   <div class="events-footer mt-3">
     <div class="d-md-flex flex-md-row-reverse justify-content-md-between align-items-md-center">
       <div class="events-links">
@@ -147,7 +147,7 @@
       </div>
     </div>
   </div>
-  
+
   <div class="list-group list-events mt-4">
     {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online_room', live_now: true } %}
     {% include '@molecules/list-group/list-group-event.twig' with { eventLocation: 'online', live_now: true } %}
@@ -158,7 +158,7 @@
       {% include '@molecules/list-group/list-group-event.twig' %}
     {% endfor %}
   </div>
-  
+
 </div>
 {% endblock %}
 

package/dist/components/pages/facultes/facultes.twig

@@ -3,7 +3,7 @@
 
 {% set nav_aside_items = [{
   label: "Facultés",
-  children: ["Architecture, Civil and Environmental Engineering ENAC", "Basic Sciences SB", "Engineering STI", "Computer and Communication Sciences IC", "Life Sciences SV", "Management of Technology CDM", "College of Humanities CDH", "EPFL Middle East"]
+  children: ["Architecture, Civil and Environmental Engineering ENAC", "Basic Sciences SB", "Engineering STI", "Computer and Communication Sciences IC", "Life Sciences SV", "Management of Technology CDM"]
 }] %}
 {% set nav_aside_active = 0 %}
 

package/dist/components/pages/news-homepage/news-homepage.twig

@@ -4,9 +4,8 @@
 {% extends "@templates/base/base.twig" %}
 
 {% block header %}
-  {% include '@organisms/header/header-light.twig' with {
-    site_title: 'Actu',
-    dropdown: true
+  {% include '@organisms/header/header-light-submenu.twig' with {
+    site_title: 'Actu'
   } %}
 {% endblock %}
 

package/dist/css/elements.css

@@ -4074,7 +4074,7 @@ a.badge-tertiary:focus, a.badge-tertiary.focus {
 }
 
 .alert-link {
-  font-weight: 700;
+  font-weight: 400;
 }
 
 .alert-dismissible {
@@ -11121,7 +11121,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #e60000;
 }
 .alert-primary .alert-link {
-  color: #cc0000;
+  color: #212121;
+  text-decoration-color: #ff0000;
+}
+.alert-primary .alert-link:hover, .alert-primary .alert-link:focus, .alert-primary .alert-link:active, .alert-primary .alert-link:visited {
+  color: #ff0000;
+  text-decoration-color: #212121;
 }
 
 .alert-secondary {
@@ -11131,7 +11136,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #f2f2f2;
 }
 .alert-secondary .alert-link {
-  color: #e6e6e6;
+  color: #212121;
+  text-decoration-color: #fff;
+}
+.alert-secondary .alert-link:hover, .alert-secondary .alert-link:focus, .alert-secondary .alert-link:active, .alert-secondary .alert-link:visited {
+  color: #fff;
+  text-decoration-color: #212121;
 }
 
 .alert-success {
@@ -11141,7 +11151,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #71bd1e;
 }
 .alert-success .alert-link {
-  color: #64a71a;
+  color: #212121;
+  text-decoration-color: #7ed321;
+}
+.alert-success .alert-link:hover, .alert-success .alert-link:focus, .alert-success .alert-link:active, .alert-success .alert-link:visited {
+  color: #7ed321;
+  text-decoration-color: #212121;
 }
 
 .alert-info {
@@ -11151,7 +11166,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #3483de;
 }
 .alert-info .alert-link {
-  color: #2275d7;
+  color: #212121;
+  text-decoration-color: #4a90e2;
+}
+.alert-info .alert-link:hover, .alert-info .alert-link:focus, .alert-info .alert-link:active, .alert-info .alert-link:visited {
+  color: #4a90e2;
+  text-decoration-color: #212121;
 }
 
 .alert-warning {
@@ -11161,7 +11181,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #f39c0b;
 }
 .alert-warning .alert-link {
-  color: #db8c0a;
+  color: #212121;
+  text-decoration-color: #f5a623;
+}
+.alert-warning .alert-link:hover, .alert-warning .alert-link:focus, .alert-warning .alert-link:active, .alert-warning .alert-link:visited {
+  color: #f5a623;
+  text-decoration-color: #212121;
 }
 
 .alert-danger {
@@ -11171,7 +11196,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #e60000;
 }
 .alert-danger .alert-link {
-  color: #cc0000;
+  color: #212121;
+  text-decoration-color: #ff0000;
+}
+.alert-danger .alert-link:hover, .alert-danger .alert-link:focus, .alert-danger .alert-link:active, .alert-danger .alert-link:visited {
+  color: #ff0000;
+  text-decoration-color: #212121;
 }
 
 .alert-light {
@@ -11181,7 +11211,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #d9d9d9;
 }
 .alert-light .alert-link {
-  color: #cdcdcd;
+  color: #212121;
+  text-decoration-color: #e6e6e6;
+}
+.alert-light .alert-link:hover, .alert-light .alert-link:focus, .alert-light .alert-link:active, .alert-light .alert-link:visited {
+  color: #e6e6e6;
+  text-decoration-color: #212121;
 }
 
 .alert-dark {
@@ -11191,7 +11226,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #141414;
 }
 .alert-dark .alert-link {
-  color: #080808;
+  color: #212121;
+  text-decoration-color: #212121;
+}
+.alert-dark .alert-link:hover, .alert-dark .alert-link:focus, .alert-dark .alert-link:active, .alert-dark .alert-link:visited {
+  color: #212121;
+  text-decoration-color: #212121;
 }
 
 .alert-tertiary {
@@ -11201,7 +11241,12 @@ button.tag.tag-plain:focus .remove {
   border-top-color: #005d67;
 }
 .alert-tertiary .alert-link {
-  color: #00464d;
+  color: #212121;
+  text-decoration-color: #007480;
+}
+.alert-tertiary .alert-link:hover, .alert-tertiary .alert-link:focus, .alert-tertiary .alert-link:active, .alert-tertiary .alert-link:visited {
+  color: #007480;
+  text-decoration-color: #212121;
 }
 
 .alert-success:before {
@@ -11902,9 +11947,6 @@ header.collapse-title + .collapse-item:before {
     height: 2.5rem;
     padding: 0.5rem 1.5rem 0.5rem 0.625rem;
   }
-  .nav-lang .icon {
-    display: none;
-  }
 }
 .nav-toggle-mobile {
   display: flex;
@@ -12253,13 +12295,13 @@ ol ul > li:before {
 .list-unstyled li,
 .list-inline li,
 .nav li,
-nav li {
+nav:not(.table-of-contents) li {
   padding-left: 0;
 }
 .list-unstyled li:before,
 .list-inline li:before,
 .nav li:before,
-nav li:before {
+nav:not(.table-of-contents) li:before {
   content: none;
 }
 
@@ -12425,9 +12467,17 @@ a.research-icon:hover, a.research-icon:focus {
   }
 }
 
-.custom-select {
+.custom-select,
+.ms-choice {
   border-color: #8e8e8e;
 }
+.custom-select:focus,
+.ms-choice:focus {
+  border-color: #212121;
+  box-shadow: none !important;
+  outline: 2px solid #707070;
+  outline-offset: 2px;
+}
 
 .ms-offscreen {
   clip: rect(0 0 0 0) !important;
@@ -12465,11 +12515,6 @@ a.research-icon:hover, a.research-icon:focus {
   line-height: 1.5;
   color: #212121;
 }
-.ms-choice:focus {
-  border-color: #212121;
-  box-shadow: inset 0 1px 2px rgba(33, 33, 33, 0.075), 0 0 5px rgba(33, 33, 33, 0.5);
-  outline: none;
-}
 .ms-choice.disabled {
   background-color: #d5d5d5;
   background-image: none;
@@ -13350,6 +13395,8 @@ figcaption {
     color: #fff;
     box-shadow: none !important;
     border-radius: 0;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
   }
   .search-mobile .form-control::-moz-placeholder, .search-mobile .selectize-control .selectize-input::-moz-placeholder, .selectize-control .search-mobile .selectize-input::-moz-placeholder {
     color: #c1c1c1;
@@ -13357,6 +13404,10 @@ figcaption {
   .search-mobile .form-control::placeholder, .search-mobile .selectize-control .selectize-input::placeholder, .selectize-control .search-mobile .selectize-input::placeholder {
     color: #c1c1c1;
   }
+  .search-mobile .form-control:focus-visible, .search-mobile .selectize-control .selectize-input:focus-visible, .selectize-control .search-mobile .selectize-input:focus-visible {
+    outline-color: white !important;
+    outline-offset: 0;
+  }
   .search-mobile .input-group-text {
     background: #212121;
     border-radius: 0;
@@ -14215,11 +14266,6 @@ article aside {
   top: 2px;
 }
 
-.invalid-label,
-.form-group .invalid-label {
-  color: #ff0000;
-}
-
 .search-container {
   position: relative;
 }
@@ -14241,6 +14287,33 @@ article aside {
   color: #212121;
 }
 
+.form-control.is-valid, .selectize-control .is-valid.selectize-input {
+  border-color: #699b32;
+  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%278%27 height=%278%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23699b32%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e");
+}
+
+.valid-label,
+.valid-feedback,
+.form-group .valid-label {
+  color: #487915;
+}
+
+.invalid-label,
+.invalid-feedback,
+.form-group .invalid-label {
+  color: #c73333;
+}
+
+.form-control.is-valid,
+.selectize-control .is-valid.selectize-input {
+  border-color: #699b32 !important;
+}
+
+.form-control.is-invalid,
+.selectize-control .is-invalid.selectize-input {
+  border-color: #ff0000 !important;
+}
+
 .gallery.is-fullscreen {
   z-index: 1120 !important; /* eslint disable line */
   max-width: none;
@@ -15326,6 +15399,16 @@ ol.flickity-page-dots li:before {
   position: absolute;
 }
 
+.table-of-contents ul:not(.list-inline) li:before {
+  content: "";
+}
+.table-of-contents ol:last-child, .table-of-contents ul:last-child {
+  margin-bottom: 0;
+}
+.table-of-contents .list-inline li {
+  font-size: 1rem;
+}
+
 .table, .semaineDeRef {
   width: 100%;
 }
@@ -17061,20 +17144,17 @@ a.nav-arrow:hover .icon-container {
 }
 .header .nav-header li a:hover,
 .header .nav-header li a.open,
-.header .nav-header li a.active, .header .nav-header li.active a,
-.header .nav-header li a:focus, .header .nav-header li.current-menu-item a {
+.header .nav-header li a.active, .header .nav-header li.active a, .header .nav-header li.current-menu-item a {
   color: #ff0000;
 }
 .header .nav-header li a:hover:before,
 .header .nav-header li a.open:before,
-.header .nav-header li a.active:before, .header .nav-header li.active a:before,
-.header .nav-header li a:focus:before, .header .nav-header li.current-menu-item a:before {
+.header .nav-header li a.active:before, .header .nav-header li.active a:before, .header .nav-header li.current-menu-item a:before {
   content: none;
 }
 .header .nav-header li a:hover:after,
 .header .nav-header li a.open:after,
-.header .nav-header li a.active:after, .header .nav-header li.active a:after,
-.header .nav-header li a:focus:after, .header .nav-header li.current-menu-item a:after {
+.header .nav-header li a.active:after, .header .nav-header li.active a:after, .header .nav-header li.current-menu-item a:after {
   opacity: 1;
 }
 .header .nav-header li:before {
@@ -17099,16 +17179,30 @@ a.nav-arrow:hover .icon-container {
 .header .nav-header .dropdown .btn:focus:before {
   opacity: 1;
 }
-.header .nav-header .dropdown-item {
+.header .nav-header .dropdown-item > a,
+.header .nav-header a.dropdown-item {
+  width: 100%;
   padding: 0.25rem 1.25rem;
   font-weight: 400;
 }
-.header .nav-header .dropdown-item:after {
+.header .nav-header .dropdown-item > a:after,
+.header .nav-header a.dropdown-item:after {
   content: none;
 }
-.header .nav-header .dropdown-item:hover {
+.header .nav-header .dropdown-item > a:hover,
+.header .nav-header a.dropdown-item:hover {
   color: #212121;
 }
+.header .nav-header .dropdown-item > a:focus, .header .nav-header .dropdown-item > a:hover,
+.header .nav-header a.dropdown-item:focus,
+.header .nav-header a.dropdown-item:hover {
+  background: #e6e6e6;
+}
+.header .nav-header .dropdown-item.current-menu-item > a,
+.header .nav-header a.dropdown-item.active {
+  background: #707070;
+  color: #fff;
+}
 .header .nav-header .icon {
   font-size: 0.9em;
 }
@@ -18319,7 +18413,7 @@ a.cc-link {
 }
 .project-data .available {
   font-weight: bold;
-  color: #699b32;
+  color: #487915;
 }
 .project-data .completed {
   font-weight: bold;