cssOMS/tab.scss

@import "_mixins", "_vars";

.tabview {
    .tab-links {
        padding: 0.3rem 0 0 0.3rem;

        label {
            text-shadow: 1px 1px 1px #fff;
            font-size: 0.9em;
            cursor: pointer;
        }

        .active a {
            cursor: default;
        }

        li {
            display: inline-block;
        }
    }

    .tab-content {
        > input {
            display: none;
        }

        input + div {
            display: none;
        }

        input:checked + div {
            display: inherit;
        }
    }
}

.tab-1 {
    .tab-links {
        margin: 0;
        border-bottom: 1px solid $content-border-color;

        label {
            padding: 5px 10px 1px 10px;
            background: none;
            overflow: auto;
        }

        .active, .active label {
            background: $content-box-background-color;
            border-bottom: 1px solid $content-box-background-color;
        }

        .active label {
            border-top: 1px solid $content-border-color;
            border-left: 1px solid $content-border-color;
            border-right: 1px solid $content-border-color;
        }

        li {
            margin: 0 5px 0 0;
        }
    }

    .tab-content {
        @include box-sizing(border-box);
        background: $content-box-background-color;
        border-left: 1px solid $content-border-color;
        border-right: 1px solid $content-border-color;
        border-bottom: 1px solid $content-border-color;

        padding: 10px;
    }

    &.left {
        display: flex;

        .tab-links {
            margin: 0;
            border: none;

            li {
                display: block;
                margin-bottom: 20px;
            }

            label {
                padding-bottom: 5px;
            }

            .active label {
                border-bottom: 1px solid $content-border-color;
            }
        }
        
        .tab-content {
            width: 100%;
            border-top: 1px solid $content-border-color;
        }
    }
}

.tab-2 {
    .tab-links {
        label {
            padding: 5px 10px 5px 10px;
        }
        
        li {
            margin: 0 5px 15px 0;
        }
        
        .active a, .active label {
            border: 1px solid $content-border-color;
            @include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff);
        }
    }
}