spawntree
/
ihk24
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6 Commits
6 Branches
81 MiB
 
 
 
 
Tree: 0795b09631
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '0795b09631'
${ noResults }
ihk24/storybook/stories/atoms/social-icons/social-icons.scss

103 lines
2.4 KiB
Raw Blame History 

  1. @import '../../_global/styles/mixins';

  2. @import '../../_global/styles/vars';

  3. 

  4. .social-icons {

  5.   --color-twitter: #101419;

  6.   --color-youtube: #FF0000;

  7.   --color-linkedin: #2867B2;

  8.   --color-instagram: #DD3076;

  9.   --color-facebook: #1877F2;

  10.   --color-xing: #126567;

  11.   --color-threema: #05a63f;

  12.   --color-telegram: #0088cc;

  13.   --color-whatsapp: #25D366;

  14.   --color-pinterest: #FF0000;

  15.   --social-icon-size: 50px;

  16.   --social-icon-distance: 15px;

  17. 

  18.   @media(max-width: 767px) {

  19.     --social-icon-size: 44px;

  20.     --social-icon-distance: 10px;

  21.   }

  22. 

  23.   margin: 0 0 calc(var(--social-icon-distance) * -1) calc(var(--social-icon-distance) * -1);

  24.   padding: 0;

  25.   font-size: 0;

  26.   line-height: 0;

  27. 

  28.   li {

  29.     display: inline-block;

  30.     vertical-align: top;

  31.     margin-left: var(--social-icon-distance);

  32.     margin-bottom: var(--social-icon-distance);

  33.   }

  34. 

  35.   a {

  36.     position: relative;

  37.     display: block;

  38.     width: var(--social-icon-size);

  39.     height: var(--social-icon-size);

  40.     color: var(--theme-color-white);

  41.     text-decoration: none;

  42.     text-align: center;

  43.     font-size: 0;

  44.     line-height: 0;

  45.     transition: 0.3s ease;

  46.     z-index: 1;

  47.     overflow: hidden;

  48.     @include focus-visible;

  49. 

  50.     &:before {

  51.       display: block;

  52.       font-size: calc(var(--social-icon-size) + 2px);

  53.       line-height: calc(var(--social-icon-size) + 2px);

  54.       font-family: "Icons", sans-serif;

  55.       margin: -1px;

  56.       background-color: var(--theme-color-white);

  57.     }

  58. 

  59.     &.facebook::before {

  60.       @include icon-social-facebook;

  61.       color: var(--color-facebook);

  62.     }

  63.     &.twitter::before {

  64.       @include icon-social-twitter;

  65.       color: var(--color-twitter);

  66.     }

  67.     &.linkedin::before {

  68.       @include icon-social-linkedin;

  69.       color: var(--color-linkedin);

  70.     }

  71.     &.youtube::before {

  72.       @include icon-social-youtube;

  73.       color: var(--color-youtube);

  74.     }

  75.     &.instagram::before {

  76.       @include icon-social-instagram;

  77.       color: var(--color-instagram);

  78.     }

  79.     &.xing::before {

  80.       @include icon-social-xing;

  81.       color: var(--color-xing);

  82.     }

  83.     &.threema::before {

  84.       @include icon-social-threema;

  85.       color: var(--color-threema);

  86.     }

  87.     &.telegram::before {

  88.       @include icon-social-telegram;

  89.       color: var(--color-telegram);

  90.     }

  91.     &.whatsapp::before {

  92.       @include icon-social-whatsapp;

  93.       color: var(--color-whatsapp);

  94.     }

  95.     &.pinterest::before {

  96.       @include icon-social-pinterest;

  97.       color: var(--color-pinterest);

  98.     }

  99.   }

  100. }

  101.