From a3fb0aa94717aafae897ac293488c43a099c0b2b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 3 Oct 2023 18:52:57 +0200 Subject: refactor(components): rewrite SharingLink component * replace default label with label prop * simplify CSS rules --- .../links/sharing-link/sharing-link.module.scss | 88 ++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 src/components/atoms/links/sharing-link/sharing-link.module.scss (limited to 'src/components/atoms/links/sharing-link/sharing-link.module.scss') diff --git a/src/components/atoms/links/sharing-link/sharing-link.module.scss b/src/components/atoms/links/sharing-link/sharing-link.module.scss new file mode 100644 index 0000000..e1c9c3c --- /dev/null +++ b/src/components/atoms/links/sharing-link/sharing-link.module.scss @@ -0,0 +1,88 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.link { + display: inline-flex; + align-items: center; + padding: var(--spacing-2xs) var(--spacing-xs); + border-radius: fun.convert-px(3); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 var(--shadowColor); + transition: all 0.3s linear 0s; + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 var(--shadowColor); + transform: translateX(#{fun.convert-px(-3)}) + translateY(#{fun.convert-px(-3)}); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 var(--shadowColor); + transform: translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(2)}); + } + + &::before { + content: ""; + display: block; + width: fun.convert-px(30); + height: fun.convert-px(30); + background-image: var(--logo); + background-repeat: no-repeat; + filter: drop-shadow( + #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%) + ); + } + + &--diaspora { + // Prettier is removing spacing between attributes. + // prettier-ignore + --logo: url('#{fun.encode-svg('')}'); + --shadowColor: hsl(0, 0%, 3%); + + background: hsl(0, 0%, 13%); + } + + &--email { + // Prettier is removing spacing between attributes. + // prettier-ignore + --logo: url('#{fun.encode-svg('')}'); + --shadowColor: hsl(0, 0%, 34%); + + background: hsl(0, 0%, 44%); + } + + &--facebook { + // Prettier is removing spacing between attributes. + // prettier-ignore + --logo: url('#{fun.encode-svg('')}'); + --shadowColor: hsl(214, 89%, 42%); + + background: hsl(214, 89%, 52%); + } + + &--journal-du-hacker { + // Prettier is removing spacing between attributes. + // prettier-ignore + --logo: url('#{fun.encode-svg('')}'); + --shadowColor: hsl(210, 24%, 41%); + + background: hsl(210, 24%, 51%); + } + + &--linkedin { + // Prettier is removing spacing between attributes. + // prettier-ignore + --logo: url('#{fun.encode-svg('')}'); + --shadowColor: hsl(210, 90%, 30%); + + background: hsl(210, 90%, 40%); + } + + &--twitter { + // Prettier is removing spacing between attributes. + // prettier-ignore + --logo: url('#{fun.encode-svg('')}'); + --shadowColor: hsl(203, 89%, 43%); + + background: hsl(203, 89%, 53%); + } +} -- cgit v1.2.3