From 72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 Mon Sep 17 00:00:00 2001 From: Arun Persaud Date: Sat, 8 Mar 2014 22:02:34 -0800 Subject: updated css/js libraries * bootstrap 3.1.1 * jquery 2.1.0 * less 1.7.0 mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc. --- css/bootstrap/type.less | 336 +++++++++++++++++++++++++++++------------------- 1 file changed, 204 insertions(+), 132 deletions(-) (limited to 'css/bootstrap/type.less') diff --git a/css/bootstrap/type.less b/css/bootstrap/type.less index 2e0f386..5e2a219 100644 --- a/css/bootstrap/type.less +++ b/css/bootstrap/type.less @@ -3,210 +3,283 @@ // -------------------------------------------------- +// 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, .h1, +h2, .h2, +h3, .h3 { + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 65%; + } +} +h4, .h4, +h5, .h5, +h6, .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); + } } // Emphasis & misc // ------------------------- -small { - font-size: 85%; // Ex: 14px base font * 85% = about 12px -} -strong { - font-weight: bold; +// Ex: 14px base font * 85% = about 12px +small, +.small { font-size: 85%; } + +// Undo browser default styling +cite { font-style: normal; } + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } + +// Contextual colors +.text-muted { + color: @text-muted; } -em { - font-style: italic; +.text-primary { + .text-emphasis-variant(@brand-primary); } -cite { - font-style: normal; +.text-success { + .text-emphasis-variant(@state-success-text); } - -// Utility classes -.muted { - color: @grayLight; +.text-info { + .text-emphasis-variant(@state-info-text); } .text-warning { - color: @warningText; + .text-emphasis-variant(@state-warning-text); } -.text-error { - color: @errorText; +.text-danger { + .text-emphasis-variant(@state-danger-text); } -.text-info { - color: @infoText; + +// Contextual backgrounds +// For now we'll leave these alongside the text classes until v4 when we can +// safely shift things around (per SemVer rules). +.bg-primary { + // Given the contrast here, this is the only class to have its color inverted + // automatically. + color: #fff; + .bg-variant(@brand-primary); } -.text-success { - color: @successText; +.bg-success { + .bg-variant(@state-success-bg); } - - -// Headings -// ------------------------- - -h1, h2, h3, h4, h5, h6 { - 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 { - font-weight: normal; - line-height: 1; - color: @grayLight; - } +.bg-info { + .bg-variant(@state-info-bg); +} +.bg-warning { + .bg-variant(@state-warning-bg); +} +.bg-danger { + .bg-variant(@state-danger-bg); } -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 / 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.unstyled, -ol.unstyled { - margin-left: 0; +ul, +ol { + margin-top: 0; + margin-bottom: (@line-height-computed / 2); + ul, + ol { + margin-bottom: 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; } +// Inline turns list items into inline-block +.list-inline { + .list-unstyled(); + margin-left: -5px; + + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + // 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; -} -// 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; + margin-left: 0; // Undo browser default +} + +// 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; + &:extend(.clearfix all); // 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] { +abbr[title], +// 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; - p { - margin-bottom: 0; - #font > .shorthand(16px,300,@baseLineHeight * 1.25); + padding: (@line-height-computed / 2) @line-height-computed; + margin: 0 0 @line-height-computed; + font-size: @blockquote-font-size; + border-left: 5px solid @blockquote-border-color; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } } - small { + + // Note: Deprecated small and .small as of v3.1.0 + // Context: https://github.com/twbs/bootstrap/issues/11660 + footer, + small, + .small { display: block; - line-height: @baseLineHeight; - color: @grayLight; + font-size: 80%; // back to default font-size + 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-left: 0; - p, - small { - text-align: right; - } - small { - &:before { - content: ''; - } - &:after { - content: '\00A0 \2014'; - } +// Opposite alignment of blockquote +// +// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid @blockquote-border-color; + border-left: 0; + text-align: right; + + // Account for citation + footer, + small, + .small { + &:before { content: ''; } + &:after { + content: '\00A0 \2014'; // nbsp, em dash } } } // Quotes -q:before, -q:after, blockquote:before, blockquote:after { content: ""; @@ -214,8 +287,7 @@ blockquote:after { // Addresses address { - display: block; - margin-bottom: @baseLineHeight; + margin-bottom: @line-height-computed; font-style: normal; - line-height: @baseLineHeight; + line-height: @line-height-base; } -- cgit v1.2.3-18-g5258