aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-08-13 13:48:33 -0700
committerMark Otto <[email protected]>2013-08-13 13:48:33 -0700
commitbd93ed2cb6034de2f287f7508b4fd0b1d28ab0d3 (patch)
tree2a59b9815cb02226a694c345cf942c9ad869810f /less
parent3c772b1cebfed73570247691917b40fcf3d95aa2 (diff)
parenta8769b8cab1799168b31f1a5afd403f323a6b6d4 (diff)
downloadbootstrap-bd93ed2cb6034de2f287f7508b4fd0b1d28ab0d3.tar.xz
bootstrap-bd93ed2cb6034de2f287f7508b4fd0b1d28ab0d3.zip
Merge branch '3.0.0-wip' into bs3_navbar_overhaul
Conflicts: dist/css/bootstrap.min.css
Diffstat (limited to 'less')
-rw-r--r--less/accordion.less31
-rw-r--r--less/bootstrap.less1
-rw-r--r--less/button-groups.less55
-rw-r--r--less/dropdowns.less1
-rw-r--r--less/forms.less36
-rw-r--r--less/mixins.less55
-rw-r--r--less/pagination.less40
-rw-r--r--less/panels.less50
8 files changed, 151 insertions, 118 deletions
diff --git a/less/accordion.less b/less/accordion.less
deleted file mode 100644
index c3023ac49..000000000
--- a/less/accordion.less
+++ /dev/null
@@ -1,31 +0,0 @@
-//
-// Accordion
-// --------------------------------------------------
-
-
-// Parent container
-.accordion {
- margin-bottom: @line-height-computed;
-}
-
-// Group == heading + body
-.accordion-group {
- margin-bottom: 2px;
- border: 1px solid @accordion-border-color;
- border-radius: @border-radius-base;
-}
-.accordion-heading {
- border-bottom: 0;
-
- .accordion-toggle {
- display: block;
- padding: 8px 15px;
- cursor: pointer;
- }
-}
-
-// Inner needs the styles because you can't animate properly with any styles on the element
-.accordion-inner {
- padding: 9px 15px;
- border-top: 1px solid @accordion-border-color;
-}
diff --git a/less/bootstrap.less b/less/bootstrap.less
index b7f393d7a..accfb92e4 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -55,7 +55,6 @@
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
-@import "accordion.less";
@import "carousel.less";
@import "jumbotron.less";
diff --git a/less/button-groups.less b/less/button-groups.less
index d9c91252b..adaad3f80 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -55,8 +55,13 @@
}
// Prevent double borders when buttons are next to each other
-.btn-group .btn + .btn {
- margin-left: -1px;
+.btn-group {
+ .btn + .btn,
+ .btn + .btn-group,
+ .btn-group + .btn,
+ .btn-group + .btn-group {
+ margin-left: -1px;
+ }
}
// Optional: Group multiple button groups together for a toolbar
@@ -163,26 +168,58 @@
// Vertical button groups
// ----------------------
-.btn-group-vertical > .btn {
- display: block;
- float: none;
- width: 100%;
- max-width: 100%;
- + .btn {
+.btn-group-vertical {
+ > .btn,
+ > .btn-group {
+ display: block;
+ float: none;
+ width: 100%;
+ max-width: 100%;
+ }
+
+ // Clear floats so dropdown menus can be properly placed
+ > .btn-group {
+ .clearfix();
+ > .btn {
+ float: none;
+ }
+ }
+
+ > .btn + .btn,
+ > .btn + .btn-group,
+ > .btn-group + .btn,
+ > .btn-group + .btn-group {
margin-top: -1px;
+ margin-left: 0;
}
}
-.btn-group-vertical .btn {
+
+.btn-group-vertical > .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
+ border-top-right-radius: @border-radius-base;
.border-bottom-radius(0);
}
&:last-child:not(:first-child) {
+ border-bottom-left-radius: @border-radius-base;
.border-top-radius(0);
}
}
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+ border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child {
+ > .btn:last-child,
+ > .dropdown-toggle {
+ .border-bottom-radius(0);
+ }
+}
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+ .border-top-radius(0);
+}
+
// Justified button groups
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 14ce2b473..99cf7d00d 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -38,6 +38,7 @@
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
+ font-size: @font-size-base;
background-color: @dropdown-bg;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
diff --git a/less/forms.less b/less/forms.less
index af575db22..18d3efb54 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -208,43 +208,13 @@ input[type="number"] {
}
-
// Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-.input-lg {
- height: @input-height-large;
- padding: @padding-large-vertical @padding-large-horizontal;
- font-size: @font-size-large;
- line-height: @line-height-large;
- border-radius: @border-radius-large;
-}
.input-sm {
- height: @input-height-small;
- padding: @padding-small-vertical @padding-small-horizontal;
- font-size: @font-size-small;
- line-height: @line-height-small;
- border-radius: @border-radius-small;
+ .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
}
-select {
- &.input-lg {
- height: @input-height-large;
- line-height: @input-height-large;
- }
- &.input-sm {
- height: @input-height-small;
- line-height: @input-height-small;
- }
-}
-textarea {
- &.input-lg,
- &.input-sm {
- height: auto;
- }
+.input-lg {
+ .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
}
diff --git a/less/mixins.less b/less/mixins.less
index 24bce6bbf..701ed2cc3 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -335,6 +335,14 @@
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ + .panel-collapse .panel-body {
+ border-top-color: @border;
+ }
+ }
+ .panel-footer {
+ + .panel-collapse .panel-body {
+ border-bottom-color: @border;
+ }
}
}
@@ -393,6 +401,30 @@
border-radius: @border-radius;
}
+// Pagination
+// -------------------------
+.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
+ > li {
+ > a,
+ > span {
+ padding: @padding-vertical @padding-horizontal;
+ font-size: @font-size;
+ }
+ &:first-child {
+ > a,
+ > span {
+ .border-left-radius(@border-radius);
+ }
+ }
+ &:last-child {
+ > a,
+ > span {
+ .border-right-radius(@border-radius);
+ }
+ }
+ }
+}
+
// Labels
// -------------------------
.label-variant(@color) {
@@ -636,3 +668,26 @@
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+ height: @input-height;
+ padding: @padding-vertical @padding-horizontal;
+ font-size: @font-size;
+ line-height: @line-height;
+ border-radius: @border-radius;
+
+ select& {
+ height: @input-height;
+ line-height: @input-height;
+ }
+
+ textarea& {
+ height: auto;
+ }
+}
diff --git a/less/pagination.less b/less/pagination.less
index 65679beff..12bb71b19 100644
--- a/less/pagination.less
+++ b/less/pagination.less
@@ -63,46 +63,10 @@
// Large
.pagination-lg {
- > li {
- > a,
- > span {
- padding: @padding-large-vertical @padding-large-horizontal;
- font-size: @font-size-large;
- }
- &:first-child {
- > a,
- > span {
- .border-left-radius(@border-radius-large);
- }
- }
- &:last-child {
- > a,
- > span {
- .border-right-radius(@border-radius-large);
- }
- }
- }
+ .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large);
}
// Small
.pagination-sm {
- > li {
- > a,
- > span {
- padding: @padding-small-vertical @padding-small-horizontal;
- font-size: @font-size-small;
- }
- &:first-child {
- > a,
- > span {
- .border-left-radius(@border-radius-small);
- }
- }
- &:last-child {
- > a,
- > span {
- .border-right-radius(@border-radius-small);
- }
- }
- }
+ .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small);
}
diff --git a/less/panels.less b/less/panels.less
index b78f0796a..063973160 100644
--- a/less/panels.less
+++ b/less/panels.less
@@ -5,14 +5,18 @@
// Base class
.panel {
- padding: 15px;
- margin-bottom: 20px;
+ margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid @panel-border;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
+// Panel contents
+.panel-body {
+ padding: 15px;
+}
+
// List groups in panels
//
// By default, space out list group content from panel headings to account for
@@ -20,7 +24,7 @@
.panel {
.list-group {
- margin: 15px -15px -15px;
+ margin-bottom: 0;
.list-group-item {
border-width: 1px 0;
@@ -38,7 +42,6 @@
}
// Collapse space between when there's no additional content.
.panel-heading + .list-group {
- margin-top: -15px;
.list-group-item:first-child {
border-top-width: 0;
}
@@ -46,7 +49,6 @@
// Optional heading
.panel-heading {
- margin: -15px -15px 15px;
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
@@ -65,13 +67,49 @@
// 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-radius(@panel-border-radius - 1);
}
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+ // Tighten up margin so it's only between panels
+ .panel {
+ margin-bottom: 0;
+ border-radius: @panel-border-radius;
+ overflow: hidden; // crop contents when collapsed
+ + .panel {
+ margin-top: 5px;
+ }
+ }
+
+ .panel-heading {
+ border-bottom: 0;
+ + .panel-collapse .panel-body {
+ border-top: 1px solid @panel-border;
+ }
+ }
+ .panel-footer {
+ border-top: 0;
+ + .panel-collapse .panel-body {
+ border-bottom: 1px solid @panel-border;
+ }
+ }
+
+ // New subcomponent for wrapping collapsable content for proper animations
+ .panel-collapse {
+
+ }
+}
+
+
// Contextual variations
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);