| Current File : /home/kelaby89/www/wp/wp-content/plugins/trx_addons/components/shortcodes/switcher/switcher.scss |
@import "../../../css/_mixins.scss";
@import "../../../css/_trx_addons.vars.scss";
/* Switcher */
.sc_switcher {
--trx-addons-switcher-effect-duration: 0.5s;
--trx-addons-switcher-effect-delay: 0.2s;
}
/* Type 'Default' */
.sc_switcher_controls {
--trx-addons-switcher-toggle-offset: 100%;
--trx-addons-switcher-toggle-height: 2.2em;
--trx-addons-switcher-toggle-padding: 0.2em;
// clamp is broken in translateX below
// --trx-addons-switcher-toggle-width: clamp( 3em, calc( 2 * var(--trx-addons-switcher-toggle-height) + 2 * var(--trx-addons-switcher-toggle-padding) ), 100% );
--trx-addons-switcher-toggle-width: calc( 2 * var(--trx-addons-switcher-toggle-height) + 2 * var(--trx-addons-switcher-toggle-padding) );
@include flex;
@include flex-direction(row);
@include flex-justify-content(center);
@include flex-align-items(center);
margin-bottom: 3em;
padding: 0 var(--trx-addons-switcher-toggle-padding);
}
.sc_switcher_controls_section1 {
margin-right: 1.5em;
text-align: right;
cursor: pointer;
}
.sc_switcher_controls_section2 {
margin-left: 1.5em;
cursor: pointer;
}
.sc_switcher_controls_section_title {
margin: 0 !important;
@include transition-property(color);
}
.sc_switcher_controls_toggle {
@include box(var(--trx-addons-switcher-toggle-width), calc( var(--trx-addons-switcher-toggle-height) + 2 * var(--trx-addons-switcher-toggle-padding) ) );
@include border-radius( calc( var(--trx-addons-switcher-toggle-height) / 2 ) );
background-color: #f0f0f0;
position: relative;
cursor: pointer;
@include flex-shrink(0);
}
.sc_switcher_controls_toggle_button {
@include square(var(--trx-addons-switcher-toggle-height));
@include border-round;
@include abs-lt(var(--trx-addons-switcher-toggle-padding),var(--trx-addons-switcher-toggle-padding));
background-color: #efa752;
@include transition-properties(transform,background-color,width);
@include transition-duration(var(--trx-addons-switcher-effect-duration));
}
.sc_switcher_controls_toggle_on .sc_switcher_controls_toggle_button {
background-color: #efa752;
}
.sc_switcher_controls_toggle:not(.sc_switcher_controls_toggle_on) .sc_switcher_controls_toggle_button {
@include translateX(calc( var(--trx-addons-switcher-toggle-width) - var(--trx-addons-switcher-toggle-height) - 2 * var(--trx-addons-switcher-toggle-padding) ));
}
/* Type 'Modern' */
.sc_switcher_modern {
.sc_switcher_content {
@include flex;
@include flex-direction(column);
@include flex-justify-content(flex-start);
@include flex-align-items(center);
}
.sc_switcher_controls {
@include inline-flex;
vertical-align: top;
@include flex-justify-content(space-between);
@include flex-align-items(center);
@include flex-wrap(nowrap);
position: relative;
}
.sc_switcher_controls_toggle {
@include abs-lt(0,0);
@include box(100%, 100% );
@include border-radius(5em);
}
.sc_switcher_controls_toggle_button {
width: calc( 50% - var(--trx-addons-switcher-toggle-padding) );
height: calc( 100% - 2 * var(--trx-addons-switcher-toggle-padding) );
@include border-radius(5em);
}
.sc_switcher_controls_toggle:not(.sc_switcher_controls_toggle_on) .sc_switcher_controls_toggle_button {
@include translateX(var(--trx-addons-switcher-toggle-offset, 100%));
}
.sc_switcher_controls_section1,
.sc_switcher_controls_section2 {
@include flex-grow(1);
@include flex-shrink(0);
position: relative;
z-index: 2;
padding: 0.5em 1.5em;
margin: 0;
text-align: center;
text-wrap: nowrap;
}
.sc_switcher_sections {
width: 100%;
}
}
/* Type 'Tabs' */
.sc_switcher_tabs_controls {
@include flex;
@include flex-direction(row);
@include flex-justify-content(center);
@include flex-align-items(stretch);
margin-bottom: 2em;
}
.sc_switcher_tab {
position: relative;
border: 1px solid #e0e0e0;
padding: 0.6em 1em;
@include transition-colors;
& + & {
margin-left: 0.5em;
}
&.sc_switcher_tab_active {
border-color: #000;
}
h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
p {
margin: 0.2em 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.sc_switcher_tab_link {
@include abs-cover;
}
/* Sections */
.sc_switcher_sections {
display: block;
position: relative;
overflow: hidden;
@include transition-property(height);
.elementor-section.elementor-section-stretched {
width: 100% !important;
left: 0 !important;
}
}
.sc_switcher_section {
position: relative;
&.sc_switcher_section_active {
z-index: 1;
}
body:not(.elelentor-editor-active) &[data-section]:not(.sc_switcher_section_inited) {
opacity: 0;
}
}
/* Effect 'Swap' */
.sc_switcher_effect_swap {
.sc_switcher_section {
float: left;
width: 100%;
opacity: 0;
@include translateX(-50%);
@include transition(transform var(--trx-addons-switcher-effect-duration) ease,opacity var(--trx-addons-switcher-effect-duration) ease);
}
.sc_switcher_section_2,
.sc_switcher_section:nth-child(n+2) {
margin-left: -100%;
}
.sc_switcher_section_active {
opacity: 1;
@include translateX(0);
@include transition-delay(var(--trx-addons-switcher-effect-delay));
}
}
/* Effect 'Slide' */
.sc_switcher_effect_slide {
--trx-addons-switcher-slide-active: 0;
--trx-addons-switcher-slide-width: 50%;
.sc_switcher_slider_1 { --trx-addons-switcher-slide-width: 100%; }
.sc_switcher_slider_2 { --trx-addons-switcher-slide-width: 50%; }
.sc_switcher_slider_3 { --trx-addons-switcher-slide-width: 33.3333%; }
.sc_switcher_slider_4 { --trx-addons-switcher-slide-width: 25%; }
.sc_switcher_slider_5 { --trx-addons-switcher-slide-width: 20%; }
.sc_switcher_slider_6 { --trx-addons-switcher-slide-width: 16.6666%; }
.sc_switcher_slider_7 { --trx-addons-switcher-slide-width: 14.2857%; }
.sc_switcher_slider_8 { --trx-addons-switcher-slide-width: 12.5%; }
.sc_switcher_slider_9 { --trx-addons-switcher-slide-width: 11.1111%; }
.sc_switcher_slider_1 { width: 100%; }
.sc_switcher_slider,
.sc_switcher_slider_2 { width: 200%; }
.sc_switcher_slider_3 { width: 300%; }
.sc_switcher_slider_4 { width: 400%; }
.sc_switcher_slider_5 { width: 500%; }
.sc_switcher_slider_6 { width: 600%; }
.sc_switcher_slider_7 { width: 700%; }
.sc_switcher_slider_8 { width: 800%; }
.sc_switcher_slider_9 { width: 900%; }
.sc_switcher_slider {
@include transition(transform var(--trx-addons-switcher-effect-duration) ease);
@include translateX( calc( -1 * var(--trx-addons-switcher-slide-active) * var(--trx-addons-switcher-slide-width) ) );
}
.sc_switcher_section {
float: left;
width: var(--trx-addons-switcher-slide-width);
@include transition(transform var(--trx-addons-switcher-effect-duration) ease);
}
}
/* Effect 'Fade' */
.sc_switcher_effect_fade {
.sc_switcher_section {
float: left;
width: 100%;
opacity: 0;
@include transition(opacity var(--trx-addons-switcher-effect-duration) ease);
}
.sc_switcher_section_2,
.sc_switcher_section:nth-child(n+2) {
margin-left: -100%;
}
.sc_switcher_section_active {
opacity: 1;
@include transition-delay(var(--trx-addons-switcher-effect-delay));
}
}
/* Effect 'None' */
.sc_switcher_effect_none {
.sc_switcher_sections {
@include transition(none);
}
.sc_switcher_controls_toggle_button {
@include transition-properties(background-color,width);
}
.sc_switcher_section {
float: left;
width: 100%;
opacity: 0;
z-index: 0;
}
.sc_switcher_section_2,
.sc_switcher_section:nth-child(n+2) {
margin-left: -100%;
}
.sc_switcher_section_active {
opacity: 1;
}
}