diff options
| author | Mark Otto <[email protected]> | 2013-08-13 13:48:33 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-13 13:48:33 -0700 |
| commit | bd93ed2cb6034de2f287f7508b4fd0b1d28ab0d3 (patch) | |
| tree | 2a59b9815cb02226a694c345cf942c9ad869810f /less | |
| parent | 3c772b1cebfed73570247691917b40fcf3d95aa2 (diff) | |
| parent | a8769b8cab1799168b31f1a5afd403f323a6b6d4 (diff) | |
| download | bootstrap-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.less | 31 | ||||
| -rw-r--r-- | less/bootstrap.less | 1 | ||||
| -rw-r--r-- | less/button-groups.less | 55 | ||||
| -rw-r--r-- | less/dropdowns.less | 1 | ||||
| -rw-r--r-- | less/forms.less | 36 | ||||
| -rw-r--r-- | less/mixins.less | 55 | ||||
| -rw-r--r-- | less/pagination.less | 40 | ||||
| -rw-r--r-- | less/panels.less | 50 |
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); |
