Skip to content

B
bootstrap
Commit f5845002 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #9819 from twbs/bs3_panel_base_class 

BS3: Refactor panels to require default class
parents 2e918436 a1db2d7a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 62 additions and 54 deletions
components.html
View file @ f5845002
...@@ -2669,14 +2669,14 @@ body { padding-bottom: 70px; } ...@@ -2669,14 +2669,14 @@ body { padding-bottom: 70px; }
<h3 id="panels-basic">Basic example</h3> <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> <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="bs-example">
<div class="panel"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
Basic panel example Basic panel example
</div> </div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
Basic panel example Basic panel example
</div> </div>
...@@ -2686,13 +2686,13 @@ body { padding-bottom: 70px; } ...@@ -2686,13 +2686,13 @@ body { padding-bottom: 70px; }
<h3 id="panels-heading">Panel with heading</h3> <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> <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="bs-example">
<div class="panel"> <div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div> <div class="panel-heading">Panel heading without title</div>
<div class="panel-body"> <div class="panel-body">
Panel content Panel content
</div> </div>
</div> </div>
<div class="panel"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
...@@ -2702,14 +2702,14 @@ body { padding-bottom: 70px; } ...@@ -2702,14 +2702,14 @@ body { padding-bottom: 70px; }
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div> <div class="panel-heading">Panel heading without title</div>
<div class="panel-body"> <div class="panel-body">
Panel content Panel content
</div> </div>
</div> </div>
<div class="panel"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
...@@ -2722,7 +2722,7 @@ body { padding-bottom: 70px; } ...@@ -2722,7 +2722,7 @@ body { padding-bottom: 70px; }
<h3 id="panels-footer">Panel with footer</h3> <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> <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="bs-example">
<div class="panel"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
Panel content Panel content
</div> </div>
...@@ -2730,7 +2730,7 @@ body { padding-bottom: 70px; } ...@@ -2730,7 +2730,7 @@ body { padding-bottom: 70px; }
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="panel"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
Panel content Panel content
</div> </div>
......
customize.html
View file @ f5845002
...@@ -931,83 +931,69 @@ base_url: "../" ...@@ -931,83 +931,69 @@ base_url: "../"
</div> </div>
<h2 id="variables-panels-wells">Panels and wells</h2> <h2 id="variables-panels-wells">Panels and wells</h2>
<h3>Default panel styles</h3> <h3>Common panel styles</h3>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<label>@panel-bg</label> <label>@panel-bg</label>
<input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg"> <input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
<p class="help-block">Panel body background color</p> <label>@panel-inner-border</label>
<label>@panel-heading-bg</label> <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-inner-border">
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-heading-bg"> <p class="help-block">Border color for elements within panels</p>
<p class="help-block">Panel heading background color</p>
<label>@panel-footer-bg</label>
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
<p class="help-block">Panel footer background color</p>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<label>@panel-border</label>
<input type="text" class="form-control" placeholder="#ddd" data-var="@panel-border">
<p class="help-block">Panel border color</p>
<label>@panel-border-radius</label> <label>@panel-border-radius</label>
<input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius"> <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius">
<p class="help-block">Panel border radius</p> <label>@panel-footer-bg</label>
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
</div> </div>
</div> </div>
<h3>Contextual panel colors</h3> <h3>Contextual panel colors</h3>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<h4>Default</h4>
<label>@panel-default-text</label>
<input type="text" class="form-control" placeholder="@gray-dark" data-var="@panel-default-text">
<label>@panel-default-border</label>
<input type="text" class="form-control" placeholder="#ddd" data-var="@panel-default-border">
<label>@panel-default-heading-bg</label>
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-default-heading-bg">
<h4>Primary</h4> <h4>Primary</h4>
<label>@panel-primary-text</label> <label>@panel-primary-text</label>
<input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text"> <input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text">
<p class="help-block">Primary text color</p>
<label>@panel-primary-border</label> <label>@panel-primary-border</label>
<input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border"> <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border">
<p class="help-block">Primary border color</p>
<label>@panel-primary-heading-bg</label> <label>@panel-primary-heading-bg</label>
<input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg"> <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg">
<p class="help-block">Primary heading background color</p>
<h4>Success</h4> <h4>Success</h4>
<label>@panel-success-text</label> <label>@panel-success-text</label>
<input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text"> <input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text">
<p class="help-block">Success text color</p>
<label>@panel-success-border</label> <label>@panel-success-border</label>
<input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border"> <input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border">
<p class="help-block">Success border color</p>
<label>@panel-success-heading-bg</label> <label>@panel-success-heading-bg</label>
<input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg"> <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg">
<p class="help-block">Success heading background color</p> </div>
<div class="col-lg-6">
<h4>Info</h4> <h4>Info</h4>
<label>@panel-info-text</label> <label>@panel-info-text</label>
<input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text"> <input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text">
<p class="help-block">Info text color</p>
<label>@panel-info-border</label> <label>@panel-info-border</label>
<input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border"> <input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border">
<p class="help-block">Info border color</p>
<label>@panel-info-heading-bg</label> <label>@panel-info-heading-bg</label>
<input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg"> <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg">
<p class="help-block">Info heading background color</p>
</div>
<div class="col-lg-6">
<h4>Warning</h4> <h4>Warning</h4>
<label>@panel-warning-text</label> <label>@panel-warning-text</label>
<input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text"> <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text">
<p class="help-block">Warning text color</p>
<label>@panel-warning-border</label> <label>@panel-warning-border</label>
<input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border"> <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border">
<p class="help-block">Warning border color</p>
<label>@panel-warning-heading-bg</label> <label>@panel-warning-heading-bg</label>
<input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg"> <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg">
<p class="help-block">Warning heading background color</p>
<h4>Danger</h4> <h4>Danger</h4>
<label>@panel-danger-text</label> <label>@panel-danger-text</label>
<input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text"> <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text">
<p class="help-block">Danger text color</p>
<label>@panel-danger-border</label> <label>@panel-danger-border</label>
<input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border"> <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border">
<p class="help-block">Danger border color</p>
<label>@panel-danger-heading-bg</label> <label>@panel-danger-heading-bg</label>
<input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg"> <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg">
<p class="help-block">Danger heading background color</p>
</div> </div>
</div> </div>
......
dist/css/bootstrap-theme.css
View file @ f5845002
...@@ -317,7 +317,7 @@ ...@@ -317,7 +317,7 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 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-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e8e8e8, 100%); background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e8e8e8, 100%);
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
......
dist/css/bootstrap-theme.min.css
View file @ f5845002
This diff is collapsed.
dist/css/bootstrap.css
View file @ f5845002
...@@ -5261,7 +5261,7 @@ a.list-group-item:focus { ...@@ -5261,7 +5261,7 @@ a.list-group-item:focus {
.panel { .panel {
margin-bottom: 20px; margin-bottom: 20px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #dddddd; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
...@@ -5326,8 +5326,7 @@ a.list-group-item:focus { ...@@ -5326,8 +5326,7 @@ a.list-group-item:focus {
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
background-color: #f5f5f5; border-bottom: 1px solid transparent;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
...@@ -5376,6 +5375,24 @@ a.list-group-item:focus { ...@@ -5376,6 +5375,24 @@ a.list-group-item:focus {
border-bottom: 1px solid #dddddd; 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 { .panel-primary {
border-color: #428bca; border-color: #428bca;
} }
......
dist/css/bootstrap.min.css
View file @ f5845002
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/theme/index.html
View file @ f5845002
...@@ -309,7 +309,7 @@ ...@@ -309,7 +309,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="panel"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Panel title</h3> <h3 class="panel-title">Panel title</h3>
</div> </div>
......
less/mixins.less
View file @ f5845002
...@@ -340,7 +340,7 @@ ...@@ -340,7 +340,7 @@
// Panels // 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; border-color: @border;
& > .panel-heading { & > .panel-heading {
color: @heading-text-color; color: @heading-text-color;
......
less/panels.less
View file @ f5845002
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
.panel { .panel {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
background-color: @panel-bg; background-color: @panel-bg;
border: 1px solid @panel-border; border: 1px solid transparent;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05)); .box-shadow(0 1px 1px rgba(0,0,0,.05));
} }
...@@ -71,8 +71,7 @@ ...@@ -71,8 +71,7 @@
// Optional heading // Optional heading
.panel-heading { .panel-heading {
padding: 10px 15px; padding: 10px 15px;
background-color: @panel-heading-bg; border-bottom: 1px solid transparent;
border-bottom: 1px solid @panel-border;
.border-top-radius(@panel-border-radius - 1); .border-top-radius(@panel-border-radius - 1);
} }
...@@ -90,7 +89,7 @@ ...@@ -90,7 +89,7 @@
.panel-footer { .panel-footer {
padding: 10px 15px; padding: 10px 15px;
background-color: @panel-footer-bg; 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); .border-bottom-radius(@panel-border-radius - 1);
} }
...@@ -114,13 +113,13 @@ ...@@ -114,13 +113,13 @@
.panel-heading { .panel-heading {
border-bottom: 0; border-bottom: 0;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-top: 1px solid @panel-border; border-top: 1px solid @panel-inner-border;
} }
} }
.panel-footer { .panel-footer {
border-top: 0; border-top: 0;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-bottom: 1px solid @panel-border; border-bottom: 1px solid @panel-inner-border;
} }
} }
...@@ -132,6 +131,9 @@ ...@@ -132,6 +131,9 @@
// Contextual variations // Contextual variations
.panel-default {
.panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
}
.panel-primary { .panel-primary {
.panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
} }
......
less/theme.less
View file @ f5845002
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
} }
// Apply the mixin to the panel headings only // 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-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); } .panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); } .panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
......
less/variables.less
View file @ f5845002
...@@ -486,11 +486,14 @@ ...@@ -486,11 +486,14 @@
// Panels // Panels
// ------------------------- // -------------------------
@panel-bg: #fff; @panel-bg: #fff;
@panel-border: #ddd; @panel-inner-border: #ddd;
@panel-border-radius: @border-radius-base; @panel-border-radius: @border-radius-base;
@panel-heading-bg: #f5f5f5;
@panel-footer-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-text: #fff;
@panel-primary-border: @brand-primary; @panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary; @panel-primary-heading-bg: @brand-primary;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment