From 890c6041f3bf70b76244611916bc1286a8150bd5 Mon Sep 17 00:00:00 2001 From: naicko Date: Sat, 18 Mar 2017 21:06:05 +0100 Subject: [PATCH] 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 +}