aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Widgets/SocialMedia/SocialMedia.module.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Widgets/SocialMedia/SocialMedia.module.scss')
-rw-r--r--src/components/Widgets/SocialMedia/SocialMedia.module.scss48
1 files changed, 48 insertions, 0 deletions
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
new file mode 100644
index 0000000..c8ad759
--- /dev/null
+++ b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
@@ -0,0 +1,48 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/placeholders";
+
+.list {
+ @extend %flex-list;
+
+ gap: var(--spacing-xs);
+ align-items: center;
+ padding: var(--spacing-2xs) 0 0 var(--spacing-2xs);
+}
+
+.link {
+ display: block;
+ width: 3em;
+ height: 3em;
+ background: none;
+ box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+ var(--color-shadow-light),
+ fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
+ var(--color-shadow-light),
+ fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
+ var(--color-shadow-light),
+ 0 0 0 0 var(--color-shadow);
+ transition: all 0.3s linear 0s;
+
+ &:hover,
+ &:focus {
+ box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+ var(--color-shadow-light),
+ fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
+ var(--color-shadow-lighter),
+ fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
+ var(--color-shadow-lighter),
+ fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
+ var(--color-shadow-light);
+ transform: scale(1.15);
+ }
+
+ &:focus {
+ outline: var(--color-primary) dashed fun.convert-px(2);
+ }
+
+ &:active {
+ box-shadow: 0 0 0 0 var(--color-shadow-light);
+ outline: none;
+ transform: scale(0.9);
+ }
+}