diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-02 18:45:30 +0200 | 
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 | 
| commit | f914ff8376dd91c4f6f8ca149e1cb6becb622d88 (patch) | |
| tree | 777dc0268eba86721878a715c68f0f09bedb4b18 /src/components/organisms/layout/summary.module.scss | |
| parent | b52b8183ce299b5a2d3c3b2f4f8cb94bb443d746 (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.scss | 78 | 
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; +          } +        } +      } +    } +  } +} | 
