Fix scss linter errors and bugfix in snackbar

javivelasco · javivelasco · commit 54ad233dd663 · 2015-11-18T01:15:07.000+01:00
diff --git a/.csscomb.json b/.csscomb.json
@@ -18,7 +18,7 @@
   "space-before-opening-brace": 1,
   "strip-spaces": true,
   "unitless-zero": true,
-  "vendor-prefix-align": true,
+  "vendor-prefix-align": false,
   "sort-order": [
     [
       "$variable",
diff --git a/.scss-lint.yml b/.scss-lint.yml
@@ -1,5 +1,7 @@
 scss_files: "./components/**/*.scss"
 
+exclude: "./node_modules"
+
 linters:
   BangFormat:
     enabled: true
diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SelectorFormat
 @import "../base";
 
 .enter, .leave {
diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SelectorFormat
 @import "../base";
 
 .enter, .leave {
diff --git a/components/commons.scss b/components/commons.scss
@@ -138,9 +138,9 @@ body[data-flex] {
 }
 
 [data-flex*="center"] {
-  justify-content: center;
   align-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 [data-flex-justify="start"] {
diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
@@ -8,8 +8,8 @@
 .header {
   padding: 1.6 * $unit 2 * $unit;
   color: $datepicker-primary-contrast-color;
-  background-color: $datepicker-primary-color;
   cursor: pointer;
+  background-color: $datepicker-primary-color;
 }
 
 .year {
diff --git a/components/form/style.scss b/components/form/style.scss
@@ -1,5 +1,3 @@
-.root {
-  & > :last-child {
-    margin-bottom: 0 !important;
-  }
+.root > :last-child {
+  margin-bottom: 0;
 }
diff --git a/components/input/style.scss b/components/input/style.scss
@@ -44,7 +44,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time']{
+  &:focus, &.filled, &[type='date'], &[type='time'] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
@@ -36,7 +36,7 @@ class Overlay extends React.Component {
     const overlayStyle = {};
 
     if (this.props.active) {
-      if (this.props.opacity > 0) className += ` ${style.active}`;
+      className += ` ${style.active}`;
       overlayStyle.opacity = this.props.opacity;
     }
     if (this.props.className) className += ` ${className}`;
diff --git a/components/progress_bar/style.scss b/components/progress_bar/style.scss
@@ -8,7 +8,6 @@
   height: $progress-height;
   overflow: hidden;
   background: $color-divider;
-
   &.indeterminate .value {
     transform-origin: center center;
     animation: linear-indeterminate-bar 1s linear infinite;
@@ -33,7 +32,7 @@
 
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-                      linear-gradient(to right, $progress-main-color, $progress-main-color);
+  linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
 .circular {
@@ -42,21 +41,19 @@
   width: $circle-wrapper-width * 1px;
   height: $circle-wrapper-width * 1px;
   transform: rotate(-90deg);
-
   &.indeterminate {
     .circle {
       animation: circular-indeterminate-bar-rotate 2s linear infinite;
     }
-
     .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+
       stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
       stroke-dashoffset: 0;
     }
-
     &.multicolor .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
-                       colors (1.5s * 4) ease-in-out infinite;
+      colors (1.5s * 4) ease-in-out infinite;
     }
   }
 }
@@ -68,13 +65,14 @@
 
 .path {
   transition: stroke-dasharray $animation-duration $animation-curve-default;
+  fill: none;
+
   stroke-dasharray: 0, $scale-ratio * 200;
   stroke-dashoffset: 0;
   stroke-linecap: round;
   stroke-miterlimit: 20;
   stroke-width: 4;
   stroke: $progress-main-color;
-  fill: none;
 }
 
 @keyframes linear-indeterminate-bar {
diff --git a/components/snackbar/_config.scss b/components/snackbar/_config.scss
@@ -1,6 +1,9 @@
+$snackbar-color-cancel: unquote("rgb(#{$palette-red-500})") !default;
+$snackbar-color-accept: unquote("rgb(#{$palette-green-500})") !default;
+$snackbar-color-warning: unquote("rgb(#{$palette-lime-a200})") !default;
 $snackbar-background-color: $color-text !default;
-$snackbar-border-radius: .2 * $unit;
-$snackbar-button-offset: 4.8 * $unit;
+$snackbar-border-radius: .2 * $unit !default;
+$snackbar-button-offset: 4.8 * $unit !default;
 $snackbar-color: unquote("rgb(#{$color-white})") !default;
-$snackbar-horizontal-offset: 2.4 * $unit;
-$snackbar-vertical-offset: 1.4 * $unit;
+$snackbar-horizontal-offset: 2.4 * $unit !default;
+$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/components/snackbar/style.scss b/components/snackbar/style.scss
@@ -1,29 +1,30 @@
 @import "../base";
 @import "./config";
 
+
 .root {
-  z-index: $z-index-higher;
   position: fixed;
+  right: $snackbar-horizontal-offset;
   bottom: 0;
   left: $snackbar-horizontal-offset;
-  right: $snackbar-horizontal-offset;
-  margin: 0 auto;
+  z-index: $z-index-higher;
   display: flex;
   align-items: center;
   padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
+  margin: 0 auto;
   margin-top: $snackbar-vertical-offset;
   color: $snackbar-color;
   background-color: $snackbar-background-color;
   border-radius: $snackbar-border-radius;
   transition: all $animation-duration $animation-curve-default $animation-duration;
   &.accept .button {
-    color: green;
+    color: $snackbar-color-accept;
   }
   &.warning .button {
-    color: orange;
+    color: $snackbar-color-warning;
   }
   &.cancel .button {
-    color: red;
+    color: $snackbar-color-cancel;
   }
   &:not(.active) {
     transform: translateY(100%);
@@ -45,11 +46,7 @@
 .button {
   min-width: inherit;
   margin-top: - $snackbar-vertical-offset / 2;
-  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-right: - $snackbar-horizontal-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-left: $snackbar-button-offset;
-  color: white;
-  > abbr {
-    line-height: inherit;
-  }
 }
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   "main": "./lib",
   "scripts": {
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
-    "lint": "eslint ./ --ext .js,.jsx",
+    "lint": "eslint ./ --ext .js,.jsx && scss-lint",
     "babel": "babel ./components --out-dir ./lib",
     "sass": "cpx './components/**/*.scss' ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
@@ -29,14 +29,14 @@ class SnackbarTest extends React.Component {
         <p>lorem ipsum...</p>
         <Button label='Show snackbar' primary raised onClick={this.handleClick} />
         <Snackbar
-          action='Dismiss'
+          action='Hide'
           active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
           timeout={2}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
-          type='cancel'
+          type='warning'
         />
       </section>
     );

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`"space-before-opening-brace": 1,`
`19`	`19`	`"strip-spaces": true,`
`20`	`20`	`"unitless-zero": true,`
`21`		`- "vendor-prefix-align": true,`
	`21`	`+ "vendor-prefix-align": false,`
`22`	`22`	`"sort-order": [`
`23`	`23`	`[`
`24`	`24`	`"$variable",`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+// scss-lint:disable SelectorFormat`
`1`	`2`	`@import "../base";`
`2`	`3`
`3`	`4`	`.enter, .leave {`
Original file line number	Diff line number	Diff line change
`@@ -138,9 +138,9 @@ body[data-flex] {`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`[data-flex*="center"] {`
`141`		`- justify-content: center;`
`142`	`141`	`align-content: center;`
`143`	`142`	`align-items: center;`
	`143`	`+ justify-content: center;`
`144`	`144`	`}`
`145`	`145`
`146`	`146`	`[data-flex-justify="start"] {`
Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@`
`8`	`8`	`.header {`
`9`	`9`	`padding: 1.6 * $unit 2 * $unit;`
`10`	`10`	`color: $datepicker-primary-contrast-color;`
`11`		`- background-color: $datepicker-primary-color;`
`12`	`11`	`cursor: pointer;`
	`12`	`+ background-color: $datepicker-primary-color;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.year {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-.root {`
`2`		`- & > :last-child {`
`3`		`- margin-bottom: 0 !important;`
`4`		`- }`
	`1`	`+.root > :last-child {`
	`2`	`+ margin-bottom: 0;`
`5`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@`
`44`	`44`	`color: $input-text-highlight-color;`
`45`	`45`	`}`
`46`	`46`	`}`
`47`		`- &:focus, &.filled, &[type='date'], &[type='time']{`
	`47`	`+ &:focus, &.filled, &[type='date'], &[type='time'] {`
`48`	`48`	`~ .label:not(.fixed) {`
`49`	`49`	`top: $input-focus-label-top;`
`50`	`50`	`font-size: $input-label-font-size;`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ class Overlay extends React.Component {`
`36`	`36`	`const overlayStyle = {};`
`37`	`37`
`38`	`38`	`if (this.props.active) {`
`39`		- if (this.props.opacity > 0) className += ` ${style.active}`;
	`39`	+ className += ` ${style.active}`;
`40`	`40`	`overlayStyle.opacity = this.props.opacity;`
`41`	`41`	`}`
`42`	`42`	if (this.props.className) className += ` ${className}`;