Create a gist now

Instantly share code, notes, and snippets.

@jcemer /code.scss
Last active Dec 26, 2015

What would you like to do?
.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);
}

// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment