diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 42b61131e..5e29fd88c 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -19,14 +19,6 @@ Easily realign text to components with text alignment classes.

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

{% endexample %} -{% example html %} -
-
- Curabitur blandit tempus ardua ridiculus sed magna. -
-
-{% endexample %} - For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {% example html %} @@ -40,6 +32,31 @@ For left, right, and center alignment, responsive classes are available that use

Left aligned text on viewports sized XL (extra-large) or wider.

{% endexample %} +## Text wrapping and overflow + +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 +
+
+{% endexample %} + +For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. + +{% example html %} +
+
+ Praeterea iter est quasdam res quas ex communi. +
+
+{% endexample %} + ## Text transform Transform text in components with text capitalization classes. diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 39f164822..d303c48d0 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable PropertyCount +// scss-lint:disable PropertyCount, VendorPrefix // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. @@ -229,7 +229,7 @@ @include box-shadow($custom-file-box-shadow); @each $lang, $text in map-get($custom-file-text, placeholder) { - &:lang(#{$lang})::after { + &:lang(#{$lang}):empty::after { content: $text; } } diff --git a/scss/_forms.scss b/scss/_forms.scss index 85180aa7f..4ec9f6e32 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// scss-lint:disable QualifyingElement, VendorPrefix // // Textual form controls diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 78753af00..c52e6f887 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -22,8 +22,8 @@ html { box-sizing: border-box; // 1 font-family: sans-serif; // 2 line-height: 1.15; // 3 - -ms-text-size-adjust: 100%; // 4 -webkit-text-size-adjust: 100%; // 4 + -ms-text-size-adjust: 100%; // 4 -ms-overflow-style: scrollbar; // 5 -webkit-tap-highlight-color: rgba(0,0,0,0); // 6 } diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 6ed3a81ab..1e9307ebb 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,9 +1,9 @@ // Alerts @mixin alert-variant($background, $border, $body-color) { + color: $body-color; background-color: $background; border-color: $border; - color: $body-color; hr { border-top-color: darken($border, 5%); diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 54f29f41d..2024febcf 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -8,15 +8,15 @@ @mixin border-top-radius($radius) { @if $enable-rounded { - border-top-right-radius: $radius; border-top-left-radius: $radius; + border-top-right-radius: $radius; } } @mixin border-right-radius($radius) { @if $enable-rounded { - border-bottom-right-radius: $radius; border-top-right-radius: $radius; + border-bottom-right-radius: $radius; } } @@ -29,7 +29,7 @@ @mixin border-left-radius($radius) { @if $enable-rounded { - border-bottom-left-radius: $radius; border-top-left-radius: $radius; + border-bottom-left-radius: $radius; } } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index f9981e326..91eb44409 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -48,8 +48,8 @@ @mixin button-outline-variant($color, $color-hover: #fff) { color: $color; - background-image: none; background-color: transparent; + background-image: none; border-color: $color; @include hover { diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index b72cf2712..11a977b73 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { display: block; - content: ""; clear: both; + content: ""; } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 9fde3a8a6..33b186a8d 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -27,8 +27,8 @@ // Set validation states also for addons .input-group-addon { color: $color; - border-color: $color; background-color: lighten($color, 40%); + border-color: $color; } } diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index 8bfd97c4d..bad79f961 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -17,8 +17,8 @@ } @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { - background-repeat: repeat-x; background-image: linear-gradient($deg, $start-color, $end-color); + background-repeat: repeat-x; } @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 9cd8c7bbb..eb6c012f3 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -4,8 +4,8 @@ @mixin make-container($gutters: $grid-gutter-widths) { position: relative; - margin-left: auto; margin-right: auto; + margin-left: auto; @each $breakpoint in map-keys($gutters) { @include media-breakpoint-up($breakpoint) { diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index 6dd55e705..4aa4b1d5d 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -8,16 +8,18 @@ // } // } // @else { +// scss-lint:disable Indentation &:hover { @content } +// scss-lint:enable Indentation // } } + @mixin hover-focus { @if $enable-hover-media-query { &:focus { @content } @include hover { @content } - } - @else { + } @else { &:focus, &:hover { @content @@ -32,8 +34,7 @@ @content } @include hover { @content } - } - @else { + } @else { &, &:focus, &:hover { @@ -49,8 +50,7 @@ @content } @include hover { @content } - } - @else { + } @else { &:focus, &:active, &:hover { diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index 278787bbe..ba27b5041 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -6,6 +6,7 @@ background-color: $background; } + //scss-lint:disable QualifyingElement a.list-group-item-#{$state}, button.list-group-item-#{$state} { color: $color; @@ -21,4 +22,5 @@ border-color: $color; } } + // scss-lint:enable QualifyingElement } diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index b95273097..4cf9e79c7 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -1,17 +1,18 @@ +// scss-lint:disable DuplicateProperty @mixin reset-text { font-family: $font-family-base; // We deliberately do NOT reset font-size or word-wrap. font-style: normal; font-weight: $font-weight-normal; - letter-spacing: normal; - line-break: auto; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported text-align: start; text-decoration: none; text-shadow: none; text-transform: none; - white-space: normal; + letter-spacing: normal; word-break: normal; word-spacing: normal; + white-space: normal; + line-break: auto; } diff --git a/scss/mixins/_resize.scss b/scss/mixins/_resize.scss index 83fa63791..66f233a63 100644 --- a/scss/mixins/_resize.scss +++ b/scss/mixins/_resize.scss @@ -1,6 +1,6 @@ // Resize anything @mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` + resize: $direction; // Options: horizontal, vertical, both } diff --git a/scss/mixins/_text-truncate.scss b/scss/mixins/_text-truncate.scss index 5a40bf533..3504bb1aa 100644 --- a/scss/mixins/_text-truncate.scss +++ b/scss/mixins/_text-truncate.scss @@ -5,4 +5,4 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} \ No newline at end of file +}