Merge pull request #18752 from twbs/v4-docs-scsslint

v4: Docs Sass linting

Gruntfile.js

@@ -213,7 +213,12 @@ module.exports = function (grunt) {
         config: 'scss/.scss-lint.yml',
         reporterOutput: null
       },
-      src: ['scss/*.scss', '!scss/_normalize.scss']
+      core: {
+        src: ['scss/*.scss', '!scss/_normalize.scss']
+      },
+      docs: {
+        src: ['docs/assets/scss/*.scss', '!scss/_normalize.scss', '!docs/assets/scss/docs.scss']
+      }
     },
 
     postcss: {
@@ -462,7 +467,7 @@ module.exports = function (grunt) {
   // JS distribution task.
   grunt.registerTask('dist-js', ['babel:dev', 'concat', 'lineremover', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
 
-  grunt.registerTask('test-scss', ['scsslint']);
+  grunt.registerTask('test-scss', ['scsslint:core']);
 
   // CSS distribution task.
   // Supported Compilers: sass (Ruby) and libsass.
@@ -491,7 +496,7 @@ module.exports = function (grunt) {
   });
 
   // Docs task.
-  grunt.registerTask('docs-css', ['postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
+  grunt.registerTask('docs-css', ['scsslint:docs', 'postcss:docs', 'postcss:examples', 'csscomb:docs', 'csscomb:examples', 'cssmin:docs']);
   grunt.registerTask('docs-js', ['uglify:docsJs']);
   grunt.registerTask('lint-docs-js', ['jscs:assets']);
   grunt.registerTask('docs', ['docs-css', 'docs-js', 'lint-docs-js', 'clean:docs', 'copy:docs']);

docs/assets/scss/_ads.scss

@@ -8,8 +8,8 @@
   padding: 1.25rem !important;
   margin: 2rem ($grid-gutter-width * -1) -2rem !important;
   overflow: hidden; // clearfix
-  font-size: .8rem !important;
   font-family: inherit !important;
+  font-size: .8rem !important;
   line-height: 1rem !important;
   color: $bd-purple-light !important;
   text-align: left;
@@ -49,10 +49,6 @@
   }
 }
 
-.carbonad #azcarbon > img {
-  display: none; // hide what I assume are tracking images
-}
-
 @include media-breakpoint-up(sm) {
   .carbonad {
     width: 330px !important;

docs/assets/scss/_anchor.scss

@@ -10,9 +10,7 @@
 
 *:hover > .anchorjs-link {
   opacity: .75;
-  -webkit-transition: color .16s linear;
-       -o-transition: color .16s linear;
-          transition: color .16s linear;
+  transition: color .16s linear;
 }
 
 *:hover > .anchorjs-link:hover,

docs/assets/scss/_buttons.scss

@@ -11,7 +11,7 @@
   &:focus,
   &:active {
     color: #fff;
-    background-color:$bd-purple-bright;
+    background-color: $bd-purple-bright;
     border-color: $bd-purple-bright;
   }
 }

docs/assets/scss/_component-examples.scss

@@ -23,8 +23,8 @@
 .bd-example-container {
   min-width: 16rem;
   max-width: 25rem;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 
 .bd-example-container-header {
@@ -67,10 +67,10 @@
   @include clearfix();
 
   @include media-breakpoint-up(sm) {
-    margin-left: 0;
+    padding: 1.5rem;
     margin-right: 0;
     margin-bottom: 0;
-    padding: 1.5rem;
+    margin-left: 0;
     border-width: .2rem;
   }
 
@@ -177,7 +177,7 @@
 }
 
 // Navbars
-.bd-example  {
+.bd-example {
   .navbar-fixed-top {
     position: static;
     margin: -1rem -1rem 1rem;
@@ -334,15 +334,3 @@
   font-size: inherit;
   color: $gray-dark; // Effectively the base text color
 }
-
-
-// Pseudo focus
-//
-// Custom `:focus` state for showing how it looks in the docs.
-
-#focusedInput {
-  border-color: $input-border-focus;
-  outline: 0;
-  outline: thin dotted \9; // IE9
-  box-shadow: 0 0 .5rem $input-box-shadow-focus;
-}

docs/assets/scss/_content.scss

+// scss-lint:disable IdSelector
+
 //
 // Automatically style Markdown-based tables like a Bootstrap `.table`.
 //
@@ -7,8 +9,8 @@
     display: block;
     width: 100%;
     max-width: 100%;
-    overflow-y: auto;
     margin-bottom: $spacer;
+    overflow-y: auto;
 
     // Cells
     > thead,

docs/assets/scss/_footer.scss

@@ -6,8 +6,8 @@
   padding: 4rem 0;
   margin-top: 4rem;
   font-size: 85%;
-  background-color: #f7f7f7;
   text-align: center;
+  background-color: #f7f7f7;
 
   a {
     font-weight: 500;

docs/assets/scss/_masthead.scss

@@ -3,9 +3,7 @@
   padding: 3rem ($grid-gutter-width / 2) 2rem;
   color: $bd-purple-light;
   text-align: center;
-  background-image: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
-  background-image:         linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(darken($bd-purple, 20%))}', endColorstr='#{ie-hex-str(lighten(saturate($bd-purple, 5%), 15%))}', gradientType='1');   /* For IE9 */
+  background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
 
   .bd-booticon {
     margin: 0 auto 2rem;
@@ -19,9 +17,9 @@
   }
 
   .lead {
-    margin-left: auto;
     margin-right: auto;
     margin-bottom: 2rem;
+    margin-left: auto;
     font-size: 1.25rem;
     color: #fff;
   }

docs/assets/scss/_sidebar.scss

@@ -36,8 +36,8 @@
   }
 
   .dropdown-item {
-    padding-left: .75rem;
     padding-right: .75rem;
+    padding-left: .75rem;
 
     &:first-child { margin-top: .25rem; }
     &:last-child { margin-bottom: .25rem; }

docs/assets/scss/_skiplink.scss

+// scss-lint:disable IdSelector
+
 #skippy {
   display: block;
   padding: 1em;

docs/assets/scss/_syntax.scss

-.hll { background-color: #ffffcc }
+.hll { background-color: #ffc; }
 .c { color: #999; }
-.err { color: #AA0000; background-color: #FFAAAA }
-.k { color: #006699; }
-.o { color: #555555 }
+.err { color: #a00; background-color: #faa; }
+.k { color: #069; }
+.o { color: #555; }
 .cm { color: #999; }
-.cp { color: #009999 }
+.cp { color: #099; }
 .c1 { color: #999; }
 .cs { color: #999; }
-.gd { background-color: #FFCCCC; border: 1px solid #CC0000 }
-.ge { font-style: italic }
-.gr { color: #FF0000 }
-.gh { color: #003300; }
-.gi { background-color: #CCFFCC; border: 1px solid #00CC00 }
-.go { color: #AAAAAA }
-.gp { color: #000099; }
-.gu { color: #003300; }
-.gt { color: #99CC66 }
-.kc { color: #006699; }
-.kd { color: #006699; }
-.kn { color: #006699; }
-.kp { color: #006699 }
-.kr { color: #006699; }
-.kt { color: #007788; }
-.m { color: #FF6600 }
-.s { color: #d44950 }
-.na { color: #4f9fcf }
-.nb { color: #336666 }
-.nc { color: #00AA88; }
-.no { color: #336600 }
-.nd { color: #9999FF }
-.ni { color: #999999; }
-.ne { color: #CC0000; }
-.nf { color: #CC00FF }
-.nl { color: #9999FF }
-.nn { color: #00CCFF; }
+.gd { background-color: #fcc; border: 1px solid #c00; }
+.ge { font-style: italic; }
+.gr { color: #f00; }
+.gh { color: #030; }
+.gi { background-color: #cfc; border: 1px solid #0c0; }
+.go { color: #aaa; }
+.gp { color: #009; }
+.gu { color: #030; }
+.gt { color: #9c6; }
+.kc { color: #069; }
+.kd { color: #069; }
+.kn { color: #069; }
+.kp { color: #069; }
+.kr { color: #069; }
+.kt { color: #078; }
+.m { color: #f60; }
+.s { color: #d44950; }
+.na { color: #4f9fcf; }
+.nb { color: #366; }
+.nc { color: #0a8; }
+.no { color: #360; }
+.nd { color: #99f; }
+.ni { color: #999; }
+.ne { color: #c00; }
+.nf { color: #c0f; }
+.nl { color: #99f; }
+.nn { color: #0cf; }
 .nt { color: #2f6f9f; }
-.nv { color: #003333 }
-.ow { color: #000000; }
-.w { color: #bbbbbb }
-.mf { color: #FF6600 }
-.mh { color: #FF6600 }
-.mi { color: #FF6600 }
-.mo { color: #FF6600 }
-.sb { color: #CC3300 }
-.sc { color: #CC3300 }
-.sd { color: #CC3300; font-style: italic }
-.s2 { color: #CC3300 }
-.se { color: #CC3300; }
-.sh { color: #CC3300 }
-.si { color: #AA0000 }
-.sx { color: #CC3300 }
-.sr { color: #33AAAA }
-.s1 { color: #CC3300 }
-.ss { color: #FFCC33 }
-.bp { color: #336666 }
-.vc { color: #003333 }
-.vg { color: #003333 }
-.vi { color: #003333 }
-.il { color: #FF6600 }
+.nv { color: #033; }
+.ow { color: #000; }
+.w { color: #bbb; }
+.mf { color: #f60; }
+.mh { color: #f60; }
+.mi { color: #f60; }
+.mo { color: #f60; }
+.sb { color: #c30; }
+.sc { color: #c30; }
+.sd { font-style: italic; color: #c30; }
+.s2 { color: #c30; }
+.se { color: #c30; }
+.sh { color: #c30; }
+.si { color: #a00; }
+.sx { color: #c30; }
+.sr { color: #3aa; }
+.s1 { color: #c30; }
+.ss { color: #fc3; }
+.bp { color: #366; }
+.vc { color: #033; }
+.vg { color: #033; }
+.vi { color: #033; }
+.il { color: #f60; }
 
 .css .o,
 .css .o + .nt,

docs/assets/scss/_team.scss

@@ -12,11 +12,11 @@
   }
 
   .github-btn {
-    border: none;
     float: right;
     width: 180px;
     height: 1.25rem;
     margin-top: .25rem;
+    border: 0;
   }
 
   img {