From 85db846b651842444d374f8e54f3f362ca18d08e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 15 Jan 2013 17:55:14 -0800 Subject: [PATCH] mobile-first navs, navbar, grids, and type --- docs/assets/css/bootstrap.css | 1394 +++++++++++++++++++++++++++++++- docs/assets/css/docs.css | 65 +- less/bootstrap.less | 14 +- less/code.less | 6 +- less/component-animations.less | 12 +- less/grid.less | 17 +- less/mixins.less | 2 +- less/navbar.less | 89 +- less/navs.less | 42 +- less/scaffolding.less | 21 + less/type.less | 7 +- less/variables.less | 2 +- 12 files changed, 1623 insertions(+), 48 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index cd40640065..c20e14cf88 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -202,10 +202,1402 @@ table { border-spacing: 0; } +html { + font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +@media screen and (max-device-width: 480px) { + html { + -webkit-text-size-adjust: none; + -ms-text-size-adjust: none; + } +} + +body { + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-size: 1.4rem; + line-height: 1.5; + color: #333333; + background-color: #ffffff; +} + +body, +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 20px; +} + +a { + color: #428bca; + text-decoration: none; +} + +a:hover { + color: #2a6496; + 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; +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.img-circle { + 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; + } +} + +p { + margin: 0 0 10px; +} + +.lead { + margin-bottom: 20px; + font-size: 21px; + font-weight: 200; + line-height: 30px; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +cite { + font-style: normal; +} + +.muted { + color: #999999; +} + +a.muted:hover { + color: #808080; +} + +.text-warning { + color: #c09853; +} + +a.text-warning:hover { + color: #a47e3c; +} + +.text-error { + color: #b94a48; +} + +a.text-error:hover { + color: #953b39; +} + +.text-success { + color: #468847; +} + +a.text-success:hover { + color: #356635; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 10px 0; + font-family: inherit; + font-weight: 500; + line-height: 20px; + text-rendering: optimizelegibility; +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + font-weight: normal; + line-height: 1; + color: #999999; +} + +h1, +h2, +h3 { + line-height: 40px; +} + +h1 { + font-size: 38.5px; +} + +h2 { + font-size: 31.5px; +} + +h3 { + font-size: 24.5px; +} + +h4 { + font-size: 17.5px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 11.9px; +} + +h1 small { + font-size: 24.5px; +} + +h2 small { + font-size: 17.5px; +} + +h3 small { + font-size: 14px; +} + +h4 small { + font-size: 14px; +} + +.page-header { + padding-bottom: 9px; + margin: 20px 0 30px; + border-bottom: 1px solid #eeeeee; +} + +ul, +ol { + padding: 0; + margin: 0 0 10px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +li { + line-height: 20px; +} + +.list-unstyled, +.list-inline { + margin-left: 0; + list-style: none; +} + +.list-inline > li { + display: inline-block; + padding-right: 5px; + padding-left: 5px; +} + +dl { + margin-bottom: 20px; +} + +dt, +dd { + line-height: 20px; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 10px; +} + +.dl-horizontal:before, +.dl-horizontal:after { + display: table; + content: " "; +} + +.dl-horizontal:after { + clear: both; +} + +.dl-horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dl-horizontal dd { + margin-left: 180px; +} + +hr { + margin: 20px 0; + border: 0; + border-top: 1px solid #eeeeee; + border-bottom: 1px solid #fff; +} + +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #999999; +} + +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +blockquote { + padding: 0 0 0 15px; + margin: 0 0 20px; + border-left: 5px solid #eeeeee; +} + +blockquote p { + margin-bottom: 0; + font-size: 17.5px; + font-weight: 300; + line-height: 1.25; +} + +blockquote small { + display: block; + line-height: 20px; + color: #999999; +} + +blockquote small:before { + content: '\2014 \00A0'; +} + +blockquote.pull-right { + float: right; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #eeeeee; + border-left: 0; +} + +blockquote.pull-right p, +blockquote.pull-right small { + text-align: right; +} + +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +address { + display: block; + margin-bottom: 20px; + font-style: normal; + line-height: 20px; +} + +code, +pre { + padding: 0 3px 2px; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size: 12px; + color: #333333; + border-radius: 4px; +} + +code { + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + white-space: nowrap; + background-color: #f9f2f4; +} + +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 20px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; +} + +pre.prettyprint { + margin-bottom: 20px; +} + +pre code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; +} + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +.container { + max-width: 940px; + margin-right: auto; + margin-left: auto; +} + +.container:before, +.container:after { + display: table; + content: " "; +} + +.container:after { + clear: both; +} + +.row { + margin-right: -10px; + margin-left: -10px; +} + +.row:before, +.row:after { + display: table; + content: " "; +} + +.row:after { + clear: both; +} + +[class^="span"] { + padding-right: 10px; + padding-left: 10px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +[class*="span"].pull-right { + float: right; +} + +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +.fade.in { + opacity: 1; +} + +/*.collapse { + position: relative; + height: 0; + overflow: hidden; + .transition(height .35s ease); + &.in { + height: auto; + } +}*/ + +.collapse { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition: height 0.35s ease; + -moz-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; +} + +.collapse.in { + height: auto; +} + +.nav { + padding-left: 0; + margin-bottom: 0; + margin-left: 0; + list-style: none; +} + +.nav:before, +.nav:after { + display: table; + content: " "; +} + +.nav:after { + clear: both; +} + +.nav > li { + display: block; +} + +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} + +.nav > li > a:hover { + text-decoration: none; + background-color: #eeeeee; +} + +.nav-list > li > a { + margin-bottom: -1px; + border: 1px solid #e5e5e5; +} + +.nav-list > li:first-child > a { + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} + +.nav-list > li:last-child > a { + border-radius: 0 0 6px 6px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} + +.nav-list > .active > a, +.nav-list > .active > a:hover { + z-index: 2; + color: #fff; + background-color: #428bca; + border-color: #428bca; +} + +/* +// Prevent IE8 from misplacing imgs +// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 +.nav > li > a > img { + max-width: none; +} + +// Redeclare pull classes because of specifity +.nav > .pull-right { + float: right; +} + +// Nav headers (for dropdowns and lists) +.nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: @line-height-base; + color: @grayLight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + text-transform: uppercase; +} +// Space them out when they follow another list item (link) +.nav li + .nav-header { + margin-top: 9px; +} + +// Dividers (basically an hr) within the dropdown +.nav .divider { + .nav-divider(); +} +*/ + +/* +// Tabs +// ------------------------- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid #ddd; +} +// Make the list-items overlay the bottom border +.nav-tabs > li { + margin-bottom: -1px; +} +// Actual tabs (as links) +.nav-tabs > li > a { + margin-right: 2px; + line-height: @line-height-base; + border: 1px solid transparent; + border-radius: @border-radius-base @border-radius-base 0 0; + &:hover { + border-color: @grayLighter @grayLighter #ddd; + } +} +// Active state, and it's :hover to override normal :hover +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover { + color: @gray; + background-color: @body-background; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + + + +// Pills +// ------------------------- + +// Links rendered as pills +.nav-pills > li > a { + border-radius: 5px; +} +.nav-pills > li + li > a { + margin-left: 2px; +} + +// Active state +.nav-pills > .active > a, +.nav-pills > .active > a:hover { + color: #fff; + background-color: @link-color; +} + +// Stacked pills +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li > a { + margin-top: 2px; + margin-left: 0; // no need for the gap between nav items +} + + + +// Justified navs +// ------------------------- + +.nav-justified { + // Negative margin doesn't work, so we hack it + max-height: 37px; +} +.nav-justified > li { + float: none; + display: table-cell; + width: 1%; + text-align: center; +} + + + +// Lists +// ------------------------- + +.nav-list { + background-color: #fff; + border-radius: 6px; + .box-shadow(0 1px 4px rgba(0,0,0,.065)) +} +.nav-list > li { + float: none; +} +.nav-list > li > a { + margin-bottom: -1px; // pull up the following link for a 1px border between + border: 1px solid #e5e5e5; +} +.nav-list > li > a:hover { + background-color: #f5f5f5; +} +.nav-list > li:first-child > a { + border-radius: 6px 6px 0 0; +} +.nav-list > li:last-child > a { + border-radius: 0 0 6px 6px; +} +.nav-list > .active > a, +.nav-list > .active > a:hover { + position: relative; + z-index: 2; + padding: 9px 15px; + color: #fff; + text-shadow: 0 1px 0 rgba(0,0,0,.15); + background-color: @link-color; + border-width: 0; + .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1)") +} + + + +// Dropdowns +// ------------------------- + +.nav-tabs .dropdown-menu { + // Remove the top rounded corners here since there is a hard edge above the menu + .border-top-radius(0); +} + +// Default dropdown links +// ------------------------- +// Make carets use linkColor to start +.nav .dropdown-toggle .caret { + border-top-color: @link-color; + border-bottom-color: @link-color; + margin-top: 8px; +} +.nav .dropdown-toggle:hover .caret { + border-top-color: @link-color-hover; + border-bottom-color: @link-color-hover; +} + +// Active dropdown links +// ------------------------- +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: @gray; + border-bottom-color: @gray; +} + +// Active:hover dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover { + cursor: pointer; +} + +// Open dropdowns +// ------------------------- +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover { + color: #fff; + background-color: @grayLight; + border-color: @grayLight; +} +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret { + border-top-color: #fff; + border-bottom-color: #fff; + .opacity(100); +} + +// Dropdowns in stacked tabs +.tabs-stacked .open > a:hover { + border-color: @grayLight; +} + + + +// Tabbable tabs +// ------------------------- + +// Clear any floats +.tabbable { + .clearfix(); +} + +// Show/hide tabbable areas +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} +.tab-content > .active, +.pill-content > .active { + display: block; +} + + + +// Disabled state +// ------------------------- + +// Gray out text +.nav > .disabled > a { + color: @grayLight; +} +// Nuke hover effects +.nav > .disabled > a:hover { + text-decoration: none; + background-color: transparent; + cursor: default; +} +*/ + +.navbar { + padding: 15px; + background-color: #eee; +} + +.navbar:before, +.navbar:after { + display: table; + content: " "; +} + +.navbar:after { + clear: both; +} + +.navbar .brand { + display: inline-block; + padding: 7px 15px; + font-size: 18px; + font-weight: bold; + line-height: 1; +} + +.navbar .brand:hover { + text-decoration: none; + background-color: #ddd; +} + +.btn-navbar { + float: right; + padding: 10px 12px; + background-color: #ddd; + border: 0; + border-radius: 4px; +} + +.btn-navbar .icon-bar { + display: block; + width: 20px; + height: 2px; + background-color: #fff; + border-radius: 1px; +} + +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} + +.navbar .nav { + margin-top: 15px; +} + +.navbar .nav > li > a { + line-height: 20px; +} + +.navbar .nav > li > a:hover { + background-color: #ddd; +} + +.navbar .nav > .active > a { + background-color: #ddd; +} + +.navbar-inverse { + background-color: #222; +} + +.navbar-inverse .brand { + color: #fff; +} + +.navbar-inverse .brand:hover { + background-color: #333; +} + +.navbar-inverse .nav > li > a { + color: #fff; +} + +.navbar-inverse .nav > li > a:hover { + background-color: #333; +} + +.navbar-inverse .nav > .active > a { + background-color: #333; +} + +.navbar-inverse .btn-navbar { + background-color: #444; +} + /* +// COMMON STYLES +// ------------- + +// Base class and wrapper +.navbar { + overflow: visible; + padding: 0 20px; + margin-bottom: @line-height-base; + background-color: @navbar-background; + border-radius: @border-radius-base; + + // Prevent floats from breaking the navbar + .clearfix(); +} + +// Set width to auto for default container +// We then reset it for fixed navbars in the #gridSystem mixin +.navbar .container { + width: auto; +} + +// Override the default collapsed state +.nav-collapse.collapse { + height: auto; + overflow: visible; +} + + +// Brand: website or project name +// ------------------------- +.navbar .brand { + float: left; + display: block; + // Vertically center the text given @navbar-height + padding: ((@navbar-height - @line-height-base) / 2) 20px ((@navbar-height - @line-height-base) / 2); + margin-left: -20px; // negative indent to left-align the text down the page + font-size: 20px; + font-weight: 200; + color: @navbar-brand-color; + text-shadow: 0 1px 0 @navbar-background-highlight; + &:hover { + text-decoration: none; + } +} + +// Plain text in topbar +// ------------------------- +.navbar-text { + margin-bottom: 0; + line-height: @navbar-height; + color: @navbar-text; +} + +// Janky solution for now to account for links outside the .nav +// ------------------------- +.navbar-link { + color: @navbar-link-color; + &:hover { + color: @navbar-link-color-hover; + } +} + +// Dividers in navbar +// ------------------------- +.navbar .divider-vertical { + height: @navbar-height; + margin: 0 9px; + border-left: 1px solid @navbar-background; + border-right: 1px solid @navbar-background-highlight; +} + +// Buttons in navbar +// ------------------------- +.navbar .btn, +.navbar .btn-group { + .navbarVerticalAlign(30px); // Vertically center in navbar +} +.navbar .btn-group .btn, +.navbar .input-prepend .btn, +.navbar .input-append .btn { + margin-top: 0; // then undo the margin here so we don't accidentally double it +} + +// Navbar forms +// ------------------------- +.navbar-form { + margin-bottom: 0; // remove default bottom margin + .clearfix(); + input, + select, + .radio, + .checkbox { + .navbarVerticalAlign(30px); // Vertically center in navbar + } + input, + select, + .btn { + display: inline-block; + margin-bottom: 0; + } + input[type="image"], + input[type="checkbox"], + input[type="radio"] { + margin-top: 3px; + } + .input-append, + .input-prepend { + margin-top: 5px; + white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left + input { + margin-top: 0; // remove the margin on top since it's on the parent + } + } +} + +// Navbar search +// ------------------------- +.navbar-search { + position: relative; + float: left; + .navbarVerticalAlign(30px); // Vertically center in navbar + margin-bottom: 0; + .search-query { + margin-bottom: 0; + padding: 4px 14px; + #font > .sans-serif(13px, normal, 1); + border-radius: 15px; // redeclare because of specificity of the type attribute + } +} + + + +// Static navbar +// ------------------------- + +.navbar-static-top { + position: static; + margin-bottom: 0; // remove 18px margin for default navbar + border-radius: 0; +} + + + +// Fixed navbar +// ------------------------- + +// Shared (top/bottom) styles +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: @zindex-navbar-fixed; + margin-bottom: 0; // remove 18px margin for default navbar + border-radius: 0; +} + +// Reset container width +// Required here as we reset the width earlier on and the grid mixins don't override early enough +.navbar-static-top .container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + #grid > .core > .span(@grid-columns); +} + +// Fixed to top +.navbar-fixed-top { + top: 0; +} + +// Fixed to bottom +.navbar-fixed-bottom { + bottom: 0; +} + + + +// NAVIGATION +// ---------- + +.navbar .nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; +} +.navbar .nav.pull-right { + float: right; // redeclare due to specificity + margin-right: 0; // remove margin on float right nav +} +.navbar .nav > li { + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; + // Vertically center the text given @navbar-height + padding: ((@navbar-height - @line-height-base) / 2) 15px ((@navbar-height - @line-height-base) / 2); + color: @navbar-link-color; + text-decoration: none; + text-shadow: 0 1px 0 @navbar-background-highlight; +} +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; +} + +// Hover +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: @navbar-link-background-hover; // "transparent" is default to differentiate :hover from .active + color: @navbar-link-color-hover; + text-decoration: none; +} + +// Active nav items +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: @navbar-link-color-active; + text-decoration: none; + background-color: @navbar-link-background-active; +} + +// Navbar button for toggling navbar items in responsive layouts +// These definitions need to come after '.navbar .btn' +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-left: 5px; + margin-right: 5px; + .buttonBackground(darken(@navbar-background-highlight, 5%), darken(@navbar-background, 5%)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); +} +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + border-radius: 1px; + .box-shadow(0 1px 0 rgba(0,0,0,.25)); +} +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} + + + +// Dropdown menus +// -------------- + +// Menu position and menu carets +.navbar .nav > li > .dropdown-menu { + &:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: @dropdown-border; + position: absolute; + top: -7px; + left: 9px; + } + &:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid @dropdown-background; + position: absolute; + top: -6px; + left: 10px; + } +} +// Menu position and menu caret support for dropups via extra dropup class +.navbar-fixed-bottom .nav > li > .dropdown-menu { + &:before { + border-top: 7px solid #ccc; + border-top-color: @dropdown-border; + border-bottom: 0; + bottom: -7px; + top: auto; + } + &:after { + border-top: 6px solid @dropdown-background; + border-bottom: 0; + bottom: -6px; + top: auto; + } +} + +// Caret should match text color on hover +.navbar .nav li.dropdown > a:hover .caret { + border-top-color: @navbar-link-color-hover; + border-bottom-color: @navbar-link-color-hover; +} + +// Remove background color from open dropdown +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { + background-color: @navbar-link-background-active; + color: @navbar-link-color-active; +} +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbar-link-color; + border-bottom-color: @navbar-link-color; +} +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: @navbar-link-color-active; + border-bottom-color: @navbar-link-color-active; +} + +// Right aligned menus need alt position +.navbar .pull-right > li > .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right { + left: auto; + right: 0; + &:before { + left: auto; + right: 12px; + } + &:after { + left: auto; + right: 13px; + } + .dropdown-menu { + left: auto; + right: 100%; + margin-left: 0; + margin-right: -1px; + border-radius: 6px 0 6px 6px; + } +} + + +// Inverted navbar +// ------------------------- + +.navbar-inverse { + background-color: @navbar-inverse-background; + + .brand, + .nav > li > a { + color: @navbar-inverse-link-color; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + &:hover { + color: @navbar-inverse-link-color-hover; + } + } + + .brand { + color: @navbar-inverse-brand-color; + } + + .navbar-text { + color: @navbar-inverse-text; + } + + .nav > li > a:focus, + .nav > li > a:hover { + background-color: @navbar-inverse-link-background-hover; + color: @navbar-inverse-link-color-hover; + } + + .nav .active > a, + .nav .active > a:hover, + .nav .active > a:focus { + color: @navbar-inverse-link-color-active; + background-color: @navbar-inverse-link-background-active; + } + + // Inline text links + .navbar-link { + color: @navbar-inverse-link-color; + &:hover { + color: @navbar-inverse-link-color-hover; + } + } + + // Dividers in navbar + .divider-vertical { + border-left-color: @navbar-inverse-background; + border-right-color: @navbar-inverse-background-highlight; + } + + // Dropdowns + .nav li.dropdown.open > .dropdown-toggle, + .nav li.dropdown.active > .dropdown-toggle, + .nav li.dropdown.open.active > .dropdown-toggle { + background-color: @navbar-inverse-link-background-active; + color: @navbar-inverse-link-color-active; + } + .nav li.dropdown > a:hover .caret { + border-top-color: @navbar-inverse-link-color-active; + border-bottom-color: @navbar-inverse-link-color-active; + } + .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbar-inverse-link-color; + border-bottom-color: @navbar-inverse-link-color; + } + .nav li.dropdown.open > .dropdown-toggle .caret, + .nav li.dropdown.active > .dropdown-toggle .caret, + .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: @navbar-inverse-link-color-active; + border-bottom-color: @navbar-inverse-link-color-active; + } + + // Navbar search + .navbar-search { + .search-query { + color: #fff; + background-color: @navbar-inverse-search-background; + border-color: @navbar-inverse-search-border; + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); + .transition(none); + .placeholder(@navbar-inverse-search-placeholder-color); + + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + padding: 5px 15px; + color: @grayDark; + text-shadow: 0 1px 0 #fff; + background-color: @navbar-inverse-search-background-focus; + border: 0; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; + } + } + } + + // Navbar collapse button + .btn-navbar { + .buttonBackground(darken(@navbar-inverse-background-highlight, 5%), darken(@navbar-inverse-background, 5%)); + } + +} + +*/ + +/* // Grid system and page structure -@import "scaffolding.less"; @import "grid.less"; // Base CSS diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index c609cbeaa8..98a3bebe60 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -2,6 +2,7 @@ /* Page =================================================== */ +/* html { background-color: #fff; font-size: 62.5%; @@ -38,9 +39,10 @@ p { img { max-width: 100%; } - +*/ /* Typography =================================================== */ +/* h1, h2, h3, @@ -92,7 +94,7 @@ small { } ul, ol { - margin: 0 0 .5em; + margin: 0 0 1em; padding: 0 0 0 28px; } li ul, @@ -124,10 +126,10 @@ a { a:hover { text-decoration: underline; } +*/ - -.collapse { +/*.collapse { position: relative; height: 0; overflow: hidden; @@ -135,13 +137,13 @@ a:hover { .collapse.in { height: auto; } +*/ - -.nav { +/*.nav { margin-bottom: 0; - padding-left: 0; /* override default ul/ol */ - overflow: hidden; /* clearfix */ + padding-left: 0; + overflow: hidden; } .nav > li { display: block; @@ -154,11 +156,11 @@ a:hover { .nav > li > a:hover { text-decoration: none; background-color: #f5f5f5; -} +}*/ -.nav-list > li > a { - margin-bottom: -1px; /* tuck up the following item to make 1px border */ +/*.nav-list > li > a { + margin-bottom: -1px; // tuck up the following item to make 1px border border: 1px solid #ddd; } .nav-list > li:first-child > a { @@ -166,7 +168,7 @@ a:hover { border-top-right-radius: 5px; } .nav-list > li:last-child > a { - margin-bottom: 0; /* undo the tuck */ + margin-bottom: 0; undo the tuck border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } @@ -175,17 +177,17 @@ a:hover { color: #fff; background-color: #428bca; border-color: #428bca; - z-index: 2; /* Bring active item forward so border sits on top of next element */ -} + z-index: 2; // Bring active item forward so border sits on top of next element +}*/ -.navbar { +/*.navbar { padding: 15px; background-color: #eee; - overflow: hidden; /* clearfix */ + overflow: hidden; } .navbar .brand { @@ -199,10 +201,10 @@ a:hover { .navbar .brand:hover { text-decoration: none; background-color: #ddd; -} +}*/ -.navbar .nav { - margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */ +/*.navbar .nav { + margin-top: 15px; } .navbar .nav > li > a { line-height: 20px; @@ -213,8 +215,8 @@ a:hover { .navbar .nav > .active > a { background-color: #ddd; } - -.btn-navbar { +*/ +/*.btn-navbar { float: right; padding: 10px 12px; background-color: #ddd; @@ -230,10 +232,10 @@ a:hover { } .btn-navbar .icon-bar + .icon-bar { margin-top: 3px; -} +}*/ -.navbar-inverse { +/*.navbar-inverse { background-color: #222; } .navbar-inverse .brand { @@ -253,33 +255,33 @@ a:hover { } .navbar-inverse .btn-navbar { background-color: #444; -} +}*/ -.row { +/*.row { margin-left: -10px; margin-right: -10px; - overflow: hidden; /* clearfix */ + overflow: hidden; } [class^="span"] { padding-left: 10px; padding-right: 10px; -webkit-box-sizing: border-box; -} +}*/ /* Disable iOS/WinMobile font size changes */ -@media screen and (max-device-width: 480px) { +/*@media screen and (max-device-width: 480px) { html { -ms-text-size-adjust: none; -webkit-text-size-adjust: none; } -} +}*/ @media screen and (min-width: 480px) { @@ -399,6 +401,11 @@ body > .container { padding: 14px; margin-bottom: -1px; } +.bs-docs-example p:last-child, +.bs-docs-example ul:last-child, +.bs-docs-example ol:last-child { + margin-bottom: 0; +} .bs-docs-example + .prettyprint { margin-top: 0; } diff --git a/less/bootstrap.less b/less/bootstrap.less index c30be82cf4..8e60e41c00 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -15,12 +15,22 @@ // Reset @import "normalize.less"; +// Core CSS +@import "scaffolding.less"; +@import "type.less"; +@import "code.less"; +@import "grid.less"; + +// Components: common +@import "component-animations.less"; + +// Components: Nav +@import "navs.less"; +@import "navbar.less"; /* - // Grid system and page structure -@import "scaffolding.less"; @import "grid.less"; // Base CSS diff --git a/less/code.less b/less/code.less index cf884cb83a..1adb3efd40 100644 --- a/less/code.less +++ b/less/code.less @@ -16,9 +16,9 @@ pre { // Inline code code { padding: 2px 4px; - color: #d14; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; white-space: nowrap; } diff --git a/less/component-animations.less b/less/component-animations.less index d614263a76..b25adc932a 100644 --- a/less/component-animations.less +++ b/less/component-animations.less @@ -11,7 +11,7 @@ } } -.collapse { +/*.collapse { position: relative; height: 0; overflow: hidden; @@ -19,4 +19,14 @@ &.in { height: auto; } +}*/ + +.collapse { + position: relative; + height: 0; + overflow: hidden; + .transition(height .35s ease); +} +.collapse.in { + height: auto; } diff --git a/less/grid.less b/less/grid.less index 2e7a61d91c..2638ee0683 100644 --- a/less/grid.less +++ b/less/grid.less @@ -9,8 +9,23 @@ max-width: 940px; } +// Mobile-first defaults +.row { + margin-left: -10px; + margin-right: -10px; + .clear_float(); +} +[class^="span"] { + padding-left: 10px; + padding-right: 10px; + // Proper box-model (padding doesn't add to width) + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + // Fixed (940px) -#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width); +// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width); // Reset utility classes due to specificity [class*="span"].pull-right { diff --git a/less/mixins.less b/less/mixins.less index eeab4bbb0b..b530495548 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -425,7 +425,7 @@ .container-fixed() { margin-right: auto; margin-left: auto; - .clearfix(); + .clear_float(); } // Make a Grid diff --git a/less/navbar.less b/less/navbar.less index 70f501accb..82abf07950 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -1,7 +1,92 @@ // -// Navbars (Redux) +// Navbars // -------------------------------------------------- +// Wrapper and base class +.navbar { + padding: 15px; + background-color: #eee; + .clear_float(); +} + +// Brand/project name +.navbar .brand { + display: inline-block; + padding: 7px 15px; + font-size: 18px; + font-weight: bold; + line-height: 1; + &:hover { + text-decoration: none; + background-color: #ddd; + } +} + +// Responsive navbar button +.btn-navbar { + float: right; + padding: 10px 12px; + background-color: #ddd; + border: 0; + border-radius: 4px; + + // Bars + .icon-bar { + display: block; + width: 20px; + height: 2px; + background-color: #fff; + border-radius: 1px; + } + .icon-bar + .icon-bar { + margin-top: 3px; + } +} + +// Nav links +.navbar { + .nav { + margin-top: 15px; // space out from .navbar .brand and .btn-navbar + } + .nav > li > a { + line-height: 20px; + } + .nav > li > a:hover { + background-color: #ddd; + } + .nav > .active > a { + background-color: #ddd; + } +} + +// Inverse navbar +.navbar-inverse { + background-color: #222; + + .brand { + color: #fff; + &:hover { + background-color: #333; + } + } + .nav > li > a { + color: #fff; + } + .nav > li > a:hover { + background-color: #333; + } + .nav > .active > a { + background-color: #333; + } + .btn-navbar { + background-color: #444; + } +} + + + + +/* // COMMON STYLES // ------------- @@ -446,3 +531,5 @@ } } + +*/ diff --git a/less/navs.less b/less/navs.less index ff7fe51fa1..c8fb40d86c 100644 --- a/less/navs.less +++ b/less/navs.less @@ -8,22 +8,52 @@ .nav { margin-left: 0; - margin-bottom: @line-height-base; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol list-style: none; - .clearfix(); + .clear_float(); } .nav > li { - float: left; + display: block; } .nav > li > a { + position: relative; display: block; - padding: 8px 12px; + padding: 10px 15px; } .nav > li > a:hover { text-decoration: none; background-color: @grayLighter; } +// Lists +// ------------------------- + +.nav-list > li > a { + margin-bottom: -1px; // pull up the following link for a 1px border between + border: 1px solid #e5e5e5; +} +.nav-list > li:first-child > a { + border-top-left-radius: @border-radius-base; + border-top-right-radius: @border-radius-base; +} +.nav-list > li:last-child > a { + border-radius: 0 0 6px 6px; + border-bottom-left-radius: @border-radius-base; + border-bottom-right-radius: @border-radius-base; +} +.nav-list > .active > a, +.nav-list > .active > a:hover { + z-index: 2; // Bring active item forward so border sits on top of next element + color: #fff; + background-color: @link-color; + border-color: @link-color; +} + + + + +/* // Prevent IE8 from misplacing imgs // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 .nav > li > a > img { @@ -55,9 +85,10 @@ .nav .divider { .nav-divider(); } +*/ - +/* // Tabs // ------------------------- @@ -269,3 +300,4 @@ background-color: transparent; cursor: default; } +*/ diff --git a/less/scaffolding.less b/less/scaffolding.less index e596f26d0e..2f0189dd60 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -6,9 +6,30 @@ // Body reset // ------------------------- +html { + font-size: 62.5%; + // Touch the Mobile Magic™ + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +// Disable iOS/WinMobile font size changes +@media screen and (max-device-width: 480px) { + html { + -ms-text-size-adjust: none; + -webkit-text-size-adjust: none; + } +} + body { margin: 0; color: @text-color; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + font-size: 1.4rem; + line-height: 1.5; background-color: @body-background; } diff --git a/less/type.less b/less/type.less index 89e65fff85..39358e4e38 100644 --- a/less/type.less +++ b/less/type.less @@ -93,9 +93,10 @@ h4 small { font-size: @font-size-base; } // -------------------------------------------------- // Unordered and Ordered lists -ul, ol { +ul, +ol { padding: 0; - margin: 0 0 @line-height-base / 2 25px; + margin: 0 0 (@line-height-base / 2) 25px; } ul ul, ul ol, @@ -138,7 +139,7 @@ dd { } // Horizontal layout (like forms) .dl-horizontal { - .clearfix(); // Ensure dl clears floats if empty dd elements present + .clear_float(); // Ensure dl clears floats if empty dd elements present dt { float: left; width: @component-offset-horizontal - 20; diff --git a/less/variables.less b/less/variables.less index 47009525ca..db99e40754 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,7 +46,7 @@ @line-height-base: 20px; @headings-font-family: inherit; // empty to use BS default, @font-family-base -@headings-font-weight: bold; // instead of browser default, bold +@headings-font-weight: 500; // Component sizing