?? GreyFile — Mystic File Browser

Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/shortcodes/


?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules

?? Viewing: _tabs.scss

/* ==========================================================================
# Tabs style - begin
========================================================================== */
.edgtf-tabs{
    
    .edgtf-tabs-nav {
        display: block;
        position: relative;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        vertical-align: middle;

        li a{
            display: block;
            text-align: center;
            padding: 10px 16px;
            box-sizing: border-box;
            color: $second-main-color;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
			letter-spacing: 2px;
            @include edgtfTransition(color 0.15s ease-out, background-color 0.15s ease-out);

			.edgtf-icon-frame{
				font-size: 17px;
			}
        }
        li.ui-state-active a,
        li.ui-state-hover a{

			background-color: $second-main-color;
			color: #fff;

            .edgtf-icon-frame{
                color: $first-main-color;
            }
        }
        .edgtf-tab-container{
            box-sizing: border-box;            
            position:relative;
        }
    }
}
/* Horizontal tabs styles
   ========================================================================== */
.edgtf-tabs.edgtf-horizontal{
    .edgtf-tabs-nav{
        border-bottom: 2px solid $default-border-color;

    }

    .edgtf-tabs-nav li {
        float: left;

        &:first-child{
            margin: 0;
        }
        a{
            border-bottom: none;
			margin: 0 0 -2px;
        }
    }

    .edgtf-tab-container{
        padding: 20px 10px;
    }
    
}

/* Vertical tabs styles
   ========================================================================== */
.edgtf-tabs.edgtf-vertical{
    
    .edgtf-tabs-nav {
        float: left;
        width: 25%;
        border-right: 2px solid $default-border-color;
        box-sizing: border-box;
        li{
            margin: 0 0 0px 0;
            display: block;
            width: 100%;
        }
        &:last-child{
            margin: 0;
        }
        li a{
            border-right: none;
			margin: 0 -2px 0 0px;
        }
    }
    .edgtf-tab-container {
        float: left;
        padding: 10px 30px;
        width: 75%;
        box-sizing: border-box;
    }
    
}

/* Tabs with icon and text styles start
   ========================================================================== */


.edgtf-tabs.edgtf-tab-text-icon .edgtf-tabs-nav li a{
    
    .edgtf-tab-text-after-icon{
        padding-left: 10px;
        @include edgtfTransition(initial);
    }
}

/* Tabs with icon styles - start
   ========================================================================== */

.edgtf-tabs.edgtf-tab-icon .edgtf-tabs-nav li a{
    i,
    span{
        @include edgtfTransition(initial);
    }

    .edgtf-icon-frame {
        display: inline-block;
        min-width: 20px;
    }
    
}

/* Tabs predefined white - start
   ========================================================================== */
.edgtf-tabs{
	&.edgtf-predefined-style-white{
		.edgtf-tabs-nav  li a{
			color: #fff !important;
		}
		.edgtf-tabs-nav li.ui-state-active a,
		.edgtf-tabs-nav li.ui-state-hover a{
			border-color: #fff !important;
		}
		&.edgtf-vertical .edgtf-tabs-nav,
		&.edgtf-horizontal .edgtf-tabs-nav
		{
			border-color: #fff !important;
		}

	}
}
/* ==========================================================================
# Tabs style - end
========================================================================== */

??

??