257 lines
9.7 KiB
CSS
257 lines
9.7 KiB
CSS
/* stylelint-disable length-zero-no-unit */
|
|
/* stylelint-enable length-zero-no-unit */
|
|
.fusion-flip-boxes {
|
|
--awb-margin-top: 0;
|
|
--awb-margin-right: 0;
|
|
--awb-margin-bottom: 25px;
|
|
--awb-margin-left: 0;
|
|
--awb-flip-duration: var(--flip_boxes_flip_duration);
|
|
--awb-icon-color: var(--icon_color, inherit);
|
|
--awb-circle-color: var(--icon_circle_color, transparent);
|
|
--awb-circle-border-color: var(--icon_border_color, currentColor);
|
|
--awb-background-color-front: var(--flip_boxes_front_bg);
|
|
--awb-background-color-back: var(--flip_boxes_back_bg);
|
|
--awb-background-image-front: transparent;
|
|
--awb-background-image-back: transparent;
|
|
--awb-background-front-blend-mode: normal;
|
|
--awb-background-back-blend-mode: normal;
|
|
--awb-title-front-color: var(--flip_boxes_front_heading);
|
|
--awb-title-back-color: var(--flip_boxes_back_heading);
|
|
--awb-border-color: var(--flip_boxes_border_color);
|
|
--awb-border-size: var(--flip_boxes_border_size);
|
|
--awb-border-radius: var(--flip_boxes_border_radius);
|
|
--awb-text-front-color: var(--flip_boxes_front_text);
|
|
--awb-text-back-color: var(--flip_boxes_back_text);
|
|
margin: var(--awb-margin-top) var(--awb-margin-right) var(--awb-margin-bottom) var(--awb-margin-left);
|
|
}
|
|
.fusion-flip-boxes.row {
|
|
--awb-margin-left: calc(30px / -2);
|
|
/* stylelint-disable-line function-calc-no-invalid */
|
|
--awb-margin-right: calc(30px / -2);
|
|
/* stylelint-disable-line function-calc-no-invalid */
|
|
margin: var(--awb-margin-top) var(--awb-margin-right) var(--awb-margin-bottom) var(--awb-margin-left);
|
|
}
|
|
.fusion-flip-boxes .fusion-column {
|
|
box-sizing: border-box;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 0;
|
|
margin: 0;
|
|
backface-visibility: hidden;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-inner-wrapper {
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
perspective: 1000px;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-front {
|
|
display: flex;
|
|
align-items: center;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
perspective: 1000px;
|
|
padding: 27px 20px;
|
|
text-align: center;
|
|
backface-visibility: hidden;
|
|
background-clip: padding-box;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
transition-duration: var(--awb-flip-duration);
|
|
border: var(--awb-border-size) solid var(--awb-border-color);
|
|
border-radius: var(--awb-border-radius);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-front {
|
|
position: relative;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
background-color: var(--awb-background-color-front);
|
|
background-image: var(--awb-background-image-front);
|
|
background-blend-mode: var(--awb-background-front-blend-mode);
|
|
color: var(--awb-text-front-color);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-back {
|
|
position: absolute;
|
|
z-index: -1;
|
|
background-color: var(--awb-background-color-back);
|
|
background-image: var(--awb-background-image-back);
|
|
background-blend-mode: var(--awb-background-back-blend-mode);
|
|
color: var(--awb-text-back-color);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-back .fusion-button {
|
|
display: table;
|
|
margin: 20px auto 0;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-front-inner,
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-back-inner {
|
|
width: 100%;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box:hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box:focus .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-back {
|
|
z-index: 1;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box:hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box:focus .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-front {
|
|
z-index: -1;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-grafix {
|
|
display: table;
|
|
margin: 0 auto 10px;
|
|
color: var(--awb-icon-color);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-image {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-circle {
|
|
height: 64px;
|
|
width: 64px;
|
|
border: 1px solid var(--awb-circle-border-color);
|
|
border-radius: 50%;
|
|
background-color: var(--awb-circle-color);
|
|
background-clip: padding-box;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-circle i {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
font-size: 24px;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-no-circle i {
|
|
font-size: 60px;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-heading {
|
|
margin-top: 0;
|
|
margin-bottom: 9px;
|
|
padding-top: 0;
|
|
color: var(--awb-title-front-color);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-heading.without-text {
|
|
margin-bottom: 0;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .flip-box-heading-back {
|
|
margin-bottom: 9px;
|
|
margin-top: 0;
|
|
color: var(--awb-title-back-color);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box .finished-animating {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right .flip-box-front {
|
|
transform: rotateY(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right .flip-box-back {
|
|
transform: rotateY(-180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right.hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right:hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right:focus .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right:focus-within .flip-box-back {
|
|
transform: rotateY(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right.hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right:hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right:focus .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-right:focus-within .flip-box-front {
|
|
transform: rotateY(180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left .flip-box-front {
|
|
transform: rotateY(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left .flip-box-back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left.hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left:hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left:focus .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left:focus-within .flip-box-back {
|
|
transform: rotateY(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left.hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left:hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left:focus .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-left:focus-within .flip-box-front {
|
|
transform: rotateY(-180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up .flip-box-front {
|
|
transform: rotateX(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up .flip-box-back {
|
|
transform: rotateX(-180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up.hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up:hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up:focus .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up:focus-within .flip-box-back {
|
|
transform: rotateX(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up.hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up:hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up:focus .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-up:focus-within .flip-box-front {
|
|
transform: rotateX(180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down .flip-box-front {
|
|
transform: rotateX(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down .flip-box-back {
|
|
transform: rotateX(180deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down.hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down:hover .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down:focus .flip-box-back,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down:focus-within .flip-box-back {
|
|
transform: rotateX(0deg);
|
|
}
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down.hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down:hover .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down:focus .flip-box-front,
|
|
.fusion-flip-boxes .fusion-flip-box.flip-down:focus-within .flip-box-front {
|
|
transform: rotateX(-180deg);
|
|
}
|
|
.fusion-flip-boxes.flip-effect-classic .flip-box-back,
|
|
.fusion-flip-boxes.flip-effect-classic .flip-box-front {
|
|
transition: transform var(--awb-flip-duration) cubic-bezier(0.2, 0.85, 0.4, 1.275);
|
|
}
|
|
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box.hover .flip-box-grafix i:before,
|
|
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box:hover .flip-box-grafix i:before,
|
|
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box:focus .flip-box-grafix i:before,
|
|
.fusion-flip-boxes.flip-effect-classic .fusion-flip-box:focus-within .flip-box-grafix i:before {
|
|
display: none;
|
|
}
|
|
.fusion-flip-boxes.flip-effect-3d .flip-box-inner-wrapper {
|
|
transform-style: preserve-3d;
|
|
}
|
|
.fusion-flip-boxes.flip-effect-3d .flip-box-back,
|
|
.fusion-flip-boxes.flip-effect-3d .flip-box-front {
|
|
transform-style: preserve-3d;
|
|
transition: transform var(--awb-flip-duration) ease-in-out;
|
|
}
|
|
.fusion-flip-boxes.flip-effect-3d .flip-box-front-inner,
|
|
.fusion-flip-boxes.flip-effect-3d .flip-box-back-inner {
|
|
transform: translateZ(50px) scale(0.9);
|
|
}
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box.hover .flip-box-back,
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box:hover .flip-box-back,
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus .flip-box-back,
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-back {
|
|
transform: rotateY(0deg);
|
|
z-index: 1;
|
|
}
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box.hover .flip-box-front,
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box:hover .flip-box-front,
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus .flip-box-front,
|
|
.ua-edge .fusion-flip-boxes .fusion-flip-box:focus-within .flip-box-front {
|
|
transform: rotateY(180deg);
|
|
z-index: -1;
|
|
}
|