mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
tweaks abound, updated prettify styles, new sidenav component started, sprite icons started
This commit is contained in:
Mark Otto
parent
553030ca7d
commit
fb9401b355
12 changed files with 809 additions and 33 deletions
330
bootstrap.css
vendored
330
bootstrap.css
vendored
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Dec 30 16:01:05 PST 2011
|
||||
* Date: Thu Jan 5 01:33:17 PST 2012
|
||||
*/
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
|
@ -401,7 +401,7 @@ h6 {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
ul, ol {
|
||||
margin: 0 0 9px 25px;
|
||||
margin: 13px 0 14px 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
|
|
@ -1025,6 +1025,9 @@ td {
|
|||
.bordered-table td + th {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.bordered-table thead:first-child tr:first-child th, .bordered-table tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
.bordered-table thead:first-child tr:first-child th:first-child, .bordered-table tbody:first-child tr:first-child td:first-child {
|
||||
-webkit-border-radius: 4px 0 0 0;
|
||||
-moz-border-radius: 4px 0 0 0;
|
||||
|
|
@ -1820,6 +1823,285 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
.label.notice {
|
||||
background-color: #62cffc;
|
||||
}
|
||||
i {
|
||||
background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.glass {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.music {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
.search {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
.envelope {
|
||||
background-position: -72px 0;
|
||||
}
|
||||
.heart {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
.star {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
.star-empty {
|
||||
background-position: -144px 0;
|
||||
}
|
||||
.user {
|
||||
background-position: -168px 0;
|
||||
}
|
||||
.film {
|
||||
background-position: -192px 0;
|
||||
}
|
||||
.th-large {
|
||||
background-position: -216px 0;
|
||||
}
|
||||
.th {
|
||||
background-position: -240px 0;
|
||||
}
|
||||
.th-lines {
|
||||
background-position: -264px 0;
|
||||
}
|
||||
.ok {
|
||||
background-position: -288px 0;
|
||||
}
|
||||
.remove {
|
||||
background-position: -312px 0;
|
||||
}
|
||||
.zoom-in {
|
||||
background-position: -336px 0;
|
||||
}
|
||||
.zoom-out {
|
||||
background-position: -360px 0;
|
||||
}
|
||||
.off {
|
||||
background-position: -384px 0;
|
||||
}
|
||||
.signal {
|
||||
background-position: -408px 0;
|
||||
}
|
||||
.cog {
|
||||
background-position: -432px 0;
|
||||
}
|
||||
.trash {
|
||||
background-position: -456px 0;
|
||||
}
|
||||
.home {
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
.file {
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
.time {
|
||||
background-position: -48px -24px;
|
||||
}
|
||||
.road {
|
||||
background-position: -72px -24px;
|
||||
}
|
||||
.download-alt {
|
||||
background-position: -96px -24px;
|
||||
}
|
||||
.download {
|
||||
background-position: -120px -24px;
|
||||
}
|
||||
.upload {
|
||||
background-position: -144px -24px;
|
||||
}
|
||||
.inbox {
|
||||
background-position: -168px -24px;
|
||||
}
|
||||
.play-circle {
|
||||
background-position: -192px -24px;
|
||||
}
|
||||
.repeat {
|
||||
background-position: -216px -24px;
|
||||
}
|
||||
.refresh {
|
||||
background-position: -240px -24px;
|
||||
}
|
||||
.calendar {
|
||||
background-position: -264px -24px;
|
||||
}
|
||||
.lock {
|
||||
background-position: -288px -24px;
|
||||
}
|
||||
.flag {
|
||||
background-position: -312px -24px;
|
||||
}
|
||||
.headphones {
|
||||
background-position: -336px -24px;
|
||||
}
|
||||
.volume-off {
|
||||
background-position: -360px -24px;
|
||||
}
|
||||
.volume-down {
|
||||
background-position: -384px -24px;
|
||||
}
|
||||
.volume-up {
|
||||
background-position: -408px -24px;
|
||||
}
|
||||
.qrcode {
|
||||
background-position: -432px -24px;
|
||||
}
|
||||
.barcode {
|
||||
background-position: -456px -24px;
|
||||
}
|
||||
.tag {
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
.tags {
|
||||
background-position: -24px -48px;
|
||||
}
|
||||
.book {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
.bookmark {
|
||||
background-position: -72px -48px;
|
||||
}
|
||||
.print {
|
||||
background-position: -96px -48px;
|
||||
}
|
||||
.camera {
|
||||
background-position: -120px -48px;
|
||||
}
|
||||
.font {
|
||||
background-position: -144px -48px;
|
||||
}
|
||||
.bold {
|
||||
background-position: -168px -48px;
|
||||
}
|
||||
.italic {
|
||||
background-position: -192px -48px;
|
||||
}
|
||||
.text-height {
|
||||
background-position: -216px -48px;
|
||||
}
|
||||
.text-width {
|
||||
background-position: -240px -48px;
|
||||
}
|
||||
.align-left {
|
||||
background-position: -264px -48px;
|
||||
}
|
||||
.align-center {
|
||||
background-position: -288px -48px;
|
||||
}
|
||||
.align-right {
|
||||
background-position: -312px -48px;
|
||||
}
|
||||
.align-justify {
|
||||
background-position: -336px -48px;
|
||||
}
|
||||
.list {
|
||||
background-position: -360px -48px;
|
||||
}
|
||||
.indent-left {
|
||||
background-position: -384px -48px;
|
||||
}
|
||||
.indent-right {
|
||||
background-position: -408px -48px;
|
||||
}
|
||||
.facetime-video {
|
||||
background-position: -432px -48px;
|
||||
}
|
||||
.picture {
|
||||
background-position: -456px -48px;
|
||||
}
|
||||
.pencil {
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
.map-marker {
|
||||
background-position: -24px -72px;
|
||||
}
|
||||
.adjust {
|
||||
background-position: -48px -72px;
|
||||
}
|
||||
.tint {
|
||||
background-position: -72px -72px;
|
||||
}
|
||||
.edit {
|
||||
background-position: -96px -72px;
|
||||
}
|
||||
.share {
|
||||
background-position: -120px -72px;
|
||||
}
|
||||
.check {
|
||||
background-position: -144px -72px;
|
||||
}
|
||||
.move {
|
||||
background-position: -168px -72px;
|
||||
}
|
||||
.step-backward {
|
||||
background-position: -192px -72px;
|
||||
}
|
||||
.fast-backward {
|
||||
background-position: -216px -72px;
|
||||
}
|
||||
.backward {
|
||||
background-position: -240px -72px;
|
||||
}
|
||||
.play {
|
||||
background-position: -264px -72px;
|
||||
}
|
||||
.pause {
|
||||
background-position: -288px -72px;
|
||||
}
|
||||
.stop {
|
||||
background-position: -312px -72px;
|
||||
}
|
||||
.forward {
|
||||
background-position: -336px -72px;
|
||||
}
|
||||
.fast-forward {
|
||||
background-position: -360px -72px;
|
||||
}
|
||||
.step-forward {
|
||||
background-position: -384px -72px;
|
||||
}
|
||||
.eject {
|
||||
background-position: -408px -72px;
|
||||
}
|
||||
.chevron-left {
|
||||
background-position: -432px -72px;
|
||||
}
|
||||
.chevron-right {
|
||||
background-position: -456px -72px;
|
||||
}
|
||||
.arrow-left {
|
||||
background-position: -240px -96px;
|
||||
}
|
||||
.arrow-right {
|
||||
background-position: -264px -96px;
|
||||
}
|
||||
.arrow-up {
|
||||
background-position: -288px -96px;
|
||||
}
|
||||
.arrow-down {
|
||||
background-position: -312px -96px;
|
||||
}
|
||||
.share {
|
||||
background-position: -336px -96px;
|
||||
}
|
||||
.resize-full {
|
||||
background-position: -360px -96px;
|
||||
}
|
||||
.resize-small {
|
||||
background-position: -384px -96px;
|
||||
}
|
||||
.plus {
|
||||
background-position: -408px -96px;
|
||||
}
|
||||
.minus {
|
||||
background-position: -432px -96px;
|
||||
}
|
||||
.asterisk {
|
||||
background-position: -456px -96px;
|
||||
}
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -2538,6 +2820,50 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
|
|||
.popover .content p, .popover .content ul, .popover .content ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.side-nav {
|
||||
padding: 9px 0;
|
||||
}
|
||||
.side-nav .nav-label, .side-nav .nav-item {
|
||||
display: block;
|
||||
padding: 3px 16px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.side-nav .nav-label {
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: #404040;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.side-nav .nav-group {
|
||||
margin: 0 -1px;
|
||||
list-style: none;
|
||||
}
|
||||
.side-nav .nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
.side-nav .nav-item i {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
.side-nav .nav-item:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.side-nav .active .nav-item {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
|
||||
background-color: #aaaaaa;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));
|
||||
background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: -ms-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));
|
||||
background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: -o-linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-image: linear-gradient(top, #cccccc, #aaaaaa);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.thumbnails {
|
||||
margin-left: -20px;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
102
bootstrap.min.css
vendored
102
bootstrap.min.css
vendored
|
|
@ -69,7 +69,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
|
|||
h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
|
||||
h5{font-size:14px;line-height:18px;}
|
||||
h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
|
||||
ul,ol{margin:0 0 9px 25px;}
|
||||
ul,ol{margin:13px 0 14px 25px;}
|
||||
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
|
||||
ul{list-style:disc;}
|
||||
ol{list-style:decimal;}
|
||||
|
|
@ -167,6 +167,7 @@ th{font-weight:bold;vertical-align:bottom;}
|
|||
td{vertical-align:top;}
|
||||
.condensed-table th,.condensed-table td{padding:4px 5px;}
|
||||
.bordered-table{border:1px solid #ddd;border-collapse:separate;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.bordered-table th+th,.bordered-table td+td,.bordered-table th+td,.bordered-table td+th{border-left:1px solid #ddd;}
|
||||
.bordered-table thead:first-child tr:first-child th,.bordered-table tbody:first-child tr:first-child td{border-top:0;}
|
||||
.bordered-table thead:first-child tr:first-child th:first-child,.bordered-table tbody:first-child tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0 0;border-radius:4px 0 0 0;}
|
||||
.bordered-table thead:first-child tr:first-child th:last-child,.bordered-table tbody:first-child tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
|
||||
.bordered-table thead:last-child tr:last-child th:first-child,.bordered-table tbody:last-child tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
|
||||
|
|
@ -246,6 +247,97 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.label.warning{background-color:#f89406;}
|
||||
.label.success{background-color:#46a546;}
|
||||
.label.notice{background-color:#62cffc;}
|
||||
i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);background-position:0 0;background-repeat:no-repeat;display:inline-block;vertical-align:text-top;width:14px;height:14px;}
|
||||
.glass{background-position:0 0;}
|
||||
.music{background-position:-24px 0;}
|
||||
.search{background-position:-48px 0;}
|
||||
.envelope{background-position:-72px 0;}
|
||||
.heart{background-position:-96px 0;}
|
||||
.star{background-position:-120px 0;}
|
||||
.star-empty{background-position:-144px 0;}
|
||||
.user{background-position:-168px 0;}
|
||||
.film{background-position:-192px 0;}
|
||||
.th-large{background-position:-216px 0;}
|
||||
.th{background-position:-240px 0;}
|
||||
.th-lines{background-position:-264px 0;}
|
||||
.ok{background-position:-288px 0;}
|
||||
.remove{background-position:-312px 0;}
|
||||
.zoom-in{background-position:-336px 0;}
|
||||
.zoom-out{background-position:-360px 0;}
|
||||
.off{background-position:-384px 0;}
|
||||
.signal{background-position:-408px 0;}
|
||||
.cog{background-position:-432px 0;}
|
||||
.trash{background-position:-456px 0;}
|
||||
.home{background-position:0 -24px;}
|
||||
.file{background-position:-24px -24px;}
|
||||
.time{background-position:-48px -24px;}
|
||||
.road{background-position:-72px -24px;}
|
||||
.download-alt{background-position:-96px -24px;}
|
||||
.download{background-position:-120px -24px;}
|
||||
.upload{background-position:-144px -24px;}
|
||||
.inbox{background-position:-168px -24px;}
|
||||
.play-circle{background-position:-192px -24px;}
|
||||
.repeat{background-position:-216px -24px;}
|
||||
.refresh{background-position:-240px -24px;}
|
||||
.calendar{background-position:-264px -24px;}
|
||||
.lock{background-position:-288px -24px;}
|
||||
.flag{background-position:-312px -24px;}
|
||||
.headphones{background-position:-336px -24px;}
|
||||
.volume-off{background-position:-360px -24px;}
|
||||
.volume-down{background-position:-384px -24px;}
|
||||
.volume-up{background-position:-408px -24px;}
|
||||
.qrcode{background-position:-432px -24px;}
|
||||
.barcode{background-position:-456px -24px;}
|
||||
.tag{background-position:0 -48px;}
|
||||
.tags{background-position:-24px -48px;}
|
||||
.book{background-position:-48px -48px;}
|
||||
.bookmark{background-position:-72px -48px;}
|
||||
.print{background-position:-96px -48px;}
|
||||
.camera{background-position:-120px -48px;}
|
||||
.font{background-position:-144px -48px;}
|
||||
.bold{background-position:-168px -48px;}
|
||||
.italic{background-position:-192px -48px;}
|
||||
.text-height{background-position:-216px -48px;}
|
||||
.text-width{background-position:-240px -48px;}
|
||||
.align-left{background-position:-264px -48px;}
|
||||
.align-center{background-position:-288px -48px;}
|
||||
.align-right{background-position:-312px -48px;}
|
||||
.align-justify{background-position:-336px -48px;}
|
||||
.list{background-position:-360px -48px;}
|
||||
.indent-left{background-position:-384px -48px;}
|
||||
.indent-right{background-position:-408px -48px;}
|
||||
.facetime-video{background-position:-432px -48px;}
|
||||
.picture{background-position:-456px -48px;}
|
||||
.pencil{background-position:0 -72px;}
|
||||
.map-marker{background-position:-24px -72px;}
|
||||
.adjust{background-position:-48px -72px;}
|
||||
.tint{background-position:-72px -72px;}
|
||||
.edit{background-position:-96px -72px;}
|
||||
.share{background-position:-120px -72px;}
|
||||
.check{background-position:-144px -72px;}
|
||||
.move{background-position:-168px -72px;}
|
||||
.step-backward{background-position:-192px -72px;}
|
||||
.fast-backward{background-position:-216px -72px;}
|
||||
.backward{background-position:-240px -72px;}
|
||||
.play{background-position:-264px -72px;}
|
||||
.pause{background-position:-288px -72px;}
|
||||
.stop{background-position:-312px -72px;}
|
||||
.forward{background-position:-336px -72px;}
|
||||
.fast-forward{background-position:-360px -72px;}
|
||||
.step-forward{background-position:-384px -72px;}
|
||||
.eject{background-position:-408px -72px;}
|
||||
.chevron-left{background-position:-432px -72px;}
|
||||
.chevron-right{background-position:-456px -72px;}
|
||||
.arrow-left{background-position:-240px -96px;}
|
||||
.arrow-right{background-position:-264px -96px;}
|
||||
.arrow-up{background-position:-288px -96px;}
|
||||
.arrow-down{background-position:-312px -96px;}
|
||||
.share{background-position:-336px -96px;}
|
||||
.resize-full{background-position:-360px -96px;}
|
||||
.resize-small{background-position:-384px -96px;}
|
||||
.plus{background-position:-408px -96px;}
|
||||
.minus{background-position:-432px -96px;}
|
||||
.asterisk{background-position:-456px -96px;}
|
||||
.dropdown{position:relative;}
|
||||
.dropdown-toggle:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;content:"↓";}
|
||||
.dropdown:hover .dropdown-toggle:after{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
|
||||
|
|
@ -335,6 +427,14 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
|
|||
.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
|
||||
.popover .title{padding:9px 15px;line-height:1;background-color:#f5f5f5;border-bottom:1px solid #eee;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
|
||||
.popover .content{padding:14px;background-color:#ffffff;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
|
||||
.side-nav{padding:9px 0;}
|
||||
.side-nav .nav-label,.side-nav .nav-item{display:block;padding:3px 16px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}
|
||||
.side-nav .nav-label{font-size:11px;line-height:18px;color:#404040;text-transform:uppercase;}
|
||||
.side-nav .nav-group{margin:0 -1px;list-style:none;}
|
||||
.side-nav .nav-item{font-weight:bold;}
|
||||
.side-nav .nav-item i{vertical-align:-2px;}
|
||||
.side-nav .nav-item:hover{text-decoration:none;}
|
||||
.side-nav .active .nav-item{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);background-color:#aaaaaa;background-image:-khtml-gradient(linear, left top, left bottom, from(#cccccc), to(#aaaaaa));background-image:-moz-linear-gradient(top, #cccccc, #aaaaaa);background-image:-ms-linear-gradient(top, #cccccc, #aaaaaa);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #cccccc), color-stop(100%, #aaaaaa));background-image:-webkit-linear-gradient(top, #cccccc, #aaaaaa);background-image:-o-linear-gradient(top, #cccccc, #aaaaaa);background-image:linear-gradient(top, #cccccc, #aaaaaa);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=0);-webkit-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.05),inset 0 -1px 0 rgba(0, 0, 0, 0.05);}
|
||||
.thumbnails{margin-left:-20px;margin-bottom:0;list-style:none;zoom:1;}.thumbnails:before,.thumbnails:after{display:table;*display:inline;content:"";zoom:1;}
|
||||
.thumbnails:after{clear:both;}
|
||||
.thumbnails>li{float:left;margin:0 0 20px 20px;}
|
||||
|
|
|
|||
|
|
@ -330,6 +330,24 @@ h2 + table {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* Icons
|
||||
------------------------- */
|
||||
.the-icons {
|
||||
|
||||
}
|
||||
.the-icons i {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
background-color: rgba(255,0,0,.25);
|
||||
}
|
||||
.the-icons i:after {
|
||||
display: block;
|
||||
content: attr(class);
|
||||
font-style: normal;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Docs
|
||||
-------------------------------------------------- */
|
||||
|
|
|
|||
BIN
docs/assets/img/glyphicons-halflings-sprite.png
Normal file
BIN
docs/assets/img/glyphicons-halflings-sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
|
|
@ -2,40 +2,23 @@
|
|||
.lit { color: #195f91; }
|
||||
.pun, .opn, .clo { color: #93a1a1; }
|
||||
.fun { color: #dc322f; }
|
||||
.str, .atv { color: #268bd2; }
|
||||
.kwd, .tag { color: #195f91; }
|
||||
.typ, .atn, .dec, .var { color: #CB4B16; }
|
||||
.str, .atv { color: #62C462; }
|
||||
.kwd, .linenums .tag { color: #049CD9; }
|
||||
.typ, .atn, .dec, .var { color: #EE5F5B; }
|
||||
.pln { color: #93a1a1; }
|
||||
pre.prettyprint {
|
||||
background: #fefbf3;
|
||||
background-color: #fefbf3;
|
||||
padding: 9px;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.1);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
color: #ccc;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
/* Specify class=linenums on a pre to get line numbering */
|
||||
ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */
|
||||
ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; }
|
||||
ol.linenums li { color: #444; line-height: 18px; }
|
||||
/* Alternate shading for lines */
|
||||
li.L1, li.L3, li.L5, li.L7, li.L9 { }
|
||||
|
||||
/*
|
||||
$base03: #002b36;
|
||||
$base02: #073642;
|
||||
$base01: #586e75;
|
||||
$base00: #657b83;
|
||||
$base0: #839496;
|
||||
$base1: #93a1a1;
|
||||
$base2: #eee8d5;
|
||||
$base3: #fdf6e3;
|
||||
$yellow: #b58900;
|
||||
$orange: #cb4b16;
|
||||
$red: #dc322f;
|
||||
$magenta: #d33682;
|
||||
$violet: #6c71c4;
|
||||
$blue: #268bd2;
|
||||
$cyan: #2aa198;
|
||||
$green: #859900;
|
||||
*/
|
||||
li.L1, li.L3, li.L5, li.L7, li.L9 { }
|
||||
|
|
@ -1175,6 +1175,158 @@ Form states
|
|||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Icons
|
||||
================================================== -->
|
||||
<section id="icons">
|
||||
<div class="page-header">
|
||||
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span2">
|
||||
<div class="the-icons">
|
||||
<i class="glass"></i>
|
||||
<i class="music"></i>
|
||||
<i class="search"></i>
|
||||
<i class="envelope"></i>
|
||||
<i class="heart"></i>
|
||||
<i class="star"></i>
|
||||
<i class="star-empty"></i>
|
||||
<i class="user"></i>
|
||||
<i class="film"></i>
|
||||
<i class="th-large"></i>
|
||||
<i class="th"></i>
|
||||
<i class="th-list"></i>
|
||||
<i class="ok"></i>
|
||||
<i class="remove"></i>
|
||||
<i class="zoom-in"></i>
|
||||
<i class="zoom-out"></i>
|
||||
<i class="off"></i>
|
||||
<i class="signal"></i>
|
||||
<i class="cog"></i>
|
||||
<i class="trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<div class="the-icons">
|
||||
<i class="home"></i>
|
||||
<i class="file"></i>
|
||||
<i class="time"></i>
|
||||
<i class="road"></i>
|
||||
<i class="download-alt"></i>
|
||||
<i class="download"></i>
|
||||
<i class="upload"></i>
|
||||
<i class="inbox"></i>
|
||||
<i class="play-circle"></i>
|
||||
<i class="repeat"></i>
|
||||
<i class="refresh"></i>
|
||||
<i class="calendar"></i>
|
||||
<i class="lock"></i>
|
||||
<i class="flag"></i>
|
||||
<i class="headphones"></i>
|
||||
<i class="volume-off"></i>
|
||||
<i class="volume-down"></i>
|
||||
<i class="volume-up"></i>
|
||||
<i class="qrcode"></i>
|
||||
<i class="barcode"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<div class="the-icons">
|
||||
<i class="tag"></i>
|
||||
<i class="tags"></i>
|
||||
<i class="book"></i>
|
||||
<i class="bookmark"></i>
|
||||
<i class="print"></i>
|
||||
<i class="camera"></i>
|
||||
<i class="font"></i>
|
||||
<i class="bold"></i>
|
||||
<i class="italic"></i>
|
||||
<i class="text-height"></i>
|
||||
<i class="text-width"></i>
|
||||
<i class="align-left"></i>
|
||||
<i class="align-center"></i>
|
||||
<i class="align-right"></i>
|
||||
<i class="align-justify"></i>
|
||||
<i class="list"></i>
|
||||
<i class="indent-left"></i>
|
||||
<i class="indent-right"></i>
|
||||
<i class="facetime-video"></i>
|
||||
<i class="picture"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<div class="the-icons">
|
||||
<i class="pencil"></i>
|
||||
<i class="map-marker"></i>
|
||||
<i class="adjust"></i>
|
||||
<i class="tint"></i>
|
||||
<i class="edit"></i>
|
||||
<i class="share"></i>
|
||||
<i class="check"></i>
|
||||
<i class="move"></i>
|
||||
<i class="step-backward"></i>
|
||||
<i class="fast-backward"></i>
|
||||
<i class="backward"></i>
|
||||
<i class="play"></i>
|
||||
<i class="pause"></i>
|
||||
<i class="stop"></i>
|
||||
<i class="forward"></i>
|
||||
<i class="fast-forward"></i>
|
||||
<i class="step-foward"></i>
|
||||
<i class="eject"></i>
|
||||
<i class="chevron-left"></i>
|
||||
<i class="chevron-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<div class="the-icons">
|
||||
<i class="arrow-left"></i>
|
||||
<i class="arrow-right"></i>
|
||||
<i class="arrow-up"></i>
|
||||
<i class="arrow-down"></i>
|
||||
<i class="share"></i>
|
||||
<i class="resize-full"></i>
|
||||
<i class="resize-small"></i>
|
||||
<i class="plus"></i>
|
||||
<i class="minus"></i>
|
||||
<i class="asterisk"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Built as a sprite</h3>
|
||||
<p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p>
|
||||
<p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit. Please consider doing the same in your projects.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>How to use</h3>
|
||||
<p>With v2.0.0, the <code><i></code> tag is essentially dedicated to iconography. To use the icons, you can place the follow code wherever you like one to appear:</p>
|
||||
<pre class="prettyprint">
|
||||
<i class="chevron-left"></i>
|
||||
</pre>
|
||||
<p>There are over 100 classes to choose from for your icons. Just add an <code><i></code> tag with the right class and you're set. You can find the full list in sprites.less or right here in this document.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Use cases</h3>
|
||||
<p>Icons are great, but where would one use them? Here are a few ideas:</p>
|
||||
<ul>
|
||||
<li>As visuals for your sidebar navigation</li>
|
||||
<li>For a purely icon-driven nav</li>
|
||||
<li>For buttons to help convey the meaning of an action</li>
|
||||
<li>With links to share context on a user's destination</li>
|
||||
</ul>
|
||||
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
|
|
|
|||
|
|
@ -223,6 +223,38 @@
|
|||
|
||||
|
||||
|
||||
<!-- Side nav
|
||||
================================================== -->
|
||||
<section id="sidenav">
|
||||
<div class="page-header">
|
||||
<h1>Side nav <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="well side-nav">
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#">Home</a></li>
|
||||
<li><a class="nav-item" href="#">Library</a></li>
|
||||
<li><a class="nav-item" href="#">Profile</a></li>
|
||||
<li><a class="nav-item" href="#">Settings</a></li>
|
||||
<li><a class="nav-item" href="#">Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="well side-nav">
|
||||
<h6 class="nav-label">Your account</h6>
|
||||
<ul class="nav-group">
|
||||
<li class="active"><a class="nav-item" href="#"><i class="home"></i> Home</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="book"></i> Library</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="user"></i> Profile</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="cog"></i> Settings</a></li>
|
||||
<li><a class="nav-item" href="#"><i class="time"></i> Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Navbar
|
||||
================================================== -->
|
||||
<section id="navbar">
|
||||
|
|
|
|||
2
lib/bootstrap.less
vendored
2
lib/bootstrap.less
vendored
|
|
@ -27,6 +27,7 @@
|
|||
// Temp catchall for what's missing thus far
|
||||
@import "patterns.less";
|
||||
|
||||
@import "sprites.less";
|
||||
@import "dropdowns.less";
|
||||
@import "tabs-pills.less";
|
||||
@import "breadcrumbs.less";
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
@import "modals.less";
|
||||
@import "twipsy.less";
|
||||
@import "popovers.less";
|
||||
@import "sidenav.less";
|
||||
@import "thumbnails.less";
|
||||
|
||||
// Responsive
|
||||
|
|
|
|||
40
lib/sidenav.less
Normal file
40
lib/sidenav.less
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// SIDE NAV
|
||||
// --------
|
||||
|
||||
|
||||
.side-nav {
|
||||
padding: @baseLineHeight / 2 0;
|
||||
}
|
||||
.side-nav .nav-label,
|
||||
.side-nav .nav-item {
|
||||
display: block;
|
||||
padding: 3px 16px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.side-nav .nav-label {
|
||||
font-size: 11px;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayDark;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.side-nav .nav-group {
|
||||
margin: 0 -1px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.side-nav .nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
.side-nav .nav-item i {
|
||||
vertical-align: -2px;
|
||||
}
|
||||
.side-nav .nav-item:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.side-nav .active .nav-item {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
#gradient > .vertical(#ccc, #aaa);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
118
lib/sprites.less
Normal file
118
lib/sprites.less
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
// SPRITES
|
||||
// Glyphs and icons for buttons, nav, and more
|
||||
// -------------------------------------------
|
||||
|
||||
|
||||
// ICONS
|
||||
// -----
|
||||
|
||||
// As of v2.0.0, the <i> tag is reserved for icons from the Glyphicons set.
|
||||
// All icons receive the styles of the <i> tag and are then given a unique
|
||||
// class to add width, height, and background-position. Your resulting HTML
|
||||
// will look like <i class="inbox"></i>.
|
||||
|
||||
i {
|
||||
background-image: url(docs/assets/img/glyphicons-halflings-sprite.png);
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.glass { background-position: 0 0; }
|
||||
.music { background-position: -24px 0; }
|
||||
.search { background-position: -48px 0; }
|
||||
.envelope { background-position: -72px 0; }
|
||||
.heart { background-position: -96px 0; }
|
||||
.star { background-position: -120px 0; }
|
||||
.star-empty { background-position: -144px 0; }
|
||||
.user { background-position: -168px 0; }
|
||||
.film { background-position: -192px 0; }
|
||||
.th-large { background-position: -216px 0; }
|
||||
.th { background-position: -240px 0; }
|
||||
.th-lines { background-position: -264px 0; }
|
||||
.ok { background-position: -288px 0; }
|
||||
.remove { background-position: -312px 0; }
|
||||
.zoom-in { background-position: -336px 0; }
|
||||
.zoom-out { background-position: -360px 0; }
|
||||
.off { background-position: -384px 0; }
|
||||
.signal { background-position: -408px 0; }
|
||||
.cog { background-position: -432px 0; }
|
||||
.trash { background-position: -456px 0; }
|
||||
|
||||
.home { background-position: 0 -24px; }
|
||||
.file { background-position: -24px -24px; }
|
||||
.time { background-position: -48px -24px; }
|
||||
.road { background-position: -72px -24px; }
|
||||
.download-alt { background-position: -96px -24px; }
|
||||
.download { background-position: -120px -24px; }
|
||||
.upload { background-position: -144px -24px; }
|
||||
.inbox { background-position: -168px -24px; }
|
||||
.play-circle { background-position: -192px -24px; }
|
||||
.repeat { background-position: -216px -24px; }
|
||||
.refresh { background-position: -240px -24px; }
|
||||
.calendar { background-position: -264px -24px; }
|
||||
.lock { background-position: -288px -24px; }
|
||||
.flag { background-position: -312px -24px; }
|
||||
.headphones { background-position: -336px -24px; }
|
||||
.volume-off { background-position: -360px -24px; }
|
||||
.volume-down { background-position: -384px -24px; }
|
||||
.volume-up { background-position: -408px -24px; }
|
||||
.qrcode { background-position: -432px -24px; }
|
||||
.barcode { background-position: -456px -24px; }
|
||||
|
||||
.tag { background-position: 0 -48px; }
|
||||
.tags { background-position: -24px -48px; }
|
||||
.book { background-position: -48px -48px; }
|
||||
.bookmark { background-position: -72px -48px; }
|
||||
.print { background-position: -96px -48px; }
|
||||
.camera { background-position: -120px -48px; }
|
||||
.font { background-position: -144px -48px; }
|
||||
.bold { background-position: -168px -48px; }
|
||||
.italic { background-position: -192px -48px; }
|
||||
.text-height { background-position: -216px -48px; }
|
||||
.text-width { background-position: -240px -48px; }
|
||||
.align-left { background-position: -264px -48px; }
|
||||
.align-center { background-position: -288px -48px; }
|
||||
.align-right { background-position: -312px -48px; }
|
||||
.align-justify { background-position: -336px -48px; }
|
||||
.list { background-position: -360px -48px; }
|
||||
.indent-left { background-position: -384px -48px; }
|
||||
.indent-right { background-position: -408px -48px; }
|
||||
.facetime-video { background-position: -432px -48px; }
|
||||
.picture { background-position: -456px -48px; }
|
||||
|
||||
.pencil { background-position: 0 -72px; }
|
||||
.map-marker { background-position: -24px -72px; }
|
||||
.adjust { background-position: -48px -72px; }
|
||||
.tint { background-position: -72px -72px; }
|
||||
.edit { background-position: -96px -72px; }
|
||||
.share { background-position: -120px -72px; }
|
||||
.check { background-position: -144px -72px; }
|
||||
.move { background-position: -168px -72px; }
|
||||
.step-backward { background-position: -192px -72px; }
|
||||
.fast-backward { background-position: -216px -72px; }
|
||||
.backward { background-position: -240px -72px; }
|
||||
.play { background-position: -264px -72px; }
|
||||
.pause { background-position: -288px -72px; }
|
||||
.stop { background-position: -312px -72px; }
|
||||
.forward { background-position: -336px -72px; }
|
||||
.fast-forward { background-position: -360px -72px; }
|
||||
.step-forward { background-position: -384px -72px; }
|
||||
.eject { background-position: -408px -72px; }
|
||||
.chevron-left { background-position: -432px -72px; }
|
||||
.chevron-right { background-position: -456px -72px; }
|
||||
|
||||
.arrow-left { background-position: -240px -96px; }
|
||||
.arrow-right { background-position: -264px -96px; }
|
||||
.arrow-up { background-position: -288px -96px; }
|
||||
.arrow-down { background-position: -312px -96px; }
|
||||
.share { background-position: -336px -96px; }
|
||||
.resize-full { background-position: -360px -96px; }
|
||||
.resize-small { background-position: -384px -96px; }
|
||||
.plus { background-position: -408px -96px; }
|
||||
.minus { background-position: -432px -96px; }
|
||||
.asterisk { background-position: -456px -96px; }
|
||||
|
||||
|
|
@ -52,6 +52,11 @@ td {
|
|||
td + th {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
// Prevent a double border
|
||||
thead:first-child tr:first-child th,
|
||||
tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
// For first th or td in the first row in the first thead or tbody
|
||||
thead:first-child tr:first-child th:first-child,
|
||||
tbody:first-child tr:first-child td:first-child {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ h6 {
|
|||
|
||||
// Unordered and Ordered lists
|
||||
ul, ol {
|
||||
margin: 0 0 @baseLineHeight / 2 25px;
|
||||
margin: 13px 0 14px 25px;
|
||||
}
|
||||
ul ul,
|
||||
ul ol,
|
||||
|
|
|
|||
Loading…
Reference in a new issue