diff options
-rw-r--r-- | assets/scss/_component-examples.scss | 1 | ||||
-rw-r--r-- | docs/4.0/components/buttons.md | 14 | ||||
-rw-r--r-- | docs/4.0/components/card.md | 26 | ||||
-rw-r--r-- | docs/4.0/components/dropdowns.md | 2 | ||||
-rw-r--r-- | docs/4.0/components/jumbotron.md | 4 | ||||
-rw-r--r-- | docs/4.0/components/pagination.md | 12 | ||||
-rw-r--r-- | docs/4.0/content/tables.md | 166 | ||||
-rw-r--r-- | docs/4.0/utilities/flex.md | 12 | ||||
-rw-r--r-- | docs/4.0/utilities/text.md | 9 | ||||
-rw-r--r-- | scss/_code.scss | 14 | ||||
-rw-r--r-- | scss/_forms.scss | 1 | ||||
-rw-r--r-- | scss/_input-group.scss | 13 | ||||
-rw-r--r-- | scss/_variables.scss | 10 |
13 files changed, 121 insertions, 163 deletions
diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss index cb9b54fb1d..f0a1bd8fd8 100644 --- a/assets/scss/_component-examples.scss +++ b/assets/scss/_component-examples.scss @@ -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(); diff --git a/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md index 6dfed7ddf2..b912ec89b2 100644 --- a/docs/4.0/components/buttons.md +++ b/docs/4.0/components/buttons.md @@ -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 %} diff --git a/docs/4.0/components/card.md b/docs/4.0/components/card.md index af231903f7..0971e90c97 100644 --- a/docs/4.0/components/card.md +++ b/docs/4.0/components/card.md @@ -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> @@ -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> @@ -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> @@ -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> @@ -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> @@ -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> @@ -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> @@ -256,7 +256,7 @@ 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> @@ -264,7 +264,7 @@ You can quickly change the text alignment of any card—in its entirety or speci </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> @@ -272,7 +272,7 @@ You can quickly change the text alignment of any card—in its entirety or speci </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> @@ -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> @@ -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> @@ -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> diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index b49e84f920..fd4132267c 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -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> diff --git a/docs/4.0/components/jumbotron.md b/docs/4.0/components/jumbotron.md index 2d52784129..7b506ccb4a 100644 --- a/docs/4.0/components/jumbotron.md +++ b/docs/4.0/components/jumbotron.md @@ -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> @@ -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> diff --git a/docs/4.0/components/pagination.md b/docs/4.0/components/pagination.md index 97bc84d931..ea82f879cc 100644 --- a/docs/4.0/components/pagination.md +++ b/docs/4.0/components/pagination.md @@ -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 %} @@ -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 %} diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md index 865c2b6986..32089f435c 100644 --- a/docs/4.0/content/tables.md +++ b/docs/4.0/content/tables.md @@ -17,9 +17,9 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -52,9 +52,9 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -89,9 +89,9 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. <thead class="thead-dark"> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -120,9 +120,9 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. <thead class="thead-light"> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -157,9 +157,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -190,9 +190,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>` <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -227,9 +227,9 @@ Add `.table-bordered` for borders on all sides of the table and cells. <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -241,18 +241,12 @@ Add `.table-bordered` for borders on all sides of the table and cells. </tr> <tr> <th scope="row">2</th> - <td>Mark</td> - <td>Otto</td> - <td>@TwBootstrap</td> - </tr> - <tr> - <th scope="row">3</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> - <th scope="row">4</th> + <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> @@ -265,9 +259,9 @@ Add `.table-bordered` for borders on all sides of the table and cells. <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -279,18 +273,12 @@ Add `.table-bordered` for borders on all sides of the table and cells. </tr> <tr> <th scope="row">2</th> - <td>Mark</td> - <td>Otto</td> - <td>@TwBootstrap</td> - </tr> - <tr> - <th scope="row">3</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> - <th scope="row">4</th> + <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> @@ -307,9 +295,9 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -339,9 +327,9 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`. <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -375,9 +363,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -407,9 +395,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> @@ -442,32 +430,28 @@ Use contextual classes to color table rows or individual cells. <table class="table"> <thead> <tr> - <th scope="col">Type</th> - <th scope="col">Column heading</th> - <th scope="col">Column heading</th> - <th scope="col">Column heading</th> + <th scope="col">Class</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> </tr> </thead> <tbody> <tr class="table-active"> <th scope="row">Active</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr> <th scope="row">Default</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> {% for color in site.data.theme-colors %} <tr class="table-{{ color.name }}"> <th scope="row">{{ color.name | capitalize }}</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr>{% endfor %} </tbody> </table> @@ -494,65 +478,55 @@ Regular table background variants are not available with the dark table, however <thead> <tr> <th scope="col">#</th> - <th scope="col">Column heading</th> - <th scope="col">Column heading</th> - <th scope="col">Column heading</th> + <th scope="col">Heading</th> + <th scope="col">Heading</th> </tr> </thead> <tbody> <tr class="bg-primary"> <th scope="row">1</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr> <th scope="row">2</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr class="bg-success"> <th scope="row">3</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr> <th scope="row">4</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr class="bg-info"> <th scope="row">5</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr> <th scope="row">6</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr class="bg-warning"> <th scope="row">7</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr> <th scope="row">8</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> <tr class="bg-danger"> <th scope="row">9</th> - <td>Column content</td> - <td>Column content</td> - <td>Column content</td> + <td>Cell</td> + <td>Cell</td> </tr> </tbody> </table> @@ -594,9 +568,9 @@ A `<caption>` functions like a heading for a table. It helps users with screen r <thead> <tr> <th scope="col">#</th> - <th scope="col">First Name</th> - <th scope="col">Last Name</th> - <th scope="col">Username</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md index 79a0e0618a..441e4343de 100644 --- a/docs/4.0/utilities/flex.md +++ b/docs/4.0/utilities/flex.md @@ -262,17 +262,7 @@ Vertically move one flex item to the top or bottom of a container by mixing `ali Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`. <div class="bd-example"> - <div class="d-flex flex-nowrap bd-highlight"> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> - <div class="p-2 bd-highlight">Flex item</div> + <div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;"> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> diff --git a/docs/4.0/utilities/text.md b/docs/4.0/utilities/text.md index 69b2dee8c8..d8e27df6cc 100644 --- a/docs/4.0/utilities/text.md +++ b/docs/4.0/utilities/text.md @@ -32,13 +32,8 @@ For left, right, and center alignment, responsive classes are available that use Prevent text from wrapping with a `.text-nowrap` class. {% example html %} -<div class="row"> - <div class="col-1 text-nowrap"> - Curabitur blandit tempus ardua ridiculus sed magna. - </div> - <div class="col-11"> - <img data-src="holder.js/50x50" alt="An image to show the text doesn't wrap"> - </div> +<div class="text-nowrap bd-highlight" style="width: 8rem;"> + This text should overflow the parent. </div> {% endexample %} diff --git a/scss/_code.scss b/scss/_code.scss index a9fe624bc2..9de20fa0de 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -8,24 +8,20 @@ samp { // Inline code code { - padding: $code-padding-y $code-padding-x; font-size: $code-font-size; color: $code-color; - background-color: $code-bg; - @include border-radius($border-radius); + word-break: break-word; // Streamline the style when inside anchors to avoid broken underline and more a > & { - padding: 0; color: inherit; - background-color: inherit; } } // User input typically entered via keyboard kbd { - padding: $code-padding-y $code-padding-x; - font-size: $code-font-size; + padding: $kbd-padding-y $kbd-padding-x; + font-size: $kbd-font-size; color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); @@ -47,11 +43,9 @@ pre { // Account for some code outputs that place code tags in pre tags code { - padding: 0; font-size: inherit; color: inherit; - background-color: transparent; - @include border-radius(0); + word-break: normal; } } diff --git a/scss/_forms.scss b/scss/_forms.scss index 72bde5784e..b0954f8c2f 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -76,6 +76,7 @@ select.form-control { .form-control-file, .form-control-range { display: block; + width: 100%; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index 82c6e0ee21..8ca2468e47 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -41,6 +41,15 @@ // Custom file inputs have more complex markup, thus requiring different // border-radius overrides. .custom-file { + display: flex; + align-items: center; + width: 100%; + + .custom-file-input { + width: 100%; + min-width: 0; + } + &:not(:first-child):not(:last-of-type) .custom-file-control, &:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); } &:first-child .custom-file-control, @@ -48,6 +57,10 @@ &:last-of-type:not(:first-child) .custom-file-control, &:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); } } + + .custom-select { + width: 100%; + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 8290c96fc0..b51b99a3a1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -865,12 +865,12 @@ $close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: 90% !default; -$code-padding-y: .2rem !default; -$code-padding-x: .4rem !default; -$code-color: #bd4147 !default; -$code-bg: $gray-100 !default; +$code-font-size: 87.5% !default; +$code-color: $pink !default; +$kbd-padding-y: .2rem !default; +$kbd-padding-x: .4rem !default; +$kbd-font-size: $code-font-size !default; $kbd-color: $white !default; $kbd-bg: $gray-900 !default; |