Integrate grunt-scss-lint and fixes some scss for warning by lint check

.travis.yml

@@ -6,7 +6,7 @@ before_install:
 install:
   - travis_retry npm install -g grunt-cli
   - travis_retry npm install
-  - travis_retry gem install --no-document "jekyll:~>2.5.3" "rouge:~>1.7.7" "sass:~>3.4.10"
+  - travis_retry gem install --no-document "jekyll:~>2.5.3" "rouge:~>1.7.7" "sass:~>3.4.10" "scss-lint:~>0.27.0"
 matrix:
   fast_finish: true
 notifications:

Gruntfile.js

@@ -254,6 +254,13 @@ module.exports = function (grunt) {
       }
     },
 
+    scsslint: {
+      scss: ['<%= meta.srcPath %>*.scss', '!<%= meta.srcPath %>normalize.scss'],
+      options: {
+        config: 'sass/.scss-lint.yml'
+      }
+    },
+
     csslint: {
       options: {
         csslintrc: 'sass/.csslintrc'
@@ -310,7 +317,7 @@ module.exports = function (grunt) {
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
   grunt.registerTask('build', ['dist']);
   grunt.registerTask('default', ['dist']);
-  grunt.registerTask('test', ['dist', 'csslint', 'jshint', 'jscs', 'validate-html']);
+  grunt.registerTask('test', ['dist', 'scsslint', 'csslint', 'jshint', 'jscs', 'validate-html']);
 
   grunt.registerTask('build-ratchicons-data', generateRatchiconsData);
 

dist/css/ratchet-theme-android.css

@@ -143,7 +143,7 @@ a:active {
 .btn-link {
   color: #33b5e5;
   background-color: transparent;
-  border: none;
+  border: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
 }

dist/css/ratchet-theme-ios.css

@@ -96,7 +96,7 @@ p {
 .btn-link {
   color: #007aff;
   background-color: transparent;
-  border: none;
+  border: 0;
 }
 .btn-link:active, .btn-link.active {
   color: #0062cc;

docs/assets/css/docs.css

@@ -1059,7 +1059,7 @@ hr {
 .platform-ios .btn-link {
   color: #007aff;
   background-color: transparent;
-  border: none;
+  border: 0;
 }
 .platform-ios .btn-link:active, .platform-ios .btn-link.active {
   color: #0062cc;
@@ -1523,7 +1523,7 @@ hr {
 .platform-android .btn-link {
   color: #33b5e5;
   background-color: transparent;
-  border: none;
+  border: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
 }

docs/dist/css/ratchet-theme-android.css

@@ -143,7 +143,7 @@ a:active {
 .btn-link {
   color: #33b5e5;
   background-color: transparent;
-  border: none;
+  border: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
 }

docs/dist/css/ratchet-theme-ios.css

@@ -96,7 +96,7 @@ p {
 .btn-link {
   color: #007aff;
   background-color: transparent;
-  border: none;
+  border: 0;
 }
 .btn-link:active, .btn-link.active {
   color: #0062cc;

package.json

@@ -41,6 +41,7 @@
     "grunt-html-validation": "~0.1.18",
     "grunt-jekyll": "~0.4.2",
     "grunt-jscs": "~1.2.0",
+    "grunt-scss-lint": "~0.3.4",
     "grunt-sed": "~0.1.1",
     "load-grunt-tasks": "~3.1.0",
     "time-grunt": "~1.0.0"

sass/.scss-lint.yml

@@ -0,0 +1,116 @@
+# Default application configuration that all configurations inherit from.
+linters:
+  BorderZero:
+    enabled: true
+
+  CapitalizationInSelector:
+    enabled: false
+
+  ColorKeyword:
+    enabled: true
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: true
+
+  EmptyLineBetweenBlocks:
+    enabled: false
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdWithExtraneousSelector:
+    enabled: true
+
+  Indentation:
+    enabled: false
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: false
+
+  NameFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'BEM', or a regex pattern
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 4
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerSelector:
+    enabled: false
+
+  SpaceAfterComma:
+    enabled: false
+
+  SpaceAfterPropertyColon:
+    enabled: false
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: false
+
+  SpaceBetweenParens:
+    enabled: false
+
+  StringQuotes:
+    enabled: false
+
+  TrailingSemicolonAfterPropertyValue:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

sass/docs.scss

@@ -266,7 +266,7 @@ body {
       margin-left: -10px;
       border-right: 10px solid transparent;
       border-bottom: 10px solid #fff;
-      border-left: 10px solid transparent
+      border-left: 10px solid transparent;
     }
     .docs-component-item {
       display: block;
@@ -686,7 +686,7 @@ code {
   width: 100%;
   text-align: center;
   font-size: 24px;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 10px rgba(0, 0, 0, .5);
   color: #fff;
 }
 .component-example-fullbleed,

sass/theme-android.scss

@@ -21,13 +21,13 @@ $line-height-default: 22px !global;
 //
 // Main theme colors
 $primary-color:  #33b5e5 !global;
-$chrome-color:   #dddddd !global;
+$chrome-color:   #ddd !global;
 $text-color:     #222 !global;
 
 // Action colors
 $default-color:  #999 !global;
-$positive-color: #99cc00 !global;
-$negative-color: #ff4444 !global;
+$positive-color: #9c0 !global;
+$negative-color: #f44 !global;
 
 // Bars
 $bar-base-height: 50px !global;
@@ -200,7 +200,7 @@ a {
 .btn-link {
   color: $primary-color;
   background-color: transparent;
-  border: none;
+  border: 0;
   @include box-shadow(none);
 
   &:active,

sass/theme-ios.scss

@@ -149,7 +149,7 @@ p {
 .btn-link {
   color: $primary-color;
   background-color: transparent;
-  border: none;
+  border: 0;
 
   &:active,
   &.active {
@@ -480,7 +480,7 @@ textarea,
 
 .popover {
   border-radius: 12px;
-  @include transition(-webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
+  @include transition(-webkit-transform .2s ease-in-out, opacity .2s ease-in-out);
 
   &:before {
     border-bottom: 15px solid $chrome-color;