.jet-tabs { display: flex; &__control-wrapper { display: flex; background-color: white; overflow: hidden; z-index: 1; } &__content-wrapper { position: relative; overflow: hidden; background-color: white; transition: height 0.25s cubic-bezier(.44,.96,.5,.98); } &__control { cursor: pointer; outline: none; &.jet-tabs__control-icon-left { .jet-tabs__control-inner { flex-flow: row nowrap; } } &.jet-tabs__control-icon-top { .jet-tabs__control-inner { flex-flow: column nowrap; } } } &__control-inner { padding: 10px 20px; display: flex; justify-content: center; align-items: center; } &__label-icon { margin-right: 5px; line-height: 1; .active-tab & { color: #6ec1e4; } } &__label-image { width: 25px; } &__label-text { .active-tab & { color: #6ec1e4; } } &__content { width: 100%; top: 0; left: 0; position: absolute; opacity: 0; pointer-events: none; padding: 10px; > .elementor { > .elementor-inner { margin: 0; } } &.active-content { position: relative; pointer-events: auto; opacity: 1; .jet-popup--hide-state & { pointer-events: none; } } } &-position-top { flex-flow: column nowrap; align-items: stretch; .jet-tabs__control-wrapper { align-self: flex-start; flex-flow: row wrap; justify-content: flex-start; align-items: center; border-width: 1px 1px 0 1px; order: 1; } .jet-tabs__content-wrapper { order: 2; border-top-width: 1px; } } &-position-bottom { flex-flow: column nowrap; align-items: stretch; .jet-tabs__control-wrapper { align-self: flex-start; flex-flow: row wrap; justify-content: flex-start; align-items: center; border-width: 0 1px 1px 1px; order: 2; } .jet-tabs__content-wrapper { order: 1; } } &-position-left { flex-flow: row nowrap; .jet-tabs__control-wrapper { flex: 0 1 auto; min-width: 200px; order: 1; display: flex; flex-flow: column nowrap; align-items: stretch; } .jet-tabs__content-wrapper{ flex: 1 1 auto; order: 2; border-left-width: 2px; align-self: stretch; } } &-position-right { flex-flow: row nowrap; .jet-tabs__control-wrapper { flex: 0 1 auto; min-width: 100px; width: 200px; order: 2; display: flex; flex-flow: column nowrap; align-items: stretch; } .jet-tabs__content-wrapper{ flex: 1 1 auto; order: 1; } } &-ajax-template { .jet-tabs__content { min-height: 30px; } } @media (max-width: 1024px) { &.jet-tabs-position-tablet-top { flex-flow: column nowrap; align-items: stretch; .jet-tabs__control-wrapper { width: auto; min-width: inherit; align-self: flex-start; flex-flow: row wrap; justify-content: flex-start; align-items: center; order: 1; } .jet-tabs__content-wrapper { order: 2; } } &.jet-tabs-position-tablet-bottom { flex-flow: column nowrap; align-items: stretch; .jet-tabs__control-wrapper { align-self: flex-start; flex-flow: row wrap; justify-content: flex-start; align-items: center; order: 2; } .jet-tabs__content-wrapper { order: 1; } } &.jet-tabs-position-tablet-left { flex-flow: row nowrap; .jet-tabs__control-wrapper { flex: 0 1 auto; min-width: 200px; order: 1; display: flex; flex-flow: column nowrap; align-items: stretch; } .jet-tabs__content-wrapper{ flex: 1 1 auto; order: 2; border-left-width: 2px; align-self: stretch; } } &.jet-tabs-position-tablet-right { flex-flow: row nowrap; .jet-tabs__control-wrapper { flex: 0 1 auto; min-width: 100px; width: 200px; order: 2; display: flex; flex-flow: column nowrap; align-items: stretch; } .jet-tabs__content-wrapper{ flex: 1 1 auto; order: 1; } } } @media (max-width: 767px) { &.jet-tabs-position-mobile-top { flex-flow: column nowrap; align-items: stretch; .jet-tabs__control-wrapper { width: auto; min-width: inherit; align-self: flex-start; flex-flow: row wrap; justify-content: flex-start; align-items: center; order: 1; } .jet-tabs__content-wrapper { order: 2; } } &.jet-tabs-position-mobile-bottom { flex-flow: column nowrap; align-items: stretch; .jet-tabs__control-wrapper { align-self: flex-start; flex-flow: row wrap; justify-content: flex-start; align-items: center; order: 2; } .jet-tabs__content-wrapper { order: 1; } } &.jet-tabs-position-mobile-left { flex-flow: row nowrap; .jet-tabs__control-wrapper { flex: 0 1 auto; min-width: 200px; order: 1; display: flex; flex-flow: column nowrap; align-items: stretch; } .jet-tabs__content-wrapper{ flex: 1 1 auto; order: 2; align-self: stretch; } } &.jet-tabs-position-mobile-right { flex-flow: row nowrap; .jet-tabs__control-wrapper { flex: 0 1 auto; min-width: 100px; width: 200px; order: 2; display: flex; flex-flow: column nowrap; align-items: stretch; } .jet-tabs__content-wrapper{ flex: 1 1 auto; order: 1; } } } &-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; } } } &-column-fade-effect { .jet-tabs__content { //display: none; .elementor-top-column { animation-name: fade; animation-fill-mode: backwards; animation-duration: 500ms; animation-timing-function: cubic-bezier(.26,.69,.37,.96); } &.active-content { //display: block; .elementor-top-column { @for $i from 1 through 4 { &:nth-child(#{$i}) { animation-delay: #{$i*100}ms; } } } } } } &-zoom-in-effect { .jet-tabs__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-tabs__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-tabs__content { &.active-content { animation-name: moveUp; animation-duration: 500ms; animation-timing-function: cubic-bezier(.26,.69,.37,.96); animation-play-state: running; } } } &-column-move-up-effect { .jet-tabs__content { //display: none; .elementor-top-column { animation-name: moveUp; animation-fill-mode: backwards; animation-duration: 500ms; animation-timing-function: cubic-bezier(.26,.69,.37,.96); } &.active-content { //display: block; .elementor-top-column { @for $i from 1 through 4 { &:nth-child(#{$i}) { animation-delay: #{$i*100}ms; } } } } } } &-fall-perspective-effect { .jet-tabs__content { &.active-content { animation-name: fallPerspective; animation-duration: 500ms; animation-timing-function: cubic-bezier(.26,.69,.37,.96); animation-play-state: running; } } } } .jet-tabs__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-tabs-no-template-message { text-align: center; padding: 10px; } .jet-tabs-new-template-link { color: #6ec1e4; text-decoration: underline; }