psychic-ui/src/nav-tab/nav-tab.styl

the working mans css framework

.nav-tab
    width: 100%
    height: 100%
    position: relative

    & li
        vertical-align: top

        &:first-child
            margin-left: 8px

        > div
            top: 33px
            bottom: 0
            left: 0
            width: 100%
            padding: 8px
            overflow: auto
            background: #fff
            box-sizing: border-box

    & ul, li
        margin: 0
        padding: 0
        list-style: none

        > input[type="radio"]
            opacity: 0

            & ~ div
                display: none

            & + label
                margin: 0 1px 0 0
                padding: 0 18px
                line-height: 30px
                text-align: center
                border-radius: 5px 5px 0 0
                cursor: pointer
                user-select: none

            &:checked:not(:disabled) ~ div
                display: block

            &:disabled + label
                opacity: .5
                cursor: no-drop

            &:checked + label
                position: relative
                border-bottom: $nav['border-width'] solid $nav['border-color']

            &:hover + label
                text-decoration: none
                border-bottom: $nav['border-width'] solid lighten($nav['border-color'], 75%)

        > li, input[type="radio"] + label
            display: inline-block

        > li > div, input[type="radio"]
            position: absolute