aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorJacob Thornton <[email protected]>2013-08-07 23:10:11 -0700
committerJacob Thornton <[email protected]>2013-08-07 23:10:11 -0700
commit89b69ed77035eeb9c0034534d75fdb2062f10d47 (patch)
tree99b1f65ee730de94e64b4992e5131f0432743b1e /less
parentb35b65d0b3689f7999be998411e632046548af6e (diff)
parentf3104a3e3b04c2817094ef8ebd351833a4ade420 (diff)
downloadbootstrap-89b69ed77035eeb9c0034534d75fdb2062f10d47.tar.xz
bootstrap-89b69ed77035eeb9c0034534d75fdb2062f10d47.zip
Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip
Conflicts: _layouts/customize.html
Diffstat (limited to 'less')
-rw-r--r--less/carousel.less2
-rw-r--r--less/dropdowns.less2
-rw-r--r--less/grid.less2
-rw-r--r--less/list-group.less7
-rw-r--r--less/mixins.less45
-rw-r--r--less/navbar.less19
-rw-r--r--less/panels.less35
-rw-r--r--less/scaffolding.less14
-rw-r--r--less/tables.less2
-rw-r--r--less/tooltip.less2
-rw-r--r--less/variables.less12
11 files changed, 76 insertions, 66 deletions
diff --git a/less/carousel.less b/less/carousel.less
index 045cd52f3..fbb479904 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -81,13 +81,11 @@
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
- background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
- background-color: transparent;
}
// Hover/focus state
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 675300de5..0dda5c9ce 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -74,6 +74,7 @@
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+ background-color: darken(@dropdown-link-hover-bg, 5%);
}
}
@@ -87,6 +88,7 @@
text-decoration: none;
outline: 0;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+ background-color: darken(@dropdown-link-active-bg, 5%);
}
}
diff --git a/less/grid.less b/less/grid.less
index 395a7947f..5142feb65 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -92,7 +92,7 @@
.col-12 { width: 100%; }
// Small device columns (phones to tablets)
-@media (min-width: @screen-tablet) {
+@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.container {
max-width: @container-tablet;
}
diff --git a/less/list-group.less b/less/list-group.less
index c0eb5f75a..1abc6eb7b 100644
--- a/less/list-group.less
+++ b/less/list-group.less
@@ -25,11 +25,11 @@
// Round the first and last items
&:first-child {
- .border-top-radius(@border-radius-base);
+ .border-top-radius(@list-group-border-radius);
}
&:last-child {
margin-bottom: 0;
- .border-bottom-radius(@border-radius-base);
+ .border-bottom-radius(@list-group-border-radius);
}
// Align badges within list items
@@ -37,6 +37,9 @@
float: right;
margin-right: -15px;
}
+ > .badge + .badge {
+ margin-right: 0;
+ }
}
// Custom content options
diff --git a/less/mixins.less b/less/mixins.less
index b31619521..54fe4c21c 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -236,7 +236,6 @@
// 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-color: @end-color;
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+
@@ -250,7 +249,6 @@
// 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-color: @end-color;
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+
@@ -260,14 +258,12 @@
}
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
- background-color: @end-color;
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
}
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
- background-color: mix(@mid-color, @end-color, 80%);
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);
@@ -275,9 +271,7 @@
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-color: mix(@mid-color, @end-color, 80%);
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);
@@ -286,7 +280,6 @@
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-color: @outer-color;
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);
@@ -294,7 +287,6 @@
background-repeat: no-repeat;
}
.striped(@color: #555; @angle: 45deg) {
- background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
@@ -345,6 +337,17 @@
background-color: @color;
}
+// Panels
+// -------------------------
+.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;
+ }
+}
+
// Alerts
// -------------------------
.alert-variant(@background; @border; @text-color) {
@@ -449,30 +452,32 @@
}
// Creates a wrapper for a series of columns
-.make-row() {
+.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
- @media (min-width: @screen-small) {
- margin-left: (@grid-gutter-width / -2);
- margin-right: (@grid-gutter-width / -2);
+ .container & {
+ @media (min-width: @screen-small) {
+ margin-left: (@gutter / -2);
+ margin-right: (@gutter / -2);
+ }
}
// Negative margin nested rows out to align the content of columns
.row {
- margin-left: (@grid-gutter-width / -2);
- margin-right: (@grid-gutter-width / -2);
+ margin-left: (@gutter / -2);
+ margin-right: (@gutter / -2);
}
}
// Generate the columns
-.make-column(@columns) {
+.make-column(@columns; @gutter: @grid-gutter-width) {
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);
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
@@ -499,14 +504,14 @@
}
// Generate the small columns
-.make-small-column(@columns) {
+.make-small-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
float: left;
// 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);
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
@max-width: (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available
diff --git a/less/navbar.less b/less/navbar.less
index 2efc3545b..c2872e64a 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -20,8 +20,6 @@
// -------------------------
.navbar-nav {
- // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
- margin-top: 10px;
margin-bottom: 15px;
> li > a {
@@ -82,14 +80,26 @@
}
.navbar-fixed-top {
top: 0;
- .nav-collapse {
- }
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
+.nav-collapse {
+ // Space out collapsed contents within the mobile navbar
+ padding-bottom: @navbar-padding-vertical;
+ // Clear floated elements and prevent collapsing of padding
+ .clearfix();
+
+ // When there is no `.navbar-brand` present (which normally sits between the
+ // navbar brand and toggle), prevent the nav from overlapping the toggle.
+ .navbar-toggle + & {
+ width: 100%;
+ margin-top: @navbar-height;
+ }
+}
+
// Scrollable navbar navigation
//
@@ -353,6 +363,7 @@
.nav-collapse.collapse {
display: block !important;
height: auto !important;
+ padding-bottom: 0; // Override default setting
overflow: visible !important;
}
diff --git a/less/panels.less b/less/panels.less
index 87a786524..df20975ee 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -64,42 +64,17 @@
// Contextual variations
.panel-primary {
- border-color: @panel-primary-border;
- .panel-heading {
- color: @panel-primary-text;
- background-color: @panel-primary-heading-bg;
- border-color: @panel-primary-border;
- }
+ .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}
.panel-success {
- border-color: @panel-success-border;
- .panel-heading {
- color: @panel-success-text;
- background-color: @panel-success-heading-bg;
- border-color: @panel-success-border;
- }
+ .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-warning {
- border-color: @panel-warning-border;
- .panel-heading {
- color: @panel-warning-text;
- background-color: @panel-warning-heading-bg;
- border-color: @panel-warning-border;
- }
+ .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
- border-color: @panel-danger-border;
- .panel-heading {
- color: @panel-danger-text;
- background-color: @panel-danger-heading-bg;
- border-color: @panel-danger-border;
- }
+ .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
- border-color: @panel-info-border;
- .panel-heading {
- color: @panel-info-text;
- background-color: @panel-info-heading-bg;
- border-color: @panel-info-border;
- }
+ .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index b6128dc5d..3909704bf 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -93,3 +93,17 @@ hr {
border-top: 1px solid @hr-border;
}
+// Only display content to screen readers
+// See: http://a11yproject.com/posts/how-to-hide-content/
+// -------------------------
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ border: 0;
+}
diff --git a/less/tables.less b/less/tables.less
index 68e33dccd..b3c921dbb 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -162,7 +162,7 @@ table {
> th.active,
&.active > td,
&.active > th {
- background-color: @table-bg-hover;
+ background-color: @table-bg-active;
}
> td.success,
> th.success,
diff --git a/less/tooltip.less b/less/tooltip.less
index 819b9dffd..5a95b8462 100644
--- a/less/tooltip.less
+++ b/less/tooltip.less
@@ -13,7 +13,7 @@
line-height: 1.4;
.opacity(0);
- &.in { .opacity(1); }
+ &.in { .opacity(.9); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
diff --git a/less/variables.less b/less/variables.less
index 27b13c3ab..3a9430e2e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -197,14 +197,16 @@
@screen-medium: 992px;
@screen-desktop: @screen-medium;
-// So media queries don't overlap when required, provide a maximum
-@screen-small-max: (@screen-medium - 1);
-@screen-tablet-max: @screen-small-max;
-
// Large screen / wide desktop
@screen-large: 1200px;
@screen-large-desktop: @screen-large;
+// So media queries don't overlap when required, provide a maximum
+@screen-small-max: (@screen-medium - 1);
+@screen-tablet-max: (@screen-desktop - 1);
+@screen-desktop-max: (@screen-large-desktop - 1);
+
+
// Grid system
// --------------------------------------------------
@@ -356,7 +358,7 @@
// -------------------------
@tooltip-max-width: 200px;
@tooltip-color: #fff;
-@tooltip-bg: rgba(0,0,0,.9);
+@tooltip-bg: #000;
@tooltip-arrow-width: 5px;
@tooltip-arrow-color: @tooltip-bg;