scss Drupal 7中的社交链接菜单

Posted 2021-05-17

<?php 
function corpwatch_social_media_menu($menu_variable) {
  foreach($menu_variable as $menu_item) {

    if (strpos($menu_item['href'], 'facebook.com')) {
      $menu_item['item_attributes']['class'] = 'fab fa-fw fa-facebook-f';
    } elseif (strpos($menu_item['href'], 'twitter.com') !== false ) {
      $menu_item['item_attributes']['class'] = 'fab fa-fw fa-twitter';
    } elseif (strpos($menu_item['href'], 'instagram.com') !== false) {
      $menu_item['item_attributes']['class'] = 'fab fa-fw fa-instagram';
    } elseif (strpos($menu_item['href'], 'yelp.com') !== false) {
      $menu_item['item_attributes']['class'] = 'fab fa-fw fa-yelp';
    } elseif (strpos($menu_item['href'], 'youtube.com') !== false) {
      $menu_item['item_attributes']['class'] = 'fab fa-fw fa-youtube';
    } elseif (strpos($menu_item['href'], 'linkedin.com') !== false) {
      $menu_item['item_attributes']['class'] = 'fab fa-fw fa-linkedin-in';
    } elseif (strpos($menu_item['href'], 'mailto:') !== false) {
      $menu_item['item_attributes']['class'] = 'far fa-fw fa-envelope';
    } elseif (strpos($menu_item['href'], 'sharethis.com') !== false) {
      $menu_item['item_attributes']['class'] = 'fas fa-fw fa-share-alt';
    } elseif (strpos($menu_item['href'], '/feed') !== false || strpos($menu_item['href'], 'rss') !== false) {
      $menu_item['item_attributes']['class'] = 'fas fa-fw fa-rss';
    } else {
      $menu_item['item_attributes']['class'] = 'far fa-fw fa-globe';
    } ?>

    <li>
      <a class="social-media-button__link social-media-button__link--withicon" href="<?php echo($menu_item['href']); ?>" target="_blank">
        <div class="social-media-button__wrapper">
          <i class="<?php echo($menu_item['item_attributes']['class']); ?>"></i><span class="sr-only"><?php echo($menu_item['title']); ?></span>
        </div>
      </a>
    </li>
  <?php
  }
}
?>

// stuff

<nav class='footer-social-media--menu'>
  <ul>

    <?php corpwatch_social_media_menu($footer_social_menu); ?>
  
  </ul>
</nav>

// more stuff

@mixin socialmedia($social-circle-size, $social-icon-size, $social-background-color, $social-icon-color, $hover-reverse: false, $border: false) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  div {
    align-items: center;
    background-color: $social-background-color;
    @if ($border == true) {
      border: 1px solid $social-icon-color;
    }
    border-radius: $social-circle-size / 2;
    display: flex;
    @include rem('height', $social-circle-size);
    justify-content: center;
    @include rem('width', $social-circle-size);

    @if ($hover-reverse == true) {
      &:hover {
        background-color: rgba($social-icon-color, .8);
        border: 1px solid rgba($social-background-color, .8);

        i,
        svg {
          color: rgba($social-background-color, .8);
        }
      }
    } @else {
      &:hover {
        background-color: rgba($social-background-color, .8);
      }
    }
    
    i,
    svg {
      color: $social-icon-color;
    }

    i {
      @include rem('font-size', $social-icon-size);
      @include rem('line-height', $social-circle-size);
    }

    svg {        
      // fill: white;
      // color: $social-icon-color;
      @include rem('height', $social-icon-size);
      @include rem('width', $social-icon-size);
    }
  }
}

.footer-social-media {
  @include rem('padding-bottom', 48px);

  &--menu {
    ul {
      justify-content: center;
      @include socialmedia(36px, 16px, black, white, false, false);
      // list-style: none;
      // padding: none;
      @include media-breakpoint-up(lg) {
        justify-content: flex-start;
      }
  
      li {
        @include rem('padding-right', 14px);
      }
    }
  }
}