Viewing File: /home/maglabs/bambinos/wp-content/themes/juliette/assets/addon/css/tabs.scss

@import "../mixins";
@import '../../../../SCSS_JS_Source/_vendor/foundation/scss/foundation';

.elementor-widget-tabs{
  .elementor-tabs{
    .elementor-tab-content,
    .elementor-tab-title,
    .elementor-tabs-content-wrapper{
      border: none;
    }
  }
  .elementor-tab-title{
    transition: all 0.3s;
    a{
      transition: none;
    }
    &.elementor-active{
      &:before,
      &:after{
        display: none !important;
      }
    }
  }
  .novaworks-tab-title{
    transition: all 0.3s;
    cursor: pointer;
    outline: none;
  }
  &.elementor-tabs-view-horizontal{
    .elementor-tabs{
      .elementor-tab-content{
        border: none;
      }
    }
  }
}
.elementor-tabs-view-horizontal .elementor-tabs-wrapper{
  @include ad_display();
}

.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-content {
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  &.elementor-active{
    -webkit-animation-name: shortfadeInUp;
    animation-name: shortfadeInUp;
  }
}


.novaworks-tabs {
  @include ad_display();

  &__control-wrapper {
    @include ad_display();
    overflow: hidden;
    z-index: 1;
  }

  &__content-wrapper {
    position: relative;
    transition: height 0.25s cubic-bezier(.44,.96,.5,.98);
  }

  &__control {
    cursor: pointer;
    outline: none;

    &.novaworks-tabs__control-icon-left {
      .novaworks-tabs__control-inner {
        @include  flex-flow(row nowrap);
      }
    }

    &.novaworks-tabs__control-icon-top {
      .novaworks-tabs__control-inner {
        @include flex-flow(column nowrap);
      }
    }
  }

  &__control-inner {
    padding: 10px 20px;
    @include  ad_display();
    @include justify-content(center);
    @include align-items(center);
  }

  &__label-icon {
    margin-right: 5px;
    line-height: 1;

    .active-tab & {
      color: #f53e6a;
    }
  }

  &__label-image {
    width: 25px;
  }

  &__label-text {
    font-weight: 600;

    .active-tab & {
      color: #f53e6a;
    }
  }

  &__content {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    padding: 10px;
    display: none;

    > .elementor {
      > .elementor-inner {
        margin: 0;
      }
    }

    &.active-content {
      position: relative;
      pointer-events: auto;
      opacity: 1;
      display: block;
    }
  }

  &-position-top {
    @include flex-flow(column nowrap);
    @include align-items(stretch);

    .novaworks-tabs__control-wrapper {
      @include align-self(flex-start);
      @include flex-flow(row wrap);
      @include justify-content(flex-start);
      @include align-items(center);
      @include order(1);
    }

    .novaworks-tabs__content-wrapper {
      @include order(2);
      border-top-width: 1px;
    }
  }

  &-position-left {
    @include flex-flow(row nowrap);
    .novaworks-tabs__control-wrapper {
      @include ad_flex(0 1 auto);
      min-width: 200px;
      @include order(1);
      @include ad_display();
      @include flex-flow(column nowrap);
      @include align-items(stretch);
      @include align-self(flex-start);
    }

    .novaworks-tabs__content-wrapper{
      @include ad_flex(1 1 auto);
      @include order(2);
      border-left-width: 2px;
      @include align-self(stretch);
    }
  }

  &-position-right {
    @include flex-flow(row nowrap);

    .novaworks-tabs__control-wrapper {
      @include ad_flex(0 1 auto);
      min-width: 200px;
      @include order(2);
      @include ad_display();
      @include flex-flow(column nowrap);
      @include align-items(stretch);
      @include align-self(flex-start);
    }

    .novaworks-tabs__content-wrapper{
      @include ad_flex(1 1 auto);
      @include order(1);
      border-right-width: 2px;
    }
  }
  @media (max-width: 1700px) {
    &.novaworks-tabs-position-laptop-top {
      @include flex-flow(column nowrap);
      @include align-items(stretch);

      .novaworks-tabs__control-wrapper {
        @include align-self(flex-start);
        @include flex-flow(row wrap);
        @include justify-content(flex-start);
        @include align-items(center);
        @include order(1);
      }

      .novaworks-tabs__content-wrapper {
        @include order(2);
        border-top-width: 1px;
      }
    }

    &.novaworks-tabs-position-laptop-left {
      @include flex-flow(row nowrap);
      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(1);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(2);
        border-left-width: 2px;
        @include align-self(stretch);
      }
    }

    &.novaworks-tabs-position-laptop-right {
      @include flex-flow(row nowrap);

      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(2);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(1);
        border-right-width: 2px;
      }
    }
  }
  @media (max-width: 1200px) {
    &.novaworks-tabs-position-tablet-top {
      @include flex-flow(column nowrap);
      @include align-items(stretch);

      .novaworks-tabs__control-wrapper {
        @include align-self(flex-start);
        @include flex-flow(row wrap);
        @include justify-content(flex-start);
        @include align-items(center);
        @include order(1);
      }

      .novaworks-tabs__content-wrapper {
        @include order(2);
        border-top-width: 1px;
      }
    }

    &.novaworks-tabs-position-tablet-left {
      @include flex-flow(row nowrap);
      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(1);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(2);
        border-left-width: 2px;
        @include align-self(stretch);
      }
    }

    &.novaworks-tabs-position-tablet-right {
      @include flex-flow(row nowrap);

      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(2);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(1);
        border-right-width: 2px;
      }
    }
  }

  @media (max-width: 992px) {
    &.novaworks-tabs-position-tabletp-top {
      @include flex-flow(column nowrap);
      @include align-items(stretch);

      .novaworks-tabs__control-wrapper {
        @include align-self(flex-start);
        @include flex-flow(row wrap);
        @include justify-content(flex-start);
        @include align-items(center);
        @include order(1);
      }

      .novaworks-tabs__content-wrapper {
        @include order(2);
        border-top-width: 1px;
      }
    }

    &.novaworks-tabs-position-tabletp-left {
      @include flex-flow(row nowrap);
      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(1);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(2);
        border-left-width: 2px;
        @include align-self(stretch);
      }
    }

    &.novaworks-tabs-position-tabletp-right {
      @include flex-flow(row nowrap);

      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(2);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(1);
        border-right-width: 2px;
      }
    }
  }

  @media (max-width: 767px) {
    &.novaworks-tabs-position-mobile-top {
      @include flex-flow(column nowrap);
      @include align-items(stretch);

      .novaworks-tabs__control-wrapper {
        @include align-self(flex-start);
        @include flex-flow(row wrap);
        @include justify-content(flex-start);
        @include align-items(center);
        @include order(1);
      }

      .novaworks-tabs__content-wrapper {
        @include order(2);
        border-top-width: 1px;
      }
    }

    &.novaworks-tabs-position-mobile-left {
      @include flex-flow(row nowrap);
      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(1);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(2);
        border-left-width: 2px;
        @include align-self(stretch);
      }
    }

    &.novaworks-tabs-position-mobile-right {
      @include flex-flow(row nowrap);

      .novaworks-tabs__control-wrapper {
        @include ad_flex(0 1 auto);
        min-width: 200px;
        @include order(2);
        @include ad_display();
        @include flex-flow(column nowrap);
        @include align-items(stretch);
        @include align-self(flex-start);
      }

      .novaworks-tabs__content-wrapper{
        @include ad_flex(1 1 auto);
        @include order(1);
        border-right-width: 2px;
      }
    }
  }

  &-fade-effect {
    .novaworks-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 {
    .novaworks-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 {
    .novaworks-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 {
    .novaworks-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 {
    .novaworks-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 {
    .novaworks-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 {

    .novaworks-tabs__content {
      &.active-content {
        animation-name: fallPerspective;
        animation-duration: 500ms;
        animation-timing-function: cubic-bezier(.26,.69,.37,.96);
        animation-play-state: running;
      }
    }
  }
}

.novaworks-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;
  }
}

.novaworks-tabs-no-template-message {
  text-align: center;
  padding: 10px;
}

.novaworks-tabs-new-template-link {
  color: #f53e6a;
  text-decoration: underline;
}
@media(max-width: 992px) and (min-width: 768px){
  .mttabcontrolisselect-yes{
    .novaworks-tabs{
      .novaworks-tabs__control-wrapper{
        position: relative;
        .novaworks-tabs__label-text{
          text-decoration: none !important;
        }
        &:not(.open){
          > .novaworks-tabs__control {
            display: none;
            &.active-tab {
              display: block;
            }
          }
          > .active-tab{
            order: -1;
          }
        }
        &.open{
          .novaworks-tabs__control-wrapper-mobile a {
            display: none;
          }
        }
      }
      .novaworks-tabs__control-wrapper-mobile a {
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
        z-index: 2;
        top: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb%28138, 138, 138%29' fill-rule='nonzero'%3E%3Cpath d='M6.854 9.174l-2.862 2.45-2.862-2.45a.75.75 0 00-.935.007.514.514 0 00-.008.8l3.333 2.852c.26.223.683.223.943 0l3.333-2.852a.518.518 0 00.182-.555c-.06-.2-.243-.355-.476-.407a.744.744 0 00-.648.155zM4.472.21a.637.637 0 00-.944 0L.188 3.787A.752.752 0 00.196 4.79c.257.276.674.28.936.01L4 1.726 6.868 4.8a.637.637 0 00.936-.009.752.752 0 00.008-1.003L4.472.21z'/%3E%3C/g%3E%3C/svg%3E");
        -webkit-background-size: 12px auto;
        background-size: 12px auto;
        background-position: right 20px center;
        -webkit-background-origin: content-box;
        background-origin: content-box;
        background-repeat: no-repeat;
      }
    }
    .novaworks-tabs__control{
      display: block;
      width: 100%;
    }
  }
}
@media(max-width: 767px){
  .mbtabcontrolisselect-yes{
    .novaworks-tabs{
      .novaworks-tabs__control-wrapper{
        position: relative;
        .novaworks-tabs__label-text{
          text-decoration: none !important;
        }
        &:not(.open){
          > .novaworks-tabs__control {
            display: none;
            &.active-tab {
              display: block;
            }
          }
          > .active-tab{
            order: -1;
          }
        }
        &.open{
          .novaworks-tabs__control-wrapper-mobile a {
            display: none;
          }
        }
      }
      .novaworks-tabs__control-wrapper-mobile a {
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
        z-index: 2;
        top: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 13' width='8' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb%28138, 138, 138%29' fill-rule='nonzero'%3E%3Cpath d='M6.854 9.174l-2.862 2.45-2.862-2.45a.75.75 0 00-.935.007.514.514 0 00-.008.8l3.333 2.852c.26.223.683.223.943 0l3.333-2.852a.518.518 0 00.182-.555c-.06-.2-.243-.355-.476-.407a.744.744 0 00-.648.155zM4.472.21a.637.637 0 00-.944 0L.188 3.787A.752.752 0 00.196 4.79c.257.276.674.28.936.01L4 1.726 6.868 4.8a.637.637 0 00.936-.009.752.752 0 00.008-1.003L4.472.21z'/%3E%3C/g%3E%3C/svg%3E");
        -webkit-background-size: 12px auto;
        background-size: 12px auto;
        background-position: right 20px center;
        -webkit-background-origin: content-box;
        background-origin: content-box;
        background-repeat: no-repeat;
      }
    }
    .novaworks-tabs__control{
      display: block;
      width: 100%;
    }
  }
}