Created
March 4, 2012 02:24
-
-
Save jrimmer/1970097 to your computer and use it in GitHub Desktop.
Make Bootstrap tabs look like a tab bar/tool bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Make tabs looks like a bar */ | |
.tab-bar { | |
width: 100%; | |
/* height: 36px; */ | |
background-color: #eeeeee; /* Old browsers */ | |
background-repeat: repeat-x; /* Repeat the gradient */ | |
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */ | |
background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */ | |
background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ | |
background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */ | |
border: 1px solid #e5e5e5; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
} | |
.tab-bar { | |
margin-bottom: 10px; | |
} | |
.tab-bar li > a { | |
margin: 0; | |
padding-top: 11px; | |
padding-bottom: 11px; | |
border-left: 1px solid #f5f5f5; | |
border-right: 1px solid #e5e5e5; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
} | |
.tab-bar .active > a, | |
.tab-bar .active > a:hover { | |
padding-left: 13px; | |
color: #777; | |
background-color: #e9e9e9; | |
border-right-color: #ddd; | |
border-left: 0; | |
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); | |
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); | |
box-shadow: inset 0 3px 5px rgba(0,0,0,.05); | |
} | |
.tab-bar .active > a .caret, | |
.tab-bar .active > a:hover .caret { | |
border-top-color: #777; | |
} | |
.tab-bar li:first-child > a, | |
.tab-bar li:first-child > a:hover { | |
border-left: 0; | |
padding-left: 12px; | |
-webkit-border-radius: 4px 0 0 4px; | |
-moz-border-radius: 4px 0 0 4px; | |
border-radius: 4px 0 0 4px; | |
} | |
.tab-bar li:last-child > a { | |
border-right: 0; | |
} | |
.tab-bar .dropdown-menu { | |
-webkit-border-radius: 0 0 4px 4px; | |
-moz-border-radius: 0 0 4px 4px; | |
border-radius: 0 0 4px 4px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="row"> | |
<div class="span12"> | |
<div class="tabbable"> | |
<ul class="nav nav-pills tab-bar"> | |
<li class="active"><a href="#1" data-toggle="tab">Dashboard</a></li> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment