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

Merge pull request #9819 from twbs/bs3_panel_base_class

Browse Source 
BS3: Refactor panels to require default class
This commit is contained in:
Mark Otto 2013-08-18 20:11:36 -07:00
commit f584500211
11 changed files with 62 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components.html
View File

@ -2669,14 +2669,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>
@ -2686,13 +2686,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>
@ -2702,14 +2702,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>
@ -2722,7 +2722,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>
@ -2730,7 +2730,7 @@ body { padding-bottom: 70px; }
</div>
</div>
{% highlight html %}
<div class="panel">
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>

44
customize.html
View File

@ -931,83 +931,69 @@ base_url: "../"
</div>
<h2 id="variables-panels-wells">Panels and wells</h2>
<h3>Default panel styles</h3>
<h3>Common panel styles</h3>
<div class="row">
<div class="col-lg-6">
<label>@panel-bg</label>
<input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
<p class="help-block">Panel body background color</p>
<label>@panel-heading-bg</label>
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-heading-bg">
<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>
<label>@panel-inner-border</label>
<input type="text" class="form-control" placeholder="#ddd" data-var="@panel-inner-border">
<p class="help-block">Border color for elements within panels</p>
</div>
<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>
<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>
<h3>Contextual panel colors</h3>
<div class="row">
<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>
<label>@panel-primary-text</label>
<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>
<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>
<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>
<label>@panel-success-text</label>
<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>
<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>
<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>
<label>@panel-info-text</label>
<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>
<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>
<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>
<label>@panel-warning-text</label>
<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>
<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>
<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>
<label>@panel-danger-text</label>
<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>
<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>
<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>

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

@ -5261,7 +5261,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);
@ -5326,8 +5326,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;
}
@ -5376,6 +5375,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;