Merge branch 'dev' into styleguide/blog-single-width

assets/components/atoms/button/button.scss

@@ -70,7 +70,7 @@ input[type="button"] {
 
 .btn-secondary {
   background: transparent;
-  border-color: $gray-300;
+  border-color: $gray-500;
 
   .bg-dark & {
     border-color: $gray-600;

assets/components/atoms/definition-list/definition-list-grid.twig

@@ -3,15 +3,15 @@
   <dt>Fonction</dt>
   <dd>Chercheur</dd>
   <dt>Unité</dt>
-  <dd><a class="link-pretty" href="#">Laboratoire de métallurgie mécanique</a></dd>
+  <dd><a href="#">Laboratoire de métallurgie mécanique</a></dd>
   <dt>Domaines de recherche</dt>
   <dd>
     <a href="#" class="tag tag-primary">Inorganic Chemistry</a>
     <a href="#" class="tag tag-primary">Organic Chemistry</a>
     <a href="#" class="tag tag-primary">Renewable Energy</a>
   </dd>
   <dt>Bureau</dt>
-  <dd><a class="link-pretty" href="#">BM 42</a></dd>
+  <dd><a href="#">BM 42</a></dd>
   <dt class="definition-list-item-full">A propos</dt>
   <dd class="definition-list-item-full">Research at the Laboratory of Mechanical Metallurgy addresses the science and engineering of advanced metallic materials. Our activities and interests span the entire spectrum from materials processing to the exploration of links between the microstructure and the properties of materials. Materials we study are made at least in part of metal and can be destined for structural or for functional applications.</dd>
 </dl>

assets/components/atoms/dropdown/dropdown.scss

@@ -7,4 +7,29 @@
     background: $primary;
     color: $white !important;
   }
+
+  .icon {
+    margin-right: 0.25rem;
+    vertical-align: middle;
+  }
+
+  .icon + * {
+    vertical-align: middle;
+  }
+}
+
+li.dropdown-item:before {
+  content: none;
 }
+
+.dropdown {
+  .dropdown-toggle:after {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &.show {
+    .dropdown-toggle:after {
+      transform: rotate(180deg);
+    }
+  }
+}

assets/components/atoms/input/input.scss

@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 .form-control {
+  border-color: $input-border-color;
   height: auto;
   transition:
     color 0.3s,

assets/components/atoms/link/link-bg-variants.twig

@@ -0,0 +1,5 @@
+<p><strong class="pr-3">Dark:</strong> <span class="p-3 d-inline-block bg-dark"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Danger:</strong> <span class="p-3 d-inline-block bg-danger"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Success:</strong> <span class="p-3 d-inline-block bg-success"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Info:</strong> <span class="p-3 d-inline-block bg-info"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Warning:</strong> <span class="p-3 d-inline-block bg-warning"><a href="#">Teaching & PhD</a></span></p>

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

@@ -0,0 +1,2 @@
+<a class="btn btn-primary" href="#">Primary button link</a>
+<a class="btn btn-secondary" href="#">Secondary button link</a>

assets/components/atoms/link/link.scss

@@ -23,22 +23,78 @@ a {
       text-decoration-color: $body-color;
     }
   }
+
+  .text-white &,
+  &.text-white {
+    text-decoration-color: currentcolor;
+
+    @include hover-focus-active {
+      text-decoration-color: transparent;
+    }
+  }
+
+  // add styles for background color variants
+  @each $color, $value in $theme-colors {
+    .bg-#{$color} & {
+      color: color-yiq($value);
+      text-decoration-color: currentcolor;
+
+      @include hover-focus-active {
+        text-decoration-color: transparent;
+      }
+    }
+  }
+}
+
+a,
+a:hover,
+a:focus,
+a:active,
+a:visited {
+  text-decoration-thickness: 0.08em;
+  text-decoration-thickness: min(0.08em, 0.1rem);
+  text-underline-offset: 0.14em;
 }
 
 // Manage all the underline colors based on `text-` helper class.
 @each $color, $value in $theme-colors {
   @include text-emphasis-variant-decoration(".text-#{$color}", $value);
 }
 
-// Special case for white links.
-@include text-emphasis-variant-decoration(".text-white", $white);
-
 // The link pretty allows you to have more cross-browser friendly link styles and the fancy focus box.
+// Removed in July 2023, text-decoration color is now well supported by all major broswers: https://caniuse.com/mdn-css_properties_text-decoration-color
+/*
 .link-pretty {
   @include link-pretty($red, $body-bg);
 
   @extend .focused;
 }
+*/
+
+// Fix for existing links with class '.link-pretty'
+
+.nav-link.link-pretty {
+  text-decoration: underline;
+  text-decoration-color: $link-hover-color;
+  text-decoration-thickness: 0.08em;
+  text-decoration-thickness: min(0.08em, 0.1rem);
+  text-underline-offset: 0.14em;
+
+  @include hover-focus-active {
+    text-decoration-color: $link-color;
+  }
+}
+
+.bg-dark .link-pretty,
+.bg-gray-600 .link-pretty{
+  color: #fff;
+
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration-color: #fff;
+  }
+}
 
 // Link collapse, see collapse component
 

assets/components/atoms/link/link.twig

@@ -1,4 +1,3 @@
-<p><strong class="pr-3">Vanilla link:</strong> <a href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
-<p><strong class="pr-3">Pretty link:</strong> <a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></p>
-<p class="mt-4"><strong class="pr-3">Dark link:</strong> <span class="p-3 bg-dark"><a class="text-white" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>
-<p class="mt-4"><strong class="pr-3">Dark pretty link:</strong><span class="p-3 bg-dark"><a class="link-pretty" href="http://bit.ly/2DLIPLo">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Regular link:</strong> <a href="#">Teaching & PhD</a></p>
+<p><strong class="pr-3">Light background:</strong> <span class="p-3 d-inline-block bg-gray-100"><a href="#">Teaching & PhD</a></span></p>
+<p><strong class="pr-3">Dark background:</strong> <span class="p-3 d-inline-block bg-gray-600"><a class="text-white" href="#">Teaching & PhD</a></span></p>

assets/components/atoms/link/link.yml

@@ -12,15 +12,22 @@ notes: >
   browsers](https://caniuse.com/#feat=text-decoration). In other browsers, the underline
   uses text color.
 
-  The `link-pretty` class creates a better and more cross-browser style.
-
   The `link-collapse` class sets the link to have a red triangle and special
   styles.
 variants:
+  - name: bg-variants
+    title: Background variants
+    notes:
   - name: icon
     title: Icon
     notes: |
       You can set up a link with a custom icon. The icon will automatically be at the other end of the element (with flex).
   - name: login
     title: Login link
     notes:
+  - name: button
+    title: Button link
+    notes: |
+      Use the classes `btn`, `btn-primary` or `btn-secondary` to create a link with the look of a button.
+
+      ⚠️ Button links should be used to target a page or section of a page – like a regular link. To trigger an action, use an [HTML button](#/atoms/button).

assets/components/atoms/nav-lang/nav-lang.scss

@@ -220,12 +220,12 @@
     .dropdown-toggle,
     .dropdown-item {
       width: auto;
-      height: 2.125rem;
-      padding: ($spacer * 0.4) ($spacer * 1.5) ($spacer * 0.4) ($spacer * 0.5);
+      height: 2.5rem;
+      padding: ($spacer * 0.5) ($spacer * 1.5) ($spacer * 0.5) ($spacer * 0.625);
     }
 
     .icon {
-      transform: translateY($spacer * 0.1);
+      display: none;
     }
   }
 }

assets/components/atoms/nav-lang/nav-lang.twig

@@ -1,8 +1,8 @@
 <nav class="nav-lang ml-auto dropdown" aria-label="Change language">
-  <a href="#" class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
+  <button class="dropdown-toggle btn btn-secondary" aria-haspopup="true" aria-expanded="false" data-toggle="dropdown">
     {% include '@atoms/icon/icon.twig' with {icon: 'icon-planet'} %}
     <span>FR</span>
-  </a>
+  </button>
   <ul class="dropdown-menu">
     <li>
       <a aria-label="Français (Current language)" class="active dropdown-item" >

assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.scss

@@ -5,12 +5,16 @@
   flex-flow: row nowrap;
   align-items: baseline;
   margin: 0;
-  padding: (.8 * $spacer) (.9 * $spacer);
+  padding: (.8125 * $spacer) (.875 * $spacer);
   font-size: 1 * $font-size-base;
   font-weight: bold !important;
-
+  
   @include media-breakpoint-up(sm) {
-    padding: (.625 * $spacer) (.9 * $spacer);
+    padding: (.5 * $spacer) (.9375 * $spacer);
+  }
+
+  @include media-breakpoint-up(md) {
+    padding: (.625 * $spacer) (.9375 * $spacer);
   }
 
   .label {

assets/components/atoms/nav-toggle-mobile/nav-toggle-mobile.twig

@@ -1,8 +1,8 @@
-<div class="btn btn-secondary nav-toggle-mobile d-xl-none">
+<button class="btn btn-secondary nav-toggle-mobile d-xl-none">
   <span class="label">Menu</span>
   <div class="hamburger">
     <span></span>
     <span></span>
     <span></span>
   </div>
-</div>
+</button>

assets/components/atoms/nav-user/nav-user-login.twig

@@ -0,0 +1,6 @@
+<div class="nav-user user-login mr-lg-2">
+  <a href="#" class="user-login-link">
+    {% include '@atoms/icon/icon.twig' with {'icon': 'user', icon_classes: 'feather'} %}
+    <span class="label">Connexion</span>
+  </a>
+</div>

assets/components/atoms/nav-user/nav-user.scss

@@ -0,0 +1,133 @@
+.user-dropdown .btn {
+  display: flex;
+  align-items: center;
+  padding: $btn-padding-y-sm $btn-padding-x-sm;
+  border: 0;
+
+  .user-avatar {
+    --avatar-size: 2.5rem;
+    flex-basis: var(--avatar-size);
+    width: var(--avatar-size);
+
+    @include media-breakpoint-up(sm) {
+      --avatar-size: 2.625rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      --avatar-size: 2.875rem;
+    }
+  }
+
+  p {
+    margin: 0 0.5rem 0 1rem;
+  }
+}
+
+.header .nav-user {
+  margin-left: auto;
+
+
+  & + .nav-lang {
+    margin-left: 0 !important;
+  }
+}
+
+.nav-user.user-login {
+  position: relative;
+  padding-left: 1.5rem;
+
+  .icon {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    margin-right: 0.25rem;
+  }
+}
+
+
+@include media-breakpoint-down(lg) {
+  .header .nav-user {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+
+  .header .nav-user-login {
+    padding: 0;
+
+    .user-login-link {
+      padding: 0.5em;
+    }
+
+    .label {
+      @include sr-only;
+    }
+    .icon {
+      position: static;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin: 0;
+    }
+  }
+
+  .header .nav-user {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+
+    & + .nav-lang-short > ul {
+      padding-left: 0 !important;
+    }
+
+    .btn {
+      padding: $btn-padding-y-sm;
+    }
+
+    &:not(.show) {
+      .btn {
+        border-radius: 50%;
+
+        &:after {
+          content: none;
+        }
+      }
+      .user-name {
+        @include sr-only;
+      }
+    }
+
+    &.show {
+      position: fixed;
+      top: 0.625rem;
+      right: 0.75rem;
+      left: 0.75rem;
+      //width: calc(100vw - 1.8rem);
+      margin: 0;
+      background: white;
+      z-index: 1199;
+
+      .btn {
+        width: 100%;
+        padding-left: $btn-padding-y;
+        padding-right: $btn-padding-y;
+        border: 2px solid $gray-600;
+        border-bottom: 0;
+        border-radius: 2px 2px 0 0;
+
+        &:after {
+          margin-left: auto;
+        }
+      }
+
+      .dropdown-menu {
+        top: -2px !important;
+        left: 0 !important;
+        width: 100%;
+        border: 2px solid $gray-600;
+        border-top: 0;
+        border-radius: 0 0 2px 2px;
+      }
+    }
+  }
+}