Merge pull request #1216 from KysterMax/feature/breaking-news-new-styl

New styl for breaking news component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colette",
-  "version": "5.6.2",
+  "version": "5.6.3",
   "license": "MIT",
   "dependencies": {
     "@accede-web/accordion": "^1.1.0",

src/styl/_components/_breakingnews.styl

@@ -6,60 +6,51 @@
 // Markup: breakingnews.twig
 //
 // Styleguide: Components.BreakingNews
-/:root
-/[data-theme=light]
-/[data-theme] [data-theme=light]
-    --breakingnews-title-color: var(--color-highlight)
-
-/[data-theme=dark]
-/[data-theme] [data-theme=dark]
-    --breakingnews-title-color: var(--color-highlight-foreground)
 
 .breakingnews
+    _p(1 0)
     _fontload($fontstack-secondary)
-    display flex
-    background var(--color-bg-primary)
+    background var(--color-highlight)
+    color var(--color-highlight-foreground)
     font-weight bold
-    flex-wrap nowrap
-    align-items stretch
-    justify-content stretch
     border 0 // no border even it’s box
+    display flex
+    justify-content space-between
+    align-items center
 
-    &-label
-    &-title
-    &-cta
+    &-link
         display flex
         align-items center
-        line-height 1.3em
-
-    &-label
-        _p(1)
-        text-transform uppercase
-        background var(--color-highlight)
-        color var(--color-highlight-foreground)
-        font-size .75em
-
-        @media $breakpoints.md
-            font-size 1em
-
-    &-title
-        _p(.5 1)
-        _fontload($fontstack-secondary)
-        flex-grow 1
-        min-height _rem(62px)
-        color var(--breakingnews-title-color)
-        font-size 1em
-        font-weight bold
-
-        @media $breakpoints.sm
-            font-size 1.375em
-
-    &-cta
-        _p(1)
-        display none
-        color var(--color-base)
-        font-weight bold
-        font-size .875em
 
-        @media $breakpoints.md
+        &-label
+        &-title
             display flex
+            align-items center
+            line-height 1.3em
+            padding 0 0.75rem
+
+        &-label
+            position relative
+            text-transform uppercase
+            font-size .75em
+
+            &:after
+                content ""
+                width 1px
+                height 100%
+                background-color var(--color-highlight-foreground)
+                position absolute
+                right 0
+
+            @media $breakpoints.md
+                font-size 1em
+
+        &-title
+            font-size _rem(16px)
+            font-weight bold
+
+    &-close
+        _p(0 2)
+        transform rotate(45deg)
+        background transparent
+        color $color-white

src/styl/_components/breakingnews.twig

@@ -1,5 +1,9 @@
-<a href="#" class="breakingnews box">
-    <span class="breakingnews-label">Breaking News</span>
-    <strong class="breakingnews-title">Important title of a new important article</strong>
-    <span class="breakingnews-cta">Read this article</span>
-</a>
+<section class="breakingnews" >
+    <a class="breakingnews-link" href="#">
+        <span class="breakingnews-link-label">
+            <svg width="30" height="30"><use xlink:href="#symbol-flash"></use></svg>Breaking News
+        </span>
+        <strong class="breakingnews-link-title">Important title of a new important article</strong>
+    </a>
+    <button class="breakingnews-close"><svg width="10" height="10"><use xlink:href="#symbol-cross"></use></svg></button>
+</section>