From 43727cbb66969445dcb16bfc65bfd48b96a87c74 Mon Sep 17 00:00:00 2001
From: knuch <knuchelf@gmail.com>
Date: Fri, 10 Aug 2018 15:56:44 +0200
Subject: [PATCH] implement highlight left

---
 .../fullwidth-teaser-left.twig                | 40 +++++++++++++++++++
 .../fullwidth-teaser/fullwidth-teaser.scss    | 21 ++++++++++
 .../fullwidth-teaser/fullwidth-teaser.yml     |  4 +-
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 assets/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig

diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig
new file mode 100644
index 000000000..a0e1d312f
--- /dev/null
+++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-left.twig
@@ -0,0 +1,40 @@
+<div class="fullwidth-teaser fullwidth-teaser-left">
+  <picture>
+    {% if not img %}{% set img %}./images/basic_page_teaser.jpg{% endset %}{% endif %}
+    <img src="{{img}}" aria-labelledby="background-label" alt="An image description"/>
+  </picture>
+
+  <div class="fullwidth-teaser-text">
+
+    <div class="fullwidth-teaser-header">
+      <div class="fullwidth-teaser-title">
+        <h3>
+          {% if not title %}{% set title %}Des océans plus froids que ce que nous le pensions{% endset %}{% endif %}
+          {{title}}
+        </h3>
+        <ul class="list-inline mt-2">
+          <li class="list-inline-item">Actualités</li>
+          <li class="list-inline-item">Biologie</li>
+        </ul>
+      </div>
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary triangle-outer-top-right d-none d-xl-block">
+        Lire l'article
+        <span class="sr-only">sur Tech Transfer.</span>
+        {% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
+      </a>
+    </div>
+
+    <div class="fullwidth-teaser-content">
+      <p>
+        {% if not content %}
+        {% set content %}Une équipe de chercheurs de l’EPFL et européenne a découvert une erreur dans la façon dont ont été estimées jusqu’ici les températures des océans, faisant potentiellement du réchauffement climatique actuel un évènement sans précédent ces cent derniers millions d’années.{% endset %}
+        {% endif %}
+        {{content}}
+      </p>
+    </div>
+
+    <div class="fullwidth-teaser-footer">
+      <a href="#" aria-label="Link to read more of that page" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
+    </div>
+  </div>
+</div>
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
index 65bc6632a..bd005e960 100644
--- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
+++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
@@ -249,3 +249,24 @@
     }
   }
 }
+
+.fullwidth-teaser-left {
+
+  @include media-breakpoint-up(md) {
+    picture img {
+      right: -10%;
+      left: auto;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    picture img {
+      right: 0;
+    }
+    .fullwidth-teaser-text {
+      right: auto;
+      left: 2rem;
+    }
+  }
+}
+
diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
index bc5f94535..74ff0390d 100644
--- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
+++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
@@ -2,4 +2,6 @@ title: Fullwidth teaser
 name: fullwidth-teaser
 variants:
   - name: horizontal
-    title: Horizontal
\ No newline at end of file
+    title: Horizontal
+  - name: left
+    title: Left aligned
\ No newline at end of file