Mercurial > wikked
diff static/bootstrap/less/type.less @ 149:d29e2f337b00
Updated to Bootstrap 3.0.
author | Ludovic Chabant <ludovic@chabant.com> |
---|---|
date | Thu, 12 Dec 2013 21:54:04 -0800 |
parents | a5a3d454eac9 |
children |
line wrap: on
line diff
--- a/static/bootstrap/less/type.less Wed Dec 11 21:51:51 2013 -0800 +++ b/static/bootstrap/less/type.less Thu Dec 12 21:54:04 2013 -0800 @@ -3,17 +3,71 @@ // -------------------------------------------------- +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: @headings-font-family; + font-weight: @headings-font-weight; + line-height: @headings-line-height; + color: @headings-color; + + small, + .small { + font-weight: normal; + line-height: 1; + color: @headings-small-color; + } +} + +h1, +h2, +h3 { + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 65%; + } +} +h4, +h5, +h6 { + margin-top: (@line-height-computed / 2); + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 75%; + } +} + +h1, .h1 { font-size: @font-size-h1; } +h2, .h2 { font-size: @font-size-h2; } +h3, .h3 { font-size: @font-size-h3; } +h4, .h4 { font-size: @font-size-h4; } +h5, .h5 { font-size: @font-size-h5; } +h6, .h6 { font-size: @font-size-h6; } + + // Body text // ------------------------- p { - margin: 0 0 @baseLineHeight / 2; + margin: 0 0 (@line-height-computed / 2); } + .lead { - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; + margin-bottom: @line-height-computed; + font-size: floor(@font-size-base * 1.15); font-weight: 200; - line-height: @baseLineHeight * 1.5; + line-height: 1.4; + + @media (min-width: @screen-sm-min) { + font-size: (@font-size-base * 1.5); + } } @@ -21,218 +75,199 @@ // ------------------------- // Ex: 14px base font * 85% = about 12px -small { font-size: 85%; } +small, +.small { font-size: 85%; } -strong { font-weight: bold; } -em { font-style: italic; } +// Undo browser default styling cite { font-style: normal; } -// Utility classes -.muted { color: @grayLight; } -a.muted:hover, -a.muted:focus { color: darken(@grayLight, 10%); } - -.text-warning { color: @warningText; } -a.text-warning:hover, -a.text-warning:focus { color: darken(@warningText, 10%); } +// Contextual emphasis +.text-muted { + color: @text-muted; +} +.text-primary { + color: @brand-primary; + &:hover { + color: darken(@brand-primary, 10%); + } +} +.text-warning { + color: @state-warning-text; + &:hover { + color: darken(@state-warning-text, 10%); + } +} +.text-danger { + color: @state-danger-text; + &:hover { + color: darken(@state-danger-text, 10%); + } +} +.text-success { + color: @state-success-text; + &:hover { + color: darken(@state-success-text, 10%); + } +} +.text-info { + color: @state-info-text; + &:hover { + color: darken(@state-info-text, 10%); + } +} -.text-error { color: @errorText; } -a.text-error:hover, -a.text-error:focus { color: darken(@errorText, 10%); } - -.text-info { color: @infoText; } -a.text-info:hover, -a.text-info:focus { color: darken(@infoText, 10%); } - -.text-success { color: @successText; } -a.text-success:hover, -a.text-success:focus { color: darken(@successText, 10%); } - +// Alignment .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } -// Headings -// ------------------------- - -h1, h2, h3, h4, h5, h6 { - margin: (@baseLineHeight / 2) 0; - font-family: @headingsFontFamily; - font-weight: @headingsFontWeight; - line-height: @baseLineHeight; - color: @headingsColor; - text-rendering: optimizelegibility; // Fix the character spacing for headings - small { - font-weight: normal; - line-height: 1; - color: @grayLight; - } -} - -h1, -h2, -h3 { line-height: @baseLineHeight * 2; } - -h1 { font-size: @baseFontSize * 2.75; } // ~38px -h2 { font-size: @baseFontSize * 2.25; } // ~32px -h3 { font-size: @baseFontSize * 1.75; } // ~24px -h4 { font-size: @baseFontSize * 1.25; } // ~18px -h5 { font-size: @baseFontSize; } -h6 { font-size: @baseFontSize * 0.85; } // ~12px - -h1 small { font-size: @baseFontSize * 1.75; } // ~24px -h2 small { font-size: @baseFontSize * 1.25; } // ~18px -h3 small { font-size: @baseFontSize; } -h4 small { font-size: @baseFontSize; } - - // Page header // ------------------------- .page-header { - padding-bottom: (@baseLineHeight / 2) - 1; - margin: @baseLineHeight 0 (@baseLineHeight * 1.5); - border-bottom: 1px solid @grayLighter; + padding-bottom: ((@line-height-computed / 2) - 1); + margin: (@line-height-computed * 2) 0 @line-height-computed; + border-bottom: 1px solid @page-header-border-color; } - // Lists // -------------------------------------------------- // Unordered and Ordered lists -ul, ol { - padding: 0; - margin: 0 0 @baseLineHeight / 2 25px; -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; -} -li { - line-height: @baseLineHeight; +ul, +ol { + margin-top: 0; + margin-bottom: (@line-height-computed / 2); + ul, + ol { + margin-bottom: 0; + } } -// Remove default list styles -ul.unstyled, -ol.unstyled { - margin-left: 0; +// List options + +// Unstyled keeps list items block level, just removes default browser padding and list-style +.list-unstyled { + padding-left: 0; list-style: none; } -// Single-line list items -ul.inline, -ol.inline { - margin-left: 0; - list-style: none; +// Inline turns list items into inline-block +.list-inline { + .list-unstyled(); + > li { display: inline-block; - .ie7-inline-block(); padding-left: 5px; padding-right: 5px; + + &:first-child { + padding-left: 0; + } } } // Description Lists dl { - margin-bottom: @baseLineHeight; + margin-top: 0; // Remove browser default + margin-bottom: @line-height-computed; } dt, dd { - line-height: @baseLineHeight; + line-height: @line-height-base; } dt { font-weight: bold; } dd { - margin-left: @baseLineHeight / 2; + margin-left: 0; // Undo browser default } -// Horizontal layout (like forms) -.dl-horizontal { - .clearfix(); // Ensure dl clears floats if empty dd elements present - dt { - float: left; - width: @horizontalComponentOffset - 20; - clear: left; - text-align: right; - .text-overflow(); - } - dd { - margin-left: @horizontalComponentOffset; + +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). + +@media (min-width: @grid-float-breakpoint) { + .dl-horizontal { + dt { + float: left; + width: (@component-offset-horizontal - 20); + clear: left; + text-align: right; + .text-overflow(); + } + dd { + margin-left: @component-offset-horizontal; + .clearfix(); // Clear the floated `dt` if an empty `dd` is present + } } } // MISC // ---- -// Horizontal rules -hr { - margin: @baseLineHeight 0; - border: 0; - border-top: 1px solid @hrBorder; - border-bottom: 1px solid @white; -} - // Abbreviations and acronyms abbr[title], -// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted @grayLight; + border-bottom: 1px dotted @abbr-border-color; } -abbr.initialism { +.initialism { font-size: 90%; text-transform: uppercase; } // Blockquotes blockquote { - padding: 0 0 0 15px; - margin: 0 0 @baseLineHeight; - border-left: 5px solid @grayLighter; + padding: (@line-height-computed / 2) @line-height-computed; + margin: 0 0 @line-height-computed; + border-left: 5px solid @blockquote-border-color; p { - margin-bottom: 0; - font-size: @baseFontSize * 1.25; + font-size: (@font-size-base * 1.25); font-weight: 300; line-height: 1.25; } - small { + p:last-child { + margin-bottom: 0; + } + small, + .small { display: block; - line-height: @baseLineHeight; - color: @grayLight; + line-height: @line-height-base; + color: @blockquote-small-color; &:before { - content: '\2014 \00A0'; + content: '\2014 \00A0'; // EM DASH, NBSP } } // Float right with text-align: right &.pull-right { - float: right; padding-right: 15px; padding-left: 0; - border-right: 5px solid @grayLighter; + border-right: 5px solid @blockquote-border-color; border-left: 0; p, - small { + small, + .small { text-align: right; } - small { + small, + .small { &:before { content: ''; } &:after { - content: '\00A0 \2014'; + content: '\00A0 \2014'; // NBSP, EM DASH } } } } // Quotes -q:before, -q:after, blockquote:before, blockquote:after { content: ""; @@ -240,8 +275,7 @@ // Addresses address { - display: block; - margin-bottom: @baseLineHeight; + margin-bottom: @line-height-computed; font-style: normal; - line-height: @baseLineHeight; + line-height: @line-height-base; }