From c9d5f6be49a89fad5a778c0342a27fc3452d863d Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 10 Jan 2022 12:36:12 +0100 Subject: refactor(aside): move width from aside to sharing widget Only the Sharing widget needs the "min-content" width. --- src/components/Widget/Sharing/Sharing.module.scss | 197 ++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 src/components/Widget/Sharing/Sharing.module.scss (limited to 'src/components/Widget/Sharing/Sharing.module.scss') diff --git a/src/components/Widget/Sharing/Sharing.module.scss b/src/components/Widget/Sharing/Sharing.module.scss new file mode 100644 index 0000000..a1ba094 --- /dev/null +++ b/src/components/Widget/Sharing/Sharing.module.scss @@ -0,0 +1,197 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; +@use "@styles/abstracts/placeholders"; + +.wrapper { + width: min-content; + max-height: 100vh; + padding-bottom: var(--spacing-sm); + position: sticky; + top: 0; + overflow-y: auto; +} + +.list { + @extend %flex-list; + + gap: var(--spacing-sm); +} + +.link { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: var(--spacing-2xs) var(--spacing-xs); + border-radius: fun.convert-px(3); + color: var(--color-fg-inverted); + font-weight: 600; + text-decoration: none; + text-shadow: fun.convert-px(2) fun.convert-px(1) fun.convert-px(1) + var(--color-shadow-dark); + transition: all 0.3s ease-in-out 0s; + + @include mix.media("screen") { + @include mix.dimensions("sm") { + font-size: var(--font-size-sm); + } + } + + &:hover, + &:focus { + color: hsl(0, 0%, 100%); + transform: translateX(#{fun.convert-px(-3)}) + translateY(#{fun.convert-px(-3)}); + + @include mix.motion("reduce") { + text-decoration: underline; + } + } + + &:active { + color: hsl(0, 0%, 100%); + transform: translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(2)}); + + @include mix.motion("reduce") { + transform: none; + } + } + + &::before { + display: block; + background-repeat: no-repeat; + content: ""; + filter: drop-shadow( + #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%) + ); + width: fun.convert-px(30); + height: fun.convert-px(30); + } + + &--diaspora { + background: hsl(0, 0%, 13%); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 3%); + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 3%); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 3%); + } + + &::before { + background-image: url(fun.encode-svg( + '' + )); + } + } + + &--email { + background: hsl(0, 0%, 44%); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 34%); + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 34%); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 34%); + } + + &::before { + background-image: url(fun.encode-svg( + '' + )); + } + } + + &--facebook { + background: hsl(214, 89%, 52%); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(214, 89%, 42%); + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 + hsl(214, 89%, 42%); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 + hsl(214, 89%, 42%); + } + + &::before { + background-image: url(fun.encode-svg( + '' + )); + } + } + + &--journal-du-hacker { + background: hsl(210, 24%, 51%); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 24%, 41%); + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 + hsl(210, 24%, 41%); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 + hsl(210, 24%, 41%); + } + + &::before { + background-image: url(fun.encode-svg( + '' + )); + } + } + + &--linkedin { + background: hsl(210, 90%, 40%); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 90%, 30%); + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 + hsl(210, 90%, 30%); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 + hsl(210, 90%, 30%); + } + + &::before { + background-image: url(fun.encode-svg( + '' + )); + } + } + + &--twitter { + background: hsl(203, 89%, 53%); + box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(203, 89%, 43%); + + &:hover, + &:focus { + box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 + hsl(203, 89%, 43%); + } + + &:active { + box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 + hsl(203, 89%, 43%); + } + + &::before { + background-image: url(fun.encode-svg( + '' + )); + } + } +} -- cgit v1.2.3