| Current File : /home/kelaby89/cartel.express/wp-content/plugins/trx_addons/addons/mouse-helper/mouse-helper.scss |
@import "../../css/_mixins.scss";
@import "../../css/_trx_addons.vars.scss";
@import "../../css/_trx_addons.colors.scss";
/* Mouse helper
--------------------------------------------------------------- */
.trx_addons_mouse_helper {
--mouse-helper-width: 15px;
--mouse-helper-height: 15px;
--mouse-helper-left: 5px;
--mouse-helper-top: 25px;
@include fixed-lt(var(--mouse-helper-left), var(--mouse-helper-top), 999999);
@include box(var(--mouse-helper-width), var(--mouse-helper-height));
@include border-round;
@include border-box;
@include transition-properties(left,top,width,height,opacity,color,background-color);
@include flex;
@include flex-direction(column);
@include flex-justify-content(center);
@include flex-align-items(center);
overflow: hidden;
font-size: 0.75em;
text-indent: 200px;
line-height: 1.25em;
text-align: center;
color: #fff;
background-color: $accent_color;
border: 1px solid transparent;
opacity: 0;
pointer-events: none;
will-change: left, top, width, height;
// Test blend mode
//------------------
// mix-blend-mode: difference;
// background-color: #fff !important;
// opacity: 1 !important;
//------------------
&.trx_addons_mouse_helper_abrupt {
@include transition-none;
}
&.trx_addons_mouse_helper_hide {
opacity: 0 !important;
}
&.trx_addons_mouse_helper_permanent {
opacity: 0.5;
}
&.trx_addons_mouse_helper_centered {
left: calc( var(--mouse-helper-width) / -2 );
top: calc( var(--mouse-helper-height) / -2 );
}
&.trx_addons_mouse_helper_left:not(.trx_addons_mouse_helper_centered) {
left: calc( var(--mouse-helper-width) * -1 - 15px );
}
&.trx_addons_mouse_helper_top:not(.trx_addons_mouse_helper_centered) {
top: calc( var(--mouse-helper-height) * -1 - 15px );
}
.trx_addons_mouse_helper_icon {
font-size: 3em;
}
&.trx_addons_mouse_helper_with_text .trx_addons_mouse_helper_icon {
margin-bottom: 0.25em;
font-size: 1.5em;
}
&.trx_addons_mouse_helper_with_text .trx_addons_mouse_helper_text {
line-height: 1.25em;
}
&.trx_addons_mouse_helper_with_text_round .trx_addons_mouse_helper_icon {
margin-bottom: 0;
}
.trx_addons_mouse_helper_text_round {
@include abs-cover;
body:not(.rtl) & {
@include animation(spin-ccw 8s infinite linear);
}
body.rtl & {
@include animation(spin 8s infinite linear);
}
.trx_addons_mouse_helper_text_round_item {
@include abs-lt;
@include transform-origin(left top);
line-height: 1.25em;
}
body.rtl & .trx_addons_mouse_helper_text_round_item {
left: auto;
right: 0;
@include transform-origin(right top);
}
}
.trx_addons_mouse_helper_image {
@include abs-cover(-1);
background-size: cover;
}
&.trx_addons_mouse_helper_active {
--mouse-helper-width: 25px;
--mouse-helper-height: 25px;
color: #fff;
opacity: 1;
text-indent: 0;
//mix-blend-mode: difference;
&.trx_addons_mouse_helper_action_highlight {
display:none;
}
&.trx_addons_mouse_helper_with_icon {
--mouse-helper-width: 50px;
--mouse-helper-height: 50px;
padding: 5px;
}
&.trx_addons_mouse_helper_with_text {
--mouse-helper-width: 75px;
--mouse-helper-height: 75px;
padding: 5px;
}
&.trx_addons_mouse_helper_with_image {
--mouse-helper-width: 128px;
--mouse-helper-height: 128px; //72px;
@include border-sharp;
&.trx_addons_mouse_helper_with_text {
--mouse-helper-width: 160px;
--mouse-helper-height: 160px; //90px;
.trx_addons_mouse_helper_image:before {
content: ' ';
@include bg-mask( #000, 0.3, -1);
}
}
}
}
}
/* Style Dot */
.trx_addons_mouse_helper_style_dot {
--mouse-helper-width: 15px;
--mouse-helper-height: 15px;
&.trx_addons_mouse_helper_active {
--mouse-helper-width: 34px;
--mouse-helper-height: 34px;
}
}
/* Style Pointer */
.trx_addons_mouse_helper_style_pointer {
--mouse-helper-width: 9px;
--mouse-helper-height: 9px;
&.trx_addons_mouse_helper_active {
--mouse-helper-width: 13px;
--mouse-helper-height: 13px;
}
&,
&.trx_addons_mouse_helper_active {
background-color: $text_light;
color: #fff;
}
&.trx_addons_mouse_helper_outer {
--mouse-helper-width: 35px;
--mouse-helper-height: 35px;
background-color: transparent !important;
border: 1px solid $text_light;
&.trx_addons_mouse_helper_active {
--mouse-helper-width: 45px;
--mouse-helper-height: 45px;
}
}
&.trx_addons_mouse_helper_over_link {
--mouse-helper-width: 11px;
--mouse-helper-height: 11px;
&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
background-color: $accent_color !important;
}
&.trx_addons_mouse_helper_outer {
--mouse-helper-width: 27px;
--mouse-helper-height: 27px;
border-color: $accent_color !important;
}
}
&.trx_addons_mouse_helper_with_icon,
&.trx_addons_mouse_helper_with_text,
&.trx_addons_mouse_helper_text_round,
&.trx_addons_mouse_helper_with_image,
&.trx_addons_mouse_helper_with_layout {
& ~ .trx_addons_mouse_helper_outer {
opacity: 0;
}
}
}
/* Style Aim */
.trx_addons_mouse_helper_style_aim {
--aim-size: 17px;
overflow: visible;
&.trx_addons_mouse_helper_reset {
overflow: hidden;
}
&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
--mouse-helper-width: 3px;
--mouse-helper-height: 3px;
&.trx_addons_mouse_helper_active,
&.trx_addons_mouse_helper_over_link {
--mouse-helper-width: 5px;
--mouse-helper-height: 5px;
}
}
&,
&.trx_addons_mouse_helper_active {
background-color: $text_light;
color: #fff;
}
&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
&:before,
&:after {
content: ' ';
display: block;
position: absolute;
background-color: inherit;
@include transition-property(background-color);
}
&:before {
left: calc( ( var(--mouse-helper-width) - 1 ) / 2 );
top: calc( ( var(--mouse-helper-height ) - var(--aim-size) - 1 ) / 2 );
@include box(1px, var(--aim-size));
}
&:after {
left: calc( ( var(--mouse-helper-width) - var(--aim-size) - 1 ) / 2 );
top: calc( ( var(--mouse-helper-height ) - 1 ) / 2 );
@include box(var(--aim-size), 1px);
}
}
&.trx_addons_mouse_helper_outer {
--mouse-helper-width: 35px;
--mouse-helper-height: 35px;
background-color: transparent !important;
border: 1px solid $text_light;
&.trx_addons_mouse_helper_active {
--mouse-helper-width: 45px;
--mouse-helper-height: 45px;
}
}
&.trx_addons_mouse_helper_over_link {
--aim-size: 13px;
&:not(.trx_addons_mouse_helper_outer):not(.trx_addons_mouse_helper_with_image):not(.trx_addons_mouse_helper_with_icon):not(.trx_addons_mouse_helper_with_text):not(.trx_addons_mouse_helper_with_layout) {
background-color: $accent_color !important;
}
&.trx_addons_mouse_helper_outer {
--mouse-helper-width: 27px;
--mouse-helper-height: 27px;
border-color: $accent_color !important;
}
}
&.trx_addons_mouse_helper_with_icon,
&.trx_addons_mouse_helper_with_text,
&.trx_addons_mouse_helper_text_round,
&.trx_addons_mouse_helper_with_image,
&.trx_addons_mouse_helper_with_layout {
& ~ .trx_addons_mouse_helper_outer {
opacity: 0;
}
}
}
/* Hightlight for Title and Heading */
[data-mouse-helper="highlight"] {
color: hsla(0,0%,100%,.25);
@include transition( color .7s cubic-bezier(.19,1,.22,1) );
-webkit-background-clip: text;
background-image: radial-gradient(closest-side, #fff 78%, transparent 0);
background-repeat: no-repeat;
background-position: 50%;
background-size: 0 0;
&.trx_addons_mouse_helper_over {
background-size: 5em 5em;
}
&.sc_item_title_style_shadow {
position: relative;
z-index: 1;
}
&.sc_item_title_style_gradient .sc_item_title_text {
opacity: 0.75;
}
}
/* Mouse helper in the Elementor editor */
body.elementor-editor-active .trx_addons_mouse_helper {
display: none !important;
}
/* Hide system cursor */
[data-mouse-helper-hide-cursor="1"],
[data-mouse-helper-hide-cursor="1"] * {
cursor: none !important;
}