aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
Diffstat (limited to 'less')
-rw-r--r--less/badges.less12
-rw-r--r--less/breadcrumbs.less4
-rw-r--r--less/button-groups.less49
-rw-r--r--less/buttons.less15
-rw-r--r--less/carousel.less14
-rw-r--r--less/code.less16
-rw-r--r--less/dropdowns.less41
-rw-r--r--less/forms.less36
-rw-r--r--less/glyphicons.less13
-rw-r--r--less/grid.less358
-rw-r--r--less/input-groups.less2
-rw-r--r--less/jumbotron.less12
-rw-r--r--less/labels.less6
-rw-r--r--less/list-group.less50
-rw-r--r--less/mixins.less203
-rw-r--r--less/modals.less26
-rw-r--r--less/navbar.less145
-rw-r--r--less/navs.less47
-rw-r--r--less/pager.less2
-rw-r--r--less/panels.less24
-rw-r--r--less/print.less7
-rw-r--r--less/progress-bars.less20
-rw-r--r--less/responsive-utilities.less23
-rw-r--r--less/scaffolding.less2
-rw-r--r--less/tables.less44
-rw-r--r--less/theme.less3
-rw-r--r--less/thumbnails.less40
-rw-r--r--less/type.less128
-rw-r--r--less/utilities.less10
-rw-r--r--less/variables.less65
30 files changed, 672 insertions, 745 deletions
diff --git a/less/badges.less b/less/badges.less
index 0b69753ef..166b2be5e 100644
--- a/less/badges.less
+++ b/less/badges.less
@@ -22,6 +22,12 @@
&:empty {
display: none;
}
+
+ // Quick fix for badges in buttons
+ .btn & {
+ position: relative;
+ top: -1px;
+ }
}
// Hover state, but only for links
@@ -34,12 +40,6 @@ a.badge {
}
}
-// Quick fix for labels/badges in buttons
-.btn .badge {
- position: relative;
- top: -1px;
-}
-
// Account for counters in navs
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index aded518ce..5917778f4 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -4,14 +4,14 @@
.breadcrumb {
- padding: 8px 15px;
+ padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
margin-bottom: @line-height-computed;
list-style: none;
background-color: @breadcrumb-bg;
border-radius: @border-radius-base;
> li {
display: inline-block;
- &+li:before {
+ + li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
diff --git a/less/button-groups.less b/less/button-groups.less
index 43ada11d9..ef9c34e77 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -2,37 +2,6 @@
// Button groups
// --------------------------------------------------
-// Button carets
-//
-// Match the button text color to the arrow/caret for indicating dropdown-ness.
-
-.caret {
- .btn-default & {
- border-top-color: @btn-default-color;
- }
- .btn-primary &,
- .btn-success &,
- .btn-warning &,
- .btn-danger &,
- .btn-info & {
- border-top-color: #fff;
- }
-}
-.dropup {
- & .btn-default .caret {
- border-bottom-color: @btn-default-color;
- }
- .btn-primary,
- .btn-success,
- .btn-warning,
- .btn-danger,
- .btn-info {
- .caret {
- border-bottom-color: #fff;
- }
- }
-}
-
// Make the div behave like a button
.btn-group,
.btn-group-vertical {
@@ -68,7 +37,7 @@
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
- .clearfix();
+ &:extend(.clearfix all);
.btn-group {
float: left;
@@ -150,6 +119,11 @@
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+
+ // Show no shadow for `.btn-link` since it has no other button styles.
+ &.btn-link {
+ .box-shadow(none);
+ }
}
@@ -173,7 +147,8 @@
.btn-group-vertical {
> .btn,
- > .btn-group {
+ > .btn-group,
+ > .btn-group > .btn {
display: block;
float: none;
width: 100%;
@@ -182,7 +157,7 @@
// Clear floats so dropdown menus can be properly placed
> .btn-group {
- .clearfix();
+ &:extend(.clearfix all);
> .btn {
float: none;
}
@@ -233,11 +208,15 @@
width: 100%;
table-layout: fixed;
border-collapse: separate;
- .btn {
+ > .btn,
+ > .btn-group {
float: none;
display: table-cell;
width: 1%;
}
+ > .btn-group .btn {
+ width: 100%;
+ }
}
diff --git a/less/buttons.less b/less/buttons.less
index a0909606f..b728f332c 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -6,7 +6,6 @@
// Base styles
// --------------------------------------------------
-// Core styles
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
@@ -45,7 +44,6 @@
.opacity(.65);
.box-shadow(none);
}
-
}
@@ -58,6 +56,10 @@
.btn-primary {
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
+// Success appears as green
+.btn-success {
+ .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
+}
// Warning appears as orange
.btn-warning {
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
@@ -66,10 +68,6 @@
.btn-danger {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
-// Success appears as green
-.btn-success {
- .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
-}
// Info appears as blue-green
.btn-info {
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
@@ -123,13 +121,12 @@
// line-height: ensure even-numbered height of button next to large input
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
-.btn-sm,
-.btn-xs {
+.btn-sm {
// line-height: ensure proper height of button next to small input
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
.btn-xs {
- padding: 1px 5px;
+ .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
diff --git a/less/carousel.less b/less/carousel.less
index 59e4fadf7..e53365df4 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -75,7 +75,7 @@
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
- // We can't have this transition here because webkit cancels the carousel
+ // 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
@@ -91,6 +91,7 @@
// Hover/focus state
&:hover,
&:focus {
+ outline: none;
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
@@ -160,6 +161,17 @@
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
+
+ // IE8-9 hack for event handling
+ //
+ // Internet Explorer 8-9 does not support clicks on elements without a set
+ // `background-color`. We cannot use `filter` since that's not viewed as a
+ // background color by the browser. Thus, a hack is needed.
+ //
+ // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
+ // set alpha transparency for the best results possible.
+ background-color: #000 \9; // IE8
+ background-color: rgba(0,0,0,0); // IE9
}
.active {
margin: 0;
diff --git a/less/code.less b/less/code.less
index 88bcde552..3eed26c05 100644
--- a/less/code.less
+++ b/less/code.less
@@ -1,11 +1,11 @@
//
-// Code (inline and blocK)
+// Code (inline and block)
// --------------------------------------------------
// Inline and block code styles
code,
-kdb,
+kbd,
pre,
samp {
font-family: @font-family-monospace;
@@ -21,6 +21,16 @@ code {
border-radius: @border-radius-base;
}
+// User input typically entered via keyboard
+kbd {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: @kbd-color;
+ background-color: @kbd-bg;
+ border-radius: @border-radius-small;
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+}
+
// Blocks of code
pre {
display: block;
@@ -42,7 +52,7 @@ pre {
color: inherit;
white-space: pre-wrap;
background-color: transparent;
- border: 0;
+ border-radius: 0;
}
}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index e6bd18779..dde2038e3 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -10,12 +10,9 @@
height: 0;
margin-left: 2px;
vertical-align: middle;
- border-top: @caret-width-base solid @dropdown-caret-color;
+ border-top: @caret-width-base solid;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
- // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
- // we can just straight up remove this.
- border-bottom: 0 dotted;
}
// The dropdown wrapper (div)
@@ -49,6 +46,8 @@
background-clip: padding-box;
// Aligns the dropdown menu to right
+ //
+ // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
&.pull-right {
right: 0;
left: auto;
@@ -129,6 +128,25 @@
}
}
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+ left: auto; // Reset the default from `.dropdown-menu`
+ right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+ left: 0;
+ right: auto;
+}
+
// Dropdown section headers
.dropdown-header {
display: block;
@@ -145,7 +163,7 @@
right: 0;
bottom: 0;
top: 0;
- z-index: @zindex-dropdown - 10;
+ z-index: (@zindex-dropdown - 10);
}
// Right aligned dropdowns
@@ -163,10 +181,8 @@
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
- // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
- // gets fixed, restore `border-top: 0;`.
- border-top: 0 dotted;
- border-bottom: 4px solid @dropdown-caret-color;
+ border-top: 0;
+ border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
@@ -185,7 +201,12 @@
@media (min-width: @grid-float-breakpoint) {
.navbar-right {
.dropdown-menu {
- .pull-right > .dropdown-menu();
+ .dropdown-menu-right();
+ }
+ // Necessary for overrides of the default right aligned menu.
+ // Will remove come v4 in all likelihood.
+ .dropdown-menu-left {
+ .dropdown-menu-left();
}
}
}
diff --git a/less/forms.less b/less/forms.less
index cb9d30a37..f7fc5d66c 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -89,15 +89,6 @@ output {
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
- vertical-align: middle;
-}
-
-// Placeholder
-//
-// Placeholder text gets special styles because when browsers invalidate entire
-// lines if it doesn't understand a selector/
-.form-control {
- .placeholder();
}
@@ -131,7 +122,6 @@ output {
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
- vertical-align: middle;
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border;
@@ -142,6 +132,12 @@ output {
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
+ // Placeholder
+ //
+ // Placeholder text gets special styles because when browsers invalidate entire
+ // lines if it doesn't understand a selector/
+ .placeholder();
+
// Disabled and read-only inputs
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
@@ -181,10 +177,8 @@ output {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
- vertical-align: middle;
label {
display: inline;
- margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
@@ -267,7 +261,6 @@ input[type="checkbox"],
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
- padding-top: (@padding-base-vertical + 1);
}
@@ -310,6 +303,12 @@ input[type="checkbox"],
// In navbar-form, allow folks to *not* use `.form-group`
.form-control {
display: inline-block;
+ vertical-align: middle;
+ }
+
+ // Override `width: 100%;` when not within a `.form-group`
+ select.form-control {
+ width: auto;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
@@ -321,6 +320,7 @@ input[type="checkbox"],
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
+ vertical-align: middle;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
@@ -348,12 +348,22 @@ input[type="checkbox"],
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
+ // Account for padding we're adding to ensure the alignment and of help text
+ // and other content below items
+ .radio,
+ .checkbox {
+ min-height: (@line-height-computed + (@padding-base-vertical + 1));
+ }
// Make form groups behave like rows
.form-group {
.make-row();
}
+ .form-control-static {
+ padding-top: (@padding-base-vertical + 1);
+ }
+
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-sm-min) {
.control-label {
diff --git a/less/glyphicons.less b/less/glyphicons.less
index 89aad0b35..8a68f11ef 100644
--- a/less/glyphicons.less
+++ b/less/glyphicons.less
@@ -10,11 +10,11 @@
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
- src: url('@{icon-font-path}@{icon-font-name}.eot');
- src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
- url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
- url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
- url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
+ src: ~"url('@{icon-font-path}@{icon-font-name}.eot')";
+ src: ~"url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype')",
+ ~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')",
+ ~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')",
+ ~"url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg')";
}
// Catchall baseclass
@@ -27,8 +27,9 @@
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
- &:empty{
+ &:empty {
width: 1em;
}
}
diff --git a/less/grid.less b/less/grid.less
index 39f1049b6..dfae6999b 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -3,344 +3,98 @@
// --------------------------------------------------
-// Set the container width, and override it for fixed navbars in media queries
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
.container {
.container-fixed();
+
+ @media (min-width: @screen-sm) {
+ width: @container-sm;
+ }
+ @media (min-width: @screen-md) {
+ width: @container-md;
+ }
+ @media (min-width: @screen-lg-min) {
+ width: @container-lg;
+ }
+}
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+ .container-fixed();
}
-// mobile first defaults
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
.row {
.make-row();
}
+
+// Columns
+//
// Common styles for small and large grid columns
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11,
-.col-xs-12,
-.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,
-.col-md-1,
-.col-md-2,
-.col-md-3,
-.col-md-4,
-.col-md-5,
-.col-md-6,
-.col-md-7,
-.col-md-8,
-.col-md-9,
-.col-md-10,
-.col-md-11,
-.col-md-12,
-.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 {
- position: relative;
- // Prevent columns from collapsing when empty
- min-height: 1px;
- // Inner gutter via padding
- padding-left: (@grid-gutter-width / 2);
- padding-right: (@grid-gutter-width / 2);
-}
+
+.make-grid-columns();
// Extra small grid
//
-// Grid classes for extra small devices like smartphones. No offset, push, or
-// pull classes are present here due to the size of the target.
-//
-// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
-// it's full-width.
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11 {
- float: left;
-}
-.col-xs-1 { width: percentage((1 / @grid-columns)); }
-.col-xs-2 { width: percentage((2 / @grid-columns)); }
-.col-xs-3 { width: percentage((3 / @grid-columns)); }
-.col-xs-4 { width: percentage((4 / @grid-columns)); }
-.col-xs-5 { width: percentage((5 / @grid-columns)); }
-.col-xs-6 { width: percentage((6 / @grid-columns)); }
-.col-xs-7 { width: percentage((7 / @grid-columns)); }
-.col-xs-8 { width: percentage((8 / @grid-columns)); }
-.col-xs-9 { width: percentage((9 / @grid-columns)); }
-.col-xs-10 { width: percentage((10/ @grid-columns)); }
-.col-xs-11 { width: percentage((11/ @grid-columns)); }
-.col-xs-12 { width: 100%; }
+.make-grid-columns-float(xs);
+.make-grid(@grid-columns, xs, width);
+.make-grid(@grid-columns, xs, pull);
+.make-grid(@grid-columns, xs, push);
+.make-grid(@grid-columns, xs, offset);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
-//
-// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
-// it's full-width.
@media (min-width: @screen-sm-min) {
- .container {
- width: @container-sm;
- }
-
- .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 {
- 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)); }
- .col-sm-4 { width: percentage((4 / @grid-columns)); }
- .col-sm-5 { width: percentage((5 / @grid-columns)); }
- .col-sm-6 { width: percentage((6 / @grid-columns)); }
- .col-sm-7 { width: percentage((7 / @grid-columns)); }
- .col-sm-8 { width: percentage((8 / @grid-columns)); }
- .col-sm-9 { width: percentage((9 / @grid-columns)); }
- .col-sm-10 { width: percentage((10/ @grid-columns)); }
- .col-sm-11 { width: percentage((11/ @grid-columns)); }
- .col-sm-12 { width: 100%; }
-
- // Push and pull columns for source order changes
- .col-sm-push-1 { left: percentage((1 / @grid-columns)); }
- .col-sm-push-2 { left: percentage((2 / @grid-columns)); }
- .col-sm-push-3 { left: percentage((3 / @grid-columns)); }
- .col-sm-push-4 { left: percentage((4 / @grid-columns)); }
- .col-sm-push-5 { left: percentage((5 / @grid-columns)); }
- .col-sm-push-6 { left: percentage((6 / @grid-columns)); }
- .col-sm-push-7 { left: percentage((7 / @grid-columns)); }
- .col-sm-push-8 { left: percentage((8 / @grid-columns)); }
- .col-sm-push-9 { left: percentage((9 / @grid-columns)); }
- .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
- .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
-
- .col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
- .col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
- .col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
- .col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
- .col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
- .col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
- .col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
- .col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
- .col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
- .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
- .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
-
- // Offsets
- .col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
- .col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
- .col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
- .col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
- .col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
- .col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
- .col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
- .col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
- .col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
- .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
- .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+ .make-grid-columns-float(sm);
+ .make-grid(@grid-columns, sm, width);
+ .make-grid(@grid-columns, sm, pull);
+ .make-grid(@grid-columns, sm, push);
+ .make-grid(@grid-columns, sm, offset);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
-//
-// Note that `.col-md-12` doesn't get floated on purpose--there's no need since
-// it's full-width.
@media (min-width: @screen-md-min) {
- .container {
- width: @container-md;
- }
- .col-md-1,
- .col-md-2,
- .col-md-3,
- .col-md-4,
- .col-md-5,
- .col-md-6,
- .col-md-7,
- .col-md-8,
- .col-md-9,
- .col-md-10,
- .col-md-11 {
- float: left;
- }
- .col-md-1 { width: percentage((1 / @grid-columns)); }
- .col-md-2 { width: percentage((2 / @grid-columns)); }
- .col-md-3 { width: percentage((3 / @grid-columns)); }
- .col-md-4 { width: percentage((4 / @grid-columns)); }
- .col-md-5 { width: percentage((5 / @grid-columns)); }
- .col-md-6 { width: percentage((6 / @grid-columns)); }
- .col-md-7 { width: percentage((7 / @grid-columns)); }
- .col-md-8 { width: percentage((8 / @grid-columns)); }
- .col-md-9 { width: percentage((9 / @grid-columns)); }
- .col-md-10 { width: percentage((10/ @grid-columns)); }
- .col-md-11 { width: percentage((11/ @grid-columns)); }
- .col-md-12 { width: 100%; }
-
- // Push and pull columns for source order changes
- .col-md-push-0 { left: auto; }
- .col-md-push-1 { left: percentage((1 / @grid-columns)); }
- .col-md-push-2 { left: percentage((2 / @grid-columns)); }
- .col-md-push-3 { left: percentage((3 / @grid-columns)); }
- .col-md-push-4 { left: percentage((4 / @grid-columns)); }
- .col-md-push-5 { left: percentage((5 / @grid-columns)); }
- .col-md-push-6 { left: percentage((6 / @grid-columns)); }
- .col-md-push-7 { left: percentage((7 / @grid-columns)); }
- .col-md-push-8 { left: percentage((8 / @grid-columns)); }
- .col-md-push-9 { left: percentage((9 / @grid-columns)); }
- .col-md-push-10 { left: percentage((10/ @grid-columns)); }
- .col-md-push-11 { left: percentage((11/ @grid-columns)); }
-
- .col-md-pull-0 { right: auto; }
- .col-md-pull-1 { right: percentage((1 / @grid-columns)); }
- .col-md-pull-2 { right: percentage((2 / @grid-columns)); }
- .col-md-pull-3 { right: percentage((3 / @grid-columns)); }
- .col-md-pull-4 { right: percentage((4 / @grid-columns)); }
- .col-md-pull-5 { right: percentage((5 / @grid-columns)); }
- .col-md-pull-6 { right: percentage((6 / @grid-columns)); }
- .col-md-pull-7 { right: percentage((7 / @grid-columns)); }
- .col-md-pull-8 { right: percentage((8 / @grid-columns)); }
- .col-md-pull-9 { right: percentage((9 / @grid-columns)); }
- .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
- .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
-
- // Offsets
- .col-md-offset-0 { margin-left: 0; }
- .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
- .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
- .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
- .col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
- .col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
- .col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
- .col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
- .col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
- .col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
- .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
- .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+ .make-grid-columns-float(md);
+ .make-grid(@grid-columns, md, width);
+ .make-grid(@grid-columns, md, pull);
+ .make-grid(@grid-columns, md, push);
+ .make-grid(@grid-columns, md, offset);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
-//
-// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
-// it's full-width.
@media (min-width: @screen-lg-min) {
- .container {
- width: @container-lg;
- }
-
- .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 {
- 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)); }
- .col-lg-4 { width: percentage((4 / @grid-columns)); }
- .col-lg-5 { width: percentage((5 / @grid-columns)); }
- .col-lg-6 { width: percentage((6 / @grid-columns)); }
- .col-lg-7 { width: percentage((7 / @grid-columns)); }
- .col-lg-8 { width: percentage((8 / @grid-columns)); }
- .col-lg-9 { width: percentage((9 / @grid-columns)); }
- .col-lg-10 { width: percentage((10/ @grid-columns)); }
- .col-lg-11 { width: percentage((11/ @grid-columns)); }
- .col-lg-12 { width: 100%; }
-
- // Push and pull columns for source order changes
- .col-lg-push-0 { left: auto; }
- .col-lg-push-1 { left: percentage((1 / @grid-columns)); }
- .col-lg-push-2 { left: percentage((2 / @grid-columns)); }
- .col-lg-push-3 { left: percentage((3 / @grid-columns)); }
- .col-lg-push-4 { left: percentage((4 / @grid-columns)); }
- .col-lg-push-5 { left: percentage((5 / @grid-columns)); }
- .col-lg-push-6 { left: percentage((6 / @grid-columns)); }
- .col-lg-push-7 { left: percentage((7 / @grid-columns)); }
- .col-lg-push-8 { left: percentage((8 / @grid-columns)); }
- .col-lg-push-9 { left: percentage((9 / @grid-columns)); }
- .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
- .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
-
- .col-lg-pull-0 { right: auto; }
- .col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
- .col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
- .col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
- .col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
- .col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
- .col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
- .col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
- .col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
- .col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
- .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
- .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
-
- // Offsets
- .col-lg-offset-0 { margin-left: 0; }
- .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
- .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
- .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
- .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
- .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
- .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
- .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
- .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
- .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
- .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
- .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+ .make-grid-columns-float(lg);
+ .make-grid(@grid-columns, lg, width);
+ .make-grid(@grid-columns, lg, pull);
+ .make-grid(@grid-columns, lg, push);
+ .make-grid(@grid-columns, lg, offset);
}
diff --git a/less/input-groups.less b/less/input-groups.less
index 8516a79e9..d19c4c64a 100644
--- a/less/input-groups.less
+++ b/less/input-groups.less
@@ -10,7 +10,7 @@
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 {
+ &[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
diff --git a/less/jumbotron.less b/less/jumbotron.less
index 3a2365f05..0460b69d4 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -6,13 +6,14 @@
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
- font-size: (@font-size-base * 1.5);
+ font-size: @jumbotron-font-size;
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-color;
background-color: @jumbotron-bg;
- h1 {
+ h1,
+ .h1 {
line-height: 1;
color: @jumbotron-heading-color;
}
@@ -24,6 +25,10 @@
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}
+ .container {
+ max-width: 100%;
+ }
+
@media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6);
@@ -33,7 +38,8 @@
padding-right: (@jumbotron-padding * 2);
}
- h1 {
+ h1,
+ .h1 {
font-size: (@font-size-base * 4.5);
}
}
diff --git a/less/labels.less b/less/labels.less
index cad5ce516..5db1ed12c 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -28,6 +28,12 @@
&:empty {
display: none;
}
+
+ // Quick fix for labels in buttons
+ .btn & {
+ position: relative;
+ top: -1px;
+ }
}
// Colors
diff --git a/less/list-group.less b/less/list-group.less
index 46cda4085..35fff05d4 100644
--- a/less/list-group.less
+++ b/less/list-group.less
@@ -2,17 +2,21 @@
// List groups
// --------------------------------------------------
+
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
+
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
}
+
// Individual list items
-// -------------------------
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
position: relative;
@@ -39,21 +43,26 @@
> .badge + .badge {
margin-right: 5px;
}
+}
- // Linked list items
- a& {
- color: @list-group-link-color;
- .list-group-item-heading {
- color: @list-group-link-heading-color;
- }
+// Linked list items
+//
+// Use anchor elements instead of `li`s or `div`s to create linked list items.
+// Includes an extra `.active` modifier class for showing selected items.
- // Hover state
- &:hover,
- &:focus {
- text-decoration: none;
- background-color: @list-group-hover-bg;
- }
+a.list-group-item {
+ color: @list-group-link-color;
+
+ .list-group-item-heading {
+ color: @list-group-link-heading-color;
+ }
+
+ // Hover state
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: @list-group-hover-bg;
}
// Active class on item itself, not parent
@@ -75,8 +84,21 @@
}
}
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+.list-group-item-variant(success; @state-success-bg; @state-success-text);
+.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
+.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
+.list-group-item-variant(info; @state-info-bg; @state-info-text);
+
+
// Custom content options
-// -------------------------
+//
+// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
margin-top: 0;
diff --git a/less/mixins.less b/less/mixins.less
index 6e0e399af..dbe9ed4a7 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -19,19 +19,19 @@
.clearfix() {
&:before,
&:after {
- content: " "; /* 1 */
- display: table; /* 2 */
+ content: " "; // 1
+ display: table; // 2
}
&:after {
clear: both;
}
}
-// Webkit-style focus
+// WebKit-style focus
.tab-focus() {
// Default
- outline: thin dotted #333;
- // Webkit
+ outline: thin dotted;
+ // WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@@ -55,7 +55,8 @@
// Placeholder text
.placeholder(@color: @input-color-placeholder) {
&:-moz-placeholder { color: @color; } // Firefox 4-18
- &::-moz-placeholder { color: @color; } // Firefox 19+
+ &::-moz-placeholder { color: @color; // Firefox 19+
+ opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
@@ -87,11 +88,7 @@
}
// New mixin to use as of v3.0.1
.text-hide() {
- font: ~"0/0" a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
+ .hide-text();
}
@@ -150,17 +147,17 @@
// Transformations
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
- -ms-transform: rotate(@degrees); // IE9+
+ -ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
-.scale(@ratio) {
- -webkit-transform: scale(@ratio);
- -ms-transform: scale(@ratio); // IE9+
- transform: scale(@ratio);
+.scale(@ratio; @ratio-y...) {
+ -webkit-transform: scale(@ratio, @ratio-y);
+ -ms-transform: scale(@ratio, @ratio-y); // IE9 only
+ transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
- -ms-transform: translate(@x, @y); // IE9+
+ -ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
@@ -175,12 +172,12 @@
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
- -ms-transform: rotateX(@degrees); // IE9+
+ -ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
- -ms-transform: rotateY(@degrees); // IE9+
+ -ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
@@ -193,17 +190,22 @@
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
-.transform-origin(@origin){
+.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
+ -ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
+// Animations
+.animation(@animation) {
+ -webkit-animation: @animation;
+ animation: @animation;
+}
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// 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;
-moz-backface-visibility: @visibility;
@@ -273,10 +275,8 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
- background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
- background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
- background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
+ background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
+ background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
@@ -286,47 +286,36 @@
// Creates two color stops, start and end, by specifying a color and position for each color stop.
// Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
- background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
- background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
- background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
+ background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
background-repeat: repeat-x;
- background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
- background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
- background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
+ background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
- background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
- background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555; @outer-color: #333) {
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
- background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
- background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
- background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
}
}
@@ -365,7 +354,7 @@
//
// Keep images from scaling beyond the width of their parents.
-.img-responsive(@display: block;) {
+.img-responsive(@display: block) {
display: @display;
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
@@ -387,12 +376,14 @@
// Panels
// -------------------------
-.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
+.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
border-color: @border;
+
& > .panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+
+ .panel-collapse .panel-body {
border-top-color: @border;
}
@@ -410,6 +401,7 @@
background-color: @background;
border-color: @border;
color: @text-color;
+
hr {
border-top-color: darken(@border, 5%);
}
@@ -420,7 +412,7 @@
// Tables
// -------------------------
-.table-row-variant(@state; @background; @border) {
+.table-row-variant(@state; @background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
@@ -431,7 +423,6 @@
&.@{state} > td,
&.@{state} > th {
background-color: @background;
- border-color: @border;
}
}
@@ -443,7 +434,34 @@
&.@{state}:hover > td,
&.@{state}:hover > th {
background-color: darken(@background, 5%);
- border-color: darken(@border, 5%);
+ }
+ }
+}
+
+// List Groups
+// -------------------------
+.list-group-item-variant(@state; @background; @color) {
+ .list-group-item-@{state} {
+ color: @color;
+ background-color: @background;
+
+ a& {
+ color: @color;
+
+ .list-group-item-heading { color: inherit; }
+
+ &:hover,
+ &:focus {
+ color: @color;
+ background-color: darken(@background, 5%);
+ }
+ &.active,
+ &.active:hover,
+ &.active:focus {
+ color: #fff;
+ background-color: @color;
+ border-color: @color;
+ }
}
}
}
@@ -483,6 +501,11 @@
border-color: @border;
}
}
+
+ .badge {
+ color: @background;
+ background-color: @color;
+ }
}
// Button sizes
@@ -553,9 +576,10 @@
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
- tr& { display: table-row !important; }
+ table& { display: table; }
+ tr& { display: table-row !important; }
th&,
- td& { display: table-cell !important; }
+ td& { display: table-cell !important; }
}
.responsive-invisibility() {
@@ -565,6 +589,7 @@
td& { display: none !important; }
}
+
// Grid System
// -----------
@@ -574,14 +599,14 @@
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
- .clearfix();
+ &:extend(.clearfix all);
}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
- .clearfix();
+ &:extend(.clearfix all);
}
// Generate the extra small columns
@@ -696,6 +721,80 @@
}
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `@grid-columns`.
+
+.make-grid-columns() {
+ // Common styles for all sizes of grid columns, widths 1-12
+ .col(@index) when (@index = 1) { // initial
+ @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+ .col((@index + 1), @item);
+ }
+ .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
+ @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+ .col((@index + 1), ~"@{list}, @{item}");
+ }
+ .col(@index, @list) when (@index > @grid-columns) { // terminal
+ @{list} {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: (@grid-gutter-width / 2);
+ padding-right: (@grid-gutter-width / 2);
+ }
+ }
+ .col(1); // kickstart it
+}
+
+.make-grid-columns-float(@class) {
+ .col(@index) when (@index = 1) { // initial
+ @item: ~".col-@{class}-@{index}";
+ .col((@index + 1), @item);
+ }
+ .col(@index, @list) when (@index =< @grid-columns) { // general
+ @item: ~".col-@{class}-@{index}";
+ .col((@index + 1), ~"@{list}, @{item}");
+ }
+ .col(@index, @list) when (@index > @grid-columns) { // terminal
+ @{list} {
+ float: left;
+ }
+ }
+ .col(1); // kickstart it
+}
+
+.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
+ .col-@{class}-@{index} {
+ width: percentage((@index / @grid-columns));
+ }
+}
+.calc-grid(@index, @class, @type) when (@type = push) {
+ .col-@{class}-push-@{index} {
+ left: percentage((@index / @grid-columns));
+ }
+}
+.calc-grid(@index, @class, @type) when (@type = pull) {
+ .col-@{class}-pull-@{index} {
+ right: percentage((@index / @grid-columns));
+ }
+}
+.calc-grid(@index, @class, @type) when (@type = offset) {
+ .col-@{class}-offset-@{index} {
+ margin-left: percentage((@index / @grid-columns));
+ }
+}
+
+// Basic looping in LESS
+.make-grid(@index, @class, @type) when (@index >= 0) {
+ .calc-grid(@index, @class, @type);
+ // next iteration
+ .make-grid((@index - 1), @class, @type);
+}
+
+
// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
@@ -704,7 +803,11 @@
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text
.help-block,
- .control-label {
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
diff --git a/less/modals.less b/less/modals.less
index 8f727308a..40c491486 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -10,14 +10,6 @@
// Kill the scroll on the body
.modal-open {
overflow: hidden;
-
-
- // Account for hiding of scrollbar
- body&,
- .navbar-fixed-top,
- .navbar-fixed-bottom {
- margin-right: 15px
- }
}
// Container that the modal scrolls within
@@ -30,8 +22,11 @@
right: 0;
bottom: 0;
left: 0;
+ z-index: @zindex-modal;
+
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
+ // https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
- z-index: @zindex-modal-background;
// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
@@ -43,11 +38,9 @@
// Shell div to position the modal with bottom padding
.modal-dialog {
- margin-left: auto;
- margin-right: auto;
+ position: relative;
width: auto;
- padding: 10px;
- z-index: (@zindex-modal-background + 10);
+ margin: 10px;
}
// Actual modal
@@ -70,7 +63,7 @@
right: 0;
bottom: 0;
left: 0;
- z-index: (@zindex-modal-background - 10);
+ z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
@@ -108,7 +101,7 @@
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
text-align: right; // right align buttons
border-top: 1px solid @modal-footer-border-color;
- .clearfix(); // clear it in case folks use .pull-* classes on buttons
+ &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
@@ -130,8 +123,7 @@
.modal-dialog {
width: 600px;
- padding-top: 30px;
- padding-bottom: 30px;
+ margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
diff --git a/less/navbar.less b/less/navbar.less
index d054b400d..d96f85e30 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -10,13 +10,12 @@
.navbar {
position: relative;
- z-index: @zindex-navbar;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
// Prevent floats from breaking the navbar
- .clearfix();
+ &:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
@@ -30,7 +29,7 @@
// styling of responsive aspects.
.navbar-header {
- .clearfix();
+ &:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
float: left;
@@ -55,7 +54,7 @@
padding-left: @navbar-padding-horizontal;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
- .clearfix();
+ &:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
&.in {
@@ -78,15 +77,13 @@
overflow-y: visible;
}
- // Account for first and last children spacing
- .navbar-nav.navbar-left:first-child {
- margin-left: -@navbar-padding-horizontal;
- }
- .navbar-nav.navbar-right:last-child {
- margin-right: -@navbar-padding-horizontal;
- }
- .navbar-text:last-child {
- margin-right: 0;
+ // Undo the collapse side padding for navbars with containers to ensure
+ // alignment of right-aligned contents.
+ .navbar-fixed-top &,
+ .navbar-static-top &,
+ .navbar-fixed-bottom & {
+ padding-left: 0;
+ padding-right: 0;
}
}
}
@@ -96,14 +93,17 @@
//
// When a container is present, change the behavior of the header and collapse.
-.container > .navbar-header,
-.container > .navbar-collapse {
- margin-right: -@navbar-padding-horizontal;
- margin-left: -@navbar-padding-horizontal;
+.container,
+.container-fluid {
+ > .navbar-header,
+ > .navbar-collapse {
+ margin-right: -@navbar-padding-horizontal;
+ margin-left: -@navbar-padding-horizontal;
- @media (min-width: @grid-float-breakpoint) {
- margin-right: 0;
- margin-left: 0;
+ @media (min-width: @grid-float-breakpoint) {
+ margin-right: 0;
+ margin-left: 0;
+ }
}
}
@@ -111,12 +111,14 @@
//
// Navbar alignment options
//
-// Display the navbar across the entirity of the page or fixed it to the top or
+// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
+ z-index: @zindex-navbar;
border-width: 0 0 1px;
+
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
@@ -128,7 +130,7 @@
position: fixed;
right: 0;
left: 0;
- border-width: 0 0 1px;
+ z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
@@ -136,12 +138,13 @@
}
}
.navbar-fixed-top {
- z-index: @zindex-navbar-fixed;
top: 0;
+ border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
+ border-width: 1px 0 0;
}
@@ -152,13 +155,22 @@
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
+
&:hover,
&:focus {
text-decoration: none;
}
+ // Prevent Glyphicons from increasing height of navbar
+ > .glyphicon {
+ float: left;
+ margin-top: -2px;
+ margin-right: 5px;
+ }
+
@media (min-width: @grid-float-breakpoint) {
- .navbar > .container & {
+ .navbar > .container &,
+ .navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
@@ -177,6 +189,7 @@
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
border-radius: @border-radius-base;
@@ -211,7 +224,7 @@
line-height: @line-height-computed;
}
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
@@ -243,18 +256,21 @@
> li {
float: left;
> a {
- padding-top: ((@navbar-height - @line-height-computed) / 2);
- padding-bottom: ((@navbar-height - @line-height-computed) / 2);
+ padding-top: @navbar-padding-vertical;
+ padding-bottom: @navbar-padding-vertical;
}
}
- }
+ &.navbar-right:last-child {
+ margin-right: -@navbar-padding-horizontal;
+ }
+ }
}
// Component alignment
//
-// Repurpose the pull utilities as their own navbar utilities to avoid specifity
+// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@@ -282,7 +298,7 @@
.form-inline();
.form-group {
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
}
}
@@ -299,6 +315,11 @@
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
+
+ // Outdent the form if last child to line up with content down the page
+ &.navbar-right:last-child {
+ margin-right: -@navbar-padding-horizontal;
+ }
}
}
@@ -315,13 +336,6 @@
.border-bottom-radius(0);
}
-// Right aligned menus need alt position
-.navbar-nav.pull-right > li > .dropdown-menu,
-.navbar-nav > li > .dropdown-menu.pull-right {
- left: auto;
- right: 0;
-}
-
// Buttons in navbars
//
@@ -329,6 +343,13 @@
.navbar-btn {
.navbar-vertical-align(@input-height-base);
+
+ &.btn-sm {
+ .navbar-vertical-align(@input-height-small);
+ }
+ &.btn-xs {
+ .navbar-vertical-align(22);
+ }
}
@@ -337,12 +358,17 @@
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
- float: left;
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
+ float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
+
+ // Outdent the form if last child to line up with content down the page
+ &.navbar-right:last-child {
+ margin-right: 0;
+ }
}
}
@@ -411,15 +437,8 @@
border-color: @navbar-default-border;
}
- // Dropdown menu items and carets
+ // Dropdown menu items
.navbar-nav {
- // Caret should match text color on hover
- > .dropdown > a:hover .caret,
- > .dropdown > a:focus .caret {
- border-top-color: @navbar-default-link-hover-color;
- border-bottom-color: @navbar-default-link-hover-color;
- }
-
// Remove background color from open dropdown
> .open > a {
&,
@@ -427,19 +446,10 @@
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
- .caret {
- border-top-color: @navbar-default-link-active-color;
- border-bottom-color: @navbar-default-link-active-color;
- }
}
}
- > .dropdown > a .caret {
- border-top-color: @navbar-default-link-color;
- border-bottom-color: @navbar-default-link-color;
- }
-
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
@@ -558,31 +568,16 @@
color: @navbar-inverse-link-active-color;
}
}
- > .dropdown > a:hover .caret {
- border-top-color: @navbar-inverse-link-hover-color;
- border-bottom-color: @navbar-inverse-link-hover-color;
- }
- > .dropdown > a .caret {
- border-top-color: @navbar-inverse-link-color;
- border-bottom-color: @navbar-inverse-link-color;
- }
- > .open > a {
- &,
- &:hover,
- &:focus {
- .caret {
- border-top-color: @navbar-inverse-link-active-color;
- border-bottom-color: @navbar-inverse-link-active-color;
- }
- }
- }
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border-color: @navbar-inverse-border;
}
+ .divider {
+ background-color: @navbar-inverse-border;
+ }
> li > a {
color: @navbar-inverse-link-color;
&:hover,
diff --git a/less/navs.less b/less/navs.less
index 3b6a43a7d..e4ac14459 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -10,7 +10,7 @@
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
- .clearfix();
+ &:extend(.clearfix all);
> li {
position: relative;
@@ -48,11 +48,6 @@
&:focus {
background-color: @nav-link-hover-bg;
border-color: @link-color;
-
- .caret {
- border-top-color: @link-hover-color;
- border-bottom-color: @link-hover-color;
- }
}
}
@@ -138,11 +133,6 @@
&:focus {
color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg;
-
- .caret {
- border-top-color: @nav-pills-active-link-hover-color;
- border-bottom-color: @nav-pills-active-link-hover-color;
- }
}
}
}
@@ -178,6 +168,11 @@
}
}
+ > .dropdown .dropdown-menu {
+ top: auto;
+ left: auto;
+ }
+
@media (min-width: @screen-sm-min) {
> li {
display: table-cell;
@@ -190,6 +185,8 @@
}
// Move borders to anchors instead of bottom of list
+//
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
border-bottom: 0;
@@ -222,38 +219,20 @@
// Tabbable tabs
// -------------------------
-// Clear any floats
-.tabbable {
- .clearfix();
-}
-
-// Show/hide tabbable areas
-.tab-content > .tab-pane,
-.pill-content > .pill-pane {
- display: none;
-}
-.tab-content,
-.pill-content {
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+ > .tab-pane {
+ display: none;
+ }
> .active {
display: block;
}
}
-
// Dropdowns
// -------------------------
-// Make dropdown carets use link color in navs
-.nav .caret {
- border-top-color: @link-color;
- border-bottom-color: @link-color;
-}
-.nav a:hover .caret {
- border-top-color: @link-hover-color;
- border-bottom-color: @link-hover-color;
-}
-
// Specific dropdowns
.nav-tabs .dropdown-menu {
// make dropdown border overlap tab border
diff --git a/less/pager.less b/less/pager.less
index 16993ddc8..5205f0ee5 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -8,7 +8,7 @@
margin: @line-height-computed 0;
list-style: none;
text-align: center;
- .clearfix();
+ &:extend(.clearfix all);
li {
display: inline;
> a,
diff --git a/less/panels.less b/less/panels.less
index bdbeb5c07..ad133ad21 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -14,8 +14,8 @@
// Panel contents
.panel-body {
- padding: 15px;
- .clearfix();
+ padding: @panel-body-padding;
+ &:extend(.clearfix all);
}
@@ -57,13 +57,17 @@
.panel {
> .table,
- > .table-responsive {
+ > .table-responsive > .table {
margin-bottom: 0;
}
> .panel-body + .table,
> .panel-body + .table-responsive {
border-top: 1px solid @table-border-color;
}
+ > .table > tbody:first-child th,
+ > .table > tbody:first-child td {
+ border-top: 0;
+ }
> .table-bordered,
> .table-responsive > .table-bordered {
border: 0;
@@ -87,6 +91,10 @@
}
}
}
+ > .table-responsive {
+ border: 0;
+ margin-bottom: 0;
+ }
}
@@ -94,7 +102,11 @@
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
- .border-top-radius(@panel-border-radius - 1);
+ .border-top-radius((@panel-border-radius - 1));
+
+ > .dropdown .dropdown-toggle {
+ color: inherit;
+ }
}
// Within heading, strip any `h*` tag of it's default margins for spacing.
@@ -102,6 +114,8 @@
margin-top: 0;
margin-bottom: 0;
font-size: ceil((@font-size-base * 1.125));
+ color: inherit;
+
> a {
color: inherit;
}
@@ -112,7 +126,7 @@
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-inner-border;
- .border-bottom-radius(@panel-border-radius - 1);
+ .border-bottom-radius((@panel-border-radius - 1));
}
diff --git a/less/print.less b/less/print.less
index 1e4bffe3f..07277a3ca 100644
--- a/less/print.less
+++ b/less/print.less
@@ -26,7 +26,6 @@
}
// Don't show links for images, or javascript/internal links
- .ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
@@ -67,6 +66,12 @@
page-break-after: avoid;
}
+ // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
+ // Once fixed, we can just straight up remove this.
+ select {
+ background: #fff !important;
+ }
+
// Bootstrap components
.navbar {
display: none;
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 0bb3b5852..76c87be17 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -6,24 +6,12 @@
// Bar animations
// -------------------------
-// Webkit
+// WebKit
@-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
-// Firefox
-@-moz-keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-// Opera
-@-o-keyframes progress-bar-stripes {
- from { background-position: 0 0; }
- to { background-position: 40px 0; }
-}
-
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
@@ -67,11 +55,7 @@
// Call animation for the active one
.progress.active .progress-bar {
- -webkit-animation: progress-bar-stripes 2s linear infinite;
- -moz-animation: progress-bar-stripes 2s linear infinite;
- -ms-animation: progress-bar-stripes 2s linear infinite;
- -o-animation: progress-bar-stripes 2s linear infinite;
- animation: progress-bar-stripes 2s linear infinite;
+ .animation(progress-bar-stripes 2s linear infinite);
}
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index 6b4566266..5823c8fca 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -22,16 +22,6 @@
}
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-
-.hidden {
- display: none !important;
- visibility: hidden !important;
-}
-
-
// Visibility utilities
.visible-xs {
@@ -204,16 +194,21 @@
}
}
+
// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
.visible-print {
.responsive-invisibility();
-}
-@media print {
- .visible-print {
+ @media print {
.responsive-visibility();
}
- .hidden-print {
+}
+
+.hidden-print {
+ @media print {
.responsive-invisibility();
}
}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 046eb774a..976b4e3c2 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -114,6 +114,6 @@ hr {
margin: -1px;
padding: 0;
overflow: hidden;
- clip: rect(0 0 0 0);
+ clip: rect(0,0,0,0);
border: 0;
}
diff --git a/less/tables.less b/less/tables.less
index f9f0041e4..f8c05fecf 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -104,10 +104,12 @@ th {
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.table-striped > tbody > tr:nth-child(odd) {
- > td,
- > th {
- background-color: @table-bg-accent;
+.table-striped {
+ > tbody > tr:nth-child(odd) {
+ > td,
+ > th {
+ background-color: @table-bg-accent;
+ }
}
}
@@ -116,10 +118,12 @@ th {
//
// Placed here since it has to come after the potential zebra striping
-.table-hover > tbody > tr:hover {
- > td,
- > th {
- background-color: @table-bg-hover;
+.table-hover {
+ > tbody > tr:hover {
+ > td,
+ > th {
+ background-color: @table-bg-hover;
+ }
}
}
@@ -129,6 +133,7 @@ th {
// Reset default table behavior
table col[class*="col-"] {
+ position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
float: none;
display: table-column;
}
@@ -148,21 +153,12 @@ table {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
-.table > thead > tr,
-.table > tbody > tr,
-.table > tfoot > tr {
- > td.active,
- > th.active,
- &.active > td,
- &.active > th {
- background-color: @table-bg-active;
- }
-}
-
// Generate the contextual variants
-.table-row-variant(success; @state-success-bg; @state-success-border);
-.table-row-variant(danger; @state-danger-bg; @state-danger-border);
-.table-row-variant(warning; @state-warning-bg; @state-warning-border);
+.table-row-variant(active; @table-bg-active);
+.table-row-variant(success; @state-success-bg);
+.table-row-variant(warning; @state-warning-bg);
+.table-row-variant(danger; @state-danger-bg);
+.table-row-variant(info; @state-info-bg);
// Responsive tables
@@ -171,10 +167,10 @@ table {
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.
-@media (max-width: @screen-sm-min) {
+@media (max-width: @screen-xs-max) {
.table-responsive {
width: 100%;
- margin-bottom: 15px;
+ margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
diff --git a/less/theme.less b/less/theme.less
index b510b7a8d..0addce3f2 100644
--- a/less/theme.less
+++ b/less/theme.less
@@ -33,6 +33,7 @@
// Mixin for generating new styles
.btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
+ .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
@@ -104,6 +105,7 @@
// Default navbar
.navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
+ .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
@@ -121,6 +123,7 @@
// Inverted navbar
.navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
+ .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
diff --git a/less/thumbnails.less b/less/thumbnails.less
index a210cac72..11aa283a0 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -5,28 +5,32 @@
// Mixin and adjust the regular image class
.thumbnail {
- .img-thumbnail();
- display: block; // Override the inline-block from `.img-thumbnail`
+ display: block;
+ padding: @thumbnail-padding;
margin-bottom: @line-height-computed;
+ line-height: @line-height-base;
+ background-color: @thumbnail-bg;
+ border: 1px solid @thumbnail-border;
+ border-radius: @thumbnail-border-radius;
+ .transition(all .2s ease-in-out);
- > img {
+ > img,
+ a > img {
.img-responsive();
+ margin-left: auto;
+ margin-right: auto;
}
-}
-
-// Add a hover state for linked versions only
-a.thumbnail:hover,
-a.thumbnail:focus {
- border-color: @link-color;
-}
+ // Add a hover state for linked versions only
+ a&:hover,
+ a&:focus,
+ a&.active {
+ border-color: @link-color;
+ }
-// Images and captions
-.thumbnail > img {
- margin-left: auto;
- margin-right: auto;
-}
-.thumbnail .caption {
- padding: @thumbnail-caption-padding;
- color: @thumbnail-caption-color;
+ // Image captions
+ .caption {
+ padding: @thumbnail-caption-padding;
+ color: @thumbnail-caption-color;
+ }
}
diff --git a/less/type.less b/less/type.less
index 1e4ff9d18..24a581fe8 100644
--- a/less/type.less
+++ b/less/type.less
@@ -3,15 +3,65 @@
// --------------------------------------------------
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ font-family: @headings-font-family;
+ font-weight: @headings-font-weight;
+ line-height: @headings-line-height;
+ color: @headings-color;
+
+ small,
+ .small {
+ font-weight: normal;
+ line-height: 1;
+ color: @headings-small-color;
+ }
+}
+
+h1,
+h2,
+h3 {
+ margin-top: @line-height-computed;
+ margin-bottom: (@line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 65%;
+ }
+}
+h4,
+h5,
+h6 {
+ margin-top: (@line-height-computed / 2);
+ margin-bottom: (@line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 75%;
+ }
+}
+
+h1, .h1 { font-size: @font-size-h1; }
+h2, .h2 { font-size: @font-size-h2; }
+h3, .h3 { font-size: @font-size-h3; }
+h4, .h4 { font-size: @font-size-h4; }
+h5, .h5 { font-size: @font-size-h5; }
+h6, .h6 { font-size: @font-size-h6; }
+
+
// Body text
// -------------------------
p {
margin: 0 0 (@line-height-computed / 2);
}
+
.lead {
margin-bottom: @line-height-computed;
- font-size: (@font-size-base * 1.15);
+ font-size: floor((@font-size-base * 1.15));
font-weight: 200;
line-height: 1.4;
@@ -70,52 +120,7 @@ cite { font-style: normal; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
-
-
-// Headings
-// -------------------------
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
- font-family: @headings-font-family;
- font-weight: @headings-font-weight;
- line-height: @headings-line-height;
- color: @headings-color;
-
- small {
- font-weight: normal;
- line-height: 1;
- color: @headings-small-color;
- }
-}
-
-h1,
-h2,
-h3 {
- margin-top: @line-height-computed;
- margin-bottom: (@line-height-computed / 2);
-
- small {
- font-size: 65%;
- }
-}
-h4,
-h5,
-h6 {
- margin-top: (@line-height-computed / 2);
- margin-bottom: (@line-height-computed / 2);
-
- small {
- font-size: 75%;
- }
-}
-
-h1, .h1 { font-size: @font-size-h1; }
-h2, .h2 { font-size: @font-size-h2; }
-h3, .h3 { font-size: @font-size-h3; }
-h4, .h4 { font-size: @font-size-h4; }
-h5, .h5 { font-size: @font-size-h5; }
-h6, .h6 { font-size: @font-size-h6; }
+.text-justify { text-align: justify; }
// Page header
@@ -128,7 +133,6 @@ h6, .h6 { font-size: @font-size-h6; }
}
-
// Lists
// --------------------------------------------------
@@ -138,7 +142,7 @@ ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
ul,
- ol{
+ ol {
margin-bottom: 0;
}
}
@@ -150,18 +154,25 @@ ol {
padding-left: 0;
list-style: none;
}
+
// Inline turns list items into inline-block
.list-inline {
.list-unstyled();
+
> li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
+
+ &:first-child {
+ padding-left: 0;
+ }
}
}
// Description Lists
dl {
+ margin-top: 0; // Remove browser default
margin-bottom: @line-height-computed;
}
dt,
@@ -191,7 +202,7 @@ dd {
}
dd {
margin-left: @component-offset-horizontal;
- .clearfix(); // Clear the floated `dt` if an empty `dd` is present
+ &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
}
}
}
@@ -201,12 +212,12 @@ dd {
// Abbreviations and acronyms
abbr[title],
-// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @abbr-border-color;
}
-abbr.initialism {
+.initialism {
font-size: 90%;
text-transform: uppercase;
}
@@ -224,12 +235,13 @@ blockquote {
p:last-child {
margin-bottom: 0;
}
- small {
+ small,
+ .small {
display: block;
line-height: @line-height-base;
color: @blockquote-small-color;
&:before {
- content: '\2014 \00A0';// EM DASH, NBSP
+ content: '\2014 \00A0'; // EM DASH, NBSP
}
}
@@ -240,15 +252,17 @@ blockquote {
border-right: 5px solid @blockquote-border-color;
border-left: 0;
p,
- small {
+ small,
+ .small {
text-align: right;
}
- small {
+ small,
+ .small {
&:before {
content: '';
}
&:after {
- content: '\00A0 \2014';// NBSP, EM DASH
+ content: '\00A0 \2014'; // NBSP, EM DASH
}
}
}
diff --git a/less/utilities.less b/less/utilities.less
index ae2ae4be2..a26031214 100644
--- a/less/utilities.less
+++ b/less/utilities.less
@@ -38,6 +38,16 @@
}
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+ display: none !important;
+ visibility: hidden !important;
+}
+
+
// For Affix plugin
// -------------------------
diff --git a/less/variables.less b/less/variables.less
index 1a998b946..15db9538a 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -41,24 +41,24 @@
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
-@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
+@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
-@font-size-large: ceil(@font-size-base * 1.25); // ~18px
-@font-size-small: ceil(@font-size-base * 0.85); // ~12px
+@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
-@font-size-h1: floor(@font-size-base * 2.60); // ~36px
-@font-size-h2: floor(@font-size-base * 2.15); // ~30px
-@font-size-h3: ceil(@font-size-base * 1.70); // ~24px
-@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
+@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
-@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
+@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
-@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
+@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
-@headings-font-family: @font-family-base;
+@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
@@ -84,6 +84,9 @@
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
+
@line-height-large: 1.33;
@line-height-small: 1.5;
@@ -157,7 +160,7 @@
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
-@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @gray-dark;
@@ -186,6 +189,7 @@
@dropdown-header-color: @gray-light;
+// Note: Deprecated @dropdown-caret-color as of v3.1.0
@dropdown-caret-color: #000;
@@ -246,8 +250,13 @@
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
-// Point at which the navbar stops collapsing
+
+// Navbar collapse
+
+// Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;
+// Point at which the navbar begins collapsing
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
// Navbar
@@ -257,7 +266,7 @@
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-default-color: #777;
@@ -280,7 +289,7 @@
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
-@navbar-default-toggle-icon-bar-bg: #ccc;
+@navbar-default-toggle-icon-bar-bg: #888;
@navbar-default-toggle-border-color: #ddd;
@@ -321,7 +330,6 @@
@nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
-@nav-open-caret-border-color: #fff;
// Tabs
@nav-tabs-border-color: #ddd;
@@ -368,26 +376,26 @@
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
-
@jumbotron-heading-color: inherit;
+@jumbotron-font-size: ceil((@font-size-base * 1.5));
// Form states and alerts
// -------------------------
-@state-success-text: #468847;
+@state-success-text: #3c763d;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
-@state-info-text: #3a87ad;
+@state-info-text: #31708f;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
-@state-warning-text: #c09853;
+@state-warning-text: #8a6d3b;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
-@state-danger-text: #b94a48;
+@state-danger-text: #a94442;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
@@ -502,8 +510,10 @@
// Panels
// -------------------------
@panel-bg: #fff;
-@panel-inner-border: #ddd;
+@panel-body-padding: 15px;
@panel-border-radius: @border-radius-base;
+
+@panel-inner-border: #ddd;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@@ -563,10 +573,12 @@
// Breadcrumbs
// -------------------------
-@breadcrumb-bg: #f5f5f5;
-@breadcrumb-color: #ccc;
-@breadcrumb-active-color: @gray-light;
-@breadcrumb-separator: "/";
+@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-horizontal: 15px;
+@breadcrumb-bg: #f5f5f5;
+@breadcrumb-color: #ccc;
+@breadcrumb-active-color: @gray-light;
+@breadcrumb-separator: "/";
// Carousel
@@ -597,6 +609,9 @@
@code-color: #c7254e;
@code-bg: #f9f2f4;
+@kbd-color: #fff;
+@kbd-bg: #333;
+
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-07 00:03:27 +0000