aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorfat <[email protected]>2013-05-16 11:08:46 -0700
committerfat <[email protected]>2013-05-16 11:08:46 -0700
commita4c16155a21c7bcad9b1d52e2141425cdb7df494 (patch)
tree490759c71a56d0b54fb46d5ae56851074a31a992 /less
parent14651035deda4d02a1ca02c6088c34f770f897f6 (diff)
parentf3d857773455a940fca0c8d2ef1ca26982700031 (diff)
downloadbootstrap-a4c16155a21c7bcad9b1d52e2141425cdb7df494.tar.xz
bootstrap-a4c16155a21c7bcad9b1d52e2141425cdb7df494.zip
Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip
Conflicts: Makefile docs/_site/assets/js/bootstrap-typeahead.js docs/assets/js/bootstrap.min.js docs/customize.html docs/docs.html
Diffstat (limited to 'less')
-rw-r--r--less/accordion.less2
-rw-r--r--less/alerts.less8
-rw-r--r--less/breadcrumbs.less2
-rw-r--r--less/button-groups.less67
-rw-r--r--less/buttons.less12
-rw-r--r--less/code.less6
-rw-r--r--less/dropdowns.less27
-rw-r--r--less/forms.less228
-rw-r--r--less/glyphicons.less1
-rw-r--r--less/mixins.less5
-rw-r--r--less/navbar.less54
-rw-r--r--less/navs.less96
-rw-r--r--less/pager.less2
-rw-r--r--less/pagination.less29
-rw-r--r--less/panels.less10
-rw-r--r--less/print.less4
-rw-r--r--less/progress-bars.less5
-rw-r--r--less/responsive-utilities.less40
-rw-r--r--less/scaffolding.less8
-rw-r--r--less/tables.less2
-rw-r--r--less/type.less53
-rw-r--r--less/variables.less39
22 files changed, 264 insertions, 436 deletions
diff --git a/less/accordion.less b/less/accordion.less
index 064377d05..59765f154 100644
--- a/less/accordion.less
+++ b/less/accordion.less
@@ -5,7 +5,7 @@
// Parent container
.accordion {
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
}
// Group == heading + body
diff --git a/less/alerts.less b/less/alerts.less
index 882b25bef..bb7846249 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -7,8 +7,8 @@
// -------------------------
.alert {
- padding: 8px 35px 8px 14px;
- margin-bottom: @line-height-base;
+ padding: 10px 35px 10px 15px;
+ margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
border: 1px solid @alert-border;
@@ -84,8 +84,8 @@
// -------------------------
.alert-block {
- padding-top: 14px;
- padding-bottom: 14px;
+ padding-top: 15px;
+ padding-bottom: 15px;
}
.alert-block > p,
.alert-block > ul {
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 87a6f0e37..2fe8217a3 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -5,7 +5,7 @@
.breadcrumb {
padding: 8px 15px;
- margin: 0 0 @line-height-base;
+ margin: 0 0 @line-height-computed;
list-style: none;
background-color: #f5f5f5;
border-radius: @border-radius-base;
diff --git a/less/button-groups.less b/less/button-groups.less
index 6f9a52acd..f7934a328 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -11,17 +11,14 @@
}
// Make the div behave like a button
-.btn-group {
+.btn-group,
+.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
- // Prevent double borders when buttons are next to each other
- + btn {
- margin-left: -1px;
- }
// Bring the "active" button to the front
&:hover,
&:active {
@@ -30,6 +27,11 @@
}
}
+// Prevent double borders when buttons are next to each other
+.btn-group .btn + .btn {
+ margin-left: -1px;
+}
+
// Optional: Group multiple button groups together for a toolbar
.btn-toolbar {
.clearfix();
@@ -46,46 +48,36 @@
}
}
-// Float them, remove border radius, then re-add to first and last elements
-.btn-group > .btn {
- position: relative;
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
-
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
- .border-left-radius(@border-radius-base);
+ &:not(:last-child):not(.dropdown-toggle) {
+ .border-right-radius(0);
+ }
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
-.btn-group > .btn:last-child,
-.btn-group > .dropdown-toggle {
- .border-right-radius(@border-radius-base);
-}
-// Reset corners for large buttons
-.btn-group > .btn.large:first-child {
- margin-left: 0;
- .border-left-radius(@border-radius-large);
-}
-.btn-group > .btn.large:last-child,
-.btn-group > .large.dropdown-toggle {
- .border-right-radius(@border-radius-large);
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+ .border-left-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
.btn-group > .btn-group {
float: left;
}
-.btn-group > .btn-group > .btn {
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
-.btn-group > .btn-group:last-child > .btn {
- .border-right-radius(@border-radius-base);
+.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 {
- margin-left: 0;
- .border-left-radius(@border-radius-base);
+.btn-group > .btn-group:last-child > .btn:first-child {
+ .border-left-radius(0);
}
// On active and open, don't show outline
@@ -122,7 +114,6 @@
// Reposition the caret
.btn .caret {
- margin-top: 8px;
margin-left: 0;
}
// Carets in other button sizes
@@ -143,20 +134,18 @@
float: none;
width: 100%;
max-width: 100%;
+ + .btn {
+ margin-top: -1px;
+ }
+}
+.btn-group-vertical .btn:not(:first-child):not(:last-child) {
+ border-radius: 0;
}
.btn-group-vertical .btn:first-child {
- border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
- .border-top-radius(@border-radius-base);
+ .border-bottom-radius(0);
}
.btn-group-vertical .btn:last-child {
- border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
- .border-bottom-radius(@border-radius-base);
-}
-.btn-group-vertical .btn-large:first-child {
- .border-top-radius(@border-radius-large);
-}
-.btn-group-vertical .btn-large:last-child {
- .border-bottom-radius(@border-radius-large);
+ .border-top-radius(0);
}
diff --git a/less/buttons.less b/less/buttons.less
index 128971a4c..6280d3448 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,7 +9,7 @@
// Core styles
.btn {
display: inline-block;
- padding: 6px 12px;
+ padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: 500;
@@ -123,18 +123,14 @@ fieldset[disabled] .btn-link {
// --------------------------------------------------
.btn-large {
- padding: @padding-large;
+ padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
.btn-small {
- padding: @padding-small;
+ padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
- border-radius: @border-radius-small;
-}
-.btn-mini {
- padding: @padding-mini;
- font-size: @font-size-mini;
+ line-height: 1.5; // ensure proper height of button next to small input
border-radius: @border-radius-small;
}
diff --git a/less/code.less b/less/code.less
index d9ddbc3a4..f1bc0a0cd 100644
--- a/less/code.less
+++ b/less/code.less
@@ -25,8 +25,8 @@ code {
// Blocks of code
pre {
display: block;
- padding: ((@line-height-base - 1) / 2);
- margin: 0 0 (@line-height-base / 2);
+ padding: ((@line-height-computed - 1) / 2);
+ margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
word-break: break-all;
@@ -40,7 +40,7 @@ pre {
// Make prettyprint styles more spaced out for readability
&.prettyprint {
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
}
// Account for some code outputs that place code tags in pre tags
diff --git a/less/dropdowns.less b/less/dropdowns.less
index c4fd8598b..1b9165b4e 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -3,35 +3,20 @@
// --------------------------------------------------
-// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
-.dropup,
-.dropdown {
- position: relative;
-}
-.dropdown-toggle:active,
-.open .dropdown-toggle {
- outline: 0;
-}
-
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
- vertical-align: top;
+ margin-left: 2px;
+ vertical-align: middle;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
-// Place the caret
-.dropdown .caret {
- margin-top: 8px;
- margin-left: 2px;
-}
-
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
@@ -118,9 +103,15 @@
// Open state for the dropdown
// ---------------------------
.open {
- & > .dropdown-menu {
+ // Show the menu
+ > .dropdown-menu {
display: block;
}
+
+ // Remove the outline when :focus is triggered
+ > a {
+ outline: 0;
+ }
}
// Right aligned dropdowns
diff --git a/less/forms.less b/less/forms.less
index 6162cd4f1..2c696945d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -20,9 +20,9 @@ legend {
display: block;
width: 100%;
padding: 0;
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
- line-height: (@line-height-base * 2);
+ line-height: inherit;
color: @gray-dark;
border: 0;
border-bottom: 1px solid #e5e5e5;
@@ -56,8 +56,7 @@ input[type="tel"],
input[type="color"] {
display: block;
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
- padding: 6px 9px;
- margin-bottom: 10px;
+ padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
@@ -66,7 +65,13 @@ input[type="color"] {
border: 1px solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- .transition(~"border-color linear .2s, box-shadow linear .2s");
+ .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+
+ &:focus {
+ border-color: rgba(82,168,236,.8);
+ outline: 0;
+ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+ }
}
// Reset appearance properties for textual inputs and textarea
@@ -98,32 +103,6 @@ textarea {
height: auto;
}
-// Everything else
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"] {
- // Focus state
- &:focus {
- border-color: rgba(82,168,236,.8);
- outline: 0;
- outline: thin dotted \9; /* IE6-9 */
- //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
- .box-shadow(0 0 8px rgba(82,168,236,.6));
- }
-}
-
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
@@ -146,7 +125,6 @@ select[size] {
}
// Focus for select, file, radio, and checkbox
-select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
@@ -171,8 +149,9 @@ textarea {
.radio,
.checkbox {
display: block;
- min-height: @line-height-base; // clear the floating input if there is no label text
- margin-bottom: (@line-height-base / 2);
+ min-height: @line-height-computed; // clear the floating input if there is no label text
+ margin-top: 10px;
+ margin-bottom: 10px;
padding-left: 20px;
vertical-align: middle;
label {
@@ -182,7 +161,6 @@ textarea {
cursor: pointer;
}
}
-
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
@@ -192,7 +170,7 @@ textarea {
}
.radio + .radio,
.checkbox + .checkbox {
- margin-top: ((@line-height-base / 4) * -1);
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}
/*
@@ -242,46 +220,19 @@ input[type="search"],
input[type="tel"],
input[type="color"] {
&.input-large {
- padding: @padding-large;
+ padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
&.input-small {
min-height: @input-height-small;
- padding: @padding-small;
+ padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
}
-
-// GRID SIZING FOR INPUTS
-// ----------------------
-
-// Grid style input sizes
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"] {
- float: none;
- margin-left: 0;
- margin-right: 0;
-}
-
-// Ensure input-prepend/append never wraps
-.input-append input[class*="span"],
-.input-prepend input[class*="span"] {
- display: inline-block;
-}
-
-input[class*="span"],
-select[class*="span"],
-textarea[class*="span"] {
- height: @input-height-base;
-}
-
-
-
// DISABLED STATE
// --------------
@@ -348,9 +299,9 @@ select:focus:invalid {
// ------------
.form-actions {
- padding: (@line-height-base - 1) 20px @line-height-base;
- margin-top: @line-height-base;
- margin-bottom: @line-height-base;
+ padding: @line-height-computed 20px;
+ margin-top: @line-height-computed;
+ margin-bottom: @line-height-computed;
background-color: @form-actions-bg;
border-top: 1px solid #e5e5e5;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
@@ -361,20 +312,11 @@ select:focus:invalid {
// HELP TEXT
// ---------
-.help-block,
-.help-inline {
- color: lighten(@text-color, 25%); // lighten the text some for contrast
-}
-
.help-block {
display: block; // account for any element using help-block
- margin-bottom: (@line-height-base / 2);
-}
-
-.help-inline {
- display: inline-block;
- vertical-align: middle;
- padding-left: 5px;
+ margin-top: 5px;
+ margin-bottom: 10px;
+ color: lighten(@text-color, 25%); // lighten the text some for contrast
}
@@ -407,12 +349,8 @@ select:focus:invalid {
.input-group-btn,
.input-group input {
display: table-cell;
- /*margin: 0;*/
- border-radius: 0;
- &.input-small {
- border-radius: 0;
- }
- &.input-large {
+
+ &:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
@@ -435,40 +373,37 @@ select:focus:invalid {
text-shadow: 0 1px 0 #fff;
background-color: @gray-lighter;
border: 1px solid #ccc;
+ border-radius: @border-radius-base;
- &.input-small {
- padding: @padding-small;
- font-size: @font-size-small;
+ &.input-small {
+ padding: @padding-small-vertical @padding-small-horizontal;
+ font-size: @font-size-small;
+ border-radius: @border-radius-small;
+ }
+ &.input-large {
+ padding: @padding-large-vertical @padding-large-horizontal;
+ font-size: @font-size-large;
+ border-radius: @border-radius-large;
}
- &.input-large {
- padding: @padding-large;
- font-size: @font-size-large;
- }
}
// Reset rounded corners
.input-group input:first-child,
-.input-group-addon:first-child {
- .border-left-radius(@border-radius-base);
- &.input-small {
- .border-left-radius(@border-radius-small);
- }
- &.input-large {
- .border-left-radius(@border-radius-large);
- }
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+ .border-right-radius(0);
}
.input-group-addon:first-child {
border-right: 0;
}
.input-group input:last-child,
-.input-group-addon:last-child {
- .border-right-radius(@border-radius-base);
- &.input-small {
- .border-right-radius(@border-radius-small);
- }
- &.input-large {
- .border-right-radius(@border-radius-large);
- }
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+ .border-left-radius(0);
}
.input-group-addon:last-child {
border-left: 0;
@@ -483,7 +418,6 @@ select:focus:invalid {
.input-group-btn > .btn {
position: relative;
float: left; // Collapse white-space
- border-radius: 0;
+ .btn {
margin-left: -1px;
}
@@ -494,29 +428,6 @@ select:focus:invalid {
}
}
-// Prepended buttons
-.input-group-btn:first-child {
- // Round the left corners only
- > .btn:first-child,
- > .dropdown-toggle:first-child {
- .border-left-radius(@border-radius-base);
- &.btn-large { .border-left-radius(@border-radius-large); }
- &.btn-small { .border-left-radius(@border-radius-small); }
- }
-}
-
-// Appended buttons
-.input-group-btn:last-child {
- // Round the right corners only
- > .btn:last-child,
- > .dropdown-toggle {
- .border-right-radius(@border-radius-base);
- &.btn-large { .border-right-radius(@border-radius-large); }
- &.btn-small { .border-right-radius(@border-radius-small); }
- }
-}
-
-
// Inline forms
// --------------------------------------------------
@@ -528,6 +439,10 @@ select:focus:invalid {
.radio,
.checkbox {
display: inline-block;
+ }
+ .radio,
+ .checkbox {
+ margin-top: 0;
margin-bottom: 0;
}
}
@@ -535,41 +450,20 @@ select:focus:invalid {
// Horizontal forms
// --------------------------------------------------
+// Horizontal forms are built on grid classes.
-@media screen and (min-width: @screen-tablet) {
-
- .form-horizontal {
-
- // Increase spacing between groups
- .control-group {
- position: relative;
- margin-bottom: @line-height-base;
- .clearfix();
-
- input,
- select,
- textarea {
- margin-bottom: 0;
- }
- }
-
- // Float the labels left
- .control-group > .control-label {
- float: left;
- width: (@component-offset-horizontal - 20);
- padding-top: 6px;
- text-align: right;
- }
-
- // Move over all input controls and content over
- .control-group > .controls {
- margin-left: @component-offset-horizontal;
- }
-
- // Make sure form actions buttons are aligned with controls
- .form-actions {
- padding-left: @component-offset-horizontal;
- }
+.form-horizontal {
+ .row + .row {
+ margin-top: 15px;
+ }
+ .row-label {
+ padding-top: 6px;
+ }
+}
+// Only right aline form labels here when the columns stop stacking
+@media (min-width: 768px) {
+ .form-horizontal .row-label {
+ text-align: right;
}
}
diff --git a/less/glyphicons.less b/less/glyphicons.less
index e8a96c05f..0d935ea19 100644
--- a/less/glyphicons.less
+++ b/less/glyphicons.less
@@ -34,6 +34,7 @@
font-style: normal;
font-weight: normal;
line-height: 1;
+ -webkit-font-smoothing: antialiased;
}
// Individual icons
diff --git a/less/mixins.less b/less/mixins.less
index 48e2073c5..dcba39f85 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -340,7 +340,7 @@
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) {
height: 2px; // 1px for background, one for border
- margin: ((@line-height-base / 2) - 1) 0;
+ margin: ((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @top;
border-bottom: 1px solid @bottom;
@@ -444,9 +444,6 @@
}
}
-
-
-
// Small grid columns
.generate-grid-columns(@grid-columns) {
diff --git a/less/navbar.less b/less/navbar.less
index 494f43b6f..13a36781e 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -21,13 +21,15 @@
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
// and outdent nav links so text lines up with logo.
- margin: 10px -15px 0;
+ margin-top: 10px;
+ margin-bottom: 15px;
> li > a {
- padding-top: ((@navbar-height - @line-height-base) / 2);
- padding-bottom: ((@navbar-height - @line-height-base) / 2);
+ padding-top: ((@navbar-height - @line-height-computed) / 2);
+ padding-bottom: ((@navbar-height - @line-height-computed) / 2);
color: @navbar-link-color;
line-height: 20px;
+ border-radius: @border-radius-base;
}
> li > a:hover,
> li > a:focus {
@@ -91,7 +93,7 @@
padding: 15px;
font-size: @font-size-large;
font-weight: 500;
- line-height: @line-height-base;
+ line-height: @line-height-computed;
color: @navbar-brand-color;
text-align: center;
&:hover,
@@ -132,6 +134,7 @@
// Navbar form
.navbar-form {
+ .form-inline();
.navbar-vertical-align(34px); // Vertically center in navbar
}
@@ -152,26 +155,26 @@
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
- li.dropdown > a:hover .caret,
- li.dropdown > a:focus .caret {
+ > .dropdown > a:hover .caret,
+ > .dropdown > a:focus .caret {
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
- li.dropdown.open > .dropdown-toggle,
- li.dropdown.active > .dropdown-toggle,
- li.dropdown.open.active > .dropdown-toggle {
+ > .open > a,
+ > .open > a:hover,
+ > .open > a:focus {
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
}
- li.dropdown > .dropdown-toggle .caret {
+ > .dropdown > a .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
- li.dropdown.open > .dropdown-toggle .caret,
- li.dropdown.active > .dropdown-toggle .caret,
- li.dropdown.open.active > .dropdown-toggle .caret {
+ > .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;
}
@@ -242,23 +245,23 @@
// Dropdowns
.navbar-nav {
- li.dropdown.open > .dropdown-toggle,
- li.dropdown.active > .dropdown-toggle,
- li.dropdown.open.active > .dropdown-toggle {
+ > .open > a,
+ > .open > a:hover,
+ > .open > a:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
- li.dropdown > a:hover .caret {
+ > .dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-hover-color;
}
- li.dropdown > .dropdown-toggle .caret {
+ > .dropdown > a .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
- li.dropdown.open > .dropdown-toggle .caret,
- li.dropdown.active > .dropdown-toggle .caret,
- li.dropdown.open.active > .dropdown-toggle .caret {
+ > .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;
}
@@ -280,10 +283,15 @@
}
.navbar .nav {
float: left;
- margin-top: 0; // undo top margin to make nav extend full height of navbar
+ // undo margin to make nav extend full height of navbar
+ margin-top: 0;
+ margin-bottom: 0;
> li {
float: left;
+ > a {
+ border-radius: 0;
+ }
}
&.pull-right {
@@ -322,7 +330,7 @@
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
-
+ .navbar-vertical-align(@line-height-computed);
}
diff --git a/less/navs.less b/less/navs.less
index 8daeb6fd9..e5925bf63 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -12,8 +12,11 @@
padding-left: 0; // Override default ul/ol
list-style: none;
.clearfix();
+
> li {
+ position: relative;
display: block;
+
> a {
position: relative;
display: block;
@@ -25,17 +28,10 @@
}
}
- // Nav states and addons
- // --------------------------------------------------
-
- // Disabled state
- // -------------------------
-
- // Gray out text
+ // Disabled state sets text to gray and nukes hover/tab effects
&.disabled > a {
color: @gray-light;
}
- // Nuke hover effects
&.disabled > a:hover,
&.disabled > a:focus {
color: @gray-light;
@@ -43,12 +39,26 @@
background-color: transparent;
cursor: default;
}
+
// Space the headers out when they follow another list item (link)
- &+ .nav-header {
+ + .nav-header {
margin-top: 9px;
}
}
+ // 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;
+ }
+ }
+
// Redeclare pull classes because of specifity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
@@ -56,7 +66,7 @@
}
// Dividers (basically an hr) within the dropdown
- .divider {
+ .nav-divider {
.nav-divider();
}
}
@@ -215,71 +225,23 @@
-/*
-// Prevent IE8 from misplacing imgs
-// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
-.nav > li > a > img {
- max-width: none;
-}
-
// Dropdowns
// -------------------------
-.nav-tabs .dropdown-menu {
- // Remove the top rounded corners here since there is a hard edge above the menu
- .border-top-radius(0);
-}
-
-// Default dropdown links
-// -------------------------
-// Make carets use linkColor to start
-.nav .dropdown-toggle .caret {
+// Make dropdown carets use link color in navs
+.nav .caret {
border-top-color: @link-color;
border-bottom-color: @link-color;
- margin-top: 8px;
}
-.nav .dropdown-toggle:hover .caret {
+.nav a:hover .caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
-// Active dropdown links
-// -------------------------
-.nav .active .dropdown-toggle .caret {
- border-top-color: #fff;
- border-bottom-color: #fff;
-}
-.nav-tabs .active .dropdown-toggle .caret {
- border-top-color: @gray;
- border-bottom-color: @gray;
-}
-
-// Active:hover dropdown links
-// -------------------------
-.nav > .dropdown.active > a:hover {
- cursor: pointer;
-}
-
-// Open dropdowns
-// -------------------------
-.nav-tabs .open .dropdown-toggle,
-.nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover {
- color: #fff;
- background-color: @gray-light;
- border-color: @gray-light;
-}
-.nav li.dropdown.open .caret,
-.nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret {
- border-top-color: #fff;
- border-bottom-color: #fff;
- .opacity(1);
-}
-
-// Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover {
- border-color: @gray-light;
+// Specific dropdowns
+.nav-tabs .dropdown-menu {
+ // make dropdown border overlap tab border
+ margin-top: -1px;
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ .border-top-radius(0);
}
-
-*/
diff --git a/less/pager.less b/less/pager.less
index cc1947a91..0b2fcf7cb 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -4,7 +4,7 @@
.pager {
- margin: @line-height-base 0;
+ margin: @line-height-computed 0;
list-style: none;
text-align: center;
.clearfix();
diff --git a/less/pagination.less b/less/pagination.less
index bb44fa8cf..73c063be0 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -3,7 +3,7 @@
// --------------------------------------------------
.pagination {
display: inline-block;
- margin: @line-height-base 0;
+ margin: @line-height-computed 0;
border-radius: @border-radius-base;
}
.pagination > li {
@@ -56,7 +56,7 @@
.pagination-large {
> li > a,
> li > span {
- padding: @padding-large;
+ padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
}
> li:first-child > a,
@@ -69,9 +69,13 @@
}
}
-// Small and mini
-.pagination-mini,
+// 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);
@@ -81,20 +85,3 @@
.border-right-radius(@border-radius-small);
}
}
-
-// Small
-.pagination-small {
- > li > a,
- > li > span {
- padding: @padding-small;
- font-size: @font-size-small;
- }
-}
-// Mini
-.pagination-mini {
- > li > a,
- > li > span {
- padding: @padding-mini;
- font-size: @font-size-mini;
- }
-}
diff --git a/less/panels.less b/less/panels.less
index 0d5a07ad4..a08febef3 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -25,6 +25,16 @@
border-top-right-radius: (@panel-border-radius - 1);
}
+// Optional footer (stays gray in every modifier class)
+.panel-footer {
+ margin: 15px -15px -15px;
+ padding: 10px 15px;
+ background-color: @panel-footer-bg;
+ border-top: 1px solid @panel-border;
+ border-bottom-left-radius: (@panel-border-radius - 1);
+ border-bottom-right-radius: (@panel-border-radius - 1);
+}
+
// Contextual variations
.panel-primary {
border-color: @panel-primary-border;
diff --git a/less/print.less b/less/print.less
index db2749206..ec71acbbd 100644
--- a/less/print.less
+++ b/less/print.less
@@ -52,7 +52,7 @@
}
@page {
- margin: 0.5cm;
+ margin: 2cm .5cm;
}
p,
@@ -68,7 +68,7 @@
}
// Bootstrap components
- .navbar-toggle {
+ .navbar {
display: none;
}
}
diff --git a/less/progress-bars.less b/less/progress-bars.less
index e5e6b65a5..e963fa968 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -44,8 +44,8 @@
// Outer container
.progress {
overflow: hidden;
- height: @line-height-base;
- margin-bottom: @line-height-base;
+ height: @line-height-computed;
+ margin-bottom: @line-height-computed;
background-color: @progress-bg;
border-radius: @border-radius-base;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
@@ -63,7 +63,6 @@
background-color: @progress-bar-bg;
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
.transition(width .6s ease);
- .backface-visibility(hidden);
}
// Striped bars
diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less
index c69851bb9..09a0955f8 100644
--- a/less/responsive-utilities.less
+++ b/less/responsive-utilities.less
@@ -36,40 +36,40 @@
// Visibility utilities
// For Phones
-.visible-phone { display: inherit !important; }
-.visible-tablet { display: none !important; }
-.visible-desktop { display: none !important; }
+.visible-sm { display: inherit !important; }
+.visible-md { display: none !important; }
+.visible-lg { display: none !important; }
-.hidden-phone { display: none !important; }
-.hidden-tablet { display: inherit !important; }
-.hidden-desktop { display: inherit !important; }
+.hidden-sm { display: none !important; }
+.hidden-md { display: inherit !important; }
+.hidden-lg { display: inherit !important; }
// Tablets & small desktops only
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
- .visible-phone { display: none !important; }
- .visible-tablet { display: inherit !important; }
- .visible-desktop { display: none !important; }
+ .visible-sm { display: none !important; }
+ .visible-md { display: inherit !important; }
+ .visible-lg { display: none !important; }
- .hidden-phone { display: inherit !important; }
- .hidden-tablet { display: none !important; }
- .hidden-desktop { display: inherit !important; }
+ .hidden-sm { display: inherit !important; }
+ .hidden-md { display: none !important; }
+ .hidden-lg { display: inherit !important; }
}
// For desktops
@media (min-width: @screen-desktop) {
- .visible-phone { display: none !important; }
- .visible-tablet { display: none !important; }
- .visible-desktop { display: inherit !important; }
+ .visible-sm { display: none !important; }
+ .visible-md { display: none !important; }
+ .visible-lg { display: inherit !important; }
- .hidden-phone { display: inherit !important; }
- .hidden-tablet { display: inherit !important; }
- .hidden-desktop { display: none !important; }
+ .hidden-sm { display: inherit !important; }
+ .hidden-md { display: inherit !important; }
+ .hidden-lg { display: none !important; }
}
// Print utilities
-.visible-print { display: none !important; }
-.hidden-print { }
+.visible-print { display: none !important; }
+.hidden-print { }
@media print {
.visible-print { display: inherit !important; }
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 6781a9582..8c6a5af6c 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -21,14 +21,6 @@ html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
-// Disable iOS/WinMobile font size changes
-@media screen and (max-device-width: @screen-phone) {
- html {
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- }
-}
-
body {
font-family: @font-family-base;
font-size: @font-size-base;
diff --git a/less/tables.less b/less/tables.less
index 5c8fe82ad..fa5fd554b 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -17,7 +17,7 @@ th {
.table {
width: 100%;
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
// Cells
thead > tr > th,
tbody > tr > th,
diff --git a/less/type.less b/less/type.less
index f6b5eecd5..a95e5bff7 100644
--- a/less/type.less
+++ b/less/type.less
@@ -7,10 +7,10 @@
// -------------------------
p {
- margin: 0 0 (@line-height-base / 2);
+ margin: 0 0 (@line-height-computed / 2);
}
.lead {
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5);
font-weight: 200;
line-height: 1.4;
@@ -54,9 +54,8 @@ 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: @line-height-base;
+ line-height: @headings-line-height;
small {
font-weight: normal;
line-height: 1;
@@ -67,30 +66,26 @@ h1, h2, h3, h4, h5, h6,
h1,
h2,
h3 {
- margin-top: @line-height-base;
- margin-bottom: (@line-height-base / 2);
- line-height: (@line-height-base * 2);
-}
-h3 {
- line-height: (@line-height-base * 1.5);
+ margin-top: @line-height-computed;
+ margin-bottom: (@line-height-computed / 2);
}
h4,
h5,
h6 {
- margin-top: (@line-height-base / 2);
- margin-bottom: (@line-height-base / 2);
+ margin-top: (@line-height-computed / 2);
+ margin-bottom: (@line-height-computed / 2);
}
-h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
-h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
-h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
-h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
+h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
+h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
+h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: @font-size-base; }
-h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
+h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
-h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
-h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
-h3 small, .h3 small { font-size: @font-size-base; }
+h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
@@ -98,8 +93,8 @@ h4 small, .h4 small { font-size: @font-size-base; }
// -------------------------
.page-header {
- padding-bottom: ((@line-height-base / 2) - 1);
- margin: (@line-height-base * 2) 0 @line-height-base;
+ padding-bottom: ((@line-height-computed / 2) - 1);
+ margin: (@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @gray-lighter;
}
@@ -112,7 +107,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
ul,
ol {
padding: 0;
- margin: 0 0 (@line-height-base / 2) 25px;
+ margin: 0 0 (@line-height-computed / 2) 25px;
}
ul ul,
ul ol,
@@ -143,7 +138,7 @@ li {
// Description Lists
dl {
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
}
dt,
dd {
@@ -153,7 +148,7 @@ dt {
font-weight: bold;
}
dd {
- margin-left: (@line-height-base / 2);
+ margin-left: (@line-height-computed / 2);
}
// Horizontal layout (like forms)
.dl-horizontal {
@@ -175,7 +170,7 @@ dd {
// Horizontal rules
hr {
- margin: @line-height-base 0;
+ margin: @line-height-computed 0;
border: 0;
border-top: 1px solid @hr-border;
border-bottom: 1px solid #fff;
@@ -196,8 +191,8 @@ abbr.initialism {
// Blockquotes
blockquote {
- padding: (@line-height-base/2) @line-height-base;
- margin: 0 0 @line-height-base;
+ padding: (@line-height-computed / 2) @line-height-computed;
+ margin: 0 0 @line-height-computed;
border-left: 5px solid @gray-lighter;
p {
font-size: (@font-size-base * 1.25);
@@ -249,7 +244,7 @@ blockquote:after {
// Addresses
address {
display: block;
- margin-bottom: @line-height-base;
+ margin-bottom: @line-height-computed;
font-style: normal;
line-height: @line-height-base;
}
diff --git a/less/variables.less b/less/variables.less
index fd69c2438..9cd8f830b 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -46,27 +46,33 @@
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
-@font-size-large: (@font-size-base * 1.25); // ~18px
-@font-size-small: (@font-size-base * 0.85); // ~12px
-@font-size-mini: (@font-size-base * 0.75); // ~11px
+@font-size-large: ceil(@font-size-base * 1.25); // ~18px
+@font-size-small: ceil(@font-size-base * 0.85); // ~12px
+@font-size-mini: ceil(@font-size-base * 0.75); // ~11px
-@line-height-base: 20px;
+@line-height-base: 1.428571429; // 20/14
+@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
-@headings-font-family: inherit; // empty to use BS default, @font-family-base
@headings-font-weight: 500;
+@headings-line-height: 1.1;
// Components
// -------------------------
-// Based on 14px font-size and 1.5 line-height
+// Based on 14px font-size and 1.428 line-height (~20px to start)
-@padding-large: 11px 14px; // 44px
-@padding-small: 2px 10px; // 26px
-@padding-mini: 0 6px; // 22px
+@padding-base-vertical: 8px;
+@padding-base-horizontal: 12px;
-@border-radius-base: 4px;
-@border-radius-large: 6px;
-@border-radius-small: 3px;
+@padding-large-vertical: 14px;
+@padding-large-horizontal: 16px;
+
+@padding-small-vertical: 5px;
+@padding-small-horizontal: 10px;
+
+@border-radius-base: 4px;
+@border-radius-large: 6px;
+@border-radius-small: 3px;
@component-active-bg: @brand-primary;
@@ -121,11 +127,11 @@
@input-color-placeholder: @gray-light;
-@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
-@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
-@input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2));
+@input-height-large: (@line-height-computed + (@padding-large-vertical * 2));
+@input-height-small: (@line-height-computed + (@padding-small-vertical * 2));
-@form-actions-bg: #f5f5f5;
+@form-actions-bg: #f5f5f5;
// Dropdowns
@@ -329,6 +335,7 @@
@panel-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
+@panel-footer-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;