Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restyle code element, remove docs example overflow, improve docs examples #25054

Merged
merged 12 commits into from
Dec 23, 2017
Merged

Restyle code element, remove docs example overflow, improve docs examples #25054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
904e947
Restyle code element, clean up variables
mdo Dec 22, 2017
3a3dcf4
only break between words, and override it in the pre
mdo Dec 22, 2017
5c36160
make file inputs 100% wide
mdo Dec 22, 2017
b74f5db
scope custom file changes in input group for sizing
mdo Dec 22, 2017
fd7bcba
shorter button labels for responsive
mdo Dec 22, 2017
3b8adbe
narrower cards
mdo Dec 22, 2017
9a5e90c
button was too wide
mdo Dec 22, 2017
d55c55e
downsize
mdo Dec 22, 2017
303425b
fewer links in pagination
mdo Dec 22, 2017
cd9c8f9
redo cell text
mdo Dec 22, 2017
94eabbe
improve overflow docs
mdo Dec 22, 2017
e7e8179
Merge branch 'v4-dev' into code-scrollbars-kbd-oh-my
mdo Dec 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion assets/scss/_component-examples.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@
position: relative;
padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2);
overflow: auto;
border: solid #f7f7f9;
border-width: .2rem 0 0;
@include clearfix();
Expand Down
14 changes: 7 additions & 7 deletions docs/4.0/components/buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,27 +125,27 @@ Note that pre-checked buttons require you to manually add the `.active` class to
{% example html %}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
<input type="checkbox" checked autocomplete="off"> Active
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Checkbox 2
<input type="checkbox" autocomplete="off"> Check
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Checkbox 3
<input type="checkbox" autocomplete="off"> Check
</label>
</div>
{% endexample %}

{% example html %}
<div class="btn-group" data-toggle="buttons">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
{% endexample %}
Expand Down
26 changes: 13 additions & 13 deletions docs/4.0/components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Cards are built with as little markup and styles as possible, but still manage t
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
Expand Down Expand Up @@ -50,7 +50,7 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
Expand All @@ -66,7 +66,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Expand All @@ -79,7 +79,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
Create lists of content in a card with a flush list group.

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
Expand All @@ -89,7 +89,7 @@ Create lists of content in a card with a flush list group.
{% endexample %}

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
Expand All @@ -106,7 +106,7 @@ Create lists of content in a card with a flush list group.
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
Expand Down Expand Up @@ -242,7 +242,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
Use custom CSS in your stylesheets or as inline styles to set a width.

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -256,23 +256,23 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).

{% example html %}
<div class="card" style="width: 20rem;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

<div class="card text-center" style="width: 20rem;">
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

<div class="card text-right" style="width: 20rem;">
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Expand Down Expand Up @@ -383,7 +383,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version

{% example html %}
{% for color in site.data.theme-colors %}
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 20rem;">
<div class="card{% unless color.name == "light" %} text-white{% endunless %} bg-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4>
Expand All @@ -401,7 +401,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities

{% example html %}
{% for color in site.data.theme-colors %}
<div class="card border-{{ color.name }} mb-3" style="max-width: 20rem;">
<div class="card border-{{ color.name }} mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body{% unless color.name == "light" %} text-{{ color.name }}{% endunless %}">
<h4 class="card-title">{{ color.name | capitalize }} card title</h4>
Expand All @@ -415,7 +415,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities
You can also change the borders on the card header and footer as needed, and even remove their `background-color` with `.bg-transparent`.

{% example html %}
<div class="card border-success mb-3" style="max-width: 20rem;">
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h4 class="card-title">Success card title</h4>
Expand Down
2 changes: 1 addition & 1 deletion docs/4.0/components/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{% example html %}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
Expand Down
4 changes: 2 additions & 2 deletions docs/4.0/components/jumbotron.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ A lightweight, flexible component that can optionally extend the entire viewport

{% example html %}
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
Expand All @@ -24,7 +24,7 @@ To make the jumbotron full width, and without rounded corners, add the `.jumbotr
{% example html %}
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
Expand Down
12 changes: 2 additions & 10 deletions docs/4.0/components/pagination.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,14 +105,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
{% endexample %}
Expand All @@ -121,14 +117,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
{% endexample %}
Expand Down
Loading