#photo-widget {
.no-boxshadow &, .no-csstransforms & {
.viewport {
padding-bottom: image-height('local/provider/photo-shadow-left.png') + 1px;
background: transparent image-url('local/provider/photo-shadow-left.png') no-repeat bottom left;
}
.shadow {
background: transparent image-url('local/provider/photo-shadow-right.png') no-repeat bottom right;
height: image-height('local/provider/photo-shadow-right.png');
width: image-width('local/provider/photo-shadow-right.png');
position: absolute;
bottom: 0;
right: 0;
}
}
.boxshadow.csstransforms & {
.viewport {
@include bendy-shadow(250px);
}
.shadow {
display: none;
}
}
}
@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) {
position: relative;
z-index: 1;
@include box-shadow(0 10px 5px -5px $color);
&:before, &:after {
content: "";
position: absolute;
bottom: 2px;
width: $width / 2;
height: 10px;
z-index: -1;
@include box-shadow(0 10px 10px 1px $color);
}
&:before {
left: 10px;
@include rotate(-$angle);
}
&:after {
right: 10px;
@include rotate($angle);
}
}