From 0a420124ea1cc138ef8e3b0c78607bb4775083ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 22 Dec 2017 16:49:57 -0800 Subject: [PATCH] Restyle code element, remove docs example overflow, improve docs examples (#25054) * Restyle code element, clean up variables - Removes the padding and background-color - Changes the color to a brand color () - Add new variables to kbd element styles to account for removing the code ones - Remove overrides that were needed previously * only break between words, and override it in the pre * make file inputs 100% wide * scope custom file changes in input group for sizing * shorter button labels for responsive * narrower cards * button was too wide * downsize * fewer links in pagination * redo cell text * improve overflow docs --- assets/scss/_component-examples.scss | 1 - docs/4.0/components/buttons.md | 14 +-- docs/4.0/components/card.md | 26 ++--- docs/4.0/components/dropdowns.md | 2 +- docs/4.0/components/jumbotron.md | 4 +- docs/4.0/components/pagination.md | 12 +- docs/4.0/content/tables.md | 166 +++++++++++---------------- docs/4.0/utilities/flex.md | 12 +- docs/4.0/utilities/text.md | 9 +- scss/_code.scss | 14 +-- scss/_forms.scss | 1 + scss/_input-group.scss | 13 +++ 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 %}
{% endexample %} {% example html %} -
+
{% 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 %} -
+
Card image cap

Card title

@@ -50,7 +50,7 @@ Card titles are used by adding `.card-title` to a `` tag. In the same way, l Subtitles are used by adding a `.card-subtitle` to a `` 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 %} -
+

Card title

Card subtitle
@@ -66,7 +66,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` 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 %} -
+
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

@@ -79,7 +79,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t Create lists of content in a card with a flush list group. {% example html %} -
+
  • Cras justo odio
  • Dapibus ac facilisis in
    • @@ -89,7 +89,7 @@ Create lists of content in a card with a flush list group. {% endexample %} {% example html %} -
    +
    Featured
    @@ -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 %} -
    +
    Card image cap

    Card title

    @@ -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 %} -
    +

    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    @@ -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 %} -
    +

    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    @@ -264,7 +264,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
    -
    +

    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    @@ -272,7 +272,7 @@ You can quickly change the text alignment of any card—in its entirety or speci
    -
    +

    Special title treatment

    With supporting text below as a natural lead-in to additional content.

    @@ -383,7 +383,7 @@ Use [text and background utilities]({{ site.baseurl }}/docs/{{ site.docs_version {% example html %} {% for color in site.data.theme-colors %} -
    +
    Header

    {{ color.name | capitalize }} card title

    @@ -401,7 +401,7 @@ Use [border utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities {% example html %} {% for color in site.data.theme-colors %} -
    +
    Header

    {{ color.name | capitalize }} card title

    @@ -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 %} -
    +
    Header

    Success card title

    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 %}
    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 %}
    -

    Hello, world!

    +

    Hello, world!

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    It uses utility classes for typography and spacing to space content out within the larger container.

    @@ -24,7 +24,7 @@ To make the jumbotron full width, and without rounded corners, add the `.jumbotr {% example html %}
    -

    Fluid jumbotron

    +

    Fluid jumbotron

    This is a modified jumbotron that occupies the entire horizontal space of its parent.

    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 {% endexample %} @@ -121,14 +117,10 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for {% 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 # - First Name - Last Name - Username + First + Last + Handle @@ -52,9 +52,9 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta # - First Name - Last Name - Username + First + Last + Handle @@ -89,9 +89,9 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. # - First Name - Last Name - Username + First + Last + Handle @@ -120,9 +120,9 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `. # - First Name - Last Name - Username + First + Last + Handle @@ -157,9 +157,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `` # - First Name - Last Name - Username + First + Last + Handle @@ -190,9 +190,9 @@ Use `.table-striped` to add zebra-striping to any table row within the `` # - First Name - Last Name - Username + First + Last + Handle @@ -227,9 +227,9 @@ Add `.table-bordered` for borders on all sides of the table and cells. # - First Name - Last Name - Username + First + Last + Handle @@ -241,18 +241,12 @@ Add `.table-bordered` for borders on all sides of the table and cells. 2 - Mark - Otto - @TwBootstrap - - - 3 Jacob Thornton @fat - 4 + 3 Larry the Bird @twitter @@ -265,9 +259,9 @@ Add `.table-bordered` for borders on all sides of the table and cells. # - First Name - Last Name - Username + First + Last + Handle @@ -279,18 +273,12 @@ Add `.table-bordered` for borders on all sides of the table and cells. 2 - Mark - Otto - @TwBootstrap - - - 3 Jacob Thornton @fat - 4 + 3 Larry the Bird @twitter @@ -307,9 +295,9 @@ Add `.table-hover` to enable a hover state on table rows within a ``. # - First Name - Last Name - Username + First + Last + Handle @@ -339,9 +327,9 @@ Add `.table-hover` to enable a hover state on table rows within a ``. # - First Name - Last Name - Username + First + Last + Handle @@ -375,9 +363,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. # - First Name - Last Name - Username + First + Last + Handle @@ -407,9 +395,9 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half. # - First Name - Last Name - Username + First + Last + Handle @@ -442,32 +430,28 @@ Use contextual classes to color table rows or individual cells. - - - - + + + - - - + + - - - + + {% for color in site.data.theme-colors %} - - - + + {% endfor %}
    TypeColumn headingColumn headingColumn headingClassHeadingHeading
    ActiveColumn contentColumn contentColumn contentCellCell
    DefaultColumn contentColumn contentColumn contentCellCell
    {{ color.name | capitalize }}Column contentColumn contentColumn contentCellCell
    @@ -494,65 +478,55 @@ Regular table background variants are not available with the dark table, however # - Column heading - Column heading - Column heading + Heading + Heading 1 - Column content - Column content - Column content + Cell + Cell 2 - Column content - Column content - Column content + Cell + Cell 3 - Column content - Column content - Column content + Cell + Cell 4 - Column content - Column content - Column content + Cell + Cell 5 - Column content - Column content - Column content + Cell + Cell 6 - Column content - Column content - Column content + Cell + Cell 7 - Column content - Column content - Column content + Cell + Cell 8 - Column content - Column content - Column content + Cell + Cell 9 - Column content - Column content - Column content + Cell + Cell @@ -594,9 +568,9 @@ A `` functions like a heading for a table. It helps users with screen r # - First Name - Last Name - Username + First + Last + Handle 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`.
    -
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    -
    Flex item
    +
    Flex item
    Flex item
    Flex item
    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 %} -
    -
    - Curabitur blandit tempus ardua ridiculus sed magna. -
    -
    - An image to show the text doesn't wrap -
    +
    + This text should overflow the parent.
    {% 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;