fix(links): change link with icon display - INNO-1829 (#1320)

ec-europa · Oct 4, 2019 · 2a7a565 · 2a7a565
1 parent 2484855
commit 2a7a565
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 14 deletions.
diff --git a/...plementations/vanilla/packages/ec-component-language-list/ec-component-language-list.scss b/...plementations/vanilla/packages/ec-component-language-list/ec-component-language-list.scss
@@ -1,6 +1,6 @@
 /**
  * Language list component
- * @define language-list
+ * @define language-list; weak
  */
 
 // Import base
@@ -67,6 +67,7 @@
   }
 
   .ecl-language-list__link {
+    align-items: center;
     background-color: $background-link;
     display: flex;
     font: $ecl-font-m;
@@ -81,6 +82,10 @@
     &:focus {
       outline-offset: -3px;
     }
+
+    .ecl-link__icon {
+      top: 0;
+    }
   }
 
   .ecl-language-list__item--is-active {

diff --git a/...ystems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link-print.scss b/...ystems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link-print.scss
@@ -19,15 +19,17 @@
 
   .ecl-link--icon-before,
   .ecl-link--icon-after {
-    align-items: center;
-    display: inline-flex;
+    display: inline-block;
   }
 
   .ecl-link--icon {
     text-decoration: none;
 
     .ecl-link__icon {
       fill: currentColor;
+      position: relative;
+      top: -1px;
+      vertical-align: middle;
     }
 
     &:not(.ecl-link--standalone) .ecl-link__label {

diff --git a/src/systems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link.scss b/src/systems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link.scss
@@ -33,15 +33,17 @@
 
   .ecl-link--icon-before,
   .ecl-link--icon-after {
-    align-items: center;
-    display: inline-flex;
+    display: inline-block;
   }
 
   .ecl-link--icon {
     text-decoration: none;
 
     .ecl-link__icon {
       fill: currentColor;
+      position: relative;
+      top: -1px;
+      vertical-align: middle;
     }
 
     &:not(.ecl-link--standalone) .ecl-link__label {
@@ -74,7 +76,7 @@
     background-color: $ecl-color-yellow-100;
     box-sizing: border-box;
     color: $ecl-color-black-100;
-    display: inline-flex;
+    display: inline-block;
     font: $ecl-font-m;
     font-weight: $ecl-font-weight-bold;
     padding: $ecl-spacing-s $ecl-spacing-m;

diff --git a/...s/vanilla/packages/ec-component-social-media-follow/ec-component-social-media-follow.scss b/...s/vanilla/packages/ec-component-social-media-follow/ec-component-social-media-follow.scss
@@ -47,6 +47,7 @@
   }
 
   .ecl-social-media-follow__link {
+    align-items: center;
     display: flex;
     font: $ecl-font-s;
     overflow: hidden; /* Improve rendering on IE */
@@ -57,6 +58,7 @@
   .ecl-social-media-follow__icon-hover {
     flex-shrink: 0;
     margin-right: $ecl-spacing-m;
+    top: 0 !important;
   }
 
   .ecl-social-media-follow__icon {

diff --git a/...ons/vanilla/packages/ec-component-social-media-share/ec-component-social-media-share.scss b/...ons/vanilla/packages/ec-component-social-media-share/ec-component-social-media-share.scss
@@ -1,6 +1,6 @@
 /**
 * Social media share component
-* @define social-media-share
+* @define social-media-share; weak
 */
 
 // Import base
@@ -50,9 +50,14 @@
   }
 
   .ecl-social-media-share__link {
+    align-items: center;
     display: flex;
     font: $ecl-font-s;
     overflow: hidden; /* Improve rendering on IE */
+
+    .ecl-link__icon {
+      top: 0;
+    }
   }
 }
 

diff --git a/...plementations/vanilla/packages/eu-component-language-list/eu-component-language-list.scss b/...plementations/vanilla/packages/eu-component-language-list/eu-component-language-list.scss
@@ -1,6 +1,6 @@
 /**
  * Language list component
- * @define language-list
+ * @define language-list; weak
  */
 
 // Import base
@@ -60,6 +60,7 @@
   }
 
   .ecl-language-list__link {
+    align-items: center;
     background-color: $background-link;
     display: flex;
     font: $ecl-font-m;
@@ -74,6 +75,10 @@
     &:focus {
       outline-offset: -3px;
     }
+
+    .ecl-link__icon {
+      top: 0;
+    }
   }
 
   .ecl-language-list__item--is-active {

diff --git a/...ystems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link-print.scss b/...ystems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link-print.scss
@@ -19,15 +19,17 @@
 
   .ecl-link--icon-before,
   .ecl-link--icon-after {
-    align-items: center;
-    display: inline-flex;
+    display: inline-block;
   }
 
   .ecl-link--icon {
     text-decoration: none;
 
     .ecl-link__icon {
       fill: currentColor;
+      position: relative;
+      top: -1px;
+      vertical-align: middle;
     }
 
     &:not(.ecl-link--standalone) .ecl-link__label {

diff --git a/src/systems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link.scss b/src/systems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link.scss
@@ -33,15 +33,17 @@
 
   .ecl-link--icon-before,
   .ecl-link--icon-after {
-    align-items: center;
-    display: inline-flex;
+    display: inline-block;
   }
 
   .ecl-link--icon {
     text-decoration: none;
 
     .ecl-link__icon {
       fill: currentColor;
+      position: relative;
+      top: -1px;
+      vertical-align: middle;
     }
 
     &:not(.ecl-link--standalone) .ecl-link__label {
@@ -74,7 +76,7 @@
     background-color: $ecl-color-yellow-100;
     box-sizing: border-box;
     color: $ecl-color-black-100;
-    display: inline-flex;
+    display: inline-block;
     font: $ecl-font-m;
     font-weight: $ecl-font-weight-bold;
     padding: $ecl-spacing-s $ecl-spacing-m;

diff --git a/...s/vanilla/packages/eu-component-social-media-follow/eu-component-social-media-follow.scss b/...s/vanilla/packages/eu-component-social-media-follow/eu-component-social-media-follow.scss
@@ -47,6 +47,7 @@
   }
 
   .ecl-social-media-follow__link {
+    align-items: center;
     display: flex;
     font: $ecl-font-s;
     overflow: hidden; /* Improve rendering on IE */
@@ -57,6 +58,7 @@
   .ecl-social-media-follow__icon-hover {
     flex-shrink: 0;
     margin-right: $ecl-spacing-m;
+    top: 0 !important;
   }
 
   .ecl-social-media-follow__icon {

diff --git a/...ons/vanilla/packages/eu-component-social-media-share/eu-component-social-media-share.scss b/...ons/vanilla/packages/eu-component-social-media-share/eu-component-social-media-share.scss
@@ -1,6 +1,6 @@
 /**
 * Social media share component
-* @define social-media-share
+* @define social-media-share; weak
 */
 
 // Import base
@@ -50,9 +50,14 @@
   }
 
   .ecl-social-media-share__link {
+    align-items: center;
     display: flex;
     font: $ecl-font-s;
     overflow: hidden; /* Improve rendering on IE */
+
+    .ecl-link__icon {
+      top: 0;
+    }
   }
 }