aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
Diffstat (limited to 'less')
-rw-r--r--less/button-groups.less34
-rw-r--r--less/carousel.less1
-rw-r--r--less/dropdowns.less11
-rw-r--r--less/forms.less14
-rw-r--r--less/grid.less26
-rw-r--r--less/jumbotron.less4
-rw-r--r--less/mixins.less44
-rw-r--r--less/modals.less6
-rw-r--r--less/navbar.less42
-rw-r--r--less/navs.less20
-rw-r--r--less/panels.less8
-rw-r--r--less/progress-bars.less12
-rw-r--r--less/tables.less38
-rw-r--r--less/thumbnails.less32
-rw-r--r--less/type.less3
-rw-r--r--less/variables.less15
16 files changed, 106 insertions, 204 deletions
diff --git a/less/button-groups.less b/less/button-groups.less
index c25357622..87f643d74 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 {
@@ -178,7 +147,8 @@
.btn-group-vertical {
> .btn,
- > .btn-group {
+ > .btn-group,
+ > .btn-group > .btn {
display: block;
float: none;
width: 100%;
diff --git a/less/carousel.less b/less/carousel.less
index 317963b7f..e53365df4 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -91,6 +91,7 @@
// Hover/focus state
&:hover,
&:focus {
+ outline: none;
color: @carousel-control-color;
text-decoration: none;
.opacity(.9);
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 5d7e0fb4e..1a8f1973f 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)
@@ -163,10 +160,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: @caret-width-base solid @dropdown-caret-color;
+ border-top: 0;
+ border-bottom: @caret-width-base solid;
content: "";
}
// Different positioning for bottom up menu
diff --git a/less/forms.less b/less/forms.less
index f6bbce596..a74babdb3 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -92,14 +92,6 @@ output {
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();
-}
-
// Common form controls
//
@@ -142,6 +134,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,
diff --git a/less/grid.less b/less/grid.less
index 67e78f760..f5256be54 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -5,6 +5,16 @@
// 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;
+ }
}
// mobile first defaults
@@ -18,8 +28,8 @@
// 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.
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
//
// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
// it's full-width.
@@ -40,10 +50,6 @@
// it's full-width.
@media (min-width: @screen-sm-min) {
- .container {
- width: @container-sm;
- }
-
.make-grid-columns-float(sm);
.make-grid(@grid-columns, sm, width);
.make-grid(@grid-columns, sm, pull);
@@ -60,10 +66,6 @@
// it's full-width.
@media (min-width: @screen-md-min) {
- .container {
- width: @container-md;
- }
-
.make-grid-columns-float(md);
.make-grid(@grid-columns, md, width);
.make-grid(@grid-columns, md, pull);
@@ -80,10 +82,6 @@
// it's full-width.
@media (min-width: @screen-lg-min) {
- .container {
- width: @container-lg;
- }
-
.make-grid-columns-float(lg);
.make-grid(@grid-columns, lg, width);
.make-grid(@grid-columns, lg, pull);
diff --git a/less/jumbotron.less b/less/jumbotron.less
index 720bda7d3..0460b69d4 100644
--- a/less/jumbotron.less
+++ b/less/jumbotron.less
@@ -25,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);
diff --git a/less/mixins.less b/less/mixins.less
index 4718cb2c0..df515f39a 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -30,8 +30,8 @@
// 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
}
@@ -391,7 +392,7 @@
// 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 {
@@ -402,9 +403,6 @@
+ .panel-collapse .panel-body {
border-top-color: @border;
}
- & > .dropdown .caret {
- border-color: @heading-text-color transparent;
- }
}
& > .panel-footer {
+ .panel-collapse .panel-body {
@@ -430,27 +428,27 @@
// 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,
- .table > tbody > tr,
- .table > tfoot > tr {
- > td.@{state},
- > th.@{state},
- &.@{state} > td,
- &.@{state} > th {
- background-color: @background;
+ .table {
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr > .@{state},
+ > .@{state} > td,
+ > .@{state} > th {
+ background-color: @background;
+ }
}
}
// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
- .table-hover > tbody > tr {
- > td.@{state}:hover,
- > th.@{state}:hover,
- &.@{state}:hover > td,
- &.@{state}:hover > th {
+ .table-hover > tbody {
+ > tr > .@{state}:hover,
+ > .@{state}:hover > td,
+ > .@{state}:hover > th {
background-color: darken(@background, 5%);
}
}
@@ -750,7 +748,7 @@
.col(1); // kickstart it
}
-.calc-grid(@index, @class, @type) when (@type = width) {
+.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
@@ -772,7 +770,7 @@
}
// Basic looping in LESS
-.make-grid(@index, @class, @type) when (@index > 0) {
+.make-grid(@index, @class, @type) when (@index >= 0) {
.calc-grid(@index, @class, @type);
// next iteration
.make-grid(@index - 1, @class, @type);
diff --git a/less/modals.less b/less/modals.less
index 99cf76469..c9feb7f18 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -38,7 +38,7 @@
margin-left: auto;
margin-right: auto;
width: auto;
- padding: 10px;
+ margin: 10px;
z-index: (@zindex-modal-background + 10);
}
@@ -122,8 +122,8 @@
.modal-dialog {
width: 600px;
- padding-top: 30px;
- padding-bottom: 30px;
+ margin-top: 30px;
+ margin-bottom: 30px;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
diff --git a/less/navbar.less b/less/navbar.less
index 987cde6b0..bae180be7 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -180,6 +180,7 @@
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
+ background-image: none; // Fix for at least Firefox on Android, per #11468
border: 1px solid transparent;
border-radius: @border-radius-base;
@@ -340,10 +341,10 @@
// 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;
}
@@ -414,15 +415,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 {
&,
@@ -430,17 +424,8 @@
&: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) {
// Dropdowns get custom display when collapsed
@@ -561,24 +546,6 @@
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) {
// Dropdowns get custom display
@@ -586,6 +553,9 @@
> .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 6cddcd494..859d5d866 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -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;
- }
}
}
}
@@ -243,16 +233,6 @@
// 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/panels.less b/less/panels.less
index 84a12d1ed..549588073 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -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;
@@ -96,7 +100,7 @@
border-bottom: 1px solid transparent;
.border-top-radius(@panel-border-radius - 1);
- & > .dropdown .dropdown-toggle {
+ > .dropdown .dropdown-toggle {
color: inherit;
}
}
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 507c82dbd..76c87be17 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -12,18 +12,6 @@
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; }
diff --git a/less/tables.less b/less/tables.less
index 0deadc782..7192c4d5e 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;
+ }
}
}
@@ -148,21 +152,11 @@ 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(danger; @state-danger-bg);
+.table-row-variant(warning; @state-warning-bg);
// Responsive tables
diff --git a/less/thumbnails.less b/less/thumbnails.less
index a09aa9b83..43e7d1d26 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -5,27 +5,31 @@
// 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-responsive();
margin-left: auto;
margin-right: auto;
}
-}
-
-// Add a hover state for linked versions only
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
- border-color: @link-color;
-}
+ // Add a hover state for linked versions only
+ a&:hover,
+ a&:focus,
+ a&.active {
+ border-color: @link-color;
+ }
-// Image captions
-.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 437c70b76..982d94f59 100644
--- a/less/type.less
+++ b/less/type.less
@@ -233,7 +233,8 @@ blockquote {
p:last-child {
margin-bottom: 0;
}
- small {
+ small,
+ .small {
display: block;
line-height: @line-height-base;
color: @blockquote-small-color;
diff --git a/less/variables.less b/less/variables.less
index e596215d0..120a65e06 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -41,7 +41,7 @@
@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;
@@ -157,7 +157,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,8 +186,6 @@
@dropdown-header-color: @gray-light;
-@dropdown-caret-color: #000;
-
// COMPONENT VARIABLES
// --------------------------------------------------
@@ -321,7 +319,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;
@@ -375,19 +372,19 @@
// 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%);