Merge pull request #440 from BeAPI/fix/target-blank-icon

Fix text icon external for target blank

Author: cedric07

src/scss/02-tools/_m-text-icon.scss

@@ -13,10 +13,10 @@
  *
  */
 
-@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px) {
+@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px, $gap: 8px) {
     position: relative;
     display: inline-flex;
-    gap: 8px;
+    gap: $gap;
     align-items: center;
 
     &::#{$position} {
@@ -31,3 +31,13 @@
         transition: background-color .5s $ease-out-expo;
     }
 }
+
+@mixin text-external-icon($icon: "external", $position: after, $color: currentColor, $size: 12px, $gap: 8px) {
+    @include text-icon($icon, $position, $color, $size);
+    display: inline;
+
+    &::#{$position} {
+        display: inline-block;
+        margin-inline-start: $gap;
+    }
+}

src/scss/03-base/_links.scss

@@ -4,7 +4,7 @@ a {
     cursor: pointer;
 
     &[target="_blank"] {
-        @include text-icon("external");
+        @include text-external-icon;
     }
 
     @include hover {
@@ -13,5 +13,5 @@ a {
 }
 
 .link-external {
-    @include text-icon("external");
+    @include text-external-icon;
 }