PATH:
home
/
lab2454c
/
baas.elementalrock.com
/
wp-content
/
plugins
/
ocean-elementor-widgets
/
assets
/
css
/
tabs
// Display flex @mixin flex() { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } // Flex wrap @mixin wrap() { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } // Justify content @mixin justify( $args ) { -webkit-justify-content: $args; justify-content: $args; } // Flex Direction @mixin flex-direction( $args ) { -webkit-flex-direction: $args; flex-direction: $args; } /*------------------------------------------------------------------ Tabs -------------------------------------------------------------------*/ .oew-tabs { .oew-tabs-wrap { @include flex(); @include wrap(); &.oew-tabs-normal { &.oew-tabs-center { @include justify( center ); } &.oew-tabs-right { @include justify( flex-end ); } &.oew-tabs-justify .oew-tab-title { flex: 1; flex-basis: 1px; text-align: center; } } } &.oew-tabs-left, &.oew-tabs-right { @include flex(); @include wrap(); .oew-tabs-wrap { @include flex-direction( column ); } .oew-tabs-content-wrap { flex: 1; flex-basis: 1px; } } &.oew-tabs-right .oew-tabs-wrap { order: 2; } .oew-tab-title { position: relative; padding: 20px 25px; font-weight: 600; line-height: 1; cursor: pointer; &.oew-active { background-color: #13aff0; color: #fff; } .oew-icon-align-left { margin-right: 3px; } .oew-icon-align-right { margin-left: 3px; } i, svg { width: 1em; height: 1em; vertical-align: bottom; } } .oew-tab-mobile-title { display: block; width: 100%; padding: 15px; border: 1px solid rgba(0,0,0,0.1); border-top-width: 0 !important; &:first-child { border-top-width: 0 !important; } } .oew-tabs-content-wrap { border-top: 1px solid rgba(0,0,0,0.1); .oew-tab-content { display: none; padding: 20px; border: 1px solid rgba(0,0,0,0.1); &.oew-active { display: block; } } p:last-child { margin-bottom: 0; } } } /* RTL */ body.rtl { .oew-tabs .oew-tab-title { .oew-icon-align-left { margin-left: 3px; margin-right: 0; } .oew-icon-align-right { margin-right: 3px; margin-left: 0; } } } /*------------------------------------------------------------------ Responsive -------------------------------------------------------------------*/ @media (min-width: 767px) { .oew-tabs .oew-tab-mobile-title { display: none; } } @media (max-width: 767px) { .oew-tabs { .oew-tabs-wrap { display: none; } .oew-tab-content { border-top: 0 !important; } } }
[+]
..
[-] style.min.css
[edit]
[-] style.css
[edit]
[-] style.scss
[edit]