Skip to content

Commit

Permalink
Fixes #9552: Downsize and use whole numbers for panel title to preven…
Browse files Browse the repository at this point in the history 
…t odd 1px bug
  • Loading branch information
@mdo
mdo committed Aug 17, 2013
1 parent ab700d7 commit 82f6f08
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 15 deletions.
2 changes: 1 addition & 1 deletion dist/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2726,7 +2726,7 @@ a.list-group-item:focus {
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 17.5px;
font-size: 16px;

This comment has been minimized.

Sign in to view

Copy link
@ssorallen

ssorallen Aug 19, 2013

Contributor

Why does panel-title have a font-size? This has higher specificity than the header tag selectors, which prevents you from customizing panels with different size titles. For example:

<div class="panel">
  <div class="panel-heading">
    <h1 class="panel-title">A GIANT header</h1>
  </div>
</div>

looks exactly the same as:

<div class="panel">
  <div class="panel-heading">
    <h6 class="panel-title">I'm a teeny little header</h6>
  </div>
</div>

Despite using different header sizes.

This comment has been minimized.

Sign in to view

Copy link
@ssorallen

ssorallen Aug 19, 2013

Contributor

I would go with no font-size for .panel-title and allow it to be customized by using different header sizes.

This comment has been minimized.

Sign in to view

Copy link
@mdo

mdo Aug 19, 2013

Author Member

Because not everything looks great in a panel heading :). Change it if you want, but I don't think we'll tweak that much from here on out. Open a new issue or PR with some thoughts and screenshots and we can talk more though.

This comment has been minimized.

Sign in to view

Copy link
@ssorallen

ssorallen Aug 19, 2013

Contributor

If you want the default font size, you can skip using the panel-title class and put your content directly in panel-heading.

This file already helps you use headers in for panel-title by stripping margin-top and margin-bottom, and so it's unfortunate to not get the font-size out of the header.

// Within heading, strip any h* tag of it's default margins for spacing.
-- https://github.com/twbs/bootstrap/blob/master/less/panels.less#L75

This comment has been minimized.

Sign in to view

Copy link
@ssorallen

ssorallen Aug 19, 2013

Contributor

Thanks for the response by the way. I'll move the discussion to an issue.
}

.panel-title > a {
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap.min.css
View file

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions javascript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1415,11 +1415,11 @@ <h2 id="collapse-examples">Example accordion</h2>
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Expand All @@ -1429,11 +1429,11 @@ <h3 class="panel-title">
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Expand All @@ -1443,11 +1443,11 @@ <h3 class="panel-title">
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Expand All @@ -1461,11 +1461,11 @@ <h3 class="panel-title">
<div class="panel-group" id="accordion">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h3>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Expand All @@ -1475,11 +1475,11 @@ <h3 class="panel-title">
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h3>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Expand All @@ -1489,11 +1489,11 @@ <h3 class="panel-title">
</div>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h3>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Expand Down
2 changes: 1 addition & 1 deletion less/panels.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-size: ceil((@font-size-base * 1.125));
> a {
color: inherit;
}
Expand Down

0 comments on commit 82f6f08

Please sign in to comment.