diff --git a/src/systems/ec/implementations/vanilla/packages/ec-component-language-list/ec-component-language-list.scss b/src/systems/ec/implementations/vanilla/packages/ec-component-language-list/ec-component-language-list.scss index b34260ab48f..48eccb44147 100644 --- a/src/systems/ec/implementations/vanilla/packages/ec-component-language-list/ec-component-language-list.scss +++ b/src/systems/ec/implementations/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/src/systems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link-print.scss b/src/systems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link-print.scss index e8e0365eddf..9f9600094a9 100644 --- a/src/systems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link-print.scss +++ b/src/systems/ec/implementations/vanilla/packages/ec-component-link/ec-component-link-print.scss @@ -19,8 +19,7 @@ .ecl-link--icon-before, .ecl-link--icon-after { - align-items: center; - display: inline-flex; + display: inline-block; } .ecl-link--icon { @@ -28,6 +27,9 @@ .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 index f5c33b4d4f5..1013ffb1d9d 100644 --- 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,8 +33,7 @@ .ecl-link--icon-before, .ecl-link--icon-after { - align-items: center; - display: inline-flex; + display: inline-block; } .ecl-link--icon { @@ -42,6 +41,9 @@ .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/src/systems/ec/implementations/vanilla/packages/ec-component-social-media-follow/ec-component-social-media-follow.scss b/src/systems/ec/implementations/vanilla/packages/ec-component-social-media-follow/ec-component-social-media-follow.scss index 6e290ecdebd..b26eaaca1d1 100644 --- a/src/systems/ec/implementations/vanilla/packages/ec-component-social-media-follow/ec-component-social-media-follow.scss +++ b/src/systems/ec/implementations/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/src/systems/ec/implementations/vanilla/packages/ec-component-social-media-share/ec-component-social-media-share.scss b/src/systems/ec/implementations/vanilla/packages/ec-component-social-media-share/ec-component-social-media-share.scss index 613754ae280..032dc5fec3e 100644 --- a/src/systems/ec/implementations/vanilla/packages/ec-component-social-media-share/ec-component-social-media-share.scss +++ b/src/systems/ec/implementations/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/src/systems/eu/implementations/vanilla/packages/eu-component-language-list/eu-component-language-list.scss b/src/systems/eu/implementations/vanilla/packages/eu-component-language-list/eu-component-language-list.scss index 9c4ea7ee122..d93aa1ec6ec 100644 --- a/src/systems/eu/implementations/vanilla/packages/eu-component-language-list/eu-component-language-list.scss +++ b/src/systems/eu/implementations/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/src/systems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link-print.scss b/src/systems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link-print.scss index 93016eb9554..9ed55b87e0f 100644 --- a/src/systems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link-print.scss +++ b/src/systems/eu/implementations/vanilla/packages/eu-component-link/eu-component-link-print.scss @@ -19,8 +19,7 @@ .ecl-link--icon-before, .ecl-link--icon-after { - align-items: center; - display: inline-flex; + display: inline-block; } .ecl-link--icon { @@ -28,6 +27,9 @@ .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 index e350abee5db..21998710e96 100644 --- 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,8 +33,7 @@ .ecl-link--icon-before, .ecl-link--icon-after { - align-items: center; - display: inline-flex; + display: inline-block; } .ecl-link--icon { @@ -42,6 +41,9 @@ .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/src/systems/eu/implementations/vanilla/packages/eu-component-social-media-follow/eu-component-social-media-follow.scss b/src/systems/eu/implementations/vanilla/packages/eu-component-social-media-follow/eu-component-social-media-follow.scss index 565feb0dc25..9be77ed8b4a 100644 --- a/src/systems/eu/implementations/vanilla/packages/eu-component-social-media-follow/eu-component-social-media-follow.scss +++ b/src/systems/eu/implementations/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/src/systems/eu/implementations/vanilla/packages/eu-component-social-media-share/eu-component-social-media-share.scss b/src/systems/eu/implementations/vanilla/packages/eu-component-social-media-share/eu-component-social-media-share.scss index 113d85ea199..7e373c5c8cc 100644 --- a/src/systems/eu/implementations/vanilla/packages/eu-component-social-media-share/eu-component-social-media-share.scss +++ b/src/systems/eu/implementations/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; + } } }