Skip to content

Instantly share code, notes, and snippets.

@jcemer
Last active December 26, 2015 09:29

Revisions

  1. jcemer revised this gist Nov 11, 2013. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions code.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    .section-title {
    font-size: rem(28px);
    color: $blue;
    @include inverse-bottom-line(80%);
    }

    .collaborate-item:last-child {
    @include left-line(90%);
    padding-left: 10%;
    }

.address-map {
    @include top-line(100%, .25);
    @include bottom-line(100%, .25);
    }

  2. jcemer renamed this gist Oct 24, 2013. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  3. jcemer created this gist Oct 24, 2013.
    59 changes: 59 additions & 0 deletions lines
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    // Lines
    @mixin line($mode, $type, $size, $thickness) {
    $distance: (100% - $size) / 2;
    &:#{$type} {
    content : '';
    position: absolute;
    z-index: 1;
    @if $mode == horizontal {
    left: $distance; right: $distance;
    height: $thickness;
    } @else {
    top: $distance; bottom: $distance;
    width: $thickness;
    }
    }
    }

    @mixin line-gradient($pos, $opacity) {
    @include radial-gradient($pos, rgba(black, $opacity), rgba(black, 0));
    }

    @mixin left-line($size, $opacity: .15, $thickness: 10px) {
    @include line(vertical, before, $size, $thickness);
    &:before {
    left: 0;
    @include line-gradient(left center, $opacity);
    }
    }

    @mixin bottom-line($size, $opacity: .15, $thickness: 10px) {
    @include line(horizontal, after, $size, $thickness);
    &:after {
    bottom: 0;
    @include line-gradient(center bottom, $opacity);

    }
    }

    @mixin top-line($size, $opacity: .15, $thickness: 10px) {
    @include line(horizontal, before, $size, $thickness);
    &:before {
    top: 0;
    @include line-gradient(center top, $opacity);
    }
    }

    @mixin inverse-bottom-line($size, $opacity: .15, $thickness: 10px) {
    @include line(horizontal, after, $size, $thickness);
    &:after {
    bottom: -$thickness;
    @include line-gradient(center top, $opacity);
    }
    }

    @mixin hide-bottom-line {
    &:after {
    display: none;
    }
    }