share-selected-text/dev/shareSelectedText.less

share selected text on twitter, buffer, stumbleupon, digg, tumblr & reddit. Inspired by medium.com

@spacing: 10px;
@spacing-b: @spacing * 2;

@color-blue: #404658;
@color-white: white;

.share-selected-text-main-container {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(5px);
  transition: 0.3s ease opacity, 0.3s ease transform, 0.3s ease top, 0.3s ease left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 99;
  pointer-events: none;

  &.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 999;

    .share-selected-text-inner {
      pointer-events: auto;
    }
  }

  .share-selected-text-inner {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: @color-blue;
    height: 100%;
    pointer-events: none;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      bottom: -7px;
      left: 0;
      right: 0;
      margin: auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 7px 7.5px 0 7.5px;
      border-color: @color-blue transparent transparent transparent;
    }
  }

  .share-selected-text-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
    color: @color-white;
    height: 100%;
    margin: 0;
    padding: 0 @spacing-b;
    transition: 0.2s ease all;

    &:focus,
    &:hover {
      background: lighten(@color-blue, 7%);
    }
  }
}