hugo-theme-zzo/assets/sass/components/_donation.scss

.donation {
  margin: 2.5rem 0;
  position: relative;
  
  &__icons {
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    @include flex-wrap(wrap);

    a {
      text-decoration: none !important;
    }
  }

  &__message {
    padding: 0.5rem;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    font-family: $title-font;
    
    @include flexbox();
    @include justify-content(center);
  }

  &__item {
    font-family: $title-font;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 0.25rem;
    margin: 0.25rem;
    text-transform: capitalize;
    
    @include flexbox();
    @include align-items(center);

    &[data-type="donation"] {
      svg {
        @include themify($themes) {
          color: themed('share-color');
          background-color: themed('donation-background-color');
          @include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color'));
        }
      }
    }

    &[data-type="share"] {
      svg {
        @include themify($themes) {
          color: themed('share-color');
          background-color: themed('share-background-color');
          @include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color'));
        }
      }
    }

    svg {
      padding: 0.375rem;
      border-radius: 0.25rem;
      margin-right: 0.25rem;
      
      &[data-name="douban"] {
        color: white;
        @include on-event {
          background-color: #007722;
        }
      }
      &[data-name="facebook"] {
        color: white;
        @include on-event {
          background-color: #1877F2;  
        }
      }
      &[data-name="twitter"] {
        color: white;
        @include on-event {
          background-color: #1DA1F2;  
        }
      }
      &[data-name="reddit"] {
        color: white;
        @include on-event {
          background-color: #FF4500;  
        }
      }
      &[data-name="tumblr"] {
        color: white;
        @include on-event {
          background-color: #36465D;  
        }
      }
      &[data-name="linkedin"] {
        color: white;
        @include on-event {
          background-color: #0077B5;  
        }
      }
      &[data-name="weibo"] {
        color: white;
        @include on-event {
          background-color: #E6162D;  
        }
      }
      &[data-name="line"] {
        color: white;
        @include on-event {
          background-color: #00C300;
        }
      }
      &[data-name="telegram"] {
        color: white;
        @include on-event {
          background-color: #2CA5E0;
        }
      }
      &[data-name="whatsapp"] {
        color: white;
        @include on-event {
          background-color: #25D366;
        }
      }
      &[data-name="pocket"] {
        color: white;
        @include on-event {
          background-color: #EF3F56;
        }
      }
      &[data-name="feedly"] {
        color: white;
        @include on-event {
          background-color: #2BB24C;
        }
      }
      &[data-name="hatena"] {
        color: white;
        @include on-event {
          background-color: #00A4DE;
        }
      }
      &[data-name="pinterest"] {
        color: white;
        @include on-event {
          background-color: #BD081C;
        }
      }
      &[data-name="delicious"] {
        color: white;
        @include on-event {
          background-color: #3399FF;
        }
      }
      &[data-name="google"] {
        color: white;
        @include on-event {
          background-color: #4285F4;
        }
      }

      @include transition(transform, 0.15s, ease-in);
      @include on-event {
        @include translateY(-0.25rem);
      }
    }
  }

  &__dropup {
    position: relative;
    height: 100%;

    @media only screen and (max-width: 769px) {
      position: static;
    }

    &--content {
      display: none;
      position: absolute;
      bottom: 100%;
      z-index: 1;
      min-width: 250px;
      max-width: 350px;
      height: auto;
      margin-bottom: 0.25rem;
      border-radius: 0.25rem;

      img {
        margin: auto;
      }

      @media only screen and (max-width: 769px) {
        left: 50%;
        transform: translate(-50%);
      }

      @include themify($themes) {
        border: 1px solid themed('dropdown-item-hover-background-color');
        background-color: themed('dropdown-content-background-color');
      }
    }
  }
}

.donation__dropup:hover .donation__dropup--content {
  display: block;
}