//
// ===========================================
// Theme customizer helpers
// ===========================================
//
.fontSize( @var ) when( @var = wprotoSystemNoValue ) {
}
.fontSize( @var ) when not( @var = wprotoSystemNoValue ) {
font-size: ~'@{var}rem';
}
//
// ===========================================
// Gradients
// ===========================================
//
/*------------------------------------------------------------------
[1. Define shared CSS classes used in template]
*/
.grad-orange() {
background: #e5493a;
background: linear-gradient(225deg, #e5493a, #ee6f2c, #f7941e);
background-size: 600% 600%;
-webkit-animation: AnimateGradient 4s ease infinite;
-moz-animation: AnimateGradient 4s ease infinite;
-o-animation: AnimateGradient 4s ease infinite;
animation: AnimateGradient 4s ease infinite;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5493a', endColorstr='#f7941e',GradientType=1 );
}
.grad-orange {
.grad-orange();
}
//
// ===========================================
// SVG Images as background
// ===========================================
//
// GRADIENT IMAGES
.img-service-ruler( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-service-settings( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-service-hand( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-service-monitor( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-load( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-tray( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-fav( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-users( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-share( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-docs( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-clock( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-webcam( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-eye( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-chat( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-star( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-equalizer( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-graph( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-phone( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
// SINGLE COLOR IMAGES
.img-check( @color ) {
.base64DataUriBackground(~'');
}
.img-cross( @color ) {
.base64DataUriBackground(~'');
}
.img-prev( @color ) {
.base64DataUriBackground(~'');
}
.img-next( @color ) {
.base64DataUriBackground(~'');
}
.img-envelope( @color ) {
.base64DataUriBackground(~'');
}
.img-compass( @color ) {
.base64DataUriBackground(~'');
}
.img-tel( @color ) {
.base64DataUriBackground(~'');
}
.img-apple( @color ) {
.base64DataUriBackground(~'');
}
.img-android( @color ) {
.base64DataUriBackground(~'');
}
.img-post-link( @color ) {
.base64DataUriBackground(~'');
}
.img-post-zoom( @color ) {
.base64DataUriBackground(~'');
}
.img-link( @color ) {
.base64DataUriBackground(~'');
}
.img-arrow-bottom( @color ) {
.base64DataUriBackground(~'');
}
.img-arrow-top( @color ) {
.base64DataUriBackground(~'');
}
.img-arrow-right( @color ) {
.base64DataUriBackground(~'');
}
.img-video( @color ) {
.base64DataUriBackground(~'');
}
.img-video-hover( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-audio( @color ) {
.base64DataUriBackground(~'');
}
.img-audio-hover( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-photo( @color ) {
.base64DataUriBackground(~'');
}
.img-photo-hover( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-book( @color ) {
.base64DataUriBackground(~'');
}
.img-book-hover( @color_1, @color_2 ) {
.base64DataUriBackground(~'');
}
.img-view( @color ) {
.base64DataUriBackground(~'');
}
.img-reply( @color ) {
.base64DataUriBackground(~'');
}
.img-blockquote( @color ) {
.base64DataUriBackground(~'');
}
.img-submenu-back( @color ) {
.base64DataUriBackground(~'');
}
.img-submenu( @color ) {
.base64DataUriBackground(~'');
}
.base64DataUriBackground (@encode) {
@dataUriPrefix: ~"url(data:image/svg+xml;base64,";
@dataUriSuffix: ~")";
@b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`;
background-image: @b64DataUri !important;
}
//
// ===========================================
// Gradient Tools
// ===========================================
//
// Vertical gradient
.v-gradient(@startColor: #aaa, @stopColor: #000) {
background: mix(@startColor, @stopColor, 50%);
background: -moz-linear-gradient(top, @startColor 0%, @stopColor 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(100%,@stopColor));
background: -webkit-linear-gradient(top, @startColor 0%,@stopColor 100%);
background: -o-linear-gradient(top, @startColor 0%, @stopColor 100%);
background: -ms-linear-gradient(top, @startColor 0%, @stopColor 100%);
background: linear-gradient(to bottom, @startColor 0%, @stopColor 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@stopColor));
}
// Horizontal gradient
.h-gradient(@startColor: #aaa, @stopColor: #000) {
background: mix(@startColor, @stopColor, 50%);
background: -moz-linear-gradient(left, @startColor 0%, @stopColor 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,@startColor), color-stop(100%,@stopColor));
background: -webkit-linear-gradient(left, @startColor 0%,@stopColor 100%);
background: -o-linear-gradient(left, @startColor 0%, @stopColor 100%);
background: -ms-linear-gradient(top, @startColor 0%, @stopColor 100%);
background: linear-gradient(to right, @startColor 0%, @stopColor 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@stopColor));
}
// Gradient from left bottom to right top
.bottom-top-gradient( @startColor: #fff, @stopColor: #f2f2f2 ) {
background: @startColor;
background: -moz-linear-gradient(45deg, @startColor 0%, @stopColor 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, @startColor), color-stop(100%, @stopColor));
background: -webkit-linear-gradient(45deg, @startColor 0%, @stopColor 100%);
background: -o-linear-gradient(45deg, @startColor 0%, @stopColor 100%);
background: -ms-linear-gradient(45deg, @startColor 0%, @stopColor 100%);
background: linear-gradient(45deg, @startColor 0%, @stopColor 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@stopColor));
}
//
// ===========================================
// Border Radius
// ===========================================
//
// Rounded
.rounded(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// Borner radius
.border-radius(@topRight: 0, @bottomRight: 0, @bottomLeft: 0, @topLeft: 0) {
// Top Right
-webkit-border-top-right-radius: @topRight;
-moz-border-radius-topright: @topRight;
border-top-right-radius: @topRight;
// Bottom Right
-webkit-border-bottom-right-radius: @bottomRight;
-moz-border-radius-bottomright: @bottomRight;
border-bottom-right-radius: @bottomRight;
// bottom Left
-webkit-border-bottom-left-radius: @bottomLeft;
-moz-border-radius-bottomleft: @bottomLeft;
border-bottom-left-radius: @bottomLeft;
// Top Right
-webkit-border-top-left-radius: @topLeft;
-moz-border-radius-topleft: @topLeft;
border-top-left-radius: @topLeft;
}
//
// ===========================================
// Shadow Tools
// ===========================================
//
// Basic box shadow
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Advanced box shadow
.box-shadows(@shadow, @shadow) {
-webkit-box-shadow: @shadow, @shadow;
-moz-box-shadow: @shadow, @shadow;
box-shadow: @shadow, @shadow;
}
// Outer shadow
.outer-shadow(@x: 0, @y: 1px, @blur: 2px, @alpha: 0.1) {
-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
// Inner shadow
.inner-shadow(@x: 0, @y: 1px, @blur: 2px, @alpha: 0.4) {
-webkit-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
}
//
// ===========================================
// Transition Tools
// ===========================================
//
// Perspective
.perspective( @value ) {
-webkit-perspective: @value;
-moz-perspective: @value;
-ms-perspective: @value;
perspective: @value;
-ms-transform: perspective("{@value}px");
-moz-transform: perspective("{@value}px");
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
// Transition
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Transition all
.transition-all(@duration: 0.2s, @delay: ease) {
-webkit-transition: all @duration @delay;
-moz-transition: all @duration @delay;
-o-transition: all @duration @delay;
transition: all @duration @delay;
}
// Transition duration
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
-moz-transition-duration: @transition-duration;
-o-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
// Transition delay
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
-moz-transition-delay: @transition-delay;
-o-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
//
// ===========================================
// Transform Tools
// ===========================================
//
// Basic transform
.transform(@transform) {
-webkit-transform: @transform;
-moz-transform: @transform;
-ms-transform: @transform;
-o-transform: @transform;
transform: @transform;
}
// Rotate
.rotate(@deg) {
.transform(rotate(@deg));
}
// Scale
.scale(@ratio) {
.transform(scale(@ratio));
}
// Translate
.translate(@x, @y) {
.transform(translate(@x, @y));
}
// Font size
.font-size( @size: 1.3 ) {
@pxsize: @size * 10;
font-size: ~`"@{pxsize}" + "px"`;
font-size: ~`"@{size}" + "rem"`;
}
//
// ===========================================
// More Tools
// ===========================================
//
// RGBA Background color
.bgrgba( @color, @opacity ) {
background-color: rgba( red( @color ), green( @color ), blue( @color ), @opacity / 10 );
}
// Box sizing
.box-sizing(@sizing: border-box) {
-webkit-box-sizing: @sizing;
-moz-box-sizing: @sizing;
-ms-box-sizing: @sizing;
box-sizing: @sizing;
}
.boxSizingImportant(@sizing: border-box) {
-webkit-box-sizing: @sizing !important;
-moz-box-sizing: @sizing !important;
-ms-box-sizing: @sizing !important;
box-sizing: @sizing !important;
}
// User select
.user-select(@select: none) {
-webkit-user-select: @select;
-moz-user-select: @select;
-ms-user-select: @select;
-o-user-select: @select;
user-select: @select;
}
// Opacity
.opacity(@opacity: 0.5) {
opacity: @opacity;
@opperc: @opacity * 100;
filter: ~"alpha(opacity=@{opperc})";
}
// Clear :after
.clear() {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
//
// ===========================================
// Develop and Testing Tools
// ===========================================
//
// Hide block
.hide() {
display: none;
}
// Hide conntent
.hide-text() {
font: 0/0 a;
border: 0;
color: transparent;
background-color: transparent;
text-shadow: none;
.box-shadow(none);
}