Files
carpseeds.pl/wp-content/plugins/jet-tabs/assets/scss/addons/_jet-switcher.scss
2024-07-15 11:28:08 +02:00

305 lines
4.9 KiB
SCSS

.jet-switcher {
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: stretch;
&__control-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
&__control-instance {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
background-color: #f7f7fb;
border-radius: 50px;
transition: background-color 0.3s cubic-bezier(.44,.95,.57,.97);
}
&__control-handler {
position: absolute;
border-radius: inherit;
display: flex;
align-items: stretch;
top: 0;
z-index: 1;
span {
flex: 0 1 100%;
margin: 3px;
transition: all 0.3s cubic-bezier(.44,.95,.57,.97);
border-radius: inherit;
}
}
&__control {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
outline: none;
pointer-events: none;
z-index: 2;
text-align: center;
transition: all 0.3s cubic-bezier(.44,.95,.57,.97);
&--disable {
}
&--enable {
}
}
&__label-text {
user-select: none;
}
&__content-wrapper {
width: 100%;
position: relative;
transition: height 0.25s cubic-bezier(.44,.96,.5,.98);
overflow: hidden;
}
&__content {
width: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
pointer-events: none;
> .elementor {
> .elementor-inner {
margin: 0;
}
}
&.active-content {
position: relative;
pointer-events: auto;
opacity: 1;
}
}
}
.jet-switcher--preset-1 {
&.jet-switcher--disable {
.jet-switcher__control-handler {
transform: translateX(0);
span {
background-color: #c3c3c3;
}
}
.jet-switcher__control--disable {
color: #fff;
}
}
&.jet-switcher--enable {
.jet-switcher__control-handler {
transform: translateX(100%);
.rtl & {
transform: translateX(-100%);
}
span {
background-color: #61ce70;
}
}
.jet-switcher__control--enable {
color: #fff;
}
}
.jet-switcher__control-instance {
width: 160px;
height: 50px;
justify-content: flex-start;
}
.jet-switcher__control {
max-width: 50%;
}
.jet-switcher__control-handler {
width: 50%;
height: 100%;
transition: transform 0.3s cubic-bezier(.44,.95,.57,.97);
}
.jet-switcher__control--disable {
width: 50%;
height: 100%;
}
.jet-switcher__control--enable {
width: 50%;
height: 100%;
}
}
.jet-switcher--preset-2 {
&.jet-switcher--disable {
.jet-switcher__control-handler {
left: 0;
span {
background-color: #c3c3c3;
}
}
}
&.jet-switcher--enable {
.jet-switcher__control-handler {
left: calc(100% - 30px);
span {
background-color: #61ce70;
}
}
}
.jet-switcher__control-instance {
width: 80px;
height: 40px;
}
.jet-switcher__control-handler {
width: 60px;
height: 100%;
transition: left 0.3s cubic-bezier(.44,.95,.57,.97);
}
.jet-switcher__control--disable {
margin-right: 15px;
.rtl & {
margin-left: 15px;
}
}
.jet-switcher__control--enable {
margin-left: 15px;
.rtl & {
margin-right: 15px;
}
}
}
.jet-switcher {
&-fade-effect {
.jet-tabs__content {
&.active-content {
animation-name: fade;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(.26,.69,.37,.96);
animation-play-state: running;
}
}
}
&-zoom-in-effect {
.jet-switcher__content {
&.active-content {
animation-name: zoomIn;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(.26,.69,.37,.96);
animation-play-state: running;
}
}
}
&-zoom-out-effect {
.jet-switcher__content {
&.active-content {
animation-name: zoomOut;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(.26,.69,.37,.96);
animation-play-state: running;
}
}
}
&-move-up-effect {
.jet-switcher__content {
&.active-content {
animation-name: moveUp;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(.26,.69,.37,.96);
animation-play-state: running;
}
}
}
&-fall-perspective-effect {
.jet-switcher__content {
&.active-content {
animation-name: fallPerspective;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(.26,.69,.37,.96);
animation-play-state: running;
}
}
}
}
.jet-switcher__edit-cover {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
box-sizing: border-box;
height: 30px;
padding: 5px 10px;
right: 15px;
top: 15px;
border-radius: 3px;
background-color: #b7084e;
z-index: 99;
cursor: pointer;
transition: opacity 0.3s ease;
box-shadow: 0 0 0 0 rgba( 183, 8, 78, 0.6);
animation: edit-button-pulse 5s infinite;
i {
font-size: 14px;
color: white;
margin-right: 5px;
}
span {
font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
font-size: 13px;
color: white;
}
&:hover {
background-color: #840739;
animation: none;
}
}
.jet-switcher-no-template-message {
text-align: center;
padding: 10px;
}
.jet-switcher-new-template-link {
color: #6ec1e4;
text-decoration: underline;
}