From 890c6041f3bf70b76244611916bc1286a8150bd5 Mon Sep 17 00:00:00 2001 From: naicko Date: Sat, 18 Mar 2017 21:06:05 +0100 Subject: [PATCH 1/3] Update scss mixins to comply with scss-linting rules (#22151) * Fixed some linting issues * Run npm tasks after scss cleanup * Revert "Run npm tasks after scss cleanup" This reverts commit 1103a0da68d1846ad592eb4a105046a939557830. * Property sort order for grid * Let's respest the property order in the mixins * Respect property sort order in reboot file * ::-ms-expand is a vendor-prefix, add it to the scss-lint disable * Revert hover mixin comment * Fixed missing mixin hover-focus --- scss/_custom-forms.scss | 2 +- scss/_forms.scss | 2 +- scss/_reboot.scss | 2 +- scss/mixins/_alert.scss | 2 +- scss/mixins/_border-radius.scss | 6 +++--- scss/mixins/_buttons.scss | 2 +- scss/mixins/_clearfix.scss | 2 +- scss/mixins/_forms.scss | 2 +- scss/mixins/_gradients.scss | 2 +- scss/mixins/_grid.scss | 2 +- scss/mixins/_hover.scss | 12 ++++++------ scss/mixins/_list-group.scss | 2 ++ scss/mixins/_reset-text.scss | 7 ++++--- scss/mixins/_resize.scss | 2 +- scss/mixins/_text-truncate.scss | 2 +- 15 files changed, 26 insertions(+), 23 deletions(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 39f164822c..da40d7c508 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. diff --git a/scss/_forms.scss b/scss/_forms.scss index 85180aa7f6..4ec9f6e329 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 78753af004..c52e6f887d 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 6ed3a81ab1..1e9307ebbe 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 54f29f41da..2024febcfa 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 f9981e326a..91eb44409f 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 b72cf27128..11a977b737 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 9fde3a8a6f..33b186a8de 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 8bfd97c4d8..bad79f9617 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 9cd8c7bbbb..eb6c012f3f 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 6dd55e705a..4aa4b1d5d4 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 278787bbed..ba27b5041d 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 b952730977..4cf9e79c74 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 83fa637917..66f233a63c 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 5a40bf533a..3504bb1aa5 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 +} From 860181212dd5111a90cfba75033e2f4b373c8d63 Mon Sep 17 00:00:00 2001 From: jak Date: Thu, 9 Mar 2017 19:36:32 +0000 Subject: [PATCH 2/3] docs: add text-truncate and extend on text-nowrap --- docs/utilities/typography.md | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 42b61131e2..5e29fd88cd 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. From 6f42daf747f094188478bc76b83ce998c2a87e19 Mon Sep 17 00:00:00 2001 From: Theriault Date: Sat, 18 Mar 2017 14:23:10 -0600 Subject: [PATCH 3/3] Add :empty to .custom-file-control selector (#22176) VS --- scss/_custom-forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index da40d7c508..d303c48d0b 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -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; } }