diff options
Diffstat (limited to 'less')
34 files changed, 734 insertions, 924 deletions
diff --git a/less/accordion.less b/less/accordion.less index 59765f154..0d1897831 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -16,15 +16,12 @@ } .accordion-heading { border-bottom: 0; -} -.accordion-heading .accordion-toggle { - display: block; - padding: 8px 15px; -} -// General toggle styles -.accordion-toggle { - cursor: pointer; + .accordion-toggle { + display: block; + padding: 8px 15px; + cursor: pointer; + } } // Inner needs the styles because you can't animate properly with any styles on the element diff --git a/less/alerts.less b/less/alerts.less index 24b791143..66aa6cf24 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -43,37 +43,13 @@ // ------------------------- .alert-success { - background-color: @alert-success-bg; - border-color: @alert-success-border; - color: @alert-success-text; - hr { - border-top-color: darken(@alert-success-border, 5%); - } - .alert-link { - color: darken(@alert-success-text, 10%); - } + .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text); } .alert-danger { - background-color: @alert-danger-bg; - border-color: @alert-danger-border; - color: @alert-danger-text; - hr { - border-top-color: darken(@alert-danger-border, 5%); - } - .alert-link { - color: darken(@alert-danger-text, 10%); - } + .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text); } .alert-info { - background-color: @alert-info-bg; - border-color: @alert-info-border; - color: @alert-info-text; - hr { - border-top-color: darken(@alert-info-border, 5%); - } - .alert-link { - color: darken(@alert-info-text, 10%); - } + .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text); } // Block alerts @@ -82,11 +58,12 @@ .alert-block { padding-top: 15px; padding-bottom: 15px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; + + > p, + > ul { + margin-bottom: 0; + } + p + p { + margin-top: 5px; + } } diff --git a/less/badges.less b/less/badges.less index 4750cfb75..e1a2e9c5a 100644 --- a/less/badges.less +++ b/less/badges.less @@ -35,16 +35,9 @@ a.badge { } // Quick fix for labels/badges in buttons -.btn { - .badge { - position: relative; - top: -1px; - } -} -.btn-mini { - .badge { - top: 0; - } +.btn .badge { + position: relative; + top: -1px; } // Account for counters in navs diff --git a/less/bootstrap.less b/less/bootstrap.less index c73c85c38..307f72f42 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -28,7 +28,6 @@ // Components: common @import "component-animations.less"; -@import "glyphicons.less"; @import "dropdowns.less"; @import "list-group.less"; @import "panels.less"; diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 2fe8217a3..956944a8b 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -12,15 +12,12 @@ > li { display: inline-block; text-shadow: 0 1px 0 #fff; - &:after { + &+li:before { display: inline-block; - content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space + content: "/\00a0"; // Unicode space added since inline-block means non-collapsing white-space padding: 0 5px; color: #ccc; } - &:last-child:after { - display: none; // No divider after last element - } } > .active { color: @gray-light; diff --git a/less/button-groups.less b/less/button-groups.less index f7934a328..9500fecbb 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -72,9 +72,11 @@ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:first-child > .btn:last-child, -.btn-group > .btn-group:first-child > .dropdown-toggle { - .border-right-radius(0); +.btn-group > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + .border-right-radius(0); + } } .btn-group > .btn-group:last-child > .btn:first-child { .border-left-radius(0); @@ -96,10 +98,6 @@ padding-left: 8px; padding-right: 8px; } -.btn-group > .btn-mini + .dropdown-toggle { - padding-left: 5px; - padding-right: 5px; -} .btn-group > .btn-large + .dropdown-toggle { padding-left: 12px; padding-right: 12px; @@ -138,14 +136,16 @@ margin-top: -1px; } } -.btn-group-vertical .btn:not(:first-child):not(:last-child) { - border-radius: 0; -} -.btn-group-vertical .btn:first-child { - .border-bottom-radius(0); -} -.btn-group-vertical .btn:last-child { - .border-top-radius(0); +.btn-group-vertical .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child { + .border-bottom-radius(0); + } + &:last-child { + .border-top-radius(0); + } } diff --git a/less/buttons.less b/less/buttons.less index 6280d3448..3cc7da00d 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -81,33 +81,32 @@ // ------------------------- // Make a button look and behave like a link -.btn-link, -.btn-link:active, -.btn-link[disabled], -fieldset[disabled] .btn-link { - background-color: transparent; - background-image: none; - .box-shadow(none); -} -.btn-link, -.btn-link:hover, -.btn-link:focus, -.btn-link:active { - border-color: transparent; -} .btn-link { color: @link-color; font-weight: normal; cursor: pointer; border-radius: 0; -} -.btn-link:hover, -.btn-link:focus { - color: @link-hover-color; - text-decoration: underline; - background-color: transparent; -} -.btn-link { + + &, + &:active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + background-image: none; + .box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: underline; + background-color: transparent; + } &[disabled], fieldset[disabled] & { &:hover, diff --git a/less/carousel.less b/less/carousel.less index 31f9b8aff..8834c6f7b 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -8,15 +8,10 @@ position: relative; } -// Wrap all slides, but only show the active one .carousel-inner { position: relative; overflow: hidden; width: 100%; -} - -// Immediate parent of all slides -.carousel-inner { > .item { display: none; @@ -26,7 +21,7 @@ // Account for jankitude on images > img, > a > img { - display: block; + .img-responsive(); line-height: 1; } } @@ -80,13 +75,8 @@ color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); - - // we can't have this transition here - // because webkit cancels the carousel - // animation if you trip this while - // in the middle of another animation - // ;_; - // .transition(opacity .2s linear); + // We can't have this transition here because webkit cancels the carousel + // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds &.left { @@ -130,22 +120,25 @@ left: 50%; z-index: 15; width: 100px; - margin: 0 0 0 -50px; + margin-left: -50px; + padding-left: 0; list-style: none; text-align: center; li { display: inline-block; - width: 8px; - height: 8px; - margin-left: 0; - margin-right: 0; + width: 10px; + height: 10px; + margin: 1px; text-indent: -999px; border: 1px solid #fff; - border-radius: 5px; + border-radius: 10px; cursor: pointer; } .active { + margin: 0; + width: 12px; + height: 12px; background-color: #fff; } } diff --git a/less/close.less b/less/close.less index e879da4d6..5fe23b3dc 100644 --- a/less/close.less +++ b/less/close.less @@ -19,15 +19,15 @@ cursor: pointer; .opacity(.5); } -} -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -button.close { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } } diff --git a/less/code.less b/less/code.less index f1bc0a0cd..8dd34670a 100644 --- a/less/code.less +++ b/less/code.less @@ -6,11 +6,7 @@ // Inline and block code styles code, pre { - padding: 0 3px 2px; font-family: @font-family-monospace; - font-size: (@font-size-base - 2); - color: @gray-dark; - border-radius: 4px; } // Inline code @@ -20,6 +16,7 @@ code { color: #c7254e; background-color: #f9f2f4; white-space: nowrap; + border-radius: 4px; } // Blocks of code @@ -31,8 +28,7 @@ pre { line-height: @line-height-base; word-break: break-all; word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; + color: @gray-dark; background-color: #f5f5f5; border: 1px solid #ccc; // IE8 fallback border: 1px solid rgba(0,0,0,.15); @@ -47,7 +43,6 @@ pre { code { padding: 0; color: inherit; - white-space: pre; white-space: pre-wrap; background-color: transparent; border: 0; diff --git a/less/dropdowns.less b/less/dropdowns.less index 3e0152788..8ae9dbba1 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -62,42 +62,48 @@ // Hover/Focus state // ----------- -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - text-decoration: none; - color: @dropdown-link-hover-color; - #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + } } // Active state // ------------ -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: @dropdown-link-active-color; - text-decoration: none; - outline: 0; - #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + } } // Disabled state // -------------- // Gray out text and ensure the hover/focus state remains gray -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: @gray-light; +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: @gray-light; + } } // Nuke hover/focus effects -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - .reset-filter(); - cursor: default; +.dropdown-menu > .disabled > a { + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: default; + } } // Open state for the dropdown @@ -153,64 +159,6 @@ } } -// Sub menus -// --------------------------- -.dropdown-submenu { - position: relative; -} -// Default dropdowns -.dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: -6px; - margin-left: -1px; - border-top-left-radius: 0; // Nuke the closest corner as appropriate -} -.dropdown-submenu:hover > .dropdown-menu { - display: block; -} - -// Dropups -.dropup .dropdown-submenu > .dropdown-menu { - top: auto; - bottom: 0; - margin-top: 0; - margin-bottom: -2px; - border-bottom-left-radius: 0; // Nuke the closest corner as appropriate -} - -// Caret to indicate there is a submenu -.dropdown-submenu > a:after { - display: block; - content: " "; - float: right; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: darken(@dropdown-bg, 20%); - margin-top: 5px; - margin-right: -10px; -} -.dropdown-submenu:hover > a:after { - border-left-color: @dropdown-link-hover-color; -} - -// Left aligned submenus -.dropdown-submenu.pull-left { - // Undo the float - // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. - float: none; - - // Positioning the submenu - > .dropdown-menu { - left: -100%; - margin-left: 10px; - border-top-right-radius: 0; // Remove the rounded corner here - } -} - // Tweak nav headers // --------------------------- // Increase padding from 15px to 20px on sides @@ -218,9 +166,3 @@ padding-left: 20px; padding-right: 20px; } - -// Typeahead -// --------------------------- -.typeahead { - z-index: 1051; -} diff --git a/less/forms.less b/less/forms.less index 10a315da6..add42ee9f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -72,6 +72,17 @@ input[type="color"] { outline: 0; .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); } + + // Disabled and read-only inputs + // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-bg-disabled; + } } // Reset appearance properties for textual inputs and textarea @@ -138,6 +149,16 @@ input[type="checkbox"]:focus { .tab-focus(); } +// Fix for Chrome number input +// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button. +// See https://github.com/twitter/bootstrap/issues/8350 for more. +input[type="number"] { + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + height: auto; + } +} + // Placeholder // ------------------------- @@ -184,7 +205,7 @@ textarea { // Move the options list down to align with labels .controls > .radio:first-child, .controls > .checkbox:first-child { - padding-top: 5px; // has to be padding because margin collaspes + padding-top: 5px; // has to be padding because margin collapses } */ @@ -227,6 +248,7 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { + min-height: @input-height-large; padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; @@ -240,35 +262,6 @@ input[type="color"] { } -// DISABLED STATE -// -------------- - -// Disabled and read-only inputs -// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be -// disabled if the fieldset is disabled. Due to implementation difficulty, -// we don't honor that edge case; we style them as disabled anyway. -input, -select, -textarea { - &[disabled], - &[readonly], - fieldset[disabled] & { - cursor: not-allowed; - background-color: @input-bg-disabled; - } -} -// Explicitly reset the colors here -input[type="radio"], -input[type="checkbox"] { - &[disabled], - &[readonly], - fieldset[disabled] & { - background-color: transparent; - } -} - - - // FORM FIELD FEEDBACK STATES // -------------------------- @@ -286,20 +279,6 @@ input[type="checkbox"] { .form-field-validation(@state-success-text, @state-success-text, @state-success-bg); } -// HTML5 invalid states -// Shares styles with the .control-group.error above -input:focus:invalid, -textarea:focus:invalid, -select:focus:invalid { - color: #b94a48; - border-color: #ee5f5b; - &:focus { - border-color: darken(#ee5f5b, 10%); - @shadow: 0 0 6px lighten(#ee5f5b, 20%); - .box-shadow(@shadow); - } -} - @@ -322,6 +301,7 @@ select:focus:invalid { // ------------------------- .input-group { display: table; + border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table // Undo padding and float of grid classes &.col { @@ -352,6 +332,7 @@ select:focus:invalid { .input-group-addon, .input-group-btn { width: 1%; + white-space: nowrap; vertical-align: middle; // Match the inputs } @@ -455,8 +436,8 @@ select:focus:invalid { } } -// Only right aline form labels here when the columns stop stacking -@media (min-width: 768px) { +// Only right align form labels here when the columns stop stacking +@media (min-width: @screen-tablet) { .form-horizontal .control-label { text-align: right; } diff --git a/less/glyphicons.less b/less/glyphicons.less deleted file mode 100644 index 0d935ea19..000000000 --- a/less/glyphicons.less +++ /dev/null @@ -1,200 +0,0 @@ -// -// Glyphicons -// ----------------------------------------------------------------------------- - -// About -// -// Glyphicons font-based icons require you to include all relevant font files, -// found in the Bootstrap repo under /fonts/. Files are referenced relative to -// the compiled CSS. -// -// Basic usage -// -// Since icons are fonts, they can be placed anywhere text is placed. To use, -// create an inline element with the appropriate classes, like so: -// -// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a> -// -// Use them in links, buttons, headings, and more. - - -// Import the fonts -@font-face { - font-family: 'Glyphicons Halflings'; - src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot'); - src: url('@{glyphicons-font-path}/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), - url('@{glyphicons-font-path}/glyphiconshalflings-regular.woff') format('woff'), - url('@{glyphicons-font-path}/glyphiconshalflings-regular.ttf') format('truetype'), - url('@{glyphicons-font-path}/glyphiconshalflings-regular.svg#glyphicons_halflingsregular') format('svg'); -} - -// Catchall baseclass -.glyphicon:before { - font-family: 'Glyphicons Halflings'; - font-style: normal; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; -} - -// Individual icons -.glyphicon-glass:before { content: "\e001"; } -.glyphicon-music:before { content: "\e002"; } -.glyphicon-search:before { content: "\e003"; } -.glyphicon-envelope:before { content: "\2709"; } -.glyphicon-heart:before { content: "\e005"; } -.glyphicon-star:before { content: "\e006"; } -.glyphicon-star-empty:before { content: "\e007"; } -.glyphicon-user:before { content: "\e008"; } -.glyphicon-film:before { content: "\e009"; } -.glyphicon-th-large:before { content: "\e010"; } -.glyphicon-th:before { content: "\e011"; } -.glyphicon-th-list:before { content: "\e012"; } -.glyphicon-ok:before { content: "\e013"; } -.glyphicon-remove:before { content: "\e014"; } -.glyphicon-zoom-in:before { content: "\e015"; } -.glyphicon-zoom-out:before { content: "\e016"; } -.glyphicon-off:before { content: "\e017"; } -.glyphicon-signal:before { content: "\e018"; } -.glyphicon-cog:before { content: "\e019"; } -.glyphicon-trash:before { content: "\e020"; } -.glyphicon-home:before { content: "\e021"; } -.glyphicon-file:before { content: "\e022"; } -.glyphicon-time:before { content: "\e023"; } -.glyphicon-road:before { content: "\e024"; } -.glyphicon-download-alt:before { content: "\e025"; } -.glyphicon-download:before { content: "\e026"; } -.glyphicon-upload:before { content: "\e027"; } -.glyphicon-inbox:before { content: "\e028"; } -.glyphicon-play-circle:before { content: "\e029"; } -.glyphicon-repeat:before { content: "\e030"; } -.glyphicon-refresh:before { content: "\e031"; } -.glyphicon-list-alt:before { content: "\e032"; } -.glyphicon-lock:before { content: "\e033"; } -.glyphicon-flag:before { content: "\e034"; } -.glyphicon-headphones:before { content: "\e035"; } -.glyphicon-volume-off:before { content: "\e036"; } -.glyphicon-volume-down:before { content: "\e037"; } -.glyphicon-volume-up:before { content: "\e038"; } -.glyphicon-qrcode:before { content: "\e039"; } -.glyphicon-barcode:before { content: "\e040"; } -.glyphicon-tag:before { content: "\e041"; } -.glyphicon-tags:before { content: "\e042"; } -.glyphicon-book:before { content: "\e043"; } -.glyphicon-bookmark:before { content: "\e044"; } -.glyphicon-print:before { content: "\e045"; } -.glyphicon-camera:before { content: "\e046"; } -.glyphicon-font:before { content: "\e047"; } -.glyphicon-bold:before { content: "\e048"; } -.glyphicon-italic:before { content: "\e049"; } -.glyphicon-text-height:before { content: "\e050"; } -.glyphicon-text-width:before { content: "\e051"; } -.glyphicon-align-left:before { content: "\e052"; } -.glyphicon-align-center:before { content: "\e053"; } -.glyphicon-align-right:before { content: "\e054"; } -.glyphicon-align-justify:before { content: "\e055"; } -.glyphicon-list:before { content: "\e056"; } -.glyphicon-indent-left:before { content: "\e057"; } -.glyphicon-indent-right:before { content: "\e058"; } -.glyphicon-facetime-video:before { content: "\e059"; } -.glyphicon-picture:before { content: "\e060"; } -.glyphicon-pencil:before { content: "\270f"; } -.glyphicon-map-marker:before { content: "\e062"; } -.glyphicon-adjust:before { content: "\e063"; } -.glyphicon-tint:before { content: "\e064"; } -.glyphicon-edit:before { content: "\e065"; } -.glyphicon-share:before { content: "\e066"; } -.glyphicon-check:before { content: "\e067"; } -.glyphicon-move:before { content: "\e068"; } -.glyphicon-step-backward:before { content: "\e069"; } -.glyphicon-fast-backward:before { content: "\e070"; } -.glyphicon-backward:before { content: "\e071"; } -.glyphicon-play:before { content: "\e072"; } -.glyphicon-pause:before { content: "\e073"; } -.glyphicon-stop:before { content: "\e074"; } -.glyphicon-forward:before { content: "\e075"; } -.glyphicon-fast-forward:before { content: "\e076"; } -.glyphicon-step-forward:before { content: "\e077"; } -.glyphicon-eject:before { content: "\e078"; } -.glyphicon-chevron-left:before { content: "\e079"; } -.glyphicon-chevron-right:before { content: "\e080"; } -.glyphicon-plus-sign:before { content: "\e081"; } -.glyphicon-minus-sign:before { content: "\e082"; } -.glyphicon-remove-sign:before { content: "\e083"; } -.glyphicon-ok-sign:before { content: "\e084"; } -.glyphicon-question-sign:before { content: "\e085"; } -.glyphicon-info-sign:before { content: "\e086"; } -.glyphicon-screenshot:before { content: "\e087"; } -.glyphicon-remove-circle:before { content: "\e088"; } -.glyphicon-ok-circle:before { content: "\e089"; } -.glyphicon-ban-circle:before { content: "\e090"; } -.glyphicon-arrow-left:before { content: "\e091"; } -.glyphicon-arrow-right:before { content: "\e092"; } -.glyphicon-arrow-up:before { content: "\e093"; } -.glyphicon-arrow-down:before { content: "\e094"; } -.glyphicon-share-alt:before { content: "\e095"; } -.glyphicon-resize-full:before { content: "\e096"; } -.glyphicon-resize-small:before { content: "\e097"; } -.glyphicon-plus:before { content: "\002b"; } -.glyphicon-minus:before { content: "\2212"; } -.glyphicon-asterisk:before { content: "\002a"; } -.glyphicon-exclamation-sign:before { content: "\e101"; } -.glyphicon-gift:before { content: "\e102"; } -.glyphicon-leaf:before { content: "\e103"; } -.glyphicon-fire:before { content: "\e104"; } -.glyphicon-eye-open:before { content: "\e105"; } -.glyphicon-eye-close:before { content: "\e106"; } -.glyphicon-warning-sign:before { content: "\e107"; } -.glyphicon-plane:before { content: "\e108"; } -.glyphicon-calendar:before { content: "\e109"; } -.glyphicon-random:before { content: "\e110"; } -.glyphicon-comment:before { content: "\e111"; } -.glyphicon-magnet:before { content: "\e112"; } -.glyphicon-chevron-up:before { content: "\e113"; } -.glyphicon-chevron-down:before { content: "\e114"; } -.glyphicon-retweet:before { content: "\e115"; } -.glyphicon-shopping-cart:before { content: "\e116"; } -.glyphicon-folder-close:before { content: "\e117"; } -.glyphicon-folder-open:before { content: "\e118"; } -.glyphicon-resize-vertical:before { content: "\e119"; } -.glyphicon-resize-horizontal:before { content: "\e120"; } -.glyphicon-hdd:before { content: "\e121"; } -.glyphicon-bullhorn:before { content: "\e122"; } -.glyphicon-bell:before { content: "\e123"; } -.glyphicon-certificate:before { content: "\e124"; } -.glyphicon-thumbs-up:before { content: "\e125"; } -.glyphicon-thumbs-down:before { content: "\e126"; } -.glyphicon-hand-right:before { content: "\e127"; } -.glyphicon-hand-left:before { content: "\e128"; } -.glyphicon-hand-up:before { content: "\e129"; } -.glyphicon-hand-down:before { content: "\e130"; } -.glyphicon-circle-arrow-right:before { content: "\e131"; } -.glyphicon-circle-arrow-left:before { content: "\e132"; } -.glyphicon-circle-arrow-up:before { content: "\e133"; } -.glyphicon-circle-arrow-down:before { content: "\e134"; } -.glyphicon-globe:before { content: "\e135"; } -.glyphicon-wrench:before { content: "\e136"; } -.glyphicon-tasks:before { content: "\e137"; } -.glyphicon-filter:before { content: "\e138"; } -.glyphicon-briefcase:before { content: "\e139"; } -.glyphicon-fullscreen:before { content: "\e140"; } -.glyphicon-dashboard:before { content: "\e141"; } -.glyphicon-paperclip:before { content: "\e142"; } -.glyphicon-heart-empty:before { content: "\e143"; } -.glyphicon-link:before { content: "\e144"; } -.glyphicon-phone:before { content: "\e145"; } -.glyphicon-pushpin:before { content: "\e146"; } -.glyphicon-euro:before { content: "\20ac"; } -.glyphicon-usd:before { content: "\e148"; } -.glyphicon-gbp:before { content: "\e149"; } -.glyphicon-sort:before { content: "\e150"; } -.glyphicon-sort-by-alphabet:before { content: "\e151"; } -.glyphicon-sort-by-alphabet-alt:before { content: "\e152"; } -.glyphicon-sort-by-order:before { content: "\e153"; } -.glyphicon-sort-by-order-alt:before { content: "\e154"; } -.glyphicon-sort-by-attributes:before { content: "\e155"; } -.glyphicon-sort-by-attributes-alt:before { content: "\e156"; } -.glyphicon-unchecked:before { content: "\e157"; } -.glyphicon-expand:before { content: "\e158"; } -.glyphicon-collapse:before { content: "\e159"; } -.glyphicon-collapse-top:before { content: "\e160"; } diff --git a/less/grid.less b/less/grid.less index b97d1d5c4..12803f39a 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,7 +2,6 @@ // Grid system // -------------------------------------------------- - // Set the container width, and override it for fixed navbars in media queries .container { .container-fixed(); @@ -51,9 +50,6 @@ .col-lg-11, .col-lg-12 { position: relative; - // Float and set width: 100%; for easy stacking on mobile devices - float: left; - width: 100%; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding @@ -68,6 +64,20 @@ // // Tiny device columns (smartphones) +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + float: left; +} .col-1 { width: percentage((1 / @grid-columns)); } .col-2 { width: percentage((2 / @grid-columns)); } .col-3 { width: percentage((3 / @grid-columns)); } @@ -87,6 +97,20 @@ max-width: @container-tablet; } + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + float: left; + } .col-sm-1 { width: percentage((1 / @grid-columns)); } .col-sm-2 { width: percentage((2 / @grid-columns)); } .col-sm-3 { width: percentage((3 / @grid-columns)); } @@ -100,19 +124,6 @@ .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } - // Offsets - .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } - .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } - .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } - .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } - .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } - .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } - .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } - .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } - .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } - .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } - .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } - // Push and pull columns for source order changes .col-push-1 { left: percentage((1 / @grid-columns)); } .col-push-2 { left: percentage((2 / @grid-columns)); } @@ -144,6 +155,20 @@ .container { max-width: @container-desktop; } + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + float: left; + } .col-lg-1 { width: percentage((1 / @grid-columns)); } .col-lg-2 { width: percentage((2 / @grid-columns)); } .col-lg-3 { width: percentage((3 / @grid-columns)); } @@ -156,6 +181,19 @@ .col-lg-10 { width: percentage((10/ @grid-columns)); } .col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-12 { width: 100%; } + + // Offsets + .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Large desktops and up diff --git a/less/jumbotron.less b/less/jumbotron.less index 39bec9be6..ca51b481a 100644 --- a/less/jumbotron.less +++ b/less/jumbotron.less @@ -18,13 +18,10 @@ p { line-height: 1.4; } -} -@media screen and (min-width: @screen-tablet) { - .jumbotron { + @media screen and (min-width: @screen-tablet) { padding: 50px 60px; border-radius: @border-radius-large; // Only round corners at higher resolutions - h1 { font-size: (@font-size-base * 4.5); } diff --git a/less/labels.less b/less/labels.less index 92fe8f89e..d7852d107 100644 --- a/less/labels.less +++ b/less/labels.less @@ -15,7 +15,7 @@ background-color: @gray-light; border-radius: .25em; - // Add hover effects, but only for links + // Add hover effects, but only for links &[href] { &:hover, &:focus { @@ -30,41 +30,17 @@ // Colors // Contextual variations (linked labels get darker on :hover) .label-danger { - background-color: @label-danger-bg; - &[href] { - &:hover, - &:focus { - background-color: darken(@label-danger-bg, 10%); - } - } + .label-variant(@label-danger-bg); } .label-success { - background-color: @label-success-bg; - &[href] { - &:hover, - &:focus { - background-color: darken(@label-success-bg, 10%); - } - } + .label-variant(@label-success-bg); } .label-warning { - background-color: @label-warning-bg; - &[href] { - &:hover, - &:focus { - background-color: darken(@label-warning-bg, 10%); - } - } + .label-variant(@label-warning-bg); } .label-info { - background-color: @label-info-bg; - &[href] { - &:hover, - &:focus { - background-color: darken(@label-info-bg, 10%); - } - } -}
\ No newline at end of file + .label-variant(@label-info-bg); +} diff --git a/less/list-group.less b/less/list-group.less index d812cc5f9..34718633a 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -7,7 +7,8 @@ // Easily usable on <ul>, <ol>, or <div>. .list-group { // No need to set list-style: none; since .list-group-item is block level - margin: 0 0 20px; // reset all margins because ul and ol + margin-bottom: 20px; + padding-left: 0; // reset padding because ul and ol background-color: @list-group-bg; } @@ -21,16 +22,22 @@ // Place the border on the list items and negative margin up for better styling margin-bottom: -1px; border: 1px solid @list-group-border; -} -// Round the first and last items -.list-group-item:first-child { - .border-top-radius(@border-radius-base); -} -.list-group-item:last-child { - margin-bottom: 0; - .border-bottom-radius(@border-radius-base); -} + // Round the first and last items + &:first-child { + .border-top-radius(@border-radius-base); + } + &:last-child { + margin-bottom: 0; + .border-bottom-radius(@border-radius-base); + } + + // Align badges within list items + > .badge { + float: right; + margin-right: -15px; + } +} // Custom content options // ------------------------- @@ -49,45 +56,34 @@ // Custom content within linked items a.list-group-item { + // Colorize content accordingly .list-group-item-heading { color: #333; } .list-group-item-text { color: #555; } -} -// Hover state -a.list-group-item:hover, -a.list-group-item:focus { - text-decoration: none; - background-color: @list-group-hover-bg; -} - -// Active class on item itself, not parent -a.list-group-item.active { - z-index: 2; // Place active items above their siblings for proper border styling - color: @list-group-active-color; - background-color: @list-group-active-bg; - border-color: @list-group-active-border; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; - } - .list-group-item-text { - color: lighten(@list-group-active-bg, 40%); + // Hover state + &:hover, + &:focus { + text-decoration: none; + background-color: @list-group-hover-bg; } -} -// Chevrons and badges within list items -// ------------------------- + // Active class on item itself, not parent + &.active { + z-index: 2; // Place active items above their siblings for proper border styling + color: @list-group-active-color; + background-color: @list-group-active-bg; + border-color: @list-group-active-border; -.list-group-item > .badge, -.list-group-item > .glyphicon-chevron-right { - float: right; - margin-right: -15px; -} -.list-group-item > .glyphicon + .badge { - margin-right: 5px; + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: lighten(@list-group-active-bg, 40%); + } + } } diff --git a/less/media.less b/less/media.less index 21063eb2b..5ad22cd6d 100644 --- a/less/media.less +++ b/less/media.less @@ -36,11 +36,13 @@ // Media image alignment // ------------------------- -.media > .pull-left { - margin-right: 10px; -} -.media > .pull-right { - margin-left: 10px; +.media { + > .pull-left { + margin-right: 10px; + } + > .pull-right { + margin-left: 10px; + } } @@ -49,6 +51,6 @@ // Undo default ul/ol styles .media-list { - margin-left: 0; + padding-left: 0; list-style: none; } diff --git a/less/mixins.less b/less/mixins.less index 9825e9a2d..440dcd074 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -71,7 +71,7 @@ // CSS image replacement // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 .hide-text() { - font: 0/0 a; + font: ~"0/0" a; color: transparent; text-shadow: none; background-color: transparent; @@ -165,7 +165,7 @@ // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden +// Default value is `visible`, but can be changed to `hidden` // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples .backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; @@ -331,7 +331,7 @@ // -------------------------------------------------- // Short retina mixin for setting background-image and -size -.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { +.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) { background-image: url("@{file-1x}"); @media @@ -361,6 +361,20 @@ border-bottom: 1px solid @bottom; } +// Alerts +// ------------------------- +.alert-variant(@background, @border, @text-color) { + background-color: @background; + border-color: @border; + color: @text-color; + hr { + border-top-color: darken(@border, 5%); + } + .alert-link { + color: darken(@text-color, 10%); + } +} + // Button psuedo states // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, @@ -381,6 +395,7 @@ &.disabled, &[disabled], fieldset[disabled] & { + &, &:hover, &:focus, &:active, @@ -391,6 +406,18 @@ } } +// Labels +// ------------------------- +.label-variant(@color) { + background-color: @color; + &[href] { + &:hover, + &:focus { + background-color: darken(@color, 10%); + } + } +} + // Navbar vertical align // ------------------------- // Vertically center elements in the navbar. @@ -400,7 +427,31 @@ margin-bottom: ((@navbar-height - @element-height) / 2); } +// Progress bars +// ------------------------- +.progress-bar-variant(@color) { + background-color: @color; + .progress-striped & { + #gradient > .striped(@color); + } +} +// Responsive utilities +// ------------------------- +// More easily include all the states for responsive-utilities.less. +.responsive-visibility() { + display: block !important; + tr& { display: table-row !important; } + th&, + td& { display: table-cell !important; } +} + +.responsive-invisibility() { + display: none !important; + tr& { display: none !important; } + th&, + td& { display: none !important; } +} // Grid System // ----------- @@ -433,9 +484,6 @@ // Generate the columns .make-column(@columns) { position: relative; - // Float and set width: 100%; for easy stacking on mobile devices - float: left; - width: 100%; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding @@ -444,6 +492,7 @@ // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { + float: left; width: percentage((@columns / @grid-columns)); } } @@ -472,6 +521,7 @@ // Generate form validation states .form-field-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { // Color the label text + .help-block, .control-label { color: @text-color; } @@ -491,5 +541,5 @@ color: @text-color; border-color: @border-color; background-color: @background-color; - } + } } diff --git a/less/modals.less b/less/modals.less index 144588a7b..d79121097 100644 --- a/less/modals.less +++ b/less/modals.less @@ -23,7 +23,6 @@ bottom: 0; left: 0; z-index: @zindex-modal-background; - -webkit-overflow-scrolling: touch; // When fading in the modal, animate it to slide down &.fade { diff --git a/less/navbar.less b/less/navbar.less index 59ea92dbd..7a6e80488 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -6,8 +6,8 @@ .navbar { position: relative; margin-bottom: 20px; - padding-left: 15px; - padding-right: 15px; + padding-left: @navbar-padding; + padding-right: @navbar-padding; background-color: @navbar-bg; border-radius: @border-radius-base; @@ -30,23 +30,33 @@ color: @navbar-link-color; line-height: 20px; border-radius: @border-radius-base; + &:hover, + &:focus { + color: @navbar-link-hover-color; + background-color: @navbar-link-hover-bg; + } } - > li > a:hover, - > li > a:focus { - color: @navbar-link-hover-color; - background-color: @navbar-link-hover-bg; + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-link-active-color; + background-color: @navbar-link-active-bg; + } } - > .active > a, - > .active > a:hover, - > .active > a:focus { - color: @navbar-link-active-color; - background-color: @navbar-link-active-bg; + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-link-disabled-color; + background-color: @navbar-link-disabled-bg; + } } - > .disabled > a, - > .disabled > a:hover, - > .disabled > a:focus { - color: @navbar-link-disabled-color; - background-color: @navbar-link-disabled-bg; + + // Right aligned contents + // Make them full width first so that they align properly on mobile + &.pull-right { + width: 100%; } } @@ -90,7 +100,7 @@ max-width: 200px; margin-left: auto; margin-right: auto; - padding: 15px; + padding: @navbar-padding; font-size: @font-size-large; font-weight: 500; line-height: @line-height-computed; @@ -162,22 +172,22 @@ } // Remove background color from open dropdown - > .open > a, - > .open > a:hover, - > .open > a:focus { - background-color: @navbar-link-active-bg; - color: @navbar-link-active-color; + > .open > a { + &, + &:hover, + &:focus { + background-color: @navbar-link-active-bg; + color: @navbar-link-active-color; + .caret { + border-top-color: @navbar-link-active-color; + border-bottom-color: @navbar-link-active-color; + } + } } > .dropdown > a .caret { border-top-color: @navbar-link-color; border-bottom-color: @navbar-link-color; } - > .open > a .caret, - > .open > a:hover .caret, - > .open > a:focus .caret { - border-top-color: @navbar-link-active-color; - border-bottom-color: @navbar-link-active-color; - } } // Right aligned menus need alt position @@ -211,23 +221,28 @@ .navbar-nav { > li > a { color: @navbar-inverse-link-color; + + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } } - > li > a:hover, - > li > a:focus { - color: @navbar-inverse-link-hover-color; - background-color: @navbar-inverse-link-hover-bg; - } - > .active > a, - > .active > a:hover, - > .active > a:focus { - color: @navbar-inverse-link-active-color; - background-color: @navbar-inverse-link-active-bg; + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } } - > .disabled > a, - > .disabled > a:hover, - > .disabled > a:focus { - color: @navbar-inverse-link-disabled-color; - background-color: @navbar-inverse-link-disabled-bg; + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } } } @@ -245,11 +260,13 @@ // Dropdowns .navbar-nav { - > .open > a, - > .open > a:hover, - > .open > a:focus { - background-color: @navbar-inverse-link-active-bg; - color: @navbar-inverse-link-active-color; + > .open > a { + &, + &:hover, + &:focus { + background-color: @navbar-inverse-link-active-bg; + color: @navbar-inverse-link-active-color; + } } > .dropdown > a:hover .caret { border-top-color: @navbar-inverse-link-hover-color; @@ -259,13 +276,16 @@ border-top-color: @navbar-inverse-link-color; border-bottom-color: @navbar-inverse-link-color; } - > .open > a .caret, - > .open > a:hover .caret, - > .open > a:focus .caret { - border-top-color: @navbar-inverse-link-active-color; - border-bottom-color: @navbar-inverse-link-active-color; + > .open > a { + &, + &:hover, + &:focus { + .caret { + border-top-color: @navbar-inverse-link-active-color; + border-bottom-color: @navbar-inverse-link-active-color; + } + } } - } } @@ -278,7 +298,7 @@ .navbar-brand { float: left; - margin-left: -5px; + margin-left: -(@navbar-padding); margin-right: 5px; } .navbar-nav { @@ -296,6 +316,7 @@ &.pull-right { float: right; + width: auto; } } diff --git a/less/navs.less b/less/navs.less index e5925bf63..87780a156 100644 --- a/less/navs.less +++ b/less/navs.less @@ -7,7 +7,6 @@ // -------------------------------------------------- .nav { - margin-left: 0; margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; @@ -31,13 +30,14 @@ // Disabled state sets text to gray and nukes hover/tab effects &.disabled > a { color: @gray-light; - } - &.disabled > a:hover, - &.disabled > a:focus { - color: @gray-light; - text-decoration: none; - background-color: transparent; - cursor: default; + + &:hover, + &:focus { + color: @gray-light; + text-decoration: none; + background-color: transparent; + cursor: default; + } } // Space the headers out when they follow another list item (link) @@ -47,19 +47,21 @@ } // Open dropdowns - &.open > a, - &.open > a:hover, - &.open > a:focus { - color: #fff; - background-color: @link-color; - border-color: @link-color; - .caret { - border-top-color: #fff; - border-bottom-color: #fff; + &.open > a { + &, + &:hover, + &:focus { + color: #fff; + background-color: @link-color; + border-color: @link-color; + .caret { + border-top-color: #fff; + border-bottom-color: #fff; + } } } - // Redeclare pull classes because of specifity + // Redeclare pull classes because of specificity // Todo: consider making these utilities !important to avoid this bullshit > .pull-right { float: right; @@ -99,14 +101,16 @@ } // Active state, and it's :hover to override normal :hover - &.active > a, - &.active > a:hover, - &.active > a:focus { - color: @gray; - background-color: @body-bg; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; + &.active > a { + &, + &:hover, + &:focus { + color: @gray; + background-color: @body-bg; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } } } // pulling this in mainly for less shorthand @@ -134,11 +138,13 @@ } // Active state - &.active > a, - &.active > a:hover, - &.active > a:focus { - color: #fff; - background-color: @component-active-bg; + &.active > a { + &, + &:hover, + &:focus { + color: #fff; + background-color: @component-active-bg; + } } } } @@ -218,9 +224,11 @@ .pill-content > .pill-pane { display: none; } -.tab-content > .active, -.pill-content > .active { - display: block; +.tab-content, +.pill-content { + > .active { + display: block; + } } diff --git a/less/pager.less b/less/pager.less index 0b2fcf7cb..007952da0 100644 --- a/less/pager.less +++ b/less/pager.less @@ -4,6 +4,7 @@ .pager { + padding-left: 0; margin: @line-height-computed 0; list-style: none; text-align: center; diff --git a/less/pagination.less b/less/pagination.less index 73c063be0..45c53ebce 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -3,85 +3,106 @@ // -------------------------------------------------- .pagination { display: inline-block; + padding-left: 0; margin: @line-height-computed 0; border-radius: @border-radius-base; + + > li { + display: inline; // Remove list-style and block-level defaults + > a, + > span { + float: left; // Collapse white-space + padding: 4px 12px; + line-height: @line-height-base; + text-decoration: none; + background-color: @pagination-bg; + border: 1px solid @pagination-border; + border-left-width: 0; + } + &:first-child { + > a, + > span { + border-left-width: 1px; + .border-left-radius(@border-radius-base); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius-base); + } + } + } + + > li > a:hover, + > li > a:focus, + > .active > a, + > .active > span { + background-color: @pagination-active-bg; + } + > .active > a, + > .active > span { + color: @gray-light; + cursor: default; + } + + > .disabled { + > span, + > a, + > a:hover, + > a:focus { + color: @gray-light; + background-color: @pagination-bg; + cursor: default; + } + } } -.pagination > li { - display: inline; // Remove list-style and block-level defaults -} -.pagination > li > a, -.pagination > li > span { - float: left; // Collapse white-space - padding: 4px 12px; - line-height: @line-height-base; - text-decoration: none; - background-color: @pagination-bg; - border: 1px solid @pagination-border; - border-left-width: 0; -} -.pagination > li > a:hover, -.pagination > li > a:focus, -.pagination > .active > a, -.pagination > .active > span { - background-color: @pagination-active-bg; -} -.pagination > .active > a, -.pagination > .active > span { - color: @gray-light; - cursor: default; -} -.pagination > .disabled > span, -.pagination > .disabled > a, -.pagination > .disabled > a:hover, -.pagination > .disabled > a:focus { - color: @gray-light; - background-color: @pagination-bg; - cursor: default; -} -.pagination > li:first-child > a, -.pagination > li:first-child > span { - border-left-width: 1px; - .border-left-radius(@border-radius-base); -} -.pagination > li:last-child > a, -.pagination > li:last-child > span { - .border-right-radius(@border-radius-base); -} - // Sizing // -------------------------------------------------- // Large .pagination-large { - > li > a, - > li > span { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - } - > li:first-child > a, - > li:first-child > span { - .border-left-radius(@border-radius-large); - } - > li:last-child > a, - > li:last-child > span { - .border-right-radius(@border-radius-large); + > li { + > a, + > span { + padding: @padding-large-vertical @padding-large-horizontal; + font-size: @font-size-large; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius-large); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius-large); + } + } } } // Small .pagination-small { - > li > a, - > li > span { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - } - > li:first-child > a, - > li:first-child > span { - .border-left-radius(@border-radius-small); - } - > li:last-child > a, - > li:last-child > span { - .border-right-radius(@border-radius-small); + > li { + > a, + > span { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius-small); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius-small); + } + } } } diff --git a/less/popovers.less b/less/popovers.less index b3399fa34..33488e885 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -40,10 +40,6 @@ background-color: @popover-title-bg; border-bottom: 1px solid darken(@popover-title-bg, 5%); border-radius: 5px 5px 0 0; - - &:empty { - display: none; - } } .popover-content { @@ -54,14 +50,16 @@ // // .arrow is outer, .arrow:after is inner -.popover .arrow, -.popover .arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; +.popover .arrow { + &, + &:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } } .popover .arrow { border-width: @popover-arrow-outer-width; @@ -80,6 +78,7 @@ border-top-color: @popover-arrow-outer-color; bottom: -@popover-arrow-outer-width; &:after { + content: " "; bottom: 1px; margin-left: -@popover-arrow-width; border-bottom-width: 0; @@ -94,6 +93,7 @@ border-right-color: #999; // IE8 fallback border-right-color: @popover-arrow-outer-color; &:after { + content: " "; left: 1px; bottom: -@popover-arrow-width; border-left-width: 0; @@ -108,6 +108,7 @@ border-bottom-color: @popover-arrow-outer-color; top: -@popover-arrow-outer-width; &:after { + content: " "; top: 1px; margin-left: -@popover-arrow-width; border-top-width: 0; @@ -123,6 +124,7 @@ border-left-color: #999; // IE8 fallback border-left-color: @popover-arrow-outer-color; &:after { + content: " "; right: 1px; border-right-width: 0; border-left-color: @popover-arrow-color; diff --git a/less/print.less b/less/print.less index 64c1ff9fa..7fe459a2e 100644 --- a/less/print.less +++ b/less/print.less @@ -71,13 +71,17 @@ .navbar { display: none; } - .table td, - .table th { - background-color: #fff !important; - } - .btn > .caret, - .dropup > .btn > .caret { - border-top-color: #000 !important; + .table { + td, + th { + background-color: #fff !important; + } + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } } .label { border: 1px solid #000; diff --git a/less/progress-bars.less b/less/progress-bars.less index e963fa968..59f81048f 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -87,32 +87,20 @@ // Danger (red) .progress-bar-danger { - background-color: @progress-bar-danger-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-danger-bg); - } + .progress-bar-variant(@progress-bar-danger-bg); } // Success (green) .progress-bar-success { - background-color: @progress-bar-success-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-success-bg); - } + .progress-bar-variant(@progress-bar-success-bg); } // Warning (orange) .progress-bar-warning { - background-color: @progress-bar-warning-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-warning-bg); - } + .progress-bar-variant(@progress-bar-warning-bg); } // Info (teal) .progress-bar-info { - background-color: @progress-bar-info-bg; - .progress-striped & { - #gradient > .striped(@progress-bar-info-bg); - } + .progress-bar-variant(@progress-bar-info-bg); } diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 082109e5e..38dd9639a 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -29,99 +29,91 @@ // Hide from screenreaders and browsers // Credit: HTML5 Boilerplate .hidden { - display: none; - visibility: hidden; + display: none !important; + visibility: hidden !important; } // Visibility utilities // For Phones -.visible-sm { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } +.visible-sm { + .responsive-visibility(); +} +.visible-md { + .responsive-invisibility(); +} +.visible-lg { + .responsive-invisibility(); } -.visible-md { display: none !important; } -.visible-lg { display: none !important; } -.hidden-sm { display: none !important; } +.hidden-sm { + .responsive-invisibility(); +} .hidden-md { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); } .hidden-lg { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); } // Tablets & small desktops only @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-sm { display: none !important; } + .visible-sm { + .responsive-invisibility(); + } .visible-md { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); + } + .visible-lg { + .responsive-invisibility(); } - .visible-lg { display: none !important; } .hidden-sm { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); + } + .hidden-md { + .responsive-invisibility(); } - .hidden-md { display: none !important; } .hidden-lg { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); } } // For desktops @media (min-width: @screen-desktop) { - .visible-sm { display: none !important; } - .visible-md { display: none !important; } + .visible-sm { + .responsive-invisibility(); + } + .visible-md { + .responsive-invisibility(); + } .visible-lg { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); } .hidden-sm { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); } .hidden-md { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); + } + .hidden-lg { + .responsive-invisibility(); } - .hidden-lg { display: none !important; } } // Print utilities -.visible-print { display: none !important; } +.visible-print { + .responsive-invisibility(); +} .hidden-print { } @media print { .visible-print { - display: block !important; - tr& { display: table-row !important; } - th&, - td& { display: table-cell !important; } + .responsive-visibility(); + } + .hidden-print { + .responsive-invisibility(); } - .hidden-print { display: none !important; } } diff --git a/less/scaffolding.less b/less/scaffolding.less index 9f5739710..8fc3a2360 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -27,7 +27,7 @@ body { background-color: @body-bg; } -// Reset fonts for revelant elements +// Reset fonts for relevant elements input, button, select, @@ -59,14 +59,16 @@ a:focus { // ------------------------- img { - // Responsive images (ensure images don't scale beyond their parents) - max-width: 100%; // Part 1: Set a maxium relative to the parent - 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; } +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + display: inline-block; + max-width: 100%; // Part 1: Set a maximum relative to the parent + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching +} + // Rounded corners .img-rounded { border-radius: 6px; @@ -79,3 +81,15 @@ img { .img-circle { border-radius: 500px; // crank the border-radius so it works with most reasonably sized images } + + +// Horizontal rules +// ------------------------- + +hr { + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; + border: 0; + border-top: 1px solid @hr-border; +} + diff --git a/less/tables.less b/less/tables.less index fa5fd554b..9d39ad39f 100644 --- a/less/tables.less +++ b/less/tables.less @@ -19,27 +19,32 @@ th { width: 100%; margin-bottom: @line-height-computed; // Cells - thead > tr > th, - tbody > tr > th, - thead > tr > td, - tbody > tr > td { - padding: 8px; - line-height: @line-height-base; - vertical-align: top; - border-top: 1px solid @table-border-color; + thead, + tbody, + tfoot { + > tr { + > th, + > td { + padding: 8px; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } } // Bottom align for column headings thead > tr > th { vertical-align: bottom; } // Remove top border from thead by default - caption + thead tr:first-child th, - caption + thead tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + thead tr:first-child td, - thead:first-child tr:first-child th, - thead:first-child tr:first-child td { - border-top: 0; + caption + thead, + colgroup + thead, + thead:first-child { + tr:first-child { + th, td { + border-top: 0; + } + } } // Account for multiple tbody instances tbody + tbody { @@ -58,11 +63,15 @@ th { // ------------------------------- .table-condensed { - thead > tr > th, - tbody > tr > th, - thead > tr > td, - tbody > tr > td { - padding: 4px 5px; + thead, + tbody, + tfoot { + > tr { + > th, + > td { + padding: 4px 5px; + } + } } } @@ -77,11 +86,15 @@ th { border-left: 0; border-radius: @border-radius-base; - > thead > tr > th, - > tbody > tr > th, - > thead > tr > td, - > tbody > tr > td { - border-left: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border-left: 1px solid @table-border-color; + } + } } // Prevent a double border > caption + thead > tr:first-child th, @@ -95,33 +108,31 @@ th { > tbody:first-child > tr:first-child td { border-top: 0; } - // For first th/td in the first row in the first thead or tbody - > thead:first-child > tr:first-child > th:first-child, - > tbody:first-child > tr:first-child > td:first-child, - > tbody:first-child > tr:first-child > th:first-child { - border-top-left-radius: @border-radius-base; - } - // For last th/td in the first row in the first thead or tbody - > thead:first-child > tr:first-child > th:last-child, - > tbody:first-child > tr:first-child > td:last-child, - > tbody:first-child > tr:first-child > th:last-child { - border-top-right-radius: @border-radius-base; - } - // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot - > thead:last-child > tr:last-child > th:first-child, - > tbody:last-child > tr:last-child > td:first-child, - > tbody:last-child > tr:last-child > th:first-child, - > tfoot:last-child > tr:last-child > td:first-child, - > tfoot:last-child > tr:last-child > th:first-child { - border-bottom-left-radius: @border-radius-base; - } - // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot - > thead:last-child > tr:last-child > th:last-child, - > tbody:last-child > tr:last-child > td:last-child, - > tbody:last-child > tr:last-child > th:last-child, - > tfoot:last-child > tr:last-child > td:last-child, - > tfoot:last-child > tr:last-child > th:last-child { - border-bottom-right-radius: @border-radius-base; + > thead:first-child > tr:first-child > th, + > tbody:first-child > tr:first-child > td, + > tbody:first-child > tr:first-child > th { + // For first th/td in the first row in the first thead or tbody + &:first-child{ + border-top-left-radius: @border-radius-base; + } + // For last th/td in the first row in the first thead or tbody + &:last-child{ + border-top-right-radius: @border-radius-base; + } + } + > thead:last-child > tr:last-child > th, + > tbody:last-child > tr:last-child > td, + > tbody:last-child > tr:last-child > th, + > tfoot:last-child > tr:last-child > td, + > tfoot:last-child > tr:last-child > th { + // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot + &:first-child{ + border-bottom-left-radius: @border-radius-base; + } + // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot + &:last-child{ + border-bottom-right-radius: @border-radius-base; + } } // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot @@ -133,19 +144,18 @@ th { } // Special fixes to round the left border on the first td/th - > caption + thead > tr:first-child > th:first-child, - > caption + tbody > tr:first-child > td:first-child, - > colgroup + thead > tr:first-child > th:first-child, - > colgroup + tbody > tr:first-child > td:first-child { - border-top-left-radius: @border-radius-base; - } - > caption + thead > tr:first-child > th:last-child, - > caption + tbody > tr:first-child > td:last-child, - > colgroup + thead > tr:first-child > th:last-child, - > colgroup + tbody > tr:first-child > td:last-child { - border-top-right-radius: @border-radius-base; + > caption, + > colgroup { + + thead > tr:first-child > th, + + tbody > tr:first-child > td { + &:first-child { + border-top-left-radius: @border-radius-base; + } + &:last-child { + border-top-right-radius: @border-radius-base; + } + } } - } @@ -156,9 +166,11 @@ th { // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { > tbody { - > tr:nth-child(odd) > td, - > tr:nth-child(odd) > th { - background-color: @table-bg-accent; + > tr:nth-child(odd) { + > td, + > th { + background-color: @table-bg-accent; + } } } } @@ -171,9 +183,11 @@ th { // Placed here since it has to come after the potential zebra striping .table-hover { > tbody { - > tr:hover > td, - > tr:hover > th { - background-color: @table-bg-hover; + > tr:hover { + > td, + > th { + background-color: @table-bg-hover; + } } } } @@ -184,16 +198,22 @@ th { // ----------------- // Reset default table behavior -table col[class*="col-span-"] { +table col[class^="col-"] { float: none; display: table-column; } -table td[class*="col-span-"], -table th[class*="col-span-"] { - float: none; - display: table-cell; +table { + td, + th { + &[class^="col-"] { + float: none; + display: table-cell; + } + } } + + // TABLE BACKGROUNDS // ----------------- // Exact selectors below required to override .table-striped diff --git a/less/thumbnails.less b/less/thumbnails.less index f31d78617..1f896708d 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -20,8 +20,9 @@ .thumbnail { display: block; } +.thumbnail > img, .img-thumbnail { - display: inline-block; + .img-responsive(); } // Add a hover state for linked versions only @@ -32,8 +33,6 @@ a.thumbnail:focus { // Images and captions .thumbnail > img { - display: block; - max-width: 100%; margin-left: auto; margin-right: auto; } diff --git a/less/tooltip.less b/less/tooltip.less index 9dba6f04f..790eb1cd3 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -47,6 +47,18 @@ border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-top-color: @tooltip-arrow-color; } + &.top-left .tooltip-arrow { + bottom: 0; + left: 5px; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + right: 5px; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } &.right .tooltip-arrow { top: 50%; left: 0; @@ -68,4 +80,16 @@ border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-bottom-color: @tooltip-arrow-color; } + &.bottom-left .tooltip-arrow { + top: 0; + left: 5px; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + right: 5px; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } } diff --git a/less/type.less b/less/type.less index 9a6811e3d..a9a7e189f 100644 --- a/less/type.less +++ b/less/type.less @@ -23,8 +23,6 @@ p { // Ex: 14px base font * 85% = about 12px small { font-size: 85%; } -strong { font-weight: bold; } -em { font-style: italic; } cite { font-style: normal; } // Utility classes @@ -54,6 +52,7 @@ a.text-success:focus { color: darken(@state-success-text, 10%); } 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; small { @@ -108,12 +107,10 @@ ul, ol { margin-top: 0; margin-bottom: (@line-height-computed / 2); -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; + ul, + ol{ + margin-bottom: 0; + } } // List options @@ -165,15 +162,6 @@ dd { // MISC // ---- -// Horizontal rules -hr { - margin: @line-height-computed 0; - border: 0; - border-top: 1px solid @hr-border; - border-bottom: 1px solid #fff; - border-bottom: 1px solid rgba(255,255,255,.5); -} - // Abbreviations and acronyms abbr[title], // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 diff --git a/less/variables.less b/less/variables.less index 13ba8885c..e01d3062d 100644 --- a/less/variables.less +++ b/less/variables.less @@ -53,6 +53,7 @@ @line-height-base: 1.428571429; // 20/14 @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px +@headings-font-family: @font-family-base; @headings-font-weight: 500; @headings-line-height: 1.1; @@ -128,8 +129,8 @@ @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -@input-height-large: (@line-height-computed + (@padding-large-vertical * 2) + 2); -@input-height-small: (@line-height-computed + (@padding-small-vertical * 2) + 2); +@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); +@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); // Dropdowns @@ -165,11 +166,6 @@ @zindex-modal: 1050; -// Glyphicons font path -// ------------------------- -@glyphicons-font-path: "../fonts"; - - // Navbar // ------------------------- @@ -177,6 +173,7 @@ @navbar-height: 50px; @navbar-color: #777; @navbar-bg: #eee; +@navbar-padding: floor(@grid-gutter-width / 2); // ~15px // Navbar links @navbar-link-color: #777; |