rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Refactor panels to have a base class for improved flexibility when customizing (and no overriding to start, too)

Browse Source
This commit is contained in:
Mark Otto 2013-08-18 19:40:57 -07:00
parent d5cd040f57
commit bab51d27ac
10 changed files with 47 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components.html
View File

@ -2673,14 +2673,14 @@ body { padding-bottom: 70px; }
<h3 id="panels-basic">Basic example</h3>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
@ -2690,13 +2690,13 @@ body { padding-bottom: 70px; }
<h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
@ -2706,14 +2706,14 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
@ -2726,7 +2726,7 @@ body { padding-bottom: 70px; }
<h3 id="panels-footer">Panel with footer</h3>
<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>
<div class="bs-example">
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
@ -2734,7 +2734,7 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>

2
dist/css/bootstrap-theme.css vendored
View File

@ -317,7 +317,7 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.panel-heading {
.panel-default > .panel-heading {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e8e8e8, 100%);
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);

2
dist/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
dist/css/bootstrap.css vendored
View File

@ -5254,7 +5254,7 @@ a.list-group-item:focus {
.panel {
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@ -5319,8 +5319,7 @@ a.list-group-item:focus {
.panel-heading {
padding: 10px 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -5369,6 +5368,24 @@ a.list-group-item:focus {
border-bottom: 1px solid #dddddd;
}
.panel-default {
border-color: #dddddd;
}
.panel-default > .panel-heading {
color: #333333;
background-color: #f5f5f5;
border-color: #dddddd;
}
.panel-default > .panel-heading + .panel-collapse .panel-body {
border-top-color: #dddddd;
}
.panel-default > .panel-footer + .panel-collapse .panel-body {
border-bottom-color: #dddddd;
}
.panel-primary {
border-color: #428bca;
}

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
examples/theme/index.html
View File

@ -309,7 +309,7 @@
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>

2
less/mixins.less
View File

@ -340,7 +340,7 @@
// Panels
// -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;

14
less/panels.less
View File

@ -7,7 +7,7 @@
.panel {
margin-bottom: @line-height-computed;
background-color: @panel-bg;
border: 1px solid @panel-border;
border: 1px solid transparent;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
}
@ -71,8 +71,7 @@
// Optional heading
.panel-heading {
padding: 10px 15px;
background-color: @panel-heading-bg;
border-bottom: 1px solid @panel-border;
border-bottom: 1px solid transparent;
.border-top-radius(@panel-border-radius - 1);
}
@ -90,7 +89,7 @@
.panel-footer {
padding: 10px 15px;
background-color: @panel-footer-bg;
border-top: 1px solid @panel-border;
border-top: 1px solid @panel-inner-border;
.border-bottom-radius(@panel-border-radius - 1);
}
@ -114,13 +113,13 @@
.panel-heading {
border-bottom: 0;
+ .panel-collapse .panel-body {
border-top: 1px solid @panel-border;
border-top: 1px solid @panel-inner-border;
}
}
.panel-footer {
border-top: 0;
+ .panel-collapse .panel-body {
border-bottom: 1px solid @panel-border;
border-bottom: 1px solid @panel-inner-border;
}
}
@ -132,6 +131,9 @@
// Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
}

2
less/theme.less
View File

@ -211,7 +211,7 @@
}
// Apply the mixin to the panel headings only
.panel-heading { .panel-heading-styles(@panel-heading-bg); }
.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }

7
less/variables.less
View File

@ -486,11 +486,14 @@
// Panels
// -------------------------
@panel-bg: #fff;
@panel-border: #ddd;
@panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
@panel-footer-bg: #f5f5f5;
@panel-default-text: @gray-dark;
@panel-default-border: #ddd;
@panel-default-heading-bg: #f5f5f5;
@panel-primary-text: #fff;
@panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary;