Seperated external link icon to new component

minvws · May 8, 2023 · 90a986b · 90a986b
1 parent 9d06384
commit 90a986b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/docs/scss/manon.scss b/docs/scss/manon.scss
@@ -48,6 +48,7 @@
 @use "@minvws/manon/emphasized";
 @use "@minvws/manon/de-emphasized";
 @use "@minvws/manon/link";
+@use "@minvws/manon/link-external";
 @use "@minvws/manon/nota-bene";
 @use "@minvws/manon/max-line-length";
 

diff --git a/manon/link-external-variables.scss b/manon/link-external-variables.scss
@@ -0,0 +1,11 @@
+/*----------------------------------------------------------------------------------*/
+/*----------------------- link--external-variables.scss ----------------------------*/
+/*----------------------------------------------------------------------------------*/
+:root {
+  /* External Link Icon */
+  --link-external-icon-font-family: var(--link-icon-font-family);
+  --link-external-icon-font-size: var(--link-icon-font-size);
+  --link-external-icon-padding-right: var(--link-icon-padding-right);
+  --link-external-icon-padding-left: var(--link-icon-padding-left);
+  //--link-external-icon: "";
+}
diff --git a/manon/link-external.scss b/manon/link-external.scss
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------*/
+/*-------------------- link-external.scss -----------------------*/
+/*---------------------------------------------------------------*/
+@use "link-external-variables";
+@use "mixins/icon";
+
+a {
+  &[rel~=external]:before {
+    @include icon.icon;
+    font-family: var(--link-external-icon-font-family);
+    font-size: var(--link-external-icon-font-size);
+    content: var(--link-external-icon);
+    padding-right: var(--link-external-icon-padding-right);
+    padding-left: var(--link-external-icon-padding-left);
+  }
+}
diff --git a/manon/link.scss b/manon/link.scss
@@ -163,13 +163,4 @@ a {
     padding-right: var(--link-icon-after-padding-right);
     padding-left: var(--link-icon-after-padding-left);
   }
-
-  &[rel~=external]:before {
-    @include icon.icon;
-    font-family: var(--link-external-icon-font-family);
-    font-size: var(--link-external-icon-font-size);
-    content: var(--link-external-icon);
-    padding-right: var(--link-external-icon-padding-right);
-    padding-left: var(--link-external-icon-padding-left);
-  }
 }