Skip to content
GitLab
Commit fb9401b3 authored by Mark Otto's avatar Mark Otto
Browse files

tweaks abound, updated prettify styles, new sidenav component started, sprite icons started

parent 553030ca
Hide whitespace changes
Inline Side-by-side
Showing
with 809 additions and 33 deletions
+809 -33
bootstrap.css
+ 328
- 2
View file @ fb9401b3
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
...@@ -401,7 +401,7 @@ h6 { ...@@ -401,7 +401,7 @@ h6 {
text-transform: uppercase; text-transform: uppercase;
} }
ul, ol { ul, ol {
margin: 0 0 9px 25px; margin: 13px 0 14px 25px;
} }
ul ul, ul ul,
ul ol, ul ol,
...@@ -1025,6 +1025,9 @@ td { ...@@ -1025,6 +1025,9 @@ td {
.bordered-table td + th { .bordered-table td + th {
border-left: 1px solid #ddd; 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 { .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; -webkit-border-radius: 4px 0 0 0;
-moz-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 { ...@@ -1820,6 +1823,285 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
.label.notice { .label.notice {
background-color: #62cffc; 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 { .dropdown {
position: relative; position: relative;
} }
...@@ -2538,6 +2820,50 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { ...@@ -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 { .popover .content p, .popover .content ul, .popover .content ol {
margin-bottom: 0; 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 { .thumbnails {
margin-left: -20px; margin-left: -20px;
margin-bottom: 0; margin-bottom: 0;
......
bootstrap.min.css
+ 101
- 1
View file @ fb9401b3
...@@ -69,7 +69,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} ...@@ -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;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
h5{font-size:14px;line-height:18px;} h5{font-size:14px;line-height:18px;}
h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} 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 ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;} ul{list-style:disc;}
ol{list-style:decimal;} ol{list-style:decimal;}
...@@ -167,6 +167,7 @@ th{font-weight:bold;vertical-align:bottom;} ...@@ -167,6 +167,7 @@ th{font-weight:bold;vertical-align:bottom;}
td{vertical-align:top;} td{vertical-align:top;}
.condensed-table th,.condensed-table td{padding:4px 5px;} .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{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: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: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;} .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; ...@@ -246,6 +247,97 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.label.warning{background-color:#f89406;} .label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;} .label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;} .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{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-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;} .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; ...@@ -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 .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 .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;} .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{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:after{clear:both;}
.thumbnails>li{float:left;margin:0 0 20px 20px;} .thumbnails>li{float:left;margin:0 0 20px 20px;}
......
docs/assets/css/docs.css
+ 18
- 0
View file @ fb9401b3
...@@ -330,6 +330,24 @@ h2 + table { ...@@ -330,6 +330,24 @@ h2 + table {
position: relative; 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 /* Responsive Docs
-------------------------------------------------- */ -------------------------------------------------- */
......
docs/assets/img/glyphicons-halflings-sprite.png 0 → 100644
+ 0
- 0
View file @ fb9401b3
docs/assets/img/glyphicons-halflings-sprite.png

9.71 KB

docs/assets/js/google-code-prettify/prettify.css
+ 12
- 29
View file @ fb9401b3
...@@ -2,40 +2,23 @@ ...@@ -2,40 +2,23 @@
.lit { color: #195f91; } .lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; } .pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; } .fun { color: #dc322f; }
.str, .atv { color: #268bd2; } .str, .atv { color: #62C462; }
.kwd, .tag { color: #195f91; } .kwd, .linenums .tag { color: #049CD9; }
.typ, .atn, .dec, .var { color: #CB4B16; } .typ, .atn, .dec, .var { color: #EE5F5B; }
.pln { color: #93a1a1; } .pln { color: #93a1a1; }
pre.prettyprint { pre.prettyprint {
background: #fefbf3; background-color: #fefbf3;
padding: 9px; padding: 9px;
border: 1px solid rgba(0,0,0,.2); margin-bottom: 9px;
-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); pre.prettyprint {
color: #ccc;
background-color: #252525;
} }
/* Specify class=linenums on a pre to get line numbering */ /* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ 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 */ /* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 { } li.L1, li.L3, li.L5, li.L7, li.L9 { }
\ No newline at end of file
/*
$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;
*/
\ No newline at end of file
docs/base-css.html
+ 152
- 0
View file @ fb9401b3
...@@ -1175,6 +1175,158 @@ Form states ...@@ -1175,6 +1175,158 @@ Form states
</section> </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&mdash;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>&lt;i&gt;</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">
&lt;i class="chevron-left"&gt;&lt;/i&gt;
</pre>
<p>There are over 100 classes to choose from for your icons. Just add an <code>&lt;i&gt;</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>&lt;i&gt;</code> tag, you can put an icon.</p>
</div>
</div>
</section>
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="footer"> <footer class="footer">
......
docs/components.html
+ 32
- 0
View file @ fb9401b3
...@@ -223,6 +223,38 @@ ...@@ -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 <!-- Navbar
================================================== --> ================================================== -->
<section id="navbar"> <section id="navbar">
......
lib/bootstrap.less
+ 2
- 0
View file @ fb9401b3
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
// Temp catchall for what's missing thus far // Temp catchall for what's missing thus far
@import "patterns.less"; @import "patterns.less";
@import "sprites.less";
@import "dropdowns.less"; @import "dropdowns.less";
@import "tabs-pills.less"; @import "tabs-pills.less";
@import "breadcrumbs.less"; @import "breadcrumbs.less";
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
@import "modals.less"; @import "modals.less";
@import "twipsy.less"; @import "twipsy.less";
@import "popovers.less"; @import "popovers.less";
@import "sidenav.less";
@import "thumbnails.less"; @import "thumbnails.less";
// Responsive // Responsive
......
lib/sidenav.less 0 → 100644
+ 40
- 0
View file @ fb9401b3
// 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);
}
\ No newline at end of file
lib/sprites.less 0 → 100644
+ 118
- 0
View file @ fb9401b3
// 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; }
lib/tables.less
+ 5
- 0
View file @ fb9401b3
...@@ -52,6 +52,11 @@ td { ...@@ -52,6 +52,11 @@ td {
td + th { td + th {
border-left: 1px solid #ddd; 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 // For first th or td in the first row in the first thead or tbody
thead:first-child tr:first-child th:first-child, thead:first-child tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child { tbody:first-child tr:first-child td:first-child {
......
lib/type.less
+ 1
- 1
View file @ fb9401b3
...@@ -74,7 +74,7 @@ h6 { ...@@ -74,7 +74,7 @@ h6 {
// Unordered and Ordered lists // Unordered and Ordered lists
ul, ol { ul, ol {
margin: 0 0 @baseLineHeight / 2 25px; margin: 13px 0 14px 25px;
} }
ul ul, ul ul,
ul ol, ul ol,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment