.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.5;
border: 1px solid transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-weight: 500;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
outline: none;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
border-bottom-color: transparent;
cursor: default;
}
.card-underline .card-head .nav-tabs {
border-bottom: none;
}
.nav-tabs.card-head {
padding: 0;
overflow: hidden;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
.tabs-center {
text-align: center;
}
.card-underline .card-head .tabs-center {
margin-top: -1px;
}
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
border: none;
}
.tabs-left,
.tabs-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tabs-left .nav-tabs,
.tabs-right .nav-tabs {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.tabs-left > .tab-content,
.tabs-right > .tab-content {
-webkit-box-flex: 1;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
overflow: auto;
}
.tabs-left > .nav-tabs,
.tabs-right > .nav-tabs {
padding-left: 0;
padding-right: 0;
}
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
float: none;
}
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
min-width: 74px;
margin-right: 0;
line-height: 1.5;
padding-top: 10px;
padding-bottom: 10px;
}
.tabs-left > .nav-tabs {
float: left;
border-right: 1px solid #e6e6e6;
overflow: hidden;
}
.tabs-left > .nav-tabs > li > a {
border-bottom: none;
border-right: 2px solid transparent;
}
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: transparent;
border-right-color: rgba(0, 0, 0, 0.1);
}
.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {
border-bottom: none;
}
.tabs-right > .nav-tabs {
float: right;
border-left: 1px solid #ddd;
border-radius: 0 10px 10px 0;
}
.tabs-right > .nav-tabs > li > a {
border-bottom: none;
border-left: 2px solid transparent;
}
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: transparent;
border-left-color: rgba(0, 0, 0, 0.1);
}
.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {
border-bottom: none;
}
.vertical-tabs-list {
background-color: #f3f3f3;
}
@media (min-width: 600px) {
.nav-tabs > li > a {
border-bottom: 2px solid transparent;
margin-right: 5px;
}
.nav-tabs {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.tabs-center li {
float: none;
display: inline-block;
}
.nav-tabs--xl {
font-size: 1.125em;
}
.nav-tabs--xl a {
padding: 1em 1.5em;
}
}
View source
- .nav-tabs > li {
- float: left;
- margin-bottom: -1px;
- }
-
- .nav-tabs > li > a {
- margin-right: 2px;
- line-height: 1.5;
- border: 1px solid transparent;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- font-weight: 500;
- position: relative;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-touch-callout: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
-
- .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
- outline: none;
- }
-
- .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
- border-bottom-color: transparent;
- cursor: default;
- }
-
- .card-underline .card-head .nav-tabs {
- border-bottom: none;
- }
-
- .nav-tabs.card-head {
- padding: 0;
- overflow: hidden;
- }
-
- .tab-content > .tab-pane {
- display: none;
- }
-
- .tab-content > .active {
- display: block;
- }
-
- .tabs-center {
- text-align: center;
- }
-
- .card-underline .card-head .tabs-center {
- margin-top: -1px;
- }
-
- .tabs-right > .nav-tabs,
- .tabs-left > .nav-tabs {
- border: none;
- }
-
- .tabs-left,
- .tabs-right {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- }
-
- .tabs-left .nav-tabs,
- .tabs-right .nav-tabs {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- }
-
- .tabs-left > .tab-content,
- .tabs-right > .tab-content {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 75%;
- flex: 1 1 75%;
- overflow: auto;
- }
-
- .tabs-left > .nav-tabs,
- .tabs-right > .nav-tabs {
- padding-left: 0;
- padding-right: 0;
- }
-
- .tabs-left > .nav-tabs > li,
- .tabs-right > .nav-tabs > li {
- float: none;
- }
-
- .tabs-left > .nav-tabs > li > a,
- .tabs-right > .nav-tabs > li > a {
- min-width: 74px;
- margin-right: 0;
- line-height: 1.5;
- padding-top: 10px;
- padding-bottom: 10px;
- }
-
- .tabs-left > .nav-tabs {
- float: left;
- border-right: 1px solid #e6e6e6;
- overflow: hidden;
- }
-
- .tabs-left > .nav-tabs > li > a {
- border-bottom: none;
- border-right: 2px solid transparent;
- }
-
- .tabs-left > .nav-tabs > li > a:hover,
- .tabs-left > .nav-tabs > li > a:focus {
- border-color: transparent;
- border-right-color: rgba(0, 0, 0, 0.1);
- }
-
- .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {
- border-bottom: none;
- }
-
- .tabs-right > .nav-tabs {
- float: right;
- border-left: 1px solid #ddd;
- border-radius: 0 10px 10px 0;
- }
-
- .tabs-right > .nav-tabs > li > a {
- border-bottom: none;
- border-left: 2px solid transparent;
- }
-
- .tabs-right > .nav-tabs > li > a:hover,
- .tabs-right > .nav-tabs > li > a:focus {
- border-color: transparent;
- border-left-color: rgba(0, 0, 0, 0.1);
- }
-
- .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {
- border-bottom: none;
- }
-
- .vertical-tabs-list {
- background-color: #f3f3f3;
- }
-
- @media (min-width: 600px) {
- .nav-tabs > li > a {
- border-bottom: 2px solid transparent;
- margin-right: 5px;
- }
- .nav-tabs {
- border-bottom-width: 1px;
- border-bottom-style: solid;
- }
- .tabs-center li {
- float: none;
- display: inline-block;
- }
- .nav-tabs--xl {
- font-size: 1.125em;
- }
- .nav-tabs--xl a {
- padding: 1em 1.5em;
- }
- }