}
.page-header h1 small {
display: block;
- line-height: 18px;
+ line-height: 20px;
}
input[type="checkbox"],
input[type="radio"] {
position: static;
}
.navbar-fixed-top {
- margin-bottom: 18px;
+ margin-bottom: 20px;
}
.navbar-fixed-bottom {
- margin-top: 18px;
+ margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
}
.nav-collapse .nav {
float: none;
- margin: 0 0 9px;
+ margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
- padding: 9px 15px;
- margin: 9px 0;
+ padding: 10px 15px;
+ margin: 10px 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #111111;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 13px;
- line-height: 18px;
+ font-size: 14px;
+ line-height: 20px;
color: #333333;
background-color: #ffffff;
}
}
p {
- margin: 0 0 9px;
+ margin: 0 0 10px;
}
p small {
- font-size: 11px;
+ font-size: 12px;
color: #999999;
}
.lead {
- margin-bottom: 18px;
+ margin-bottom: 20px;
font-size: 20px;
font-weight: 200;
- line-height: 27px;
+ line-height: 30px;
}
h1,
h4,
h5,
h6 {
- margin: 0;
+ margin: 10px 0;
font-family: inherit;
font-weight: bold;
+ line-height: 1;
color: inherit;
text-rendering: optimizelegibility;
}
}
h1 {
- font-size: 30px;
- line-height: 36px;
-}
-
-h1 small {
- font-size: 18px;
+ font-size: 36px;
+ line-height: 40px;
}
h2 {
- font-size: 24px;
- line-height: 36px;
+ font-size: 30px;
+ line-height: 40px;
}
-h2 small {
- font-size: 18px;
+h3 {
+ font-size: 24px;
+ line-height: 40px;
}
-h3 {
+h4 {
font-size: 18px;
- line-height: 27px;
+ line-height: 20px;
}
-h3 small {
+h5 {
font-size: 14px;
+ line-height: 20px;
}
-h4,
-h5,
h6 {
- line-height: 18px;
+ font-size: 12px;
+ line-height: 20px;
}
-h4 {
- font-size: 14px;
+h1 small {
+ font-size: 24px;
}
-h4 small {
- font-size: 12px;
+h2 small {
+ font-size: 18px;
}
-h5 {
- font-size: 12px;
+h3 small {
+ font-size: 14px;
}
-h6 {
- font-size: 11px;
- color: #999999;
- text-transform: uppercase;
+h4 small {
+ font-size: 14px;
}
.page-header {
- padding-bottom: 17px;
- margin: 18px 0;
+ margin: 20px 0 19px;
border-bottom: 1px solid #eeeeee;
}
-.page-header h1 {
- line-height: 1;
-}
-
ul,
ol {
padding: 0;
- margin: 0 0 9px 25px;
+ margin: 0 0 10px 25px;
}
ul ul,
}
li {
- line-height: 18px;
+ line-height: 20px;
}
ul.unstyled,
}
dl {
- margin-bottom: 18px;
+ margin-bottom: 20px;
}
dt,
dd {
- line-height: 18px;
+ line-height: 20px;
}
dt {
}
dd {
- margin-left: 9px;
+ margin-left: 10px;
}
.dl-horizontal dt {
}
hr {
- margin: 18px 0;
+ margin: 20px 0;
border: 0;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #ffffff;
blockquote {
padding: 0 0 0 15px;
- margin: 0 0 18px;
+ margin: 0 0 20px;
border-left: 5px solid #eeeeee;
}
margin-bottom: 0;
font-size: 16px;
font-weight: 300;
- line-height: 22.5px;
+ line-height: 25px;
}
blockquote small {
display: block;
- line-height: 18px;
+ line-height: 20px;
color: #999999;
}
address {
display: block;
- margin-bottom: 18px;
+ margin-bottom: 20px;
font-style: normal;
- line-height: 18px;
+ line-height: 20px;
}
small {
pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
- font-size: 12px;
+ font-size: 13px;
color: #333333;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
pre {
display: block;
- padding: 8.5px;
- margin: 0 0 9px;
- font-size: 12.025px;
- line-height: 18px;
+ padding: 9.5px;
+ margin: 0 0 10px;
+ font-size: 12.950000000000001px;
+ line-height: 20px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
}
pre.prettyprint {
- margin-bottom: 18px;
+ margin-bottom: 20px;
}
pre code {
}
form {
- margin: 0 0 18px;
+ margin: 0 0 20px;
}
fieldset {
display: block;
width: 100%;
padding: 0;
- margin-bottom: 27px;
- font-size: 19.5px;
- line-height: 36px;
+ margin-bottom: 30px;
+ font-size: 21px;
+ line-height: 40px;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
legend small {
- font-size: 13.5px;
+ font-size: 15px;
color: #999999;
}
button,
select,
textarea {
- font-size: 13px;
+ font-size: 14px;
font-weight: normal;
- line-height: 18px;
+ line-height: 20px;
}
input,
input[type="color"],
.uneditable-input {
display: inline-block;
- height: 18px;
+ height: 20px;
padding: 4px;
margin-bottom: 9px;
- font-size: 13px;
- line-height: 18px;
+ font-size: 14px;
+ line-height: 20px;
color: #555555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.form-actions {
- padding: 17px 20px 18px;
- margin-top: 18px;
- margin-bottom: 18px;
+ padding: 19px 20px 20px;
+ margin-top: 20px;
+ margin-bottom: 20px;
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
*zoom: 1;
.help-block {
display: block;
- margin-bottom: 9px;
+ margin-bottom: 10px;
}
.help-inline {
position: relative;
margin-bottom: 0;
*margin-left: 0;
- font-size: 13px;
+ font-size: 14px;
vertical-align: middle;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
.input-append .add-on {
display: inline-block;
width: auto;
- height: 18px;
+ height: 20px;
min-width: 16px;
padding: 4px 5px;
- font-size: 13px;
+ font-size: 14px;
font-weight: normal;
- line-height: 18px;
+ line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
}
.control-group {
- margin-bottom: 9px;
+ margin-bottom: 10px;
}
legend + .control-group {
- margin-top: 18px;
+ margin-top: 20px;
-webkit-margin-top-collapse: separate;
}
.form-horizontal .control-group {
- margin-bottom: 18px;
+ margin-bottom: 20px;
*zoom: 1;
}
}
.form-horizontal .help-block {
- margin-top: 9px;
+ margin-top: 10px;
margin-bottom: 0;
}
.table {
width: 100%;
- margin-bottom: 18px;
+ margin-bottom: 20px;
}
.table th,
.table td {
padding: 8px;
- line-height: 18px;
+ line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
.dropdown-menu .divider {
*width: 100%;
height: 1px;
- margin: 8px 1px;
+ margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
padding: 3px 15px;
clear: both;
font-weight: normal;
- line-height: 18px;
+ line-height: 20px;
color: #333333;
white-space: nowrap;
}
float: right;
font-size: 20px;
font-weight: bold;
- line-height: 18px;
+ line-height: 20px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: .3em;
- font-size: 13px;
- line-height: 18px;
+ font-size: 14px;
+ line-height: 20px;
*line-height: 20px;
color: #333333;
text-align: center;
.btn-large {
padding: 9px 14px;
- font-size: 15px;
+ font-size: 16px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
.btn-small {
padding: 5px 9px;
- font-size: 11px;
- line-height: 16px;
+ font-size: 12px;
+ line-height: 18px;
}
.btn-small [class^="icon-"] {
.btn-mini {
padding: 2px 6px;
- font-size: 11px;
- line-height: 14px;
+ font-size: 12px;
+ line-height: 16px;
}
.btn-primary,
}
.btn-toolbar {
- margin-top: 9px;
- margin-bottom: 9px;
+ margin-top: 10px;
+ margin-bottom: 10px;
}
.btn-toolbar .btn-group {
.btn-group > .btn,
.btn-group > .dropdown-menu {
- font-size: 13px;
+ font-size: 14px;
}
.btn-group > .btn-mini,
.btn-group > .btn-small {
- font-size: 11px;
+ font-size: 12px;
}
.btn-group > .btn-large {
- font-size: 15px;
+ font-size: 16px;
}
.btn-group > .btn:first-child {
.alert {
padding: 8px 35px 8px 14px;
- margin-bottom: 18px;
+ margin-bottom: 20px;
color: #c09853;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
position: relative;
top: -2px;
right: -21px;
- line-height: 18px;
+ line-height: 20px;
}
.alert-success {
}
.nav {
- margin-bottom: 18px;
+ margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
padding: 3px 15px;
font-size: 11px;
font-weight: bold;
- line-height: 18px;
+ line-height: 20px;
color: #999999;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
.nav-list .divider {
*width: 100%;
height: 1px;
- margin: 8px 1px;
+ margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
- line-height: 18px;
+ line-height: 20px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
.navbar {
*position: relative;
*z-index: 2;
- margin-bottom: 18px;
+ margin-bottom: 20px;
overflow: visible;
}
.navbar .nav > li > a {
float: none;
- padding: 10px 12px 11px;
+ padding: 10px 15px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
display: inline-block;
padding: 4px 10px 4px;
margin: 5px 5px 6px;
- line-height: 18px;
+ line-height: 20px;
}
.navbar .btn-group {
.breadcrumb {
padding: 7px 14px;
- margin: 0 0 18px;
+ margin: 0 0 20px;
list-style: none;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
}
.pagination {
- height: 36px;
- margin: 18px 0;
+ height: 40px;
+ margin: 20px 0;
}
.pagination ul {
.pagination span {
float: left;
padding: 0 14px;
- line-height: 34px;
+ line-height: 38px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
}
.pager {
- margin-bottom: 18px;
+ margin-bottom: 20px;
margin-left: 0;
text-align: center;
list-style: none;
.thumbnails > li {
float: left;
- margin-bottom: 18px;
+ margin-bottom: 20px;
margin-left: 20px;
}
.label,
.badge {
- font-size: 10.998px;
+ font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #ffffff;
}
.accordion {
- margin-bottom: 18px;
+ margin-bottom: 20px;
}
.accordion-group {
.carousel {
position: relative;
- margin-bottom: 18px;
+ margin-bottom: 20px;
line-height: 1;
}
.hero-unit p {
font-size: 18px;
font-weight: 200;
- line-height: 27px;
+ line-height: 30px;
color: inherit;
}
margin: 0 auto;
}
-/* Increase docs base type size and line-heights */
-body {
- line-height: 20px;
-}
-p {
- margin-bottom: 15px;
-}
-/*li {
- line-height: 25px;
-}
-*/
/* Code in headings */
h3 code {
font-size: 14px;
-------------------------------------------------- */
.navbar {
- font-size: 13px;
}
/* Change the docs' brand */
}
.marketing h2 {
font-weight: 400;
- letter-spacing: -1px;
-}
+`}
.marketing p {
color: #555;
}
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="active">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="active">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="active">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
<li class="{{javascript}}">
<a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
</li>
- <li class="divider-vertical"></li>
- <li class="{{download}}">
- <a href="./download.html">{{_i}}Customize{{/i}}</a>
- </li>
- <li class="{{examples}}">
- <a href="./examples.html">{{_i}}Examples{{/i}}</a>
- </li>
<li class="{{less}}">
<a href="./extend.html">{{_i}}Extend{{/i}}</a>
</li>
<li class="">
<a href="./javascript.html">Javascript</a>
</li>
- <li class="divider-vertical"></li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- <li class="">
- <a href="./examples.html">Examples</a>
- </li>
<li class="">
<a href="./extend.html">Extend</a>
</li>
float: none;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
- padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
+ padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
line-height: 19px;
color: @navbarLinkColor;
text-decoration: none;
.subhead {
margin-bottom: 36px;
}
-h4 {
+/*h4 {
margin-bottom: 5px;
}
+*/
+
+.type-test {
+ margin-bottom: 20px;
+ padding: 0 20px 20px;
+ background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+ xbackground-color: rgba(255,0,0,.2);
+}
/* colgroup tests */
+<!-- Typography
+================================================== -->
+
+<div class="page-header">
+ <h1>Typography</h1>
+</div>
+
+<div class="row">
+ <div class="span6">
+ <div class="type-test">
+ <h1>h1. Heading 1</h1>
+ <h2>h2. Heading 2</h2>
+ <h3>h3. Heading 3</h3>
+ <h4>h4. Heading 4</h4>
+ <h5>h5. Heading 5</h5>
+ <h6>h6. Heading 6</h6>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+ </div>
+ <div class="span6">
+ <div class="type-test">
+ <h1>h1. Heading 1</h1>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ <h2>h2. Heading 2</h2>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ <h3>h3. Heading 3</h3>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ <h4>h4. Heading 4</h4>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ <h5>h5. Heading 5</h5>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ <h6>h6. Heading 6</h6>
+ <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ </div>
+ </div>
+</div>
+
+
+
<!-- Fluid grid
================================================== -->
// --------------------------------------------------
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
p {
margin: 0 0 @baseLineHeight / 2;
line-height: @baseLineHeight * 1.5;
}
-// HEADINGS
-// --------
+
+// Headings
+// -------------------------
h1, h2, h3, h4, h5, h6 {
- margin: 0;
+ margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
+ line-height: 1;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
color: @grayLight;
}
}
-h1 {
- font-size: 30px;
- line-height: @baseLineHeight * 2;
- small {
- font-size: 18px;
- }
-}
-h2 {
- font-size: 24px;
- line-height: @baseLineHeight * 2;
- small {
- font-size: 18px;
- }
-}
-h3 {
- font-size: 18px;
- line-height: @baseLineHeight * 1.5;
- small {
- font-size: 14px;
- }
-}
-h4, h5, h6 {
- line-height: @baseLineHeight;
-}
-h4 {
- font-size: 14px;
- small {
- font-size: 12px;
- }
-}
-h5 {
- font-size: 12px;
-}
-h6 {
- font-size: 11px;
- color: @grayLight;
- text-transform: uppercase;
-}
+h1 { font-size: 36px; line-height: 40px; }
+h2 { font-size: 30px; line-height: 40px; }
+h3 { font-size: 24px; line-height: 40px; }
+h4 { font-size: 18px; line-height: 20px; }
+h5 { font-size: 14px; line-height: 20px; }
+h6 { font-size: 12px; line-height: 20px; }
+
+h1 small { font-size: 24px; }
+h2 small { font-size: 18px; }
+h3 small { font-size: 14px; }
+h4 small { font-size: 14px; }
+
// Page header
+// -------------------------
+
.page-header {
- padding-bottom: @baseLineHeight - 1;
- margin: @baseLineHeight 0;
+ margin: @baseLineHeight 0 (@baseLineHeight - 1);
border-bottom: 1px solid @grayLighter;
}
-.page-header h1 {
- line-height: 1;
-}
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
// Unordered and Ordered lists
ul, ol {
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
-@baseFontSize: 13px;
+@baseFontSize: 14px;
@baseFontFamily: @sansFontFamily;
-@baseLineHeight: 18px;
+@baseLineHeight: 20px;
@altFontFamily: @serifFontFamily;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily