From 890c6041f3bf70b76244611916bc1286a8150bd5 Mon Sep 17 00:00:00 2001
From: naicko <nico.vandenwinckel@retailsonar.com>
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
+}
--
GitLab