mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
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 1103a0da68
.
* 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
This commit is contained in:
parent
08984ac8cd
commit
890c6041f3
15 changed files with 26 additions and 23 deletions
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable PropertyCount
|
// scss-lint:disable PropertyCount, VendorPrefix
|
||||||
|
|
||||||
// Embedded icons from Open Iconic.
|
// Embedded icons from Open Iconic.
|
||||||
// Released under MIT and copyright 2014 Waybury.
|
// Released under MIT and copyright 2014 Waybury.
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
// scss-lint:disable QualifyingElement
|
// scss-lint:disable QualifyingElement, VendorPrefix
|
||||||
|
|
||||||
//
|
//
|
||||||
// Textual form controls
|
// Textual form controls
|
||||||
|
|
|
@ -22,8 +22,8 @@ html {
|
||||||
box-sizing: border-box; // 1
|
box-sizing: border-box; // 1
|
||||||
font-family: sans-serif; // 2
|
font-family: sans-serif; // 2
|
||||||
line-height: 1.15; // 3
|
line-height: 1.15; // 3
|
||||||
-ms-text-size-adjust: 100%; // 4
|
|
||||||
-webkit-text-size-adjust: 100%; // 4
|
-webkit-text-size-adjust: 100%; // 4
|
||||||
|
-ms-text-size-adjust: 100%; // 4
|
||||||
-ms-overflow-style: scrollbar; // 5
|
-ms-overflow-style: scrollbar; // 5
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
|
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
// Alerts
|
// Alerts
|
||||||
|
|
||||||
@mixin alert-variant($background, $border, $body-color) {
|
@mixin alert-variant($background, $border, $body-color) {
|
||||||
|
color: $body-color;
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
border-color: $border;
|
border-color: $border;
|
||||||
color: $body-color;
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-top-color: darken($border, 5%);
|
border-top-color: darken($border, 5%);
|
||||||
|
|
|
@ -8,15 +8,15 @@
|
||||||
|
|
||||||
@mixin border-top-radius($radius) {
|
@mixin border-top-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-top-right-radius: $radius;
|
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: $radius;
|
||||||
|
border-top-right-radius: $radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin border-right-radius($radius) {
|
@mixin border-right-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-right-radius: $radius;
|
|
||||||
border-top-right-radius: $radius;
|
border-top-right-radius: $radius;
|
||||||
|
border-bottom-right-radius: $radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
|
|
||||||
@mixin border-left-radius($radius) {
|
@mixin border-left-radius($radius) {
|
||||||
@if $enable-rounded {
|
@if $enable-rounded {
|
||||||
border-bottom-left-radius: $radius;
|
|
||||||
border-top-left-radius: $radius;
|
border-top-left-radius: $radius;
|
||||||
|
border-bottom-left-radius: $radius;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,8 +48,8 @@
|
||||||
|
|
||||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-image: none;
|
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@mixin clearfix() {
|
@mixin clearfix() {
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
content: "";
|
|
||||||
clear: both;
|
clear: both;
|
||||||
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,8 +27,8 @@
|
||||||
// Set validation states also for addons
|
// Set validation states also for addons
|
||||||
.input-group-addon {
|
.input-group-addon {
|
||||||
color: $color;
|
color: $color;
|
||||||
border-color: $color;
|
|
||||||
background-color: lighten($color, 40%);
|
background-color: lighten($color, 40%);
|
||||||
|
border-color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,8 +17,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
|
@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-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) {
|
@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);
|
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
|
|
||||||
@mixin make-container($gutters: $grid-gutter-widths) {
|
@mixin make-container($gutters: $grid-gutter-widths) {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
@each $breakpoint in map-keys($gutters) {
|
@each $breakpoint in map-keys($gutters) {
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
|
|
|
@ -8,16 +8,18 @@
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// @else {
|
// @else {
|
||||||
|
// scss-lint:disable Indentation
|
||||||
&:hover { @content }
|
&:hover { @content }
|
||||||
|
// scss-lint:enable Indentation
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin hover-focus {
|
@mixin hover-focus {
|
||||||
@if $enable-hover-media-query {
|
@if $enable-hover-media-query {
|
||||||
&:focus { @content }
|
&:focus { @content }
|
||||||
@include hover { @content }
|
@include hover { @content }
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
@content
|
@content
|
||||||
|
@ -32,8 +34,7 @@
|
||||||
@content
|
@content
|
||||||
}
|
}
|
||||||
@include hover { @content }
|
@include hover { @content }
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
&,
|
&,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -49,8 +50,7 @@
|
||||||
@content
|
@content
|
||||||
}
|
}
|
||||||
@include hover { @content }
|
@include hover { @content }
|
||||||
}
|
} @else {
|
||||||
@else {
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active,
|
&:active,
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
background-color: $background;
|
background-color: $background;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//scss-lint:disable QualifyingElement
|
||||||
a.list-group-item-#{$state},
|
a.list-group-item-#{$state},
|
||||||
button.list-group-item-#{$state} {
|
button.list-group-item-#{$state} {
|
||||||
color: $color;
|
color: $color;
|
||||||
|
@ -21,4 +22,5 @@
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// scss-lint:enable QualifyingElement
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,17 +1,18 @@
|
||||||
|
// scss-lint:disable DuplicateProperty
|
||||||
@mixin reset-text {
|
@mixin reset-text {
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
// We deliberately do NOT reset font-size or word-wrap.
|
// We deliberately do NOT reset font-size or word-wrap.
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
letter-spacing: normal;
|
|
||||||
line-break: auto;
|
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
text-align: left; // Fallback for where `start` is not supported
|
text-align: left; // Fallback for where `start` is not supported
|
||||||
text-align: start;
|
text-align: start;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
white-space: normal;
|
letter-spacing: normal;
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
word-spacing: normal;
|
word-spacing: normal;
|
||||||
|
white-space: normal;
|
||||||
|
line-break: auto;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// Resize anything
|
// Resize anything
|
||||||
|
|
||||||
@mixin resizable($direction) {
|
@mixin resizable($direction) {
|
||||||
resize: $direction; // Options: horizontal, vertical, both
|
|
||||||
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
|
||||||
|
resize: $direction; // Options: horizontal, vertical, both
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,4 +5,4 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue