Last active
December 26, 2015 09:29
Revisions
-
jcemer revised this gist
Nov 11, 2013 . 1 changed file with 13 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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); } -
jcemer renamed this gist
Oct 24, 2013 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
jcemer created this gist
Oct 24, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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; } }