File: /var/www/ippmt.kauko.lt/wp-content/plugins/ocean-elementor-widgets/assets/css/toggle/style.scss
// Display flex
@mixin flex() {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
// Justify content
@mixin justify( $args ) {
-webkit-justify-content: $args;
justify-content: $args;
}
// Align center
@mixin align() {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
// Transition
@mixin transition( $args ) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
/*------------------------------------------------------------------
Switch
-------------------------------------------------------------------*/
.oew-switch-container {
text-align: center;
.oew-switch-secondary-wrap {
display: none;
&.show {
display: block;
}
}
.oew-switch-primary-wrap.hide {
display: none;
}
.oew-switch-wrap {
@include flex();
@include align();
@include justify( center );
margin-bottom: 16px;
.oew-text {
color: #333;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.oew-switch {
margin: 0 25px;
text-align: center;
}
.oew-switch input {
position: absolute;
left: -9999px;
}
.oew-switch span {
position: relative;
padding-left: 4em;
padding-top: .25em;
cursor: pointer;
&:before,
&:after {
content: '';
position: absolute;
height: 1.80em;
@include transition( all .5s ease );
}
&:before {
left: 0;
top: 0;
width: 3.70em;
background-color: #dfd9ea;
border-radius: 1.5em;
z-index: 0;
}
&:after {
left: .15em;
top: .1em;
background-color: #fff;
border-radius: 50%;
width: 1.60em;
height: 1.60em;
}
}
&.oew-switch-on span:before {
background-color: #72da67;
border-color: #72da67;
}
&.oew-switch-on span:after {
left: 1.95em;
}
}
}
/* RTL */
body.rtl .oew-switch-container .oew-switch-wrap {
.oew-switch input {
right: -9999px;
left: auto;
}
.oew-switch span {
padding-right: 4em;
padding-left: 0;
&:before {
right: 0;
left: auto;
}
&:after {
right: .15em;
left: auto;
}
}
&.oew-switch-on span:after {
right: 1.95em;
left: auto;
}
}