fix: aligned external link icon with text

RedTurtle · Oct 6, 2023 · 916d233 · 916d233
1 parent 2b2e9e4
commit 916d233
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -83,7 +83,7 @@ const CompleteBlockLinksTemplate = ({
                                   icon="it-external-link"
                                   title={title}
                                   size="xs"
-                                  className="align-top ms-1 external-link"
+                                  className="ms-1 align-sub external-link"
                                 />
                               )}
                           </CardTitle>

diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
@@ -123,7 +123,7 @@ const UniversalLink = ({
               icon="it-external-link"
               title={title}
               size="xs"
-              className="align-top ms-1 external-link"
+              className="ms-1 align-sub external-link"
             />
           )}
       </a>

diff --git a/src/theme/ItaliaTheme/_common.scss b/src/theme/ItaliaTheme/_common.scss
@@ -72,6 +72,9 @@
 
   .external-link {
     fill: $link-color !important;
+    &.align-sub {
+      vertical-align: sub;
+    }
 
     &:hover {
       fill: #004080 !important;