web-social-share/dist/collection/components/web-social-share/web-social-share.css

A Web Component to share urls and text on social networks

div.web-social-share {
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  touch-action: manipulation;
}
div.web-social-share.web-social-share-open {
  visibility: visible;
  opacity: 1;
}
div.web-social-share.web-social-share-open div.web-social-share-backdrop {
  /**
    * @prop --web-social-share-backdrop-opacity: Backdrop opacity
    * @default 0.25
  */
  opacity: var(--web-social-share-backdrop-opacity, 0.25);
}
div.web-social-share.web-social-share-open div.web-social-share-action-sheet {
  opacity: 1;
}
div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group {
  /**
    * @prop --web-social-share-height: Action sheet height
    * @default 80px
  */
  height: var(--web-social-share-height, 80px);
}
@media (max-width: 540px) {
  div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group {
    /**
      * @prop --web-social-share-height-small-device: Action sheet height on smaller device (max-width 540px)
      * @default 140px
    */
    height: var(--web-social-share-height-small-device, 140px);
  }
}
div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop {
  opacity: 0;
}
div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group {
  height: 0;
}
div.web-social-share div.web-social-share-backdrop {
  opacity: 0;
  transition: opacity 0.1s linear;
  /**
   * @prop --web-social-share-backdrop-background: Backdrop background color
   * @default black
  */
  background-color: var(--web-social-share-backdrop-background, black);
  /**
   * @prop --web-social-share-zindex: Action sheet z-index. Backdrop gets this value, container gets the value + 1 and content value + 10
   * @default 1000
  */
  z-index: var(--web-social-share-zindex, 1000);
  transform: translate3d(0, 0, 2px);
  left: 0;
  top: 0;
  position: fixed;
  height: 100%;
  width: 100%;
}
div.web-social-share div.web-social-share-action-sheet {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: fixed;
  z-index: calc(var(--web-social-share-zindex, 1000) + 1);
  transform: translate3d(0, 0, 3px);
  width: 100%;
  max-width: 540px;
}
@media (min-width: 540px) {
  div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group {
    /**
      * @prop --web-social-share-action-sheet-group-border-radius: Action sheet border radius on bigger screen  (min-width 540px)
      * @default 8px 8px 0 0
    */
    border-radius: var(--web-social-share-action-sheet-group-border-radius, 8px 8px 0 0);
  }
}
div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  height: 100%;
  max-height: 100%;
}
div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group {
  /**
   * @prop --web-social-share-action-sheet-group-box-shadow: Action sheet box-shadow
   * @default 0 0 8px 4px rgba(0,0,0,0.1)
  */
  box-shadow: var(--web-social-share-action-sheet-group-box-shadow, 0 0 8px 4px rgba(0, 0, 0, 0.1));
  z-index: calc(var(--web-social-share-zindex, 1000) + 10);
  transform: translate3d(0, 0, 10px);
  --background: var(--web-social-share-action-sheet-group-background, #fafafa);
  /**
   * @prop --web-social-share-action-sheet-group-background: Action sheet group background
   * @default #fafafa
  */
  background: var(--background);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 0;
  transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1);
  transition: height 0.2s ease-in;
}
@media (max-width: 540px) {
  div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group {
    justify-content: flex-start;
  }
}
div.web-social-share div.web-social-share-target {
  margin: auto;
  /**
   * @prop --web-social-share-target-width: Button width
   * @default 4rem
  */
  width: var(--web-social-share-target-width, 4rem);
  /**
   * @prop --web-social-share-target-height: Button height
   * @default 3rem
  */
  height: var(--web-social-share-target-height, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div.web-social-share div.web-social-share-target button {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-color: var(--background);
  transition: background 0.8s;
  /**
   * @prop --web-social-share-button-border-radius: Button border-radius
   * @default 8px
  */
  border-radius: var(--web-social-share-button-border-radius, 8px);
  cursor: pointer;
  border: 0;
  /**
   * @prop --web-social-share-button-width: Button width
   * @default 100%
  */
  width: var(--web-social-share-button-width, 100%);
  /**
   * @prop --web-social-share-button-height: Button height
   * @default 100%
  */
  height: var(--web-social-share-button-height, 100%);
  /**
   * @prop --web-social-share-button-font-size: Button font size
  */
  font-size: var(--web-social-share-button-font-size);
}
div.web-social-share div.web-social-share-target button:hover {
  background: var(--background) radial-gradient(circle, transparent 1%, var(--background) 1%) center/15000%;
}
div.web-social-share div.web-social-share-target button:active {
  /**
   * @prop --web-social-share-button-ripple-effect-color: User click feedback (ripple effect) color
   * @default #cecece
  */
  background-color: var(--web-social-share-button-ripple-effect-color, #cecece);
  background-size: 100%;
  transition: background 0s;
}
div.web-social-share div.web-social-share-target p {
  /**
   * @prop --web-social-share-brand-margin: Brand text margin
   * default 2px 0
  */
  margin: var(--web-social-share-brand-margin, 2px 0);
  /**
   * @prop --web-social-share-brand-color: Brand text color
   * default inherit
  */
  color: var(--web-social-share-brand-color, inherit);
  /**
   * @prop --web-social-share-brand-font-size: Brand text font-size
   * default 0.6rem
  */
  font-size: var(--web-social-share-brand-font-size, 0.6rem);
}
div.web-social-share div.web-social-share-target div.web-social-share-button-icon {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

::slotted([slot=facebook]),
::slotted([slot=twitter]),
::slotted([slot=email]),
::slotted([slot=linkedin]),
::slotted([slot=pinterest]),
::slotted([slot=reddit]),
::slotted([slot=whatsapp]),
::slotted([slot=copy]),
::slotted([slot=hackernews]) {
  display: none;
}