Skip to content

Instantly share code, notes, and snippets.

@qstudio

qstudio/q-share.sass

Last active November 13, 2020 10:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save qstudio/f36323b396be9b51e0669c3239ca8790 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save qstudio/f36323b396be9b51e0669c3239ca8790 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. qstudio revised this gist Nov 13, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion q-share.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    / share-this https://github.com/MaxArt2501/share-this
    // share-this https://github.com/MaxArt2501/share-this
    // vars ##
    $share-this-vertical-offset: -.25em !default;
  2. qstudio created this gist Nov 12, 2020.
    150 changes: 150 additions & 0 deletions q-share.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,150 @@
    / share-this https://github.com/MaxArt2501/share-this

    // vars ##
    $share-this-vertical-offset: -.25em !default;
    $share-this-background: #333 !default;
    $share-this-foreground: #fff !default;
    $share-this-highlight-link: rgba(#fff, .25) !default;
    $share-this-border-radius: .25em !default;
    $share-this-arrow-size: .5em !default;

    $share-this-sharer-width: 2.5em !default;
    $share-this-sharer-height: 2.5em !default;
    $share-this-sharer-padding: .5em !default;
    $share-this-border-distance: 4em !default;
    $share-this-animation-length: .3s !default;
    $share-this-small-devices-max: 575px !default;

    // mixins ##
    @mixin share-this-transform($transformation...) {
    -webkit-transform: $transformation;
    -ms-transform: $transformation;
    transform: $transformation;
    }
    @mixin share-this-animation($animation...) {
    -webkit-animation: $animation;
    animation: $animation;
    }
    @mixin share-this-filter($filter...) {
    -webkit-filter: $filter;
    filter: $filter;
    }

    @mixin share-this-on-bottom() {
    &::before {
    bottom: auto;
    top: 100%;
    border-width: 0 $share-this-arrow-size $share-this-arrow-size;
    margin-top: 0;
    }

    > ul {
    top: 100%;
    transform: translateX(-50%);
    margin: $share-this-arrow-size 0 0;
    }
    }

    // scss ##
    .share-this-popover {
    max-width: $share-this-border-distance * 2;
    pointer-events: none;
    @include share-this-filter(drop-shadow(0 1px 3px rgba(0, 0, 0, .35)));
    @include share-this-animation(share-this-intro $share-this-animation-length);

    &::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin: $share-this-vertical-offset + $share-this-arrow-size (-$share-this-arrow-size);
    border-width: $share-this-arrow-size $share-this-arrow-size 0;
    border-style: solid;
    border-color: $share-this-background transparent;
    }

    > ul {
    pointer-events: auto;
    list-style: none;
    padding: 0.5rem;
    margin: $share-this-vertical-offset - $share-this-arrow-size 0 0;
    white-space: nowrap;
    background: $share-this-background;
    color: $share-this-foreground;
    border-radius: $share-this-border-radius;
    position: absolute;
    left: 50%;
    @include share-this-transform(translate(-50%, -100%));

    > li {
    display: inline-block;
    width: $share-this-sharer-width;
    height: $share-this-sharer-height;
    line-height: 1em;
    text-align: center;

    > a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: inherit;
    box-sizing: border-box;
    padding: $share-this-sharer-padding;

    &:hover, &:focus {
    background: $share-this-highlight-link;
    }
    }
    }
    }

    @media (pointer: coarse) {
    font-size: 150%;
    @include share-this-on-bottom();
    }
    @media (max-width: $share-this-small-devices-max) {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none;
    @include share-this-on-bottom();

    > ul {
    left: 0;
    width: 100%;
    transform: none;
    border-radius: 0;
    text-align: center;
    }
    }
    }

    @-webkit-keyframes share-this-intro {
    0% {
    -webkit-transform: translateY(-3em);
    opacity: 0;
    }
    80% {
    -webkit-transform: translateY(.5em);
    opacity: 1;
    }
    100% {
    -webkit-transform: translateY(0);
    }
    }

    @keyframes share-this-intro {
    0% {
    transform: translateY(-3em);
    opacity: 0;
    }
    80% {
    transform: translateY(.5em);
    opacity: 1;
    }
    100% {
    transform: translateY(0);
    }
    }