File: /var/www/html/wpprm_err/wp-content/themes/ronneby/assets/less.lib/sb_mixins.less
/*------------------------------------------------------------------
[Main theme mixins]
-------------------------------------------------------------------*/
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Box sizing
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
// Break Word
.break-word() {
word-wrap: break-word;
}
// Position: Absolute
.absolute(@z-index: 1) {
position: absolute;
z-index: @z-index;
}
//DEPRECATED
.abs() {
position: absolute;
}
// Position: relative
.relative(@z-index: 1) {
position: relative;
z-index: @z-index;
}
//DEPRECATED
.rel() {
position: relative;
}
// Display: inline-block
.inline-block() {
display: inline-block;
//DEPRECATED *zoom: 1; /* Fix for IE7 */
//DEPRECATED *display: inline; /* Fix for IE7 */
}
// Display: block
.block() {
display: block;
}
.hide() {
display: none;
}
//@TODO: DEPRECATED
.valign-middle() {
display: table;
& > div,
& > ul,
& > span {
display: table-cell;
height: 100%;
vertical-align: middle;
}
}
.vertical-align() {
position: relative;
top: 50%;
.transform(translateY(-50%));
}
.vertical-align-flex() {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.horizontal-align(@position: relative) {
position: @position;
left: 50%;
.transform(translateX(-50%));
}
.size(@w:auto, @h:auto) {
width: @w;
height: @h;
}
// Images Tools
// ==============================================
// Fluid image
.fluid-image(@w: 100%, @h: 100%) {
overflow: hidden;
.size(@w, @h);
> div,
> span,
> a {
display: block;
position: relative;
right: 50%;
float: right;
width: 100%;
img {
position: relative;
right: -50%;
}
}
}
// Inscribed image
.inscribed-image(@w: 100%, @h: 9000px) {
.size(@w, @h);
text-align: center;
img {
max-width: @w;
max-height: @h;
}
}
//
.inscribed-image-middle(@w: 100%, @h: auto) {
display: table;
.size(@w, @h);
div, a {
.size(100%, 100%);
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: @w;
max-height: @h;
}
}
/*
.thumbnail-fluid {
.fluid-image();
}
.thumbnail-inscribed {
.inscribed-image();
}
*/
/* ----------------------------------------
jCarousel
---------------------------------------- */
.jcarousel-base-control() {
.jcarousel-control,
.slider-control {
@w: 36px;
@h: 36px;
.abs();
top: 50%;
.block();
width: @w;
height: @h;
line-height: @h;
text-align: center;
margin-top: -@h / 2;
background: @third-site-dark-color;
//border: 1px solid fade(#cdcdcd, 50%);
.rounded(0px);
z-index: 15;
.opacity(0);
.transition(~"left .3s ease-in-out, right .3s ease-in-out, background .3s ease-in-out, border-color .3s ease-in-out, opacity .3s ease-in-out");
&.jcarousel-control-prev,
&.prev {
left: -40px;
}
&.jcarousel-control-prev,
&.next {
right: -40px;
}
&.prev,
&.next {
&:before {
font-size: 16px;
font-family: "dfd-added-font-icon";
.block();
color: @icon-base-color;
}
}
&.prev {
&:before {
content: "\e800";
.rotate(180deg);
}
}
&.next {
&:before {
content: "\e800";
}
}
/*&:before {
content: "";
.abs();
top: 50%;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
&:after {
content: "";
.block();
width: 50px;
height: 2px;
.abs();
top: 50%;
margin-top: -1px;
background: @forth-site-dark-color;
}
&:hover {
background: @main-site-dark-color;
border-color: @main-site-dark-color;
}
&.jcarousel-control-prev,
&.prev {
left: 20px;
&:before {
left: 50%;
margin-left: -5px;
border-right: 5px solid @forth-site-dark-color;
.transition(margin-left .3s ease-in-out);
}
&:after {
left: 50%;
margin-left: 0;
.transition(margin-left .3s ease-in-out);
}
&:hover {
&:before {
margin-left: -10px;
}
&:after {
margin-left: -5px;
}
}
}
&.jcarousel-control-next,
&.next {
right: 20px;
&:before {
right: 50%;
margin-right: -5px;
border-left: 5px solid @forth-site-dark-color;
.transition(margin-right .3s ease-in-out);
}
&:after {
right: 50%;
margin-right: 0;
.transition(margin-right .3s ease-in-out);
}
&:hover {
&:before {
margin-right: -10px;
}
&:after {
margin-right: -5px;
}
}
}*/
}
&:hover {
.jcarousel-control,
.slider-control {
.opacity(1);
&.prev {
left: 0;
}
&.next {
right: 0;
}
}
}
}
.carousel() {
.slick-list {
overflow: hidden;
margin: 0;
padding: 0;
.slick-slide {
float: left;
}
}
.jcarousel-base-control();
}
.carouset-dots-vertical() {
.slick-dots {
.abs();
top: 50%;
left: 0;
padding-top: 0 !important;
width: 50px;
height: auto;
.transform(translateY(-50%));
li {
width: 100%;
button {
color: @title-color;
&:before {
left: 0;
}
}
}
}
}
.jcarousel() {
.rel();
overflow: hidden;
width: 100%;
& > ul {
width: 20000em;
.rel();
.clearfix();
list-style: none;
margin: 0;
padding: 0;
}
& > ul > li {
float: left;
max-width: @foundation-row-width - @gutter-width;
}
.jcarousel-base-control();
}
// @DEPRECATED:
.jcarousel-base() {
.rel();
overflow: hidden;
width: 100%;
> ul {
width: 20000em;
.rel();
.clearfix();
list-style: none;
margin: 0;
padding: 0;
> li {
float: left;
max-width: @foundation-row-width - @gutter-width;
}
}
.jcarousel-base-control();
}
// Border Radius Tools
// ==============================================
// Rounded
.rounded(@radius) {
/* -webkit-border-radius: @radius;
-moz-border-radius: @radius;*/
border-radius: @radius;
}
.rounded-top-left(@radius) {
/* -webkit-border-top-left-radius: @radius;
-moz-border-top-left-radius: @radius;*/
border-top-left-radius: @radius;
}
.rounded-top-right(@radius) {
/* -webkit-border-top-right-radius: @radius;
-moz-border-top-right-radius: @radius;*/
border-top-right-radius: @radius;
}
.rounded-top(@radius) {
.rounded-top-left(@radius);
.rounded-top-right(@radius);
}
.rounded-bottom-left(@radius) {
/* -webkit-border-bottom-left-radius: @radius;
-moz-border-bottom-left-radius: @radius;*/
border-bottom-left-radius: @radius;
}
.rounded-bottom-right(@radius) {
/* -webkit-border-bottom-right-radius: @radius;
-moz-border-bottom-right-radius: @radius;*/
border-bottom-right-radius: @radius;
}
.rounded-bottom(@radius) {
.rounded-bottom-left(@radius);
.rounded-bottom-right(@radius);
}
// Shadow Tools
// ==============================================
// Box Shadow
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
// Text Shadow
.transform(@transformations) {
-webkit-transform: @transformations;
-moz-transform: @transformations;
/*-ms-transform: @transformations;*/
-o-transform: @transformations;
transform: @transformations;
}
.scale-rotate(@scale, @rotate) {
-webkit-transform: scale(@scale), rotate(@rotate);
-moz-transform: @transformations;
/*-ms-transform: @transformations;*/
-o-transform: @transformations;
transform: @transformations;
}
.transform-origin(@transformations) {
-webkit-transform-origin: @transformations;
-moz-transform-origin: @transformations;
/*-ms-transform-origin: @transformations;*/
-o-transform-origin: @transformations;
transform-origin: @transformations;
}
.transform-style(@transformations) {
-webkit-transform-style: @transformations;
-moz-transform-style: @transformations;
-o-transform-style: @transformations;
transform-style: @transformations;
}
.animation(@animation) {
-webkit-animation: @animation;
-moz-animation: @animation;
/*-ms-animation: @animation;*/
/*-o-animation: @animation;*/
animation: @animation;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-moz-animation-duration: @duration;
/*-ms-animation-duration: @duration;*/
/*-o-animation-duration: @duration;*/
animation-duration: @duration;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
/*-ms-animation-duration: @duration;*/
/*-o-animation-duration: @duration;*/
animation-delay: @delay;
}
.animation-name(@name) {
-webkit-animation-name: @name;
-moz-animation-name: @name;
/*-ms-animation-name: @name;*/
/*-o-animation-name: @name;*/
animation-name: @name;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function;
/*-ms-animation-timing-function: @function;*/
/*-o-animation-timing-function: @function;*/
animation-timing-function: @function;
}
/**
* Flip: FlipH, FlipV
*/
.flipH() {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.flipV() {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
/*-o-transform: scaleY(-1);*/
transform: scaleY(-1);
/* filter: FlipV;
-ms-filter: "FlipV";*/
}
.text-shadow(@color, @blur: 2px, @x: 0, @y: 0px ) {
text-shadow: @x @y @blur @color;
//DEPRECATED filter: Shadow(Color = @color, Direction= tan(@x/@y), Strength=4);
}
// Transitions
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
/*-o-transition: @transition;*/
transition: @transition;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
-moz-transition-property: @transition-property;
-o-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
-moz-transition-duration: @transition-duration;
-o-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@transition-timing-function) {
-webkit-transition-timing-function: @transition-timing-function;
-moz-transition-timing-function: @transition-timing-function;
-o-transition-timing-function: @transition-timing-function;
transition-timing-function: @transition-timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
/*-o-transition: -o-transform @transition;*/
transition: transform @transition;
}
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
/*-ms-transform: rotate(@degrees); // IE9+*/
transform: rotate(@degrees);
}
.scale(@ratio) {
-webkit-transform: scale(@ratio);
/*-ms-transform: scale(@ratio); // IE9+*/
transform: scale(@ratio);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
/*-ms-transform: translate(@x, @y); // IE9+*/
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
/*-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+*/
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
// Opacity
.opacity(@opacity) {
opacity: @opacity;
/* @opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";*/
}
// Perspective
.perspective(@perspective) {
perspective: @perspective;
-webkit-perspective: @perspective;
}
.perspective-origin(@origin) {
-webkit-perspective-origin: @origin;
perspective-origin: @origin;
}
// Blur
.blur(@size: 3px) {
-webkit-filter: blur(@size);
-moz-filter: blur(@size);
-ms-filter: blur(@size);
-o-filter: blur(@size);
filter: blur(@size);
}
// No selection
.no-select() {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
/*-ms-user-select: none;*/
//DEPRECATED user-select: none;
}
// Gradient
.gradient(@color: #F5F5F5, @start: #EEE, @stop: @main-site-dark-color) {
background: @color;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @start), color-stop(1, @stop));
background: -ms-linear-gradient(bottom, @start, @stop);
background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%);
background: -o-linear-gradient(@stop, @start);
//DEPRECATED filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.background-size(@size) {
-webkit-background-size: @size;
-ms-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
background-size: @size;
}
.backface-visibility(@value) {
-webkit-backface-visibility: @value;
-moz-backface-visibility: @value;
-o-backface-visibility: @value;
-ms-backface-visibility: @value;
backface-visibility: @value;
}
.header-col-settings(@header-col-left-width, @header-col-right-width) {
.header-col-left {
width: @header-col-left-width;
}
.header-col-right {
width: @header-col-right-width;
}
.header-col-fluid {
margin-left: @header-col-left-width;
margin-right: @header-col-right-width;
}
}
.default-button() {
.rel();
.inline-block();
width: auto;
.dfd-font-styles(@default-button-font-style, @default-button-font-weight, @default-button-font-size, @default-button-font-family, @default-button-color, @default-button-line-height, @default-button-text-transform, @default-button-letter-spacing, @default-button-word-spacing);
height: @default-button-line-height;
padding-top: 0;
padding-bottom: 0;
padding-left: @default-button-padding-left;
padding-right: @default-button-padding-right;
background: @button-background-color;
border: @default-button-border-width @default-button-border-style @button-border-color;
.rounded(@default-button-border-radius);
cursor: pointer;
.transition(all .3s ease);
i {
font-size: 22px;
.inline-block();
width: 1.2em;
height: 1.2em;
line-height: 1.2;
.abs();
top: 50%;
right: 10px;
margin-top: -.6em;
color: inherit;
z-index: 3;
}
&:hover {
color: @default-button-hover-color;
background: @button-hover-background;
border: @default-button-border-width @default-button-border-style @button-hover-border-color;
}
}
.to-top-button() {
color: @to-top-button-color;
background: @top-button-background-color;
border: @to-top-button-border-width @to-top-button-border-style @top-button-border-color;
.rounded(@to-top-button-border-radius);
&:hover {
color: @to-top-button-hover-color;
background: @top-button-hover-background;
border-color: @top-button-hover-border-color;
}
}
.widget-title() {
.dfd-font-styles(@widget-title-font-style, @widget-title-font-weight, @widget-title-font-size, @widget-title-font-family, @widget-title-color, @widget-title-line-height, @widget-title-text-transform, @widget-title-letter-spacing, @widget-title-word-spacing);
}
.stunning-header-title() {
.dfd-font-styles(@stunning-header-title-font-style, @stunning-header-title-font-weight, @stunning-header-title-font-size, @stunning-header-title-font-family, @stunning-header-title-color, @stunning-header-title-line-height, @stunning-header-title-text-transform, @stunning-header-title-letter-spacing, @stunning-header-title-word-spacing);
}
.blog-title(@color: @title-color) {
.dfd-font-styles(@blog-title-font-style, @blog-title-font-weight, @blog-title-font-size, @blog-title-font-family, @blog-title-color, @blog-title-line-height, @blog-title-text-transform, @blog-title-letter-spacing, @blog-title-word-spacing);
/*margin-bottom: @blog-title-bottom-margin;*/
a {
.background-size(200.22% auto);
background-position: -0% 0;
background-image: -webkit-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, @background-sidebars 50%);
background-image: -moz-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, @background-sidebars 50%);
background-image: -ms-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, @background-sidebars 50%);
background-image: -o-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, @background-sidebars 50%);
background-image: linear-gradient(to right, fade(@main-site-dark-color,0) 50%, @background-sidebars 50%);
color: inherit;
.transition(~"background-position 0.5s ease-out, color .3s ease-in-out");
&:hover {
background-position: -99.99% 0;
}
}
}
.block-title(@color: @title-color) {
.dfd-font-styles(@block-title-font-style, @block-title-font-weight, @block-title-font-size, @block-title-font-family, @block-title-color, @block-title-line-height, @block-title-text-transform, @block-title-letter-spacing, @block-title-word-spacing);
.transition(color .3s ease-in-out);
a {
color: inherit;
}
}
.feature-title() {
.dfd-font-styles(@feature-title-font-style, @feature-title-font-weight, @feature-title-font-size, @feature-title-font-family, @feature-title-color, @feature-title-line-height, @feature-title-text-transform, @feature-title-letter-spacing, @feature-title-word-spacing);
.transition(~"color .3s ease-in-out, border-bottom-color .3s ease-in-out");
a {
color: inherit;
}
}
.box-name() {
.dfd-font-styles(@box-name-font-style, @box-name-font-weight, @box-name-font-size, @box-name-font-family, @box-name-color, @box-name-line-height, @box-name-text-transform, @box-name-letter-spacing, @box-name-word-spacing);
.transition(~"color .3s ease-in-out, border-bottom-color .3s ease-in-out");
a {
color: inherit;
padding-bottom: 7px;
}
}
.subtitle() {
.dfd-font-styles(@subtitles-font-style, @subtitles-font-weight, @subtitles-font-size, @subtitles-font-family, @subtitles-color, @subtitles-line-height, @subtitles-text-transform, @subtitles-letter-spacing, @subtitles-word-spacing);
.transition(color .3s ease-in-out);
}
.entry-meta() {
.dfd-font-styles(@entry-meta-font-style, @entry-meta-font-weight, @entry-meta-font-size, @entry-meta-font-family, @entry-meta-color, @entry-meta-line-height, @entry-meta-text-transform, @entry-meta-letter-spacing, @entry-meta-word-spacing);
}
.bottom-line() {
content: "";
display: block;
width: 55px;
height: 1px;
.abs();
bottom: 0;
left: 50%;
.transform(translateX(-50%));
background: @main-site-light-color;
.transition(width .3s ease-in-out);
}
.default-gradient(@direction: top) {
background: -moz-linear-gradient(@direction, lighten(@main-site-light-color, 20%), @main-site-light-color);
background: -webkit-linear-gradient(@direction, lighten(@main-site-light-color, 20%), @main-site-light-color);
background: -o-linear-gradient(@direction, lighten(@main-site-light-color, 20%), @main-site-light-color);
background: -ms-linear-gradient(@direction, lighten(@main-site-light-color, 20%), @main-site-light-color);
background: linear-gradient(@direction, lighten(@main-site-light-color, 20%), @main-site-light-color);
}
.button-hover() {
&:after {
content: "";
.block();
width: 1px;
height: 340%;
.abs();
top: -120%;
left: 50%;
background: fade(@forth-site-dark-color, 5%);
.opacity(0);
z-index: 1;
.rotate(-45deg);
.transition(~"opacity .3s ease-in-out .3s, -webkit-transform .3s ease-in-out, -moz-transform .3s ease-in-out, -o-transform .3s ease-in-out, transform .3s ease-in-out");
}
&:hover:after {
.opacity(1);
.transform(rotate(-45deg) scale(300));
.transition(~"-webkit-transform .3s ease-in-out, -moz-transform .3s ease-in-out, -o-transform .3s ease-in-out, transform .3s ease-in-out");
}
}
.dfd-font-styles(@font-style: @default-text-font-style, @font-weight: @default-text-font-weight, @font-size: @default-text-font-size, @font-family: @default-text-font-family, @color: @default-text-color, @line-height: @default-text-line-height, @text-transform: @default-text-text-transform, @letter-spacing: @default-text-letter-spacing, @word-spacing: @default-text-word-spacing) {
font-style: @font-style;
font-weight: @font-weight;
font-size: @font-size;
font-family: @font-family;
line-height: @line-height;
text-transform: @text-transform;
letter-spacing: @letter-spacing;
word-spacing: @word-spacing;
color: @color;
}
.link-style() {
.rel();
font-size: @link-font-size;
font-family: @link-font-family;
font-weight: @link-font-weight;
font-style: @link-font-style;
text-transform: @link-text-transform;
letter-spacing: @link-letter-spacing;
color: @link-color;
.transition(color .3s ease);
&:hover {
color: @link-hover-color;
}
}
.link-decoration() {
&:before {
content: "";
.block();
width: 100%;
height: 0;
.abs();
left: 0;
top: 50%;
margin-top: @link-font-size/2;
border-bottom-width: 1px;
border-bottom-style: @link-decoration;
border-bottom-color: @link-decoration-color;
.transition(border-bottom .3s ease);
//.transition(margin-top .3s ease);
}
&:hover {
&:before {
border-bottom-style: solid;
//margin-top: @link-font-size/2 + 2;
}
}
}
.like-comments-style(@s: 25px) {
.post-comments-wrap {
font-size: @link-font-size - 2;
font-family: @link-font-family;
.block();
width: @s;
height: @s;
line-height: @s;
.abs();
left: 0;
top: 10px;
text-align: center;
background: @third-site-light-color;
color: @main-site-dark-color;
z-index: 2;
.transition(margin-top .3s ease);
.entry-comments {
.block();
line-height: inherit;
color: inherit;
a {
.block();
line-height: inherit;
color: inherit;
}
}
&:after {
content: "";
.block();
.abs();
top: 100%;
right: 0;
border-top: 3px solid darken(@third-site-light-color, 10%);
border-left: 3px solid darken(@third-site-light-color, 10%);
border-bottom: 3px solid transparent;
border-right: 3px solid transparent;
}
}
.post-comments-wrap + .post-like-wrap {
left: @s;
.transition-delay(.15s);
}
.post-like-wrap {
.block();
width: @s * 2;
height: @s;
.abs();
top: 10px;
left: 0;
z-index: 2;
.transition(margin-top .3s ease);
i,
span.count {
.abs();
top: 0;
.block();
width: @s;
height: @s;
line-height: @s;
text-align: center;
}
i {
font-size: 11px;
background: @third-site-dark-color;
color: @main-site-dark-color;
z-index: 3;
.transition(color .3s ease);
}
span.count {
font-size: @link-font-size - 2;
font-family: @link-font-family;
left: @s;
background: lighten(@third-site-dark-color, 5%);
color: @main-site-dark-color;
z-index: 2;
.transform(rotateY(-180deg));
.transform-origin(0 50%);
.transition-transform(.3s ease);
}
span.like-hover-title {
.hide();
}
&:hover {
i {
}
span.count {
.transform(rotateY(0));
}
}
}
}
.folio-plus-link(@s: 60px, @gap: 10px, @w: 1px, @l: @s / 2, @color: @folio-hover-text-color) {
overflow: hidden;
.plus-link-container {
.abs();
border: 1px solid fade(@color, 10%);
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
.plus-link-out,
.plus-link-come {
.block();
.abs();
width: 100%;
height: 100%;
}
.plus-link-out {
&:before,
&:after {
content: "";
.block();
.abs();
top: 50%;
left: 50%;
background: @color;
.transition(margin .2s ease-in-out .2s);
}
&:before {
width: @w;
height: @l;
margin-left: -@w / 2;
margin-top: -@l / 2;
}
&:after {
width: @l;
height: @w;
margin-top: -@w / 2;
margin-left: -@l / 2;
}
}
.plus-link-come {
&:before,
&:after {
content: "";
.block();
.abs();
top: 50%;
left: 50%;
background: @color;
.transition(margin .2s ease-in-out);
}
&:before {
width: @w;
height: @l;
margin-left: -@w/2;
margin-top: @s + 2 - @l;
}
&:after {
width: @l;
height: @w;
margin-top: -@w/2;
margin-left: -(@s + 2);
}
}
}
&:hover {
.plus-link-container {
.plus-link-out {
&:before,
&:after {
.transition(margin .2s ease-in-out);
}
&:before {
margin-top: -(@s + 2);
}
&:after {
margin-left: @s + 2 - @l;
}
}
.plus-link-come {
&:before,
&:after {
.transition(margin .2s ease-in-out .2s);
}
&:before {
margin-top: -@l / 2;
}
&:after {
margin-left: -@l / 2;
}
}
}
}
}
.dfd-zigzags() {
&:before,
&:after {
content: "";
overflow: hidden;
.block();
width: 100%;
height: 10px;
.abs();
left: 0;
}
&:before {
bottom: 100%;
background: -webkit-linear-gradient( 45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% ), linear-gradient( -45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% );
background: -moz-linear-gradient( 45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% ), linear-gradient( -45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% );
background: -ms-linear-gradient( 45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% ), linear-gradient( -45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% );
background: -o-linear-gradient( 45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% ), linear-gradient( -45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% );
background: linear-gradient( 45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% ), linear-gradient( -45deg, transparent 33.333%, @background-sidebars 33.333%, @background-sidebars 66.667%, transparent 66.667% );
background-size: 10px 20px;
}
&:after {
top: 100%;
background: -webkit-linear-gradient(45deg,transparent 33.333%, @main-site-dark-color 33.333%, @main-site-dark-color 66.667%,transparent 66.667%), linear-gradient(-45deg,@background-sidebars 33.333%, transparent 33.333%, transparent 66.667%, @background-sidebars 66.667%);
background: -moz-linear-gradient(45deg,transparent 33.333%, @main-site-dark-color 33.333%, @main-site-dark-color 66.667%,transparent 66.667%), linear-gradient(-45deg,@background-sidebars 33.333%, transparent 33.333%, transparent 66.667%, @background-sidebars 66.667%);
background: -ms-linear-gradient(45deg,transparent 33.333%, @main-site-dark-color 33.333%, @main-site-dark-color 66.667%,transparent 66.667%), linear-gradient(-45deg,@background-sidebars 33.333%, transparent 33.333%, transparent 66.667%, @background-sidebars 66.667%);
background: -o-linear-gradient(45deg,transparent 33.333%, @main-site-dark-color 33.333%, @main-site-dark-color 66.667%,transparent 66.667%), linear-gradient(-45deg,@background-sidebars 33.333%, transparent 33.333%, transparent 66.667%, @background-sidebars 66.667%);
background: linear-gradient(45deg,transparent 33.333%, @main-site-dark-color 33.333%, @main-site-dark-color 66.667%,transparent 66.667%), linear-gradient(-45deg,@background-sidebars 33.333%, transparent 33.333%, transparent 66.667%, @background-sidebars 66.667%);
background-size: 10px 20px;
}
}
.dfd-diagonal-bg(@bg: @background-grey,@line: @main-site-dark-color) {
background: @bg;
background-image: -webkit-linear-gradient(135deg,@line 25%,transparent 25%,transparent 50%,@line 50%,@line 75%,transparent 75%,transparent);
background-image: -ms-linear-gradient(135deg,@line 25%,transparent 25%,transparent 50%,@line 50%,@line 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(135deg,@line 25%,transparent 25%,transparent 50%,@line 50%,@line 75%,transparent 75%,transparent);
background-image: linear-gradient(135deg,@line 25%,transparent 25%,transparent 50%,@line 50%,@line 75%,transparent 75%,transparent);
background-image: -moz-linear-gradient(135deg,@line 20%,transparent 25%,transparent 50%,@line 50%,@line 70%,transparent 75%,transparent);
-webkit-background-size: 14px 14px;
background-size: 14px 14px;
}
.carousel-gradient() {
.rel();
&:before,
&:after {
content: "";
.block();
width: 60px;
height: 100%;
.abs();
top: 0;
z-index: 1;
}
&:before {
left: 0;
background: -webkit-linear-gradient(left, @main-site-dark-color 30%, transparent);
background: -moz-linear-gradient(left, @main-site-dark-color 30%, transparent);
background: -ms-linear-gradient(left, @main-site-dark-color 30%, transparent);
background: -o-linear-gradient(left, @main-site-dark-color 30%, transparent);
background: linear-gradient(left, @main-site-dark-color 30%, transparent);
}
&:after {
right: 0;
background: -webkit-linear-gradient(right, @main-site-dark-color 30%, transparent);
background: -moz-linear-gradient(right, @main-site-dark-color 30%, transparent);
background: -ms-linear-gradient(right, @main-site-dark-color 30%, transparent);
background: -o-linear-gradient(right, @main-site-dark-color 30%, transparent);
background: linear-gradient(right, @main-site-dark-color 30%, transparent);
}
}
.dfd-carousel-arrows() {
@s: 50px;
.dfd-arrows-enabled {
&:hover {
.dfd-slider-control {
&.prev,
&.next {
.opacity(1);
}
}
}
&.dfd-keep-arrows {
.dfd-slider-control {
&.prev,
&.next {
.opacity(1);
}
}
}
}
.dfd-slider-control {
.abs();
.opacity(0);
.transition(opacity .3s ease);
> i {
font-size: 16px;
.block();
.abs();
}
.count {
.link-style();
.abs();
left: 50%;
bottom: 100%;
line-height: 1.2;
margin-bottom: 15px;
.transform(translateX(-50%));
&:hover {
color: @link-color;
}
}
}
.dfd-arrows-style_1,
.dfd-arrows-style_5 {
.dfd-slider-control {
.block();
width: @s;
height: @s;
> i {
height: 1em;
line-height: 1;
top: 50%;
margin-top: -.5em;
color: @third-site-dark-color;
}
&:after {
content: "";
.block();
width: 38px;
height: 2px;
.abs();
top: 50%;
margin-top: -1px;
background: @third-site-dark-color;
}
&.prev {
> i {
margin-left: -1px;
}
}
&.next {
> i {
margin-right: -1px;
}
}
}
}
.dfd-arrows-style_1 {
.dfd-slider-control {
> i {
.transition(color .3s ease);
}
.count {
margin-bottom: 0;
}
&:after {
.transition(background .3s ease);
}
&.prev {
> i {
left: 0;
}
&:after {
left: 0;
}
}
&.next {
> i {
right: 0;
}
&:after {
right: 0;
}
}
&:hover {
> i {
color: @third-site-light-color;
}
&:after {
background: @third-site-light-color;
}
}
}
}
.dfd-arrows-style_2 {
.dfd-slider-control {
width: @s;
height: @s;
line-height: @s;
text-align: center;
> i {
font-size: 26px;
width: inherit;
height: inherit;
line-height: inherit;
text-align: inherit;
.transition(color .3s ease);
}
.count {
margin-bottom: 0;
}
&:hover {
i {
color: @third-site-light-color;
}
}
}
}
.dfd-arrows-style_3,
.dfd-arrows-style_4 {
.dfd-slider-control {
width: @s;
height: @s;
line-height: @s;
text-align: center;
.translate3d(0;0;0);
> i {
font-size: 12px;
.rel();
left: 0;
width: inherit;
height: inherit;
line-height: inherit;
color: @main-site-dark-color;
.transition(color .3s ease);
}
&:after {
content: "";
.block();
width: 100%;
height: 100%;
.abs();
top: 0;
left: 0;
margin-left: 0;
background: @third-site-light-color;
z-index: -1;
.scale(1);
.transition-transform(.3s ease);
}
&:hover {
&:after {
.scale(1.05);
}
}
}
}
.dfd-arrows-style_3 {
.dfd-slider-control {
&:after {
.rounded(50%);
}
}
}
.dfd-arrows-style_5 {
.dfd-slider-control {
background: @third-site-light-color;
&.prev {
> i {
margin-left: -1px;
}
&:after {
margin-left: 0;
}
> i,
&:after {
left: 50%;
.transition(~"margin-left .3s ease, color .3s ease, background .3s ease");
}
&:hover {
> i {
margin-left: -11px;
}
&:after {
margin-left: -10px;
}
}
}
&.next {
> i {
margin-right: -1px;
}
&:after {
margin-right: 0;
}
> i,
&:after {
right: 50%;
.transition(margin-right .3s ease);
}
&:hover {
> i {
margin-right: -11px;
}
&:after {
margin-right: -10px;
}
}
}
}
}
.dfd-carousel-module-wrapper.dfd-arrows-enabled {
&.dfd-arrows_aside,
&.dfd-arrows_aside2,
&.dfd-arrows_aside_offset {
.dfd-slider-control {
top: 50%;
.transform(translateY(-50%));
&.prev {
left: 0;
}
&.next {
right: 0;
}
}
}
&.dfd-arrows_aside {
.dfd-slider-control {
&.prev {
margin-left: -30px;
}
&.next {
margin-right: -30px;
}
}
}
&.dfd-arrows_aside_offset {
.dfd-slider-control {
&.prev {
margin-left: -70px;
}
&.next {
margin-right: -70px;
}
}
}
&.dfd-arrows_top_left {
padding-top: 90px;
.dfd-slider-control {
top: 0;
&.prev {
left: 0;
}
&.next {
left: 80px;
}
}
}
&.dfd-arrows_top_center {
padding-top: 90px;
.dfd-slider-control {
top: 0;
&.prev {
right: 50%;
margin-right: 5px;
}
&.next {
left: 50%;
margin-left: 5px;
}
}
}
&.dfd-arrows_top_right {
padding-top: 90px;
.dfd-slider-control {
top: 0;
&.prev {
right: 80px;
}
&.next {
right: 0;
}
}
}
&.dfd-arrows_bottom_left {
padding-bottom: 90px;
.dfd-slider-control {
bottom: 0;
&.prev {
left: 0;
}
&.next {
left: 80px;
}
}
}
&.dfd-arrows_bottom_center {
padding-bottom: 90px;
.dfd-slider-control {
bottom: 0;
&.prev {
right: 50%;
margin-right: 5px;
}
&.next {
left: 50%;
margin-left: 5px;
}
}
}
&.dfd-arrows_bottom_right {
padding-bottom: 90px;
.dfd-slider-control {
bottom: 0;
&.prev {
right: 80px;
}
&.next {
right: 0;
}
}
}
&.dfd-arrows-uploaded {
.dfd-slider-control {
&.prev,
&.next {
.block();
width: @s;
height: @s;
> i {
.hide();
}
}
}
}
}
}
.radio-advanced-style() {
.clearfix();
margin: 0;
li {
.rel();
float: left;
height: @admin-input-height;
line-height: @admin-input-height;
text-align: center;
list-style: none;
margin: 0;
&:first-child {
label {
border-left-width: 1px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
&:before {
border-bottom-left-radius: 4px;
}
}
}
&:last-child {
label {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
&:before {
border-bottom-right-radius: 4px;
}
}
}
&.active {
label {
background: #eaeaea;
&:before {
border-bottom-color: #3498db;
}
}
}
input[type="radio"] {
.abs();
top: 0;
left: 0;
.block();
width: 100%;
height: 100%;
opacity: 0;
}
label {
.block();
height: @admin-input-height - 2;
line-height: @admin-input-height - 2;
padding: 0 20px;
background: transparent;
border: 1px solid #eaeaea;
border-left-width: 0;
.transition(background .3s ease);
&:before {
content: "";
.block();
height: 0;
.abs();
left: 0;
right: 0;
bottom: 0;
border-bottom: 2px solid transparent;
.transition(border-color .3s ease);
}
&:hover {
&:before {
border-bottom-color: #3498db;
}
}
}
}
};
@-webkit-keyframes dfdHotspotAnimation {
0%, 100% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
}
}
@-moz-keyframes dfdHotspotAnimation {
0%, 100% {
-moz-transform: scale(1);
}
50% {
-moz-transform: scale(1.1);
}
}
@-o-keyframes dfdHotspotAnimation {
0%, 100% {
-o-transform: scale(1);
}
50% {
-o-transform: scale(1.1);
}
}
@keyframes dfdHotspotAnimation {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.hotspot() {
.dfd-button-tooltip-left {
.HotspotPlugin_Hotspot {
> div {
top: 50%;
left: auto;
right: 100%;
margin: 0 10px 0 0;
.transform(translate(0, -50%));
&.hidden {
.transform(translate(0, -50%) scale(.85));
}
&:not(.hidden) {
.transform(translate(0, -50%) scale(1));
}
&.dfd-hotspot-left {
left: 100%;
right: auto;
margin: 0 0 0 10px;
}
}
}
}
.dfd-button-tooltip-right {
.HotspotPlugin_Hotspot {
> div {
top: 50%;
left: 100%;
margin: 0 0 0 10px;
.transform(translate(0, -50%));
&.hidden {
.transform(translate(0, -50%) scale(.85));
}
&:not(.hidden) {
.transform(translate(0, -50%) scale(1));
}
&.dfd-hotspot-right {
left: auto;
right: 100%;
margin: 0 10px 0 0;
}
}
}
}
.dfd-button-tooltip-top {
.HotspotPlugin_Hotspot {
> div {
top: auto;
bottom: 100%;
left: 50%;
margin: 0 0 10px 0;
.transform(translate(-50%, 0));
&.dfd-hotspot-left {
.transform(translate(0, 0));
}
&.dfd-hotspot-right {
.transform(translate(-100%, 0));
}
&.hidden {
.transform(translate(-50%, 0) scale(.85));
&.dfd-hotspot-left {
.transform(translate(0, 0) scale(.85));
}
&.dfd-hotspot-right {
.transform(translate(-100%, 0) scale(.85));
}
}
&:not(.hidden) {
.transform(translate(-50%, 0) scale(1));
&.dfd-hotspot-left {
.transform(translate(0, 0) scale(1));
}
&.dfd-hotspot-right {
.transform(translate(-100%, 0) scale(1));
}
}
}
}
}
.dfd-button-tooltip-bottom {
.HotspotPlugin_Hotspot {
> div {
top: 100%;
left: 50%;
margin: 10px 0 0 0;
.transform(translate(-50%, 0));
&.dfd-hotspot-left {
.transform(translate(0, 0));
}
&.dfd-hotspot-right {
.transform(translate(-100%, 0));
}
&.hidden {
.transform(translate(-50%, 0) scale(.85));
&.dfd-hotspot-left {
.transform(translate(0, 0) scale(.85));
}
&.dfd-hotspot-right {
.transform(translate(-100%, 0) scale(.85));
}
}
&:not(.hidden) {
.transform(translate(-50%, 0) scale(1));
&.dfd-hotspot-left {
.transform(translate(0, 0) scale(1));
}
&.dfd-hotspot-right {
.transform(translate(-100%, 0) scale(1));
}
}
}
}
}
.dfd-button-tooltip-top-left {
.HotspotPlugin_Hotspot {
> div {
top: auto;
bottom: 100%;
left: auto;
right: 100%;
margin: 0 10px 10px 0;
.transform(translate(0, 0));
&.dfd-hotspot-left {
left: 100%;
right: auto;
margin: 0 0 10px 10px;
}
&.hidden {
.transform(translate(0, 0) scale(.85));
}
&:not(.hidden) {
.transform(translate(0, 0) scale(1));
}
}
}
}
.dfd-button-tooltip-top-right {
.HotspotPlugin_Hotspot {
> div {
top: auto;
bottom: 100%;
left: 100%;
margin: 0 0 10px 10px;
.transform(translate(0, 0));
&.dfd-hotspot-right {
left: auto;
right: 100%;
margin: 0 10px 10px 0;
}
&.hidden {
.transform(translate(0, 0) scale(.85));
}
&:not(.hidden) {
.transform(translate(0, 0) scale(1));
}
}
}
}
.dfd-button-tooltip-bottom-left {
.HotspotPlugin_Hotspot {
> div {
top: 100%;
left: auto;
right: 100%;
margin: 10px 10px 0 0;
.transform(translate(0, 0));
&.dfd-hotspot-left {
left: 100%;
right: auto;
margin: 10px 0 0 10px;
}
&.hidden {
.transform(translate(0, 0) scale(.85));
}
&:not(.hidden) {
.transform(translate(0, 0) scale(1));
}
}
}
}
.dfd-button-tooltip-bottom-right {
.HotspotPlugin_Hotspot {
> div {
top: 100%;
left: 100%;
margin: 10px 0 0 10px;
.transform(translate(0, 0));
&.dfd-hotspot-right {
left: auto;
right: 100%;
margin: 10px 10px 0 0;
}
&.hidden {
.transform(translate(0, 0) scale(.85));
}
&:not(.hidden) {
.transform(translate(0, 0) scale(1));
}
}
}
}
.HotspotPlugin_Hotspot > div {
font-size: 10px;
.block();
.abs();
top: 100%;
left: 50%;
margin-top: 10px;
padding: 25px 20px;
overflow: hidden;
background: @main-site-dark-color;
.rounded(6px);
.box-shadow(7px 15px 70px 0 rgba(0,0,0,.25));
.transform(translateX(-50%) scale(1));
.transition(all .3s ease .2s);
z-index: 3;
&.hidden {
opacity: 0;
visibility: hidden;
.transform(translateX(-50%) scale(.85));
}
}
.HotspotPlugin_Hotspot&:not(.hidden) > div {
opacity: 1;
visibility: visible;
.transition-delay(0s);
}
.HotspotPlugin_Hotspot > div > .delete-item {
@s: 20px;
.abs();
top: 0;
right: 0;
.block();
width: @s;
height: @s;
line-height: @s;
text-align: center;
}
.HotspotPlugin_Hotspot > div > .Hotspot_Title {
font-size: 18px;
font-weight: bold;
white-space: nowrap;
color: #232323;
+ .Hotspot_Message {
margin-top: 5px;
}
}
.HotspotPlugin_Hotspot > div > .Hotspot_Message {
font-size: 14px;
line-height: 25px;
white-space: pre-line;
color: #595959;
}
/*
* Hotspots
*
*/
.HotspotPlugin_Hotspot {
&.dfdHotspotImageMarker {
.abs();
}
&:not(.dfdHotspotImageMarker) {
@s: 24px;
.abs();
width: @s;
height: @s;
margin-top: -@s/2;
margin-left: -@s/2;
z-index: 200;
cursor: pointer;
.transition(z-index .3s ease .3s);
&:before {
content: "";
.block();
width: 100%;
height: 100%;
.abs();
top: 0;
left: 0;
background: @third-site-light-color;
.rounded(50%);
.scale(1);
.transition-transform(.3s ease);
.animation(dfdHotspotAnimation 1s ease infinite);
}
&:after {
@small: 8px;
content: "";
.block();
width: @small;
height: @small;
.abs();
top: 50%;
left: 50%;
margin-top: -@small/2;
margin-left: -@small/2;
background: @main-site-dark-color;
.rounded(50%);
.box-shadow(0 3px 8px 0 rgba(0,0,0,0.35));
}
&:hover {
&:before {
.scale(1.25);
}
}
}
&:hover,
&.active {
z-index: 300;
.transition-delay(0s);
}
}
}