Sha256: 313586058fa49d0a7be220bb0bc4eab4036f5f9df93e450ae72ea45ff7eebfde
Contents?: true
Size: 1.54 KB
Versions: 3
Compression:
Stored size: 1.54 KB
Contents
// Create a ribbon style for an element. Will
// -------------------------
// Requires that the child .ribbon-content be styled
@mixin ribbon($color, $foldHeight: 10px, $negativeMargin: 10px, $shadowX: 1px, $shadowY: 2px, $shadowBlur: 2px, $shadowColor: rgba(0, 0, 0, 0.5), $leftStrut: true, $rightStrut: false) {
position: relative;
box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
@include ribbon_gutters($gridGutterWidth, $negativeMargin);
@if $leftStrut {
&::before {
content: '';
position: absolute;
width: 0; height: 0;
left: 0;
border-top: $foldHeight solid $color;
bottom: -$foldHeight;
border-left: $negativeMargin solid transparent;
}
} @else {
&::before {
content: ' ';
position: absolute;
width: $negativeMargin;
height: 1px;
left: 0;
bottom: 0;
box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
}
}
@if $rightStrut {
&::after {
content: '';
position: absolute;
width: 0; height: 0;
right: 0px;
border-top: $foldHeight solid $color;
bottom: -$foldHeight;
border-right: $negativeMargin solid transparent;
}
} else {
&::after {
content: ' ';
position: absolute;
width: $negativeMargin;
height: 1px;
left: 0;
bottom: 0;
box-shadow: $shadowX $shadowY $shadowBlur $shadowColor;
}
}
}
@mixin ribbon_gutters($marginWidth, $ribbonOffset: 10px) {
margin-left: -($ribbonOffset + $marginWidth);
padding-left: $ribbonOffset + $marginWidth;
}
Version data entries
3 entries across 3 versions & 1 rubygems