Merge branch 'dev' into styleguide/nav-aside-width

assets/components/atoms/button/button-tertiary-states.twig

@@ -0,0 +1,4 @@
+<button class="btn btn-tertiary hover">Tertiary hover</button>
+<button class="btn btn-tertiary active">Tertiary active</button>
+<button class="btn btn-tertiary focus">Tertiary focus</button>
+<button class="btn btn-tertiary" disabled>Tertiary disabled</button>

assets/components/atoms/button/button-tertiary.twig

@@ -0,0 +1 @@
+<button class="btn btn-tertiary">Tertiary action</button>

assets/components/atoms/button/button.scss

@@ -123,6 +123,47 @@ input[type="button"] {
   }
 }
 
+.btn-tertiary {
+  background: $canard;
+  font-weight: $font-weight-bold;
+  color: $white;
+
+  &:hover,
+  &.hover {
+    background: $canard-dark;
+    border-color: $canard-dark;
+    color: $white;
+  }
+
+  &:focus,
+  &:focus-visible,
+  &.focus {
+    outline-color: $canard-dark !important;
+    color: $white;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    // ugly ↓
+    // background: linear-gradient(to bottom, $canard-dark 0%, $red 100%);
+    background: color.adjust($canard-dark, $lightness: -10%);
+    border-color: color.adjust($canard-dark, $lightness: -10%);
+  }
+
+  &:disabled,
+  &.disabled {
+    background: $gray-100;
+    border-color: $gray-300;
+    color: $gray-300;
+
+    .bg-dark & {
+      background: $black;
+      border-color: $gray-600;
+      color: $gray-600;
+    }
+  }
+}
+
 .btn-light {
   &,
   &:hover {

assets/components/atoms/button/button.yml

@@ -22,6 +22,14 @@ variants:
     title: Secondary states preview
     notes: |
       *For previewing purposes only. **Do not use in production!***
+  - name: tertiary
+    title: Button tertiary
+    notes: |
+      For less aggressive buttons that are still in line with the EPFL graphic charter.
+  - name: tertiary-states
+    title: Tertiary states preview
+    notes: |
+      *For previewing purposes only. **Do not use in production!***
 notes: |
   Button is your interaction friend when you want people to complete an action. By clicking a button, people expect to trigger an event, confirm a form or load a new page. Don't put many buttons on one single page. The primary action should be obvious for people.
 

assets/components/atoms/picture/picture-avatar.twig

@@ -1,18 +1,19 @@
+{% set avatar_path = avatar_path|default("./images/styleguide/people/avatar-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+    srcset="{{avatar_path}}120x120.jpg 1x, {{avatar_path}}256x256.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+    srcset="{{avatar_path}}95x95.jpg 1x, {{avatar_path}}180x180.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
+    srcset="{{avatar_path}}80x80.jpg 1x, {{avatar_path}}160x160.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/60x60.jpg 1x,https://via.placeholder.com/120x120.jpg 2x">
+    srcset="{{avatar_path}}60x60.jpg 1x, {{avatar_path}}120x120.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/90x90.jpg 1x,https://via.placeholder.com/180x180.jpg 2x">
-  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid rounded-circle" alt="ALT">
+    srcset="{{avatar_path}}95x95.jpg 1x, {{avatar_path}}180x180.jpg 2x">
+  <img src="{{avatar_path}}120x120.jpg" class="img-fluid rounded-circle" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-cover.twig

@@ -1,19 +1,19 @@
-{% set cover_path = cover_path|default("https://via.placeholder.com/") %}
+{% set cover_path = cover_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2880x1620.jpg 2x">
+    srcset="{{cover_path}}1920x1080.jpg 1x,{{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2280x1283.jpg 2x">
+    srcset="{{cover_path}}1140x641.jpg 1x,{{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="{{cover_path}}960x540.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
+    srcset="{{cover_path}}928x520.jpg 1x,{{cover_path}}1920x1080.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="{{cover_path}}720x405.jpg 1x,{{cover_path}}1440x810.jpg 2x">
+    srcset="{{cover_path}}768x432.jpg 1x,{{cover_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="{{cover_path}}540x304.jpg 1x,{{cover_path}}1080x608.jpg 2x">
+    srcset="{{cover_path}}576x324.jpg 1x,{{cover_path}}1080x608.jpg 2x">
   <img src="{{cover_path}}1920x1080.jpg" class="img-fluid" alt="Cover description">
 </picture>

assets/components/atoms/picture/picture-fullwidth-teaser.twig

@@ -1,21 +1,19 @@
-{% if not img %}
-{% set img %}./images/styleguide/teaser/news-teaser{% endset %}
-{% endif %}
+{% set cover_path = cover_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1920px)"
-    srcset="{{img}}-1920x1080.jpg 1x, {{img}}-2240x1260.jpg 2x">
+    srcset="{{cover_path}}1920x1080.jpg 1x, {{cover_path}}2240x1260.jpg 2x">
   <source
     media="(min-width: 1366px)"
-    srcset="{{img}}-1440x810.jpg 1x, {{img}}-1920x1080.jpg 2x">
+    srcset="{{cover_path}}1440x810.jpg 1x, {{cover_path}}1920x1080.jpg 2x">
   <source
     media="(min-width: 1200px)"
-    srcset="{{img}}-1294x728.jpg 1x, {{img}}-1600x900.jpg 2x">
+    srcset="{{cover_path}}1294x728.jpg 1x, {{cover_path}}1600x900.jpg 2x">
   <source
     media="(min-width: 576px)"
-    srcset="{{img}}-768x432.jpg 1x, {{img}}-1440x810.jpg 2x">
+    srcset="{{cover_path}}768x432.jpg 1x, {{cover_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 575px)"
-    srcset="{{img}}-576x324.jpg 1x, {{img}}-1140x641.jpg 2x">
-  <img src="{{img}}-1440x810.jpg" class="img-fluid" alt="image description">
+    srcset="{{cover_path}}576x324.jpg 1x, {{cover_path}}1140x641.jpg 2x">
+  <img src="{{cover_path}}1440x810.jpg" class="img-fluid" alt="image description">
 </picture>

assets/components/atoms/picture/picture-one-third-square.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+    srcset="{{img_path}}480x480.jpg 1x, {{img_path}}780x780.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/1140x1140.jpg 1x,https://via.placeholder.com/2280x2280.jpg 2x">
+    srcset="{{img_path}}360x360.jpg 1x, {{img_path}}780x780.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/960x960.jpg 1x,https://via.placeholder.com/1920x1920.jpg 2x">
+    srcset="{{img_path}}360x360.jpg 1x, {{img_path}}640x640.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/240x240.jpg 1x,https://via.placeholder.com/480x480.jpg 2x">
+    srcset="{{img_path}}780x780.jpg 1x, {{img_path}}1440x1440.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/180x180.jpg 1x,https://via.placeholder.com/360x360.jpg 2x">
-  <img src="https://via.placeholder.com/1140x1140.jpg" class="img-fluid" alt="ALT">
+    srcset="{{img_path}}640x640.jpg 1x, {{img_path}}1080x1080.jpg 2x">
+  <img src="{{img_path}}780x780.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-one-third.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+    srcset="{{img_path}}380x214.jpg 1x, {{img_path}}768x432.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/380x214.jpg 1x,https://via.placeholder.com/760x428.jpg 2x">
+    srcset="{{img_path}}380x214.jpg 1x, {{img_path}}768x432.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/320x180.jpg 1x,https://via.placeholder.com/640x360.jpg 2x">
+    srcset="{{img_path}}320x180.jpg 1x, {{img_path}}640x360.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}768x432.jpg 1x, {{img_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/380x214.jpg" class="img-fluid" alt="ALT">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}380x214.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-portrait.twig

@@ -1,18 +1,19 @@
+{% set portrait_path = portrait_path|default("./images/styleguide/people/portrait-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+    srcset="{{portrait_path}}211x300.jpg 1x, {{portrait_path}}422x600.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+    srcset="{{portrait_path}}253x360.jpg 1x, {{portrait_path}}506x720.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
-  <img src="https://via.placeholder.com/506x720.jpg" class="img-fluid" alt="ALT">
+    srcset="{{portrait_path}}211x300.jpg 1x, {{portrait_path}}422x600.jpg 2x">
+  <img src="{{portrait_path}}506x720.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-question.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/homepage/7-science-question/science-question-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="./images/styleguide/homepage/7-science-question-SF.jpg 1x, ./images/styleguide/homepage/7-science-question-SF.jpg 2x">
+    srcset="{{img_path}}540x304.jpg 1x, {{img_path}}1080x608.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/475x267.jpg 1x,https://via.placeholder.com/950x534.jpg 2x">
+    srcset="{{img_path}}960x540.jpg 1x, {{img_path}}1440x810.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/400x225.jpg 1x,https://via.placeholder.com/800x450.jpg 2x">
+    srcset="{{img_path}}720x405.jpg 1x, {{img_path}}1080x608.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}540x304.jpg 1x, {{img_path}}1080x608.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="./images/styleguide/homepage/7-science-question-SF.jpg" class="img-fluid" alt="ALT">
+    srcset="{{img_path}}540x304.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}720x405.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture-thumb-square.twig

@@ -1,8 +1,19 @@
+{% set thumb_path = thumb_path|default("./images/styleguide/news-thumbs/news_thumb-") %}
 <picture>
-  <source media="(min-width: 1140px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source media="(min-width: 960px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
-  <source media="(min-width: 720px)" srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
-  <source media="(min-width: 541px)" srcset="https://via.placeholder.com/120x120.jpg 1x,https://via.placeholder.com/240x240.jpg 2x">
-  <source media="(max-width: 540px)" srcset="https://via.placeholder.com/540x540.jpg 1x,https://via.placeholder.com/1080x1080.jpg 2x">
-  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid" alt="ALT">
+  <source
+    media="(min-width: 1140px)"
+    srcset="{{thumb_path}}95x95.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="{{thumb_path}}80x80.jpg 1x, {{thumb_path}}160x160.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="{{thumb_path}}120x120.jpg 1x, {{thumb_path}}240x240.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="{{thumb_path}}540x540.jpg 1x, {{thumb_path}}1080x1080.jpg 2x">
+  <img src="{{thumb_path}}120x120.jpg" class="img-fluid" alt="ALT">
 </picture>

assets/components/atoms/picture/picture.twig

@@ -1,18 +1,19 @@
+{% set img_path = img_path|default("./images/styleguide/teaser/news-teaser-") %}
 <picture>
   <source
     media="(min-width: 1140px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1140x641.jpg 2x">
   <source
     media="(min-width: 960px)"
-    srcset="https://via.placeholder.com/570x321.jpg 1x,https://via.placeholder.com/1140x641.jpg 2x">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1140x641.jpg 2x">
   <source
     media="(min-width: 720px)"
-    srcset="https://via.placeholder.com/480x270.jpg 1x,https://via.placeholder.com/960x540.jpg 2x">
+    srcset="{{img_path}}508x286.jpg 1x, {{img_path}}928x520.jpg 2x">
   <source
     media="(min-width: 541px)"
-    srcset="https://via.placeholder.com/720x405.jpg 1x,https://via.placeholder.com/1440x810.jpg 2x">
+    srcset="{{img_path}}768x432.jpg 1x, {{img_path}}1440x810.jpg 2x">
   <source
     media="(max-width: 540px)"
-    srcset="https://via.placeholder.com/540x304.jpg 1x,https://via.placeholder.com/1080x608.jpg 2x">
-  <img src="https://via.placeholder.com/570x321.jpg" class="img-fluid" alt="image description">
+    srcset="{{img_path}}576x324.jpg 1x, {{img_path}}1080x608.jpg 2x">
+  <img src="{{img_path}}576x324.jpg" class="img-fluid" alt="image description">
 </picture>

assets/components/atoms/picture/picture.yml

@@ -12,7 +12,7 @@ variants:
       Picture used in 'Organism > Fullwidth teaser' and 'News > Highlighted'.
   - name: avatar
     title: Avatar
-    wrapper: col-sm-4 col-md-2 col-lg-1
+    wrapper: col-sm-4 col-md-2
     notes: |
       Avatar picture need an equal height and width in order to be displayed as a circle
   - name: portrait
@@ -25,6 +25,7 @@ variants:
     wrapper: col-md-4
   - name: one-third-square
     title: One third Square picture
+    wrapper: col-md-4
   - name: news-thumb
     title: News Listing Thumbnail
     wrapper: col-3 col-md-2