@progress/kendo-ui/css/web/common/tabstrip.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2018 Telerik EAD
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// TabStrip

.k-tabstrip
{
    margin: 0;
    padding: 0;
    zoom: 1;
    position: relative;
}

.k-tabstrip-items
{
    padding: 0.3em 0.3em 0;
}

.k-tabstrip-scrollable .k-tabstrip-items
{
    white-space: nowrap;
    overflow: hidden;
}

.k-tabstrip > .k-button.k-bare
{
    position: absolute;
    top: .27em;
    z-index: 2;
    user-select: none;
}

.k-tabstrip-bottom > .k-button.k-bare
{
    top: auto;
    bottom: .15em;
}

.k-tabstrip-prev
{
    left: .4em;
}

.k-tabstrip-next
{
    right: .4em;
}

.k-tabstrip-items .k-item,
.k-panelbar .k-tabstrip-items .k-item
{
    list-style-type: none;
    display: inline-block;
    position: relative;
    border-style: solid;
    border-width: 1px 1px 0;
    padding: 0;
    vertical-align: top;
}

.k-tabstrip-items .k-item {
    overflow: hidden;
}

.k-tabstrip-items .k-tab-on-top,
.k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-items .k-state-active
{
    margin-bottom: -1px;
    padding-bottom: 1px;
}

.k-tabstrip-top > .k-tabstrip-items .k-item,
.k-panelbar .k-tabstrip-items .k-item {
    margin: 0 -1px 0 0;
}

.k-tabstrip-top > .k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-top > .k-tabstrip-items .k-state-active {
   border-bottom-width: 1px;
   margin-bottom: -1px;
   padding-bottom: 0px;
}

.k-tabstrip-items .k-tab-on-top
{
    z-index: 1;
}

.k-tabstrip-items .k-link,
.k-panelbar .k-tabstrip-items .k-link
{
    display: inline-block;
    border-bottom-width: 0;
    padding: .5em .92em;
}

.k-tabstrip-items .k-icon,
.k-panelbar .k-tabstrip-items .k-icon
{
    margin: -1px 4px 0 -3px;
    vertical-align: top;
}

.k-tabstrip-items .k-item .k-image,
.k-tabstrip-items .k-item .k-sprite,
.k-panelbar .k-tabstrip-items .k-item .k-image,
.k-panelbar .k-tabstrip-items .k-item .k-sprite
{
    margin: -3px 3px 0 -6px;
    vertical-align: middle;
}

// TabStrip Loading Progress
.k-tabstrip-items .k-loading
{
    top: 0;
    left: 0;
    height: 0;
    width: 20%;
    position: absolute;
    background: transparent;
    border-top: 1px solid transparent;
    border-color: inherit;
    .transition("width 200ms linear");
    .animation(k-tab-loader 1s ease-in-out infinite);
}

.k-tabstrip-items .k-progress
{
    .animation(none);
}

.k-tabstrip-items .k-loading.k-complete
{
    width: 100%;
    .animation(none);
}

.k-tabstrip > .k-content,
.k-panelbar .k-tabstrip > .k-content
{
    position: static;
    border-style: solid;
    border-width: 1px;
    margin: 0 .286em .3em;
    padding: .92em;
    zoom: 1;
}

.k-tabstrip > .k-content
{
    display: none;
    overflow: auto;
}

.k-tabstrip > .k-content.km-scroll-wrapper
{
    padding: 0;
}

.k-tabstrip > .k-content > .km-scroll-container
{
    padding: .3em .92em;
}

@keyframes k-tab-loader {
    0% { left: 0; }
    50% { left: 80%; }
    100% { left: 0; }
}

// left and right tabs

.k-tabstrip-left > div.k-content,
.k-tabstrip-right > div.k-content
{
    margin: .286em .3em;
}

.k-tabstrip-left > .k-tabstrip-items .k-item,
.k-tabstrip-right > .k-tabstrip-items .k-item
{
    display: block;
    margin-bottom: -1px;
}

.k-tabstrip-left > .k-tabstrip-items .k-link,
.k-tabstrip-right > .k-tabstrip-items .k-link
{
    display: block;
}

.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top,
.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top,
.k-tabstrip-left > .k-tabstrip-items .k-state-active,
.k-tabstrip-right > .k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active
{
    margin-bottom: -1px;
    padding-bottom: 0;
}

// left tabs

.k-tabstrip-left > .k-tabstrip-items
{
    float: left;
    padding: .25em 0 .3em .3em;
}

.k-tabstrip-left > .k-tabstrip-items .k-item
{
    border-width: 1px 0 1px 1px;
    border-radius: 3px 0 0 3px;
}

.k-tabstrip-left > .k-tabstrip-items .k-state-active
{
    border-width: 1px 0 1px 1px;
}

.k-tabstrip-left > .k-tabstrip-items .k-tab-on-top,
.k-tabstrip-left > .k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-left > .k-tabstrip-items .k-state-active
{
    margin-right: -1px;
    padding-right: 1px;
}

// right tabs

.k-tabstrip-right > .k-tabstrip-items
{
    float: right;
    padding: .25em .3em .3em 0;
}

.k-tabstrip-right > .k-tabstrip-items .k-item
{
    border-width: 1px 1px 1px 0;
    border-radius: 0 3px 3px 0;
}

.k-tabstrip-right > .k-tabstrip-items .k-state-active
{
    border-width: 1px 1px 1px 0;
}

.k-tabstrip-right > .k-tabstrip-items .k-tab-on-top,
.k-tabstrip-right > .k-tabstrip-items .k-state-active,
.k-panelbar .k-tabstrip-right > .k-tabstrip-items .k-state-active
{
    margin-left: -1px;
    padding-left: 1px;
}

// bottom tabs

.k-tabstrip-bottom > .k-tabstrip-items
{
    margin-top: -1px;
    padding: 0 .3em .3em;
}

.k-tabstrip-bottom > .k-content,
.k-panelbar .k-tabstrip-bottom > .k-content
{
    margin: .3em .286em 0;
    z-index: 1;
    position: relative;
}

.k-tabstrip-bottom > .k-tabstrip-items .k-item
{
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
}

.k-tabstrip-bottom > .k-tabstrip-items .k-state-active
{
    margin-bottom: 0;
    padding-bottom: 0;

}

.k-tabstrip-bottom > .k-content
{
    min-height: 100px;
}

.k-tabstrip-bottom > .k-tabstrip-items .k-loading
{
    top: auto;
    bottom: 0;
}