public
Last active

full browser width bars sass mixin

  • Download Gist
_bars.sass
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
// full browser width bars:
// http://css-tricks.com/full-browser-width-bars/
 
=bars($color, $bars: both)
position: relative
background: $color
@if $bars == left
&:before
content: ""
position: absolute
background: $color
top: 0
bottom: 0
+rem(width, 9999px)
right: 100%
@else if $bars == right
&:after
content: ""
position: absolute
background: $color
top: 0
bottom: 0
+rem(width, 9999px)
left: 100%
@else if $bars == both
&:before, &:after
content: ""
position: absolute
background: $color
top: 0
bottom: 0
+rem(width, 9999px)
&:before
right: 100%
&:after
left: 100%
 
// Top shadow / Top Bar
 
=top-bar($top-bar-color, $top-bar-height, $top-bar-box-shadow: none, $top-bar-z-index: 10, $top-bar-position: absolute)
&:before
content: ""
position: $top-bar-position
top: 0
left: 0
width: 100%
+rem(height, $top-bar-height)
background: $top-bar-color
z-index: $top-bar-z-index
@if $top-bar-box-shadow != none
+rem(box-shadow, $top-bar-box-shadow)
@else
box-shadow: none
_bars.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
// full browser width bars: http://css-tricks.com/full-browser-width-bars/
// rem @mixin: https://github.com/ry5n/rem
 
 
@mixin bars($color, $bars: both) {
 
position: relative;
background: $color;
 
@if $bars == left {
&:before {
content: "";
position: absolute;
background: $color;
top: 0;
bottom: 0;
@include rem(width, 9999px);
right: 100%;
}
}
@else if $bars == right {
&:after {
content: "";
position: absolute;
background: $color;
top: 0;
bottom: 0;
@include rem(width, 9999px);
left: 100%;
}
}
@else if $bars == both {
&:before, &:after {
content: "";
position: absolute;
background: $color;
top: 0;
bottom: 0;
@include rem(width, 9999px);
}
&:before { right: 100%; }
&:after { left: 100%; }
}
}
 
// Top shadow / Top Bar
 
@mixin top-bar($top-bar-color, $top-bar-height, $top-bar-box-shadow: none, $top-bar-z-index: 10, $top-bar-position: absolute) {
 
&:before {
content: "";
position: $top-bar-position;
top: 0;
left: 0;
width: 100%;
@include rem(height, $top-bar-height);
background: $top-bar-color;
z-index: $top-bar-z-index;
 
@if $top-bar-box-shadow != none {
@include rem(box-shadow, $top-bar-box-shadow);
}
 
@else {
box-shadow: none;
}
 
}
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.