aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout/summary.module.scss
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-02 18:45:30 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commitf914ff8376dd91c4f6f8ca149e1cb6becb622d88 (patch)
tree777dc0268eba86721878a715c68f0f09bedb4b18 /src/components/organisms/layout/summary.module.scss
parentb52b8183ce299b5a2d3c3b2f4f8cb94bb443d746 (diff)
refactor(components): rewrite Link component
* rename `external` prop to `isExternal` * rename `download` prop to `isDownload` * rewrite CSS to reduce code length and complexity * move link styles in Sass placeholders to avoid repeats because of WordPress articles * move NavLink component to molecules
Diffstat (limited to 'src/components/organisms/layout/summary.module.scss')
-rw-r--r--src/components/organisms/layout/summary.module.scss78
1 files changed, 78 insertions, 0 deletions
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 5052f73..b6cb4f4 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -1,5 +1,6 @@
@use "../../../styles/abstracts/functions" as fun;
@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
.wrapper {
display: grid;
@@ -118,3 +119,80 @@
}
}
}
+
+.intro {
+ :global {
+ a {
+ @extend %link;
+
+ &[hreflang],
+ &.download,
+ &.external {
+ @extend %link-with-icon;
+ }
+
+ &[hreflang] {
+ @extend %link-with-lang;
+ }
+
+ &[hreflang]:not(.download, .external) {
+ --is-icon-hidden: "";
+ }
+
+ &.download {
+ @extend %download-link;
+ }
+
+ &.external {
+ @extend %external-link;
+ }
+
+ &.download,
+ &.external {
+ &:not([hreflang]) {
+ --is-lang-hidden: "";
+ }
+ }
+
+ &.external.download {
+ @extend %external-download-link;
+ }
+ }
+ }
+}
+
+:global([data-theme="light"]) {
+ :local {
+ .intro {
+ :global {
+ a {
+ &.download {
+ @extend %light-download-link;
+ }
+
+ &.external {
+ @extend %light-external-link;
+ }
+ }
+ }
+ }
+ }
+}
+
+:global([data-theme="dark"]) {
+ :local {
+ .intro {
+ :global {
+ a {
+ &.download {
+ @extend %dark-download-link;
+ }
+
+ &.external {
+ @extend %dark-external-link;
+ }
+ }
+ }
+ }
+ }
+}