aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-12-08 02:00:37 -0800
committerMark Otto <[email protected]>2013-12-08 02:00:37 -0800
commitc37b710e85e379ddffb305af8a765013c0cd0333 (patch)
tree8c23e05b150a14a39c2be90b39d03343b8c994f7 /less
parentb5008ebf9ca1c9c90a6ec73ae12e55a8f155017f (diff)
parente43e87b2f30a9f4967818f1ce8d25a4f88a1f490 (diff)
downloadbootstrap-c37b710e85e379ddffb305af8a765013c0cd0333.tar.xz
bootstrap-c37b710e85e379ddffb305af8a765013c0cd0333.zip
Merge branch 'master' into pr/11744
Conflicts: dist/css/bootstrap.min.css
Diffstat (limited to 'less')
-rw-r--r--less/buttons.less8
-rw-r--r--less/code.less10
-rw-r--r--less/grid.less27
-rw-r--r--less/list-group.less26
-rw-r--r--less/mixins.less63
-rw-r--r--less/navbar.less22
-rw-r--r--less/tables.less3
-rw-r--r--less/type.less1
-rw-r--r--less/variables.less5
9 files changed, 127 insertions, 38 deletions
diff --git a/less/buttons.less b/less/buttons.less
index 62e693bee..b728f332c 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -56,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);
@@ -64,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);
diff --git a/less/code.less b/less/code.less
index 44e9e8937..3eed26c05 100644
--- a/less/code.less
+++ b/less/code.less
@@ -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;
diff --git a/less/grid.less b/less/grid.less
index 279d80368..dfae6999b 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -2,7 +2,11 @@
// Grid system
// --------------------------------------------------
-// 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();
@@ -17,12 +21,30 @@
}
}
-// mobile first defaults
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+ .container-fixed();
+}
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
.row {
.make-row();
}
+
+// Columns
+//
// Common styles for small and large grid columns
+
.make-grid-columns();
@@ -76,4 +98,3 @@
.make-grid(@grid-columns, lg, push);
.make-grid(@grid-columns, lg, offset);
}
-
diff --git a/less/list-group.less b/less/list-group.less
index 2cee52973..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;
@@ -41,7 +45,12 @@
}
}
+
// 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.
+
a.list-group-item {
color: @list-group-link-color;
@@ -75,8 +84,21 @@ a.list-group-item {
}
}
+
+// 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 5c54c64c7..9ef72fef7 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -150,10 +150,10 @@
-ms-transform: rotate(@degrees); // IE9+
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+
+ transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
@@ -414,26 +414,53 @@
.table-row-variant(@state; @background) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
- .table {
- > thead,
- > tbody,
- > tfoot {
- > tr > .@{state},
- > .@{state} > td,
- > .@{state} > th {
- background-color: @background;
- }
+ .table > thead > tr,
+ .table > tbody > tr,
+ .table > tfoot > tr {
+ > td.@{state},
+ > th.@{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 > .@{state}:hover,
- > .@{state}:hover > td,
- > .@{state}:hover > th {
+ .table-hover > tbody > tr {
+ > td.@{state}:hover,
+ > th.@{state}:hover,
+ &.@{state}:hover > td,
+ &.@{state}:hover > th {
+ background-color: darken(@background, 5%);
+ }
+ }
+}
+
+// List Groups
+// -------------------------
+.list-group-item-variant(@state; @background; @color) {
+ .list-group-item-@{state} {
+ color: @color;
+ background-color: @background;
+ }
+ a.list-group-item-@{state} {
+ 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;
+ }
}
}
@@ -475,7 +502,7 @@
.badge {
color: @background;
- background-color: #fff;
+ background-color: @color;
}
}
diff --git a/less/navbar.less b/less/navbar.less
index ea284fede..e9633d855 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -93,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;
-
- @media (min-width: @grid-float-breakpoint) {
- margin-right: 0;
- margin-left: 0;
+.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;
+ }
}
}
@@ -159,7 +162,8 @@
}
@media (min-width: @grid-float-breakpoint) {
- .navbar > .container & {
+ .navbar > .container &,
+ .navbar > .container-fluid & {
margin-left: -@navbar-padding-horizontal;
}
}
diff --git a/less/tables.less b/less/tables.less
index ca565f4b7..f8c05fecf 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -156,8 +156,9 @@ table {
// Generate the contextual variants
.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);
+.table-row-variant(danger; @state-danger-bg);
+.table-row-variant(info; @state-info-bg);
// Responsive tables
diff --git a/less/type.less b/less/type.less
index ac07ac7ce..0c9600d50 100644
--- a/less/type.less
+++ b/less/type.less
@@ -120,6 +120,7 @@ cite { font-style: normal; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
+.text-justify { text-align: justify; }
// Page header
diff --git a/less/variables.less b/less/variables.less
index 8b5f2184d..3681e99b5 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -286,7 +286,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;
@@ -602,6 +602,9 @@
@code-color: #c7254e;
@code-bg: #f9f2f4;
+@kbd-color: #fff;
+@kbd-bg: #333;
+
@pre-bg: #f5f5f5;
@pre-color: @gray-dark;
@pre-border-color: #ccc;