// 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
+// any kind of custom content between the two.
+
+.panel {
+ > .list-group {
+ margin-bottom: 0;
+
+ .list-group-item {
+ border-width: 1px 0;
+
+ // Remove border radius for top one
+ &:first-child {
+ .border-top-radius(0);
+ }
+ // But keep it for the last one
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+ }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+ .list-group-item:first-child {
+ border-top-width: 0;
+ }
+}
+
// Optional heading
.panel-heading {
- margin: -15px -15px 15px;
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
- border-top-left-radius: (@panel-border-radius - 1);
- border-top-right-radius: (@panel-border-radius - 1);
+ .border-top-radius(@panel-border-radius - 1);
}
// Within heading, strip any `h*` tag of it's default margins for spacing.
margin-top: 0;
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
- font-weight: 500;
+ > a {
+ color: inherit;
+ }
}
// 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-left-radius: (@panel-border-radius - 1);
- border-bottom-right-radius: (@panel-border-radius - 1);
+ .border-bottom-radius(@panel-border-radius - 1);
}
-// Contextual variations
-.panel-primary {
- border-color: @panel-primary-border;
+
+// 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 {
- color: @panel-primary-text;
- background-color: @panel-primary-heading-bg;
- border-color: @panel-primary-border;
+ 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);
+}
.panel-success {
- border-color: @panel-success-border;
- .panel-heading {
- color: @panel-success-text;
- background-color: @panel-success-heading-bg;
- border-color: @panel-success-border;
- }
+ .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}
.panel-warning {
- border-color: @panel-warning-border;
- .panel-heading {
- color: @panel-warning-text;
- background-color: @panel-warning-heading-bg;
- border-color: @panel-warning-border;
- }
+ .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
}
.panel-danger {
- border-color: @panel-danger-border;
- .panel-heading {
- color: @panel-danger-text;
- background-color: @panel-danger-heading-bg;
- border-color: @panel-danger-border;
- }
+ .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
}
.panel-info {
- border-color: @panel-info-border;
- .panel-heading {
- color: @panel-info-text;
- background-color: @panel-info-heading-bg;
- border-color: @panel-info-border;
- }
-}
-
-// List groups in panels
-.list-group-flush {
- margin: 15px -15px -15px;
-
- .list-group-item {
- border-width: 1px 0;
-
- // Remove border radius for top one
- &:first-child {
- .border-top-radius(0);
- }
- // But keep it for the last one
- &:last-child {
- border-bottom: 0;
- }
- }
+ .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
}