@liuwave/vuepress-plugin-social-share/lib/styles/index.styl

Social sharing plugin for VuePress

$social-share-plain-color ?= $accentColor
$social-share-trigger-color ?= lighten($textColor, 40%)
$social-share-mobile ?= $MQMobile
$prefix-class = '.social-share'

{$prefix-class}
  position relative
  box-sizing border-box

  &-list
    list-style: none
    padding 0
    margin 0
    line-height 1

  &-network
    position relative
    display inline-block
    vertical-align: middle

  &-trigger
    color: $social-share-trigger-color

  &-btn
    position relative
    width 56px
    height 56px
    padding 0
    border-radius 50%
    font-size 32px
    font-family inherit
    text-align center
    background none
    border none
    box-shadow none
    outline none
    appearance none
    cursor pointer
    -webkit-tap-highlight-color rgba(0, 0, 0, 0)
    transition all 0.3s ease-out

    &:not({$prefix-class}-trigger)
      color $social-share-plain-color

      &:hover
        background-color rgba(188, 188, 188, 0.15)

  &-icon-svg
    svg
      width: 1em !important
      height: 1em !important
      fill: currentColor !important
      vertical-align: -0.15em !important
      overflow: hidden !important

  &-icon-img
    position: absolute
    top: 50%
    left: 50%
    display: block
    width: 1em
    height: 1em
    margin: -0.5em 0 0 -0.5em
    background-repeat: no-repeat
    background-position: center
    background-size: contain

  &-global
    position fixed
    right 0
    bottom 50%
    z-index 99999
    background-color #fff
    border 1px solid #efefef
    border-right none
    border-radius 8px 0 0 8px
    transform translate(0, 50%)
    transition all 0.3s ease-out
    box-shadow -2px 1px 6px rgba(0, 0, 0, 0.08)

    {$prefix-class}
      &-network
        display: block

      &-btn
        width 60px
        height 60px
        border-radius 5px
        font-size 36px

@media screen and (max-width: $social-share-mobile)
  {$prefix-class}
    &-btn
      width 40px
      height 40px
      font-size 28px

    &-global
      bottom 15%
      border-radius 5px 0 0 5px
      transform translate(0, 0)
      box-shadow -1px 1px 3px rgba(0, 0, 0, 0.03)

      {$prefix-class}
        &-btn
          width 40px
          height 40px
          font-size 28px
          border-radius 3px