From 7b7581d44abd3cc4cffb42cfe099ca018871a45a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 20 Dec 2012 20:52:20 -0800 Subject: [PATCH] Finish migrating to Normalize 2: * Port print styles from reset.less to scaffolding.less * Port responsive image styles from reset.less to scaffolding.less --- docs/assets/css/bootstrap.css | 65 +++++++++++++++++++++++++++ less/scaffolding.less | 83 +++++++++++++++++++++++++++++++++++ 2 files changed, 148 insertions(+) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 873673227d..44581d473c 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -228,6 +228,19 @@ a:hover { text-decoration: underline; } +a:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +img { + width: auto\9; + height: auto; + max-width: 100%; + vertical-align: middle; +} + .img-rounded { border-radius: 6px; } @@ -245,6 +258,58 @@ a:hover { border-radius: 500px; } +@media print { + * { + color: #000 !important; + text-shadow: none !important; + background: transparent !important; + box-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + @page { + margin: 0.5cm; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } +} + .container { max-width: 940px; margin-right: auto; diff --git a/less/scaffolding.less b/less/scaffolding.less index 649b5f94c8..e596f26d0e 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -35,11 +35,24 @@ a:hover { color: @link-color-hover; text-decoration: underline; } +a:focus { + .tab-focus(); +} // Images // ------------------------- +img { + // Responsive images (ensure images don't scale beyond their parents) + max-width: 100%; // Part 1: Set a maxium relative to the parent + width: auto\9; // IE8 need help adjusting responsive images + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching + + // Match vertical alignment with other comment elements + vertical-align: middle; +} + // Rounded corners .img-rounded { border-radius: 6px; @@ -58,3 +71,73 @@ a:hover { .img-circle { border-radius: 500px; // crank the border-radius so it works with most reasonably sized images } + + +// Printing +// ------------------------- +// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css + +@media print { + + * { + text-shadow: none !important; + color: #000 !important; // Black prints faster: h5bp.com/s + background: transparent !important; + box-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links for images, or javascript/internal links + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} \ No newline at end of file