@viewdo/dxp-story-player-assets
Version:
## Installation
49 lines (42 loc) • 1.72 kB
text/less
.background-mixins(){
/* Background Image */
.genBackgroundImageClasses(@backgroundType, @bgImage, @blurAmount:none, @color:transparent, @colorOpacity: 75%, @fixed: true, @xpos: center, @ypos: center){
.ivx-background-image-@{backgroundType}{
position: fixed; //make sure this will work when applied to elements like buttons
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1000px fadeOut(@color, @colorOpacity);
background-image: url(@bgImage);
background-position: @xpos @ypos;
background-size: cover;
left: 0;
top: 0;
z-index: -1;
transform: scale(1.1);
._blur(@blurAmount);
}
}
._blur(@blurAmount){
-webkit-filter: ~'blur('@blurAmount~')';
-moz-filter: ~'blur('@blurAmount~')';
-o-filter: ~'blur('@blurAmount~')';
-ms-filter:~'blur('@blurAmount~')';
filter: ~'blur('@blurAmount~')';
}
/* Background Gradient */
.genBackgroundGradientClasses(@backgroundType, @colorList, @direction:to bottom, @color:transparent, @colorOpacity: 75%){
.ivx-background-gradient-@{backgroundType}{
position: fixed; //make sure this will work when applied to elements like buttons
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1000px fadeOut(@color, @colorOpacity);
background-image: svg-gradient(@direction, @colorList);
background-position: center center;
background-size: cover;
left: 0;
top: 0;
z-index: -1;
transform: scale(1.1);
}
}
}