[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/05122024/htdocs/siakad/kepegawaian/less/inc/ [ Home ]
File: tabs.less
.tab-nav {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    margin: 0;
    overflow: auto;
    box-shadow: inset 0 -2px 0 0 #eee;
    width: 100%;
        
    li {
        display: inline-block;
        vertical-align: top;
        
        & > a {
            display: inline-block;
            color: #7a7a7a;
            text-transform: uppercase;
            position: relative;
            width: 100%;
            .transition(all);
            .transition-duration(250ms);
            font-weight: 500;
             
            &:after { 
                content: "";
                height: 2px;
                position: absolute;
                width: 100%; 
                left: 0;
                bottom: 0;
                .transition(all);
                .transition-duration(250ms);
                .scale(0);
            }
            
            @media (min-width: @screen-sm-min) {
                padding: 15px;
            }
            
            @media (max-width: @screen-sm-min) {
                padding: 15px 8px;
            }
        }
        
        &.active {
            & > a { 
                color: #000;
                
                &:after {
                    .scale(1);
                }
            } 
        }
    }
    
    &.tab-nav-right {
        text-align: right;
    }
    
    &.tn-justified {
        & > li {
            display: table-cell;
            width: 1%;
            text-align: center;
        }
    }
    
    &.tn-icon {
        & > li {
            .zmdi {
                font-size: 22px;
                line-height: 100%;
                min-height: 25px;   
            }
        }
    }
    
    &:not([data-tab-color]) {
        & > li > a:after {
            background: @m-blue;
        }
    }
    
    &[data-tab-color="green"] {
        & > li > a:after {
            background: @m-green;
        }
    } 
    
    &[data-tab-color="red"] {
        & > li > a:after {
            background: @m-red;
        }
    }
    
    &[data-tab-color="teal"] {
        & > li > a:after {
            background: @m-teal;
        }
    }
    
    &[data-tab-color="amber"] {
        & > li > a:after {
            background: @m-amber;
        }
    }
    
    &[data-tab-color="black"] {
        & > li > a:after {
            background: @m-black;
        }
    }
    
    &[data-tab-color="cyan"] {
        & > li > a:after {
            background: @m-cyan;
        }
    }
}

.tab-content {
    padding: 20px 0;
}