diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/accordion.less | 31 | ||||
| -rw-r--r-- | less/bootstrap.less | 1 | ||||
| -rw-r--r-- | less/mixins.less | 8 | ||||
| -rw-r--r-- | less/panels.less | 50 |
4 files changed, 52 insertions, 38 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/mixins.less b/less/mixins.less index b65b6ac34..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; + } } } 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); |