cssOMS/tab.scss

@import "mixin", "color";

.tabular {
    @include box-sizing(border-box);

    .tab-links {
        @include box-sizing(border-box);
        padding: 5px 0 4px 0;
    }

    .tab-links label {
        @include box-shadow-out(#ffffff);
        @include border-top-radius(3px);
        border-top: 1px solid $content-border-color;
        border-left: 1px solid $content-border-color;
        border-right: 1px solid $content-border-color;
        @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
        padding: 5px 10px 5px 10px;
        text-shadow: 1px 1px 1px #ffffff;
        font-size: 0.9em;
        cursor: pointer;
    }

    .tab-links .active a, .tab-links label:hover {
        @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
    }

    .tab-links .active a {
        cursor: default;
    }

    .tab-links li {
        @include box-sizing(border-box);
        display: inline-block;
        margin: 0 5px 0 0;
    }

    .tab-content {
        @include border-bottomleft-radius(3px);
        @include border-bottomright-radius(3px);
        @include border-topright-radius(3px);
        @include box-sizing(border-box);
        background: $content-background-color;
        border: 1px solid $content-border-color;

        padding: 10px;

        > input {
            display: none;
        }

        input + div {
            display: none;
        }

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

.tabular-2 {
    .tab-links {
        padding: 5px 0 0 0;
    }

    .tab-links label {
        @include box-shadow-out(#ffffff);
        @include border-radius(3px);
        border: 1px solid $content-border-color;
        @include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
        padding: 5px 10px 5px 10px;
        text-shadow: 1px 1px 1px #ffffff;
        font-size: 0.9em;
        cursor: pointer;
    }

    .tab-links .active a, .tab-links label:hover {
        @include gradient-top-bottom(#ffffff, 0, $content-background-color, 100, #ffffff);
    }

    .tab-links .active a {
        cursor: default;
    }

    .tab-links li {
        @include box-sizing(border-box);
        display: inline-block;
        margin: 0 5px 15px 0;
    }

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

        input + div {
            display: none;
        }

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